/* ========================================================= Mute landing page — v1 Palette: swappable themes --------------------------------------------------------- Every colour the page uses is a token. A theme is just a block of tokens below; nothing is inherited between themes, so each block must define all of them. The active theme is selected with `data-theme` on (see assets/theme.js). Theme 1 ("terminal") is the default. ========================================================= */ :root { /* theme-independent */ --wrap: 68rem; --radius: 6px; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Monospace throughout, per the terminal aesthetic. */ --font-sans: var(--font-mono); --font-display: "Retrogression", Georgia, "Times New Roman", serif; } /* Self-hosted (SIL OFL 1.1 — see font-sources/JetBrainsMono-LICENSE.txt), so no third-party CDN request on first paint. Latin subset, variable weight. */ @font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ Theme 1 — "terminal": retro-monochrome, light values on a charcoal ground. (The light-on-paper counterpart is kept in the docs; adding it back is one more block here.) ------------------------------------------------------------------ */ :root, [data-theme="terminal"] { /* The reference: a terminal output with about five colours. `--hot` is deliberately the leading colour — labels, headings, links and numbers all lead with it, and everything else stays paper / ink / dim / line. */ --bg-color: #0a0a09; /* paper */ --text-color: #d8d3c4; /* ink */ --accent: #e5553b; /* hot: the leading colour */ --alert: #e5553b; /* same family: warnings */ --panel-border: #2b2a26; /* line */ --chassis: var(--bg-color); --chassis-2: #111110; /* raised surface */ --line: var(--panel-border); --ink: var(--text-color); --ink-dim: #6f6b61; /* dim */ --key: #a9a393; /* mid / secondary text */ --bright: #f4eddb; /* value / brightest text */ --orange: var(--accent); /* leading accent */ --red: var(--alert); --yellow: var(--bright); /* canvas highlight */ --green: var(--key); /* canvas secondary */ /* canvas-only */ --fx-strong: #f4eddb; /* brightest glyph */ --fx-fade: #2b2a26; /* faint glyph: toward the ground */ /* surfaces */ --scrim-rgb: 10, 10, 9; /* hero media wash */ --item-border: rgba(216, 211, 196, .18); /* depth: a flat paper ground with a faint lift — the reference is deliberately low-contrast around the content. */ --glow-rgb: 229, 85, 59; --grad-page: radial-gradient(900px 620px at 50% -6%, rgba(229, 85, 59, .06), transparent 68%), radial-gradient(760px 520px at 92% 104%, rgba(216, 211, 196, .035), transparent 70%); } /* ------------------------------------------------------------------ Theme 2 — "tr-808": palette derived from the Omarchy "Demon" theme (github.com/HANCORE-linux/omarchy-demon-theme, MIT). Near-black ground, bone foreground, amber bar text, orange-red cursor, and a dark olive accent. Contrast on the #0F0F0F ground: text 13.1:1, amber 10.0:1, cursor 5.6:1. Three values are lifted from the source purely for legibility, noted inline. ------------------------------------------------------------------ */ [data-theme="tr808"] { --bg-color: #0F0F0F; /* background */ --text-color: #E0D4C2; /* foreground */ --accent: #7F8A66; /* olive, lifted from #5C624B (3.0 -> 5.2:1) */ --alert: #E03434; /* red, lifted from #BB1C1C (3.0 -> 4.3:1) */ --panel-border: #575E56; /* lifted from #3A403B so panes stay visible */ --chassis: var(--bg-color); --chassis-2: #1A1A1A; /* alternate pane: raised */ --line: var(--panel-border); --ink: var(--text-color); --ink-dim: #7A7D80; /* muted text (theme colour 6) */ --key: #BDB5AA; /* mid text */ --bright: #FFC859; /* brightest */ --orange: #FFAA00; /* bar text: primary accent */ --red: var(--alert); --yellow: #FF4500; /* cursor: hover / detail / active */ --green: var(--accent); /* canvas-only */ --fx-strong: #FFC859; /* bright amber glyph */ --fx-fade: #3A403B; /* faint glyph: fades toward ground */ /* surfaces */ --scrim-rgb: 15, 15, 15; --item-border: rgba(224, 212, 194, .22); /* depth: warmer and more contrasty than the terminal theme, so switching themes changes the atmosphere and not only the hue. Amber is deliberately kept OFF the headings and pushed into the small accents + the one CTA, so the palette does not read as “all orange”. */ --glow-rgb: 255, 140, 0; --grad-page: radial-gradient(900px 620px at 50% -6%, rgba(255, 170, 0, .085), transparent 66%), radial-gradient(820px 560px at 92% 104%, rgba(127, 138, 102, .10), transparent 70%), radial-gradient(640px 460px at 6% 44%, rgba(224, 212, 194, .055), transparent 72%); } /* Display face for headings. Only Regular (400) exists, so we must not let the browser synthesise a bold. The face also has NO digits / '+' / em dash, so it is used only on headings whose text is purely letters (see docs). */ @font-face { font-family: "Retrogression"; src: url("fonts/retrogression-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html { background: var(--chassis); scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: 12px; line-height: 1.5; letter-spacing: .02em; -webkit-font-smoothing: antialiased; } /* Ambient depth, in two fixed layers behind everything at z-index:-1: a colour wash, plus the seamless tile texture that replaced the alignment grid (converted from design-references/*.exr — see README). Sections carry no background of their own, which keeps the flow seamless. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grad-page); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("textures/tile-floor.webp"); background-repeat: repeat; background-size: 512px 512px; /* Texture, not wallpaper: it must sit far behind the content. */ opacity: .12; } /* Headings and data keys lead with the accent colour. Solid rather than a gradient — the reference design is flat, and the big type should simply carry the red rather than blend across it. */ .section__title { color: var(--orange); } .stat dd { color: var(--orange); } a { color: inherit; } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .narrow { max-width: 46rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--orange); color: var(--chassis); padding: .6rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } /* ------------------- Header ------------------- */ /* Fixed overlay that stays out of the way: hidden on first load so the hero screensaver owns the screen, then slides down once the visitor scrolls. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: color-mix(in srgb, var(--chassis) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); transform: translateY(-100%); visibility: hidden; transition: transform .32s ease, visibility 0s linear .32s; } .site-header.is-visible { transform: translateY(0); visibility: visible; transition: transform .32s ease, visibility 0s linear 0s; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; } .wordmark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--font-mono); font-weight: 700; letter-spacing: .22em; font-size: .95rem; } .wordmark__glyph { color: var(--orange); font-size: .8em; } .site-nav { display: flex; gap: 1.5rem; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; } .site-nav a { text-decoration: none; color: var(--ink-dim); padding: .25rem 0; border-bottom: 1px solid transparent; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--orange); } /* ------------------- Theme switch ------------------- */ .themes { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .themes__btn { appearance: none; background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--ink-dim); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; padding: .45rem .7rem; cursor: pointer; white-space: nowrap; } .themes__btn:first-child { border-left: 0; } .themes__btn:hover { color: var(--ink); } .themes__btn[aria-pressed="true"] { /* Deliberately not a solid accent fill: a thin lit edge instead, so the switch does not add another block of accent colour to the page. */ color: var(--ink); background-color: rgba(var(--glow-rgb), .14); box-shadow: inset 0 -2px 0 var(--orange); } .themes__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; } /* ------------------- Buttons ------------------- */ .btn { display: inline-block; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .05em; text-decoration: none; padding: .7rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: transparent; transition: border-color .15s ease, background .15s ease, color .15s ease; white-space: nowrap; } .btn:hover, .btn:focus-visible { border-color: var(--orange); color: var(--orange); } .btn--solid { background: var(--orange); border-color: var(--orange); color: var(--chassis); font-weight: 700; } .btn--solid:hover, .btn--solid:focus-visible { background: var(--bright); border-color: var(--bright); color: var(--chassis); } .btn--ghost { color: var(--ink-dim); } /* ------------------- Accessibility ------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------- Hero (full-screen screensaver) ------------------- */ .hero { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; /* fills the screen, but can grow on small screens */ overflow: hidden; isolation: isolate; /* No background of its own: the ambient wash + tile texture show through, so the hero and the sections share one surface. */ } /* Layer 1: cursor-trail gallery. This is the opening view of the site. */ .hero__gallery { position: absolute; inset: 0; z-index: 1; } /* Concrete ground, tiled. The top layer tints it toward the page so it does not shout, and the mask fades the whole thing out at the bottom so the hero dissolves into the page's own texture instead of ending on a hard edge. */ .hero__bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(var(--scrim-rgb), .5), rgba(var(--scrim-rgb), .5)), url("textures/concrete.webp"); background-size: auto, 640px 640px; background-repeat: repeat, repeat; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 54%, transparent 100%); } /* The animated terminal canvas, full-bleed and TRANSPARENT so the gallery shows through. It must not intercept pointer input. */ .hero__fx { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 3; pointer-events: none; } /* Layer 2: dims the media so the ascii and copy stay readable on top. */ .hero__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( to bottom, rgba(var(--scrim-rgb), .78) 0%, rgba(var(--scrim-rgb), .40) 26%, rgba(var(--scrim-rgb), .40) 52%, rgba(var(--scrim-rgb), .60) 70%, rgba(var(--scrim-rgb), .10) 94%, transparent 100% ); } .hero__content { position: relative; z-index: 4; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(1rem, 2.5vh, 1.75rem); padding-top: clamp(3rem, 8vh, 5rem); padding-bottom: clamp(2.5rem, 7vh, 4rem); /* Let pointer input fall through to the gallery trail underneath; only the link below re-enables it. */ pointer-events: none; } /* Reserves the zone the canvas art is centred in. */ .hero__stage { flex: 0 1 auto; width: 100%; height: clamp(170px, 30vh, 330px); } .hero__tagline { margin: 0; font-family: var(--font-mono); font-size: clamp(.75rem, 1.7vw, .95rem); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); } .hero__dot { color: var(--orange); margin: 0 .7em; } .hero__scroll { pointer-events: auto; position: absolute; bottom: clamp(.75rem, 3.5vh, 2rem); left: 50%; transform: translateX(-50%); color: var(--ink-dim); font-size: 1.2rem; line-height: 1; text-decoration: none; animation: heroNudge 2.4s ease-in-out infinite; } .hero__scroll:hover, .hero__scroll:focus-visible { color: var(--orange); } @keyframes heroNudge { 0%, 100% { transform: translate(-50%, 0); opacity: .5; } 50% { transform: translate(-50%, 8px); opacity: 1; } } /* Content that used to sit in the hero now lives in the intro section. */ .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } /* Stats as one compact strip: label and value on the same line, hairlines above and below — instead of four large number blocks. */ .stats-wrap { margin-top: clamp(1.75rem, 4vw, 2.75rem); } .stats { display: flex; flex-wrap: wrap; justify-content: center; /* the four figures sit as one centred strip */ gap: .4rem 1.75rem; margin: 0; padding: .55rem 0 .75rem; border-top: 1px solid var(--line); /* No bottom rule: nothing should sit between the figures and the ticker. */ } .stat { display: flex; align-items: baseline; gap: .5rem; } .stat dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 0; } .stat dd { margin: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 700; } /* ------------------- Sections ------------------- */ /* Tighter vertical rhythm: the reference packs rows close together. One continuous surface — section separation is done by the `[ NN — LABEL ]` heading and the ascii bands, not by backgrounds or rules. */ .section { padding: clamp(2rem, 4vw, 3.25rem) 0; } /* Deliberately the one flourish kept large: everything else is compact. */ .section__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5.2vw, 3.1rem); line-height: 1.1; margin: 0 0 1rem; letter-spacing: 0; } .section__intro { max-width: 40rem; color: var(--ink-dim); margin: 0 0 1.5rem; } .lead { font-size: 14px; color: var(--ink); } .section p { margin: 0 0 .8rem; } .section p:last-child { margin-bottom: 0; } .pullquote { margin-top: 1.25rem !important; padding-left: .9rem; border-left: 2px solid var(--orange); font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); } /* ------------------- Ledger: compact data rows ------------------- */ /* Two- and three-column rows instead of boxed cards: the same information in about a third of the vertical space, reading like terminal output. */ .ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .ledger__row { display: grid; grid-template-columns: 3.5rem 14rem 1fr; gap: .15rem 1.25rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--line); } /* Required: `display: grid` above otherwise overrides the `hidden` attribute, so collapsed rows would stay on screen. */ .ledger__row[hidden] { display: none; } .ledger--wide .ledger__row { grid-template-columns: 12rem 1fr; } .ledger__key { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--orange); } /* The `>` prompt from the reference output. */ .ledger__key::before { content: "> "; color: var(--ink-dim); font-weight: 400; } .ledger__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--key); } /* Editions whose date has not been migrated yet. */ .ledger__meta--pending { color: var(--ink-dim); opacity: .75; } /* The 3-column layout assumes a wide column. On a phone the fixed key + meta track plus a long word overflows the viewport (measured: the last value reached x=414 in a 390px viewport), so the row folds instead. */ @media (max-width: 720px) { .ledger__row, .ledger--wide .ledger__row { grid-template-columns: 3.5rem 1fr; } .ledger__val { grid-column: 1 / -1; } } .ledger__val { font-size: 12px; color: var(--ink); margin: 0; } .ledger__row:hover .ledger__val { color: var(--bright); } /* Reference style: inline links carry a dotted underline rather than a solid one. */ .section__footnote { margin-top: 1.25rem !important; font-size: 11px; color: var(--ink-dim); } .section__footnote a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink-dim); } .section__footnote a:hover { color: var(--orange); border-bottom-color: var(--orange); } /* ------------------- Principles → handled by .ledger ------------------- */ /* The Mute mark, inlined so its fill can follow the theme's text colour — the SVG ships white, which would be wrong on a light ground. */ .body-mark { display: block; width: clamp(120px, 16vw, 176px); height: auto; margin: clamp(1.5rem, 4vw, 2.5rem) auto; opacity: .92; } .body-mark svg { display: block; width: 100%; height: auto; } .body-mark .cls-1 { fill: var(--ink); } /* The manifesto is a link into the lightbox, not an inline image. */ .manifesto-link { margin: clamp(1.5rem, 4vw, 2.5rem) 0; } .manifesto-link a { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink-dim); } .manifesto-link a:hover { color: var(--orange); border-bottom-color: var(--orange); } /* Selector is deliberate: `.section p { margin: 0 0 .8rem }` outranks a bare `.safety`, which is why the top margin silently did nothing. */ .section .safety { padding: .8rem 1rem; border-left: 2px solid var(--red); background-color: var(--chassis-2); border-radius: 0 var(--radius) var(--radius) 0; font-size: 12px; /* Clear of the ledger above it. */ margin-top: clamp(2.5rem, 6vw, 3.5rem); } /* ------------------- Contact ------------------- */ .contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; } /* ------------------- Hero gallery (cursor-trail backdrop) ------------------- */ /* Layer 1 of the hero (see .hero__gallery above). The ascii canvas and the copy sit on top of this. */ .hero__trail { position: absolute; inset: 0; } /* Default: a static "fanned" arrangement, positioned and rotated by the per-image --x / --y / --r custom properties set in index.html. This is the opening view of the site, and it doubles as the no-JS and reduced-motion fallback — the media is simply there. */ .hero__item { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: clamp(143px, 16.5vw, 253px); height: auto; max-height: 44vh; object-fit: cover; opacity: 1; border: 1px solid var(--item-border); border-radius: var(--radius); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); cursor: pointer; } /* Items not in the fan start hidden in the static state; the live trail reveals them as it picks them up. */ .hero__item[data-status="inactive"] { opacity: 0; } /* Live trail: JS adds .is-live, drives left/top, and seeds the opening fan by marking the first few items active. Everything else fades out. */ .hero.is-live .hero__item { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.55) rotate(var(--r, 0deg)); } .hero.is-live .hero__item[data-status="active"] { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg)); } .hero__trail[hidden] { display: none; } /* ------------------- Lightbox ------------------- */ body.has-lightbox { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3.5rem); background: color-mix(in srgb, var(--chassis) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; } .lightbox[hidden] { display: none; } .lightbox:focus { outline: none; } .lightbox__media { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; } .lightbox__media img, .lightbox__media video { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); background: var(--chassis); } .lightbox__hint { position: absolute; left: 50%; bottom: clamp(1rem, 4vh, 2rem); transform: translateX(-50%); margin: 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); } /* ------------------- ASCII bands (section tricks) ------------------- */ /* Decorative character fields between sections. Every cell is chosen from its own x/y position and the frame number — see assets/ascii.js. The text span is a no-JS fallback and is hidden only once the canvas has drawn. */ /* Pure overlay: no background of its own, so it never interrupts the fade from the hero's concrete ground into the page texture behind it. */ .ascii-band { position: relative; height: clamp(100px, 13vh, 150px); overflow: hidden; } .ascii-band__fx { position: absolute; inset: 0; display: block; width: 100%; height: 100%; /* Texture, not content: it should sit back behind the section rhythm. */ opacity: .55; /* Dissolve the field at the top and bottom so the band blends into the page instead of reading as a hard rectangle of text. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 66%, transparent 100%); } .ascii-band__fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--font-mono); font-size: .9rem; letter-spacing: .28em; color: var(--ink-dim); opacity: .3; white-space: nowrap; } .ascii-band.has-fx .ascii-band__fallback { display: none; } /* The `01 — About` style mini-titles were removed at request: the big display heading now starts the section on its own. */ /* Corner marks and boxed cards are gone — the `>` prompt does that job now. */ /* ------------------- Booking ticker ------------------- */ /* No rule and no label above the ticker — it sits directly under the stats, in the same 46rem column as every other section. */ .ticker { margin-top: clamp(.75rem, 2vw, 1.25rem); } /* The moving copy is aria-hidden; .sr-only in the markup is the readable one. */ .ticker__viewport { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); } .ticker__track { display: flex; width: max-content; /* so -50% is exactly one group -> seamless loop */ will-change: transform; animation: ticker-pan 52s linear infinite; } .ticker__group { display: flex; flex: 0 0 auto; padding-right: .9rem; } .ticker__item { font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap; } .ticker__item::after { content: "·"; color: var(--orange); margin: 0 .85rem; } @keyframes ticker-pan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .ticker__viewport:hover .ticker__track, .ticker__viewport:focus-within .ticker__track { animation-play-state: paused; } /* ------------------- Expandable editions ------------------- */ .ledger__toggle { appearance: none; margin-top: .7rem; padding: .45rem .85rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-dim); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } .ledger__toggle:hover, .ledger__toggle:focus-visible { color: var(--orange); border-color: var(--orange); } .ledger__toggle > span:last-child { display: inline-block; margin-left: .35em; transition: transform .18s ease; } .ledger__toggle[aria-expanded="true"] > span:last-child { transform: rotate(180deg); } /* ------------------- Soundtrack player (sticky, bottom-right) ---------- */ .player { position: fixed; right: clamp(.75rem, 2vw, 1.75rem); bottom: clamp(.75rem, 2vw, 1.75rem); z-index: 60; /* above content, below the lightbox */ display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem; background-color: var(--chassis-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: opacity .2s ease; } .player[hidden] { display: none; } /* The media element is not a control in its own right. */ .player audio { display: none; } body.has-lightbox .player { opacity: 0; pointer-events: none; } .player__btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; font-size: 10px; line-height: 1; color: var(--chassis); background: var(--orange); border: 0; border-radius: 50%; cursor: pointer; } .player__btn:hover, .player__btn:focus-visible { background: var(--bright); outline: none; } .player__title { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); white-space: nowrap; } .player__bar { display: block; width: 56px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; cursor: pointer; } .player__fill { display: block; width: 0; height: 100%; background: var(--orange); transition: width .25s linear; } /* ------------------- Footer ------------------- */ .site-footer { padding: 2.5rem 0; font-size: .88rem; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; } .footer-brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-weight: 700; letter-spacing: .2em; } .footer-brand .wordmark__glyph { color: var(--orange); } .footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--font-mono); font-size: .78rem; } .footer-links a { color: var(--ink-dim); text-decoration: none; } .footer-links a:hover, .footer-links a:focus-visible { color: var(--orange); } .footer-note { width: 100%; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-dim); font-family: var(--font-mono); font-size: .75rem; } /* ------------------- Responsive ------------------- */ @media (max-width: 640px) { .site-nav { display: none; } .header-cta { padding: .55rem .8rem; } .themes__btn { padding: .4rem .45rem; font-size: .66rem; letter-spacing: .04em; } .actions .btn { flex: 1 1 auto; text-align: center; } .hero__tagline { font-size: .68rem; letter-spacing: .13em; } .hero__item { width: clamp(114px, 33vw, 185px); max-height: 37.4vh; } /* Keep the player very small: play/pause + progress only. */ .player__title { display: none; } .player__bar { width: 44px; } } @media (max-height: 620px) { /* Short landscape screens: tighten the hero spacing. */ .hero__content { gap: 1rem; } .hero__stage { height: clamp(120px, 34vh, 200px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .edition-card { transition: none; } .hero__scroll { animation: none; } }