@charset "UTF-8"; /* ============================================================= SHOPHEALTHCARE V23 — single canonical theme (SHC-Match) Locked 2026-04-29 — no alternate themes from this point forward. Tokens are global on :root; no theme class required on . ============================================================= */ html, body { overflow-x: clip; } :root { --blush: #FFFFFF; --blush-2: #EAF6F8; --lemon: #FFC857; --lemon-2: #FFE2A0; --cream: #FFFFFF; --pink: #00B5D8; --pink-dark: #007A93; --ink: #0E2A3A; --mute: #4A6678; /* V24 Tier 7 · WCAG AA contrast 5.3:1 on white (was #5D7C8E ~3.8:1) */ --rule: #DDE9EE; --mint: #61C9A8; --plum: #001F2E; --sky: #BFE9F0; } /* ----------------------------------------------------------- ARCHIVED THEME REMOVAL NOTE (2026-04-29) The following themes were removed: theme-original / theme-heritage / theme-disruptor / theme-sunset theme-clinic / theme-almanac / theme-y2k The 8-palette grid was rejected per Brand Bible v1. SHC-Match is the only canonical palette going forward. If you need to restore alternates, see git history before commit on this date. ----------------------------------------------------------- */ /* ============================================================= GLOBAL ============================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--blush); color: var(--ink); } body { font-family: 'Inter', system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .serif { font-family: 'Fraunces', Georgia, serif; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } .tab { font-variant-numeric: tabular-nums; } .page { max-width: 1280px; margin: 0 auto; padding: 0 40px; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ============================================================= ANNOUNCE BAR ============================================================= */ .announce { background: var(--plum); color: var(--lemon); text-align: center; padding: 11px 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .announce b { color: var(--cream); } .announce a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================= NAV ============================================================= */ nav.head { background: var(--blush); } nav.head .row { max-width: 1280px; margin: 0 auto; padding: 22px 40px; display: flex; align-items: center; gap: 24px; } .wordmark { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-weight: 700; font-size: 26px; letter-spacing: -.015em; color: var(--ink); } .wordmark .mark { width: 34px; height: 34px; border-radius: 50%; background: var(--lemon); display: flex; align-items: center; justify-content: center; position: relative; } .wordmark .mark::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); } .nav-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; padding-left: 16px; border-left: 1px solid var(--rule); } .nav-links { margin-left: auto; display: flex; gap: 24px; font-size: 15px; font-weight: 500; } .nav-links a { color: var(--ink); } .nav-links a:hover { color: var(--pink); } .nav-right { display: flex; gap: 8px; } /* ============================================================= BUTTONS — neo-brutalist ============================================================= */ .btn { padding: 13px 22px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; border: 2px solid var(--ink); text-decoration: none; color: var(--ink); background: var(--cream); border-radius: 999px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; display: inline-block; } .btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); } .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); } .btn.primary { background: var(--pink); color: var(--cream); } .btn.primary:hover { background: var(--pink-dark); } .btn.lemon { background: var(--lemon); } .btn.ghost { background: transparent; box-shadow: none; border-color: var(--rule); color: var(--mute); } .btn.big { padding: 17px 28px; font-size: 15px; } /* ============================================================= HERO ============================================================= */ .hero { padding: 40px 0 40px; position: relative; } .hero::before { content: ""; position: absolute; top: 60px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: var(--lemon); opacity: .7; z-index: 0; } .hero::after { content: ""; position: absolute; top: 280px; right: 260px; width: 140px; height: 140px; border-radius: 50%; background: var(--pink); opacity: .85; z-index: 0; } .hero .grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; } .hero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 104px; line-height: .95; letter-spacing: -.03em; margin: 0 0 28px; } .hero h1 em { font-style: italic; font-weight: 400; } .hero h1 .pink { color: var(--pink); } .hero h1 .fix { background: var(--ink); color: var(--lemon); padding: 0 14px; display: inline-block; border-radius: 10px; font-style: normal; } .hero .lead { font-size: 20px; line-height: 1.55; max-width: 560px; margin: 0 0 30px; color: #3A2F40; } .hero .lead b { font-weight: 700; } .hero .ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .hero .badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-dark); background: var(--cream); border: 1.5px solid var(--pink-dark); padding: 8px 12px; border-radius: 999px; transform: rotate(-3deg); } /* Nora speech-bubble column (hero right) */ .nora-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; position: relative; z-index: 2; } .bubble { background: var(--cream); border: 2px solid var(--ink); border-radius: 22px; padding: 16px 20px; max-width: 320px; font-size: 15px; line-height: 1.45; box-shadow: 4px 4px 0 var(--ink); } .bubble.n { border-bottom-right-radius: 6px; } .bubble.u { border-bottom-left-radius: 6px; background: var(--lemon-2); align-self: flex-start; max-width: 260px; } .bubble .who { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink-dark); font-weight: 700; margin-bottom: 6px; } .bubble.u .who { color: var(--plum); } .bubble b { font-weight: 700; } .bubble .tag { display: inline-block; background: var(--pink); color: var(--cream); padding: 2px 8px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; margin-top: 6px; } /* Online chip */ .nora-chip-row { max-width: 1280px; margin: 0 auto; padding: 12px 40px 24px; } .nora-chip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; background: var(--cream); border: 2px solid var(--ink); font-size: 14px; box-shadow: 3px 3px 0 var(--ink); } .nora-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(127, 200, 166, .3); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .nora-chip b { font-weight: 700; } .nora-chip .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--mute); padding-left: 10px; border-left: 1px solid var(--rule); } /* ============================================================= SITUATIONS — chunky tiles, 6 cells (3-up grid) ============================================================= */ .situations { padding: 32px 0 12px; } .sit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sit { background: var(--cream); border: 2px solid var(--ink); border-radius: 24px; padding: 28px 26px; display: flex; flex-direction: column; min-height: 240px; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; cursor: pointer; } .sit:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); } .sit:nth-child(1) { background: var(--blush-2); } .sit:nth-child(3) { background: var(--lemon-2); } .sit:nth-child(5) { background: var(--lemon-2); } .sit .kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--pink-dark); text-transform: uppercase; margin-bottom: 14px; font-weight: 700; } .sit h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 auto; } .sit h3 em { font-style: italic; font-weight: 400; color: var(--pink); } .sit .start { margin-top: 22px; font-size: 13px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; } .sit .start::after { content: "→"; color: var(--pink); font-size: 18px; } .sit.alt { background: var(--ink); color: var(--cream); } .sit.alt h3 { color: var(--cream); } .sit.alt h3 em { color: var(--lemon); } .sit.alt .kicker { color: var(--lemon); } .sit.alt .start { color: var(--cream); } .sit.alt .start::after { color: var(--lemon); } .phone-row { max-width: 1280px; margin: 0 auto; padding: 28px 40px 0; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em; color: var(--mute); } .phone-row b { color: var(--ink); font-weight: 700; } .phone-row a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================= MANIFESTO TAPE — rotated yellow band, scrolling marquee ============================================================= */ .manifesto { margin: 56px 0 0; background: var(--lemon); color: var(--ink); padding: 16px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); overflow: hidden; transform: rotate(-1.2deg); margin-left: -20px; margin-right: -20px; } .manifesto .tape { display: flex; gap: 56px; white-space: nowrap; animation: scroll 35s linear infinite; font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 26px; letter-spacing: -.015em; } .manifesto .tape span::before { content: "★"; color: var(--pink); margin-right: 14px; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================= MEET NORA SECTION ============================================================= */ .nora-sec { padding: 96px 0 56px; } .nora-sec .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; } .nora-sec h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 64px; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 32px; max-width: 620px; } .nora-sec h2 .em { font-style: italic; font-weight: 400; color: var(--pink); } .nora-sec p { font-size: 18px; line-height: 1.65; color: #3A2F40; margin: 0 0 18px; max-width: 560px; } .nora-sec p b { font-weight: 700; background: var(--lemon); padding: 0 4px; border-radius: 3px; color: var(--ink); } .nora-portrait { background: var(--cream); border: 2px solid var(--ink); border-radius: 28px; padding: 28px; box-shadow: 6px 6px 0 var(--ink); } .nora-portrait .head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .nora-portrait .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--pink); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 28px; border: 2px solid var(--ink); } .nora-portrait .name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; } .nora-portrait .role { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; } .nora-portrait .msg { background: var(--lemon-2); border-radius: 16px; padding: 16px 18px; font-size: 16px; line-height: 1.5; margin-bottom: 12px; } .nora-portrait .msg b { font-weight: 700; } .nora-portrait .msg.alt2 { background: var(--blush-2); } .nora-portrait .signed { padding-top: 14px; border-top: 2px dashed var(--rule); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--mute); text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .nora-portrait .signed b { color: var(--ink); font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 15px; text-transform: none; letter-spacing: -.01em; } .nora-link { max-width: 1280px; margin: 0 auto; padding: 0 40px 64px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; } .nora-link a { color: var(--pink-dark); text-decoration: underline; font-weight: 700; } /* ============================================================= PROCESS — 3-step full-bleed band ============================================================= */ .process { background: var(--cream); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } .step-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); } .step { padding: 56px 36px; border-right: 2px solid var(--ink); position: relative; } .step:last-child { border-right: 0; } .step:nth-child(2) { background: var(--lemon-2); } .step .n { font-family: 'Fraunces', serif; font-weight: 700; font-size: 92px; line-height: .9; color: var(--pink); margin-bottom: 16px; letter-spacing: -.04em; } .step h4 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; margin: 0 0 12px; letter-spacing: -.015em; } .step p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--mute); max-width: 320px; } /* ============================================================= STATS — 4 multi-bg cards ============================================================= */ .stats { padding: 64px 40px; } .stats-inner { max-width: 1280px; margin: 0 auto; } .stats-head { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--mute); text-transform: uppercase; margin-bottom: 24px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat { background: var(--cream); border: 2px solid var(--ink); border-radius: 20px; padding: 28px 24px; box-shadow: 4px 4px 0 var(--ink); } .stat:nth-child(1) { background: var(--blush-2); } .stat:nth-child(2) { background: var(--lemon); } .stat:nth-child(3) { background: var(--cream); } .stat:nth-child(4) { background: var(--pink); color: var(--cream); } .stat .n { font-family: 'Fraunces', serif; font-weight: 700; font-size: 72px; line-height: .92; letter-spacing: -.035em; margin-bottom: 6px; } .stat .n em { font-style: italic; font-weight: 400; } .stat .lbl { font-size: 13px; line-height: 1.4; opacity: .8; max-width: 200px; } /* ============================================================= VOID — dark plum band ============================================================= */ .void { padding: 80px 0; background: var(--plum); color: var(--cream); } .void .inner { max-width: 820px; margin: 0 auto; padding: 0 40px; } .void h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 56px; line-height: 1.05; letter-spacing: -.025em; margin: 0 0 28px; color: var(--cream); } .void h2 .em { font-style: italic; color: var(--lemon); } .void p { font-size: 18px; line-height: 1.68; margin: 0 0 18px; color: rgba(255, 250, 242, .88); } .void p b { font-weight: 700; color: var(--lemon); } .void .mark { display: inline-block; width: 36px; height: 2px; background: var(--pink); margin-top: 22px; } /* ============================================================= FOOTER ============================================================= */ footer { background: var(--ink); color: rgba(255, 250, 242, .75); padding: 56px 40px 32px; } .foot-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } footer h6 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--lemon); margin: 0 0 14px; text-transform: uppercase; } footer ul { list-style: none; padding: 0; margin: 0; } footer li { font-size: 14px; margin-bottom: 8px; } footer .word { font-family: 'Fraunces', serif; font-weight: 700; font-size: 28px; color: var(--cream); margin-bottom: 12px; } footer .tag { font-size: 14px; line-height: 1.55; max-width: 340px; } .foot-bottom { max-width: 1280px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 250, 242, .12); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: rgba(255, 250, 242, .5); text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* ============================================================= MOTIF INTENSITY — LOUD overrides (more rotation, bigger, adds the v1-free "wheel" energy: bigger H1, tilted stats, marquee bigger) ============================================================= */ .motif-loud .hero h1 { font-size: 124px; letter-spacing: -.04em; } .motif-loud .hero::before { width: 520px; height: 520px; opacity: .85; } .motif-loud .hero::after { width: 180px; height: 180px; } .motif-loud .manifesto { transform: rotate(-1.6deg); padding: 22px 0; } .motif-loud .manifesto .tape { font-size: 32px; } .motif-loud .sit { box-shadow: 6px 6px 0 var(--ink); } .motif-loud .sit:nth-child(2) h3 { transform: rotate(-1.5deg); display: inline-block; } .motif-loud .stat { box-shadow: 6px 6px 0 var(--ink); } .motif-loud .stat:nth-child(1) { transform: rotate(-1.2deg); } .motif-loud .stat:nth-child(2) { transform: rotate(0.8deg); } .motif-loud .stat:nth-child(3) { transform: rotate(-0.6deg); } .motif-loud .stat:nth-child(4) { transform: rotate(1deg); } .motif-loud .stat .n { font-size: 84px; } .motif-loud .nora-portrait { box-shadow: 8px 8px 0 var(--ink); } .motif-loud .bubble { box-shadow: 6px 6px 0 var(--ink); } /* QUIET — strip the rotation flourishes */ .motif-quiet .manifesto { transform: rotate(0deg); padding: 14px 0; } .motif-quiet .manifesto .tape { font-size: 22px; } .motif-quiet .hero::before { opacity: .5; } .motif-quiet .hero::after { opacity: .6; } .motif-quiet .hero .badge { transform: rotate(0deg); } /* ============================================================= PALETTE SWITCHER WIDGET — fixed top-right, 6 paint chips ============================================================= */ .palette-switch { position: fixed; top: 12px; right: 12px; z-index: 9999; background: rgba(255, 250, 242, .94); border: 2px solid #1A1322; border-radius: 14px; padding: 10px 12px 12px; box-shadow: 3px 3px 0 #1A1322; display: flex; flex-direction: column; gap: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .palette-switch .ps-label { font-size: 9px; letter-spacing: .14em; color: #6A5E70; text-transform: uppercase; font-weight: 700; text-align: center; } .palette-switch .ps-rail { display: grid; grid-template-columns: repeat(4, 38px); gap: 6px; justify-content: center; } .palette-switch .ps-chip { width: 38px; height: 24px; border: 1.5px solid #1A1322; border-radius: 6px; cursor: pointer; padding: 0; position: relative; background: linear-gradient(to right, var(--p1) 0 33%, var(--p2) 33% 66%, var(--p3) 66% 100%); transition: transform .12s, box-shadow .12s; } .palette-switch .ps-chip:hover { transform: translateY(-1px); box-shadow: 2px 2px 0 #1A1322; } .palette-switch .ps-chip.active { outline: 2px solid #1A1322; outline-offset: 2px; } .palette-switch .ps-chip .ps-tip { position: absolute; top: calc(100% + 8px); right: 0; background: #1A1322; color: #FFFAF2; padding: 5px 9px; border-radius: 6px; font-size: 9px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; font-family: 'JetBrains Mono', monospace; } .palette-switch .ps-chip:hover .ps-tip, .palette-switch .ps-chip:focus-visible .ps-tip { opacity: 1; } /* Page navigator (stacked below palette chips) */ .palette-switch .ps-divider { height: 0; border: 0; border-top: 1px dashed #D4C9A8; margin: 2px 0; } .palette-switch .ps-pages { display: flex; flex-direction: column; gap: 2px; max-height: 0; overflow: hidden; transition: max-height .28s ease; } .palette-switch.open .ps-pages { max-height: min(620px, calc(100vh - 220px)); overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .palette-switch.open .ps-pages::-webkit-scrollbar { width: 4px; } .palette-switch.open .ps-pages::-webkit-scrollbar-thumb { background: rgba(26,19,34,.4); border-radius: 2px; } .palette-switch .ps-toggle { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; color: #6A5E70; text-transform: uppercase; font-weight: 700; background: transparent; border: 0; padding: 4px 0 0; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; } .palette-switch .ps-toggle .caret { transition: transform .22s; } .palette-switch.open .ps-toggle .caret { transform: rotate(180deg); } .palette-switch .ps-page { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #1A1322; text-decoration: none; border-radius: 6px; border: 1.5px solid transparent; white-space: nowrap; } .palette-switch .ps-page:hover { background: rgba(0,0,0,.05); } .palette-switch .ps-page[aria-current="page"] { background: #FFE86E; border-color: #1A1322; } .palette-switch .ps-page .ps-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF6A5C; flex-shrink: 0; } .palette-switch .ps-page.ps-home .ps-dot { background: #1A1322; } .palette-switch .ps-page.ps-reskin .ps-dot { background: #FFE86E; border: 1px solid #1A1322; } @media (max-width: 720px) { .palette-switch { top: auto; bottom: 12px; right: 12px; padding: 8px 10px; } .palette-switch .ps-chip { width: 32px; height: 20px; } .palette-switch.open .ps-pages { max-height: 220px; overflow-y: auto; } } /* ============================================================= RESPONSIVE ============================================================= */ @media (max-width: 980px) { .hero h1 { font-size: 60px; } .motif-loud .hero h1 { font-size: 72px; } .hero .grid { grid-template-columns: 1fr; } .hero::before { width: 220px; height: 220px; right: -80px; top: -40px; } .hero::after { width: 90px; height: 90px; right: 20px; top: 200px; } .sit-grid { grid-template-columns: 1fr 1fr; } .step-grid { grid-template-columns: 1fr; } .step { border-right: 0; border-bottom: 2px solid var(--ink); } .step:last-child { border-bottom: 0; } .stats-grid { grid-template-columns: 1fr 1fr; } .nora-sec .grid { grid-template-columns: 1fr; gap: 32px; } .nora-sec h2 { font-size: 44px; } .void h2 { font-size: 40px; } .foot-grid { grid-template-columns: 1fr 1fr; } .nav-links, .nav-sub { display: none; } .phone-row { flex-direction: column; gap: 8px; } .tape-hero h1 { font-size: 78px !important; } .manifesto-hero h2 { font-size: 56px !important; } .doi-marquee .doi-tape { font-size: 16px !important; } } /* ============================================================= VARIANT-SPECIFIC COMPONENTS — distinctive sections per V1-V6 ============================================================= */ /* Variant pill — fixed bottom-left badge identifying the variant */ .variant-pill { position: fixed; bottom: 14px; left: 14px; z-index: 9998; background: var(--ink); color: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; box-shadow: 3px 3px 0 var(--pink); display: flex; gap: 8px; align-items: center; } .variant-pill .vp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lemon); display: inline-block; } .variant-pill .vp-meta { color: var(--lemon); } /* Brokerage credential band — V3 Heritage Quiet hero replacement */ .brokerage-band { background: var(--blush-2); border-bottom: 2px solid var(--ink); padding: 28px 0; } .brokerage-band .bb-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; } .brokerage-band .bb-cell { border-right: 1.5px solid var(--rule); padding-right: 24px; } .brokerage-band .bb-cell:last-child { border-right: 0; } .brokerage-band .bb-cell .lbl { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; font-weight: 700; } .brokerage-band .bb-cell .val { font-family: 'Fraunces', serif; font-weight: 600; font-size: 32px; line-height: 1; color: var(--ink); letter-spacing: -.02em; } .brokerage-band .bb-cell .val em { font-style: italic; color: var(--pink); font-weight: 500; } /* Conservative hero — V3: centered, no Nora column, single CTA */ .hero-centered { padding: 56px 0 48px; text-align: center; position: relative; } .hero-centered .page { max-width: 920px; } .hero-centered h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 84px; line-height: .98; letter-spacing: -.025em; margin: 0 auto 22px; max-width: 880px; } .hero-centered h1 em { font-style: italic; color: var(--pink); font-weight: 400; } .hero-centered .lead { font-size: 19px; line-height: 1.55; color: var(--mute); max-width: 640px; margin: 0 auto 28px; } .hero-centered .ctas { justify-content: center; } /* DOI marquee — V4 Heritage Loud: scrolling state DOI strip */ .doi-marquee { background: var(--ink); color: var(--lemon); border-bottom: 2px solid var(--ink); overflow: hidden; padding: 18px 0; position: relative; } .doi-marquee::before, .doi-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 2; } .doi-marquee::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); } .doi-marquee::after { right: 0; background: linear-gradient(to left, var(--ink), transparent); } .doi-marquee .doi-tape { display: inline-flex; gap: 36px; white-space: nowrap; animation: doi-scroll 48s linear infinite; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 19px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; } .doi-marquee .doi-tape span { display: inline-flex; align-items: center; gap: 36px; } .doi-marquee .doi-tape span::after { content: '◆'; color: var(--pink); font-size: 12px; } @keyframes doi-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Manifesto-as-hero — V5 Disruptor Quiet: leads with the manifesto */ .manifesto-hero { background: var(--cream); padding: 88px 0 72px; border-bottom: 2px solid var(--ink); position: relative; } .manifesto-hero .mh-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; } .manifesto-hero .kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pink-dark); font-weight: 700; margin-bottom: 18px; } .manifesto-hero h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 72px; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 36px; max-width: 980px; } .manifesto-hero h2 em { font-style: italic; color: var(--pink); font-weight: 400; } .manifesto-hero .creed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; } .manifesto-hero .creed-item { border-left: 4px solid var(--pink); padding: 14px 18px; background: var(--blush); } .manifesto-hero .creed-item .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; color: var(--pink-dark); font-weight: 700; margin-bottom: 6px; } .manifesto-hero .creed-item .text { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--ink); } /* Tape-as-giant-hero — V6 Disruptor Loud: marquee fills hero */ .tape-hero { background: var(--ink); color: var(--lemon); padding: 64px 0 56px; border-bottom: 4px solid var(--pink); overflow: hidden; position: relative; } .tape-hero::before { content: ''; position: absolute; top: -40px; right: -120px; width: 360px; height: 360px; border-radius: 50%; background: var(--pink); opacity: .3; filter: blur(40px); } .tape-hero .th-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; } .tape-hero .kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--pink); font-weight: 700; margin-bottom: 22px; } .tape-hero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 156px; line-height: .92; letter-spacing: -.045em; margin: 0 0 28px; color: var(--lemon); transform: rotate(-1.2deg); transform-origin: left center; } .tape-hero h1 em { font-style: italic; color: var(--cream); font-weight: 400; } .tape-hero .th-tape { margin-top: 32px; padding: 16px 0; background: var(--lemon); color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); overflow: hidden; white-space: nowrap; transform: rotate(-1.5deg); } .tape-hero .th-tape .scroller { display: inline-flex; gap: 48px; animation: doi-scroll 38s linear infinite; font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 36px; letter-spacing: -.01em; } .tape-hero .th-tape .scroller span::after { content: '·'; margin-left: 48px; color: var(--pink-dark); } .tape-hero .th-cta { display: inline-flex; gap: 14px; margin-top: 36px; } .tape-hero .th-cta a { background: var(--pink); color: var(--cream); border: 2px solid var(--cream); padding: 16px 26px; border-radius: 12px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: 4px 4px 0 var(--lemon); transition: transform .12s, box-shadow .12s; } .tape-hero .th-cta a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--lemon); } .tape-hero .th-cta a.alt { background: var(--lemon); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--pink); } .tape-hero .th-cta a.alt:hover { box-shadow: 6px 6px 0 var(--pink); } /* QUIET further restraint */ .motif-quiet .hero { padding: 32px 0 32px; } .motif-quiet .hero h1 { font-size: 76px; } .motif-quiet .hero::before, .motif-quiet .hero::after { display: none; } .motif-quiet .stat { transform: none !important; box-shadow: 3px 3px 0 var(--ink); } .motif-quiet .sit { transform: none; } .motif-quiet .sit:nth-child(2) h3 { transform: none; } .motif-quiet .nora-portrait { box-shadow: 4px 4px 0 var(--ink); } .motif-quiet .bubble { box-shadow: 3px 3px 0 var(--ink); } /* LOUD additional intensity */ .motif-loud body, .motif-loud { background-image: radial-gradient(circle at 12% 18%, var(--lemon) 0, transparent 18%), radial-gradient(circle at 88% 72%, var(--pink) 0, transparent 16%); background-attachment: fixed; background-size: 100% 100%; } .motif-loud .stats { padding-top: 80px; } .motif-loud .nora-chip-row { transform: rotate(-0.6deg); } .motif-loud .ctas .badge { transform: rotate(4deg); }