/* edouard.live — release gateways. * * The cover art is the light source. Each page injects --accent / --accent2, * sampled from that release's own artwork, and everything luminous on the page * (the bloom behind the sleeve, the hairline that wakes on hover, the focus * ring) is tinted by it. Chronology glows cyan; Deja Vu glows magenta. * * Committed to dark on purpose: every sleeve is neon-on-black, and a light mode * would fight the art rather than serve it. */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Overridden per release by an inline style on . These are the catalog/404 defaults — the neon of the "edouard" logotype itself. */ --accent: #ff2ec4; --accent2: #6cf3ff; --bg: #050406; --ink: #f4f2f6; /* Alphas are set by WCAG AA (4.5:1) against --bg, not by eye: 0.58 measures 6.3:1 and 0.68 measures 8.4:1. The accent bloom lightens the backdrop behind the byline, which lowers contrast for light text, hence the margin. */ --ink-dim: rgba(244, 242, 246, 0.68); --ink-faint: rgba(244, 242, 246, 0.58); --hairline: rgba(244, 242, 246, 0.13); --tile: rgba(255, 255, 255, 0.032); --col: 26.5rem; /* single reading column; the page is a phone-shaped object */ --radius: 14px; --ease: cubic-bezier(0.2, 0.7, 0.25, 1); /* Futura is present on macOS/iOS — a large share of listeners, and what edouard.audio itself uses. Jost is a metric-adjacent open fallback. */ --font: 'Futura', 'Jost', 'Century Gothic', ui-sans-serif, system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; font-family: var(--font); color: var(--ink); background: var(--bg); letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* The room the sleeve lights up: a wash of the release's own colour, bleeding from behind the artwork, plus a fine grain so the gradient never bands. */ .room { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .room::before { content: ''; position: absolute; inset: -30% -30% auto -30%; height: 92vh; background: radial-gradient(58% 50% at 50% 22%, color-mix(in oklab, var(--accent) 42%, transparent), transparent 70%), radial-gradient(46% 42% at 76% 6%, color-mix(in oklab, var(--accent2) 30%, transparent), transparent 72%); filter: blur(46px) saturate(135%); opacity: 0.5; } /* Grain: an inline SVG turbulence, so there is no extra request and no image. */ .room::after { content: ''; position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap { position: relative; z-index: 1; width: 100%; max-width: var(--col); margin-inline: auto; padding: clamp(1.4rem, 5vw, 2.6rem) 1.25rem clamp(2.5rem, 8vw, 4rem); } /* ---------- masthead ---------- */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 5vw, 2.2rem); } .wordmark { font-size: 0.94rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); text-decoration: none; opacity: 0.9; transition: opacity 0.25s var(--ease), text-shadow 0.35s var(--ease); } .wordmark:hover { opacity: 1; text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 70%, transparent); } .langtoggle { appearance: none; background: none; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-dim); font-family: inherit; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4em 0.85em; cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .langtoggle:hover { color: var(--ink); border-color: color-mix(in oklab, var(--accent) 55%, transparent); } /* ---------- the sleeve ---------- */ .sleeve { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; /* The art casts its own light onto the page beneath it. */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 26px 70px -18px color-mix(in oklab, var(--accent) 58%, transparent), 0 10px 30px -12px rgba(0, 0, 0, 0.85); } .sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; } .meta { margin: clamp(1.3rem, 4.5vw, 1.8rem) 0 clamp(1.3rem, 4.5vw, 1.7rem); text-align: center; } .title { margin: 0; font-size: clamp(1.85rem, 8.5vw, 2.5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; /* matches edouard.audio's heading tracking */ text-transform: uppercase; } .byline { margin: 0.5rem 0 0; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .byline .dot { margin-inline: 0.55em; color: color-mix(in oklab, var(--accent) 75%, transparent); } .prompt { margin: 0 0 0.9rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); text-align: center; } /* ---------- platform rows ---------- */ .services { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .svc { position: relative; display: grid; grid-template-columns: 1.55rem 1fr auto; align-items: center; gap: 0.9rem; padding: 0.95rem 1.05rem; border: 1px solid var(--hairline); border-radius: 11px; background: var(--tile); color: var(--ink); text-decoration: none; font-size: 0.98rem; font-weight: 500; letter-spacing: 0.005em; transition: border-color 0.28s var(--ease), background 0.28s var(--ease), transform 0.28s var(--ease), box-shadow 0.28s var(--ease); } .svc .ico { width: 1.5rem; height: 1.5rem; fill: currentColor; color: var(--ink); opacity: 0.9; transition: color 0.28s var(--ease), opacity 0.28s var(--ease), filter 0.35s var(--ease); } .svc .ico--mono { fill: none; } .svc .action { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-faint); transition: color 0.28s var(--ease), transform 0.28s var(--ease); } @media (hover: hover) { .svc:hover { border-color: color-mix(in oklab, var(--accent) 62%, transparent); background: color-mix(in oklab, var(--accent) 9%, var(--tile)); transform: translateY(-1px); box-shadow: 0 8px 26px -12px color-mix(in oklab, var(--accent) 68%, transparent); } .svc:hover .ico { color: var(--accent); opacity: 1; filter: drop-shadow(0 0 9px color-mix(in oklab, var(--accent) 60%, transparent)); } .svc:hover .action { color: var(--ink); transform: translateX(2px); } } .svc:active { transform: translateY(0) scale(0.994); } .svc:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- catalog ---------- */ .catalog { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .rel { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: 1rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--tile); text-decoration: none; color: var(--ink); transition: border-color 0.28s var(--ease), background 0.28s var(--ease), transform 0.28s var(--ease); } .rel img { width: 4.5rem; height: 4.5rem; border-radius: 8px; object-fit: cover; display: block; } .rel .n { display: block; font-size: 1.02rem; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.15; } .rel .d { display: block; margin-top: 0.2rem; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .rel .go { font-size: 0.64rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-faint); transition: color 0.28s var(--ease), transform 0.28s var(--ease); } @media (hover: hover) { .rel:hover { border-color: color-mix(in oklab, var(--rel-accent, var(--accent)) 58%, transparent); background: color-mix(in oklab, var(--rel-accent, var(--accent)) 8%, var(--tile)); transform: translateY(-1px); } .rel:hover .go { color: var(--ink); transform: translateX(2px); } } .rel:focus-visible { outline: 2px solid var(--rel-accent, var(--accent)); outline-offset: 3px; } /* ---------- foot ---------- */ .foot { margin-top: clamp(1.8rem, 6vw, 2.6rem); text-align: center; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .foot a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .foot a:hover { color: var(--ink); border-bottom-color: color-mix(in oklab, var(--accent) 60%, transparent); } .foot .sep { margin-inline: 0.6em; opacity: 0.4; } /* ---------- entrance ---------- */ /* One orchestrated load: the sleeve arrives, then the rows fall in behind it. --i is set per row at build time. */ @keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } @keyframes bloom { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } } .anim .sleeve { animation: bloom 0.75s var(--ease) both; } .anim .meta, .anim .prompt { animation: rise 0.55s var(--ease) both; animation-delay: 0.1s; } .anim .prompt { animation-delay: 0.16s; } .anim .svc, .anim .rel { animation: rise 0.5s var(--ease) both; animation-delay: calc(0.18s + var(--i, 0) * 0.035s); } .anim .foot { animation: rise 0.5s var(--ease) both; animation-delay: 0.5s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } } /* The geo script hides unavailable services via the hidden attribute; the grid would otherwise still lay them out. */ .services [hidden] { display: none; } /* Visually hidden but available to screen readers. */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }