/* ============================================================ Halle Eavelyn demo, iteration 11 — DEEP BLUE, IVORY, AMBER, BRONZE System + home stylesheet. Her rebrand round, editorial luxury: one deep blue #17135C on every dark moment (the old navy, violet, and periwinkle all resolve to it — no other dark blues or purples), warm ivory #FBFAF5 as the only light surface (lavender is gone), amber #ED941C on the conversion moments only, bronze #98651D on eyebrows, labels, numerals, and rules. Discipline held here: - ivory family ~60%, deep-blue bands ~32%, amber <=8% - amber is worn (ONE amber button per screen, key pricing, emphasis), never poured - amber #ED941C is 2.25:1 on ivory, so it never sets small text there: bronze (4.8:1) does. On deep blue amber is 6.9:1; bronze on deep blue (3.3:1) is rules only, never text - no drop shadows anywhere; depth = whitespace + thin rules - banding rings only in corners of deep-blue bands, <=6% - radii 0-4px (architecture, not upholstery); only the arch portrait keeps its round top Typography: Cormorant Infant (display, per Halle — Fraunces is retired) + Source Serif 4 (body) + Archivo (labels) + Forever Soulmates, the handwriting face from Halle's own site, as the second accent. This sheet serves the home page and defines the system voice; the inner pages carry the same identity in their own group sheets (quiz-gift.css, work-method.css, show.css). Motion: visible by default. The head script adds .anim to only when JS runs and reduced motion is off; hidden poses live only inside keyframes, so no-JS, reduced-motion, and static renders always show everything. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400&family=Archivo:wght@500;600;700&display=swap"); /* her own handwriting face, self-hosted from her site's asset set */ @font-face { font-family: "Amsterdam One"; src: url("/assets/fonts/amsterdamone.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Forever Soulmates"; src: url("/assets/fonts/foreversoulmates.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ---- navy, cream, her gold ---- */ --cream: #FBFAF5; --alabaster: #FBFAF5; --wash: #F4F1E7; --night: #17135C; --night-2: #17135C; --violet: #17135C; --peri-deep: #17135C; --ink: #17135C; --body-c: #17135C; --muted: #6B675C; --gold: #ED941C; --gold-light: #ED941C; --gold-ink: #98651D; --gold-ink-2: #98651D; /* AA on wash */ --gold-rule: rgba(152, 101, 29, 0.5); --hairline: rgba(23, 19, 92, 0.16); --hairline-d: rgba(251, 250, 245, 0.18); --error: #963D2C; --peri: #17135C; --font-display: "Cormorant Infant", Georgia, serif; --font-body: "Source Serif 4", Georgia, serif; --font-ui: "Archivo", -apple-system, "Segoe UI", sans-serif; --font-script: "Amsterdam One", "Forever Soulmates", cursive; --wrap: 1160px; --ease: cubic-bezier(0.22, 0.7, 0.3, 1); /* banding: concentric gold rings at 5.5% opacity, bled off the corners of night bands only */ --bands: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='880'%20height='880'%3E%3Cg%20fill='none'%20stroke='%23ED941C'%20stroke-opacity='.055'%20stroke-width='1.2'%3E%3Ccircle%20cx='440'%20cy='440'%20r='52'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='66'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='96'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='128'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='142'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='184'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='222'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='238'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='284'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='322'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='338'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='392'/%3E%3Ccircle%20cx='440'%20cy='440'%20r='430'/%3E%3C/g%3E%3C/svg%3E"); /* the five strata (stolen from direction B): quiz progress marks and the result's stage marker */ --strata-1: #EDE4D2; --strata-2: #D9C49C; --strata-3: #B98F4E; --strata-4: #98651D; --strata-5: #17135C; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--cream); } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.72; color: var(--body-c); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.14; margin: 0 0 0.5em; font-weight: 500; } p { margin: 0 0 1em; } a { color: var(--peri-deep); } :focus-visible { outline: 3px solid var(--peri-deep); outline-offset: 3px; } .night :focus-visible { outline-color: var(--gold-light); } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2rem); } .wrap-narrow { max-width: 880px; } .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; } .skip-link { position: absolute; top: -70px; left: 1rem; z-index: 300; background: var(--night); color: #FBFAF5; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.8rem 1.3rem; border-radius: 0 0 3px 3px; text-decoration: none; transition: top 0.25s var(--ease); } .skip-link:focus { top: 0; } /* ---------- shared voice ---------- */ .kicker, .eyebrow { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.1rem; } .kicker::before, .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); flex: none; } .night .kicker, .night .eyebrow, .eyebrow-light { color: var(--gold-light); } .night .kicker { justify-content: center; } .night .kicker::after { content: ""; width: 26px; height: 1px; background: var(--gold-ink); flex: none; } /* accent words inside frozen copy: Forever Soulmates, the handwriting face from Halle's own site (her request: no more italic, "the letters go backwards and forwards"). Periwinkle on light, gold light on night. Words never change, only the dress. The script runs larger than its host line because the face has a small x-height, and it carries descender room for the swashes. */ .accent-i, .accent-ital, .accent, .script { font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 1.15em; line-height: 1.4; display: inline-block; padding: 0.06em 0.14em 0.2em 0.06em; word-spacing: 0.1em; color: var(--peri-deep); } .night .accent-i, .night .accent-ital, .night .script { color: var(--gold-light); } .accent-lg { display: block; font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: clamp(2.3rem, 4.9vw, 3.4rem); line-height: 1.35; padding: 0.04em 0.14em 0.3em 0.06em; } .sec-head { max-width: 44rem; margin-bottom: clamp(2.2rem, 4.5vw, 3.2rem); } .sec-head h2 { font-size: clamp(1.95rem, 3.6vw, 2.8rem); font-weight: 500; line-height: 1.12; } .sec-sub { font-size: 1.05rem; color: var(--body-c); margin: 0; } .sec-head-c { margin-inline: auto; text-align: center; } .sec-head-c .kicker, .sec-head-c .eyebrow { justify-content: center; } .sec-head-c .kicker::after, .sec-head-c .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--gold); flex: none; } .dot { display: inline-block; width: 5px; height: 5px; background: var(--gold-ink); transform: rotate(45deg); margin-inline: 0.6rem; vertical-align: middle; } .label { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .label-gold { color: var(--gold-ink); } .label-light { color: #C9C4B4; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 1rem 1.9rem; border-radius: 2px; border: 1px solid transparent; background: none; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } button.btn { appearance: none; -webkit-appearance: none; } .btn-gold { background: var(--gold); color: var(--night); } .btn-gold:hover { background: #C97815; } .btn-ghost { border-color: rgba(23, 19, 92, 0.55); color: var(--violet); } .btn-ghost:hover { border-color: var(--violet); background: rgba(23, 19, 92, 0.05); } .night .btn-ghost { border-color: rgba(237, 148, 28, 0.6); color: #FBFAF5; } .night .btn-ghost:hover { border-color: var(--gold-light); background: rgba(237, 148, 28, 0.08); } .btn-sm { min-height: 44px; padding: 0.7rem 1.25rem; } .btn-lg { min-height: 54px; padding: 1.1rem 2.4rem; font-size: 0.82rem; } .btn-block { display: flex; width: 100%; } .btn[disabled] { opacity: 0.55; cursor: default; } /* ONE gold button per screen: wherever a hero carries the gold CTA, the header quiz button holds the ghost register. Inner pages still shipping the iteration-8 gold header button are folded into the rule here. */ .nav .btn-gold, .header-actions .btn-gold { background: none; border-color: rgba(23, 19, 92, 0.55); color: var(--violet); } .nav .btn-gold:hover, .header-actions .btn-gold:hover { border-color: var(--violet); background: rgba(23, 19, 92, 0.05); } .cta-link { display: inline-block; font-family: var(--font-ui); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid var(--gold-rule); padding-bottom: 0.3rem; transition: color 0.2s ease, border-color 0.2s ease; } .cta-link:hover { color: var(--violet); border-color: var(--violet); } .night .cta-link { color: var(--gold-light); } .night .cta-link:hover { color: #FBFAF5; border-color: #FBFAF5; } .cta-link span { display: inline-block; transition: transform 0.25s var(--ease); } .cta-link:hover span { transform: translateX(4px); } /* the ledger rule: double hairline between light sections */ .rule-double { height: 5px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); max-width: var(--wrap); margin: 0 auto; } /* ---------- night bands ---------- */ .night { background-color: var(--night); background-image: var(--bands), var(--bands), linear-gradient(180deg, var(--night-2), var(--night) 40%); background-repeat: no-repeat, no-repeat, no-repeat; background-position: -300px -340px, calc(100% + 320px) calc(100% + 340px), 0 0; background-size: 880px 880px, 880px 880px, cover; color: #FBFAF5; } .night h2, .night h3 { color: #FBFAF5; } .night p { color: #DDD9CC; } /* ---------- header ---------- Desktop: wordmark left, nav right, quiz CTA far right (ghost: the hero below carries each screen's one gold button). Mobile (<=900px): wordmark left, compact quiz button right, menu affordance for the eight pages. */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid var(--hairline); transition: border-color 0.3s var(--ease); } .site-header.scrolled { border-bottom-color: rgba(23, 19, 92, 0.3); } .header-in { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding-block: 1.05rem; position: relative; } .wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; } .wordmark span { color: var(--gold-ink); } .nav { display: flex; align-items: center; gap: 1.6rem; } .nav a:not(.btn) { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--body-c); text-decoration: none; padding-bottom: 0.25rem; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .nav a:not(.btn):hover { color: var(--violet); border-color: var(--gold-ink); } .nav a:not(.btn)[aria-current="page"] { color: var(--violet); border-color: var(--gold-rule); } /* the two deeper pages stay in the menu panel and footer on desktop */ .nav .nav-more { display: none; } .header-actions { display: flex; align-items: center; gap: 0.8rem; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: 2px; background: none; color: var(--ink); cursor: pointer; } .nav-toggle:hover { border-color: var(--violet); } @media (max-width: 900px) { .nav-toggle { display: flex; } .header-in { gap: 0.75rem; } .wordmark { font-size: 0.88rem; letter-spacing: 0.16em; } .header-actions .btn-sm { padding: 0.62rem 0.85rem; font-size: 0.68rem; } .nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--alabaster); border-bottom: 1px solid var(--hairline); } .nav.open { display: flex; } .nav a:not(.btn) { padding: 0.95rem clamp(1.15rem, 4vw, 2rem); border-bottom: 0; border-top: 1px solid var(--hairline); } .nav a:not(.btn):hover { background: var(--cream); border-color: var(--hairline); } .nav .nav-more { display: block; } .nav .btn { margin: 0.9rem clamp(1.15rem, 4vw, 2rem) 1.2rem; align-self: flex-start; } } @media (max-width: 430px) { /* the 390 register: wordmark, compact quiz button, and the menu affordance share one uncrowded line */ .wordmark { font-size: 0.76rem; letter-spacing: 0.12em; } .header-actions { gap: 0.5rem; } .header-actions .btn-sm { padding: 0.6rem 0.7rem; font-size: 0.64rem; letter-spacing: 0.1em; } .nav-toggle { width: 40px; height: 40px; } } /* ============================================================ HOME: the hero. Kept exactly as comped at 1440: arch portrait with the offset hairline arch echo, wash backing block, night name-chip, Cormorant Infant headline with the Periwinkle italic hook over its short gold hairline. ============================================================ */ .hero { position: relative; padding-block: clamp(3.2rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } .hero-title { font-size: clamp(2.5rem, 5.8vw, 4.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 1.4rem; } .hero-title span { display: block; } .hero-title .line-2 { font-weight: 500; } /* the hook line carries the handwriting face over its short gold hairline; the extra descender room keeps the swash off the rule */ /* the hook is the one full-size handwriting line on the page: it runs at 1.5em because the face has a small x-height, and it wears no underline, because the hand IS the accent. */ .hero-title .hook { font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 1.2em; line-height: 1.42; display: inline-block; word-spacing: 0.1em; color: var(--peri-deep); margin: 0.1em 0 0; padding: 0.04em 0.14em 0.28em 0.08em; } .hero-title .hook em { font-style: normal; } .hero-sub { max-width: 34rem; font-size: 1.1rem; margin-bottom: 2rem; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.2rem; } .hero-cred, .cred-line { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; line-height: 1.9; margin: 0; } .hero-cred .dot, .cred-line .dot { margin-inline: 0; } .cred { white-space: nowrap; } /* a credential may break INSIDE itself only once the viewport is too narrow to hold the longest one on a line of its own */ @media (max-width: 640px) { .cred { white-space: normal; } .hero-cred, .cred-line { letter-spacing: 0.1em; } /* stack the credentials so a separator can never wrap alone */ .hero-cred .dot, .cred-line .dot { display: none; } .hero-cred .cred, .cred-line .cred { flex: 1 0 100%; } } @media (max-width: 374px) { .hero-cred, .cred-line { font-size: 0.62rem; } } .hero-art { position: relative; justify-self: center; width: min(100%, 420px); } /* the wash backing block */ .hero-art::before { content: ""; position: absolute; inset: 9% -16px -16px auto; width: 78%; background: var(--wash); border-radius: 2px; z-index: 0; } /* the offset hairline arch echo */ .arch-echo { position: absolute; inset: 0; transform: translate(-14px, -14px); border: 1px solid var(--gold-rule); border-radius: 999px 999px 3px 3px; pointer-events: none; z-index: 0; } .portrait-arch { position: relative; z-index: 1; background: var(--alabaster); border: 1px solid var(--gold-rule); border-radius: 999px 999px 3px 3px; padding: 14px; } .portrait-arch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border-radius: 985px 985px 2px 2px; /* her note: white background, deep blue border #17135C */ border: 3px solid var(--night); } .portrait-plate { position: absolute; z-index: 2; left: 50%; bottom: -1.05rem; transform: translateX(-50%); background: var(--night); color: var(--gold-light); font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.55rem 1.2rem; border-radius: 2px; white-space: nowrap; margin: 0; } /* mobile hero order (stolen from B): kicker + One Hook headline first, arch portrait second, so the hook lands inside the first 390px viewport */ @media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-copy { display: contents; } .hero-copy .kicker { order: 1; } .hero-title { order: 2; margin-bottom: 0.4rem; } .hero-art { order: 3; width: min(74%, 340px); margin-block: 1.4rem 2rem; } .hero-sub { order: 4; } .hero-ctas { order: 5; } .hero-cred { order: 6; } } /* ---------- press: her marks in full color, crawling ---------- Halle asked for full color and animation (request 5, and the same note on iteration 6). No filters, no rollover: the marks are printed as their networks print them, and the row crawls slowly left. Four identical tracks translate by exactly 25% of the track row so the loop never shows a seam. Reduced motion stops it and restores the centered ruled row. */ .press { padding-block: 2.1rem 2.3rem; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee-track { display: flex; width: max-content; animation: pressCrawl 46s linear infinite; } @keyframes pressCrawl { to { transform: translateX(-25%); } } .press-label { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 0 1.3rem; } .press-row { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; } .press-row li { display: flex; align-items: center; min-height: 44px; padding-inline: clamp(1.1rem, 2.4vw, 1.9rem); } /* her real press logos, trimmed and optically normalized: stacked marks run taller, wide wordmarks shorter, so every mark carries the same visual weight. Full color, exactly as the networks print them. */ .press-logo { display: block; width: auto; } .pl-nbc { height: 50px; } .pl-abc { height: 47px; } .pl-gma { height: 45px; } .pl-fortune { height: 40px; } .pl-fox { height: 35px; } .pl-cw { height: 35px; } .pl-time { height: 32px; } .pl-guardian { height: 27px; } .pl-usatoday { height: 27px; } @media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } .marquee-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; } .marquee-track .press-row[aria-hidden="true"] { display: none; } .press-row { flex-wrap: wrap; justify-content: center; row-gap: 0.9rem; } } /* ---------- the Moment: three facts on one ruled ledger ---------- */ .moment { padding-block: clamp(4rem, 8vw, 6.5rem); } .moment-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--gold-rule); } .moment-stat { margin: 0; padding: 1.9rem clamp(1.2rem, 2.6vw, 2.2rem) 0.4rem 0; border-right: 1px solid var(--hairline); } .moment-stat + .moment-stat { padding-left: clamp(1.2rem, 2.6vw, 2.2rem); } .moment-stat:last-child { border-right: 0; padding-right: 0; } .moment-kick { display: block; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .moment-num { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: var(--gold-ink); margin-bottom: 0.85rem; } .moment-note { display: block; font-size: 0.95rem; line-height: 1.66; color: var(--body-c); } @media (max-width: 880px) { .moment-grid { grid-template-columns: 1fr; } .moment-stat { border-right: 0; border-top: 1px solid var(--hairline); padding: 1.5rem 0; } .moment-stat:first-child { border-top: 0; } .moment-stat + .moment-stat { padding-left: 0; } } /* ---------- the manifesto: the creed in the stone ---------- */ .manif { padding-block: clamp(5rem, 10vw, 8.5rem); text-align: center; } .manif-in { max-width: 46rem; margin-inline: auto; } .manif-mark { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); font-size: 0.7rem; margin: 0 0 2.6rem; } .manif-mark::before, .manif-mark::after { content: ""; width: 44px; height: 1px; background: var(--gold-rule); } .manif-line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.55; margin: 0 0 1.35em; } .manif p.manif-line { color: #FBFAF5; } /* the refrain in her own hand, gold on navy. The hand sets a narrow word space, so the refrain buys a little back to keep the two words apart. */ .creed-open { font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 1.22em; line-height: 1.3; display: inline-block; padding: 0.04em 0.1em 0.16em 0.05em; word-spacing: 0.16em; color: var(--gold-light); } .creed-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); font-size: 0.6rem; margin: 2.6rem 0; } .creed-divider::before, .creed-divider::after { content: ""; width: 28px; height: 1px; background: var(--gold-rule); } .manif-turn { font-weight: 500; } .manif-close { font-size: clamp(1.6rem, 2.7vw, 2.15rem); font-weight: 500; line-height: 1.35; margin-top: 1.2em; } .manif-cite { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin: 2.4rem 0 2.6rem; } .manif p.manif-cite { color: #C9C4B4; } .manif-voc { margin-top: 2.6rem; } /* ---------- the five stages: the colonnade ---------- */ .stages { padding-block: clamp(4.5rem, 9vw, 7.5rem); } .stage-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--hairline); border-top: 2px solid var(--gold-ink); background: var(--alabaster); list-style: none; margin: 0; padding: 0; } .stage-grid .stage-card { padding: 1.9rem 1.5rem 2.1rem; border-left: 1px solid var(--hairline); position: relative; } .stage-grid .stage-card:first-child { border-left: 0; } .stage-grid .stage-num { font-family: var(--font-display); font-weight: 500; font-size: 2.15rem; line-height: 1; color: var(--gold-ink); display: block; margin-bottom: 1.05rem; padding: 0; } .stage-grid .stage-num::after { content: ""; display: block; width: 22px; height: 1px; background: var(--gold-rule); margin-top: 0.85rem; } .stage-grid .stage-name { font-size: 1.17rem; font-weight: 600; margin-bottom: 0.5em; } .stage-grid .stage-card p { font-size: 0.94rem; line-height: 1.6; margin: 0; color: var(--body-c); } .stage-cta { margin-top: clamp(2.2rem, 4vw, 3rem); } @media (max-width: 980px) { .stage-grid { grid-template-columns: 1fr; border-top-width: 1px; } .stage-grid .stage-card { border-left: 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: auto 1fr; column-gap: 1.4rem; align-items: start; } .stage-grid .stage-card:first-child { border-top: 2px solid var(--gold-ink); } .stage-grid .stage-num { margin-bottom: 0; } .stage-grid .stage-body { min-width: 0; } } /* The Egypt band's home-page styles came out with the section itself (Halle's request 13). The journey keeps its own styles in work-method.css, where /session/#egypt still runs it in full. */ /* ---------- the ascent: the tier register ---------- */ .work { padding-block: clamp(4.5rem, 9vw, 7.5rem); } .reg { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gold-ink); border-bottom: 1px solid var(--hairline); } .reg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem clamp(1.6rem, 4vw, 3.5rem); align-items: start; padding: 1.8rem 0.2rem; border-top: 1px solid var(--hairline); } .reg-row:first-child { border-top: 0; } .reg-main h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 0.35rem; } .reg-note { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 0.35rem; } .reg-desc { font-size: 0.97rem; line-height: 1.66; max-width: 38rem; margin: 0 0 0.9rem; } .reg-main .cta-link { margin-top: 0.1rem; } .reg-price { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-ink); text-align: right; max-width: 13rem; text-wrap: balance; line-height: 1.9; margin: 0.35rem 0 0; justify-self: end; } /* the crown: Sovereign Legacy Private on a night panel with a gold keyline */ .reg-row.reg-crown { border: 1px solid rgba(237, 148, 28, 0.55); border-radius: 2px; margin-top: -1px; padding: clamp(1.7rem, 3.4vw, 2.4rem) clamp(1.2rem, 3vw, 2.2rem); } .reg-crown h3 { color: #FBFAF5; } .reg-crown .reg-desc { color: #DDD9CC; } .reg-crown .reg-price { color: var(--gold-light); } .reg-fine, .tier-fine { max-width: 46rem; margin: 2.2rem auto 0; text-align: center; font-size: 0.88rem; color: var(--muted); } .tier-cta { text-align: center; margin-top: 2rem; } @media (max-width: 760px) { .reg-row { grid-template-columns: 1fr; padding-block: 1.5rem; } .reg-price { text-align: left; justify-self: start; max-width: none; margin: 0 0 0.6rem; order: -1; } .reg-main .cta-link { margin-top: 0.2rem; } } /* ---------- the show + the gift: two ruled panels ---------- */ .duet { padding-block: clamp(4rem, 8vw, 6.5rem); } .duet-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.6rem, 3vw, 2.4rem); align-items: stretch; } .duet-show { background: var(--wash); border: 1px solid var(--hairline); border-radius: 2px; padding: clamp(1.9rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: flex-start; } .duet-show .kicker { color: var(--gold-ink-2); } /* any kicker on a wash band takes the darker gold ink (5.31:1 AA) */ .beliefs .kicker, .band-trav .kicker { color: var(--gold-ink-2); } .duet-word { font-family: var(--font-script); font-weight: 400; font-size: clamp(1.9rem, 3.5vw, 2.7rem); letter-spacing: normal; line-height: 1.3; display: inline-block; padding: 0.04em 0.14em 0.18em 0.06em; margin: 0 0 0.35rem; } .duet-tag { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.08rem; color: var(--peri-deep); margin: 0 0 1rem; } .duet-show > p:not(.duet-tag):not(.kicker) { max-width: 34rem; } .duet-show .btn { margin-top: auto; } .duet-gift { background: var(--alabaster); border: 1px solid var(--hairline); border-top: 2px solid var(--gold-ink); border-radius: 2px; padding: clamp(1.9rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: flex-start; } .duet-gift h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 500; } .duet-gift .btn { margin-top: auto; } @media (max-width: 880px) { .duet-grid { grid-template-columns: 1fr; } } /* ---------- about ---------- */ .about { padding-block: clamp(4.5rem, 9vw, 7.5rem); overflow: clip; } .about-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } .about-art { position: relative; margin: 0; } /* the wash block, the identity's backing language */ .about-art::before { content: ""; position: absolute; inset: auto -16px -16px 12%; height: 72%; background: var(--wash); border-radius: 2px; z-index: 0; } .about-art img { position: relative; z-index: 1; width: 100%; border-radius: 2px; } /* square-cornered photo, 1px keyline inset 12px: hairline green on cream */ .about-art .photo-key { position: absolute; inset: 12px; z-index: 2; border: 1px solid rgba(23, 19, 92, 0.35); border-radius: 1px; pointer-events: none; } .about-copy h2 { margin-bottom: 1.6rem; font-size: clamp(2.1rem, 4.2vw, 3rem); font-weight: 400; } .about-hi { font-size: 0.68em; font-weight: 500; letter-spacing: 0.01em; } .about-name { display: inline-block; font-size: 1.32em; line-height: 1.3; padding: 0.04em 0.16em 0.22em 0.08em; } .about-copy > p { max-width: 33rem; font-size: 1.02rem; line-height: 1.8; margin-bottom: 1.15em; } .about-copy .hero-cred { border-top: 1px solid var(--hairline); padding-top: 1.15rem; margin: 1.6rem 0 1.6rem; } @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } .about-art { max-width: 440px; margin-inline: auto; } } /* ---------- the client experience: seven words on alabaster ---------- */ .exp-band { padding-block: clamp(4rem, 8vw, 6rem); background: var(--alabaster); border-block: 1px solid var(--hairline); } .exp-band .sec-head { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); } .exp-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; row-gap: 0.6rem; margin: 0; padding: 1.4rem 0 1.6rem; border-block: 1px solid var(--hairline); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 2vw, 1.45rem); color: var(--ink); } .exp-row li { display: inline-flex; align-items: baseline; white-space: nowrap; } .exp-arrow { font-family: var(--font-body); font-size: 0.68em; color: var(--muted); margin-inline: clamp(0.6rem, 1.7vw, 1.15rem); } .exp-final { font-family: var(--font-script); color: var(--gold-ink); font-weight: 400; font-size: 1.18em; letter-spacing: normal; text-transform: none; } /* ---------- client voices ---------- */ .results { padding-block: clamp(4.5rem, 9vw, 7.5rem); } .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(1.4rem, 2.6vw, 2.2rem); margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); } .feat-card { position: relative; display: flex; flex-direction: column; margin: 0; background: var(--alabaster); border: 1px solid var(--hairline); border-radius: 2px; padding: 1.9rem 1.7rem 1.6rem; overflow: hidden; transition: border-color 0.3s var(--ease); } /* hover: the border darkens and a 2px gold rule slides in along the top edge (the system's card motion) */ .feat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .feat-card:hover { border-color: rgba(23, 19, 92, 0.32); } .feat-card:hover::before { transform: scaleX(1); } .feat-card blockquote { margin: 0 0 1.4rem; flex: 1; } .feat-card blockquote p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.08rem; line-height: 1.62; color: var(--ink); margin: 0; } .feat-person, .quote-card figcaption { display: flex; align-items: center; gap: 0.85rem; } .feat-person img, .quote-card figcaption img { width: 52px; height: 52px; border-radius: 2px; object-fit: cover; outline: 1px solid var(--gold-rule); outline-offset: 2px; flex: none; } .feat-person span:last-child, .quote-card figcaption span:last-child { display: flex; flex-direction: column; } .feat-person strong, .quote-card strong { font-size: 0.94rem; color: var(--ink); font-weight: 600; } .feat-person em, .quote-card em { font-style: normal; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; } .mono { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 2px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; flex: none; } .mono-gold { background: var(--wash); color: var(--gold-ink-2); } .mono-peri { background: #F4F1E7; color: var(--violet); } .mono-indigo { background: var(--night); color: var(--gold-light); } .quote-wall { columns: 3 290px; column-gap: clamp(1.4rem, 2.6vw, 2.2rem); } .quote-card { break-inside: avoid; margin: 0 0 clamp(1.4rem, 2.6vw, 2.2rem); background: var(--alabaster); border: 1px solid var(--hairline); border-radius: 2px; padding: 1.5rem 1.5rem 1.35rem; transition: border-color 0.3s var(--ease); } .quote-card:hover { border-color: rgba(23, 19, 92, 0.32); } .quote-card blockquote { margin: 0 0 1.1rem; } .quote-card blockquote p { font-size: 0.96rem; line-height: 1.68; color: var(--body-c); margin: 0; } .quote-card figcaption img, .quote-card .mono { width: 42px; height: 42px; font-size: 1.15rem; } /* ---------- final ceremony (night) ---------- */ .final { text-align: center; padding-block: clamp(4.5rem, 9vw, 7.5rem); } .final h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 500; line-height: 1.12; margin-bottom: 1.1rem; } .final .accent-lg { margin-top: 0.06em; } .final .script, .final .accent-lg { color: var(--gold-light); } .final-sub { max-width: 34rem; margin: 0 auto 1.9rem; font-size: 1.05rem; } .final-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; } .final-meta { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.85rem; margin: 2.6rem 0 0; } .final .final-meta { color: #C9C4B4; } .final-meta a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid var(--gold-rule); padding-bottom: 0.2rem; } .final-meta a:hover { color: #FBFAF5; border-color: #FBFAF5; } .final-meta .dot { margin-inline: 0; } /* ---------- footer (cream strip under the ledger rule) ---------- */ .site-footer { background: var(--cream); } .footer-in { padding-block: 2.8rem; display: flex; flex-direction: column; align-items: center; gap: 1.15rem; text-align: center; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem; } .footer-nav a { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--body-c); text-decoration: none; padding: 0.35rem 0 0.25rem; border-bottom: 1px solid transparent; } .footer-nav a:hover { color: var(--violet); border-color: var(--gold-ink); } .footer-nav a[aria-current="page"] { color: var(--violet); border-color: var(--gold-rule); } .footer-copy { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; max-width: 52rem; } /* ============================================================ MOTION ENGINE — visible by default, animated only under .anim ============================================================ */ /* hero intro: hidden pose lives ONLY in the keyframe (backwards fill covers the stagger), so any static render shows the hero */ .hi { opacity: 1; } .anim .hi { --hi-from: translateY(22px); animation: heroIn 0.9s var(--ease) var(--d, 0s) backwards; } .anim .hi-scale { --hi-from: translateY(10px) scale(0.965); } @keyframes heroIn { from { opacity: 0; transform: var(--hi-from, translateY(22px)); } } /* scroll reveal: app.js adds .rv-in; its failsafes force-reveal below-fold elements for static and print renders */ .rv { opacity: 1; } .anim .rv { opacity: 0; } .anim .rv-in { opacity: 1; animation: rvIn 0.8s var(--ease) var(--rvd, 0s) backwards; } .rv-in { opacity: 1; } .rv-up { --rv-from: translateY(26px); } .rv-scale { --rv-from: scale(0.955); } .rv-fade { --rv-from: none; } @keyframes rvIn { from { opacity: 0; transform: var(--rv-from, none); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; } .hi, .anim .hi, .rv, .anim .rv, .rv-in { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ---------- print ---------- */ @media print { body { background: #fff; color: #000; } .skip-link, .nav, .nav-toggle, .header-actions, .hero-ctas, .page-hero-ctas, .stage-cta, .tier-cta, .final-ctas, .duet .btn, .quiz-ctas, .quiz-nav, .quiz-keep, .quiz-restart-row, .quiz-noscript { display: none !important; } .site-header { position: static; border-bottom: 1px solid #000; } .night, .manif, .final, .reg-crown, .start-card-primary { background: #fff !important; background-image: none !important; color: #000 !important; } .night h2, .night h3, .night p, .manif p.manif-line, .manif p.manif-cite, .creed-open, .pricetag, .portrait-plate, .reg-crown h3, .reg-crown .reg-desc, .reg-crown .reg-price, .final .final-meta, .final .script, .final .accent-lg, .night .kicker, .night .accent-i { color: #000 !important; } .hi, .rv, .rv-in { opacity: 1 !important; transform: none !important; animation: none !important; } a { color: #000; text-decoration: underline; } } /* ---------- the composite voice-of-customer close ---------- */ .pull-quote, blockquote p.pull-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.5; color: var(--ink); border-block: 1px solid var(--hairline); padding-block: 2.2rem; max-width: 40ch; margin-inline: auto; } .mk-mission { max-width: 46rem; margin: 0 auto; } .mk-mission blockquote { margin: 0; } .mk-mission figcaption { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.1rem; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); } .mk-mission figcaption::before, .mk-mission figcaption::after { content: ""; width: 26px; height: 1px; background: var(--gold-rule); flex: none; } /* ---------- portrait background picker (demo-time only) ---------- Halle is choosing between three treatments of her new hero photo. The control sits under the arch, quiet enough not to compete with the hero and obvious enough to find. Delete this block with the markup once she picks. */ .bg-pick { position: relative; grid-column: 1 / -1; /* its own row under the hero, clear of the name plate */ display: flex; justify-content: center; margin-top: 1.6rem; } .bg-pick-toggle { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); background: var(--cream); border: 1px solid var(--gold-rule); border-radius: 999px; padding: 0.62rem 1.1rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .bg-pick-toggle:hover { background: var(--night); color: var(--cream); border-color: var(--night); } .bg-pick-menu { position: absolute; top: calc(100% + 0.55rem); left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 0.4rem; padding: 0.5rem; background: var(--cream); border: 1px solid var(--gold-rule); border-radius: 12px; box-shadow: 0 18px 40px rgba(20, 5, 102, 0.18); } .bg-pick-menu[hidden] { display: none; } .bg-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); background: none; border: 0; padding: 0.3rem 0.35rem; cursor: pointer; } .bg-swatch::before { content: ""; width: 42px; height: 42px; border-radius: 50%; background: var(--sw); border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(20, 5, 102, 0.18); } .bg-swatch.is-on { color: var(--night); } .bg-swatch.is-on::before { border-color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold); } @media (max-width: 560px) { .bg-pick-menu { gap: 0.2rem; } .bg-swatch::before { width: 36px; height: 36px; } } /* dots on the deep-blue bands stay amber for visibility */ .night .dot, .night .final-meta .dot { background: var(--gold); } /* honeypot: visually gone, present for bots */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-error { font-size: 0.9rem; color: var(--error); margin: 0 0 0.8rem; }