/* ========================================================================== 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-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, gold text on light */ /* 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) */ --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: 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) */ /* ---- 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', Georgia, 'Times New Roman', serif; --font-body: 'Hanken Grotesk', 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, 4vw, 3.25rem); /* section headings, Cormorant 500 */ --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.0625rem, 1.2vw, 1.125rem);/* teaching copy, Hanken 400 */ --text-quote: clamp(1.75rem, 3vw, 2rem); /* pull-quotes, Cormorant italic 400 */ --text-ui: 0.9375rem; /* button labels, UI controls */ --text-caption: 0.8125rem; /* captions, metadata */ --text-eyebrow: 0.75rem; /* eyebrow / kicker */ /* ---- 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-gold-glow: 0 0 28px rgba(224, 184, 104, 0.22); --focus-ring: 0 0 0 1px rgba(230, 190, 115, 0.5), 0 0 0 4px rgba(224, 184, 104, 0.18); --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); } /* Eyebrow / kicker: the signature small element, paired with a gold rule */ .eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold); 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); } /* 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); font-family: var(--font-body); font-size: var(--text-ui); font-weight: 600; letter-spacing: 0.02em; color: var(--color-gold); } /* 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: #E0907A; } .signup__submit { flex: none; height: 54px; } .signup__error { margin-top: var(--space-sm); color: #E6A491; font-size: 0.875rem; } .signup__note { margin-top: var(--space-md); } /* 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-deep); } .section-vellum a { color: var(--color-gold-deep); } .section-vellum .caption { color: #6A6A82; } /* -------------------------------------------------------------------------- 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); } .label-wide { display: inline-block; font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-periwinkle); } .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); filter: blur(6px); transition: opacity var(--dur-entrance) var(--ease-entrance), transform var(--dur-entrance) var(--ease-entrance), filter var(--dur-entrance) var(--ease-entrance); } /* Content does not just slide up: it resolves out of soft focus, the way a thing is "revealed." A whisper of blur clearing is the signature of the entrance. */ .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* Gold rules draw in from the centre instead of rising */ .js .gold-rule.reveal { opacity: 0; transform: scaleX(0); filter: none; /* the hairline draws in; it does not blur (overrides .reveal) */ 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-gold); color: var(--color-void); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; padding: 10px 18px; 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; border-bottom: 1px solid transparent; 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); } /* Scrolled / solid state (interior pages without a hero get it from the start) */ .site-header.is-scrolled, body:not(.has-hero) .site-header { background: rgba(5, 7, 26, 0.72); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); border-bottom-color: var(--color-line-soft); box-shadow: 0 1px 24px rgba(5, 7, 26, 0.5); } 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; } .brand__mark { color: var(--color-gold); display: inline-flex; flex: none; } .brand__word { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--color-ivory); letter-spacing: 0.015em; } .brand:hover .brand__mark { color: var(--color-gold-bright); } /* ---- 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 { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; color: var(--color-ivory-dim); padding-block: 6px; background-image: linear-gradient(var(--color-gold), var(--color-gold)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color var(--dur-hover) var(--ease-standard), background-size var(--dur-hover) var(--ease-standard); } .nav-desktop__list a:hover, .nav-desktop__list a.is-active { color: var(--color-ivory); background-size: 100% 1px; } /* ---- 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: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; padding: 11px 22px; 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); } /* ---- Hamburger toggle (mobile only) ---- */ .nav-toggle { display: none; width: 44px; height: 44px; 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-gold); } .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; transition: opacity 0.45s var(--ease-entrance), visibility 0.45s linear; } .mobile-nav.is-open { opacity: 1; visibility: visible; } .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-xl) + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-2xl) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); } .mobile-nav__eyebrow { margin-bottom: var(--space-md); } .mobile-nav .gold-rule { margin-bottom: var(--space-2xl); } .mobile-nav__list { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); } .mobile-nav__list a { font-family: var(--font-display); font-weight: 500; line-height: 1.1; font-size: clamp(2rem, 9vw, 2.75rem); color: var(--color-ivory); background-image: none; display: inline-block; transition: color var(--dur-hover) var(--ease-standard); } .mobile-nav__list a:hover, .mobile-nav__list a.is-active { color: var(--color-gold); } .mobile-nav__cta { margin: var(--space-2xl) 0 var(--space-xl); align-self: flex-start; } .mobile-nav__listen { display: flex; flex-direction: column; gap: var(--space-sm); } .mobile-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); } .mobile-nav__links a { color: var(--color-ivory-dim); font-size: 0.9375rem; letter-spacing: 0.02em; } /* 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; } /* Swap desktop nav for the hamburger below the breakpoint */ @media (max-width: 900px) { .nav-desktop { display: none; } .nav-toggle { display: inline-flex; } } /* ---- 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: 1.6fr 1fr 1fr; gap: var(--space-2xl); } .site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); max-width: 38ch; } .site-footer__tagline { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.4; color: var(--color-slate); margin: 0; } .site-footer__tagline em { font-style: italic; color: var(--color-gold); } .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-sm); } .site-footer__nav a, .site-footer__listen a { color: var(--color-ivory-dim); font-size: 0.9375rem; letter-spacing: 0.02em; background-image: linear-gradient(var(--color-gold), var(--color-gold)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color var(--dur-hover) var(--ease-standard), background-size var(--dur-hover) var(--ease-standard); } .site-footer__nav a:hover, .site-footer__listen a:hover { color: var(--color-ivory); background-size: 100% 1px; } .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; } @media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-xl); } } /* -------------------------------------------------------------------------- 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; } .reveal, .gold-rule.reveal { opacity: 1 !important; transform: none !important; filter: 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); } }