/* ============================================================ Clinically AI — LEAN build layer (v5.0-lean) Loads AFTER style.css and alt.css. Responsibilities: 1) force dark-only (no toggle in this build) 2) the roadmap hero (gradient rebuilt from banner-5a, no bitmap) 3) the 8-product roadmap grid + product marks 4) the DNA substrate band 5) trimmed-page helpers ============================================================ */ /* ---------- 1. Dark only ---------- */ /* data-theme="dark" is hard-set on ; the toggle is removed from markup. These rules are belt-and-braces so a stray toggle can never light-mode the build. */ .theme-toggle-wrap, .theme-toggle { display: none !important; } :root { /* hero gradient stops, sampled directly from Bryant's banner-5a render */ --h0: #15132f; --h1: #191640; --h2: #1f1a4c; --h3: #281f5d; --h4: #342470; --h5: #422a86; --h6: #503098; --h7: #4a2a86; --bloom: 138, 62, 186; /* deep violet bottom-centre bloom */ --glass: rgba(255, 255, 255, .10); --glass-line: rgba(255, 255, 255, .22); --glass-line-hi: rgba(255, 255, 255, .42); } /* ---------- 2. Roadmap hero ---------- */ .lhero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 54px 0 84px; /* Base vertical gradient. Resolves INTO the page background at 100% so the hero has no bitmap edge and no hard seam against the body — the v4.6 background-position lesson, taken one step further: no image at all. */ background: radial-gradient(120% 60% at 50% 106%, rgba(var(--bloom), .62) 0%, rgba(var(--bloom), .34) 28%, rgba(96, 44, 156, .24) 48%, rgba(96, 44, 156, 0) 72%), linear-gradient(180deg, var(--h0) 0%, var(--h0) 42%, var(--h1) 54%, var(--h2) 62%, var(--h3) 70%, var(--h4) 78%, var(--h5) 85%, var(--h6) 92%, var(--h7) 97%, #150726 100%); } /* soft vignette so the bloom reads as light, not as a band */ .lhero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(78% 96% at 50% 42%, transparent 46%, rgba(12, 5, 26, .34) 100%); } .lhero > .container { position: relative; z-index: 3; } /* the wave current — JS-drawn SVG, same generator as banner-5a */ .lhero-waves { position: absolute; left: -2%; right: -2%; bottom: -4px; width: 104%; height: clamp(230px, 36vh, 400px); z-index: 1; opacity: .62; pointer-events: none; } .lhero-head { max-width: 60rem; margin: 0 auto 30px; text-align: center; } .lhero h1 { margin: 0 0 14px; font-size: clamp(1.95rem, 4.1vw, 3.05rem); line-height: 1.14; letter-spacing: -.015em; text-wrap: balance; /* gradient display heading, matching alt.css's warm treatment on dark surfaces */ background: var(--text-grad-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: .06em; transform: translateZ(0); /* keeps Chromium from painting clip-text solid */ } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .lhero h1 { color: #fff; -webkit-text-fill-color: #fff; } } .lhero .lhero-lead { margin: 0 auto; max-width: 62ch; color: rgba(255, 255, 255, .86); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.55; } .lhero-cta { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- 3. The roadmap grid ---------- */ .rmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 3; } .rmap-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 16px 12px 14px; min-height: 138px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-decoration: none; color: #fff; text-align: center; transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s ease, border-color .22s ease, box-shadow .22s ease; } /* alt.css sets [data-theme="dark"] a{color:#E7A6EE}, which outranks a bare .rmap-tile rule — so the tile's own colour has to be stated at the same specificity or the product names inherit link-pink. */ [data-theme="dark"] a.rmap-tile, [data-theme="dark"] a.rmap-tile:hover { color: #fff; } .rmap-tile:hover, .rmap-tile:focus-visible { transform: translateY(-4px); background: rgba(255, 255, 255, .16); border-color: var(--glass-line-hi); box-shadow: 0 14px 30px rgba(12, 5, 26, .34); text-decoration: none; } .rmap-mark { width: 46px; height: 46px; flex: none; } .rmap-mark svg { width: 100%; height: 100%; display: block; } .rmap-name { font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; margin-top: 4px; white-space: nowrap; } .rmap-tag { font-family: var(--font-body); padding-bottom: 8px; font-size: .78rem; line-height: 1.28; color: rgba(255, 255, 255, .88); max-width: 15ch; } /* status is real roadmap information, so it is encoded, not decorative */ .rmap-status { margin-top: auto; /* chips align on one baseline regardless of tag wrap */ font-family: var(--font-body); font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .rmap-status--available { background: rgba(255, 255, 255, .92); color: #3b1c4a; } .rmap-status--launching { background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .5); } .rmap-legend { margin: 20px auto 0; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: .84rem; color: rgba(255, 255, 255, .8); position: relative; z-index: 3; } .rmap-legend span { display: inline-flex; align-items: center; gap: 8px; } .rmap-legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .rmap-legend .lg-a { background: #fff; } .rmap-legend .lg-b { background: transparent; border: 1.5px solid rgba(255, 255, 255, .7); } .rmap-legend .lg-c { background: linear-gradient(90deg, #FFBB51, #EF8819); } /* mark entry draw — one orchestrated page-load sequence, then still */ @media (prefers-reduced-motion: no-preference) { /* :not(.mark-hover) keeps the entry draw and the hover pull-back from competing in the cascade — they are mutually exclusive states, so neither needs to out-specify the other. */ .rmap-tile:not(.mark-hover) .rmap-mark .mk-s { stroke-dasharray: 100; stroke-dashoffset: 100; animation: markDraw .9s cubic-bezier(.5, 0, .3, 1) forwards; animation-delay: calc(var(--i, 0) * 90ms + 260ms); } .rmap-tile .rmap-mark .mk-d { opacity: 0; animation: markDot .4s ease forwards; animation-delay: calc(var(--i, 0) * 90ms + 900ms); } @keyframes markDraw { to { stroke-dashoffset: 0; } } @keyframes markDot { to { opacity: 1; } } } /* ---------- 4. DNA substrate band ---------- */ .dnaband { position: relative; padding: 84px 0; background: radial-gradient(64% 48% at 50% 0%, rgba(231, 70, 178, .16), transparent 68%), var(--bg); overflow: hidden; } .dnaband-grid { display: grid; grid-template-columns: 210px 1fr; gap: 48px; align-items: center; } .dnaband-mark { width: 100%; max-width: 210px; filter: drop-shadow(0 0 26px rgba(199, 88, 224, .38)); } .dnaband-mark svg { width: 100%; height: auto; display: block; } .dnaband h2 { margin-top: 0; } .dnaband .lead { max-width: 58ch; } .dnaband-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; } .dnaband-list li { position: relative; padding-left: 22px; color: rgba(241, 233, 247, .8); font-size: .97rem; } .dnaband-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--grad-brand); } @media (prefers-reduced-motion: no-preference) { .dnaband-mark svg { animation: dnaTurn 14s linear infinite; transform-origin: 50% 50%; } @keyframes dnaTurn { to { transform: rotate(360deg); } } } /* ---------- 5. Product detail rows (products.html) ---------- */ .prow { padding: 0 0 6px; } .prow-item { display: grid; grid-template-columns: 108px 1fr; gap: 30px; align-items: start; padding: 34px 0; border-top: 1px solid var(--line); } .prow-item:first-child { border-top: 0; } .prow-mark { width: 92px; height: 92px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); } .prow-mark svg { width: 62px; height: 62px; } .prow-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; } .prow-head h3 { margin: 0; font-size: 1.42rem; color: var(--plum); } .prow-role { font-size: .84rem; color: var(--muted); font-weight: 600; } .prow-body { color: rgba(241, 233, 247, .78); max-width: 68ch; margin: 0 0 12px; } .prow-bul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; } .prow-bul li { font-size: .82rem; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: rgba(241, 233, 247, .82); } .prow-status { font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .prow-status--available { background: var(--grad-brand); color: #fff; } .prow-status--launching { border: 1px solid rgba(255, 255, 255, .38); color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .07); } /* ---------- 6. Small shared pieces ---------- */ .lean-quote { margin: 0 auto; max-width: 46rem; text-align: center; } .lean-quote blockquote { margin: 0 0 12px; font-family: var(--font-head); font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.38; color: #F3ECF7; } .lean-quote cite { font-style: normal; color: var(--muted); font-size: .92rem; } .lean-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 8px; } .lean-strip span { font-size: .8rem; letter-spacing: .04em; padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .9); } /* ---------- 7. Responsive ---------- */ @media (max-width: 1080px) { .rmap { gap: 10px; } .rmap-tile { min-height: 130px; padding: 14px 8px 12px; } .rmap-tag { font-size: .73rem; } } @media (max-width: 900px) { .rmap { grid-template-columns: repeat(2, 1fr); } .lhero { padding: 44px 0 70px; } .dnaband-grid { grid-template-columns: 1fr; gap: 28px; } .dnaband-mark { max-width: 148px; } .dnaband-list { grid-template-columns: 1fr; } .prow-item { grid-template-columns: 72px 1fr; gap: 20px; } .prow-mark { width: 66px; height: 66px; border-radius: 14px; } .prow-mark svg { width: 44px; height: 44px; } /* the wave current would sit behind the tiles on narrow screens — pull it down */ .lhero-waves { height: 190px; opacity: .38; } } @media (max-width: 560px) { .rmap { gap: 8px; } .rmap-tile { min-height: 124px; } .rmap-name { font-size: .68rem; } .rmap-mark { width: 38px; height: 38px; } .lhero-cta .btn { width: 100%; text-align: center; } } /* ---------- 8. Quality floor ---------- */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid #FFBB51; outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { /* The wave field is still drawn, just not animated — lean-hover.js renders one static frame. Reduced motion means no movement, not no graphic. */ .lhero-waves { opacity: .5; } .rmap-tile { transition: none; } .rmap-tile:hover { transform: none; } } /* ---------- 9. Careers callouts ---------- */ /* Full band — about.html and any page where careers deserves real weight. */ .hiring .hiring-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 44px; align-items: center; } .hiring h2 { margin-top: 0; } .hiring .lead { max-width: 56ch; margin-bottom: 0; } .hiring-cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .hiring-cta .btn { text-align: center; } /* Slim strip — homepage stays product-led, so careers is present but quiet. */ .hiring-strip { padding: 22px 0; background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hiring-strip-in { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; } .hiring-strip p { margin: 0; color: var(--ink); font-size: 1.02rem; } .hiring-strip-links { display: inline-flex; gap: 22px; flex-wrap: wrap; align-items: center; } .hiring-strip-links a { font-weight: 700; font-size: .96rem; color: var(--purple); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; } .hiring-strip-links a:hover, .hiring-strip-links a:focus-visible { text-decoration: none; border-bottom-color: currentColor; } @media (max-width: 900px) { .hiring .hiring-grid { grid-template-columns: 1fr; gap: 26px; } .hiring-cta { flex-direction: row; flex-wrap: wrap; } .hiring-cta .btn { flex: 1 1 auto; } .hiring-strip-in { flex-direction: column; align-items: flex-start; } } /* ---------- 10. Brand logo sizing ---------- The real asset (329x90) puts a full-height mark next to the wordmark, so at style.css's 38px cap the wordmark reads noticeably smaller than a text-only logo would at the same height. Given a 74px nav, a little more room balances it without crowding. width stays auto, so the ratio is never forced. */ .site-header .brand img { max-height: 46px; } .foot-brand .brand img { max-height: 48px; } @media (max-width: 560px) { .site-header .brand img { max-height: 38px; } } /* ============================================================ 11. NAVIGATION — lighter weight, all caps ============================================================ */ .nav-menu > li > a { font-family: var(--font-body); font-weight: 400; /* was 600/700 via inherited nav styling */ font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: rgba(255, 255, 255, .82); transition: color .18s ease; } .nav-menu > li > a:hover, .nav-menu > li > a:focus-visible { color: #fff; text-decoration: none; } [data-theme="dark"] .nav-menu > li > a { color: rgba(255, 255, 255, .82); } [data-theme="dark"] .nav-menu > li > a:hover { color: #fff; } .nav-actions .login { font-family: var(--font-body); font-weight: 400; font-size: .86rem; letter-spacing: .11em; text-transform: uppercase; } .nav-menu { gap: 26px; } @media (max-width: 1180px) { .nav-menu { gap: 18px; } .nav-menu > li > a { letter-spacing: .07em; } } /* ============================================================ 12. PRODUCT MARK HOVER The design system's own hover state: every stroke pulls back a little and settles. .mark-hover is set by lean-motion.js so it never collides with the page-load draw-in. ============================================================ */ @keyframes markPullBack { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 12; } } @media (prefers-reduced-motion: no-preference) { .rmap-tile.mark-hover .rmap-mark .mk-s { stroke-dasharray: 100; animation: markPullBack 1.6s ease-in-out infinite; } /* the solid accent dot lifts with the stroke */ .rmap-tile .rmap-mark .mk-d { transition: transform .3s ease; } .rmap-tile.mark-hover .rmap-mark { transform: scale(1.06); } .rmap-mark { transition: transform .28s cubic-bezier(.4, 0, .2, 1); } } /* ============================================================ 13. MOOD SECTIONS — photo + semi-opaque purple/orange scrims Every band takes a background image and one of three tinted overlays. Swap the image with --img; the scrim stays consistent. ============================================================ */ .mood { position: relative; overflow: hidden; isolation: isolate; padding: 96px 0; color: #fff; } .mood-bg { position: absolute; inset: -12% 0; z-index: 0; background-image: var(--img); background-size: cover; /* background-position, never transform:scale — a scaled bitmap can expose its own edge, which is what bit the v4.6 hero. */ background-position: center center; background-repeat: no-repeat; background-color: #241033; will-change: transform; } .mood-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* purple — the default enterprise mood */ .mood--purple .mood-scrim { background: linear-gradient(180deg, rgba(20, 8, 40, .70) 0%, rgba(32, 12, 58, .46) 50%, rgba(20, 8, 40, .78) 100%), radial-gradient(80% 60% at 22% 30%, rgba(148, 78, 226, .40), transparent 72%); } /* orange — warmth, used for people/careers/outcome bands */ .mood--orange .mood-scrim { background: linear-gradient(180deg, rgba(38, 14, 26, .68) 0%, rgba(58, 22, 20, .42) 48%, rgba(26, 8, 32, .80) 100%), radial-gradient(78% 62% at 74% 34%, rgba(239, 136, 25, .40), transparent 74%); } /* duotone — purple into orange, for the widest full-bleed bands */ .mood--duo .mood-scrim { background: linear-gradient(115deg, rgba(20, 8, 40, .76) 0%, rgba(58, 23, 69, .52) 42%, rgba(120, 50, 40, .40) 78%, rgba(26, 8, 32, .74) 100%), radial-gradient(60% 70% at 84% 70%, rgba(239, 136, 25, .34), transparent 72%); } .mood > .container { position: relative; z-index: 2; } .mood h2 { color: #fff; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 3px 26px rgba(0, 0, 0, .5); margin-top: 0; } .mood .lead, .mood p { color: rgba(255, 255, 255, .9); } .mood--tall { padding: 104px 0; } .mood--center { text-align: center; } .mood--center .lead { margin-left: auto; margin-right: auto; } /* subpage hero over a photo */ .lhero--photo .lhero-bg { position: absolute; inset: -10% 0; z-index: 0; background-image: var(--img); background-size: cover; background-position: center 32%; background-color: #241033; } .lhero--photo .lhero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(14, 4, 32, .86) 0%, rgba(26, 10, 48, .66) 46%, rgba(26, 8, 48, .94) 100%), radial-gradient(70% 60% at 26% 24%, rgba(160, 70, 219, .38), transparent 72%); } .lhero--photo { padding: 92px 0 78px; background: #1a0830; } .lhero--photo .lhero-head { text-align: left; margin-left: 0; max-width: 46rem; } .lhero--photo .lhero-lead { margin-left: 0; } @media (max-width: 900px) { .mood { padding: 68px 0; } .mood--tall { padding: 84px 0; } .lhero--photo { padding: 64px 0 56px; } } @media (prefers-reduced-motion: reduce) { .mood-bg { inset: 0; transform: none !important; } } /* ---------- 14. Third status tier + roadmap build order ---------- */ .rmap-status--rolling { background: var(--grad-cta); color: #3a1f04; } .rmap-status--roadmap { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .42); } .prow-status--rolling { background: var(--grad-cta); color: #3a1f04; } .prow-status--roadmap { border: 1px solid rgba(255, 255, 255, .38); color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .07); } /* build-order badge — numbering is justified here because the roadmap genuinely is a sequence, not a decorative list */ .prow-mark { position: relative; } .prow-seq { position: absolute; top: -9px; left: -9px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: .78rem; color: #fff; background: var(--grad-brand); box-shadow: 0 4px 12px rgba(8, 3, 18, .5); } .rmap-legend { gap: 18px; } /* ============================================================ 15. v8 review notes ============================================================ */ /* --- 10px breathing room under badge pills in card grids --- Covers both the numbered "five things" cards (01–05) and the Map / Ask / Verify cards; both use +

. */ .card .pill + h3 { margin-top: 10px; } /* --- taller claim band (About) --- */ .pbh--taller { min-height: calc(clamp(300px, 38vh, 430px) + 150px); padding: 35px 0; } /* --- centred data-viz claim band (Platform) --- */ .mood--dviz { padding: 92px 0; } .mood--dviz .container { max-width: 900px; } .mood--dviz h2 { margin-bottom: 14px; } .mood--dviz .lead { max-width: 60ch; } /* ============================================================ 16. Navigation — deep purple gradient over black, PRODUCTS menu ============================================================ */ .site-header { position: sticky; background: #0a0414; border-bottom: 1px solid rgba(255, 255, 255, .10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Purple lives on its own layer so its opacity can be scrubbed with scroll. style.css's .site-header.scrolled rule repaints the background outright, which is why a background-image gradient vanished the moment main.js added .scrolled at 20px. --nav-purple is set by lean-hover.js: 1 at the top of the page, 0 once past the fold, and back again on the way up. */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--nav-purple, 1); transition: opacity .25s linear; background: linear-gradient(90deg, rgba(124, 46, 168, .72) 0%, rgba(74, 26, 112, .40) 12%, rgba(10, 4, 20, 0) 34%, rgba(10, 4, 20, 0) 66%, rgba(74, 26, 112, .40) 88%, rgba(124, 46, 168, .72) 100%), radial-gradient(28% 220% at 0% 50%, rgba(168, 88, 240, .40), transparent 70%), radial-gradient(28% 220% at 100% 50%, rgba(221, 86, 159, .34), transparent 70%); } .site-header > .container { position: relative; z-index: 1; } /* keep the scrolled state from wiping the layer underneath */ .site-header.scrolled { background: rgba(14, 5, 26, .92); } [data-theme="dark"] .site-header { background-color: #0a0414; } /* --- products dropdown --- */ .nav-menu { position: relative; } .has-menu { position: relative; } /* No caret glyph on PRODUCTS. The border-drawn chevron broke out of the nowrap link and painted as a stray mark under the label; the submenu is discoverable on hover and focus without it. */ .submenu { position: absolute; top: 100%; left: -14px; min-width: 268px; margin: 0; padding: 10px; list-style: none; border-radius: 16px; background: linear-gradient(180deg, rgba(38, 14, 62, .98), rgba(16, 6, 30, .99)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 26px 54px rgba(6, 2, 16, .62); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 90; } .has-menu:hover > .submenu, .has-menu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); } .submenu li { margin: 0; } .submenu a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; text-decoration: none; font-family: var(--font-body); font-weight: 400; font-size: .9rem; letter-spacing: .01em; text-transform: none; color: rgba(255, 255, 255, .88); transition: background .16s ease, color .16s ease; } .submenu a:hover, .submenu a:focus-visible { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; } .submenu .sm-mark { width: 24px; height: 24px; flex: none; } .submenu .sm-mark svg { width: 100%; height: 100%; display: block; } .submenu .sm-tag { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .26); } .submenu .sm-sep { height: 1px; margin: 8px 6px; background: rgba(255, 255, 255, .12); } .submenu .sm-all { font-weight: 700; color: #FFBB51; } @media (max-width: 900px) { /* no hover on touch: the submenu becomes part of the stacked menu */ .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255, 255, 255, .04); border: 0; min-width: 0; margin: 6px 0 2px; } } /* --- nav fits six items + actions without wrapping --- Adding For Independents pushed the bar to two lines at 1440px. Links and the demo button never wrap; spacing and tracking tighten as width drops. */ .nav-menu > li > a, .nav-actions .login, .nav-actions .btn { white-space: nowrap; } .nav { gap: 20px; } .nav-menu { gap: 20px; margin-left: 4px; } .nav-menu > li > a { font-size: .82rem; letter-spacing: .075em; } .nav-actions { gap: 16px; display: flex; align-items: center; } .nav-actions .btn { padding: 12px 22px; font-size: .92rem; } @media (max-width: 1400px) { .nav-menu { gap: 15px; } .nav-menu > li > a { letter-spacing: .045em; font-size: .79rem; } .nav-actions .btn { padding: 11px 18px; font-size: .88rem; } } @media (max-width: 1180px) and (min-width: 901px) { .nav-menu { gap: 11px; } .nav-menu > li > a { letter-spacing: .015em; font-size: .76rem; } .nav-actions .login { display: none; } /* Login also lives in the footer */ } /* ============================================================ 17. "A Fully Connected Suite" — 140px shorter The stage is bottom-aligned inside .mon, so trimming the section height closes the gap between the title and the device graphics one-for-one. Base rule is clamp(330px, calc(74vh - 300px), 460px). ============================================================ */ .mon { min-height: clamp(190px, calc(74vh - 440px), 320px); } @media (max-width: 820px) { .mon { min-height: 455px; } } /* ============================================================ 18. Footer social links ============================================================ */ .foot-social { display: flex; gap: 10px; margin-top: 20px; } .foot-social a { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .foot-social a:hover, .foot-social a:focus-visible { color: #fff; background: var(--grad-brand); border-color: transparent; transform: translateY(-2px); text-decoration: none; } .foot-social svg { width: 19px; height: 19px; display: block; } /* The 140px comes out of the space ABOVE the devices, not the devices themselves: style.css gives .mon-title a 100px top margin and 40px bottom, and lifts the monitor 85px off the floor. Trimming those three by 80 + 20 + 40 shortens the band by 140px without cropping either graphic. */ .mon-title { margin-top: 20px; margin-bottom: 20px; } .mon-item--screen { margin-bottom: 45px; } @media (max-width: 820px) { .mon-title { margin-top: 16px; margin-bottom: 16px; } } /* brighter, gradient-filled careers link in the footer */ .site-footer .foot-hiring { background: linear-gradient(90deg, #FFD79A 0%, #FFBB51 38%, #F58A3C 72%, #FF6FA8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .site-footer .foot-hiring { color: #FFBB51; -webkit-text-fill-color: #FFBB51; } } .site-footer .foot-hiring:hover { filter: brightness(1.15); text-decoration: none; } /* ============================================================ 19. Photo-texture section strip Keeps .section so alt.css's gradient-h2 treatment still applies, and layers a photo plus a semi-opaque purple scrim beneath. ============================================================ */ .section--photo { position: relative; overflow: hidden; isolation: isolate; background: transparent; } /* [data-theme="dark"] .section sets a flat background at (0,1,1), which would paint straight over the photo — match that specificity to opt out. */ [data-theme="dark"] .section--photo { background: transparent; } .section--photo > .container { position: relative; z-index: 2; } .sp-bg { position: absolute; inset: -10% 0; z-index: 0; background-image: var(--img); background-size: cover; background-position: center 38%; background-repeat: no-repeat; background-color: #241033; will-change: transform; } .sp-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(20, 8, 40, .90) 0%, rgba(38, 14, 68, .74) 46%, rgba(18, 7, 36, .92) 100%), radial-gradient(72% 62% at 26% 28%, rgba(148, 78, 226, .34), transparent 72%); } @media (prefers-reduced-motion: reduce) { .sp-bg { inset: 0; transform: none !important; } } /* ============================================================ 20. Platform: 20px of air before the org/leader/clinician/care scroll animation ============================================================ */ .tlt-section .tlt-scroll { margin-top: 20px; } /* cards over the photo strip need a firmer backing than the flat-dark default, or the photograph reads through the body copy */ [data-theme="dark"] .section--photo .card { background: rgba(22, 9, 42, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .16); } /* ---------- ABOUT submenu: plain text list, right-aligned ---------- */ .submenu--plain { min-width: 236px; } .submenu--plain a { padding: 10px 12px; } /* the About item sits near the right edge, so its panel opens inward */ .submenu--right { left: auto; right: -14px; } .sm-ext { margin-left: auto; font-size: .8rem; opacity: .6; } .submenu a:hover .sm-ext { opacity: 1; } /* scroll-margin so #life doesn't land under the sticky header */ #life { scroll-margin-top: 92px; } @media (max-width: 900px) { .submenu--right { right: auto; left: 0; } } /* ============================================================ 21. Animated DNA — 3D ribbon that comes apart and rebuilds Depth-sorted filled ribbons (see products_data.dna_helix), so the animation works on whole pieces rather than stroke dashes. No gradients: fills are pre-shaded per piece at build time. ============================================================ */ .dnax { width: 100%; height: auto; display: block; overflow: visible; } .dnax-piece, .dnax-rung { transform-box: fill-box; transform-origin: center; } .dnax-piece path { shape-rendering: geometricPrecision; } @media (prefers-reduced-motion: no-preference) { /* ribbon pieces peel away from the axis, then settle back */ .dnax-piece { animation: dnaxPiece 10s cubic-bezier(.45, 0, .35, 1) infinite; animation-delay: calc(var(--i, 0) * 90ms); } @keyframes dnaxPiece { 0%, 20% { opacity: 1; transform: translateX(0) scale(1); } 40%, 54% { opacity: 0; transform: translateX(calc(var(--i, 0) * 3px - 10px)) scale(.82); } 76%, 100% { opacity: 1; transform: translateX(0) scale(1); } } /* base pairs scatter outward and spin, then snap back in sequence */ .dnax-rung { animation: dnaxRung 10s cubic-bezier(.45, 0, .35, 1) infinite; animation-delay: calc(var(--i, 0) * 52ms); } @keyframes dnaxRung { 0%, 18% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 38%, 56% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, 0)) rotate(var(--r, 40deg)) scale(.4); } 78%, 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } } /* slow sway rather than a spin, so it reads as a living structure */ .dnax-sway { transform-box: fill-box; transform-origin: center; animation: dnaxSway 13s ease-in-out infinite; } @keyframes dnaxSway { 0%, 100% { transform: rotate(-6deg) scale(.98); } 50% { transform: rotate(6deg) scale(1.02); } } } /* the band that holds it */ .dnaband-mark { filter: drop-shadow(0 14px 34px rgba(120, 30, 160, .42)); } .dnaband-mark .dnax { max-height: 320px; margin: 0 auto; } .dnaband-mark svg { animation: none !important; } @media (max-width: 900px) { .dnaband-mark .dnax { max-height: 210px; } } /* ============================================================ 22. Open-roles feed ============================================================ */ .jobs-feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .jf-row { border-bottom: 1px solid var(--line); } .jf-row > a { display: flex; align-items: center; gap: 20px; padding: 20px 6px; text-decoration: none; transition: background .16s ease, padding-left .16s ease; } .jf-row > a:hover, .jf-row > a:focus-visible { background: rgba(255, 255, 255, .04); padding-left: 14px; text-decoration: none; } .jf-title { font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; color: #F3ECF7; flex: 1 1 auto; min-width: 0; } .jf-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .jf-dept { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: rgba(255, 255, 255, .78); white-space: nowrap; } .jf-loc { font-size: .9rem; color: var(--muted); white-space: nowrap; } .jf-go { color: var(--purple); font-size: 1.05rem; flex: none; } .jf-note { margin-top: 20px; font-size: .93rem; color: var(--muted); } @media (max-width: 720px) { .jf-row > a { flex-direction: column; align-items: flex-start; gap: 9px; } .jf-meta { justify-content: flex-start; } .jf-go { display: none; } .jf-loc { white-space: normal; } } /* exec-narrative kicker line */ .lean-kicker { margin: 34px auto 0; max-width: 62ch; text-align: center; font-family: var(--font-head); font-size: clamp(1.02rem, 1.9vw, 1.24rem); line-height: 1.44; color: #F3ECF7; } .mood .lean-kicker { color: #fff; } /* ============================================================ 23. Products page depth ============================================================ */ .prow-item--deep { padding: 42px 0; align-items: start; } .prow-main { min-width: 0; } .prow-lede { font-family: var(--font-head); font-size: clamp(1.02rem, 1.7vw, 1.16rem); line-height: 1.46; color: #F0E7F6; max-width: 66ch; margin: 0 0 18px; } .prow-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; } .prow-points li { position: relative; padding-left: 20px; max-width: 74ch; color: rgba(241, 233, 247, .76); font-size: .97rem; line-height: 1.55; } .prow-points li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); } .prow-points strong { color: #F3ECF7; font-weight: 700; } .prow-scope { margin: 0 0 18px; padding: 12px 15px; border-left: 2px solid var(--purple); background: rgba(255, 255, 255, .04); border-radius: 0 10px 10px 0; font-size: .9rem; color: var(--muted); max-width: 72ch; } .pfacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .pfact { display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); min-width: 128px; } .pfact-n { font-family: var(--font-head); font-weight: 700; font-size: 1.16rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .pfact-l { font-size: .78rem; color: var(--muted); line-height: 1.3; } /* value chain */ .vchain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; counter-reset: none; } .vchain-step { display: flex; flex-direction: column; gap: 5px; padding: 18px 15px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); } .vchain-n { font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: rgba(255, 255, 255, .34); } .vchain-t { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: #F3ECF7; } .vchain-p { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--purple); text-decoration: none; } .vchain-p:hover { text-decoration: underline; } .vchain-d { font-size: .82rem; color: var(--muted); line-height: 1.4; } /* five layers */ .lay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .lay-item { padding: 24px; border-radius: 16px; background: rgba(22, 9, 42, .74); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lay-item h3 { margin: 0 0 8px; font-size: 1.08rem; color: #F3ECF7; } .lay-item p { margin: 0; font-size: .93rem; line-height: 1.55; color: rgba(241, 233, 247, .78); } @media (max-width: 1100px) { .vchain { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .vchain { grid-template-columns: repeat(2, 1fr); } .prow-item--deep { padding: 32px 0; } .pfact { min-width: 0; flex: 1 1 140px; } } /* ============================================================ 24. Hero H1 — full brand spectrum The pale cream ramp read flat; this runs orange through pink and purple into blue, matching the mark. If you'd rather it match the section headings exactly, swap for var(--text-grad-cool). ============================================================ */ :root { --text-grad-hero: linear-gradient(96deg, #FFC15E 0%, #FF6FA8 26%, #D45BF0 52%, #A96CFF 74%, #6C8EFF 100%); } .lhero h1 { /* background-image, NOT the `background` shorthand: the shorthand resets background-clip to border-box, which un-clips the gradient from the text and paints it as a solid block with invisible letters on top. */ background-image: var(--text-grad-hero); -webkit-background-clip: text; background-clip: text; } /* ============================================================ 25. EHR integration marquee — white strip, no pause on hover ============================================================ */ .ehrm { background: #fff; padding: 46px 0 40px; overflow: hidden; position: relative; } .ehrm-head { text-align: center; margin-bottom: 30px; } [data-theme="dark"] .ehrm .ehrm-eyebrow { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7C42C4; -webkit-text-fill-color: #7C42C4; background-image: none; } [data-theme="dark"] .ehrm h2 { margin: 0 0 10px; font-family: var(--font-head); font-size: clamp(1.32rem, 2.5vw, 1.92rem); line-height: 1.24; color: #2A1440; /* the dark-mode gradient-heading treatment must not leak onto a white strip */ background: none; -webkit-text-fill-color: #2A1440; } [data-theme="dark"] .ehrm .ehrm-sub { margin: 0 auto; max-width: 60ch; font-size: .98rem; line-height: 1.55; color: #4A4256; -webkit-text-fill-color: #4A4256; background-image: none; } .ehrm-rail { position: relative; overflow: hidden; /* feather both ends so logos enter and leave instead of being cut */ mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .ehrm-track { display: flex; align-items: center; gap: 62px; width: max-content; padding: 8px 31px; } /* a logo that fails to load is hidden by jobs of the onerror hook below; this also keeps the row from reserving space for it */ .ehrm-track img[data-broken] { display: none; } .ehrm-track img { height: 34px; width: auto; flex: none; /* lightly greyed, per the brief */ filter: grayscale(1) opacity(.46); } @media (prefers-reduced-motion: no-preference) { /* The track holds two identical copies, so translating exactly -50% lands copy two where copy one began: a seamless loop. No pause on hover by design — there is deliberately no :hover rule here. */ /* 42s read as hurried; slower makes it ambient rather than busy */ .ehrm-track { animation: ehrmScroll 68s linear infinite; } @keyframes ehrmScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } } @media (max-width: 720px) { .ehrm { padding: 34px 0 30px; } .ehrm-track { gap: 42px; } .ehrm-track img { height: 27px; } } /* ============================================================ 26. Mobile app band ============================================================ */ .mob-grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: 52px; align-items: center; } .mob-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; } .mob-list li { position: relative; padding-left: 21px; color: rgba(241, 233, 247, .78); font-size: .97rem; line-height: 1.55; max-width: 60ch; } .mob-list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); } .mob-list strong { color: #F3ECF7; } .mob-art img { width: 100%; height: auto; display: block; /* the render already carries device frames and its own shading, so it only needs a soft ground shadow to sit on the dark surface */ filter: drop-shadow(0 26px 46px rgba(8, 3, 20, .55)); } @media (max-width: 900px) { .mob-grid { grid-template-columns: 1fr; gap: 32px; } .mob-art { max-width: 420px; margin: 0 auto; } } /* ============================================================ 27. Enterprise oversight band ============================================================ */ .over-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .over-art img { width: 100%; height: auto; border-radius: 16px; background: #fff; box-shadow: 0 24px 56px rgba(8, 3, 20, .5); } @media (max-width: 900px) { .over-grid { grid-template-columns: 1fr; gap: 28px; } } /* ============================================================ 28. Testimonial band ============================================================ */ .quoteband { padding: 74px 0; } .quoteband-in { margin: 0 auto; max-width: 52rem; text-align: center; } .quoteband blockquote { margin: 0 0 18px; font-family: var(--font-head); font-size: clamp(1.22rem, 2.5vw, 1.72rem); line-height: 1.4; color: #F3ECF7; } .quoteband figcaption { font-size: .94rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ 29. Executive team — nothing to add style.css already styles .team-grid, .team-card, .team-photo (a fixed 112x112 avatar), .team-role and .team-li. My first pass overrode .team-photo with a stretched banner and an aspect-ratio, which fought a design that already worked and collapsed to the broken-image width in this sandbox. Removed: the carried styles are correct. Because the avatars have fixed CSS dimensions, the missing width/height attributes on those remote headshots are not a CLS risk. ============================================================ */ /* footer column headings moved h4 -> h3 to avoid a heading-level skip on every page; keep the visual weight identical to before */ .site-footer .foot-grid h3 { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; color: #fff; background: none; -webkit-text-fill-color: #fff; } /* Visually-hidden but announced. Also keeps heading levels progressing h1 -> h2 -> h3 on pages whose content has no h2, which was the only remaining heading-order warning in the audit. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ 30. Communities We Serve — three treatments ============================================================ */ /* --- homepage: card grid --- */ .cw-grid { display: grid; /* eight cards, so the column count is set explicitly rather than by auto-fit: auto-fit landed on three and left a hole in the last row */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1180px) { .cw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .cw-grid { grid-template-columns: 1fr; } } .cw-card { padding: 22px 19px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); transition: transform .2s cubic-bezier(.4, 0, .2, 1), background .2s ease, border-color .2s ease; } .cw-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); } .cw-ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 15px; border-radius: 12px; background: var(--grad-brand); color: #fff; } .cw-ic svg { width: 21px; height: 21px; } .cw-card h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.3; color: #F3ECF7; } .cw-card p { margin: 0; font-size: .89rem; line-height: 1.55; color: rgba(241, 233, 247, .74); } /* --- platform: chips on the data-viz band --- */ .cw-chips { padding: 84px 0; } .cw-chipwrap { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; align-items: start; } .cw-chipset h3 { margin: 0 0 14px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .cw-chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } .cw-chiplist li { font-size: .88rem; padding: 8px 15px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* levels of care read as a scale, so they get the warm accent */ .cw-chiplist--alt li { background: rgba(255, 187, 81, .13); border-color: rgba(255, 187, 81, .42); } /* --- enterprise: argument + scrolling rail --- */ .cw-ent { padding-bottom: 0; } .cw-ent-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 46px; align-items: start; } .cw-ent-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; } .cw-ent-list li { position: relative; padding-left: 21px; font-size: .97rem; line-height: 1.5; color: rgba(241, 233, 247, .78); } .cw-ent-list li::before { content: ""; position: absolute; left: 0; top: .56em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); } .cw-ent-note { padding: 26px 24px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); } .cw-ent-kicker { margin: 0 0 12px; font-family: var(--font-head); font-size: 1.08rem; line-height: 1.36; color: #F3ECF7; } .cw-ent-note p:last-child { margin: 0; font-size: .94rem; line-height: 1.55; color: rgba(241, 233, 247, .74); } .cw-rail { margin-top: 52px; padding: 20px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .025); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .cw-rail-track { display: flex; gap: 14px; width: max-content; padding: 0 7px; } .cw-rail-track span { flex: none; font-size: .9rem; letter-spacing: .02em; padding: 9px 18px; border-radius: 999px; color: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { /* two identical copies, translated exactly -50% for a seamless loop — same technique as the EHR marquee, no pause on hover */ .cw-rail-track { animation: cwRail 48s linear infinite; } @keyframes cwRail { from { transform: translateX(0); } to { transform: translateX(-50%); } } } @media (max-width: 900px) { .cw-chipwrap { grid-template-columns: 1fr; gap: 28px; } .cw-ent-grid { grid-template-columns: 1fr; gap: 28px; } .cw-chips { padding: 62px 0; } .cw-rail { margin-top: 36px; } } /* ============================================================ 31. One H1 treatment, site-wide alt.css gives .hero h1 / .page-hero h1 the pale warm ramp; the homepage hero uses the full brand spectrum. Unify on the latter. Specificity note: a bare `h1` is (0,0,1) and loses to alt.css's `.hero h1` at (0,1,1). Scoping to [data-theme="dark"] ties that specificity and wins on order, since lean.css loads last. background-IMAGE, never the `background` shorthand — the shorthand resets background-clip to border-box and paints the gradient as a solid block with invisible letters. That was the v18 hero bug. ============================================================ */ [data-theme="dark"] h1 { background-image: var(--text-grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { [data-theme="dark"] h1 { color: #F6ECFF; -webkit-text-fill-color: #F6ECFF; background-image: none; } } /* --- make the one H1 treatment work everywhere ----------------------------- Two problems the site-wide gradient exposed: 1. An h1 is a block, so its background box spans the full container even when the text is short. "Privacy Policy" therefore sampled only the warm start of the ramp and read as plain orange, while long headings got the whole spectrum. Shrinking the box to the text makes the ramp map onto the glyphs regardless of length. 2. .page-hero animates a bright magenta gradient, and saturated mid-tone type on it is genuinely hard to read. The previous ramp got away with it by being near-white. Fixing the surface keeps a single type treatment instead of forking it per background. */ [data-theme="dark"] h1 { width: fit-content; max-width: 100%; } /* centred heroes need the shrunken box re-centred */ .lhero-head h1, .center h1 { margin-inline: auto; } /* ...except the left-aligned photo hero variant */ .lhero--photo .lhero-head h1 { margin-inline: 0; } .page-hero { position: relative; isolation: isolate; } .page-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18, 6, 34, .58) 0%, rgba(22, 8, 42, .44) 52%, rgba(16, 5, 32, .66) 100%); } .page-hero > * { position: relative; z-index: 1; } /* ============================================================ 32. Light purple glow behind the mobile render Sits behind the phones and breathes. Pure CSS, transform + opacity only, so it composites on the GPU. ============================================================ */ .mob-art { position: relative; } .mob-glow { position: absolute; left: 50%; top: 46%; width: 138%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; border-radius: 50%; /* the render is largely opaque, so a glow sitting only behind it barely shows — this is sized to halo past the device edges */ background: radial-gradient(closest-side, rgba(196, 138, 255, .72) 0%, rgba(172, 104, 250, .48) 30%, rgba(146, 84, 232, .24) 54%, rgba(132, 72, 216, .08) 72%, rgba(132, 72, 216, 0) 84%); filter: blur(30px); } .mob-art img { position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { .mob-glow { animation: mobGlow 9s ease-in-out infinite; } /* a second, offset layer so the bloom drifts instead of pulsing evenly */ .mob-glow::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 176, 255, .5), rgba(224, 176, 255, 0) 72%); animation: mobGlowInner 13s ease-in-out infinite; } @keyframes mobGlow { 0%, 100% { transform: translate(-50%, -50%) scale(.94); opacity: .78; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } } @keyframes mobGlowInner { 0%, 100% { transform: translate(-4%, 3%) scale(1); opacity: .55; } 50% { transform: translate(5%, -4%) scale(1.12); opacity: .9; } } } @media (max-width: 900px) { .mob-glow { width: 128%; } } /* Two-sentence headings break after the first sentence (see seo.split_two_sentence_headings). Block spans rather than
so the break survives reflow and the rhythm stays adjustable. */ .hsent { display: block; } .hsent + .hsent { margin-top: .06em; }