/* CraveIt — craveit.co.za Static build of the Claude Design home page ("CraveIt Website"). Tokens are inlined from the CraveIt design system (colors, typography, spacing, effects). No external requests: every font and image is served from /assets. Content is fully visible without JavaScript — reveal animations only hide content once site.js has added the "js" class to . */ @font-face { font-family: "Special Gothic"; src: url("fonts/SpecialGothic-Variable.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 125%; font-display: swap; } @font-face { font-family: "Lora"; src: url("fonts/Lora-VariableFont.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("fonts/Lora-Italic-VariableFont.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; } :root { /* Brand (design-system colors.css) */ --cv-purple-bright: #963C86; --cv-purple-dark: #5A0760; --cv-purple-muted: #8B628A; --cv-gold: #C79A5F; --cv-ink: #484B4C; --cv-black: #0D0E10; --cv-midnight: #1A1423; --cv-grey-100: #F4F4F4; --cv-grey-200: #EEEEEE; --cv-gradient-brand: linear-gradient(90deg, #916786 0%, #C79A5F 100%); --cv-gradient-home: linear-gradient(146deg, rgba(139,98,138,0.98) 38%, rgba(143,102,135,0.98) 56%, rgba(199,154,95,0.98) 96%); --cv-gradient-gold: linear-gradient(158deg, #DDB87F 0%, #C79A5F 45%, #8F6234 100%); /* text-bearing cards: same mauve→gold journey, deepened so white text stays >= 4.5:1 end to end */ --cv-gradient-home-text: linear-gradient(146deg, #7E557D 38%, #7C5577 56%, #8F6234 96%); /* Page-level colors used by the design */ --night: #4A0A50; --on-night: #F2E9F2; --on-night-soft: #D9C6D5; --line: #EDE4EC; --tint: #F4EEF3; --blush: #F7F2F6; /* Text-safe variants (WCAG AA on white and #F4F4F4) of the gold and muted-purple labels */ --gold-ink: #8C6430; --label: #825982; /* Effects (effects.css) */ --cv-shadow-soft: 0 2px 10px rgba(45, 12, 46, 0.08); --cv-shadow-raise: 0 6px 18px rgba(45, 12, 46, 0.14); --cv-ease: cubic-bezier(0.33, 0, 0.2, 1); --cv-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Typography (typography.css). Gothic A1 is not self-hosted, so Special Gothic carries the UI. */ --cv-font-sans: "Special Gothic", system-ui, -apple-system, "Segoe UI", sans-serif; --cv-font-serif: "Lora", Georgia, "Times New Roman", serif; --hex-light: url("/assets/img/hex-light.svg"); --hex-night: url("/assets/img/hex-night.svg"); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: #FFFFFF; color: var(--cv-ink); font-family: var(--cv-font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .page { overflow-x: clip; } img { max-width: 100%; } h1, h2, h3, p, ul, ol, figure { margin: 0; } a { color: var(--cv-purple-bright); text-underline-offset: 3px; } a:hover { color: var(--cv-purple-dark); } :focus-visible { outline: 3px solid var(--cv-purple-dark); outline-offset: 3px; } .dark :focus-visible, .site-footer :focus-visible { outline-color: var(--cv-gold); } .grad :focus-visible { outline-color: #FFFFFF; } .list { list-style: none; padding: 0; } .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 { position: absolute; left: -999px; top: 8px; z-index: 100; background: #FFFFFF; color: var(--cv-purple-dark); padding: 8px 14px; border-radius: 9999px; } .skip:focus { left: 16px; } /* ---------- shared building blocks ---------- */ .sec { position: relative; padding: 120px 24px; background: #FFFFFF; } .container { position: relative; max-width: 1200px; margin: 0 auto; } .hex { position: absolute; inset: 0; background-image: var(--hex-light); background-size: 168px 97px; pointer-events: none; } .hex--night { background-image: var(--hex-night); } .stack { display: flex; flex-direction: column; } .eyebrow { font-family: var(--cv-font-serif); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--gold-ink); } .dark .eyebrow, .today-card .eyebrow { color: var(--cv-gold); } .h2 { font-weight: 700; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; color: var(--cv-purple-dark); } .balance { text-wrap: balance; } .kicker { font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: 0.16em; text-transform: uppercase; } .kicker--soft { color: var(--on-night-soft); } .kicker--purple { color: var(--cv-purple-bright); } .kicker--muted { color: var(--label); } .kicker--white { color: #FFFFFF; } .kicker--gold { color: var(--cv-gold); } .mt-64 { margin-top: 64px; } .mt-72 { margin-top: 72px; } .hl { color: var(--cv-purple-bright); font-weight: 600; } .pretty { text-wrap: pretty; } .head { display: flex; flex-direction: column; gap: 14px; } .head--18 { gap: 18px; } .head--split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; } .dark { background: var(--night); color: var(--on-night); overflow: hidden; overflow: clip; } .dark .h2 { color: #FFFFFF; } .grid { display: grid; } .cols-420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .cols-380 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } .cols-340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .cols-320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .cols-220 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .icon { flex: none; margin-top: 3px; } /* Buttons (design-system Button: primary lg / sm, secondary gradient outline) */ .btn { font-family: var(--cv-font-sans); font-weight: 450; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 26px; font-size: 19px; line-height: 1; border: 0; border-radius: 20px; cursor: pointer; white-space: nowrap; text-decoration: none; background: var(--cv-purple-bright); color: #FFFFFF; transition: transform 140ms var(--cv-ease), opacity 220ms var(--cv-ease); } .btn:hover { color: #FFFFFF; opacity: 0.92; } .btn:active { transform: scale(0.97); } .btn--sm { height: 32px; padding: 0 16px; font-size: 15px; } .btn--secondary { height: 40px; color: var(--cv-ink); border: 2px solid transparent; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--cv-gradient-brand) border-box; } .btn--secondary:hover { color: var(--cv-ink); } /* Chips (design-system Chip) */ .chip { font-family: var(--cv-font-sans); font-weight: 500; font-size: 15px; height: 32px; padding: 0 18px; border-radius: 20px; white-space: nowrap; display: inline-flex; align-items: center; cursor: pointer; border: 2px solid transparent; color: var(--cv-ink); background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--cv-gradient-brand) border-box; transition: transform 140ms var(--cv-ease), opacity 220ms var(--cv-ease); } .chip:hover:not(:disabled) { opacity: 0.92; } .chip:active:not(:disabled) { transform: scale(0.97); } .chip[aria-pressed="true"] { color: var(--cv-black); background: var(--cv-gold); font-weight: 600; } .chip:disabled { cursor: default; } /* ---------- header ---------- */ .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 18px 16px; transition: padding 360ms var(--cv-ease); } .hdr-bar { position: relative; width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 20px; border-radius: 9999px; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(90,7,96,0.05); transition: all 360ms var(--cv-ease); } html:not(.js) .hdr-bar { background: rgba(255,255,255,0.86); } .hdr.is-scrolled { padding: 10px 16px; } .hdr.is-scrolled .hdr-bar { background: rgba(255,255,255,0.86); box-shadow: 0 10px 30px -12px rgba(90,7,96,0.22), inset 0 0 0 1px rgba(90,7,96,0.06); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cv-purple-dark); font-weight: 700; font-size: 21px; line-height: 1.6; letter-spacing: -0.01em; white-space: nowrap; } .brand img { width: 26px; height: auto; display: block; } .hdr-nav { display: flex; gap: 4px; } .hdr-nav a { padding: 8px 14px; border-radius: 9999px; color: var(--cv-ink); text-decoration: none; font-size: 15px; } .hdr-nav a:hover, .hdr-nav a[aria-current="page"] { background: var(--tint); color: var(--cv-purple-bright); } .hdr-actions { display: flex; align-items: center; gap: 8px; } .menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%; background: var(--tint); color: var(--cv-purple-dark); cursor: pointer; } .menu-btn svg { display: block; } .menu-btn .x { display: none; } .hdr.is-open .menu-btn .x { display: block; } .hdr.is-open .menu-btn .bars { display: none; } @media (max-width: 900px) { .hdr-nav { display: none; } .hdr.has-menu .menu-btn { display: inline-flex; } .hdr.is-open .hdr-nav { display: flex; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 24px 48px -20px rgba(90,7,96,0.35), inset 0 0 0 1px rgba(90,7,96,0.06); } .hdr.is-open .hdr-nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; border-radius: 16px; font-size: 17px; } } @media (max-width: 420px) { .hdr-bar { gap: 8px; padding-left: 16px; } } @media (max-width: 349px) { .hdr .cta-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ---------- hero ---------- */ .hero { position: relative; padding: 140px 24px 96px; background: linear-gradient(180deg, #FFFFFF 0%, var(--blush) 100%); overflow: hidden; overflow: clip; } .hero__hex { -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); } .hero__glow { position: absolute; width: 720px; height: 720px; right: -200px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(199,154,95,0.22) 0%, rgba(150,60,134,0.10) 45%, transparent 70%); pointer-events: none; } .hero__grid { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 64px; align-items: center; } .hero__copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; } .status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px; border-radius: 9999px; background: #FFFFFF; box-shadow: var(--cv-shadow-raise); font-size: 14px; color: var(--cv-ink); } .status__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cv-gradient-brand); box-shadow: 0 0 0 4px rgba(199,154,95,0.18); } .hero h1 { font-weight: 700; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.035em; color: var(--cv-purple-dark); text-wrap: balance; } .hero__accent { font-family: var(--cv-font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.02em; background: var(--cv-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 6px; } .hero__lede { max-width: 520px; font-size: 20px; line-height: 1.55; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero__tags { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 8px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); } .hero__tags .sep { color: var(--cv-gold); } .hero__visual { position: relative; display: flex; justify-content: center; min-height: 620px; } /* Phone frame */ .phone { position: relative; width: 300px; max-width: 72vw; padding: 10px; border-radius: 54px; background: var(--cv-midnight); box-shadow: 0 60px 90px -40px rgba(90,7,96,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset; } .phone__screen { position: relative; border-radius: 44px; overflow: hidden; aspect-ratio: 417 / 900; background: var(--cv-grey-100); } .phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .phone__notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 9999px; background: var(--cv-midnight); } .phone--lg { width: 320px; max-width: 76vw; padding: 11px; border-radius: 58px; box-shadow: 0 70px 100px -44px rgba(90,7,96,0.55); } .phone--lg .phone__screen { border-radius: 47px; } .phone--lg .phone__notch { top: 21px; width: 96px; height: 28px; } /* Phase ring card (illustrative) */ .ring-card { --ph: #5A0760; position: absolute; left: 0; bottom: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 20px 16px; border-radius: 28px; background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -28px rgba(90,7,96,0.45); } .ring { position: relative; width: 208px; height: 208px; } .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .ring__seg { stroke-width: 4; opacity: 0.38; transition: opacity 600ms var(--cv-ease), stroke-width 600ms var(--cv-ease); } .ring__seg.is-on { stroke-width: 6; opacity: 1; } .ring__marker { position: absolute; inset: 0; transform: rotate(284.4deg); transition: transform 900ms var(--cv-ease-out); } .ring__marker span { position: absolute; left: 50%; top: -1px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px var(--ph), 0 4px 10px rgba(90,7,96,0.35); transition: box-shadow 600ms var(--cv-ease); } .ring__face { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 2px var(--cv-gold), 0 0 0 5px rgba(199,154,95,0.16), 0 8px 24px -10px rgba(90,7,96,0.25); } .ring__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--cv-ease); } .ring__layer.is-on { opacity: 1; } .ring__layer img { position: absolute; left: -2%; top: -4.9%; width: 104%; max-width: none; height: auto; display: block; } .ring__text { position: absolute; left: 0; right: 0; top: 13%; text-align: center; font-family: var(--cv-font-serif); font-weight: 600; color: var(--cv-black); line-height: 1.08; } .ring__name { font-size: 23px; } .ring__day { font-size: 18px; margin-top: 2px; color: var(--cv-purple-dark); } .ring__labels { position: relative; width: 100%; height: 18px; } .ring__label { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); opacity: 0; transition: opacity 700ms var(--cv-ease); } .ring__label.is-on { opacity: 1; } .ring__dots { display: flex; gap: 16px; } .ring__dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; border: 0; padding: 0; cursor: pointer; opacity: 0.45; transition: all 360ms var(--cv-ease); } .ring__dot::after { content: ""; position: absolute; inset: -8px; } .ring__dot.is-on { width: 28px; opacity: 1; } .ring__dot:disabled { cursor: default; } @media (max-width: 559px) { .ring { width: 168px; height: 168px; } .ring__name { font-size: 19px; } .ring__day { font-size: 15px; } } /* Craving card (illustrative) */ .crave { position: absolute; right: 0; top: 56px; width: 236px; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -28px rgba(90,7,96,0.45); } .crave__title { font-weight: 700; font-size: 16px; color: var(--cv-purple-dark); line-height: 1.25; } .crave__chips { display: flex; flex-wrap: wrap; gap: 6px; } .crave__note { font-size: 13px; line-height: 1.45; color: var(--cv-ink); } /* ---------- about / why ---------- */ .about__grid { gap: 56px 80px; align-items: start; } .about__copy { gap: 22px; font-size: 19px; line-height: 1.6; padding-top: 8px; } .about__copy p { text-wrap: pretty; } .quote-card { position: relative; max-width: 1200px; margin: 88px auto 0; border-radius: 50px; overflow: hidden; background: var(--cv-gradient-home-text); padding: clamp(40px, 7vw, 88px); } .quote-card p { position: relative; max-width: 900px; font-family: var(--cv-font-serif); font-style: italic; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.3; color: #FFFFFF; text-wrap: balance; } .why { padding: 40px 24px 120px; } .why__grid { gap: 48px 80px; align-items: start; border-top: 1px solid var(--line); padding-top: 72px; } .why__lead { font-family: var(--cv-font-serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.4; color: var(--cv-purple-dark); text-wrap: pretty; } .why__copy { gap: 18px; padding-top: 44px; } /* ---------- capabilities ---------- */ .mist { background: var(--cv-grey-100); } .head-note { max-width: 360px; } .caps { gap: 16px; margin-top: 56px; } .cap { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 28px; background: #FFFFFF; box-shadow: var(--cv-shadow-soft); transition: transform 360ms var(--cv-ease), box-shadow 360ms var(--cv-ease); } .cap:not(.cap--dark):hover { transform: translateY(-6px); box-shadow: 0 28px 50px -28px rgba(90,7,96,0.35); } .cap__n { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cv-gradient-gold); color: #FFFFFF; font-family: var(--cv-font-serif); font-style: italic; font-weight: 600; font-size: 18px; } .cap h3 { position: relative; margin-top: 8px; font-size: 22px; font-weight: 700; color: var(--cv-purple-dark); letter-spacing: -0.01em; } .cap p { position: relative; font-size: 16px; text-wrap: pretty; } .cap--dark { position: relative; overflow: hidden; background: var(--cv-purple-dark); color: var(--on-night); box-shadow: none; } .cap--dark h3 { color: #FFFFFF; } /* ---------- how it connects ---------- */ .head--720 { max-width: 720px; } .head--760 { max-width: 760px; } .steps-wrap { position: relative; margin-top: 64px; } .track, .track-fill { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--line); } .track-fill { background: var(--cv-gradient-brand); transform-origin: left center; } .steps { position: relative; gap: 40px 28px; } .step { display: flex; flex-direction: column; gap: 12px; } .step__n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; border: 2px solid var(--cv-purple-bright); color: var(--cv-purple-bright); font-family: var(--cv-font-serif); font-size: 22px; font-weight: 600; } .step h3 { margin-top: 12px; font-size: 22px; font-weight: 700; color: var(--cv-purple-dark); } .step p { font-size: 16px; text-wrap: pretty; } .aside { margin-top: 56px; max-width: 820px; padding: 20px 24px; border-radius: 20px; background: var(--cv-grey-100); font-size: 15px; } /* ---------- inside the app (screens carousel) ---------- */ .product { background: linear-gradient(180deg, var(--blush) 0%, #FFFFFF 100%); overflow: hidden; overflow: clip; } .screens { gap: 56px 72px; align-items: center; margin-top: 56px; } .scr-list { position: relative; display: flex; flex-direction: column; gap: 10px; } .scr { position: relative; overflow: hidden; text-align: left; display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 24px; border: 0; cursor: pointer; font: inherit; color: inherit; background: transparent; box-shadow: none; transition: all 360ms var(--cv-ease); } .scr:disabled { cursor: default; } .scr.is-on { background: #FFFFFF; box-shadow: 0 24px 48px -28px rgba(90,7,96,0.35); } .scr__n { flex: none; font-family: var(--cv-font-serif); font-style: italic; font-size: 18px; color: var(--cv-purple-muted); padding-top: 1px; } .scr.is-on .scr__n { color: var(--cv-gold); } .scr__text { display: flex; flex-direction: column; gap: 4px; } .scr__title { font-size: 20px; font-weight: 700; color: var(--cv-purple-dark); } .scr__desc { font-size: 15px; color: var(--cv-ink); opacity: 0.78; transition: opacity 360ms var(--cv-ease); } .scr.is-on .scr__desc { opacity: 1; } .scr__bar { display: none; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px; overflow: hidden; } .js .scr.is-on .scr__bar { display: block; } .scr__fill { display: block; width: 100%; height: 100%; background: var(--cv-gradient-brand); transform-origin: left center; } .is-auto .scr.is-on .scr__fill { animation: cvFill 5000ms linear forwards; } .is-auto.is-paused .scr.is-on .scr__fill, .is-auto:hover .scr.is-on .scr__fill, .is-auto:has(.scr:focus-visible) .scr.is-on .scr__fill { animation-play-state: paused; } @keyframes cvFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .scr-pause { display: none; position: absolute; top: calc(100% + 8px); left: 14px; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid #E6DDE6; border-radius: 9999px; background: rgba(255,255,255,0.7); color: var(--cv-ink); font: inherit; font-size: 14px; cursor: pointer; } .scr-pause:hover { background: #FFFFFF; color: var(--cv-purple-bright); } .is-auto .scr-pause { display: inline-flex; } .scr-pause .play { display: none; } .is-paused .scr-pause .play { display: block; } .is-paused .scr-pause .pause { display: none; } .scr-stage { display: flex; justify-content: center; } .scr-img { opacity: 0; transform: scale(1.04); transition: opacity 600ms var(--cv-ease), transform 900ms var(--cv-ease-out); } .scr-img.is-on { opacity: 1; transform: scale(1); } /* ---------- philosophy ---------- */ .pair { gap: 20px; margin-top: 56px; } .pair--tight { margin-top: 20px; } .panel { padding: 36px; border-radius: 32px; } .panel--glass { background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); } .panel--white { background: #FFFFFF; color: var(--cv-ink); } .lines { margin-top: 16px; } .lines li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid rgba(242,233,242,0.14); } .lines--away li { color: var(--on-night-soft); } .panel--white .lines li { border-top-color: var(--line); } .lines--involve { margin-top: 12px; } .lines--involve li { padding: 15px 0; } /* ---------- market ---------- */ .mk { display: flex; flex-direction: column; gap: 16px; padding: 40px; border-radius: 32px; } .mk--today { background: var(--cv-grey-200); } .mk--sits { position: relative; overflow: hidden; background: var(--cv-gradient-home-text); color: #FFFFFF; } .mk--sits > :not(.hex) { position: relative; } /* ---------- boundaries ---------- */ .head-note--wide { max-width: 420px; } .bounds { gap: 16px; margin-top: 56px; } .bound { display: flex; gap: 16px; padding: 26px; border-radius: 24px; background: #FFFFFF; box-shadow: var(--cv-shadow-soft); } .bound__n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--cv-purple-bright); font-family: var(--cv-font-serif); font-style: italic; font-size: 14px; font-weight: 600; } .bound p { font-size: 16px; text-wrap: pretty; } .bound strong { color: var(--cv-purple-dark); } .note { margin-top: 28px; padding: 22px 26px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E6DDE6; font-size: 15px; max-width: 980px; } .note strong { color: var(--cv-purple-dark); } /* ---------- data ---------- */ .data__grid { gap: 48px 80px; align-items: center; } .checks { display: flex; flex-direction: column; gap: 10px; } .checks li { display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-radius: 20px; background: var(--cv-grey-100); } .checks__i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cv-purple-bright); } /* ---------- where we are today ---------- */ .today { padding: 0 24px 120px; } .today-card { position: relative; max-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 50px; background: var(--cv-purple-dark); color: var(--on-night); padding: clamp(36px, 6vw, 72px); } .today-card > :not(.hex) { position: relative; } .stages { position: relative; margin-top: 40px; } .stages .track, .stages .track-fill { top: 9px; background: rgba(242,233,242,0.16); } .stages .track-fill { right: auto; width: 34%; background: var(--cv-gold); } .stages ul { position: relative; gap: 32px; } .stage { display: flex; flex-direction: column; gap: 10px; } .stage__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--cv-purple-dark); box-shadow: inset 0 0 0 2px rgba(242,233,242,0.5); } .stage__dot--now { background: var(--cv-gold); box-shadow: 0 0 0 6px rgba(199,154,95,0.25); } .stage__t { margin-top: 14px; font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.6; color: #FFFFFF; letter-spacing: -0.02em; } .stage .kicker { color: var(--on-night-soft); } .stage .kicker--gold, .today-cols .kicker { color: var(--cv-gold); } .today-cols { gap: 32px 56px; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(242,233,242,0.14); } .today-cols > div { display: flex; flex-direction: column; gap: 10px; } /* ---------- clinicians ---------- */ .head--860 { max-width: 860px; } .gap-quote { margin-top: 12px; font-family: var(--cv-font-serif); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; color: #FFFFFF; text-wrap: pretty; } .dark .kicker--gold { color: var(--cv-gold); } .needs { gap: 12px; margin-top: 20px; } .need { display: flex; gap: 16px; padding: 22px 24px; border-radius: 24px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); } .need__n { flex: none; font-family: var(--cv-font-serif); font-style: italic; color: var(--cv-gold); font-size: 18px; } .need span:last-child { font-size: 16px; text-wrap: pretty; } .ask { display: flex; flex-direction: column; gap: 16px; padding: 40px; } .ask h3 { font-size: 28px; font-weight: 700; color: var(--cv-purple-dark); letter-spacing: -0.02em; } .ask strong { color: var(--cv-purple-bright); } .ask__quote { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--cv-font-serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--cv-purple-dark); } .involve { padding: 40px; } .questions { gap: 28px 48px; margin-top: 24px; } .questions li { padding-left: 20px; border-left: 2px solid var(--cv-gold); font-family: var(--cv-font-serif); font-style: italic; font-size: 19px; line-height: 1.5; color: #FFFFFF; text-wrap: pretty; } /* ---------- contact ---------- */ .contact-card { position: relative; max-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 50px; background: var(--cv-gradient-home-text); color: #FFFFFF; padding: clamp(40px, 7vw, 88px); display: grid; gap: 48px; align-items: end; } .contact-card > :not(.hex) { position: relative; } .contact-card__main { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .contact-card__logo { width: 56px; height: auto; display: block; filter: brightness(0) invert(1); } .contact-card h2 { font-weight: 700; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; color: #FFFFFF; } .contact-card__main p { max-width: 520px; font-size: 18px; text-wrap: pretty; } .contact-box { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: 28px; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); } .contact-box__who { margin-top: 6px; font-size: 22px; font-weight: 700; } .grad a, .grad a:hover { color: #FFFFFF; } .grad .btn:hover { color: #FFFFFF; } /* ---------- footer ---------- */ .site-footer { background: var(--night); color: var(--on-night-soft); padding: 56px 24px 40px; font-size: 15px; } .site-footer__in { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; } .site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; } .site-footer__org { display: flex; flex-direction: column; gap: 6px; max-width: 560px; } .site-footer__brand { display: flex; align-items: center; gap: 10px; color: #FFFFFF; font-weight: 700; font-size: 20px; } .site-footer__brand img { width: 24px; height: auto; display: block; } .site-footer__org a { align-self: flex-start; } .site-footer__org strong { margin-top: 10px; color: #FFFFFF; font-weight: 600; } .site-footer a, .site-footer a:hover { color: #FFFFFF; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; align-content: flex-start; } .site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; } .site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(199,154,95,0.4); font-size: 13px; } .site-footer__base .tm { max-width: 640px; } /* ---------- document pages (support, privacy, terms, 404) ---------- */ .doc { position: relative; padding: 140px 24px 112px; background: linear-gradient(180deg, #FFFFFF 0%, var(--blush) 100%); } .doc::before { content: ""; position: absolute; inset: 0; background-image: var(--hex-light); background-size: 168px 97px; pointer-events: none; } .doc .wrap { position: relative; max-width: 780px; margin: 0 auto; } .doc .label { font-family: var(--cv-font-serif); font-style: italic; font-size: 18px; color: var(--gold-ink); } .doc h1 { margin-top: 10px; font-weight: 700; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; color: var(--cv-purple-dark); text-wrap: balance; } .doc .meta { margin: 16px 0 32px; color: #5F6264; } .doc h2 { margin: 44px 0 12px; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--cv-purple-dark); } .doc p, .doc li { max-width: 62ch; } .doc p + p { margin-top: 12px; } .doc strong { font-weight: 600; } .doc ul, .doc ol { margin: 12px 0; padding-left: 1.3rem; display: grid; gap: 6px; } .doc li::marker { color: var(--cv-purple-bright); } .whois { display: grid; gap: 4px; margin: 24px 0 20px; padding: 22px 26px; border-radius: 20px; background: #FFFFFF; box-shadow: var(--cv-shadow-soft), inset 0 0 0 1px #E6DDE6; } .whois dt { font-weight: 600; color: var(--cv-purple-dark); } .whois dd { margin: 0 0 8px; } .whois dd:last-child { margin-bottom: 0; } .path { font-family: var(--cv-font-serif); font-weight: 600; color: var(--cv-purple-dark); } /* ---------- reveal on scroll (only once site.js has run) ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 900ms var(--cv-ease-out), transform 900ms var(--cv-ease-out); } .js [data-grow] { transform: scaleX(0); transition: transform 1600ms var(--cv-ease-out) 200ms; } .js [data-reveal].is-in { opacity: 1; transform: none; } .js [data-grow].is-in { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; } .js [data-reveal] { opacity: 1; transform: none; } .js [data-grow] { transform: none; } .cap:not(.cap--dark):hover { transform: none; } .scr__fill { animation: none !important; } .scr-img { transform: none; } } @media print { .hdr { position: static; } .js [data-reveal], .js [data-grow] { opacity: 1; transform: none; } }