/* ========================================================================== FAITH CONSCIOUSNESS — Shared Design System Dr. Leslie Wells teaching site. Static HTML/CSS/vanilla JS. Concept: "Cosmic Cathedral, warmed." A darkened sanctuary read through an oculus into deep cosmic indigo. Vastness as reverence. Gold is rationed, appearing only where meaning gathers. Light is pooled, not painted. Hierarchy is carried by size and whitespace, not by stacking weights. This file defines ALL design tokens as CSS custom properties. Every page downstream must compose from these variables and never hard-code values. Fonts are self-hosted, loaded in each page's via css/fonts.css (woff2 in assets/fonts/): Cormorant Garamond (display) + Hanken Grotesk (body). Copy rule honoured everywhere: no em dashes in visible copy. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* ---- Color: surfaces (void -> nave -> depth -> cloister) ---- */ --color-void: #05071A; /* deepest background: page base, footer floor */ --color-nave: #0C1230; /* primary section background, one step up */ --color-depth: #1A2148; /* raised surfaces: cards, panels, quote blocks */ --color-cloister: #222A55; /* hover / pressed card state */ --color-line: #2A3160; /* opaque hairline borders, input outlines */ --color-control-border: #737B9B; /* shell-control edge: 4.79:1 on void */ --color-line-soft: rgba(244, 239, 227, 0.08); /* translucent seam on any depth */ /* ---- Color: the candlelit gold accent (rationed) ---- */ --color-gold: #E0B868; /* primary sacred accent: eyebrows, links, rules */ --color-gold-bright: #E6BE73; /* brightest spark: focal stars, focus rings */ --color-gold-deep: #C98A2E; /* hover / pressed gold */ --color-gold-on-light: #956722; /* same gold hue at 36% HSL lightness: AA text on vellum */ /* Gold as light, kept to two rationed sparks: the steady --color-gold (224,184,104) and the brighter focal --color-gold-bright (230,190,115) for stars and focus rings. The tint scale below steps the STEADY gold in opacity only, so every glow, wash, hairline and frame is that one candlelight at a measured strength, never a fresh hue. */ --gold-tint-04: rgba(224, 184, 104, 0.04); /* faintest fade (rule tails) */ --gold-tint-06: rgba(224, 184, 104, 0.06); /* faintest wash: ghost-button fill */ --gold-tint-08: rgba(224, 184, 104, 0.08); /* low dawn wash */ --gold-tint-10: rgba(224, 184, 104, 0.10); /* first horizon glow */ --gold-tint-13: rgba(224, 184, 104, 0.13); /* section glow pools */ --gold-tint-16: rgba(224, 184, 104, 0.16); /* pooled light inside frames */ --gold-tint-22: rgba(224, 184, 104, 0.22); /* hairlines, the scroll cue */ --gold-tint-28: rgba(224, 184, 104, 0.28); /* framing borders */ --gold-bright-tint-20: rgba(230, 190, 115, 0.20); /* the risen-light glow (climax) */ --color-void-fade: rgba(5, 7, 26, 0); /* void at zero alpha: the far end of a glow gradient */ --color-nave-veil: rgba(12, 18, 48, 0.5); /* nave at half: translucent chips over any ground */ --gold-tint-70: rgba(224, 184, 104, 0.70); /* the live-dot's halo */ --gold-bright-tint-40: rgba(230, 190, 115, 0.40); /* the risen numeral aura */ /* ---- Color: text neutrals as one warm->cool temperature ladder ---- A single intentional axis, the same one the hero photograph is built on: text at the focus is warm bone (the candlelight), and as it recedes in importance it cools toward the indigo void. Importance therefore reads twice over, by temperature AND by a measured drop in contrast. Warm at the focus, cool in the depths. */ --color-ivory: #F4EFE3; /* warmest: headlines + lead (17.4:1 on void) */ --color-ivory-dim: #D7D2C4; /* warm: sustained long-form body (13.2:1 on void) */ --color-slate: #B9C0D8; /* cooling: muted lede / supporting voice (10.1:1 on void) */ --color-periwinkle: #A2A9C6; /* coolest readable: captions, metadata (AA at 13px) */ --color-periwinkle-deep: #3A4267; /* disabled / placeholder only, never readable copy */ --color-input-invalid: #E0907A; /* invalid signup-field border on the void */ --color-error: #E6A491; /* readable signup error copy on the void */ /* ---- Color: home-page section scrims over the fixed dawn ---- */ --home-scrim-core: rgba(5, 7, 26, 1); /* invariant ground directly behind copy */ --home-scrim-shoulder: rgba(5, 7, 26, 0.88); /* protected feather inside the gutter */ --home-scrim-clear: rgba(5, 7, 26, 0); /* open edge where the dawn reads through */ /* ---- Color: teaching-page coda scrim over the risen dawn ---- */ --teaching-coda-scrim-core: rgba(5, 7, 26, 0.68); /* localized ground behind the gold coda */ --teaching-coda-scrim-clear: rgba(5, 7, 26, 0); /* feather back into the photograph */ /* ---- Color: the single warm "vellum" inverted section ---- */ --color-vellum: #FBF6EC; /* warm paper background, used exactly once */ --color-ink: #1A1E33; /* text on vellum (15.3:1, AAA) */ --color-ink-soft: #3C3F52; /* softer ink for sustained vellum body (9.7:1, AAA) */ --color-caption-on-vellum: #6A6A82; /* cool caption ink on the warm inverted ground */ /* ---- Atmosphere: photographic, not decorative ---- Depth comes from real imagery, flat fields, and grain, never a colour wash. The only retained "gradients" are a fine gold rule and a NEUTRAL vignette (edge darkening, the way a real photograph falls off for legibility). */ --vignette: radial-gradient(125% 95% at 50% 32%, rgba(5, 7, 26, 0) 42%, rgba(3, 4, 16, 0.58) 100%); --gold-hairline: linear-gradient(90deg, rgba(224, 184, 104, 0) 0%, #E0B868 50%, rgba(224, 184, 104, 0) 100%); --gold-cta: #E0B868; /* flat gold, no amber sheen */ --gold-cta-hover: #C98A2E; /* Film grain: an SVG noise tile that removes the synthetic smoothness. */ --grain: 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --star-twinkle-from: 0.30; --star-twinkle-to: 0.85; /* ---- Typography: families ---- */ --font-display: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, 'Times New Roman', serif; --font-body: 'Hanken Grotesk', 'Hanken Grotesk Fallback', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* ---- Typography: fluid scale (sizes) ---- */ --text-display: clamp(2.75rem, 7vw, 5.5rem); /* hero display, Cormorant 500 */ --text-h1: clamp(2.25rem, 5vw, 3.75rem); /* page title step */ --text-h2: clamp(1.875rem, 1rem + 2.5vw, 3.25rem); /* section headings, Cormorant 500 (rem term keeps the tablet step open) */ --text-h3: clamp(1.5rem, 2.4vw, 1.75rem); /* sub-heads / card titles, Cormorant 600 */ --text-lede: clamp(1.25rem, 1.6vw, 1.3125rem);/* lede / intro, Hanken 400 */ --text-body: clamp(1.125rem, 1.05rem + 0.35vw, 1.1875rem);/* teaching copy, Hanken 400 (18px floor on phones) */ --text-quote: clamp(1.75rem, 3vw, 2rem); /* pull-quotes, Cormorant italic 400 */ --text-ui: 1rem; /* button labels, UI controls (16px floor) */ --text-caption: 1rem; /* captions, metadata (16px floor) */ --text-metadata: 0.8125rem; /* shared tracked-caps metadata role */ --text-brand: 1.2rem; /* shell wordmark */ --text-brand-mark: var(--text-metadata); /* raised registered mark, on the metadata step */ --text-home-hero: clamp(2.15rem, 1.25rem + 4vw, 5.5rem); /* home-page display */ --text-statement: clamp(1.25rem, 0.75rem + 1.75vw, 2.5rem); /* home scripture pull quote */ --text-era-shift: clamp(1.25rem, 1rem + 0.5vw, 1.55rem); /* era transformation motto */ --text-monogram: clamp(3rem, 2rem + 3vw, 4.25rem); /* portrait placeholder initials */ --text-era-number-mobile: clamp(2.25rem, 1.65rem + 4vw, 3rem); /* compact era folios */ --text-trademark: 0.45em; /* registered mark beside display type */ /* Radio's display and numeral roles preserve the page's tuned proportions, but live on the shared scale instead of as anonymous page literals. */ --text-radio-hero: clamp(2.5rem, 6vw, 4.5rem); --text-radio-signature: clamp(1.25rem, 2.4vw, 1.75rem); --text-radio-featured-numeral: clamp(5rem, 12vw, 8rem); --text-radio-featured-title: clamp(2rem, 3.4vw, 2.75rem); --text-radio-lead-title: clamp(2rem, 3.4vw, 2.75rem); --text-radio-card-numeral: clamp(3.5rem, 9vw, 5.25rem); --text-radio-hero-compact: clamp(2.25rem, 9vw, 3.25rem); --text-radio-featured-numeral-compact: clamp(4.5rem, 22vw, 7rem); --size-radio-cover-motif: clamp(3.5rem, 9vw, 5.5rem); --shell-rule-offset: 0.35em; /* nav rule below the text baseline */ --tracking-metadata: 0.22em; --weight-metadata: 600; /* Real small caps (Cormorant SC). Larger than the 13px tracked-caps role because small-cap forms sit at x-height and read smaller at equal size. */ --font-smallcaps: 'Cormorant SC', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* Numeral roles. The served Cormorant faces carry `lnum` and `tnum`; Hanken does not. Metadata uses Cormorant SC, whose shipped tables also carry `smcp`, so none of these declarations asks a face for a feature it cannot provide. */ --font-numeral-display: var(--font-display); --font-numeral-metadata: var(--font-smallcaps); --features-numeral-display: "lnum" 1; --features-numeral-tabular: "lnum" 1, "tnum" 1; --features-numeral-metadata: "smcp" 1, "lnum" 1, "tnum" 1; --text-metadata-sc: 1rem; --weight-metadata-sc: 600; --tracking-metadata-sc: 0.08em; --color-metadata: var(--color-periwinkle); /* FABLE-R0-4: the metadata role rendered periwinkle on section eyebrows but gold on episode dates, via an anonymous page-scoped override. The split is wanted (a broadcast date is the episode's own mark, not a section label), but one role wearing two colours by container is drift. It is now a NAMED role, so the token layer says what renders. */ --color-metadata-date: var(--color-gold); --text-eyebrow: var(--text-metadata); /* compatibility alias for page-scoped metadata */ /* ---- Spacing scale (generous; carries hierarchy) ---- */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2.5rem; /* 40px */ --space-xl: 4rem; /* 64px */ --space-2xl: 6rem; /* 96px, section padding floor */ --space-3xl: clamp(6rem, 14vh, 12.5rem); /* section vertical padding */ --space-4xl: clamp(8rem, 20vh, 16rem); /* hero / closing breathing room */ --space-5xl: 20rem; /* 320px, maximum dramatic void */ /* ---- Radii ---- */ --radius-button: 2px; /* architectural, inscription-like */ --radius-card: 4px; --radius-input: 2px; --radius-pill: 999px;/* star-dot and focus-ring only */ /* ---- Shadows / glows ---- */ --shadow-card: 0 1px 2px rgba(5, 7, 26, 0.4), 0 12px 32px rgba(5, 7, 26, 0.45); --shadow-plate: 0 32px 64px -22px rgba(5, 7, 26, 0.85), 0 12px 28px rgba(5, 7, 26, 0.55); /* the physical-book 3D shadow: hero cover + tipped-in plates */ --shadow-gold-glow: 0 0 28px rgba(224, 184, 104, 0.22); /* Two neutral layers ensure that at least one ring edge reads against each shell ground: void against gold or ivory, ivory against the void. */ --focus-ring: 0 0 0 2px var(--color-void), 0 0 0 4px var(--color-ivory); --shadow-pool: 0 0 120px 40px rgba(230, 190, 115, 0.06); /* ---- Transitions / motion ---- */ --ease-entrance: cubic-bezier(0.22, 0.61, 0.36, 1); /* decelerating, calm arrival */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-fall: cubic-bezier(0.55, 0.085, 0.68, 0.53); /* a drop gathering speed as it falls (cue) */ --ease-drift: cubic-bezier(0.37, 0, 0.63, 1); /* slow sine breath (star twinkle) */ --dur-entrance: 900ms; --dur-rule: 1100ms; --dur-hover: 240ms; --dur-twinkle: 9s; --stagger: 80ms; /* ---- Layout ---- */ --container-max: 1200px; --container-content: 960px; --measure: 66ch; /* body teaching measure */ --measure-lede: 60ch; --gutter: clamp(1.25rem, 5vw, 4rem); --hairline-width: 160px; --header-height: 76px; /* ---- Ethereal: starfield (generated, near-subliminal) ---- */ --starfield-static: -157px 614px 0 0 rgba(244,239,227,0.52), -672px 470px 0 0.5px rgba(244,239,227,0.35), -702px 569px 0 0 rgba(244,239,227,0.42), 68px 136px 0 0.5px rgba(244,239,227,0.43), 49px 11px 0 0 rgba(244,239,227,0.61), 471px 285px 0 0.5px rgba(244,239,227,0.82), 379px 123px 0 0 rgba(244,239,227,0.84), 320px 510px 0 0 rgba(244,239,227,0.46), 287px 19px 0 0 rgba(244,239,227,0.47), -609px 247px 0 0 rgba(244,239,227,0.65), -621px 222px 0 0 rgba(244,239,227,0.33), 447px 41px 0 0 rgba(244,239,227,0.67), 771px 82px 0 0 rgba(244,239,227,0.62), -80px 76px 0 0 rgba(244,239,227,0.74), -653px 242px 0 0 rgba(244,239,227,0.59), 673px 154px 0 0 rgba(244,239,227,0.63), -579px 196px 0 0 rgba(244,239,227,0.39), -509px 597px 0 0 rgba(244,239,227,0.53), 745px 229px 0 0 rgba(244,239,227,0.73), -124px 344px 0 0.5px rgba(244,239,227,0.63), 812px 159px 0 0 rgba(244,239,227,0.76), 150px 346px 0 0 rgba(244,239,227,0.34), 505px 245px 0 0 rgba(244,239,227,0.67), -238px 364px 0 0 rgba(244,239,227,0.79), -774px 606px 0 0.5px rgba(244,239,227,0.5), -581px 183px 0 0 rgba(244,239,227,0.42), -556px 385px 0 0 rgba(244,239,227,0.52), -655px 30px 0 0 rgba(244,239,227,0.52), -540px 468px 0 0 rgba(244,239,227,0.78), 626px 134px 0 0 rgba(244,239,227,0.5), -348px 26px 0 0 rgba(244,239,227,0.4), 528px 50px 0 0.5px rgba(244,239,227,0.57), -447px 61px 0 0 rgba(244,239,227,0.3), 274px 109px 0 0 rgba(244,239,227,0.61), 594px 511px 0 0 rgba(244,239,227,0.82), 115px 557px 0 0.5px rgba(244,239,227,0.73), -17px 124px 0 0 rgba(244,239,227,0.52), 479px 126px 0 0 rgba(244,239,227,0.4), 82px 29px 0 0 rgba(244,239,227,0.49), -611px 8px 0 0 rgba(244,239,227,0.38), -76px 273px 0 0 rgba(244,239,227,0.34), 437px 112px 0 0 rgba(244,239,227,0.65), 413px 106px 0 0 rgba(244,239,227,0.37), 134px 174px 0 0 rgba(244,239,227,0.47), -611px 396px 0 0 rgba(244,239,227,0.71), 597px 29px 0 0.5px rgba(244,239,227,0.31), -80px 25px 0 0 rgba(244,239,227,0.6), 732px 207px 0 0 rgba(244,239,227,0.84), 605px 496px 0 0 rgba(244,239,227,0.59), -92px 418px 0 0.5px rgba(244,239,227,0.59), -145px 292px 0 0 rgba(244,239,227,0.64), -330px 467px 0 0 rgba(244,239,227,0.71), -210px 150px 0 0.5px rgba(230,190,115,0.9), 330px 96px 0 0.5px rgba(230,190,115,0.9), 70px 260px 0 0.5px rgba(230,190,115,0.9); --starfield-twinkle: -167px 328px 0 0.5px rgba(244,239,227,0.35), -132px 70px 0 0 rgba(244,239,227,0.59), 726px 18px 0 0 rgba(244,239,227,0.54), 510px 80px 0 0 rgba(244,239,227,0.31), 694px 96px 0 0.5px rgba(244,239,227,0.31); } /* -------------------------------------------------------------------------- 2. RESET + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--color-void); color: var(--color-ivory-dim); font-family: var(--font-body); font-size: var(--text-body); font-weight: 400; line-height: 1.85; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Typographic polish: real kerning, ligatures + contextual alternates, optical sizing on the variable faces, and pretty wrapping so body copy never leaves a lone word stranded on the last line. */ font-kerning: normal; font-feature-settings: "kern", "liga", "calt"; font-optical-sizing: auto; text-wrap: pretty; } img, svg, video { max-width: 100%; height: auto; display: block; } ::selection { background: rgba(224, 184, 104, 0.25); color: var(--color-ivory); } /* -------------------------------------------------------------------------- 3. TYPOGRAPHY Cormorant Garamond carries display sizes; Hanken Grotesk stays quiet under copy. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-ivory); margin: 0; font-weight: 500; /* Balance multi-line headings so the lines are evenly weighted, not bottom-heavy or orphaned (hero h1 uses manual .line spans, untouched). */ text-wrap: balance; } h1, .display { font-size: var(--text-display); line-height: 1.05; letter-spacing: -0.015em; font-weight: 500; max-width: 16ch; } .page-title { font-size: var(--text-h1); line-height: 1.1; letter-spacing: -0.012em; } h2, .h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.01em; font-weight: 500; } h3, .h3 { font-size: var(--text-h3); line-height: 1.2; font-weight: 600; /* heavier so Cormorant never reads thin at sub-head size */ } /* The one warm gesture: a Cormorant italic gold phrase completing a headline */ .display-accent, .accent-italic { font-style: italic; color: var(--color-gold); font-weight: 500; } p { margin: 0; } p + p { margin-top: var(--space-md); } .lede { font-family: var(--font-body); font-size: var(--text-lede); line-height: 1.7; font-weight: 400; color: var(--color-slate); max-width: var(--measure-lede); } .body, .prose p { font-size: var(--text-body); line-height: 1.85; color: var(--color-ivory-dim); } .prose { max-width: var(--measure); } blockquote, .quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-quote); line-height: 1.4; color: var(--color-ivory); margin: 0; max-width: var(--measure-lede); } /* Shared tracked-caps metadata role */ .eyebrow, /* The metadata role, set in REAL small caps from Cormorant SC's own `smcp` table (2026-08-26). It used to be letterspaced uppercase in the body face, which was the correct honest treatment for fonts with no small-cap tables but is not small caps, and capped criterion 02 at A. Two details that matter and are easy to get wrong: `text-transform: uppercase` is deliberately GONE. Feeding already-uppercase text to a small-caps font gives cap-height letters throughout and throws away the whole point, which is the lowercase-height forms. The markup keeps its own casing and the font draws the small caps. Tracking drops from 0.22em to 0.08em. Small caps are drawn with their own optical sidebearings, so the wide tracking that rescued synthetic uppercase now over-spaces them. */ .label-wide { display: inline-block; font-family: var(--font-smallcaps); font-size: var(--text-metadata-sc); font-weight: var(--weight-metadata-sc); font-variant-caps: small-caps; font-feature-settings: "smcp" 1; letter-spacing: var(--tracking-metadata-sc); color: var(--color-metadata); } .eyebrow { margin: 0; } .caption { font-family: var(--font-body); font-size: var(--text-caption); font-weight: 500; letter-spacing: 0.04em; line-height: 1.5; color: var(--color-periwinkle); } /* Scripture citations: same metadata role as .eyebrow, so they follow it onto real small caps rather than staying tracked-uppercase and splitting one role into two treatments. */ .statement__cite, .book-intro__cite { font-family: var(--font-smallcaps); font-size: var(--text-metadata-sc); font-weight: var(--weight-metadata-sc); font-variant-caps: small-caps; font-feature-settings: "smcp" 1; letter-spacing: var(--tracking-metadata-sc); color: var(--color-metadata); text-align: center; margin-top: var(--space-md); } /* Section heading with a single gold star catching the light */ .star-heading::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.5em; border-radius: var(--radius-pill); background: var(--color-gold-bright); box-shadow: 0 0 9px rgba(230, 190, 115, 0.65); vertical-align: middle; transform: translateY(-0.18em); } /* -------------------------------------------------------------------------- 4. THE GOLD HAIRLINE (far-candlelight signature rule) -------------------------------------------------------------------------- */ .gold-rule { display: block; position: relative; width: var(--hairline-width); max-width: 60vw; height: 1px; border: 0; background: var(--gold-hairline); transform-origin: center; } /* Signature: the brand's four-point star, threaded on the candlelight hairline at its center. The same star is the wordmark and the favicon, so every section opens with the mark itself, the one element only this site owns. Restrained, not decorative. */ .gold-rule::before { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); background: var(--color-gold-bright); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 C12.4 8 15.6 11.1 21 11.5 C15.6 11.9 12.4 15 12 20 C11.6 15 8.4 11.9 3 11.5 C8.4 11.1 11.6 8 12 3 Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 C12.4 8 15.6 11.1 21 11.5 C15.6 11.9 12.4 15 12 20 C11.6 15 8.4 11.9 3 11.5 C8.4 11.1 11.6 8 12 3 Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(230, 190, 115, 0.5)); } /* The star settles in just after its thread has finished drawing. */ .js .gold-rule.reveal::before { opacity: 0; transition: opacity var(--dur-entrance) var(--ease-entrance); } .gold-rule.reveal.is-visible::before { opacity: 1; transition-delay: 0.5s; } /* -------------------------------------------------------------------------- 5. LINKS Gold text with an underline that grows from the left. -------------------------------------------------------------------------- */ a { color: var(--color-gold); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-hover) var(--ease-standard), color var(--dur-hover) var(--ease-standard); } a:hover { background-size: 100% 1px; } a:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--focus-ring); } /* -------------------------------------------------------------------------- 6. BUTTONS One true primary (warm gold), a quiet ghost secondary, a tertiary link. Labels are sentence case so they read as inscriptions, not widgets. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-ui); font-weight: 600; letter-spacing: 0.02em; line-height: 1; padding: 16px 34px; border: 1px solid transparent; border-radius: var(--radius-button); cursor: pointer; text-decoration: none; background-image: none; /* cancel the link underline mechanism */ transition: background var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard), color var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard), transform var(--dur-hover) var(--ease-standard); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-primary { background: var(--gold-cta); color: var(--color-void); } .btn-primary:hover { background: var(--gold-cta-hover); box-shadow: var(--shadow-gold-glow); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: transparent; border-color: var(--color-line); color: var(--color-ivory); font-weight: 500; } .btn-secondary:hover { border-color: var(--color-gold); color: var(--color-gold); background: var(--gold-tint-06); } /* Tertiary inline link: gold with a left-growing underline (inherits `a`) */ .btn-tertiary { display: inline-flex; align-items: center; gap: var(--space-2xs); padding-block: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-ui); font-weight: 600; letter-spacing: 0.02em; color: var(--color-gold); white-space: nowrap; } /* Without this the browser's default blue ring applies, which measured 2.59:1 against the card ground and fails the 3:1 focus floor. Every sibling control already uses this token; this one had fallen out of the system. */ .btn-tertiary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; } /* Visually-hidden (screen-reader only) utility */ .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; } /* -------------------------------------------------------------------------- SIGNUP — reusable premium email capture with a graceful confirm state. Behaviour in js/main.js (initSignup). Drop a [data-signup] block anywhere. -------------------------------------------------------------------------- */ .signup { max-width: 34rem; margin-inline: auto; } .signup__form { display: flex; gap: var(--space-sm); align-items: stretch; } .signup__field { flex: 1 1 auto; min-width: 0; } .signup__input { width: 100%; height: 54px; padding: 0 18px; font-family: var(--font-body); font-size: 1rem; line-height: 1.2; color: var(--color-ivory); background: rgba(244, 239, 227, 0.04); border: 1px solid var(--color-line); border-radius: var(--radius-input); transition: border-color var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard), background-color var(--dur-hover) var(--ease-standard); } .signup__input::placeholder { color: var(--color-periwinkle); } .signup__input:focus { outline: none; border-color: var(--color-gold); box-shadow: var(--focus-ring); background: rgba(244, 239, 227, 0.06); } .signup__input.is-invalid { border-color: var(--color-input-invalid); } .signup__submit { flex: none; height: 54px; } .signup__error { margin-top: var(--space-sm); color: var(--color-error); font-size: 1rem; } .signup__note { margin-top: var(--space-md); } /* Kit-ready signup markup is exposed by the early `.js` class. With JavaScript absent, only the form's honest noscript notice is rendered. */ .signup__js-only { display: none; } .js .signup__js-only { display: block; } .signup__pending { margin: 0 0 var(--space-md); color: var(--color-ivory-dim); } .signup__input:disabled, .signup__input[readonly] { cursor: not-allowed; opacity: 1; } /* Confirmation state (shown once the form is submitted) */ .signup__confirm { display: none; flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center; } .signup.is-done .signup__form, .signup.is-done .signup__error, .signup.is-done .signup__note { display: none; } .signup.is-done .signup__confirm { display: flex; outline: none; animation: signup-confirm-in 0.6s var(--ease-entrance) both; } .signup__check svg { width: 56px; height: 56px; display: block; } .signup__check-circle { fill: none; stroke: var(--color-gold); stroke-width: 2; opacity: 0.45; } .signup__check-mark { fill: none; stroke: var(--color-gold-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; } .signup.is-done .signup__check-mark { animation: signup-check 0.6s var(--ease-entrance) 0.15s forwards; } .signup__confirm-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-ivory); margin: 0; } .signup__confirm-text { color: var(--color-slate); margin: 0; } @keyframes signup-confirm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes signup-check { to { stroke-dashoffset: 0; } } @media (max-width: 560px) { .signup__form { flex-direction: column; } .signup__submit { width: 100%; } } /* -------------------------------------------------------------------------- 7. LAYOUT HELPERS -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .container--content { max-width: var(--container-content); } .container--narrow { max-width: var(--measure); } .section { position: relative; padding-block: var(--space-3xl); } .measure { max-width: var(--measure); } .measure-lede { max-width: var(--measure-lede); } /* Page hero: the standard top section for interior pages (title + lede) */ .page-hero { position: relative; min-height: 76vh; display: flex; align-items: center; padding-block: var(--space-4xl); } .page-hero__inner { max-width: var(--measure); } .page-hero .gold-rule { margin: var(--space-md) 0 var(--space-lg); } .page-hero__title { margin-bottom: var(--space-lg); } /* The single inverted warm section (use exactly once across the site) */ .section-vellum { background: var(--color-vellum); color: var(--color-ink); } .section-vellum h1, .section-vellum h2, .section-vellum h3, .section-vellum .quote, .section-vellum .display { color: var(--color-ink); } .section-vellum .eyebrow { color: var(--color-gold-on-light); } .section-vellum a { color: var(--color-gold-on-light); } .section-vellum .caption { color: var(--color-caption-on-vellum); } /* -------------------------------------------------------------------------- FILM GRAIN (removes synthetic smoothness; reads as shot, not generated) A fixed, near-invisible noise layer over the whole page. -------------------------------------------------------------------------- */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: var(--grain); background-size: 180px 180px; opacity: 0.05; mix-blend-mode: overlay; } /* -------------------------------------------------------------------------- EDITORIAL DEVICES (sequenced numerals, wide-tracked labels) For pacing a journey: the three eras as 01 / 02 / 03, etc. -------------------------------------------------------------------------- */ .era-number { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.5rem, 9vw, 7rem); line-height: 0.9; color: var(--color-gold); } .tracked { letter-spacing: 0.3em; } /* -------------------------------------------------------------------------- 8. THE ETHEREAL ELEMENT A near-subliminal box-shadow starfield over flat deep fields, with a neutral vignette for legibility (in production, backed by real deep-sky photography). No decorative colour gradients. Confined to large empty sections, never behind body text. -------------------------------------------------------------------------- */ .ethereal-stage { position: relative; overflow: hidden; isolation: isolate; } .vignette, .starfield, .starfield-twinkle { position: absolute; pointer-events: none; z-index: -1; } /* Neutral edge darkening for legibility over imagery (photographic falloff). */ .vignette { inset: 0; background: var(--vignette); } /* Starfield is a single 1px point at top-center; stars are its box-shadows. */ .starfield, .starfield-twinkle { top: 0; left: 50%; width: 1px; height: 1px; border-radius: var(--radius-pill); background: transparent; } .starfield { box-shadow: var(--starfield-static); } .starfield-twinkle { box-shadow: var(--starfield-twinkle); animation: star-twinkle var(--dur-twinkle) var(--ease-drift) infinite; } @keyframes star-twinkle { 0%, 100% { opacity: var(--star-twinkle-from); } 50% { opacity: var(--star-twinkle-to); } } /* On smaller screens, dial the field back to protect legibility. */ @media (max-width: 640px) { .starfield, .starfield-twinkle { opacity: 0.6; } } /* -------------------------------------------------------------------------- 9. MOTION (entrance reveals + gentle parallax) JS toggles .is-visible on .reveal elements; parallax sets --parallax. -------------------------------------------------------------------------- */ /* Hidden only when JS is present (the guard). Without JS, or if a crawler does not execute it, .reveal content shows by default. */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-entrance) var(--ease-entrance), transform var(--dur-entrance) var(--ease-entrance); } .reveal.is-visible { opacity: 1; transform: none; } /* If the deferred reveal controller never takes ownership, do not leave meaningful content hidden. This class is set by the 1500ms head failsafe. */ html.reveal-failsafe .reveal, html.reveal-failsafe .gold-rule.reveal { opacity: 1; transform: none; transition: none; } /* Gold rules draw in from the centre instead of rising */ .js .gold-rule.reveal { opacity: 0; transform: scaleX(0); transition: transform var(--dur-rule) var(--ease-entrance), opacity var(--dur-entrance) var(--ease-entrance); } .gold-rule.reveal.is-visible { opacity: 1; transform: scaleX(1); } /* Parallax layers drift via the --parallax variable set in main.js */ .parallax { transform: translateY(var(--parallax, 0)); } /* -------------------------------------------------------------------------- SITE SHELL — reusable header / navigation + footer Dropped into every page (canonical source in /partials). Behaviour is in js/nav.js. Set per page. -------------------------------------------------------------------------- */ @media (max-width: 640px) { :root { --header-height: 64px; } } /* Skip link (accessibility) */ .skip-link { position: fixed; top: var(--space-md); left: var(--space-md); z-index: 2000; transform: translateY(-200%); background: var(--color-void); color: var(--color-ivory); border: 1px solid var(--color-line); font-family: var(--font-body); font-size: var(--text-ui); font-weight: 600; letter-spacing: 0.02em; padding: 14px 22px; border-radius: var(--radius-button); transition: transform var(--dur-hover) var(--ease-standard); } .skip-link:focus { transform: none; outline: none; box-shadow: var(--focus-ring); } /* ---- Header ---- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--header-height); display: flex; align-items: center; background: var(--color-void); border-bottom: 1px solid var(--color-line-soft); box-shadow: none; transition: background-color var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard); } .site-header__inner { width: 100%; max-width: var(--container-max); margin-inline: auto; /* Respect notch / rounded-corner safe areas in landscape on phones. */ padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } /* Solid is the safe default. JavaScript may opt hero pages into the original transparent treatment only while they are at the top of the page. */ .nav-ready body.has-hero .site-header.is-at-top { background: transparent; border-bottom-color: transparent; box-shadow: none; } .site-header.is-scrolled { background: var(--color-void); border-bottom-color: var(--color-control-border); box-shadow: 0 8px 24px var(--color-depth); } body:not(.has-hero) { padding-top: var(--header-height); } /* ---- Brand wordmark ---- */ .brand { display: inline-flex; align-items: center; gap: var(--space-2xs); background-image: none; line-height: 1; min-height: 44px; /* 44px touch floor (DESIGN-FLOORS); centred content keeps the wordmark's optical position in the header bar */ } .brand__mark { color: var(--color-gold); display: inline-flex; flex: none; } .brand__word, .mobile-nav__proposition, .site-footer__tagline { font-family: var(--font-display); font-weight: 500; font-size: var(--text-brand); letter-spacing: 0.015em; } .brand__word { color: var(--color-ivory); } .trademark-name { white-space: nowrap; } .brand__word .trademark-mark, .site-footer__base .trademark-mark { font-family: var(--font-body); font-size: var(--text-brand-mark); line-height: 0; letter-spacing: 0; margin-inline-start: 0.04em; vertical-align: super; } .brand:hover .brand__mark { color: var(--color-gold-bright); } /* On desktop, the name reads as a compact masthead rather than a navigation label. The compact measure gives the larger display step room without widening the brand at the narrow edge of the desktop layout. */ @media (min-width: 1050px) { :root { --header-height: 88px; } .site-header .brand__word { inline-size: 6.25em; white-space: normal; font-size: var(--text-h3); line-height: 0.9; } .site-header .brand__word .trademark-mark { vertical-align: 0.2em; } } /* ---- Desktop navigation ---- */ .nav-desktop { display: flex; align-items: center; gap: var(--space-xl); } .nav-desktop__list { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; } .nav-desktop__list a { display: inline-block; /* makes the 44px min-width below effective (ignored on inline boxes) */ font-family: var(--font-body); font-size: var(--text-ui); font-weight: 400; letter-spacing: 0.02em; color: var(--color-ivory-dim); padding-block: 14px; min-width: 44px; /* short labels like "Home" still get a 44px-wide hit box */ background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 calc(100% - 14px - 0.5em + var(--shell-rule-offset)); background-repeat: no-repeat; transition: color var(--dur-hover) var(--ease-standard), background-size var(--dur-hover) var(--ease-standard); } /* The desktop navigation begins where the established spacing curve reaches a full 24px between labels. It opens back to the wider established value as the header gains room; the link size stays constant across desktop. */ @media (min-width: 1050px) { .nav-desktop { gap: clamp( var(--space-xs), calc(16vw - 144px + var(--space-2xs)), var(--space-xl) ); } .nav-desktop__list { gap: clamp( var(--space-3xs), calc(16vw - 144px), var(--space-lg) ); } .nav-desktop__list a { font-size: var(--text-ui); white-space: nowrap; } } /* ---- Primary CTA, set apart from the text links ---- */ .btn-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; padding: 15px 26px; border-radius: var(--radius-button); background: var(--color-gold); color: var(--color-void); border: 1px solid var(--color-gold); background-image: none; white-space: nowrap; transition: background-color var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard), transform var(--dur-hover) var(--ease-standard); } .btn-cta:hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); box-shadow: var(--shadow-gold-glow); transform: translateY(-1px); } .btn-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Shell actions are outlines. Gold fill is reserved for each page's primary action inside main. */ .site-header .btn-cta, .mobile-nav .mobile-nav__cta, .site-footer .btn-cta { background: transparent; border-color: var(--color-control-border); color: var(--color-ivory); letter-spacing: 0.02em; } .site-header .btn-cta:hover, .mobile-nav .mobile-nav__cta:hover, .site-footer .btn-cta:hover { background: transparent; border-color: var(--color-ivory); color: var(--color-ivory); box-shadow: none; transform: none; } .site-header .btn-cta[aria-current="page"], .mobile-nav .mobile-nav__cta[aria-current="page"], .site-footer .btn-cta[aria-current="page"] { background: transparent; border-color: var(--color-control-border); color: var(--color-ivory); box-shadow: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; transform: none; } .site-header .btn-cta[aria-current="page"]:focus-visible, .mobile-nav .mobile-nav__cta[aria-current="page"]:focus-visible, .site-footer .btn-cta[aria-current="page"]:focus-visible { box-shadow: var(--focus-ring); } /* ---- Hamburger toggle (mobile only) ---- Icon-only by ruling (SPEC round 3, fix 1): DESIGN-FLOORS.md drops the visible "Menu" word for this client; the aria-label carries the name. */ .nav-toggle { display: none; width: 48px; height: 48px; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 0; cursor: pointer; } .nav-toggle__bar { display: block; width: 24px; height: 1.5px; background: var(--color-ivory); transition: transform var(--dur-hover) var(--ease-standard), opacity var(--dur-hover) var(--ease-standard), background-color var(--dur-hover) var(--ease-standard); } .nav-toggle:hover .nav-toggle__bar { background: var(--color-ivory); } .nav-toggle.is-active .nav-toggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); } .nav-toggle.is-active .nav-toggle__bar:last-child { transform: translateY(-3.25px) rotate(-45deg); } .nav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-button); } /* ---- Mobile overlay menu (full-screen, on-brand cosmic) ---- */ .mobile-nav { position: fixed; inset: 0; z-index: 1100; background: var(--color-void); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s var(--ease-entrance), visibility 0.45s linear; } .mobile-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .mobile-nav__inner { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; /* The overlay is full-bleed, so it must inset its content for notch + home indicator. */ padding: calc(var(--header-height) + var(--space-sm) + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-md) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); } .mobile-nav .gold-rule { margin-bottom: var(--space-md); } .mobile-nav__proposition { max-width: 34ch; margin: 0 0 var(--space-sm); color: var(--color-slate); line-height: 1.4; } .mobile-nav__proposition em { font-style: italic; color: var(--color-ivory-dim); } .mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); } .mobile-nav__list a { font-family: var(--font-display); font-weight: 500; line-height: 1.1; font-size: clamp(2.109375rem, 9vw, 2.75rem); color: var(--color-ivory-dim); display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 6px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 calc(100% - 2px); background-repeat: no-repeat; transition: color var(--dur-hover) var(--ease-standard), background-size var(--dur-hover) var(--ease-standard); } .mobile-nav__cta { min-height: 44px; margin: var(--space-lg) 0 var(--space-md); padding-block: 13px; align-self: flex-start; } .mobile-nav__listen { display: flex; flex-direction: column; gap: var(--space-2xs); } .mobile-nav__listen .label-wide { letter-spacing: var(--tracking-metadata-sc); } .mobile-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); } .mobile-nav__links a { color: var(--color-ivory-dim); font-size: var(--text-ui); font-weight: 400; letter-spacing: 0.02em; display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; min-width: 44px; /* 44px-wide hit box even for short labels */ } /* staggered entrance of the menu items when opened */ .mobile-nav__list li, .mobile-nav__cta, .mobile-nav__listen { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease-entrance), transform 0.5s var(--ease-entrance); } .mobile-nav.is-open .mobile-nav__list li, .mobile-nav.is-open .mobile-nav__cta, .mobile-nav.is-open .mobile-nav__listen { opacity: 1; transform: none; } .mobile-nav.is-open .mobile-nav__list li:nth-child(1) { transition-delay: 0.10s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(2) { transition-delay: 0.16s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(3) { transition-delay: 0.22s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(4) { transition-delay: 0.28s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(5) { transition-delay: 0.34s; } .mobile-nav.is-open .mobile-nav__cta { transition-delay: 0.40s; } .mobile-nav.is-open .mobile-nav__listen { transition-delay: 0.46s; } body.nav-open { overflow: hidden; } /* While the menu is open, lift the header (and its hamburger, now an X) above the overlay so the close control stays visible and tappable. The bar itself goes transparent so only the wordmark and the X read over the cosmic overlay. */ body.nav-open .site-header { z-index: 1200; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } /* The synchronous head script compacts the small-screen header before paint. The deferred controller alone exposes the hamburger once it is working. If readiness misses the failsafe window, .nav-failsafe restores real links. */ @media (max-width: 1049px) { .site-header { position: relative; inset: auto; height: auto; min-height: var(--header-height); } .site-header__inner { flex-wrap: wrap; row-gap: var(--space-2xs); padding-block: var(--space-2xs); } body:not(.has-hero) { padding-top: 0; } .nav-desktop { display: block; flex: 0 0 100%; width: 100%; } .nav-desktop__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-sm); } .nav-desktop__list a { display: flex; align-items: center; min-height: 44px; padding-block: 0; } .nav-desktop .btn-cta { display: inline-flex; margin: var(--space-xs) 0 var(--space-2xs); } .nav-toggle { display: none; } html.js:not(.nav-failsafe) .site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-height); min-height: 0; } html.js:not(.nav-failsafe) .site-header__inner { flex-wrap: nowrap; row-gap: normal; padding-block: 0; } html.js:not(.nav-failsafe) body:not(.has-hero) { padding-top: var(--header-height); } html.js:not(.nav-failsafe) .nav-desktop { display: none; } html.js:not(.nav-failsafe) .nav-desktop .btn-cta { display: none; } html.nav-ready:not(.nav-failsafe) .nav-toggle { display: inline-flex; } } /* Keep the five-link navigation in one reading column throughout the laptop band. The listen block uses the second column beside it, while navigation type scales with viewport height to preserve the complete short-window menu. */ @media (min-width: 768px) and (max-width: 1049px) { .mobile-nav__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: var(--space-lg); align-content: start; } .mobile-nav .gold-rule, .mobile-nav__proposition { grid-column: 1 / -1; } .mobile-nav__inner > nav { grid-column: 1; grid-row: 3; } .mobile-nav__list { gap: var(--space-xs); } .mobile-nav__list a { font-size: clamp(2.109375rem, calc(0.609375rem + 4vh), 2.75rem); white-space: nowrap; } .mobile-nav__cta { grid-column: 1; grid-row: 4; margin: var(--space-md) 0 0; } .mobile-nav__listen { grid-column: 2; grid-row: 3 / 5; align-self: end; } } /* Keep the complete phone menu above the fold when height is scarce without reducing its 44px targets, shrinking its type or removing content. */ @media (max-width: 767px) and (max-height: 700px) { .mobile-nav__inner { padding-top: calc(var(--header-height) + var(--space-3xs) + env(safe-area-inset-top)); padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom)); } .mobile-nav .gold-rule { margin-bottom: var(--space-3xs); } .mobile-nav__proposition { margin-bottom: var(--space-3xs); } .mobile-nav__list { gap: var(--space-3xs); } .mobile-nav__cta { margin: var(--space-sm) 0 var(--space-3xs); } .mobile-nav__listen { gap: var(--space-3xs); } } /* ---- Footer ---- */ .site-footer { position: relative; background: var(--color-void); border-top: 1px solid var(--color-line-soft); } .site-footer__inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-3xl) var(--gutter) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; gap: clamp(var(--space-sm), 4vw, var(--space-xl)); } .site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); max-width: 38ch; } .site-footer__tagline { color: var(--color-slate); margin: 0; line-height: 1.4; } .site-footer__tagline em { font-style: italic; color: var(--color-ivory-dim); white-space: nowrap; } .site-footer__col-title { margin-bottom: var(--space-md); } .site-footer__nav ul, .site-footer__listen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); } .site-footer__nav a, .site-footer__listen a { display: inline-block; padding-block: 0.75rem; /* 48px touch target */ min-width: 44px; /* 44px-wide hit box even for short labels */ color: var(--color-ivory-dim); font-size: var(--text-ui); font-weight: 400; letter-spacing: 0.02em; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 calc(100% - 12px - 0.5em + var(--shell-rule-offset)); background-repeat: no-repeat; transition: color var(--dur-hover) var(--ease-standard), background-size var(--dur-hover) var(--ease-standard); } @media (min-width: 701px) { .site-footer__nav a, .site-footer__listen a { white-space: nowrap; } } @media (min-width: 768px) { .site-footer__inner { max-width: 50rem; grid-template-columns: max-content max-content max-content; justify-content: space-between; padding-inline: clamp(var(--space-sm), 2.5vw, var(--space-xl)); gap: clamp(var(--space-sm), 2vw, var(--space-lg)); } .site-footer__brand { width: 15.25rem; max-width: none; gap: var(--space-lg); } .site-footer__brand .brand { min-height: 0; flex-direction: column; align-items: flex-start; gap: var(--space-xs); } .site-footer__brand .brand__mark { width: var(--space-lg); height: var(--space-lg); } .site-footer__brand .brand__word { font-size: var(--text-h3); } /* Both footer lists share one rhythm. Stretching the shorter list to match the taller one's height made it step 118px against the other's 62px, so the two columns started together and visibly drifted apart. Same gap, both lists. */ } /* One state language in every shell navigation zone: full light rule on hover, full heavier rule for the page the reader is already on. */ .nav-desktop__list a:hover, .mobile-nav__list a:hover, .site-footer__nav a:hover, .site-footer__listen a:hover { color: var(--color-ivory); background-size: 100% 1px; } .nav-desktop__list a[aria-current="page"], .mobile-nav__list a[aria-current="page"], .site-footer__nav a[aria-current="page"] { color: var(--color-ivory); background-size: 100% 2px; } .site-footer__base { border-top: 1px solid var(--color-line-soft); } .site-footer__base-inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-lg) var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; } .site-footer__base .caption { margin: 0; font-weight: 400; letter-spacing: 0.02em; } @media (max-width: 700px) { .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-lg) var(--gutter) var(--space-md); } .site-footer__listen { width: 88%; } .site-footer__brand { gap: var(--space-xs); } .site-footer__col-title { margin-bottom: var(--space-2xs); } .site-footer__nav ul, .site-footer__listen ul { gap: 0; } .site-footer__nav a, .site-footer__listen a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; } .site-footer__base-inner { padding: var(--space-xs) var(--gutter); gap: var(--space-2xs); } } /* -------------------------------------------------------------------------- 10. REDUCED MOTION Collapse every entrance to an instant opacity-only reveal, disable parallax, and freeze the star twinkle. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .site-header, .mobile-nav, .nav-toggle__bar { transition: none !important; } .reveal, .gold-rule.reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .parallax { transform: none !important; } .mobile-nav__list li, .mobile-nav__cta, .mobile-nav__listen { opacity: 1 !important; transform: none !important; transition: none !important; } .signup.is-done .signup__confirm { animation: none !important; } .signup.is-done .signup__check-mark { animation: none !important; stroke-dashoffset: 0 !important; } .starfield-twinkle { animation: none !important; opacity: var(--star-twinkle-to); } } /* ============================================================ COVER ART: the book cover with all meaningful text typeset live. Shared by book.html (hero) and index.html (teaser). The cover image is deliberately text-free, so the title, byline and author are layered over the art: a wording change is an edit here, never a new image bake. Sizes use container-query units so the type scales with the cover at any layout width. ============================================================ */ .cover-art { position: relative; display: block; container-type: inline-size; } .cover-art img { display: block; width: 100%; height: auto; } .cover-art__titles { position: absolute; left: 7%; right: 7%; top: 7.5%; /* Hidden unless container-query units are supported: on an old browser the overlay disappears cleanly (the page's own heading carries the title) instead of rendering at inherited size and flooding the cover. */ display: none; text-align: center; pointer-events: none; } @supports (container-type: inline-size) { .cover-art__titles { display: block; } } .cover-art__line { display: block; font-family: var(--font-display); font-weight: 500; /* 9cqw + nowrap: each authored line stays ONE line at every cover width (10.5cqw broke "Really Works" onto a third line from 240-420px). */ font-size: 9cqw; line-height: 1.18; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; color: var(--color-ivory); } .cover-art__byline { display: block; margin-top: 3.4cqw; font-family: var(--font-display); font-style: italic; font-weight: 400; /* max(13px, ...): Felix ruled the byline UP to a 13px floor (round 4, fix 6), not exempted; it is the book's real subtitle. 4.1cqw takes over above a ~317px container, so it still scales with the cover. The byline carries no nowrap, so at floored widths it wraps to two lines rather than overflowing; the one-line-box guarantee on .cover-art__line (9cqw) is untouched. */ font-size: max(13px, 4.1cqw); line-height: 1.4; letter-spacing: 0.02em; color: var(--color-gold); } .cover-art__author { position: absolute; left: 7%; right: 7%; bottom: 3.8%; display: none; font-family: var(--font-display); font-size: max(0.8125rem, 3.8cqw); font-weight: 500; line-height: 1; letter-spacing: 0.36em; text-align: center; text-transform: uppercase; white-space: nowrap; color: var(--color-gold); pointer-events: none; } @supports (container-type: inline-size) { .cover-art__author { display: block; } }