/* Aember — refined. Calm warm base, photo-led layout, editorial section rhythm. No animated gradient, no glitch. Brand palette + type kept. */ :root { --dark-brown: #521C0D; --rust: #D5451B; --amber: #FF9B45; --cream: #F4E7E1; /* Deep, near-black warm base so photography supplies the colour and text stays legible (the old multi-stop gradient could not guarantee AA). */ --ground: #1c0a04; --ground-2: #25100a; --line: rgba(244, 231, 225, 0.16); --line-amber: rgba(255, 155, 69, 0.42); --font-display: 'Playfair Display', Georgia, serif; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-label: 'Josefin Sans', system-ui, sans-serif; --maxw: 1180px; --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Ember -> amber: the brand name bridges Ember (glowing coal) and Amber. One gradient drives the wordmark, the CTA and accent text. */ --ember-grad: linear-gradient(118deg, #C9531C 0%, #F47A2A 50%, #FF9B45 100%); --ember-grad-text: linear-gradient(96deg, #D5601E 0%, #F4812F 48%, #FF9B45 100%); --ember-grad-hover: linear-gradient(118deg, #DA641E 0%, #FF8C3A 50%, #FFB05C 100%); } /* Ember->amber text accent. Used on the prominent amber accents so the colour system echoes the wordmark. */ .accent-grad { background: var(--ember-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; /* Always snap each section to the top of the viewport. */ scroll-snap-type: y mandatory; /* Suppress Safari's pull-to-refresh overscroll at the top: combined with mandatory snap, releasing that gesture resolved to the next snap point and jumped to section 2. "contain" keeps the scroll within the page so the top gesture can no longer trigger a forward snap. */ overscroll-behavior-y: contain; } body { font-family: var(--font-serif); color: var(--cream); background: var(--ground); min-height: 100dvh; /* clip (not hidden): "overflow-x: hidden" forces overflow-y to compute as "auto", which turns into its own scroll container and breaks the scroll-snap declared on (snapping goes flaky on iOS Safari). clip hides horizontal overflow without creating a scroll container, so stays the scroller and snapping works. hidden kept as a fallback for browsers without clip support. */ overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Steady, static warm glow — no animation. Sits behind everything. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(213, 69, 27, 0.18) 0%, transparent 55%), radial-gradient(90% 60% at 85% 110%, rgba(255, 155, 69, 0.10) 0%, transparent 60%); } .container { position: relative; z-index: 1; } img { display: block; max-width: 100%; } a { color: inherit; } ::selection { background: var(--amber); color: var(--dark-brown); } /* ------------------------------------------------------------------ * * Shared section frame * ------------------------------------------------------------------ */ .slide { position: relative; width: 100%; /* 100vh per section: a stable unit (does not change as the URL bar shows/ hides, unlike dvh), so mandatory scroll-snap does not jump mid-scroll. */ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; scroll-snap-stop: always; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(4.5rem, 9vh, 8rem) clamp(1.5rem, 5vw, 4.5rem); } /* Small caps label used across sections. */ .eyebrow { font-family: var(--font-label); font-weight: 400; font-size: clamp(0.72rem, 1.5vw, 0.82rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--amber); background: var(--ember-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-flex; align-items: center; gap: 0.8rem; } .eyebrow::before { content: ''; width: clamp(22px, 4vw, 38px); height: 1px; background: var(--line-amber); } /* ------------------------------------------------------------------ * * Fixed chrome: lang toggle + scroll-spy dots * ------------------------------------------------------------------ */ .lang-toggle { position: fixed; top: 1.4rem; right: 1.6rem; z-index: 60; font-family: var(--font-label); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.22em; color: var(--cream); background: rgba(28, 10, 4, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 0.85rem; cursor: pointer; opacity: 0.85; transition: color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease; } .lang-toggle:hover { opacity: 1; color: var(--amber); border-color: var(--line-amber); } .slide-dots { position: fixed; top: 50%; right: 1.5rem; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 0.85rem; align-items: center; } .slide-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 155, 69, 0.7); background: transparent; cursor: pointer; opacity: 0.65; transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; } .slide-dot:hover { opacity: 1; } .slide-dot.is-active { background: var(--amber); border-color: var(--amber); opacity: 1; transform: scale(1.4); } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 100; padding: 0.6rem 1rem; background: var(--amber); color: var(--dark-brown); font-family: var(--font-label); font-size: 0.85rem; letter-spacing: 0.08em; text-decoration: none; border-radius: 3px; transition: top 0.2s ease; } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ * * Buttons * ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-label); font-size: clamp(0.8rem, 1.7vw, 0.92rem); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 0.95rem 1.9rem; border-radius: 999px; cursor: pointer; transition: transform 0.3s var(--reveal-ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .btn-primary { color: var(--dark-brown); background: var(--ember-grad); background-size: 140% 140%; background-position: center; border: 1px solid var(--amber); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--ember-grad-hover); border-color: #FFD089; transform: translateY(-3px); } .btn-ghost { color: var(--cream); background: transparent; border: 1px solid var(--line-amber); } .btn-ghost:hover, .btn-ghost:focus-visible { color: var(--amber); border-color: var(--amber); transform: translateY(-3px); } .btn .arrow { transition: transform 0.3s var(--reveal-ease); } .btn:hover .arrow { transform: translateX(4px); } /* ------------------------------------------------------------------ * * 1 — HERO (photo-led) * ------------------------------------------------------------------ */ .hero { /* svh for the hero only: its content is bottom-anchored, so it must fit the visible viewport (not the larger 100vh) or the CTA hides under the iOS toolbar. svh is the small (stable) viewport, so it fits AND does not resize mid-scroll the way dvh does. The other sections keep 100vh. */ min-height: 100svh; justify-content: flex-end; overflow: hidden; } .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% top; z-index: 0; } /* Warm scrim: heavier toward the lower-left where the text sits, so the people on the right stay visible. */ .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20, 7, 3, 0.97) 0%, rgba(20, 7, 3, 0.72) 28%, rgba(20, 7, 3, 0.12) 58%, rgba(20, 7, 3, 0.34) 100%), linear-gradient(to right, rgba(20, 7, 3, 0.85) 0%, rgba(20, 7, 3, 0.30) 42%, transparent 72%); } .hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(4rem, 11vh, 8rem); } .hero-inner { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } .logo-svg { display: block; width: clamp(260px, 42vw, 480px); height: auto; /* Stacked shadows: a tight dark rim hugs the letterforms so the amber wordmark stays legible over light concrete; a soft one floats it. */ filter: drop-shadow(0 1px 2px rgba(20, 7, 3, 0.75)) drop-shadow(0 3px 10px rgba(20, 7, 3, 0.6)) drop-shadow(0 14px 34px rgba(0, 0, 0, 0.5)); } .hero-tagline { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 4.2vw, 2.6rem); line-height: 1.1; color: var(--cream); text-shadow: 0 2px 12px rgba(20, 7, 3, 0.8); } .hero-offerings { display: flex; flex-wrap: wrap; gap: 0.5rem 0; font-family: var(--font-label); font-size: clamp(0.72rem, 1.6vw, 0.9rem); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 6px rgba(20, 7, 3, 0.9); } .hero-offerings .offering + .offering::before { content: '·'; margin: 0 0.7em; color: var(--amber); } .hero-duo { font-family: var(--font-serif); font-size: clamp(1.05rem, 2.4vw, 1.45rem); letter-spacing: 0.02em; color: var(--cream); text-shadow: 0 1px 6px rgba(20, 7, 3, 0.9); } .hero-duo .artist { font-weight: 600; color: var(--amber); background: var(--ember-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-duo .role { opacity: 0.85; font-style: italic; } .hero-actions { margin-top: 0.6rem; } .scroll-hint { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--cream); opacity: 0.7; text-decoration: none; animation: bob 2.4s ease-in-out infinite; } .scroll-hint:hover { opacity: 1; color: var(--amber); } .scroll-hint svg { width: 22px; height: 22px; } @keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } /* ------------------------------------------------------------------ * * 2 — LE DUO (split: photo + text) * ------------------------------------------------------------------ */ .duo { background: var(--ground-2); } .duo .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .duo-figure { position: relative; margin: 0; } .duo-figure img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: center; border: 1px solid var(--line); } .duo-figure::after { content: ''; position: absolute; left: clamp(14px, 2vw, 26px); top: clamp(14px, 2vw, 26px); width: 100%; height: 100%; border: 1px solid var(--line-amber); z-index: -1; } .duo-body { max-width: 30rem; } .duo-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; color: var(--cream); margin: 1.4rem 0 1.2rem; text-wrap: balance; } .duo-title em { color: var(--amber); font-style: italic; } .duo-text { font-size: clamp(1.1rem, 2.3vw, 1.4rem); line-height: 1.5; color: var(--cream); opacity: 0.92; margin-bottom: 1.6rem; text-wrap: pretty; /* Preserve the blank-line paragraph break in the bio copy (set as \n\n via i18n) while still collapsing source indentation. */ white-space: pre-line; } .duo-meta { font-family: var(--font-label); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.16em; line-height: 1.9; text-transform: uppercase; color: var(--cream); opacity: 0.7; margin-bottom: 1.8rem; } /* ------------------------------------------------------------------ * * 3 — ÉCOUTER (audio feature) * ------------------------------------------------------------------ */ .listen { background: var(--ground); text-align: center; } .listen .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; } .listen-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.05; color: var(--cream); margin: 1.4rem 0 0.6rem; } .listen-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--amber); background: var(--ember-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2.6rem; } .player { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.6rem); flex-wrap: wrap; justify-content: center; padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.4rem, 4vw, 2.4rem); border: 1px solid var(--line); border-radius: 14px; background: rgba(244, 231, 225, 0.03); } .teaser-button { flex: 0 0 auto; width: clamp(52px, 12vw, 64px); height: clamp(52px, 12vw, 64px); border-radius: 50%; border: 1px solid var(--line-amber); background: rgba(255, 155, 69, 0.12); color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .teaser-button:hover { color: var(--amber); background: rgba(255, 155, 69, 0.22); transform: translateY(-3px); } .teaser-button svg { width: 44%; height: 44%; } .icon-pause { display: none; } .teaser-button[aria-pressed="true"] .icon-play { display: none; } .teaser-button[aria-pressed="true"] .icon-pause { display: block; } .teaser-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left; } .teaser-title { font-family: var(--font-label); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); } .teaser-time { font-family: var(--font-label); font-size: 0.95rem; color: var(--amber); letter-spacing: 0.05em; min-width: 3ch; } .waveform { width: clamp(160px, 34vw, 300px); height: 54px; } /* ------------------------------------------------------------------ * * 4 — CONCERTS * ------------------------------------------------------------------ */ .concerts { background: var(--ground-2); } .concerts-head { margin-bottom: clamp(2rem, 5vw, 3.2rem); } .concerts-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5.5vw, 3.4rem); color: var(--cream); margin-top: 1.2rem; } .concerts-groups { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; } .concerts-subtitle { font-family: var(--font-label); font-size: 0.82rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); padding-bottom: 0.8rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line-amber); } .concerts-list { list-style: none; display: flex; flex-direction: column; gap: 1.3rem; } .concert { display: flex; flex-direction: column; gap: 0.25rem; } .concert-date { font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); } .concert-venue { font-size: 1.25rem; color: var(--cream); } .concert-link { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--line-amber); transition: color 0.3s ease, border-color 0.3s ease; align-self: flex-start; } .concert-link:hover, .concert-link:focus-visible { color: var(--amber); border-color: var(--amber); } .concerts-empty { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--cream); opacity: 0.75; } /* ------------------------------------------------------------------ * * 5 — CONTACT (closing) * ------------------------------------------------------------------ */ .contact { background: var(--ground); text-align: center; overflow: hidden; } .contact .wrap { display: flex; flex-direction: column; align-items: center; } .contact-mark { width: clamp(150px, 26vw, 240px); height: auto; opacity: 0.95; margin-bottom: 2rem; } .contact-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.1; color: var(--cream); max-width: 16ch; text-wrap: balance; margin-bottom: 1rem; } .contact-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--amber); background: var(--ember-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2.4rem; } .contact-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .contact-email { margin-top: 2.4rem; font-family: var(--font-label); font-size: 0.85rem; letter-spacing: 0.14em; color: var(--cream); opacity: 0.7; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease; } .contact-email:hover { color: var(--amber); opacity: 1; border-color: var(--line-amber); } /* ------------------------------------------------------------------ * * Scroll reveal * ------------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--reveal-ease), transform 0.8s var(--reveal-ease); } .reveal[data-d="1"] { transition-delay: 0.08s; } .reveal[data-d="2"] { transition-delay: 0.16s; } .reveal[data-d="3"] { transition-delay: 0.24s; } .reveal[data-d="4"] { transition-delay: 0.32s; } .reveal.is-in { opacity: 1; transform: none; } /* Hard failsafe: if the animation clock is ever throttled (offscreen capture, background tab), force the end-state with no transition so content can never get stuck hidden. */ .reveal.reveal-done { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* ------------------------------------------------------------------ * * Responsive * ------------------------------------------------------------------ */ @media (max-width: 860px) { .duo .wrap { grid-template-columns: 1fr; gap: 2.4rem; } .duo-figure { order: -1; max-width: 460px; } .duo-body { max-width: none; } .concerts-groups { grid-template-columns: 1fr; gap: 2.4rem; } .hero-photo { object-position: 68% top; } } @media (max-width: 480px) { .lang-toggle { top: 0.9rem; right: 1rem; } .slide-dots { right: 0.8rem; gap: 0.7rem; } .hero-inner { gap: 1.1rem; } /* Le Duo stacks photo + bio on phones; trim padding, photo height, gap and text size so the whole section fits within one screen (no overflow, which made the snap scroll feel off). */ .duo .wrap { padding-top: 2.2rem; padding-bottom: 2.2rem; gap: 1.5rem; } .duo-figure img { aspect-ratio: 4 / 2.4; } .duo-title { margin: 0.9rem 0 0.8rem; } .duo-text { font-size: 1.05rem; line-height: 1.45; margin-bottom: 1.2rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none; } .scroll-hint { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } }