/* ──────────────────────────────────────────────────────────── Schulcast Hero Player · Styles Nutzt eure CSS Custom Properties (--fynbos-*, --space-*, --color-*) mit Hex-Fallbacks, damit der Player auch ohne voll geladenes Design-System funktioniert. ──────────────────────────────────────────────────────────── */ .sc-hero { /* Schulcast palette — gemappt auf unsere tatsächlichen --fynbos-*-Vars */ --sc-ink: var(--color-bg-main, #1b1d14); --sc-cream: var(--color-text-primary, #f4efe2); --sc-red: var(--fynbos-pomegranate, #c43f2c); --sc-gold: var(--fynbos-apricot, #d89a2b); --sc-olive: var(--fynbos-bistre, #7f8a57); --sc-sky: var(--fynbos-blue, #7eb6c9); --sc-blush: var(--fynbos-melon, #e8b6a8); --sc-sage: var(--fynbos-bistre, #b7be8e); position: relative; background: var(--sc-ink); color: var(--sc-cream); /* Platz oben für den fixed Header (~72px). Fraunces lädt bereits via Google-Fonts-URL im , Syne & DM Sans sind auf der Site geladen. */ padding: calc(var(--header-height, 72px) + 24px) 0 0; overflow: hidden; font-family: 'DM Sans', system-ui, sans-serif; } /* Top rule */ .sc-hero__rule { display: flex; justify-content: space-between; align-items: baseline; padding: 0 48px 28px; border-bottom: 1px solid rgba(244, 239, 226, 0.13); font-family: 'Syne', system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-feature-settings: "tnum"; } .sc-hero__status { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; color: var(--sc-gold); } .sc-hero__status.is-playing { color: var(--sc-red); } .sc-hero__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; margin-right: 4px; } .sc-hero__status.is-playing .sc-hero__dot { animation: sc-pulse 1.1s ease-in-out infinite; } @keyframes sc-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } } .sc-hero__sep { opacity: 0.35; } .sc-hero__time { color: var(--sc-cream); } .sc-hero__time [data-sc-current] { color: var(--sc-gold); } .sc-hero__time-sep { opacity: 0.4; margin: 0 6px; } /* Giant ghost EP number */ .sc-hero__ep-ghost { position: absolute; right: 180px; top: 115px; font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 320px; line-height: 0.75; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 239, 226, 0.09); pointer-events: none; user-select: none; z-index: 0; } /* Main grid */ .sc-hero__grid { position: relative; display: grid; grid-template-columns: 140px 1fr 140px; gap: 24px; align-items: stretch; padding: 56px 48px 20px; z-index: 1; } .sc-hero__column-label { font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 96px; line-height: 0.85; letter-spacing: -0.02em; text-transform: uppercase; color: var(--sc-cream); writing-mode: vertical-rl; user-select: none; } .sc-hero__column-label--left { transform: rotate(180deg); align-self: start; } .sc-hero__column-label--right { justify-self: end; align-self: end; text-align: right; } .sc-hero__period { color: var(--sc-red); } /* Waveform stage */ .sc-hero__stage { position: relative; width: 100%; height: 300px; cursor: crosshair; } .sc-hero__wave { display: block; width: 100%; height: 100%; overflow: visible; } /* Play pad (pill) */ .sc-hero__playpad { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 16px; padding: 28px 44px; background: var(--sc-cream); color: var(--sc-ink); border: none; cursor: pointer; font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; box-shadow: 10px 10px 0 var(--sc-red); transition: transform 120ms ease, box-shadow 120ms ease; } .sc-hero__playpad:hover { transform: translate(calc(-50% - 3px), calc(-50% - 3px)); box-shadow: 14px 14px 0 var(--sc-red); } .sc-hero__playpad:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: 4px; } .sc-hero__playpad-icon { display: inline-flex; } /* Scrub tooltip */ .sc-hero__scrub { position: absolute; top: -38px; transform: translateX(-50%); background: var(--sc-gold); color: var(--sc-ink); padding: 6px 12px; font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; pointer-events: none; font-feature-settings: "tnum"; } .sc-hero__scrub [data-sc-scrub-time] { margin-left: 10px; } /* Bottom info strip */ .sc-hero__info { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; padding: 36px 48px 40px; border-top: 1px solid rgba(244, 239, 226, 0.13); margin-top: 32px; z-index: 1; } .sc-hero__eyebrow { font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sc-gold); margin-bottom: 14px; } .sc-hero__title { font-family: 'Fraunces', 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 64px; line-height: 1; margin: 0; text-wrap: balance; color: var(--sc-cream); } .sc-hero__meta { margin: 14px 0 0; font-size: 16px; color: var(--sc-cream); opacity: 0.7; } .sc-hero__guest { color: var(--sc-gold); opacity: 1; } .sc-hero__bullet { margin: 0 10px; opacity: 0.4; } .sc-hero__info-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .sc-hero__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; border: none; text-decoration: none; white-space: nowrap; } .sc-hero__btn--ghost { background: transparent; color: var(--sc-cream); border: 1px solid rgba(244, 239, 226, 0.26); } .sc-hero__btn--ghost:hover { border-color: var(--sc-cream); } .sc-hero__btn--solid { background: var(--sc-gold); color: var(--sc-ink); } .sc-hero__btn--solid:hover { background: var(--sc-cream); } /* Responsive */ @media (max-width: 900px) { .sc-hero { padding-top: 24px; } .sc-hero__rule { padding: 0 20px 20px; font-size: 10px; letter-spacing: 0.18em; } .sc-hero__ep-ghost { display: none; } .sc-hero__grid { grid-template-columns: 1fr; padding: 24px 20px 0; } .sc-hero__column-label { display: none; } .sc-hero__stage { height: 220px; } .sc-hero__playpad { padding: 18px 26px; font-size: 14px; gap: 10px; box-shadow: 6px 6px 0 var(--sc-red); } .sc-hero__playpad:hover { box-shadow: 10px 10px 0 var(--sc-red); } .sc-hero__info { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px 32px; } .sc-hero__title { font-size: 32px; } .sc-hero__meta { font-size: 14px; } } /* Light theme support — if data-theme="light" is set on */ [data-theme="light"] .sc-hero { --sc-ink: #f4efe2; --sc-cream: #1b1d14; } [data-theme="light"] .sc-hero__ep-ghost { -webkit-text-stroke-color: rgba(27, 29, 20, 0.1); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .sc-hero__playpad { transition: none; } .sc-hero__dot { animation: none !important; } }