/* ════════════════════════════════════════════════════════════════════════ adityaraju.com — single non-scrolling stage divided into ZONES (v5.0.0). HOW THIS FILE IS ORGANISED ────────────────────────── 1. SHARED FOUNDATION reset, stage, fonts, theme, header/footer/center bars, the bits every section reuses. 2. LAYOUT / ZONES WHERE a section sits. Position only, section-agnostic. Driven by the --cell-* CSS variables js/main.js writes on each
from controls/order.html's zone lines. 3. SECTION A / B / C / D WHAT each section IS (its glyph, ambient scene, sub-nav). Each block is self-contained and scoped to [data-section="x"]; you can read, edit, or lift one out without touching the others. Engine-built sections (any new id in a zone line) use the generic fallback styling at the bottom of this file. TO EDIT (the two knobs you'll reach for most) — both live in controls/: • rename a section / change its link → controls/a.html, b.html, c.html, … • rearrange the page → controls/order.html (zone lines) The structural ids a / b / c / d never change — where they sit comes entirely from the zone lines; label, link, symbol, scene are all swappable. ════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════ 1 · SHARED FOUNDATION ══════════════════════════════════════════ */ * { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; } html,body{ height:100%; } body{ position:relative; width:100%; min-height:100vh; height:100vh; height:100dvh; /* dvh keeps it stable on mobile */ overflow:hidden; overscroll-behavior:none; /* single non-scrolling stage */ background:#ffffff; color:#2b2b2b; font-family:"Cormorant Garamond", Georgia, serif; -webkit-font-smoothing:antialiased; padding-top:env(safe-area-inset-top,0); padding-bottom:env(safe-area-inset-bottom,0); } @media (prefers-reduced-motion: no-preference){ body{ transition:opacity 0.7s ease; } } body.loading{ opacity:0; } /* dark theme — only the neutrals flip; each section's vivid accents are left alone */ :root[data-theme="dark"] body{ background:#1a1916; color:#e9e4da; } /* ── header bar (top) ───────────────────────────────────────────────── Sits fixed at the very top. The JS sets --bar-height to the bar's actual pixel height when a message is present, 0px when not — everything below offsets by that variable so nothing overlaps. */ :root{ --bar-height: 0px; } #header-bar{ position:fixed; top:0; left:0; right:0; z-index:100; /* The bar sits at the very top and its dark background fills the notch strip, so the notch area takes the header colour; the top padding pushes the text clear of the notch. Browser: env() does it. Installed app: --safe-abs does (override just below). */ padding:calc(env(safe-area-inset-top,0px) + 0.55em) 1.4em 0.55em; background:#2b2724; color:#e9e4da; font-size:0.78rem; letter-spacing:0.12em; text-align:center; line-height:1.5; white-space:pre-line; display:none; /* shown by JS only when message is non-empty */ } :root[data-theme="dark"] #header-bar{ background:#111010; color:#c9c4b8; } /* Installed app: --safe-abs (reliable, iOS-floored) fills the notch strip with the header background and clears the text below it. */ :root[data-standalone] #header-bar{ padding-top:calc(var(--safe-abs) + 0.55em); } /* ── footer bar (bottom) ───────────────────────────────────────────────── Same mechanism as the header bar, mirrored to the bottom edge. The JS sets --footer-bar-height when controls/footer.html has a message. */ :root{ --footer-bar-height: 0px; } /* ── stage geometry ────────────────────────────────────────────────── The visible stage is the viewport minus the header bar, the footer bar, AND the site-title band (--site-title-height, set by the JS to the wordmark's reserved height when a "site title:" is present, 0px otherwise — v5.6.0). The title band reserves at the TOP by default; with "site title position: bottom" (v5.7.0) the JS sets data-title-pos="bottom" on the root, moving the band to the bottom (--title-top-band → 0). --stage-top is where the stage begins; --stage-h is its height (the full title band is subtracted either way). Every cell/ambient/divider position below is expressed in these two, so the zones always split only the space the title doesn't occupy. */ :root{ --site-title-height: 0px; --title-top-band: var(--site-title-height); /* Notch / safe-area handling for an INSTALLED app, in two parts: --safe-abs = the raw top inset (0 in a browser — the chrome handles the notch; the real env() inset in a standalone app; floored at 59px on iOS, which often reports it as 0 under the notch/Dynamic Island — see the data-standalone stamp in js/main.js). Used by whichever top element FILLS the notch strip so it takes that element's colour (header bar → header dark; title band → its background), keeping the strip theme-aware for free. --safe-top = the GEOMETRY reserve, non-zero only when NOTHING fills the notch (header off): then the stage + title band start below a blank strip showing the page background. When the header is on it absorbs the notch into its own height (--bar-height), so --safe-top stays 0 and nothing double-counts. */ --safe-abs: 0px; --safe-top: 0px; --stage-top: calc(var(--safe-top) + var(--bar-height) + var(--title-top-band)); --stage-h: calc(100dvh - var(--safe-top) - var(--bar-height) - var(--site-title-height) - var(--footer-bar-height)); } :root[data-standalone]{ --safe-abs: env(safe-area-inset-top,0px); } :root[data-standalone="ios"]{ --safe-abs: max(env(safe-area-inset-top,0px), 59px); } :root[data-standalone][data-header="off"]{ --safe-top: var(--safe-abs); } :root[data-title-pos="bottom"]{ --title-top-band: 0px; } #footer-bar{ position:fixed; bottom:0; left:0; right:0; z-index:100; /* the background fills the home-indicator inset, but the inset is split EVENLY between the top and bottom padding so the text sits at the optical centre of the visible bar (equal gap to the bar's top edge and to the screen edge). Total padding is unchanged, so the measured --footer-bar-height — and all the stage geometry off it — is identical. */ padding:calc(env(safe-area-inset-bottom,0px) / 2 + 0.55em) 1.4em calc(env(safe-area-inset-bottom,0px) / 2 + 0.55em); background:#2b2724; color:#e9e4da; font-size:0.78rem; letter-spacing:0.12em; text-align:center; line-height:1.5; white-space:pre-line; display:none; /* shown by JS only when message is non-empty */ } :root[data-theme="dark"] #footer-bar{ background:#111010; color:#c9c4b8; } /* Push any in-flow content clear of the safe area / bars. --safe-top reserves the notch in an installed app; env() covers the browser. */ body{ padding-top:max(env(safe-area-inset-top,0px), var(--safe-top), var(--bar-height)); padding-bottom:max(env(safe-area-inset-bottom,0px), var(--footer-bar-height)); } /* ── side bars (floating, frosted tall-oval slivers) ───────────────────── A tall ellipse anchored at a side edge of the viewport, vertically centred, spanning ~90% of the viewport height. Most of the oval sits off-screen — JS sets its width/height/left (or right) inline so only a slender curved sliver (~70px at the widest, mid-height point) protrudes onto the page, like the limb of a large body edging into view. The message sits flex-centred at the oval's vertical middle. A `side:` directive in controls/sides.html picks left, right, or both edges; for `both`, JS clones #side-bar into a runtime #side-bar-right element (not present in index.html), so every rule here targets both ids. Doesn't reserve layout space and doesn't affect --bar-height/proximity math. No hover/solid state, and pointer-events:none so clicks/hover always reach the section underneath. `background: none` in the control file strips the wash, blur and border (see the shared data-bg rule below the centre bar). */ #side-bar, #side-bar-right{ position:fixed; top:50%; left:0; z-index:90; transform:translateY(-50%); border-radius:50%; pointer-events:none; display:flex; align-items:center; justify-content:flex-end; box-sizing:border-box; background:rgba(43,39,36,0.10); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:0.5px solid rgba(233,228,218,0.18); color:#2b2724; text-shadow:0 1px 3px rgba(255,255,255,0.5); font-size:0.78rem; letter-spacing:0.1em; text-align:center; line-height:1.5; display:none; /* shown by JS only when message is non-empty */ } :root[data-theme="dark"] #side-bar, :root[data-theme="dark"] #side-bar-right{ background:rgba(17,16,16,0.35); border-color:rgba(201,196,184,0.22); color:#c9c4b8; text-shadow:none; } /* ── center bar (floating, frosted pill at the middle of the stage) ────── The real centre of the page — controls/center.html. Sized by its own content, centred on the STAGE (viewport minus the header bar, the site-title band and the footer bar) using the same --stage-top / --stage-h helpers the section cells use, so it sits on exactly the centre the symbols and the centre dot share and re-centres by itself when a bar is switched on or off. Reserves no layout space and is pointer-events:none, so it never blocks the section behind it. */ #center-bar{ position:fixed; top:calc(var(--stage-top) + var(--stage-h) * 0.5); left:50%; z-index:90; transform:translate(-50%, -50%); max-width:min(60vw, 34rem); padding:0.75rem 1.5rem; border-radius:999px; pointer-events:none; align-items:center; justify-content:center; box-sizing:border-box; background:rgba(43,39,36,0.10); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:0.5px solid rgba(233,228,218,0.18); color:#2b2724; text-shadow:0 1px 3px rgba(255,255,255,0.5); font-size:0.78rem; letter-spacing:0.1em; text-align:center; line-height:1.5; display:none; /* shown by JS only when message is non-empty */ } :root[data-theme="dark"] #center-bar{ background:rgba(17,16,16,0.35); border-color:rgba(201,196,184,0.22); color:#c9c4b8; text-shadow:none; } /* `background: none` in sides.html / center.html — text only. The text-shadow stays: it's what keeps pale text legible once the wash behind it is gone. */ #side-bar[data-bg="none"], #side-bar-right[data-bg="none"], #center-bar[data-bg="none"]{ background:none; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; } /* ── canvas (the page as three parts, one piece centred in each) ────── The stage is thought of as three EQUAL parts stacked top to bottom; each piece sits at the centre of its own part — 1/6, 1/2, 5/6 of the stage, i.e. the middle of each third, NOT the lines between them. The middle part shares the centre-of-the-stage anchor with #center-bar (top uses the stage helpers so it stays centred as bars toggle). All three float over whatever section is behind them and reserve no layout space. --cp-max-w is set inline by the JS, per piece, from that part's `max width:` line (default below). */ .canvas-piece{ position:fixed; left:50%; z-index:92; transform:translate(-50%, -50%); margin:0; width:min(var(--cp-max-w, 420px), 86vw); max-width:86vw; display:none; /* shown by JS only when the part has content */ flex-direction:column; align-items:center; pointer-events:none; /* a link inside re-enables itself below */ text-align:center; } #canvas-top { top:calc(var(--stage-top) + var(--stage-h) * 0.16667); } #canvas-middle{ top:calc(var(--stage-top) + var(--stage-h) * 0.5); } #canvas-bottom{ top:calc(var(--stage-top) + var(--stage-h) * 0.83333); } .canvas-piece a{ pointer-events:auto; display:block; width:100%; } .canvas-piece img{ display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 10px 34px rgba(0,0,0,0.28); border:0.5px solid rgba(43,39,36,0.14); } .canvas-piece figcaption{ margin-top:0.7rem; font-size:0.82rem; letter-spacing:0.08em; line-height:1.5; color:#2b2724; text-shadow:0 1px 3px rgba(255,255,255,0.5); white-space:pre-line; } /* words with no picture above them aren't a caption — they're a line of their own, so they stand a little larger and lose the gap that would otherwise separate them from an image that isn't there. The JS sets data-no-image on a part that loaded no picture. */ .canvas-piece[data-no-image] figcaption{ margin-top:0; font-size:0.95rem; letter-spacing:0.06em; } :root[data-theme="dark"] .canvas-piece img{ border-color:rgba(201,196,184,0.18); box-shadow:0 10px 34px rgba(0,0,0,0.55); } :root[data-theme="dark"] .canvas-piece figcaption{ color:#c9c4b8; text-shadow:none; } :root[data-canvas="off"] .canvas-piece{ display:none !important; } /* ---- canvas in TWO PARTS (controls/canvas.html `layout:`) ---- The stage becomes a BIG band of 3/4 and a SMALL band of 1/4, each piece centred in its own band: the big one at 3/8 of the stage when it's on top and 5/8 when it's below, the small one at 7/8 and 1/8. The band that isn't in use is hidden, so words parked under the other prefix can't drift over the picture. */ :root[data-canvas-layout="two-parts"] #canvas-middle{ top:calc(var(--stage-top) + var(--stage-h) * 0.375); } :root[data-canvas-layout="two-parts"] #canvas-bottom{ top:calc(var(--stage-top) + var(--stage-h) * 0.875); } :root[data-canvas-layout="two-parts"] #canvas-top{ display:none !important; } :root[data-canvas-layout="two-parts-small-top"] #canvas-middle{ top:calc(var(--stage-top) + var(--stage-h) * 0.625); } :root[data-canvas-layout="two-parts-small-top"] #canvas-top{ top:calc(var(--stage-top) + var(--stage-h) * 0.125); } :root[data-canvas-layout="two-parts-small-top"] #canvas-bottom{ display:none !important; } /* The big picture is sized by HEIGHT, not width: it grows until it nearly fills its 3/4 band (94% of it — the rest is breathing room above and below) and is held to 88vw across, so on a wide window it's height-bound with empty space at the sides, like a film still. There is deliberately NO pixel default here: the three-part 420px ceiling, or any other fixed width, would stop the picture long before its band does and the mode would lose its point. `max width:` still works when one is written, as a ceiling. width/height stay auto so the browser scales the picture down to fit inside that box with its proportions intact. The figure keeps a DEFINITE width (the picture is centred in it, and so is any caption) — a shrink-to-fit figure and a percentage max-width on the picture inside it are circular, and the browser resolves that circle by making the picture far smaller than its band. */ :root[data-canvas-layout^="two-parts"] #canvas-middle{ width:min(var(--cp-max-w, 88vw), 88vw); max-width:88vw; } :root[data-canvas-layout^="two-parts"] #canvas-middle img{ width:auto; height:auto; max-width:100%; max-height:calc(var(--stage-h) * 0.75 * 0.94); } /* Words standing alone in a two-part canvas take the film-title treatment of the picture above them: caps, very wide tracking, in the slate blue sampled from the key art (#385878 at its core — lifted to #6f96bd on the dark page so it reads, kept deep on the light one). Deliberately NOT Cormorant: the lettering being echoed is a sans, and the site loads only the one webfont — this borrows the system sans instead of paying for a second round trip. Tracking adds its space AFTER the last letter, so text-indent puts the same space back at the front and the word stays optically centred. Scoped to words-alone pieces in two-part mode; captions under a picture, and all of three-part mode, are untouched. */ :root[data-canvas-layout^="two-parts"] .canvas-piece[data-no-image] figcaption{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:700; /* fluid: a word tracked out this far gets wide fast, so the size eases down on a narrow screen rather than running past the edge */ font-size:clamp(1.5rem, 4vw, 3rem); text-transform:uppercase; letter-spacing:0.42em; text-indent:0.42em; color:#3d5f82; } :root[data-theme="dark"][data-canvas-layout^="two-parts"] .canvas-piece[data-no-image] figcaption{ color:#6f96bd; } /* ---- the shine — a metallic light across a words-alone piece ---- Switched on per part with `shine:` in controls/canvas.html; blank or `off` and none of this applies, so the words stay the flat slate blue set above. The letters stop carrying their own colour and start carrying a GRADIENT instead — base, a dark shoulder, the highlight, the shoulder again, base — clipped to the glyphs. Sliding that gradient sideways is the whole effect. Safari needs -webkit-text-fill-color as well as `color`: without it the text is painted over its own clip and nothing shows at all. Three states, in the order they hand off to each other: [data-shine-state="idle"] a faint pass every 9s, soft highlight .shine-sweep the bright pass, on hover or on tap [data-shine-state="tilt"] no animation whatsoever — the light PARKS where the device is being held (--shine-x, written by the JS), and the idle loop is dropped, because a phone in a hand is already moving. */ .canvas-piece figcaption[data-shine]{ --shine-base:#3d5f82; --shine-edge:#2c4761; --shine-hi:#b9d3ea; --shine-soft:#7f9db9; background-image:linear-gradient(105deg, var(--shine-base) 0%, var(--shine-base) 40%, var(--shine-edge) 46%, var(--shine-hi) 50%, var(--shine-edge) 54%, var(--shine-base) 60%, var(--shine-base) 100%); background-size:300% 100%; background-position:var(--shine-x, 100%) 0; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; /* ONLY the word takes the pointer. The figure itself stays pointer-events:none, so the picture and the rest of the canvas go on passing the mouse through to the section behind them. */ pointer-events:auto; } :root[data-theme="dark"] .canvas-piece figcaption[data-shine]{ --shine-base:#6f96bd; --shine-edge:#4d6f94; --shine-hi:#eaf3fb; --shine-soft:#a9c6e0; } /* The light enters at the left edge and leaves at the right. With a background three times the width of the box, 100% shows its right third and 0% its left third — both pure base — and the highlight at the gradient's middle crosses the word on the way between them. */ @keyframes canvasShine{ from{ background-position:100% 0; } to { background-position:0% 0; } } .canvas-piece figcaption[data-shine][data-shine-state="idle"]{ background-image:linear-gradient(105deg, var(--shine-base) 0%, var(--shine-base) 43%, var(--shine-soft) 50%, var(--shine-base) 57%, var(--shine-base) 100%); animation:canvasShine 9s ease-in-out infinite; } /* The sweep interrupts whatever the word was doing. It restates the bright gradient because the idle rule above matches just as strongly and would otherwise keep its soft one; !important on the animation is what lets a single pass cut across an infinite loop. */ .canvas-piece figcaption[data-shine].shine-sweep{ background-image:linear-gradient(105deg, var(--shine-base) 0%, var(--shine-base) 40%, var(--shine-edge) 46%, var(--shine-hi) 50%, var(--shine-edge) 54%, var(--shine-base) 60%, var(--shine-base) 100%); animation:canvasShine 1.1s ease-in-out !important; } /* Motion off, surface intact: no timer, no sweep, but tilt still moves the light — that isn't an animation, it's where the thing is held. */ @media (prefers-reduced-motion:reduce){ .canvas-piece figcaption[data-shine], .canvas-piece figcaption[data-shine][data-shine-state="idle"], .canvas-piece figcaption[data-shine].shine-sweep{ animation:none !important; } } /* on a short screen the height cap would leave a stamp — let the picture be width-driven there instead */ @media (max-width:640px){ :root[data-canvas-layout^="two-parts"] #canvas-middle{ width:min(var(--cp-max-w, 94vw), 94vw); max-width:94vw; } :root[data-canvas-layout^="two-parts"] #canvas-middle img{ max-height:calc(var(--stage-h) * 0.75); } } /* ---- site title — visible wordmark in its own reserved band ---- Text comes from the "site title:" line of controls/title.html (set by js/main.js into #site-title + its data-title copy; blank line = the element keeps its `hidden` attribute). Fixed inside its own reserved band (--site-title-height, published by the JS), so the three zones split only the space below it — the title no longer eats into zone 1 (v5.6.0). "site title position: bottom" (v5.7.0) flips it to the bottom band, just above the footer. Grey at rest, washes rainbow on hover — the same ::after mechanism as the section labels. */ #site-title{ position:fixed; top:calc(var(--safe-top) + var(--bar-height) + 14px); left:50%; transform:translateX(-50%); z-index:6; font-size:1.15rem; font-weight:400; letter-spacing:0.18em; color:#b3aea4; white-space:nowrap; } :root[data-title-pos="bottom"] #site-title{ top:auto; bottom:calc(var(--footer-bar-height) + 14px); } /* Installed app, title at top: tighten the pad below the notch from 14px to 6px so the wordmark hugs the notch. --safe-top now carries the REAL measured inset (js/main.js), so there's no overshoot to sit below. */ :root[data-standalone][data-title-pos="top"] #site-title{ top:calc(var(--safe-top) + var(--bar-height) + 6px); } :root[data-theme="dark"] #site-title{ color:#cac5bb; } #site-title::after{ content:attr(data-title); position:absolute; left:0; top:0; background:linear-gradient(90deg,#ff5d73,#ff9f45,#ffd54a,#5ad67d,#43c6e8,#b66cff,#ff5d73); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; opacity:0; transition:opacity .55s ease; } #site-title:hover::after{ opacity:1; } @media (prefers-reduced-motion: no-preference){ #site-title::after{ animation:rainbowFlow 8s linear infinite; } } /* ---- site-title band background (v5.7.0) ---- Fills the title's reserved band with a colour ("site title background:" in controls/title.html), so the title can contrast against the zones. The JS sets --title-band-bg (and, for a "light | dark" pair, --title-band-bg-dark) and un-hides #title-band; it fills the band's full width and reserved height, top- or bottom-anchored to match the title position. Sits behind the title text and the seam border, never intercepts the mouse. */ #title-band{ position:fixed; left:0; right:0; z-index:0; pointer-events:none; top:calc(var(--safe-top) + var(--bar-height)); height:var(--site-title-height); background:var(--title-band-bg, transparent); } :root[data-title-pos="bottom"] #title-band{ top:auto; bottom:var(--footer-bar-height); } /* Installed app, header off, title at top: the title band is the top element, so extend it up to fill the notch strip — the notch area takes the band's background colour (theme-aware). Its bottom edge stays at the stage seam (--safe-top + --site-title-height), so geometry is unchanged; only the fill grows upward. If the band has no background it fills with transparent and the page background shows, as before. */ :root[data-standalone][data-header="off"][data-title-pos="top"] #title-band{ top:0; height:calc(var(--safe-top) + var(--site-title-height)); } :root[data-theme="dark"] #title-band{ background:var(--title-band-bg-dark, var(--title-band-bg, transparent)); } #title-band[hidden]{ display:none; } /* shared reveal keyframes, reused by every section's label */ @keyframes rainbowFlow { to{ background-position:-200% 0; } } /* ---- the symbol unit: glyph + label (+ optional sub-nav), stacked & centred ---- */ .symbol{ position:absolute; left:50%; z-index:3; display:flex; flex-direction:column; align-items:center; gap:var(--symbol-gap,9px); color:#b3aea4; transition:color .4s ease; } .link{ position:relative; display:grid; justify-items:center; row-gap:var(--glyph-gap,7px); text-decoration:none; color:inherit; } /* grid, not flex (v5.12.0): the subtitle and the guide note share one cell so both always start at the same top edge, however tall either one is — with the old bottom-anchored .guide-note, a multi-line subtitle pushed the guide pill down away from the label (visible on any section with a 2+ line subtitle). */ .link > .glyph{ grid-row:1; } .link > .label{ grid-row:2; } .link > .subtitle, .link > .guide-note{ grid-row:3; grid-column:1; } .link:focus-visible{ outline:2px solid #c98b8b; outline-offset:6px; border-radius:3px; } /* ---- the label: grey at rest, washes rainbow on approach (shared mechanism) ---- Text comes from data-label (set by the script), so renaming a section needs no CSS edit. The ::after layer is the rainbow copy that fades in over the grey. */ .label{ position:relative; display:inline-block; font-size:1.05rem; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:#b3aea4; } .label::after{ content:attr(data-label); position:absolute; left:0; top:0; background:linear-gradient(90deg,#ff5d73,#ff9f45,#ffd54a,#5ad67d,#43c6e8,#b66cff,#ff5d73); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; opacity:0; transition:opacity .55s ease; } .symbol:hover .label::after, .symbol:focus-visible .label::after, .section.near .label::after{ opacity:1; } @media (prefers-reduced-motion: no-preference){ .label::after{ animation:rainbowFlow 8s linear infinite; } } /* ---- the subtitle: optional line under the label ---- Text comes from data-subtitle (set by the script). Empty subtitle = element is hidden (via the `hidden` attribute, set in JS) so it never reserves space. By default always visible; sections with [data-subtitle-hover="true"] only reveal it on hover/proximity, fading in the same way the label rainbow does. */ .subtitle{ /* no margin-top: the .link grid's row-gap spaces it from the label, and the guide note shares its cell so both must start flush */ display:block; text-align:center; font-size:0.72rem; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:#b3aea4; opacity:1; transition:opacity .55s ease; /* honour explicit line breaks (each `subtitle:` line in the control file becomes its own centred row) while still wrapping long rows */ white-space:pre-line; line-height:1.8; } :root[data-theme="dark"] .subtitle{ color:#cac5bb; } [data-subtitle-hover="true"] .subtitle{ opacity:0; } [data-subtitle-hover="true"] .symbol:hover .subtitle, [data-subtitle-hover="true"] .symbol:focus-visible .subtitle, [data-subtitle-hover="true"].section.near .subtitle{ opacity:1; } /* ---- dev guide note: shares the below-label slot with the subtitle ---- Development-mode only. At rest the guide (an amber pill, text from each section's "guide:" line) occupies the slot, overlaid on the subtitle's reserved space; on hover/proximity it fades out and the subtitle fades in — the guide↔subtitle swap. Written into a .guide-note by js/main.js, inserted right after .label and before .subtitle so the sibling swap `.guide-note ~ .subtitle` below works. */ .guide-note{ /* placed by the .link grid above (same cell as .subtitle) — no absolute anchor, so it always starts at the subtitle's top edge regardless of how many lines the subtitle has (v5.12.0) */ text-align:center; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .55s ease; } .guide-note .guide-pill, .zone-guide .guide-pill{ display:inline-block; font-size:0.6rem; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:#b48a5a; border:0.5px solid rgba(201,138,75,0.55); border-radius:4px; padding:2px 8px; } :root[data-theme="dark"] .guide-note .guide-pill, :root[data-theme="dark"] .zone-guide .guide-pill{ color:#c9a87c; border-color:rgba(201,168,124,0.5); } /* the guide↔subtitle swap: the LEAVING element snaps away instantly (duration 0), only the ARRIVING one fades in, slightly delayed (v5.12.2). The two share one slot; any approach that fades both lets an interrupted/flickering hover state catch them co-visible and mixed (the v5.12.1 delay-sequencing still had that hole). With the leaving side snapping to 0 in the same frame the state flips, co-visibility is structurally impossible, not just well-timed. */ body[data-site-status="development"] .guide-note{ opacity:1; transition:opacity .35s ease .12s; } body[data-site-status="development"] .symbol:hover .guide-note, body[data-site-status="development"] .symbol:focus-visible .guide-note, body[data-site-status="development"] .section.near .guide-note{ opacity:0; transition:opacity 0s linear 0s; } /* while a guide is present in dev, the subtitle yields the resting slot to it (even always-on subtitles) and returns on hover/proximity */ body[data-site-status="development"] .guide-note ~ .subtitle{ opacity:0; transition:opacity 0s linear 0s; } body[data-site-status="development"] .symbol:hover .guide-note ~ .subtitle, body[data-site-status="development"] .symbol:focus-visible .guide-note ~ .subtitle, body[data-site-status="development"] .section.near .guide-note ~ .subtitle{ opacity:1; transition:opacity .35s ease .12s; } /* ---- sub-nav (small link pill) — shared by any section, not just one ---- Absolutely placed just below the symbol so it never shifts the glyph+label off the section's centre line. Each section gets its own