/* ========================================================================== C&B Life Co - Investor Update MOBILE-FIRST. The base layer targets a 320px phone; every media query is min-width and only ever adds or enlarges. Most investors open this on a phone, so the phone is the design, not the fallback. Type is set large throughout. If you are tempted to shrink something for mobile, that is the bug this stylesheet was rewritten to remove. ========================================================================== */ /* -------------------------------------------------------------------------- Brand themes The page wears the brand it is describing. Background tints and accents are lifted from the Series A pitch deck's approved palette; the `--dark` / `--dark-2` pairs there were already designed for this. Accents are the brighter variant of each brand colour so they hold up on a dark ground. Switching happens on from the scroll observer. --track slider rail, needs >=3:1 against --panel --bg-veil opaque-ish topbar fill for browsers without color-mix() -------------------------------------------------------------------------- */ :root, [data-theme="lifeco"] { --bg: #0C1A15; --bg-2: #0F2119; --panel: #102A22; --panel-2: #143128; --line: #1F4438; --line-soft: #17332A; --track: #2F6152; --bg-veil: rgba(12, 26, 21, .86); --accent: #3FBF97; --accent-hi: #5FD0AC; --accent-soft: rgba(63, 191, 151, .13); --accent-line: rgba(63, 191, 151, .34); } [data-theme="herbly"] { --bg: #1A130B; --bg-2: #1F170D; --panel: #241A0F; --panel-2: #2C2013; --line: #3D2D19; --line-soft: #2E2213; --track: #5A4324; --bg-veil: rgba(26, 19, 11, .86); --accent: #EF8A3E; --accent-hi: #F7B87E; --accent-soft: rgba(239, 138, 62, .14); --accent-line: rgba(239, 138, 62, .36); } [data-theme="kicko"] { --bg: #0F1626; --bg-2: #121B2E; --panel: #16203A; --panel-2: #1B2745; --line: #26355A; --line-soft: #1D2943; --track: #3A4E7E; --bg-veil: rgba(15, 22, 38, .86); --accent: #5B90F7; --accent-hi: #8FB4FB; --accent-soft: rgba(91, 144, 247, .14); --accent-line: rgba(91, 144, 247, .36); } [data-theme="herkind"] { --bg: #1C1116; --bg-2: #22151B; --panel: #281820; --panel-2: #301D26; --line: #452934; --line-soft: #35202A; --track: #63414F; --bg-veil: rgba(28, 17, 22, .86); --accent: #D97F94; --accent-hi: #E6A6B6; --accent-soft: rgba(217, 127, 148, .14); --accent-line: rgba(217, 127, 148, .36); } :root { --ink: #E9ECF1; --ink-dim: #B7BFCC; /* For small prose. --muted at 13px drops to ~4.15:1 once the watermark composites over a gradient panel; this holds 4.5:1. */ --ink-soft: #A2AAB8; --muted: #8B94A3; --good: #5FD98F; --good-soft: rgba(95, 217, 143, .13); --cool: #6FA8DC; --cool-soft: rgba(111, 168, 220, .13); --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --radius: 16px; --radius-s: 10px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.32); --ease: cubic-bezier(.22, .61, .36, 1); /* Responsive scalars. Only ever grow with the viewport. */ --gutter: 16px; --pad-x: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); --maxw: 1280px; --band-pad: 46px; --panel-pad-y: 20px; --panel-pad-x: 18px; --topbar-h: 108px; /* JS overwrites from the real offsetHeight */ } @media (min-width: 641px) { :root { --gutter: 22px; --band-pad: 52px; --panel-pad-y: 26px; --panel-pad-x: 28px; --topbar-h: 78px; } } @media (min-width: 901px) { :root { --band-pad: 62px; } } @media (min-width: 1200px) { :root { --gutter: 32px; } } @media (min-width: 1700px) { :root { --maxw: 1440px; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--bg); transition: background-color .8s var(--ease); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* Long, so the brand change reads as the page settling into a new mood rather than a flash. */ transition: background-color .8s var(--ease); } @media (min-width: 901px) { body { font-size: 17.5px; } } @media (min-width: 1700px) { body { font-size: 18.5px; } } h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.012em; } a { color: var(--accent-hi); } [hidden] { display: none !important; } /* -------------------------------------------------------------------------- Watermark - fixed, unclickable, over everything. NEVER put transform/filter/backdrop-filter on html or body: that would make this fixed element a descendant of a new containing block and it would scroll away from the content it is meant to mark. -------------------------------------------------------------------------- */ .watermark { position: fixed; inset: -20vh -20vw; z-index: 9000; pointer-events: none; user-select: none; display: none; opacity: .06; transform: rotate(-24deg); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; color: #fff; line-height: 3.6; } .watermark.on { display: block; } .watermark div { text-align: center; } /* -------------------------------------------------------------------------- Booting -------------------------------------------------------------------------- */ .booting { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 200; } .booting[hidden] { display: none; } .spinner { width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } .spinner-lg { width: 30px; height: 30px; border-width: 2.5px; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Sign in -------------------------------------------------------------------------- */ .gate { position: relative; min-height: 100svh; display: grid; place-items: center; padding: max(34px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); overflow: hidden; } .gate-art { position: absolute; inset: 0; pointer-events: none; } .orb { position: absolute; border-radius: 50%; /* Static and cheaper on a phone: two 320px+ elements re-rasterising a 90px blur every frame while someone types a six-digit code is not a good trade. */ filter: blur(56px); opacity: .42; animation: none; } .orb-a { width: 46vw; height: 46vw; min-width: 320px; min-height: 320px; background: radial-gradient(circle, rgba(237,138,63,.5), transparent 68%); top: -14vh; right: -10vw; } .orb-b { width: 40vw; height: 40vw; min-width: 280px; min-height: 280px; background: radial-gradient(circle, rgba(111,168,220,.34), transparent 68%); bottom: -18vh; left: -12vw; } @media (min-width: 901px) and (hover: hover) { .orb { filter: blur(90px); opacity: .5; will-change: transform; } .orb-a { animation: drift-a 26s var(--ease) infinite alternate; } .orb-b { animation: drift-b 32s var(--ease) infinite alternate; } } /* Translate only - no scale() - so the compositor can reuse a cached texture. */ @keyframes drift-a { to { transform: translate3d(-5vw, 7vh, 0); } } @keyframes drift-b { to { transform: translate3d(6vw, -5vh, 0); } } .gate-card { position: relative; width: 100%; max-width: 452px; background: rgba(22, 27, 34, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 28px 22px 22px; animation: rise .6s var(--ease) both; } @media (min-width: 641px) { .gate-card { padding: 34px 32px 26px; } } @keyframes rise { from { opacity: 0; transform: translateY(14px); } } .mark { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; } .mark-name { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.15; } .mark-sub { font-size: 14px; color: var(--ink-soft); letter-spacing: .02em; } .gate-title { margin: 0 0 8px; font-size: clamp(30px, 4vw + 16px, 38px); line-height: 1.15; } .gate-lede { margin: 0 0 24px; color: var(--ink-dim); font-size: 16.5px; } .gate-form { display: grid; gap: 14px; animation: fade .35s var(--ease) both; } @keyframes fade { from { opacity: 0; } } .field { display: block; } .field-label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); } .field input { width: 100%; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--radius-s); color: var(--ink); font: inherit; /* >=16px or iOS Safari zooms the whole page on focus. */ font-size: 17px; min-height: 52px; padding: 13px 15px; transition: border-color .18s, box-shadow .18s; } /* The placeholder is the only hint about the code's format, so it has to be legible: #5C6473 measured 2.82:1. */ .field input::placeholder { color: #98A1AF; } .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .code-input { font-size: 30px; font-weight: 600; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .3em; min-height: 62px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: var(--radius-s); font: inherit; font-weight: 600; min-height: 52px; padding: 14px 20px; cursor: pointer; transition: background .16s, border-color .16s, color .16s, transform .12s; } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .6; cursor: default; } .btn-primary { background: var(--accent); color: #14181E; } .btn-primary:hover:not([disabled]) { background: var(--accent-hi); } .btn-primary .spinner { border-color: rgba(0,0,0,.28); border-top-color: #14181E; } .btn-quiet { background: transparent; color: var(--ink-dim); border-color: var(--line); } .btn-quiet:hover { border-color: #39424F; color: var(--ink); } .btn-sm { min-height: 44px; padding: 10px 15px; font-size: 15px; } .sent-to { margin: 0; font-size: 16px; color: var(--ink-dim); } .sent-to strong { color: var(--ink); } .gate-message { margin: 14px 0 0; min-height: 1.2em; font-size: 16px; color: var(--accent-hi); } .gate-message.ok { color: var(--good); } .gate-brands { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } .gate-brands img { height: 24px; width: auto; max-width: 104px; object-fit: contain; opacity: .82; } .gate-foot { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } /* -------------------------------------------------------------------------- Top bar Two rows on a phone so the section nav survives; one row from 641px. Named grid areas are mandatory - .topbar-in has four children, and auto-placement would push sign-out onto a third row. -------------------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 60; background: var(--bg-veil); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); transition: background-color .8s var(--ease); } @supports not (backdrop-filter: blur(2px)) { .topbar { background: var(--bg); } } .topbar-in { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--pad-x); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand lens actions" "nav nav nav"; align-items: center; gap: 4px 10px; } .topbar-brand { grid-area: brand; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; /* Without this the `auto` grid track is sized by this block's min-content, and a nowrap uppercase period line pushes the whole bar past the viewport. */ min-width: 0; } .topbar-brand .brand-co { font-family: var(--serif); font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; } .topbar-brand .brand-period { font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } #btn-signout { grid-area: actions; } /* "Now viewing" chip - names the brand the page is currently wearing, so the colour change is never ambiguous. Mirrors the pitch deck's lens indicator. */ .lens { grid-area: lens; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 13px 6px 10px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 999px; transition: border-color .5s var(--ease), background-color .5s var(--ease); /* Never squeezed by the nav - the nav scrolls, the chip does not wrap. */ flex: none; white-space: nowrap; } .lens-logo { height: 21px; width: auto; max-width: 104px; display: block; object-fit: contain; } .lens-text { display: flex; flex-direction: column; line-height: 1.2; } .lens-text small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lens-text b { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--accent-hi); overflow: hidden; text-overflow: ellipsis; } /* When the chip carries a logo, the logo IS the identity - drop the name to give it room, keep the "Now viewing" whisper. */ .lens.has-logo .lens-text b { display: none; } .lens.swap { animation: lens-swap .5s var(--ease); } @keyframes lens-swap { from { opacity: 0; transform: translateY(-4px); } } .topbar-nav { grid-area: nav; margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x) 2px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; /* Prefixed twin is required - older iOS Safari ignores the unprefixed property, and iOS is the target platform. */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent); } .topbar-nav::-webkit-scrollbar { display: none; } .topbar-nav button { background: none; border: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; color: var(--muted); min-height: 42px; padding: 10px 14px; border-radius: 9px; white-space: nowrap; scroll-snap-align: start; transition: color .16s, background .16s; } .topbar-nav button:hover { color: var(--ink); } .topbar-nav button:active { background: var(--accent-soft); color: var(--accent-hi); } .topbar-nav button.active { color: var(--accent-hi); background: var(--accent-soft); } .topbar-progress { height: 2px; background: var(--line-soft); } .topbar-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width .1s linear; } @media (min-width: 641px) { .topbar-in { display: flex; align-items: center; gap: 26px; padding: 15px var(--pad-x); } .topbar-brand .brand-co { font-size: 19px; } .lens { padding: 8px 16px 8px 13px; gap: 12px; } .lens-logo { height: 24px; max-width: 130px; } .lens-text b { font-size: 16px; } .topbar-nav { margin: 0 0 0 auto; padding: 0; -webkit-mask-image: none; mask-image: none; } .topbar-nav button { min-height: 0; padding: 8px 13px; font-size: 14.5px; } } @media (max-width: 900px) { .lens-text small { display: none; } } /* -------------------------------------------------------------------------- Page shell -------------------------------------------------------------------------- */ .page { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); padding-bottom: calc(70px + env(safe-area-inset-bottom)); counter-reset: band; } @media (min-width: 901px) { .page { padding-bottom: calc(90px + env(safe-area-inset-bottom)); } } .reveal { opacity: 0; transform: translateY(20px); } .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } .band { padding: var(--band-pad) 0; border-top: 1px solid var(--line); counter-increment: band; /* Nav jumps land below the sticky bar instead of underneath it. */ scroll-margin-top: calc(var(--topbar-h) + 10px); } .band-head { max-width: 660px; margin-bottom: 30px; } .band-head h2 { margin: 0 0 10px; font-size: clamp(28px, 3.6vw + 14.5px, 42px); line-height: 1.2; } /* Numbering makes the page read as a document, and gives the accent structural work to do. Hidden bands are display:none and do not increment. */ .band-head h2::before { content: counter(band, decimal-leading-zero); display: block; margin-bottom: 10px; font-family: var(--sans); font-size: .42em; font-weight: 700; letter-spacing: .12em; color: var(--accent); } .band-head p { margin: 0; color: var(--ink-dim); font-size: clamp(17.5px, .9vw + 14.1px, 21px); } .eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); } /* A brand-tinted wash at the top of each clinic's band, so the theme handover is an event rather than a colour you notice later. */ section[data-brand] { position: relative; isolation: isolate; } section[data-brand] > * { position: relative; z-index: 1; } section[data-brand]::after { content: ""; position: absolute; z-index: 0; top: 0; left: calc(50% - 50vw); width: 100vw; height: clamp(180px, 34vw, 320px); pointer-events: none; background: linear-gradient(180deg, var(--accent-soft), transparent 80%); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { padding: clamp(36px, 7vw, 84px) 0 clamp(36px, 5vw, 60px); position: relative; isolation: isolate; } .hero > * { position: relative; z-index: 1; } /* Carries the sign-in screen's light into the document. Not transitioned - gradients do not interpolate - and always lifeco, because the theme only switches once a [data-brand] band crosses the marker far below. */ .hero::before { content: ""; position: absolute; z-index: 0; top: -26vh; right: -30vw; width: 82vw; height: 82vw; max-width: 880px; max-height: 880px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 62%); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%); filter: blur(72px); opacity: .5; pointer-events: none; } .hero-greeting { margin: 0 0 16px; font-size: clamp(38px, 5.2vw + 18px, 64px); line-height: 1.08; } .hero-greeting .hl { background: linear-gradient(100deg, var(--accent), var(--accent-hi)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-lede { margin: 0 0 32px; max-width: 640px; font-family: var(--serif); font-size: clamp(20px, 1.6vw + 14px, 26px); line-height: 1.5; color: var(--ink-dim); } .hero-figure { display: block; width: 100%; padding: 22px 20px; background: linear-gradient(150deg, var(--accent-soft), transparent 78%); border: 1px solid var(--accent-line); border-radius: var(--radius); margin-bottom: 24px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06); } .figure-value { font-size: clamp(42px, 7.2vw + 15px, 72px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--accent-hi); } .figure-label { margin-top: 8px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .hero-body { margin: 0; max-width: 660px; color: var(--ink-dim); } .scroll-cue { margin-top: clamp(24px, 4vw, 46px); height: 52px; } .scroll-cue span { display: block; width: 2px; height: 52px; border-radius: 2px; background: linear-gradient(var(--accent), transparent); animation: cue 2.1s var(--ease) infinite; } @keyframes cue { 0%, 100% { opacity: .25; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } } @media (min-width: 641px) { .hero-figure { display: inline-block; width: auto; padding: 26px 32px; } } /* Second column without touching the HTML. Explicit placement is required because DOM order is eyebrow -> h1 -> lede -> figure -> body -> cue, and restructuring the markup would push the run-rate below the body copy on mobile - the wrong trade on the priority platform. */ @media (min-width: 901px) { .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); column-gap: 64px; align-items: start; } .hero .eyebrow { grid-column: 1; grid-row: 1; } .hero-greeting { grid-column: 1; grid-row: 2; } .hero-lede { grid-column: 1; grid-row: 3; } .hero-figure { grid-column: 2; grid-row: 2 / span 3; align-self: center; display: block; width: 100%; margin: 0; padding: 36px 34px; } .hero-body { grid-column: 1; grid-row: 4; } .scroll-cue { grid-column: 1; grid-row: 5; } } /* -------------------------------------------------------------------------- Group structure -------------------------------------------------------------------------- */ .structure { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-pad-y) var(--panel-pad-x); margin-bottom: 20px; } .struct-tier { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .struct-name { font-family: var(--serif); font-size: 21px; font-weight: 600; } .struct-role { font-size: 15px; color: var(--ink-soft); } .struct-rule { height: 22px; width: 1.5px; margin: 10px 0 10px 11px; background: linear-gradient(var(--accent-line), transparent); } .clinic-cards { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 22px; } @media (min-width: 641px) { .clinic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 901px) { .clinic-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } .clinic-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 14px; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; } .clinic-card.is-live { border-color: var(--accent-line); } /* Hover-only, and gated: on touch a :hover transform latches after a tap and reads as "selected" on a card that is not selectable. */ @media (hover: hover) { .clinic-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35); } } .clinic-logo { height: 44px; display: flex; align-items: center; } .clinic-logo img { height: 44px; width: auto; max-width: 200px; object-fit: contain; display: block; } .clinic-logo .wordmark { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.01em; } .clinic-note { font-size: 15.5px; color: var(--ink-soft); line-height: 1.5; margin-top: auto; } .clinic-flag { align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; } .clinic-flag.live { background: var(--good-soft); color: var(--good); } .clinic-flag.coming { background: rgba(139,148,163,.14); color: var(--muted); } /* The clinic's address, wearing the same visual treatment as the logo row: a brand-tinted chip. Live sites are real links; herkind waits. */ .domain-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-hi); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 11px 18px; text-decoration: none; transition: background .18s, border-color .18s, transform .15s; } .domain-link svg { width: 14px; height: 14px; flex: none; } @media (hover: hover) { a.domain-link:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); transform: translateY(-1px); } } a.domain-link:active { transform: scale(.97); } span.domain-link { color: var(--muted); background: rgba(139,148,163,.1); border-color: var(--line); } /* Brand mark heading a clinic's own section. */ .brand-mark { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; } .brand-mark img { height: 44px; width: auto; max-width: 220px; object-fit: contain; display: block; } .brand-mark .wordmark { font-family: var(--serif); font-size: 30px; font-weight: 600; } @media (min-width: 641px) { .brand-mark img { height: 52px; max-width: 250px; } .brand-mark .wordmark { font-size: 34px; } } /* -------------------------------------------------------------------------- Your position - the reader's own numbers, the most important thing here -------------------------------------------------------------------------- */ .position-hero { background: linear-gradient(150deg, var(--panel-2), var(--panel)); border: 1px solid var(--accent-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--panel-pad-y) var(--panel-pad-x); margin-bottom: 20px; position: relative; overflow: hidden; } .position-hero::after { content: ""; position: absolute; top: -35%; right: -25%; width: 62%; aspect-ratio: 1; background: radial-gradient(circle, var(--accent-soft), transparent 66%); pointer-events: none; } /* Explicit two-up on phones. Every minmax() floor tried still collapsed to one column at 360px or flipped large phones to one-up - layout as an accident of handset. minmax(0,1fr) stops an 8-digit figure forcing track growth, which body{overflow-x:hidden} would silently clip. */ .position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; position: relative; z-index: 1; } @media (min-width: 901px) { .position-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px 30px; } } .stat-label { font-size: 13.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .stat-value { font-size: 28px; font-weight: 650; line-height: 1.12; font-variant-numeric: tabular-nums; letter-spacing: -.015em; } @media (min-width: 901px) { .stat-value { font-size: 30px; } } .stat-value.accent { color: var(--accent-hi); } .stat-value.good { color: var(--good); } .stat-note { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); } /* The headline figure. Solid colour, NOT background-clip:text - under forced-colors the background is overridden but a transparent text-fill survives, which would render the one number the investor came for invisible. */ .stat-hero { grid-column: 1 / -1; } .stat-hero .stat-value { font-size: clamp(40px, 8vw + 10px, 64px); line-height: 1; letter-spacing: -.025em; color: var(--accent-hi); } .stat-hero .stat-note { font-size: 15px; color: var(--ink-soft); } .stat-hero.is-up .stat-note { color: var(--good); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; position: relative; z-index: 1; } .chip { font-size: 15px; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-dim); } .chip.accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-hi); } .chip.good { border-color: rgba(95,217,143,.3); background: var(--good-soft); color: var(--good); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-pad-y) var(--panel-pad-x); margin-bottom: 20px; } .panel > h3 { margin: 0 0 6px; font-size: 22px; } .panel > .panel-sub { margin: 0 0 22px; color: var(--ink-soft); font-size: 16px; } /* Replaces JS-inlined margins, so it can follow the brand theme. */ .panel-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 68ch; } /* The single most actionable fact a lender has - promoted out of small print. */ .next-pay { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 22px; padding: 12px 16px; border-radius: var(--radius-s); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-hi); font-size: 16px; font-weight: 600; } /* -------------------------------------------------------------------------- Metric tiles - explicit counts, not auto-fit -------------------------------------------------------------------------- */ .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; } /* Seven tiles: the odd one out spans the row rather than sitting half-width. */ .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 641px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tiles > .tile:last-child:nth-child(odd) { grid-column: auto; } } @media (min-width: 901px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px 15px; transition: border-color .2s, transform .2s var(--ease); } @media (hover: hover) { .tile:hover { border-color: var(--accent-line); transform: translateY(-2px); } } .tile-value { font-size: clamp(27px, 2vw + 19.5px, 33px); font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.015em; } .tile-label { margin-top: 6px; font-size: 15.5px; color: var(--ink-dim); } .tile-basis { margin-top: 4px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; } /* -------------------------------------------------------------------------- Charts Drawn at 1 SVG unit = 1 CSS pixel from a measured container width. The old fixed 900-unit viewBox scaled to 0.34 on a phone, rendering 11.5px axis labels at 3.9px. Do NOT reintroduce `width: 100%` on the svg - it makes the browser re-derive size from the viewBox and discards every height below. -------------------------------------------------------------------------- */ .chart-card { margin: 0 0 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-pad-y) var(--panel-pad-x); padding-bottom: calc(var(--panel-pad-y) - 6px); } /* The chart is the densest thing on the page and the most starved of width; edge to edge on a phone gains ~54px. Cards the reader owns stay inset. */ @media (max-width: 640px) { .chart-card { margin-inline: calc(var(--pad-x) * -1); border-radius: 0; border-left: 0; border-right: 0; padding-left: 8px; padding-right: 8px; } .chart-card > .chart-head { padding-inline: 10px; } } .chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .chart-head h3 { margin: 0 0 4px; font-size: 21px; } .chart-head p { margin: 0; font-size: 15px; color: var(--ink-soft); } .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; color: var(--ink-dim); } .legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; } .chart-holder { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .chart-holder svg { display: block; } .grid-line { stroke: var(--line-soft); stroke-width: 1; } .axis-text { fill: var(--ink-soft); font-size: 13px; font-family: var(--sans); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .axis-text { font-size: 14px; } } .series-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .hit { fill: transparent; cursor: crosshair; } .partial-veil { fill: var(--bg); fill-opacity: .55; } .partial-rule { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; } .chart-flag { fill: var(--ink-dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .tip { position: fixed; z-index: 120; pointer-events: none; background: #0A0D12; background: color-mix(in srgb, var(--bg) 82%, #000); border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; font-size: 15px; box-shadow: 0 8px 26px rgba(0,0,0,.5); opacity: 0; transition: opacity .12s; } .tip.on { opacity: 1; } .tip-title { font-weight: 700; margin-bottom: 4px; } /* nowrap is deliberate: the widest row fits 320px, and wrapping would break a number away from its label and destroy the pairing. */ .tip-row { color: var(--ink-dim); white-space: nowrap; } .tip-row b { color: var(--ink); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Loan schedule Classes, not inline styles: inline styles outrank the stylesheet, have no media-query mechanism, and never followed the brand theme. -------------------------------------------------------------------------- */ .sched-wrap { margin-top: 20px; overflow-x: auto; } .sched { width: 100%; border-collapse: collapse; font-size: 16px; } .sched th { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; } .sched td { text-align: right; padding: 11px 10px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; color: var(--ink-dim); } .sched th:first-child, .sched td:first-child, .sched th:last-child, .sched td:last-child { text-align: left; } .sched td:last-child { color: var(--muted); } .sched tr.is-paid td:last-child { color: var(--good); } /* Interest and Principal are already summarised in the stats above, so hiding them removes the horizontal scroll entirely rather than plumbing a card list. */ @media (max-width: 640px) { .sched th:nth-child(2), .sched td:nth-child(2), .sched th:nth-child(3), .sched td:nth-child(3) { display: none; } } /* -------------------------------------------------------------------------- Callouts and timeline -------------------------------------------------------------------------- */ .callouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .callouts li { position: relative; padding-left: 27px; color: var(--ink-dim); font-size: 17.5px; max-width: 68ch; } .callouts li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .timeline li { position: relative; padding: 20px 0 20px 34px; border-left: 2px solid var(--line); } .timeline li::before { content: ""; position: absolute; left: -7px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--bg); } .timeline-next li::before { background: var(--cool); } .timeline li:last-child { border-left-color: transparent; } .timeline h4 { margin: 0 0 5px; font-size: 19px; font-weight: 650; font-family: var(--sans); } .timeline p { margin: 0; color: var(--ink-dim); font-size: 17px; max-width: 68ch; } /* -------------------------------------------------------------------------- Dispensing partner -------------------------------------------------------------------------- */ .partner-mark { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; } .partner-mark img { height: 38px; width: auto; max-width: 190px; object-fit: contain; display: block; } @media (min-width: 641px) { .partner-mark img { height: 46px; max-width: 230px; } } .partner-shot { margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); line-height: 0; } .partner-shot img { display: block; width: 100%; height: auto; } /* Edge to edge on a phone, like the charts - it is a wide banner shot and loses too much to the page gutters otherwise. */ @media (max-width: 640px) { .partner-shot { margin-inline: calc(var(--pad-x) * -1); border-radius: 0; border-left: 0; border-right: 0; } } /* -------------------------------------------------------------------------- Team Bios are rows, not a card grid: they vary from one paragraph to two long ones, and a grid would either stretch every card to the tallest or crop the longest. A row list absorbs the difference without either compromise. -------------------------------------------------------------------------- */ .team-photo { margin: 0 0 30px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); } .team-photo img { display: block; width: 100%; height: auto; } .team-photo figcaption { padding: 12px 18px; font-size: 14.5px; color: var(--ink-soft); border-top: 1px solid var(--line-soft); } /* Photo beside the intro, bios full width beneath. Explicitly NOT a float: a shrink-to-fit float around a width:100% image has no width to resolve against and collapses. And .bios is a grid container, which establishes its own formatting context and would not have flowed around the float anyway. */ @media (min-width: 901px) { #sec-team { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 44px; align-items: start; } #sec-team > .band-head { grid-column: 1; grid-row: 1; } #sec-team > .team-photo { grid-column: 2; grid-row: 1; margin: 0; } #sec-team > .bios { grid-column: 1 / -1; grid-row: 2; } } .bios { display: grid; gap: 0; } .bio { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "photo head" "body body"; align-items: center; gap: 4px 16px; padding: 26px 0; border-top: 1px solid var(--line-soft); } .bio:first-child { border-top: none; padding-top: 6px; } .bio-photo { grid-area: photo; } .bio-photo img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--line); /* The source photos are a mix of black-and-white studio shots and colour avatars on a green backdrop. Greyscale makes one set of them. */ filter: grayscale(1) contrast(1.04); } .bio-photo.is-empty { width: 76px; height: 76px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--line); } .bio-head { grid-area: head; } .bio-name { margin: 0; font-size: 21px; line-height: 1.2; } .bio-role { margin: 3px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); } .bio-body { grid-area: body; } .bio-text { margin: 14px 0 0; font-size: 17px; line-height: 1.62; color: var(--ink-dim); max-width: 68ch; } @media (min-width: 641px) { .bio { grid-template-columns: 108px minmax(0, 1fr); grid-template-areas: "photo head" "photo body"; align-items: start; gap: 0 26px; padding: 32px 0; } .bio-photo img, .bio-photo.is-empty { width: 108px; height: 108px; } .bio-body { grid-area: body; } .bio-text:first-child { margin-top: 12px; } } /* -------------------------------------------------------------------------- Scenario explorer Flex column on mobile, NOT a one-column grid: a sticky grid item's containing block is its own grid area, which in one column equals the item's own height - zero travel. align-items:stretch is also load-bearing. -------------------------------------------------------------------------- */ .scenario { display: flex; flex-direction: column; align-items: stretch; gap: 14px; } /* On a phone the full answer card is ~430px; pinning it leaves no room for the controls. Pin a summary bar instead so the number tracks the sliders. */ .scenario-bar { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 40; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; background: linear-gradient(155deg, var(--panel-2), var(--panel)); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 12px 18px; box-shadow: var(--shadow); } .scenario-bar .out-label { font-size: 15px; color: var(--ink-dim); } .scenario-bar .out-value { font-size: 30px; color: var(--accent-hi); font-weight: 650; font-variant-numeric: tabular-nums; } .scenario-controls, .scenario-out { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--panel-pad-y) var(--panel-pad-x); } .scenario-out { background: linear-gradient(155deg, var(--panel-2), var(--panel)); position: static; } @media (min-width: 821px) { .scenario { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .scenario-bar { display: none; } .scenario-out { position: sticky; top: calc(var(--topbar-h) + 12px); } } .slider { margin-bottom: 22px; } .slider:last-child { margin-bottom: 0; } .slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; } .slider-name { font-size: 16px; font-weight: 600; } .slider-val { font-size: 21px; font-weight: 700; color: var(--accent-hi); font-variant-numeric: tabular-nums; } .slider-help { margin: 7px 0 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; } /* -------------------------------------------------------------------------- Share-count stepper Discrete values, so a stepper rather than a slider - and typable, because an investor wants to enter an exact figure rather than hunt for it. -------------------------------------------------------------------------- */ .shares-field { padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); } .shares-reset { background: none; border: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-hi); border-radius: 6px; text-decoration: underline; text-underline-offset: 3px; /* 44px tap target without letting it push the header row taller. */ min-height: 44px; padding: 0 4px; margin: -10px -4px; } .shares-reset:active { opacity: .7; } .stepper { display: flex; align-items: stretch; gap: 10px; } .step-btn { flex: none; width: 56px; min-height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--accent-hi); font: inherit; font-size: 26px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; } @media (hover: hover) { .step-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); } } .step-btn:active { transform: scale(.95); background: var(--accent-soft); } .step-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .shares-input { flex: 1 1 auto; min-width: 0; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--radius-s); color: var(--ink); font-family: var(--sans); /* 30px keeps it above the 16px iOS zoom-on-focus threshold with room to spare, and matches the weight of the figures it drives. */ font-size: 30px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; min-height: 56px; padding: 8px 6px; transition: border-color .18s, box-shadow .18s; } .shares-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* The stepper buttons are the affordance; the spinners are tiny and ugly. */ .shares-input::-webkit-outer-spin-button, .shares-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .shares-input { -moz-appearance: textfield; appearance: textfield; } /* 44px tall transparent slab for the touch target, an 8px visible rail with a filled-progress indication, and a 30px thumb. touch-action is pan-y, NOT none: three stacked full-width `none` bands would kill vertical scroll. */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; outline: none; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; --pct: 50%; } input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--pct), var(--track) var(--pct)); } input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--track); } input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent); } /* box-sizing is what makes margin-top:-11px actually centre 30px on 8px: *{box-sizing:border-box} does not reach a UA pseudo-element. */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--accent); border: 3px solid var(--panel); box-shadow: 0 1px 6px rgba(0,0,0,.5); } input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 3px solid var(--panel); box-shadow: 0 1px 6px rgba(0,0,0,.5); } input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); } input[type="range"]:active::-moz-range-thumb { transform: scale(1.1); } /* On the thumb, not the now-transparent slab, or focus rings an empty box. */ input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); } input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft); } @media (min-width: 901px) { input[type="range"] { height: 30px; } input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -7px; } input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; } } .out-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .out-row:last-of-type { border-bottom: none; } .out-label { font-size: 16px; color: var(--ink-dim); } .out-value { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .out-value.good { color: var(--good); } /* .out-row is flex, so flex-direction is what stacks this - the old display:block on .out-hero .out-label was inert. */ .out-hero { flex-direction: column; align-items: flex-start; padding: 4px 0 18px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .out-hero .out-value { font-size: 34px; color: var(--accent-hi); line-height: 1.05; } .out-hero .out-label { margin-bottom: 7px; } @media (min-width: 901px) { .out-hero .out-value { font-size: 40px; } } .disclaimer { margin: 20px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 720px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .foot { padding: 56px 0 0; margin-top: 22px; border-top: 1px solid var(--line); color: var(--ink-dim); } .foot p { max-width: 68ch; } .foot-contact { font-family: var(--serif); } .foot-contact a { display: inline-flex; align-items: center; min-height: 54px; padding: 14px 24px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-hi); font-size: 19px; text-decoration: none; } .foot-conf { font-size: 14px; color: var(--ink-soft); max-width: 640px; } .empty { color: var(--ink-soft); font-size: 16.5px; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius-s); padding: 20px 22px; } /* -------------------------------------------------------------------------- Print - the page does not go to paper. This depends on every real screen node being a direct child of body, or a descendant of one. Do not append new elements to body, and do not move .print-only. -------------------------------------------------------------------------- */ .print-only { display: none; } @media print { body > * { display: none !important; } .print-only { display: block !important; color: #000; background: #fff; font-family: Georgia, serif; padding: 40mm 24mm; } .print-only h1 { font-size: 22pt; margin: 0 0 12pt; } .print-only p { font-size: 12pt; line-height: 1.6; max-width: 130mm; } } /* -------------------------------------------------------------------------- Reduced motion - one consolidated block. @keyframes cue is infinite and was previously uncovered, which is the worst case for a motion-sensitive reader. The spinner keeps animating: it communicates state. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html, body, :root, .topbar { transition: none; } .reveal, .reveal.in { opacity: 1; transform: none; transition: none; } .orb, .scroll-cue span, .gate-card, .gate-form, .lens.swap { animation: none; } }