/* =========================================================================== IDLife IDN Assessment — APP UI (v2 · drop-dead gorgeous) Mobile-first. Vanilla CSS. No frameworks. - Flow screens (landing/question/processing/reveal): centered, narrow. - Results screen: FULL-BLEED dashboard that uses the whole screen on desktop. Handoff refs: PART II §P2.I, PART IV (Shield/tiers), §11 (responsive). =========================================================================== */ /* ── Reset ────────────────────────────────────────────────────────────────*/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x on too — body's clip alone still lets a trackpad swipe drag the ROOT scroller sideways when any element pokes past the viewport. overscroll-behavior kills the rubber-band on BOTH axes. The y axis matters because the vertical bounce translates the document (and the sticky .ov-topbar with it) while position:fixed chrome — the account/cart pill — stays pinned to the viewport, so the pill visibly escapes its header band. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; overscroll-behavior: none; } body { font-family: var(--font-body); background: var(--bg-1); color: var(--text); min-height: 100dvh; /* !important — the Open Shop bundle's scroll-lock restore writes an INLINE body overflow:auto, silently re-enabling horizontal page panning. The x axis must never scroll; inline styles lose only to !important. overflow-y MUST stay visible: any body overflow-y other than visible makes body its own (non-scrolling) scroll container, which detaches every position:sticky header from the viewport — the topbars scroll away. */ overflow-x: clip !important; overflow-y: visible !important; overscroll-behavior: none; } /* Intentional inline scroll locks (modals/overlays set body.style.overflow = 'hidden') must still win over the visible !important guard above. */ body[style*="overflow: hidden"], body[style*="overflow:hidden"] { overflow-y: hidden !important; } body { line-height: 1.55; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } img, svg { display: block; } /* ── Premium themed scrollbars (WebKit + Firefox) ───────────────────────*/ html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; border: 2.5px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } /* ── Animated mesh background + grain ─────────────────────────────────────*/ .bg { position: fixed; inset: 0; z-index: -3; background: radial-gradient(120% 90% at 78% -10%, rgba(79,142,247,0.16), transparent 55%), radial-gradient(110% 90% at 12% 108%, rgba(20,224,203,0.16), transparent 55%), radial-gradient(90% 80% at 100% 60%, rgba(181,108,255,0.10), transparent 60%), var(--bg-1); } .bg::after { /* drifting mesh sheen */ content: ''; position: absolute; inset: -20%; background: radial-gradient(40% 40% at 30% 30%, rgba(20,224,203,0.10), transparent 70%), radial-gradient(35% 35% at 70% 65%, rgba(91,149,255,0.10), transparent 70%); filter: blur(30px); animation: mesh 26s ease-in-out infinite alternate; } @keyframes mesh { to { transform: translate3d(4%, 3%, 0) scale(1.08) rotate(4deg); } } .grain { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } .dots { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.4; background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%); } .orb { position: fixed; border-radius: 50%; filter: blur(90px); z-index: -3; opacity: 0.55; pointer-events: none; will-change: transform; } .orb.o1 { width: 480px; height: 480px; background: rgba(20,224,203,0.45); top: -140px; left: -110px; animation: drift 24s var(--ease-out) infinite alternate; } .orb.o2 { width: 560px; height: 560px; background: rgba(79,142,247,0.42); bottom: -180px; right: -130px; animation: drift2 30s var(--ease-out) infinite alternate; } .orb.o3 { width: 380px; height: 380px; background: rgba(181,108,255,0.30); top: 42%; left: 58%; animation: drift 34s var(--ease-out) infinite alternate; } @keyframes drift { to { transform: translate(70px, 56px) scale(1.12); } } @keyframes drift2 { to { transform: translate(-58px, -46px) scale(1.10); } } /* ── Results screen: freeze ambient motion for buttery scrolling ────────────── The results dashboard is long and scrolls. Every .card uses a 40px backdrop-filter blur, and re-blurring it over a MOVING background (drifting orbs, mesh sheen, floating motes) every frame is what makes scrolling feel laggy and makes cards appear to "fade / pop in" as they scroll into view. While the results screen is up we hold the background perfectly still, so the blurred backdrop is rasterized once and cached — everything is simply present, and scrolling is smooth. Other screens keep the living ambience (they don't scroll, so there's no cost). */ body.on-results .bg::after, body.on-results .orb { animation: none !important; } body.on-results .orb { will-change: auto; } /* de-promote frozen layers */ body.on-results .particles { display: none; } /* drop 16 animated motes */ body.on-results .gradient-text { animation: none !important; } /* stop infinite text repaint */ /* Belt-and-suspenders: nothing on the results dashboard animates in on entry. */ #screen-results .anim-in, #screen-results .stagger { animation: none !important; opacity: 1 !important; transform: none !important; } /* ── App shell ────────────────────────────────────────────────────────────*/ .app { position: relative; z-index: 1; min-height: 100dvh; } .screen { display: none; min-height: 100dvh; } .screen.active { display: flex; } /* flow screens: centered narrow column */ .screen--flow { flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 56px) clamp(18px, 4vw, 40px); } .flow { width: 100%; max-width: var(--w-flow); } /* generic entrance */ .screen.active .anim-in { animation: screenIn 0.6s var(--ease-out) both; } @keyframes screenIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .stagger { opacity: 0; animation: screenIn 0.7s var(--ease-out) forwards; } /* opacity-only entrance (NO transform) for containers that must not become an abs-pos containing block (e.g. the landing hero holding the absolute shield) */ @keyframes fadeInOnly { from { opacity: 0; } to { opacity: 1; } } /* ── Typography ───────────────────────────────────────────────────────────*/ .display { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; font-size: clamp(34px, 7.5vw, 68px); } .h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(26px, 4.4vw, 44px); } .gradient-text { background: var(--grad-text); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmerText 8s ease-in-out infinite; } @keyframes shimmerText { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } } .eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.26em; font-size: 11.5px; font-weight: 800; color: var(--teal); } .lead { color: var(--text-2); font-size: clamp(15px, 2.4vw, 19px); line-height: 1.6; max-width: 54ch; } .muted { color: var(--muted); } /* ── Buttons ──────────────────────────────────────────────────────────────*/ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: var(--r-md); cursor: pointer; overflow: hidden; font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 17px 36px; min-height: 56px; white-space: nowrap; transition: transform 0.22s var(--ease-spring), box-shadow 0.25s var(--ease-out), background 0.2s, opacity 0.2s; -webkit-tap-highlight-color: transparent; } .btn svg { width: 18px; height: 18px; } .btn-primary { background: var(--grad-brand); color: var(--ink-on-brand); box-shadow: var(--glow-teal), inset 0 1px 0 rgba(255,255,255,0.4); } .btn-primary::after { content:''; position:absolute; inset:0; background: var(--grad-sheen); background-size: 250% 100%; background-position: 150% 0; transition: background-position 0.7s var(--ease-out); pointer-events:none; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 64px rgba(20,224,203,0.5), inset 0 1px 0 rgba(255,255,255,0.5); } .btn-primary:hover::after { background-position: -120% 0; } .btn-primary:active { transform: translateY(-1px) scale(0.99); } .btn-ghost { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: var(--border-hi); transform: translateY(-2px); } .btn[disabled] { opacity: 0.35; cursor: not-allowed; transform: none !important; box-shadow: none; } .btn-block { width: 100%; } .btn-lg { padding: 19px 44px; min-height: 62px; font-size: 17px; } /* ── Pills, badges, chips ─────────────────────────────────────────────────*/ .pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 12px; font-weight: 600; padding: 8px 15px; color: var(--text-2); background: rgba(255,255,255,0.025); } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); } .shield-badge { display: inline-flex; align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--blue) 66%, transparent); border-radius: var(--r-pill); padding: 9px 17px; font-size: 13px; font-weight: 600; color: var(--shield); background: rgba(58,235,181,0.08); box-shadow: 0 0 30px rgba(58,235,181,0.14), inset 0 1px 0 rgba(255,255,255,0.08); } .shield-badge svg { width: 16px; height: 16px; } .shield-badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--shield); box-shadow: 0 0 12px var(--shield); animation: pulse 1.8s ease-in-out infinite; } /* F170 · brand-new visitor who hasn't cleared the Shield moat — the castle homepage badge reads "Shield Not Yet Active" in the danger hue with an exclamation glyph (deliberately no check) until they move through the Shield intro or a saved assessment is found for their IP / Exigo. */ .shield-badge.not-active { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 46%, transparent); background: var(--danger-soft); box-shadow: 0 0 30px color-mix(in srgb, var(--danger) 16%, transparent), inset 0 1px 0 rgba(255,255,255,0.06); } .shield-badge.not-active .live { background: var(--danger); box-shadow: 0 0 12px var(--danger); } .dna-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--blue) 66%, transparent); border-radius: var(--r-pill); padding: 9px 15px; font-size: 13px; font-weight: 600; color: #8fb0ff; background: rgba(91,149,255,0.10); box-shadow: 0 0 26px rgba(91,149,255,0.14), inset 0 1px 0 rgba(255,255,255,0.08); } .dna-badge svg { width: 16px; height: 16px; } [data-theme="light"] .dna-badge { color: #3f6fd6; background: rgba(63,111,214,0.08); border-color: color-mix(in srgb, var(--blue) 66%, transparent); } /* F183 · MOBILE ONLY — the DNA-connected badge collapses to an icon-only pill sized to MATCH the assessment Shield pill/icon (5/9 padding · 13px glyph → 25px tall), so the top-of-page controls read symmetrically on phones. The label is a raw text node, so font-size:0 hides it while the helix svg stays. */ @media (max-width: 640px) { .dna-badge { font-size: 0; gap: 0; padding: 5px 9px; } .dna-badge svg { width: 13px; height: 13px; } } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.65); } } /* ── Glass card system ────────────────────────────────────────────────────*/ .card { position: relative; background: var(--grad-card); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .card::before { /* top inner highlight */ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%); -webkit-mask: linear-gradient(#000, transparent 40%); mask: linear-gradient(#000, transparent 40%); } .card-grad-border { /* gradient hairline border via mask */ border: 1px solid transparent; } .card-grad-border::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(20,224,203,0.5), rgba(79,142,247,0.18) 45%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* =========================================================================== 1) LANDING =========================================================================== */ #screen-landing .flow { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 3.4vw, 30px); } .brandmark { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; } .brandmark .shield-ico { width: 36px; height: 36px; color: var(--shield); filter: drop-shadow(0 0 16px var(--shield-glow)); } .brandmark span { font-size: 21px; letter-spacing: 0.01em; } /* F148 · landing brand = the iD·NUTRITION® shield lockup (the product's real wordmark — same glyph as the preloader / question bar / portal hero), replacing the internal "IDLife IDN" project name a customer should never see. */ .ls-brand-idn { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; } .ls-brand-idn .id-logo { width: 34px; height: 34px; flex: none; margin: 0 -.08em; } .ls-brand-word { font-size: 21px; letter-spacing: .045em; color: var(--text); font-weight: 700; } .ls-brand-reg { align-self: flex-start; position: relative; top: .16em; margin-left: .12em; font-size: 10px; font-weight: 700; color: var(--blue-2); } .hero-attrs { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .attr { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 9px 15px; background: rgba(255,255,255,0.025); transition: 0.2s; } .attr:hover { border-color: var(--border-hi); transform: translateY(-2px); } .attr svg { width: 15px; height: 15px; color: var(--teal); } .shield-intro { display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px 20px; max-width: 500px; } .shield-intro .big-shield { width: 46px; height: 46px; flex: none; color: var(--shield); filter: drop-shadow(0 0 18px var(--shield-glow)); } .shield-intro p { font-size: 14px; color: var(--text-2); line-height: 1.6; } .shield-intro strong { color: var(--shield); } .landing-foot { font-size: 12.5px; color: var(--muted-2); } /* =========================================================================== 2) QUESTION FLOW =========================================================================== */ #screen-question { flex-direction: column; } .flow-topbar { position: sticky; top: 0; z-index: 5; width: 100%; display: flex; align-items: center; gap: 16px; justify-content: center; padding: clamp(16px, 3vw, 26px) clamp(18px, 4vw, 40px); /* FULLY OPAQUE — scrolled content must NEVER show through the bar */ background: var(--bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .flow-topbar-inner { width: 100%; max-width: var(--w-flow); display: flex; align-items: center; gap: 14px; } .brandmark-sm { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; } .brandmark-sm svg { width: 18px; height: 18px; color: var(--shield); } /* assessment topbar brand → iDNUTRITION lockup (gradient iD glyph + wordmark) */ .brandmark-idn { gap: 7px; } .brandmark-sm.brandmark-idn .id-logo { width: 22px; height: 22px; } .brandmark-sm.brandmark-idn .id-logo-svg { width: 100%; height: 100%; } .brand-idn-word { font-size: 15px; letter-spacing: .04em; color: var(--text); } .progress-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; flex: 1; } .progress-fill { position: relative; height: 100%; width: 0%; background: var(--grad-brand-3); border-radius: 99px; overflow: hidden; transition: width 0.6s var(--ease-out); box-shadow: 0 0 16px rgba(20,224,203,0.6); } .progress-fill::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%); background-size: 240% 100%; background-position: 180% 0; mix-blend-mode: screen; animation: progressSheen 3.2s var(--ease-out) infinite; } @keyframes progressSheen { 0% { background-position: 180% 0; } 60%, 100% { background-position: -90% 0; } } .progress-count { font-family: var(--font-display); font-size: 12.5px; color: var(--muted); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 54px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--blue-2) 24%, transparent); background: color-mix(in srgb, var(--blue-2) 10%, transparent); color: var(--text); font-weight: 700; letter-spacing: .01em; } .flow-topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border) 24%, var(--border) 76%, transparent); } /* Tablet+computer: keep Shield tight to the right lane by default (no extra dead gap). Only reserve a little extra room when a DNA status strip exists. */ @media (min-width: 641px) { #screen-question .flow-topbar-inner { max-width: none; padding-right: 0; } #screen-question #q-shield-pill { margin-left: 8px; } #screen-question .flow-topbar:has(.dna-strip.connected, .dna-strip.connecting, .dna-strip.pending) .flow-topbar-inner { padding-right: 24px; } } .flow-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: clamp(20px, 4vw, 40px) clamp(18px, 4vw, 40px); } .q-wrap { width: 100%; max-width: var(--w-flow); } .q-anim { animation: qIn 0.5s var(--ease-out) both; } .q-anim.out { animation: qOut 0.32s var(--ease-in) both; } @keyframes qIn { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } } @keyframes qOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-34px); } } .q-domain { margin-bottom: 14px; text-align: center; } .q-headline { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; font-size: clamp(25px, 4.8vw, 42px); line-height: 1.1; text-align: center; } /* Each headline segment is its own block line so spacing stays even even when a line holds only the inline-block goal word (avoids the baseline-strut gap). */ .q-headline .hl-line { display: block; } /* Dynamic-subject goals (the choices the user picked earlier) — same white headline ink as the rest of the sentence, so the whole line reads uniform. display:inline (NOT inline-block) so the element edge is NOT a break point — that keeps each trailing comma glued to its goal (no comma orphaned at the start of a wrapped line); white-space:nowrap keeps a 2-word goal intact. */ .q-headline .dyn-subject { display: inline; font-weight: 700; color: inherit; white-space: nowrap; } .q-subtext { color: var(--muted); margin-top: 14px; font-size: clamp(14px, 2.2vw, 17px); max-width: 48ch; margin-inline: auto; text-align: center; } .q-shield-note { display: flex; align-items: center; justify-content: center; gap: 9px; width: fit-content; margin: 18px auto 0; font-size: 12.5px; font-weight: 600; color: var(--shield); padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--shield) 32%, transparent); background: var(--shield-soft); box-shadow: 0 0 24px var(--shield-glow); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .q-shield-note svg { width: 15px; height: 15px; flex: none; } /* When the note stands IN PLACE of the section eyebrow it owns the eyebrow's spacing — no extra top margin above the headline. */ .q-domain-shield { margin-bottom: 14px; } .q-domain-shield .q-shield-note { margin-top: 0; } /* ═══════════════════════════════════════════════════════════════════════════ LIVE DNA STRIP — slim status pill under the question topbar. The portal resolve runs server-side in the background; this is the user WATCHING their genes link: connecting (pulse) → connected ✓ (label + check, brand glow). Theme-aware (tokens only) · phone → desktop. */ .dna-strip { display: flex; align-items: center; justify-content: center; gap: 9px; width: fit-content; margin: 10px auto 0; padding: 7px 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: 0.01em; animation: dnaStripIn 0.5s var(--ease-out) both; } @keyframes dnaStripIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .dna-strip svg { width: 16px; height: 16px; flex: none; } .dna-strip svg:first-child { color: var(--teal); } .dna-strip.connecting svg:first-child { animation: dnaSpin 2.4s linear infinite; } @keyframes dnaSpin { to { transform: rotate(360deg); } } .dna-strip.connecting { border-color: var(--border); } .dna-strip .dna-dots i { display: inline-block; font-style: normal; animation: dnaDot 1.4s infinite; } .dna-strip .dna-dots i:nth-child(2) { animation-delay: 0.2s; } .dna-strip .dna-dots i:nth-child(3) { animation-delay: 0.4s; } @keyframes dnaDot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } } .dna-strip.connected { border-color: var(--border-hi); color: var(--text); background: linear-gradient(135deg, var(--teal-soft), var(--blue-soft)); box-shadow: 0 0 28px var(--teal-glow); } .dna-strip.connected svg:last-child { color: var(--shield); width: 14px; height: 14px; } .dna-strip.connected.landed { animation: dnaLanded 0.7s var(--ease-spring) both; } @keyframes dnaLanded { 0% { transform: scale(0.92); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } } .dna-strip.pending { color: var(--muted); } /* ═══════════════════════════════════════════════════════════════════════════ WELCOME-BACK STRIP — sits ABOVE question 1 when a returner's answers are pre-filled. Context + two quiet actions (view last results · start fresh). The user lands straight on the question — no interstitial card. */ .welcome-strip { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 clamp(18px, 3vw, 26px); padding: 13px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: linear-gradient(135deg, var(--teal-soft), transparent 60%), var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .ws-badge { position: relative; display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 13px; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1; color: var(--ink-on-brand); background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px rgba(20,224,203,0.25); } .ws-badge span { position: absolute; right: 4px; bottom: 3px; font-size: 9px; font-weight: 800; opacity: 0.85; } .ws-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; text-align: left; } .ws-copy strong { font-family: var(--font-display); font-size: 14.5px; letter-spacing: -0.01em; color: var(--text); } .ws-copy span { font-size: 12.5px; line-height: 1.45; color: var(--muted); } .ws-actions { display: flex; align-items: center; gap: 8px; flex: none; } .ws-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--fill-1); font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s; } .ws-link:hover { border-color: var(--border-hi); background: var(--fill-hover); color: var(--text); transform: translateY(-1px); } .ws-link svg { width: 13px; height: 13px; } /* Interrupted-run flavor (Feature 041): percent badge + a primary Continue that restores the saved answers and drops the user mid-flow. */ .ws-badge.pct { font-size: 17px; letter-spacing: -0.02em; } .ws-badge.pct span { position: static; margin-left: 1px; font-size: 10px; align-self: flex-start; padding-top: 6px; } .ws-continue { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--grad-brand); color: var(--ink-on-brand); font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 6px 18px rgba(20,224,203,0.28), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; } .ws-continue:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(20,224,203,0.36), inset 0 1px 0 rgba(255,255,255,0.35); } .ws-continue:disabled { cursor: default; filter: saturate(0.5) opacity(0.75); transform: none; } .ws-continue svg { width: 14px; height: 14px; } @media (max-width: 640px) { .welcome-strip { flex-wrap: wrap; padding: 12px 14px; gap: 10px; } .ws-copy { flex-basis: calc(100% - 60px); } .ws-actions { width: 100%; } .ws-link, .ws-continue { flex: 1; justify-content: center; min-height: 40px; } } /* ═══════════════════════════════════════════════════════════════════════════ FLOATING "VIEWING PREVIOUS RESULTS" PILL — bottom-center, glass, returns the user to their resume. Sits clear of the bottom-right back-to-top button. */ .prior-view-bar { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-hi); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-float); animation: pvbIn 0.45s var(--ease-spring) backwards; max-width: calc(100vw - 28px); /* F075: eased show/hide (used when MyAI retires this bar on computer). `backwards` fill above (never forwards/both) so it can't clobber the hide transform. */ transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); } @keyframes pvbIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } } .pvb-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pvb-label svg { width: 15px; height: 15px; flex: none; color: var(--teal); } .pvb-back { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 9px 16px; border-radius: var(--r-pill); border: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-on-brand); background: var(--grad-brand); box-shadow: 0 6px 18px rgba(20,224,203,0.28); transition: transform 0.2s, box-shadow 0.2s; } .pvb-back:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20,224,203,0.36); } .pvb-back:active { transform: translateY(0) scale(0.97); } .pvb-back svg { width: 15px; height: 15px; } @media (max-width: 560px) { .prior-view-bar { gap: 8px; padding: 8px 8px 8px 13px; } .pvb-label span { max-width: 38vw; } .pvb-back span { display: none; } /* arrow-only on small phones */ .pvb-back { padding: 11px 13px; } } /* F074 · don't collide with the app-native tab pill. The floating "viewing previous results" bar and the always-on (.mpaged) bottom tab pill are BOTH fixed bottom-center pills, so they overlap on the results page. Lift this bar so it STACKS ABOVE the tab bar — clearing the bar's full height in each mode (floating pill ≥641 · edge-to-edge bar ≤640). prior-view only renders on the results screen, which is always .mpaged, so this scope always applies there. */ @media (min-width: 1025px) { body.mpaged .prior-view-bar { bottom: calc(clamp(16px, 2.2vw, 26px) + 64px); } } @media (max-width: 1024px) { body.mpaged .prior-view-bar { bottom: calc(var(--mtabbar-h) + env(safe-area-inset-bottom) + 12px); } } /* ═══════════════════════════════════════════════════════════════════════════ PRIOR-RESULTS MODAL — "your health, remembered." Cinematic read-only snapshot: aurora backdrop · gradient-border glass card · animated score ring + count-up · trend vs last check-in · history sparkline · strongest/focus insights · banded 12-system grid with sweeping bars. Theme-aware (tokens), phone-first (bottom sheet ≤640px), reduced-motion-safe. */ .modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 3vw, 32px); background: radial-gradient(56vw 56vw at 18% 8%, rgba(20, 224, 203, 0.10), transparent 62%), radial-gradient(50vw 50vw at 86% 88%, rgba(79, 142, 247, 0.12), transparent 60%), radial-gradient(40vw 40vw at 78% 12%, rgba(181, 108, 255, 0.07), transparent 58%), rgba(2, 6, 18, 0.80); animation: modalBgIn 0.18s ease both; } [data-theme="light"] .modal-backdrop { background: radial-gradient(56vw 56vw at 18% 8%, rgba(27, 197, 212, 0.14), transparent 62%), radial-gradient(50vw 50vw at 86% 88%, rgba(22, 82, 240, 0.10), transparent 60%), rgba(225, 235, 250, 0.55); } @keyframes modalBgIn { from { opacity: 0; } to { opacity: 1; } } .modal-card { position: relative; isolation: isolate; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: 28px; border: 1px solid transparent; box-shadow: var(--shadow-lg), 0 0 90px rgba(20, 224, 203, 0.07); max-width: none; width: calc(100vw - clamp(28px, 5vw, 76px)); max-height: calc(100dvh - clamp(28px, 5vw, 76px)); display: flex; flex-direction: column; overflow: hidden; animation: modalCardIn 0.55s var(--ease-out) both; } /* gradient border ring (mask trick) + top sheen hairline */ .modal-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(20,224,203,0.55), rgba(79,142,247,0.25) 40%, rgba(181,108,255,0.30) 75%, rgba(20,224,203,0.18)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } .modal-card::after { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); pointer-events: none; } [data-theme="light"] .modal-card { box-shadow: var(--shadow-lg); } [data-theme="light"] .modal-card::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); } @keyframes modalCardIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } /* staggered section rises */ .pr-rise { animation: prRise 0.55s var(--ease-out) both; animation-delay: var(--d, 0s); } @keyframes prRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ── Header ── */ .modal-header { display: flex; align-items: center; gap: 12px; padding: 18px 22px 16px; border-bottom: 1px solid var(--hairline); flex: none; } .pr-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .pr-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; background: var(--grad-brand); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .modal-header h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .pr-count { flex: none; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--text-2); padding: 5px 11px; border-radius: var(--r-pill); background: var(--fill-2); border: 1px solid var(--border-soft); white-space: nowrap; } .modal-close { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--border); background: var(--fill-1); color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.3s var(--ease-spring); } .modal-close:hover { color: var(--text); border-color: var(--border-hi); background: var(--fill-hover); transform: rotate(90deg); } .modal-close svg { width: 15px; height: 15px; } .modal-body { flex: 1; overflow-y: auto; padding: 18px 22px; } .pr-history-card { background: radial-gradient(820px 360px at 44% -12%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 67%), radial-gradient(620px 420px at 96% 6%, color-mix(in srgb, var(--blue-2) 16%, transparent), transparent 62%), linear-gradient(145deg, var(--surface), var(--surface-hi)); -webkit-backdrop-filter: none; backdrop-filter: none; contain: layout paint; box-shadow: var(--shadow-lg), 0 26px 90px rgba(4, 20, 55, 0.22), 0 0 110px rgba(20, 224, 203, 0.13); } .pr-history-card::after { left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 72%, white 28%), color-mix(in srgb, var(--blue-2) 64%, white 36%), transparent); opacity: .76; } .pr-history-card .modal-header { padding: 18px 24px 17px; background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 8%, transparent), transparent 34%, color-mix(in srgb, var(--blue-2) 8%, transparent)); } .pr-history-card .modal-header h3 { font-size: clamp(20px, 1.6vw, 27px); letter-spacing: -0.03em; } .pr-history-card .pr-eyebrow { letter-spacing: .2em; } .pr-history-card .pr-count { background: color-mix(in srgb, var(--teal) 11%, var(--fill-2)); border-color: color-mix(in srgb, var(--teal) 28%, transparent); } .pr-history-body { position: relative; } .pr-history-body::before { content: ''; position: absolute; inset: 16px 18px; pointer-events: none; border-radius: 24px; background: linear-gradient(90deg, transparent 0 49.6%, color-mix(in srgb, var(--teal) 12%, transparent) 49.8% 50.2%, transparent 50.4%), linear-gradient(0deg, transparent 0 49.6%, color-mix(in srgb, var(--blue-2) 10%, transparent) 49.8% 50.2%, transparent 50.4%); opacity: .42; mask-image: radial-gradient(circle at 50% 48%, #000, transparent 72%); } .pr-history-body > * { position: relative; z-index: 1; } .pr-history-card .pr-hero, .pr-history-card .pr-journey, .pr-history-card .pr-ins, .pr-history-card .pr-sys { background: color-mix(in srgb, var(--fill-1) 86%, transparent); border-color: color-mix(in srgb, var(--border-soft) 78%, var(--teal) 22%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 46px rgba(4, 20, 55, 0.08); } .pr-history-card .pr-journey { position: relative; overflow: hidden; border-radius: 22px; background: radial-gradient(540px 260px at 50% 102%, color-mix(in srgb, var(--teal) 20%, transparent), transparent 70%), linear-gradient(145deg, color-mix(in srgb, var(--fill-1) 90%, transparent), color-mix(in srgb, var(--blue-soft) 48%, transparent)); } .pr-history-card .pr-journey::before { content: ''; position: absolute; inset: 44px 14px 58px; pointer-events: none; border-radius: 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 11%, transparent) 1px, transparent 1px), linear-gradient(0deg, color-mix(in srgb, var(--blue-2) 10%, transparent) 1px, transparent 1px); background-size: 25% 100%, 100% 33.333%; opacity: .72; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .pr-history-card .pr-journey::after { content: ''; position: absolute; inset: auto 8% 44px; height: 48%; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 70%); } .pr-history-card .pr-journey-head, .pr-history-card .pr-spark-wrap, .pr-history-card .pr-journey-stats { position: relative; z-index: 1; } .pr-history-card .pr-journey-head { margin-bottom: 12px; color: var(--text-2); } .pr-history-card .pr-journey-head b { color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent); padding: 4px 9px; border-radius: var(--r-pill); } .pr-history-card .pr-spark-wrap { border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent); border-radius: 18px; background: radial-gradient(280px 180px at 78% 22%, color-mix(in srgb, var(--blue-2) 12%, transparent), transparent 66%), linear-gradient(180deg, color-mix(in srgb, var(--surface-hi) 40%, transparent), color-mix(in srgb, var(--teal) 7%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(20,224,203,.10); overflow: hidden; } .pr-history-card .pr-spark-line { filter: none; } .pr-history-card .pr-spark-area { filter: none; } .pr-history-card .pr-rise, .pr-history-card .pr-sys { animation: none; } .pr-history-card .pr-spark { clip-path: none; transition: none; } .pr-history-card .pr-spark-dot, .pr-history-card .pr-spark-val, .pr-history-card .pr-ms-track i, .pr-history-card .pr-sys-bar i { transition-duration: .16s; transition-delay: 0s; } .pr-history-card .pr-spark-val { text-shadow: 0 1px 6px color-mix(in srgb, var(--surface) 80%, transparent); } .pr-history-card .pr-spark-dot::after { box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 13%, transparent), 0 0 16px var(--teal-glow); } .pr-history-card .pr-spark-dot.now::after { inset: 3px; border-width: 3px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--teal) 14%, transparent), 0 0 24px var(--teal-glow); } .pr-journey-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .pr-journey-stats span { min-width: 0; padding: 9px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--border-soft) 70%, var(--teal) 30%); background: color-mix(in srgb, var(--surface-hi) 48%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } .pr-journey-stats small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .pr-journey-stats b { display: block; margin-top: 1px; font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--text); } .pr-history-card .pr-sys { border-radius: 14px; } .pr-history-card .modal-footer { background: linear-gradient(90deg, color-mix(in srgb, var(--surface-hi) 72%, transparent), color-mix(in srgb, var(--teal) 8%, transparent)); } .pr-history-card #modal-view-full { box-shadow: 0 14px 32px color-mix(in srgb, var(--blue-2) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.28); } /* ── Hero: score ring + meta ── */ .pr-hero { display: flex; align-items: center; gap: 22px; padding: 20px; background: linear-gradient(135deg, var(--teal-soft), var(--blue-soft)); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 14px; position: relative; overflow: hidden; } .pr-hero::before { content: ''; position: absolute; width: 220px; height: 220px; left: -60px; top: -80px; background: radial-gradient(circle, var(--teal-glow), transparent 65%); opacity: 0.35; filter: blur(10px); pointer-events: none; } .pr-ring-wrap { position: relative; width: 128px; height: 128px; flex: none; } .pr-ring { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 14px rgba(20, 224, 203, 0.35)); } .pr-ring-track { fill: none; stroke: var(--track); stroke-width: 8; } .pr-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.25s var(--ease-out) 0.15s; } .pr-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .pr-num { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; background: var(--grad-brand); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .pr-outof { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .pr-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: relative; } .pr-label-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pr-label { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; } .pr-grade { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--teal); padding: 4px 11px; border-radius: var(--r-pill); background: var(--teal-soft); border: 1px solid rgba(20, 224, 203, 0.25); } .pr-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .pr-date svg { width: 13px; height: 13px; flex: none; } .pr-chips { display: flex; gap: 8px; flex-wrap: wrap; } .pr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); } .pr-chip svg { width: 13px; height: 13px; flex: none; } .pr-chip.pos { color: var(--success); background: var(--shield-soft); border-color: rgba(58, 235, 181, 0.25); } .pr-chip.neg { color: var(--warning); background: rgba(255, 181, 71, 0.10); border-color: rgba(255, 181, 71, 0.25); } .pr-chip.neg svg { transform: scaleY(-1); } .pr-chip.neu { color: var(--text-2); background: var(--fill-2); } .pr-ms { display: flex; flex-direction: column; gap: 5px; } .pr-ms-track { height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; } .pr-ms-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad-brand); box-shadow: 0 0 12px var(--teal-glow); transition: width 1s var(--ease-out) 0.45s; } .pr-go .pr-ms-track i { width: var(--mw, 0%); } .pr-ms-cap { font-size: 11.5px; color: var(--muted); } .pr-ms-cap b { color: var(--text-2); font-weight: 700; } /* ── Journey trend chart (interactive: numbers + hover-for-date) ── */ .pr-journey { padding: 14px 16px 16px; background: var(--fill-1); border: 1px solid var(--border-soft); border-radius: var(--r-md); margin-bottom: 14px; } .pr-journey-head { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin-bottom: 10px; } .pr-journey-head svg { width: 14px; height: 14px; color: var(--teal); } .pr-journey-head b { margin-left: auto; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--text-2); } .pr-spark-wrap { position: relative; width: 100%; height: clamp(120px, 25vw, 144px); touch-action: pan-y; cursor: crosshair; } .pr-spark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 100% 0 0); transition: clip-path 1.15s var(--ease-out) 0.3s; } .pr-go .pr-spark { clip-path: inset(0 0 0 0); } /* clean left→right reveal — no dash gaps */ .pr-spark-grid { stroke: var(--grid-line); stroke-width: 1; stroke-dasharray: 2 5; fill: none; } .pr-spark-line { fill: none; } /* one solid, continuous gradient stroke (no dash draw-in) */ .pr-spark-area { opacity: 1; } /* persistent score numbers above each check-in */ .pr-spark-val { position: absolute; transform: translate(-50%, calc(-50% - 15px)); z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: var(--text-2); pointer-events: none; opacity: 0; white-space: nowrap; transition: opacity .35s ease, color .2s; transition-delay: calc(0.7s + var(--di) * 0.1s); } .pr-go .pr-spark-val { opacity: .82; } .pr-spark-val.now { color: var(--teal); font-size: 12.5px; } .pr-go .pr-spark-val.now { opacity: 1; } .pr-go .pr-spark-val.dim { opacity: 0; transition-delay: 0s; } /* crosshair that follows the hover */ .pr-spark-cross { position: absolute; top: 4px; bottom: 22px; width: 1px; background: var(--border-hi); opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity .15s; } .pr-spark-cross.on { opacity: .55; } /* interactive dots (real buttons → keyboard-focusable) */ .pr-spark-dot { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border-radius: 50%; border: none; background: transparent; cursor: pointer; z-index: 3; opacity: 0; transition: opacity .4s ease; transition-delay: calc(0.55s + var(--di) * 0.1s); } .pr-go .pr-spark-dot { opacity: 1; } .pr-spark-dot::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface-hi); border: 2px solid var(--teal); box-shadow: 0 0 10px var(--teal-glow); transition: transform .18s var(--ease-spring), box-shadow .18s; } .pr-spark-dot:hover::after, .pr-spark-dot.active::after { transform: scale(1.32); box-shadow: 0 0 18px var(--teal-glow); } .pr-spark-dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 50%; } .pr-spark-dot.now::after { inset: 6px; background: var(--grad-brand); border-color: rgba(255,255,255,.85); box-shadow: 0 0 16px var(--teal-glow); } /* hover tooltip — score (big) + date + delta */ .pr-spark-tip { position: absolute; transform: translate(-50%, calc(-100% - 16px)); z-index: 5; display: flex; align-items: baseline; gap: 7px; padding: 7px 11px; border-radius: 11px; background: var(--surface-hi); border: 1px solid var(--border-hi); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .15s, left .18s var(--ease-out), top .18s var(--ease-out); } .pr-spark-tip.on { opacity: 1; } .pr-spark-tip b { font-family: var(--font-display); font-weight: 800; font-size: 16px; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pr-spark-tip span { font-size: 11px; color: var(--muted); } .pr-spark-tip em { font-style: normal; font-size: 11px; font-weight: 700; } .pr-spark-tip em.up { color: var(--shield); } .pr-spark-tip em.down { color: var(--danger); } /* start / today axis */ .pr-spark-x { position: absolute; bottom: 0; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); pointer-events: none; } .pr-spark-x-l { left: 0; } .pr-spark-x-r { right: 0; } /* ── Insight chips ── */ .pr-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .pr-ins { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--fill-1); transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ease-out); } .pr-ins:hover { transform: translateY(-1px); background: var(--fill-2); } .pr-ins-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex: none; } .pr-ins-ico svg { width: 17px; height: 17px; } .ins-strong .pr-ins-ico { color: var(--shield); background: var(--shield-soft); } .ins-strong:hover { border-color: rgba(58, 235, 181, 0.35); } .ins-focus .pr-ins-ico { color: var(--warning); background: rgba(255, 181, 71, 0.10); } .ins-focus:hover { border-color: rgba(255, 181, 71, 0.35); } .pr-ins-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pr-ins-txt small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .pr-ins-txt strong { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── 12-system banded grid ── */ .pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pr-sys { --band: var(--blue); --band-soft: var(--blue-soft); padding: 12px 13px 13px; background: var(--fill-1); border: 1px solid var(--border-soft); border-radius: var(--r-sm); position: relative; overflow: hidden; animation: prCardIn 0.5s var(--ease-out) backwards; animation-delay: calc(0.24s + var(--i) * 0.04s); transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s; } .pr-sys:hover { background: var(--fill-2); transform: translateY(-2px); border-color: var(--border); box-shadow: var(--shadow-sm); } .pr-sys.b-strong { --band: var(--shield); --band-soft: var(--shield-soft); } .pr-sys.b-building { --band: var(--blue); --band-soft: var(--blue-soft); } .pr-sys.b-focus { --band: var(--warning); --band-soft: rgba(255, 181, 71, 0.10); } @keyframes prCardIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } } .pr-sys-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; } .pr-sys-name { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pr-d { flex: none; font-family: var(--font-display); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); } .pr-d.pos { color: var(--success); background: var(--shield-soft); } .pr-d.neg { color: var(--warning); background: rgba(255, 181, 71, 0.12); } .pr-d.neu { color: var(--muted); background: var(--fill-2); } .pr-sys-score { font-family: var(--font-display); font-size: 25px; font-weight: 700; line-height: 1; color: var(--text); margin-bottom: 9px; font-variant-numeric: tabular-nums; } .pr-sys-bar { height: 4px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; } .pr-sys-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--band), color-mix(in srgb, var(--band) 55%, transparent)); box-shadow: 0 0 8px var(--band-soft); transition: width 0.9s var(--ease-out); transition-delay: calc(0.35s + var(--i) * 0.045s); } .pr-go .pr-sys-bar i { width: var(--w, 0%); } .pr-legend { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 13px; font-size: 11px; color: var(--muted); } .pr-legend span { display: inline-flex; align-items: center; gap: 6px; } .pr-legend .dot { width: 7px; height: 7px; border-radius: 50%; } .pr-legend .d-strong { background: var(--shield); } .pr-legend .d-building { background: var(--blue); } .pr-legend .d-focus { background: var(--warning); } /* ── Footer ── */ .modal-footer { display: flex; flex-direction: column; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--hairline); flex: none; } .pr-foot-note { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--muted); } .pr-foot-note svg { width: 12px; height: 12px; flex: none; } .modal-footer .btn { width: 100%; min-height: 50px; } @media (min-width: 900px) { .modal-card { min-height: min(760px, calc(100dvh - clamp(28px, 5vw, 76px))); } .pr-history-card { width: calc(100vw - clamp(36px, 4vw, 58px)); max-height: calc(100dvh - clamp(36px, 4vw, 58px)); } .modal-body { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.6fr) minmax(320px, 1.05fr); grid-template-areas: "hero journey grid" "insights journey grid" "insights journey legend"; grid-template-rows: auto 1fr auto; gap: 14px; overflow: hidden; } .pr-hero { grid-area: hero; margin: 0; padding: 16px; gap: 16px; align-self: start; } .pr-ring-wrap { width: 112px; height: 112px; } .pr-num { font-size: 35px; } .pr-label { font-size: 18px; } .pr-journey { grid-area: journey; margin: 0; padding: 14px 16px; align-self: stretch; display: flex; flex-direction: column; min-height: 0; } .pr-spark-wrap { flex: 1; min-height: 286px; height: auto; } .pr-insights { grid-area: insights; margin: 0; grid-template-columns: 1fr; align-self: start; } .pr-grid { grid-area: grid; align-self: stretch; grid-template-columns: repeat(2, 1fr); gap: 9px; align-content: start; } .pr-legend { grid-area: legend; align-self: end; justify-self: stretch; justify-content: center; margin: 0; padding-top: 2px; } .modal-footer { flex-direction: row; align-items: center; padding: 12px 22px 14px; } .modal-footer .btn { width: min(260px, 36%); margin-left: auto; } .pr-foot-note { justify-content: flex-start; } } @media (max-width: 899px) { .modal-backdrop { padding: 0; } .modal-card { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; } } /* ── Mobile: bottom sheet ── */ @media (max-width: 640px) { .modal-backdrop { padding: 0; align-items: flex-end; } .modal-card { max-width: none; max-height: none; height: 100dvh; border-radius: 0; animation: modalSheetIn 0.24s var(--ease-out) both; } @keyframes modalSheetIn { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .modal-header { padding: 16px 18px 13px; } .modal-body { padding: 16px; } .pr-hero { flex-direction: column; gap: 14px; padding: 18px 16px; text-align: center; } .pr-ring-wrap { width: 116px; height: 116px; } .pr-meta { align-items: center; width: 100%; } .pr-chips { justify-content: center; } .pr-ms { width: 100%; } .pr-insights { grid-template-columns: 1fr; } .pr-grid { grid-template-columns: repeat(2, 1fr); } .pr-count { display: none; } .modal-footer { padding: 12px 16px 16px; } } /* ── Reduced motion: instant, calm ── */ @media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-card, .pr-rise, .pr-sys { animation: none !important; } .pr-ring-fill, .pr-ms-track i, .pr-sys-bar i, .pr-spark, .pr-spark-dot, .pr-spark-val { transition: none !important; } .pr-spark { clip-path: none !important; } .pr-go .pr-spark-dot { opacity: 1; } .pr-go .pr-spark-val { opacity: .82; } .pr-go .pr-spark-val.now { opacity: 1; } } /* ═════════════════════════════════════════════════════════════════════════════ */ .options { display: grid; gap: 13px; margin-top: clamp(24px, 4vw, 36px); } .options.cols-1 { grid-template-columns: 1fr; } /* 2-col grids fill DOWN the left column first (column flow) so sequential answers read top-to-bottom; --opt-rows is set inline by optionClass's renderer. An odd count centers its last option on a full-width row. */ .options.cols-2 { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--opt-rows, 3), auto); } .options.cols-2.odd-center > .option:last-child { grid-row: -1; grid-column: 1 / -1; justify-self: center; width: calc(50% - 6.5px); } .options.cols-2.dense.odd-center > .option:last-child { width: calc(50% - 4.5px); } .options.scale { grid-template-columns: repeat(5, 1fr); gap: 9px; } /* staggered cascade — each card rises in sequence. `backwards` fill (NOT forwards) so the finished animation never overrides the hover transform (the F006/F007/F013 fill-forwards trap, designed around). */ .options .option { animation: optIn .45s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 35ms); } @keyframes optIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .option { position: relative; display: flex; align-items: center; gap: 15px; text-align: left; width: 100%; background: rgba(255,255,255,0.028); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 19px 20px; min-height: 64px; cursor: pointer; overflow: hidden; transition: border-color 0.22s, background 0.22s, box-shadow 0.25s var(--ease-out), transform 0.14s var(--ease-spring); -webkit-tap-highlight-color: transparent; } .option::before { content:''; position:absolute; inset:0; opacity:0; background: var(--teal-soft); transition: opacity 0.22s; } .option:hover { border-color: rgba(20,224,203,0.4); transform: translateY(-2px); } .option:hover::before { opacity: 0.5; } .option:active { transform: scale(0.985); } .option.selected { border-color: var(--border-hi); box-shadow: 0 0 30px rgba(20,224,203,0.14), inset 0 0 0 1px rgba(20,224,203,0.3); } .option.selected::before { opacity: 1; } .option > * { position: relative; } .option .opt-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(20,224,203,0.16), rgba(79,142,247,0.10)); color: var(--teal); transition: background 0.22s, color 0.22s, transform 0.22s var(--ease-spring), box-shadow 0.22s; } .option.selected .opt-ico { background: var(--grad-brand); color: var(--ink-on-brand); transform: scale(1.06); box-shadow: 0 8px 22px -8px var(--teal-glow); } .option .opt-ico svg { width: 21px; height: 21px; } .option .opt-text { display: flex; flex-direction: column; gap: 2px; } .option .opt-label { font-weight: 600; font-size: 16px; } .option .opt-sub { font-size: 12.5px; color: var(--muted); } .option .opt-check { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; flex: none; border: 2px solid var(--border); display: grid; place-items: center; transition: 0.2s; } .option.selected .opt-check { background: var(--grad-brand); border-color: transparent; box-shadow: 0 0 16px rgba(20,224,203,0.5); } .option .opt-check svg { width: 13px; height: 13px; color: var(--ink-on-brand); opacity: 0; transform: scale(0.5); transition: 0.18s var(--ease-spring); } .option.selected .opt-check svg { opacity: 1; transform: scale(1); } .options.scale .option { flex-direction: column; gap: 10px; text-align: center; padding: 18px 6px 14px; min-height: 96px; justify-content: center; } .options.scale .opt-ico, .options.scale .opt-check { display: none; } .options.scale .opt-label { font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: .1px; transition: color 0.2s; } /* the INTENSITY RAMP — a rising "signal" meter. Each step carries its own brand hue (teal → violet) and lights one more bar than the step before it. */ .options.scale .opt-meter { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 30px; } .options.scale .opt-bar { width: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 28%, transparent); transition: background 0.25s, box-shadow 0.25s, transform 0.25s var(--ease-spring); } .options.scale .opt-bar:nth-child(1) { height: 34%; } .options.scale .opt-bar:nth-child(2) { height: 50%; } .options.scale .opt-bar:nth-child(3) { height: 66%; } .options.scale .opt-bar:nth-child(4) { height: 83%; } .options.scale .opt-bar:nth-child(5) { height: 100%; } .options.scale .opt-bar.lit { background: color-mix(in srgb, var(--ramp) 68%, transparent); } .option[data-ramp="1"] { --ramp: var(--teal); } .option[data-ramp="2"] { --ramp: #35c4ea; } .option[data-ramp="3"] { --ramp: var(--blue); } .option[data-ramp="4"] { --ramp: #8a7bff; } .option[data-ramp="5"] { --ramp: var(--violet); } [data-theme="light"] .option[data-ramp="2"] { --ramp: #0e96c8; } [data-theme="light"] .option[data-ramp="4"] { --ramp: #6a5be0; } .options.scale .option:hover { border-color: color-mix(in srgb, var(--ramp, var(--teal)) 45%, transparent); } .options.scale .option:hover .opt-bar.lit { background: var(--ramp); } .options.scale .option:hover .opt-label { color: var(--text); } .options.scale .option.selected { border-color: var(--ramp); background: color-mix(in srgb, var(--ramp) 9%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--ramp) 26%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ramp) 35%, transparent); } .options.scale .option.selected::before { opacity: 0; } .options.scale .option.selected .opt-bar { background: color-mix(in srgb, var(--muted) 34%, transparent); } .options.scale .option.selected .opt-bar.lit { background: var(--ramp); box-shadow: 0 0 12px color-mix(in srgb, var(--ramp) 60%, transparent); transform: translateY(-1px); } .options.scale .option.selected .opt-label { color: var(--text); } /* Dense mode — kicks in when a question has >6 choices (e.g. the diet plan's 12). Roughly halves each row's height (tighter padding, smaller icon, smaller gap) so the full 2-column set + the Back button all fit within the fold. */ .options.dense { gap: 9px; margin-top: clamp(16px, 2.6vw, 22px); } .options.dense .option { padding: 10px 16px; min-height: 0; gap: 12px; } .options.dense .opt-ico { width: 32px; height: 32px; border-radius: 9px; } .options.dense .opt-ico svg { width: 17px; height: 17px; } .options.dense .opt-label { font-size: 14.5px; } .options.dense .opt-check { width: 21px; height: 21px; } .q-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: var(--w-flow); margin: clamp(22px, 4vw, 34px) auto 0; } .btn-back { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 12px; border-radius: var(--r-sm); transition: 0.2s; } .btn-back:hover { color: var(--text); background: rgba(255,255,255,0.04); } .btn-back svg { width: 16px; height: 16px; } /* ═══ Budget slider (§P4.E) — one continuous $ amount, log-scaled $50→$1B ═══ */ .budget-slider { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(24px, 4vw, 40px); animation: optIn .5s var(--ease-out) backwards; } .bs-readout { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; } .bs-amount { font-family: var(--font-display); font-weight: 700; line-height: 1; font-size: clamp(38px, 7.5vw, 56px); letter-spacing: -1px; font-variant-numeric: tabular-nums; background: var(--grad-brand-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--teal); filter: drop-shadow(0 6px 30px rgba(20,224,203,0.25)); transition: font-size .2s var(--ease-out); } .bs-amount.xl { font-size: clamp(30px, 6vw, 44px); } .bs-suffix { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-size: clamp(14px, 2.2vw, 18px); } .bs-tierlabel { margin-top: 10px; font-size: 14px; color: var(--text-2); font-weight: 500; min-height: 1.2em; transition: color .2s; } .bs-track { width: 100%; max-width: 560px; margin: clamp(26px, 4vw, 38px) auto 0; } .bs-range { --fill: 12%; -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: transparent; border-radius: var(--r-pill); cursor: pointer; outline: none; } .bs-range::-webkit-slider-runnable-track { height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--teal), var(--blue) 60%, var(--violet)) no-repeat, rgba(255,255,255,0.07); background-size: var(--fill) 100%, 100% 100%; box-shadow: inset 0 0 0 1px var(--border); } .bs-range::-moz-range-track { height: 10px; border-radius: var(--r-pill); background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px var(--border); } .bs-range::-moz-range-progress { height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--teal), var(--blue) 60%, var(--violet)); } .bs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); cursor: grab; box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 6px rgba(20,224,203,0.14), 0 0 22px var(--teal-glow); transition: transform .14s var(--ease-spring), box-shadow .2s; } .bs-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); cursor: grab; box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 6px rgba(20,224,203,0.14), 0 0 22px var(--teal-glow); } .bs-range:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 0 9px rgba(20,224,203,0.18), 0 0 30px var(--teal-glow); } .bs-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--bg-1), 0 0 0 7px var(--teal); } .bs-ends { width: 100%; max-width: 560px; margin: 12px auto 0; display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .bs-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(22px, 4vw, 32px); } .bs-preset { background: rgba(255,255,255,0.04); border: 1.5px solid var(--border); color: var(--text-2); font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: var(--r-pill); cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .14s var(--ease-spring); } .bs-preset:hover { border-color: rgba(20,224,203,0.4); color: var(--text); transform: translateY(-2px); } .bs-preset.on { border-color: var(--border-hi); color: var(--text); background: var(--teal-soft); box-shadow: 0 0 24px rgba(20,224,203,0.18); } /* ══ BLOOD WORK · LAB PANEL (slider per biomarker) ═══════════════════════════ */ /* The lab panel breaks out of the narrow one-question column to use much more of the screen — a dense, scannable grid of biomarker dials. */ #screen-question .q-wrap:has(.lab-panel) { max-width: min(1500px, 94vw); } /* The intro subtext isn't clamped to 48ch here — let it use the wider column so the second sentence stays on one line on desktop/tablet (wraps on phones). */ #screen-question .q-wrap:has(.lab-panel) .q-subtext { max-width: min(900px, 92vw); } .lab-panel { margin-top: clamp(18px, 3vw, 28px); animation: optIn .5s var(--ease-out) backwards; } .lp-upload { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto clamp(18px, 3vw, 26px); padding: 16px; max-width: min(980px, 100%); border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--border)); border-radius: 22px; background: radial-gradient(520px 180px at 18% 0%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--fill-1) 92%, transparent), color-mix(in srgb, var(--blue-soft) 42%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 52px color-mix(in srgb, var(--blue-2) 12%, transparent); } .lp-upload-copy { display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; } .lp-upload-ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: 14px; color: var(--teal); background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent); } .lp-upload-ic svg { width: 19px; height: 19px; } .lp-upload-copy b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--text); } .lp-upload-copy span:not(.lp-upload-ic) { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; } .lp-upload-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--grad-brand); color: var(--ink-on-brand); font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: 0 16px 34px color-mix(in srgb, var(--teal) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .18s var(--ease-spring), box-shadow .2s; } .lp-upload-btn svg { width: 15px; height: 15px; } .lp-upload-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 48px color-mix(in srgb, var(--teal) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.45); } .lp-intro { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; color: var(--text-2); font-size: 13.5px; margin-bottom: 18px; } .lp-intro svg { width: 18px; height: 18px; color: var(--teal); flex: none; } .lp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 620px) { .lp-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px) { .lp-grid { grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 1400px) { .lp-grid { grid-template-columns: repeat(4, 1fr); } } .lp-card { background: var(--glass, rgba(255,255,255,0.03)); border: 1.5px solid var(--border); border-radius: 16px; padding: 14px 16px; transition: border-color .2s, background .2s; } .lp-card.is-set { border-color: var(--border-hi); background: var(--teal-soft); } .lp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lp-name { font-weight: 700; font-size: 14px; color: var(--text); } .lp-unit { color: var(--muted); font-weight: 500; font-size: 12px; } .lp-toggle { flex: none; background: rgba(255,255,255,0.05); border: 1.5px solid var(--border); color: var(--text-2); font-weight: 600; font-size: 12.5px; padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .lp-toggle:hover { border-color: var(--border-hi); color: var(--text); } .lp-card.is-set .lp-toggle { background: rgba(255,255,255,0.06); } .lp-body { margin-top: 14px; } .lp-readout { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .lp-value { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .lp-band { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill); border: 1.5px solid var(--border); color: var(--muted); } .lp-band:empty { display: none; } .lp-band.tone-ok { color: var(--shield, #14e0cb); border-color: color-mix(in srgb, var(--shield, #14e0cb) 55%, var(--border)); background: var(--teal-soft); } .lp-band.tone-watch { color: var(--warning, #f5a623); border-color: color-mix(in srgb, var(--warning, #f5a623) 55%, var(--border)); background: color-mix(in srgb, var(--warning, #f5a623) 12%, transparent); } .lp-band.tone-warn { color: #ff6b6b; border-color: color-mix(in srgb, #ff6b6b 55%, var(--border)); background: color-mix(in srgb, #ff6b6b 12%, transparent); } .lp-range { --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: transparent; border-radius: var(--r-pill); cursor: pointer; outline: none; } .lp-range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px var(--border); } .lp-range::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px var(--border); } .lp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); cursor: grab; box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 0 5px rgba(20,224,203,0.14); transition: transform .14s var(--ease-spring); } .lp-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); cursor: grab; box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 0 5px rgba(20,224,203,0.14); } .lp-range:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; } .lp-ends { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .lp-ref { color: var(--muted); font-size: 10.5px; text-align: center; flex: 1; } .lp-count { text-align: center; color: var(--muted); font-size: 13px; margin-top: 18px; } .blood-upload-card { width: min(980px, calc(100vw - 36px)); height: auto; min-height: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 7%, transparent) 1px, transparent 1px), linear-gradient(0deg, color-mix(in srgb, var(--blue-2) 6%, transparent) 1px, transparent 1px), radial-gradient(860px 380px at 18% -10%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 68%), radial-gradient(720px 420px at 100% 0%, color-mix(in srgb, var(--blue-2) 18%, transparent), transparent 64%), linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), var(--surface-hi)); background-size: 38px 38px, 38px 38px, auto, auto, auto; } .blood-upload-card.has-results { width: min(1280px, calc(100vw - 28px)); height: min(820px, calc(100dvh - 36px)); min-height: min(680px, calc(100dvh - 36px)); } .blood-upload-card.is-empty { width: min(980px, calc(100vw - 36px)); max-height: calc(100dvh - 36px); } .blood-upload-card.is-processing { width: min(980px, calc(100vw - 36px)); max-height: calc(100dvh - 36px); } .blood-upload-head { position: relative; z-index: 2; padding: 16px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-hi) 86%, transparent), color-mix(in srgb, var(--surface) 62%, transparent)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .blood-upload-mark { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; color: var(--teal); border-radius: 15px; background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); box-shadow: 0 16px 42px color-mix(in srgb, var(--teal) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.18); } .blood-upload-mark svg { width: 21px; height: 21px; } .blood-upload-body { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: clamp(16px, 2.4vw, 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .blood-upload-card.is-empty .blood-upload-body, .blood-upload-card.is-processing .blood-upload-body { flex: 0 0 auto; overflow: visible; scrollbar-gutter: auto; } .blood-upload-card.is-empty .blood-upload-body { grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-items: center; padding-inline: 24px; } .blood-upload-card.has-results .blood-upload-body { grid-template-columns: minmax(0, 1fr); align-items: start; } .blood-upload-body::-webkit-scrollbar { width: 10px; } .blood-upload-body::-webkit-scrollbar-track { background: transparent; } .blood-upload-body::-webkit-scrollbar-thumb { border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; background-color: color-mix(in srgb, var(--teal) 42%, var(--border)); } .blood-drop { position: relative; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 22px 26px; text-align: center; cursor: pointer; border-radius: 24px; border: 1.5px dashed color-mix(in srgb, var(--teal) 44%, var(--border)); background: radial-gradient(520px 210px at 50% 50%, color-mix(in srgb, var(--teal) 17%, transparent), transparent 72%), linear-gradient(135deg, color-mix(in srgb, var(--fill-1) 95%, transparent), color-mix(in srgb, var(--fill-2) 80%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 24px 70px color-mix(in srgb, var(--blue-2) 8%, transparent); overflow: hidden; transition: border-color .25s, transform .25s var(--ease-out), box-shadow .25s; } .blood-upload-card.is-empty .blood-drop { width: min(100%, 820px); transform: translateX(14px); } .blood-drop:hover { border-color: color-mix(in srgb, var(--teal) 68%, var(--border)); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 26px 80px color-mix(in srgb, var(--teal) 13%, transparent); } .blood-upload-card.is-empty .blood-drop:hover { transform: translateX(14px) translateY(-1px); } .blood-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .blood-drop > :not(input) { position: relative; z-index: 1; } .blood-drop-grid { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 12%, transparent) 1px, transparent 1px), linear-gradient(0deg, color-mix(in srgb, var(--blue-2) 9%, transparent) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); opacity: .8; } .blood-drop-scan { position: absolute; z-index: 0; left: 9%; right: 9%; top: 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--teal), color-mix(in srgb, var(--blue-2) 72%, var(--teal)), transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--teal) 48%, transparent); animation: bloodDropScan 3.2s ease-in-out infinite; } .blood-drop-orb { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; color: var(--ink-on-brand); background: var(--grad-brand); box-shadow: 0 22px 58px color-mix(in srgb, var(--teal) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.45); } .blood-drop-orb svg { width: 23px; height: 23px; } .blood-drop strong { max-width: 640px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); line-height: 1.02; color: var(--text); letter-spacing: 0; } .blood-drop em { max-width: 590px; font-style: normal; color: var(--text-2); font-size: 12.5px; line-height: 1.38; } .blood-drop-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; } .blood-drop-badges i { font-style: normal; font-size: 9.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding: 5px 8px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: color-mix(in srgb, var(--fill-1) 82%, transparent); } .blood-upload-state { justify-self: center; max-width: 100%; text-align: center; color: var(--text-2); font-weight: 800; font-size: 12px; padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: color-mix(in srgb, var(--fill-1) 78%, transparent); } .blood-upload-card.is-empty .blood-upload-state { display: none; } .blood-upload-card.is-empty .blood-upload-state b { font-family: var(--font-display); color: var(--text); font-size: 13px; } .blood-upload-card.is-empty .blood-upload-state span { color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 650; } .blood-upload-card.is-processing .blood-upload-state { display: none; } .blood-upload-card.is-processing .blood-drop { display: none; } .blood-upload-card.has-results .blood-drop { display: none; } .blood-upload-card.has-results .blood-upload-state { display: none; position: sticky; top: 0; align-self: start; justify-self: stretch; gap: 12px; min-height: 0; height: auto; text-align: left; border-radius: 24px; padding: 18px; background: radial-gradient(260px 280px at 50% 0%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--surface-hi) 72%, transparent), color-mix(in srgb, var(--fill-1) 90%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 44px color-mix(in srgb, var(--blue-2) 8%, transparent); } .blood-upload-card.has-results .blood-upload-state::before { content: ''; width: 46px; height: 46px; border-radius: 17px; background: var(--grad-brand); box-shadow: 0 16px 38px color-mix(in srgb, var(--teal) 24%, transparent); } .blood-upload-card.has-results .blood-upload-state b { font-family: var(--font-display); color: var(--text); font-size: 17px; line-height: 1.05; letter-spacing: 0; } .blood-upload-card.has-results .blood-upload-state span { color: var(--text-2); font-size: 12.5px; line-height: 1.45; font-weight: 700; } .blood-upload-card.has-results .blood-upload-state i { display: inline-flex; align-items: center; gap: 7px; width: fit-content; font-style: normal; color: var(--teal); font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; padding: 7px 10px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--border)); background: var(--teal-soft); } .blood-upload-card.has-results .blood-upload-state svg { width: 14px; height: 14px; flex: none; } .blood-processing { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 16px; padding: 18px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--border)); background: radial-gradient(420px 180px at 12% 0%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 70%), radial-gradient(360px 170px at 96% 18%, color-mix(in srgb, var(--blue-2) 16%, transparent), transparent 68%), linear-gradient(135deg, color-mix(in srgb, var(--fill-1) 94%, transparent), color-mix(in srgb, var(--fill-2) 82%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 46px color-mix(in srgb, var(--teal) 13%, transparent); overflow: hidden; } .blood-processing[hidden] { display: none; } .blood-processing::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--teal) 12%, transparent) 44%, transparent 66%); transform: translateX(-100%); animation: bloodScan 1.9s ease-in-out infinite; } .blood-processing-core { position: relative; width: 68px; height: 68px; flex: none; display: grid; place-items: center; } .blood-processing-core span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--teal); border-right-color: color-mix(in srgb, var(--blue-2) 55%, transparent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--teal) 42%, transparent)); animation: bloodOrbit 1.25s linear infinite; } .blood-processing-core span:nth-child(2) { inset: 9px; animation-duration: 1.8s; animation-direction: reverse; border-top-color: var(--blue-2); } .blood-processing-core span:nth-child(3) { inset: 18px; animation-duration: 2.25s; border-top-color: var(--violet); } .blood-processing-core i { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 13px; color: var(--ink-on-brand); background: var(--grad-brand); box-shadow: 0 0 30px color-mix(in srgb, var(--teal) 30%, transparent); } .blood-processing-core svg { width: 17px; height: 17px; } .blood-processing-copy { position: relative; min-width: 0; text-align: left; } .blood-processing-copy b { display: block; font-family: var(--font-display); color: var(--text); font-size: 16px; } .blood-processing-copy span { display: block; margin-top: 3px; color: var(--text-2); font-size: 12.5px; line-height: 1.45; } .blood-processing-rail { grid-column: 1 / -1; height: 5px; border-radius: var(--r-pill); overflow: hidden; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--border-soft); } .blood-processing-rail i { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--grad-brand); box-shadow: 0 0 18px color-mix(in srgb, var(--teal) 55%, transparent); animation: bloodRail 1.55s ease-in-out infinite; } @keyframes bloodOrbit { to { transform: rotate(360deg); } } @keyframes bloodScan { 0% { transform: translateX(-120%); } 55%,100% { transform: translateX(120%); } } @keyframes bloodRail { 0% { transform: translateX(-110%); } 100% { transform: translateX(245%); } } .blood-upload-results { display: grid; grid-template-columns: 1fr; gap: 16px; min-width: 0; padding-bottom: 6px; } .blood-result-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 11%, var(--fill-1)), color-mix(in srgb, var(--blue-2) 8%, var(--fill-1))); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } .blood-result-summary span { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; } .blood-result-summary b { display: block; margin-top: 3px; font-family: var(--font-display); color: var(--text); font-size: 19px; letter-spacing: 0; } .blood-stat-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .blood-stat-row span { min-width: 86px; padding: 9px 11px; border-radius: 15px; border: 1px solid var(--border-soft); background: color-mix(in srgb, var(--surface-hi) 72%, transparent); color: var(--text-2); text-transform: none; letter-spacing: 0; text-align: center; } .blood-stat-row span b { display: inline; margin: 0 4px 0 0; font-size: 18px; color: var(--teal); } .blood-result-section { display: grid; gap: 11px; padding: 14px; border-radius: 22px; border: 1px solid var(--border-soft); background: color-mix(in srgb, var(--fill-1) 84%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .blood-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 0 2px; text-align: left; } .blood-result-head b { font-family: var(--font-display); font-size: 15px; color: var(--text); } .blood-result-head span { color: var(--muted); font-size: 12px; } .blood-match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 10px; } .blood-match { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border-radius: 16px; border: 1px solid var(--border-soft); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-hi) 54%, transparent), color-mix(in srgb, var(--fill-1) 90%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .blood-match span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 12.5px; } .blood-match b { color: var(--text); font-family: var(--font-display); font-size: 13.5px; white-space: nowrap; } .blood-review-section { padding-top: 4px; } .blood-review-card { display: grid; gap: 12px; padding: 14px; border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--warning) 42%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 11%, transparent) 1px, transparent 1px), linear-gradient(0deg, color-mix(in srgb, var(--teal) 7%, transparent) 1px, transparent 1px), linear-gradient(135deg, color-mix(in srgb, var(--warning) 9%, var(--fill-1)), color-mix(in srgb, var(--fill-1) 92%, transparent)); background-size: 32px 32px, 32px 32px, auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } .blood-review-card.is-accepted { border-color: color-mix(in srgb, var(--teal) 48%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, var(--fill-1)), var(--fill-1)); } .blood-review-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .blood-review-top b { display: block; font-family: var(--font-display); color: var(--text); font-size: 15px; } .blood-review-top span { display: block; margin-top: 2px; color: var(--text-2); font-size: 12px; } .blood-review-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .blood-review-value { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .blood-review-confidence { flex: none; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); border-radius: var(--r-pill); padding: 5px 10px; color: var(--text-2); background: color-mix(in srgb, var(--warning) 8%, transparent); font-size: 11px; font-weight: 800; } .blood-review-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: transparent; border-radius: var(--r-pill); cursor: pointer; } .blood-review-range:disabled { opacity: .45; cursor: not-allowed; } .blood-review-range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px var(--border); } .blood-review-range::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px var(--border); } .blood-review-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); box-shadow: 0 3px 12px rgba(0,0,0,.38), 0 0 0 5px rgba(20,224,203,.13); } .blood-review-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); box-shadow: 0 3px 12px rgba(0,0,0,.38), 0 0 0 5px rgba(20,224,203,.13); } .blood-review-scale { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: -5px; color: var(--muted-2); font-size: 11px; font-variant-numeric: tabular-nums; } .blood-review-scale em { min-width: 0; text-align: center; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .blood-candidates { display: flex; flex-wrap: wrap; gap: 8px; } .blood-candidate { border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 11px; background: rgba(255,255,255,.04); color: var(--text-2); font-size: 12px; font-weight: 800; cursor: pointer; } .blood-candidate.on { border-color: color-mix(in srgb, var(--teal) 54%, var(--border)); color: var(--text); background: var(--teal-soft); } .blood-review-source { color: var(--muted); font-size: 11.5px; line-height: 1.45; text-align: left; border-top: 1px solid var(--border-soft); padding-top: 10px; } .blood-empty { display: flex; align-items: center; justify-content: center; gap: 10px; grid-column: 1 / -1; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--text-2); } .blood-empty svg { width: 18px; height: 18px; color: var(--warning); flex: none; } .blood-upload-foot { position: relative; z-index: 2; background: linear-gradient(0deg, color-mix(in srgb, var(--surface-hi) 88%, transparent), color-mix(in srgb, var(--surface) 64%, transparent)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .blood-upload-foot .btn { width: min(280px, 42%); } @keyframes bloodDropScan { 0%,100% { transform: translateY(-34px); opacity: .25; } 50% { transform: translateY(150px); opacity: .9; } } @media (prefers-reduced-motion: reduce) { .blood-drop-scan, .blood-processing::before, .blood-processing-core span, .blood-processing-rail i { animation: none !important; } .blood-drop:hover { transform: none; } } @media (max-width: 900px) { .blood-upload-card { width: min(760px, calc(100vw - 28px)); height: min(820px, calc(100dvh - 28px)); } .blood-upload-card.is-empty, .blood-upload-card.is-processing { height: auto; min-height: 0; } .blood-upload-card.is-empty .blood-upload-body { grid-template-columns: 1fr; } .blood-upload-card.is-empty .blood-drop { transform: none; } .blood-upload-card.is-empty .blood-drop:hover { transform: translateY(-1px); } .blood-upload-card.has-results .blood-upload-body { grid-template-columns: 1fr; } .blood-upload-card.is-empty .blood-upload-state { min-height: 0; } .blood-upload-card.has-results .blood-upload-state { position: relative; top: auto; } .blood-result-summary { align-items: stretch; flex-direction: column; } .blood-stat-row { justify-content: stretch; } .blood-stat-row span { flex: 1; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .blood-upload-card.is-empty .blood-drop, .blood-upload-card.is-empty .blood-drop:hover { transform: none; } } @media (max-width: 700px) { .lp-upload { flex-direction: column; align-items: stretch; } .lp-upload-btn { width: 100%; } .blood-upload-backdrop { align-items: stretch; justify-content: stretch; padding: 0; } .blood-upload-card, .blood-upload-card.is-empty, .blood-upload-card.is-processing, .blood-upload-card.has-results { width: 100vw; height: 100dvh; min-height: 100dvh; max-height: 100dvh; border-radius: 0; animation: none; transform: none; } .blood-upload-head { padding: 16px; } .blood-upload-body, .blood-upload-card.is-empty .blood-upload-body, .blood-upload-card.is-processing .blood-upload-body, .blood-upload-card.has-results .blood-upload-body { flex: 1 1 auto; min-height: 0; padding: 16px; gap: 14px; overflow-y: auto; scrollbar-gutter: stable; } .blood-upload-card.is-empty .blood-upload-body, .blood-upload-card.is-processing .blood-upload-body { align-content: stretch; } .blood-drop { min-height: 100%; border-radius: 22px; } .blood-processing { min-height: 100%; } .blood-drop strong { font-size: clamp(25px, 9vw, 38px); } .blood-drop-badges i { font-size: 10px; padding: 6px 8px; } .blood-processing { grid-template-columns: 1fr; justify-items: center; text-align: center; } .blood-processing-copy { text-align: center; } .blood-review-top, .blood-review-mid, .blood-result-head { align-items: stretch; flex-direction: column; } .blood-match-grid { grid-template-columns: 1fr; } .blood-upload-foot .btn { width: 100%; } } @media (max-width: 430px) { .blood-upload-mark { width: 38px; height: 38px; border-radius: 13px; } .blood-drop { min-height: 40dvh; padding: 18px; } .blood-drop-orb { width: 62px; height: 62px; border-radius: 21px; } .blood-result-summary b { font-size: 16px; } .blood-stat-row { display: grid; grid-template-columns: 1fr; } .blood-review-value { font-size: 23px; } } /* =========================================================================== 3) PROCESSING · F373 — WORDLESS $70M CINEMATIC ENGINE --------------------------------------------------------------------------- A living, gradient IDLife Shield breathing at the center of orbiting light: a soft aura, a faint data grid, three counter-rotating gradient rings, a radar sweep, three orbiting satellites, and drifting sparks. No text at all. Every colour is a token (or color-mix) so BOTH themes read clean; sized in clamp() so it's gorgeous on phone, tablet and computer; fully reduced-motion safe (freezes into a still, composed emblem). =========================================================================== */ #screen-processing { align-items: center; justify-content: center; } #screen-processing .flow.proc-flow { display: grid; place-items: center; min-height: 60vh; gap: 0; } .proc-stage { position: relative; width: clamp(210px, 46vw, 330px); aspect-ratio: 1; display: grid; place-items: center; } .proc-stage > * { position: absolute; inset: 0; margin: auto; } /* ambient aura — a deep radial breath behind everything */ .proc-aura { width: 150%; height: 150%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--teal) 26%, transparent) 0%, color-mix(in srgb, var(--blue-2) 16%, transparent) 34%, transparent 68%); filter: blur(26px); animation: pcAura 5.6s var(--ease-out) infinite; } @keyframes pcAura { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* faint intelligence grid — a masked dot-field that slowly drifts */ .proc-grid { width: 78%; height: 78%; border-radius: 50%; pointer-events: none; opacity: .5; background-image: radial-gradient(color-mix(in srgb, var(--teal) 40%, transparent) 1px, transparent 1.4px); background-size: 13px 13px; -webkit-mask: radial-gradient(circle, #000 32%, transparent 70%); mask: radial-gradient(circle, #000 32%, transparent 70%); animation: pcGrid 9s linear infinite; } @keyframes pcGrid { to { transform: rotate(360deg); } } /* three counter-rotating gradient rings (conic → masked to a hairline arc) */ .proc-ring { border-radius: 50%; pointer-events: none; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); } .proc-ring.pr1 { width: 100%; height: 100%; background: conic-gradient(from 0deg, transparent 0 58%, var(--teal) 82%, transparent 100%); filter: drop-shadow(0 0 10px var(--teal-glow)); animation: pcSpin 2.4s linear infinite; } .proc-ring.pr2 { width: 76%; height: 76%; background: conic-gradient(from 180deg, transparent 0 62%, var(--blue) 86%, transparent 100%); animation: pcSpin 3.4s linear infinite reverse; } .proc-ring.pr3 { width: 53%; height: 53%; background: conic-gradient(from 90deg, transparent 0 64%, var(--violet) 88%, transparent 100%); animation: pcSpin 2.9s linear infinite; } @keyframes pcSpin { to { transform: rotate(360deg); } } /* radar sweep — a wide soft wedge that rotates over the whole stage */ .proc-scan { width: 100%; height: 100%; border-radius: 50%; pointer-events: none; opacity: .6; background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--teal) 48%, transparent) 88%, transparent 98%); -webkit-mask: radial-gradient(circle, transparent 26%, #000 28%); mask: radial-gradient(circle, transparent 26%, #000 28%); animation: pcSpin 3.8s linear infinite; will-change: transform; } /* orbiting satellites — light nodes riding invisible tracks at 3 radii */ .proc-sat { width: 100%; height: 100%; border-radius: 50%; pointer-events: none; } .proc-sat i { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); } .proc-sat.s1 { animation: pcSpin 3.1s linear infinite; } .proc-sat.s1 i { transform: translateY(calc(-1 * clamp(105px, 23vw, 165px))); } .proc-sat.s2 { width: 76%; height: 76%; animation: pcSpin 4.6s linear infinite reverse; } .proc-sat.s2 i { background: var(--blue); box-shadow: 0 0 12px var(--blue); transform: translateY(calc(-1 * clamp(80px, 17.5vw, 125px))); width: 7px; height: 7px; } .proc-sat.s3 { width: 53%; height: 53%; animation: pcSpin 3.7s linear infinite; } .proc-sat.s3 i { background: var(--violet); box-shadow: 0 0 12px var(--violet); transform: translateY(calc(-1 * clamp(56px, 12vw, 87px))); width: 6px; height: 6px; } /* the halo behind the shield — a glass jewel disc */ .proc-halo { width: 43%; height: 43%; border-radius: 30%; background: var(--glass-bg); border: 1px solid var(--border-hi); box-shadow: var(--glow-teal), inset 0 1px 0 rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: pcHalo 3s var(--ease-out) infinite; } @keyframes pcHalo { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* the living gradient IDLife Shield at the heart */ .proc-core { width: 30%; height: 30%; display: grid; place-items: center; filter: drop-shadow(0 8px 20px var(--teal-glow)) drop-shadow(0 2px 4px rgba(6,14,34,.35)); animation: pcBreath 2.6s ease-in-out infinite; } .proc-core svg { width: 100%; height: 100%; display: block; overflow: visible; } /* the engraved iD mark sits pressed into the shield (hairline shadow) and pulses a whisper of brightness in time with the shield's breath */ .pc-shield-mark { filter: drop-shadow(0 .7px .5px rgba(6,14,34,.42)); animation: pcMark 2.6s ease-in-out infinite; } @keyframes pcBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } } @keyframes pcMark { 0%,100% { opacity: .92; } 50% { opacity: 1; } } /* drifting sparks — a whisper of light rising through the stage */ .proc-sparks i { position: absolute; bottom: 12%; border-radius: 50%; width: 3px; height: 3px; background: color-mix(in srgb, var(--teal) 80%, #fff); box-shadow: 0 0 8px var(--teal); opacity: 0; animation: pcSpark 3.4s ease-in-out infinite; } .proc-sparks i:nth-child(1) { left: 22%; animation-delay: .0s; } .proc-sparks i:nth-child(2) { left: 38%; animation-delay: .7s; } .proc-sparks i:nth-child(3) { left: 52%; animation-delay: 1.3s; } .proc-sparks i:nth-child(4) { left: 64%; animation-delay: .4s; } .proc-sparks i:nth-child(5) { left: 76%; animation-delay: 1.8s; } .proc-sparks i:nth-child(6) { left: 30%; animation-delay: 2.3s; } @keyframes pcSpark { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-140px) scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } } /* =========================================================================== 4) SCORE REVEAL =========================================================================== */ #screen-reveal { align-items: stretch; justify-content: flex-start; padding: 0; } #screen-reveal .flow { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 3vw, 28px); } .reveal-topbar { position: sticky; top: 0; z-index: 30; padding-right: calc(clamp(18px, 4vw, 40px) + 50px); } .reveal-topbar .flow-topbar-inner { max-width: none; justify-content: space-between; } .reveal-stagebar { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 18px); min-width: 0; } .reveal-stagebar span, .reveal-stagebar b { font-family: var(--font-display); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .04em; white-space: nowrap; } .reveal-stagebar span { color: var(--muted); } .reveal-stagebar b { color: var(--blue-2); } .reveal-stagebar i { width: clamp(20px, 5vw, 86px); height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--blue-2), var(--violet)); opacity: .78; } .reveal-flow { width: min(1320px, calc(100vw - clamp(44px, 8vw, 128px))); max-width: none; margin: 0 auto; padding: clamp(16px, 2.2vw, 30px) 0 clamp(24px, 3vw, 42px); } .reveal-title { display: grid; gap: 8px; max-width: 920px; text-align: center; align-self: center; } .reveal-title h1 { font-family: var(--font-display); font-size: clamp(30px, 3.8vw, 52px); line-height: 1; letter-spacing: -0.035em; } .reveal-title p { color: var(--text-2); font-size: clamp(14px, 1.45vw, 18px); } .reveal-grid { width: 100%; display: grid; grid-template-columns: minmax(300px, .92fr) minmax(390px, 1.05fr) minmax(280px, .88fr); gap: clamp(16px, 1.7vw, 22px); align-items: start; } .reveal-score-panel, .reveal-impact-panel, .reveal-shield-card, .reveal-opps-card { text-align: left; padding: clamp(16px, 1.65vw, 22px); overflow: hidden; } .reveal-score-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; } .ring-wrap { position: relative; width: clamp(220px, 58vw, 300px); aspect-ratio: 1; display: grid; place-items: center; } #screen-reveal .ring-wrap { width: clamp(210px, 20vw, 300px); } .ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .ring-bg { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 9; } .ring-fg { fill: none; stroke: url(#scoreGrad); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.8s var(--ease-out); filter: drop-shadow(0 0 12px rgba(20,224,203,0.55)); } .ring-center { position: absolute; display: flex; flex-direction: column; align-items: center; } .ring-score { font-family: var(--font-display); font-weight: 700; font-size: clamp(60px, 15vw, 86px); line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #screen-reveal .ring-score { font-size: clamp(66px, 6.3vw, 96px); } .ring-of { font-size: 12px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 6px; } .ring-label { margin-top: 8px; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; padding: 8px 20px; border-radius: var(--r-pill); background: var(--teal-soft); color: var(--teal); border: 1px solid rgba(20,224,203,0.3); } .reveal-tone-good .ring-label, .reveal-tone-good .rs-zone { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, transparent); } .reveal-tone-fair .ring-label, .reveal-tone-fair .rs-zone { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 38%, transparent); } .reveal-tone-low .ring-label, .reveal-tone-low .rs-zone { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); } .rs-zone, .rs-delta { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 7px 14px; border: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: none; } .rs-delta.up { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border-color: color-mix(in srgb, var(--success) 34%, transparent); } .rs-delta.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 34%, transparent); } .rs-delta.flat, .rs-delta.first { color: var(--blue-2); background: color-mix(in srgb, var(--blue-2) 10%, transparent); border-color: color-mix(in srgb, var(--blue-2) 28%, transparent); } .rs-note { margin-top: 2px; color: var(--text-2); font-size: clamp(13.5px, 1.1vw, 15.5px); line-height: 1.48; max-width: 43ch; } .reveal-card-head { display: grid; gap: 6px; margin-bottom: 16px; } .reveal-card-head h2, .reveal-shield-card h2 { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.025em; line-height: 1.05; } .reveal-factor-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); } .reveal-factor-cols > div { min-width: 0; } .reveal-factor-cols h3 { font-family: var(--font-display); font-size: 14px; margin-bottom: 12px; color: var(--text); } .reveal-factor-cols ul, .reveal-opps-card ol { list-style: none; display: grid; gap: 10px; } .reveal-factor-cols li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--hairline); } .reveal-factor-cols li span { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; } .reveal-factor-cols li span svg { width: 14px; height: 14px; } .rf-help span { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); } .rf-hurt span { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); } .reveal-factor-cols li b { font-size: 13.25px; color: var(--text); line-height: 1.25; } .reveal-factor-cols li em, .reveal-opps-card li em { font-style: normal; color: var(--muted); font-size: 12.15px; line-height: 1.34; } .reveal-side { display: grid; grid-template-rows: auto auto; gap: clamp(14px, 1.8vw, 22px); } .reveal-shield-card { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; } .rshield-mark { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.18), transparent 34%), color-mix(in srgb, var(--blue-2) 12%, transparent); box-shadow: 0 18px 34px color-mix(in srgb, var(--blue-2) 22%, transparent); } .rshield-mark .id-logo { width: 44px; height: 44px; } .rshield-mark .id-logo-svg { width: 100%; height: 100%; display: block; } .reveal-shield-card p { color: var(--text-2); font-size: 13px; line-height: 1.45; margin-top: 6px; } .rshield-stat { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 16px; background: color-mix(in srgb, var(--teal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent); } .rshield-stat b { font-family: var(--font-display); font-size: 26px; color: var(--teal); } .rshield-stat span { color: var(--text-2); font-size: 13px; } .reveal-opps-card { display: block; } .reveal-opps-card ol { gap: 0; } .reveal-opps-card li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: clamp(11px, 1.25vw, 16px) 0; border-top: 1px solid var(--hairline); } .reveal-opps-card .reveal-card-head { text-align: center; } .reveal-opps-card li > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: var(--ink-on-brand); font-family: var(--font-display); font-weight: 800; font-size: 13px; } .reveal-opps-card li b { display: block; color: var(--text); font-size: 14px; line-height: 1.25; margin-bottom: 5px; } @media (max-width: 1180px) { .reveal-grid { grid-template-columns: minmax(280px, .86fr) minmax(420px, 1.14fr); } .reveal-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } @media (max-width: 900px) { .reveal-topbar { padding: 14px calc(64px + env(safe-area-inset-right)) 14px 16px; } .reveal-stagebar { display: none; } .reveal-flow { width: min(760px, calc(100vw - 28px)); padding-top: 24px; } .reveal-grid { grid-template-columns: 1fr; } .reveal-side { grid-template-columns: 1fr; } .reveal-factor-cols { grid-template-columns: 1fr; } #screen-reveal .ring-wrap { width: clamp(214px, 44vw, 300px); } } @media (max-width: 640px) { .reveal-flow { width: calc(100vw - 24px); padding-top: 18px; gap: 16px; } .reveal-title { text-align: center; align-self: stretch; } .reveal-title h1 { font-size: clamp(30px, 9vw, 42px); } .reveal-score-panel, .reveal-impact-panel, .reveal-shield-card, .reveal-opps-card { padding: 16px; border-radius: 20px; } #screen-reveal .ring-wrap { width: min(72vw, 250px); } #screen-reveal .ring-score { font-size: clamp(64px, 20vw, 84px); } .rs-note { max-width: none; text-align: left; } #screen-reveal .reveal-actions { width: min(760px, 100%); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } #screen-reveal .reveal-actions .btn { min-width: min(280px, 100%); justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════════════ F377 · YOUR ASSESSMENT SCORE — the "$1B" reveal (visual-first, toggleable). A cinematic hero (aurora + score ring + real stat tiles), a living systems constellation of animated radial dials, and premium collapsible narrative panels so the heavy text is opt-in. Dual-theme, responsive, reduced-motion. ═══════════════════════════════════════════════════════════════════════════ */ .reveal-flow.rv2 { position: relative; width: min(1560px, calc(100vw - clamp(20px, 4vw, 64px))); display: flex; flex-direction: column; gap: clamp(26px, 4vh, 48px); padding: clamp(10px, 1.6vh, 22px) 0 clamp(28px, 4vh, 48px); } /* ── ambient aurora behind the whole page ── */ .rv-aurora { position: absolute; inset: -6% -12% auto -12%; height: 80%; z-index: 0; pointer-events: none; overflow: visible; } .rv-aurora span { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; } .rv-aurora span:nth-child(1) { width: 48vw; height: 48vw; left: -6%; top: -10%; background: radial-gradient(circle, color-mix(in srgb, var(--teal) 44%, transparent), transparent 70%); animation: rvFloat 13s ease-in-out infinite; } .rv-aurora span:nth-child(2) { width: 44vw; height: 44vw; right: -4%; top: -6%; background: radial-gradient(circle, color-mix(in srgb, var(--blue-2) 44%, transparent), transparent 70%); animation: rvFloat 17s ease-in-out infinite reverse; } .rv-aurora span:nth-child(3) { width: 38vw; height: 38vw; left: 38%; top: 8%; background: radial-gradient(circle, color-mix(in srgb, var(--violet) 34%, transparent), transparent 70%); animation: rvFloat 15s ease-in-out infinite; } @keyframes rvFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3%, 4%) scale(1.08); } } .reveal-flow.rv2 > * { position: relative; z-index: 1; } /* ═══ THE HERO — a full-bleed cinematic stage. The SCORE is the star: a giant gradient number flanked by the grade orb and the verdict orb, with orbiting light, floating motes, and a self-drawing ECG heartbeat underneath. ═══ */ .rv-hero { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vh, 24px); padding: clamp(26px, 3.4vh, 44px) clamp(18px, 3vw, 52px) clamp(20px, 2.6vh, 34px); border-radius: clamp(26px, 3vw, 40px); background: var(--grad-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); backdrop-filter: var(--glass-blur); overflow: hidden; text-align: center; } .rv-systems, .rv-read { width: 100%; } .rv-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(130% 90% at 50% -10%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 55%); } .rv-hero > * { position: relative; z-index: 2; } /* hero FX layer — halo, orbits, motes */ .rv-hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .rv-halo { position: absolute; left: 50%; top: 42%; width: min(72vw, 640px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--teal) 20%, transparent) 0%, color-mix(in srgb, var(--blue-2) 12%, transparent) 40%, transparent 68%); filter: blur(30px); animation: rvHalo 5.5s var(--ease-out) infinite; } @keyframes rvHalo { 0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.07); } } .rv-orbit { position: absolute; left: 50%; top: 42%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); transform: translate(-50%, -50%); } .rv-orbit-1 { width: min(66vw, 560px); height: min(66vw, 560px); animation: rvSpinC 26s linear infinite; } .rv-orbit-2 { width: min(88vw, 780px); height: min(88vw, 780px); border-color: color-mix(in srgb, var(--violet) 16%, transparent); border-style: dashed; animation: rvSpinC 44s linear infinite reverse; } @keyframes rvSpinC { to { transform: translate(-50%,-50%) rotate(360deg); } } .rv-orbit i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%); background: var(--teal); box-shadow: 0 0 14px var(--teal); } .rv-orbit-2 i:nth-child(2) { top: auto; bottom: -4px; background: var(--violet); box-shadow: 0 0 14px var(--violet); } .rv-motes { position: absolute; inset: 0; overflow: hidden; } .rv-motes i { position: absolute; bottom: -6px; border-radius: 50%; background: color-mix(in srgb, var(--teal) 75%, #fff); box-shadow: 0 0 8px var(--teal); opacity: 0; animation: rvMote linear infinite; } @keyframes rvMote { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .8; } 88% { opacity: .5; } 100% { opacity: 0; transform: translateY(-105vh); } } .rv-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 1.3vw, 15px); letter-spacing: .1em; text-transform: uppercase; } .rv-eyebrow svg { width: 17px; height: 17px; } /* the two-piece core: grade orb · GIANT shimmering score with its verdict */ .rv-hero-core { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 5vw, 84px); width: 100%; } .rv-score-stage { display: flex; flex-direction: column; align-items: center; gap: 0; } .rv-score-num { font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.05em; padding: .1em .12em; margin: -.1em -.12em; font-size: clamp(120px, 21vw, 264px); background: linear-gradient(115deg, var(--teal) 8%, var(--blue-2) 42%, var(--violet) 78%, var(--teal) 108%); background-size: 220% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 22px 60px color-mix(in srgb, var(--teal) 34%, transparent)); transition: transform .5s var(--ease-spring); animation: rvShimmer 7s ease-in-out infinite; } @keyframes rvShimmer { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } .rv-score-num.rv-score-pop { animation: rvPop .6s var(--ease-spring), rvShimmer 7s ease-in-out .6s infinite; } @keyframes rvPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } .rv-score-verdict { font-family: var(--font-display); font-weight: 800; color: var(--text); font-size: clamp(20px, 2.6vw, 34px); letter-spacing: -.02em; margin-top: clamp(2px, .6vh, 8px); } .rv-score-of { color: var(--muted); font-weight: 700; font-size: .62em; letter-spacing: .08em; text-transform: uppercase; } .rv-badges { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .rv-hero .ring-label { margin-top: 0; font-size: clamp(12px, 1.25vw, 14px); } /* grade orb — a glass jewel with a sweeping progress ring */ .rv-grade-orb { position: relative; width: clamp(96px, 11vw, 150px); aspect-ratio: 1; flex: none; display: grid; place-items: center; grid-template-areas: 'o'; animation: rvBob 5s ease-in-out infinite; } .rv-grade-orb > * { grid-area: o; } .rv-grade-ring { width: 100%; height: 100%; overflow: visible; } .rv-grade-track { fill: none; stroke: var(--surface-hi); stroke-width: 7; } .rv-grade-fill { fill: none; stroke: url(#rvGradeG); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.9s var(--ease-out); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--teal) 55%, transparent)); } .rv-grade-orb b { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 54px); line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(-6px); } .rv-grade-orb small { align-self: end; justify-self: center; margin-bottom: 18%; color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: clamp(10px, 1vw, 12px); letter-spacing: .18em; text-transform: uppercase; } @keyframes rvBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* the living heartbeat under the score */ .rv-pulse { width: min(880px, 96%); height: clamp(38px, 5vh, 60px); } .rv-pulse svg { width: 100%; height: 100%; overflow: visible; } .rv-ecg { fill: none; stroke: url(#rvEcgG); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .rv-ecg-glow { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .16; filter: blur(4px); } /* the scoreboard — one seamless glass strip with quiet hairline dividers */ .rv-stats { display: flex; align-items: stretch; justify-content: center; width: min(1080px, 100%); padding: clamp(14px, 1.8vh, 22px) clamp(10px, 1.6vw, 26px); border-radius: 22px; background: color-mix(in srgb, var(--surface) 52%, transparent); border: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 44px -30px color-mix(in srgb, var(--blue-2) 40%, transparent); } .rv-stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 2px 6px; opacity: 0; animation: rvUp .55s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.24s + var(--i,0) * .09s); } @keyframes rvUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rv-stat-div { width: 1px; align-self: stretch; margin: 4px 0; background: linear-gradient(180deg, transparent, var(--border) 30%, var(--border) 70%, transparent); flex: none; } .rv-stat-v { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 38px); line-height: 1.02; color: var(--text); } .rv-stat-l { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: clamp(11px, 1.1vw, 12.5px); line-height: 1.25; font-weight: 650; } .rv-stat-l svg { width: 13px; height: 13px; color: var(--teal); flex: none; } .rv-stat--grade .rv-stat-v { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rv-stat--grade .rv-stat-l svg { color: var(--violet); } .rv-stat--block .rv-stat-l svg { color: var(--danger); } /* ── section headers — big, confident ── */ .rv-sec-head { text-align: center; display: grid; gap: 7px; margin-bottom: clamp(16px, 2.2vw, 26px); } .rv-sec-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--teal); font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: .09em; text-transform: uppercase; } .rv-sec-eyebrow svg { width: 16px; height: 16px; } .rv-sec-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.2vw, 42px); letter-spacing: -0.028em; line-height: 1.06; } /* ── SYSTEMS CONSTELLATION — the score LIVES INSIDE the dial; a soft band label beneath tells the story at a glance ── */ /* flex-wrap (not grid) so an incomplete LAST ROW stays centered on screen */ .rv-sys-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 1.4vw, 18px); } .rv-sys-grid .rv-sys { flex: 1 1 clamp(150px, 12vw, 190px); max-width: 230px; } .rv-sys { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: clamp(20px, 2.2vw, 28px) 12px clamp(16px, 1.8vw, 22px); border-radius: 26px; background: var(--grad-card); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-sm); opacity: 0; animation: rvUp .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.1s + var(--i,0) * .05s); } .rv-sys::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 60%); } .rv-sys > * { position: relative; } .rv-sys-dial { position: relative; width: clamp(84px, 9vw, 112px); aspect-ratio: 1; display: grid; place-items: center; } .rv-sys-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .rv-sys-track { fill: none; stroke: var(--surface-hi); stroke-width: 5; } .rv-sys-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out); } .rv-sys--strong .rv-sys-fill { stroke: var(--success); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--success) 55%, transparent)); } .rv-sys--building .rv-sys-fill { stroke: var(--warning); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--warning) 50%, transparent)); } .rv-sys--focus .rv-sys-fill { stroke: var(--danger); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--danger) 50%, transparent)); } .rv-sys-score { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.8vw, 36px); color: var(--text); line-height: 1; } .rv-sys-name { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: clamp(13px, 1.25vw, 14.5px); font-weight: 700; color: var(--text); line-height: 1.2; } .rv-sys-name svg { width: 16px; height: 16px; flex: none; } .rv-sys--strong .rv-sys-name svg { color: var(--success); } .rv-sys--building .rv-sys-name svg { color: var(--warning); } .rv-sys--focus .rv-sys-name svg { color: var(--danger); } .rv-sys-band { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; } .rv-sys--strong .rv-sys-band { color: var(--success); background: color-mix(in srgb, var(--success) 11%, transparent); } .rv-sys--building .rv-sys-band { color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, transparent); } .rv-sys--focus .rv-sys-band { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); } /* Health Trajectory Age Estimate chip (IDLife-HS Domain Scorecard) — quiet, experimental-motivational figure under the band pill. Dual-theme via tokens. */ .rv-sys-tage { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1; padding: 3px 9px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--border-hi) 60%, transparent); } .rv-sys-tage svg { width: 11px; height: 11px; flex: none; opacity: .75; } .rv-sys-tage b { font-family: var(--font-display); font-weight: 700; color: var(--text-2); font-size: 11.5px; } /* Detail-sheet trajectory stat */ .ds-tage { display: inline-flex; align-items: baseline; gap: 7px; margin: 2px 0 6px; } .ds-tage b { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--text); } .ds-tage span { font-size: 13px; font-weight: 600; color: var(--muted); } .ds-tage.tone-teal b { color: var(--teal); } .ds-tage.tone-blue b { color: var(--blue-2); } .ds-tage.tone-amber b { color: var(--warning); } /* ── TOGGLEABLE NARRATIVE PANELS — billion-dollar chapters. Each is a glass slab with a living gradient rail down the left edge, a glowing icon jewel, an idle sheen that drifts across on hover, and a spring chevron. ── */ .rv-panels { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); } .rv-panel { position: relative; border-radius: 26px; border: 1px solid var(--border); background: var(--grad-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out); } /* the gradient rail — grows to full height when the chapter opens */ .rv-panel::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 34%; transform: translateY(-50%); border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--teal), var(--blue-2), var(--violet)); opacity: .55; transition: height .4s var(--ease-out), opacity .3s var(--ease-out); } .rv-panel:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: var(--shadow-md); } .rv-panel:hover::before { opacity: .9; } .rv-panel.open { border-color: var(--border-hi); box-shadow: var(--shadow-md); transform: none; } .rv-panel.open::before { height: 100%; opacity: 1; } /* drifting sheen across the head on hover */ .rv-panel-head { position: relative; width: 100%; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); cursor: pointer; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 30px); background: transparent; text-align: left; overflow: hidden; } .rv-panel-head::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--teal) 7%, transparent) 50%, transparent 70%); background-size: 250% 100%; background-position: 160% 0; transition: background-position .8s var(--ease-out); } .rv-panel-head:hover::after { background-position: -60% 0; } /* the icon jewel — gradient disc with glow */ .rv-panel-ic { position: relative; width: clamp(50px, 5vw, 62px); height: clamp(50px, 5vw, 62px); flex: none; border-radius: 18px; display: grid; place-items: center; color: var(--ink-on-brand, #fff); background: var(--grad-brand); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--teal) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .3s var(--ease-spring); } .rv-panel-head:hover .rv-panel-ic { transform: scale(1.07) rotate(-4deg); } .rv-panel-ic svg { width: clamp(23px, 2.4vw, 29px); height: clamp(23px, 2.4vw, 29px); } .rv-panel-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rv-panel-tt b { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 2vw, 25px); color: var(--text); line-height: 1.12; letter-spacing: -.018em; } .rv-panel-tt small { color: var(--muted); font-size: clamp(13px, 1.3vw, 15px); line-height: 1.32; } .rv-panel-tag { flex: none; } .rv-tag { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 11px; border-radius: 999px; font-family: var(--font-display); font-weight: 800; font-size: 15px; border: 1px solid transparent; } .rv-tag--ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 26%, transparent); } .rv-tag--warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 28%, transparent); } .rv-tag--block { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 26%, transparent); } .rv-panel-chev { flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); border: 1px solid var(--border); background: var(--fill-1); display: grid; place-items: center; transition: transform .34s var(--ease-spring), color .2s, border-color .2s, background .2s; } .rv-panel-chev svg { width: 18px; height: 18px; } .rv-panel-head:hover .rv-panel-chev { border-color: var(--border-hi); background: var(--fill-2); } .rv-panel.open .rv-panel-chev { transform: rotate(180deg); color: var(--ink-on-brand, #fff); background: var(--grad-brand); border-color: transparent; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--teal) 60%, transparent); } .rv-panel-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out); } .rv-panel-inner { padding: 0 clamp(18px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px); } .rv-story { color: var(--text-2); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; margin: 0; } .rv-factors { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; } @media (min-width: 900px) { .rv-factors { grid-template-columns: 1fr 1fr; } } .rv-factors li { display: grid; grid-template-columns: 30px 1fr; gap: 4px 13px; align-items: start; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--border-soft); } .rv-factors li span { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; } .rv-factors li span svg { width: 15px; height: 15px; } .rv-factors .rf-help span { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); } .rv-factors .rf-hurt span { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .rv-factors li b { font-size: clamp(14px, 1.4vw, 15.5px); color: var(--text); line-height: 1.28; } .rv-factors li em { font-style: normal; color: var(--muted); font-size: clamp(12.75px, 1.25vw, 14px); line-height: 1.44; } .rv-opps { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; } .rv-opps li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; padding: 15px 17px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--border-soft); } .rv-opps li > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: var(--ink-on-brand); font-family: var(--font-display); font-weight: 800; font-size: 15px; } .rv-opps li b { display: block; color: var(--text); font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.25; margin-bottom: 4px; } .rv-opps li em { font-style: normal; color: var(--muted); font-size: clamp(13px, 1.3vw, 14.5px); line-height: 1.45; } .rv-shield { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: start; } .rv-shield-mark { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.18), transparent 34%), color-mix(in srgb, var(--blue-2) 12%, transparent); box-shadow: 0 16px 30px color-mix(in srgb, var(--blue-2) 22%, transparent); } .rv-shield-mark .id-logo { width: 46px; height: 46px; } .rv-shield-mark .id-logo-svg { width: 100%; height: 100%; display: block; } .rv-shield-tx p { color: var(--text-2); font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.55; margin: 0 0 12px; } .rv-shield-stat { display: inline-flex; align-items: center; gap: 11px; padding: 11px 16px; border-radius: 15px; background: color-mix(in srgb, var(--teal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent); } .rv-shield-stat b { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--teal); } .rv-shield-stat span { color: var(--text-2); font-size: 13.5px; } .rv-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 4px; } /* ── tablet ── */ @media (max-width: 1024px) { .rv-hero-core { gap: clamp(14px, 3.6vw, 40px); } .rv-score-num { font-size: clamp(96px, 20vw, 180px); } } /* ── phone ── */ @media (max-width: 760px) { .reveal-flow.rv2 { gap: 24px; } .rv-hero { padding: 24px 14px 20px; border-radius: 24px; } .rv-hero-core { flex-direction: column; gap: 10px; } /* the giant number leads; the grade orb sits beneath it */ .rv-score-stage { order: -1; } .rv-score-num { font-size: clamp(128px, 37vw, 176px); } .rv-grade-orb { width: clamp(88px, 26vw, 112px); } /* the scoreboard strip wraps into a tidy 2-col mini grid */ .rv-stats { flex-wrap: wrap; gap: 12px 0; padding: 16px 8px; } .rv-stat { flex: 1 1 44%; } .rv-stat-div { display: none; } .rv-sys-grid { gap: 10px; } .rv-sys-grid .rv-sys { flex: 1 1 40%; max-width: none; } .rv-sys { padding: 18px 10px 14px; } .rv-sys-dial { width: clamp(76px, 22vw, 96px); } .rv-panel-head { padding: 15px 14px; } .rv-panel-inner { padding: 0 14px 16px; } .rv-actions { flex-direction: column; align-items: stretch; } .rv-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .rv-aurora span, .rv-halo, .rv-orbit, .rv-motes i, .rv-grade-orb, .rv-score-num { animation: none; } .rv-motes { display: none; } .rv-stat, .rv-sys { animation: none; opacity: 1; } .rv-panel-body { transition: none; } .rv-sys-fill, .rv-grade-fill { transition: none; } .rv-score-num.rv-score-pop { animation: none; } } /* =========================================================================== 5) RESULTS — FULL-BLEED DASHBOARD (uses the WHOLE screen on desktop) =========================================================================== */ #screen-results { display: none; } #screen-results.active { display: block; min-height: 100dvh; } .results-shell { width: 100%; } /* sticky premium chrome — topbar + section nav + reading progress (one unit) */ .results-chrome { position: sticky; top: 0; z-index: 20; width: 100%; background: linear-gradient(180deg, rgba(4,9,26,0.92), rgba(4,9,26,0.55)); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-bottom: 2px solid color-mix(in srgb, var(--blue) 66%, transparent); } .results-topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px clamp(18px, 4vw, 56px); } .results-topbar .brandmark-sm { order: 1; flex: none; white-space: nowrap; } .results-topbar .brandmark-sm svg { width: 20px; height: 20px; } .topbar-right { display: flex; align-items: center; gap: 12px; order: 2; } .results-topbar > .results-nav { order: 3; } /* own full-width row by default */ .results-topbar .res-status-icon { position: relative; width: 44px; height: 44px; padding: 0; gap: 0; flex: none; justify-content: center; border-radius: 50%; font-size: 0; } .results-topbar .res-status-icon svg { width: 20px; height: 20px; } .results-topbar .res-status-icon .live { position: absolute; top: 5px; right: 5px; margin: 0; box-shadow: 0 0 8px var(--shield), 0 0 0 2px rgba(4,9,26,0.97); } .results-topbar .res-status-meth { color: var(--violet); background: color-mix(in srgb, var(--violet) 13%, transparent); border-color: color-mix(in srgb, var(--violet) 46%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--violet) 14%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); } [data-theme="light"] .results-topbar .res-status-icon .live { box-shadow: 0 0 8px var(--shield), 0 0 0 2px #fff; } [data-theme="light"] .results-topbar .res-status-meth { color: color-mix(in srgb, var(--violet) 75%, var(--text)); background: color-mix(in srgb, var(--violet) 9%, #fff); border-color: color-mix(in srgb, var(--violet) 38%, transparent); } /* score pill — the RESULTS topbar no longer renders one (removed to de-crowd the desktop chrome); this rule remains for the OVERVIEW topbar's "Score 68" chip. */ .score-chip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--blue) 66%, transparent); background: rgba(255,255,255,0.03); } .score-chip b { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── $50B NAV — section chips · reading progress · back-to-top ────────── */ .results-nav { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: var(--w-results); margin-inline: auto; padding: 0 clamp(18px, 4vw, 56px) 11px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .results-nav::-webkit-scrollbar { display: none; } .rnav-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .01em; color: var(--muted); padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; border: 1px solid transparent; background: transparent; white-space: nowrap; transition: color .18s, background .18s, border-color .18s, transform .18s var(--ease-spring); -webkit-tap-highlight-color: transparent; } .rnav-chip svg { width: 14px; height: 14px; flex: none; opacity: .85; } .rnav-chip:hover { color: var(--text-2); background: var(--fill-1); transform: translateY(-1px); } .rnav-chip:active { transform: scale(.97); } .rnav-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .rnav-chip.active { color: var(--text); background: var(--fill-2); border-color: color-mix(in srgb, var(--teal) 42%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 16%, transparent), 0 6px 18px -10px var(--teal-glow); } .rnav-chip.active svg { color: var(--teal); opacity: 1; } .rnav-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pill); background: var(--fill-2); color: var(--text-2); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; } .rnav-chip.active .rnav-n { background: var(--grad-brand); color: var(--ink-on-brand); } .rnav-chip.has-danger .rnav-n { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); } .rnav-chip.has-danger.active .rnav-n { background: var(--danger); color: #fff; box-shadow: none; } /* reading progress — a brand hairline along the chrome's bottom edge. transform-only scaleX (JS-driven) = zero layout/paint while scrolling. */ .results-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1; background: var(--grad-brand-3); transform-origin: left center; transform: scaleX(0); pointer-events: none; box-shadow: 0 0 12px rgba(20,224,203,0.45); } /* back-to-top — floating glass FAB, appears past the hero */ .back-top { position: fixed; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 55; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); background: var(--glass-bg); color: var(--text-2); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), color .2s, border-color .2s; } .back-top svg { width: 18px; height: 18px; transform: rotate(180deg); } .back-top.show { opacity: 1; transform: none; pointer-events: auto; } .back-top:hover { color: var(--teal); border-color: var(--border-hi); transform: translateY(-3px); } .back-top:active { transform: scale(.94); } .back-top:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } /* hero quick actions — answer the #1 intent ("show me the plan") in one tap */ .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .hero-cta .btn { min-height: 52px; padding: 14px 26px; font-size: 15px; } .hero-cta .btn-ghost svg { width: 16px; height: 16px; color: var(--shield); } /* fly-to-section landing offset (native fallback; JS compensates precisely) */ #sec-overview, #sec-systems, #sec-shield, #sec-plans, #sec-extras { scroll-margin-top: calc(var(--chrome-h, 112px) + 12px); } /* Desktop (≥1025px): ONE tight, premium row — brand HARD-LEFT (hugging the edge) · a hairline divider · the section nav LEFT-ALIGNED right beside it · utilities far-right. The nav used to be CENTERED+grown, which on a crowded row clipped the first ("Overview") chip behind the brandmark; flex-start + min-width:0 left-aligns it tight to the divider and lets it scroll from the left instead of clipping. */ @media (min-width: 1025px) { .results-topbar { flex-wrap: nowrap; gap: 0; padding-left: clamp(18px, 1.8vw, 26px); padding-right: clamp(20px, 3vw, 44px); } .results-topbar .brandmark-sm, .results-topbar .res-brand { padding-right: clamp(16px, 1.5vw, 22px); margin-right: clamp(12px, 1.3vw, 18px); border-right: 1px solid var(--hairline); } .results-topbar > .results-nav { order: 2; flex: 1 1 auto; min-width: 0; justify-content: flex-start; width: auto; max-width: none; margin: 0; padding: 0; } .results-topbar > .topbar-right { order: 3; flex: none; } } /* content container — full width with breathing padding, capped very wide */ .results-shell > section, .results-hero, .results-grid, .tiers-band-inner, .results-secondary, .results-footer { width: 100%; max-width: var(--w-results); margin-inline: auto; } .results-pad { padding-inline: clamp(18px, 4vw, 56px); } /* HERO band */ .results-hero { display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.4fr; gap: clamp(24px, 3vw, 56px); align-items: center; padding: clamp(36px, 5vw, 72px) clamp(18px, 4vw, 56px) clamp(24px, 3vw, 40px); } .hero-ring { position: relative; display: grid; place-items: center; gap: 16px; } .hero-ring .ring-wrap { width: clamp(220px, 26vw, 320px); } /* F384 · the Living Emblem replaces the flat ring when a health report exists */ .hero-ring .ring-wrap--emblem { width: clamp(250px, 30vw, 380px); } .hero-emblem { width: 100%; height: auto; transform: none !important; /* .ring-wrap svg rotates -90deg for the flat arc — the emblem is upright */ filter: drop-shadow(0 24px 60px color-mix(in srgb, var(--blue) 22%, transparent)); } .heroem-score { font: 700 92px var(--font-display); letter-spacing: -0.03em; fill: var(--text); } .heroem-label { font: 700 11px var(--font-display); letter-spacing: .22em; fill: var(--muted); } /* the hero rides the results screen — keep the orbit/ticks/comet ALIVE there (they're compositor-only transforms), but freeze under reduced motion */ @media (prefers-reduced-motion: reduce) { .hero-emblem .hrcv-ticks-g, .hero-emblem .hrcv-orbit-g, .hero-emblem .hrcv-arc, .hero-emblem .hrcv-star-dot { animation: none !important; } .hero-emblem .hrcv-comet-g { display: none; } } /* F381 · trajectory strip under the score ring — the report's signature number */ .hero-traj { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--grad-card); box-shadow: var(--shadow-sm); } .hero-traj-num { display: flex; align-items: center; gap: 10px; } .hero-traj-num b { font: 700 34px/1 var(--font-display); letter-spacing: -0.02em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-traj-num span { font: 700 9px/1.35 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .hero-traj-vs { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 1px solid var(--hairline); } .hero-traj-cal { font-size: 12px; color: var(--muted); } .hero-traj-cal b { color: var(--text); font-family: var(--font-display); } .hero-traj-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.3 var(--font-display); padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--muted); } .hero-traj-chip svg { width: 12px; height: 12px; flex: none; } .hero-traj-chip.down { color: var(--shield); border-color: color-mix(in srgb, var(--shield) 40%, transparent); background: var(--shield-soft); } .hero-traj-chip.up { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 8%, transparent); } .hero-traj-chip.flat { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 36%, transparent); background: var(--blue-soft); } .hero-copy .eyebrow { margin-bottom: 14px; display: inline-block; } .hero-copy .h2 { margin-bottom: 14px; } .hero-copy .lead { margin-bottom: 18px; } .hero-opps { display: flex; flex-wrap: wrap; gap: 10px; } .hero-opp { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 9px 16px; background: rgba(255,255,255,0.025); } .hero-opp svg { width: 15px; height: 15px; color: var(--teal); flex: none; } /* primary dashboard grid (body systems board + what we learned + shield) */ /* F452 · desktop: the priorities board owns the full row; the progress column flows below it (tablet/phone already stacked — their overrides are untouched) */ .results-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 1.6vw, 24px); padding: 0 clamp(18px, 4vw, 56px) clamp(16px, 2vw, 24px); align-items: start; } .block { padding: clamp(22px, 2.4vw, 34px); } .block-title { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.5vw, 20px); margin-bottom: 18px; color: var(--text); } /* light theme washes these out against the card — go a shade deeper */ [data-theme="light"] .block-title { color: #04102e; letter-spacing: -0.01em; } .block-title svg { width: 21px; height: 21px; color: var(--teal); } .block-title .spacer { margin-left: auto; } /* =========================================================================== MyAI COMPANION — results-page chat (handoff §P2.H) A faithful sibling of the DNA portal's MyAI, sitting above the systems board. Full-width section; the chat itself is a centered, focused command surface. =========================================================================== */ .myai-section { padding: 0 clamp(18px, 4vw, 56px); margin: clamp(10px, 1.4vw, 18px) auto clamp(20px, 2.4vw, 30px); position: relative; } .myai-panel { max-width: 1180px; margin-inline: auto; padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 26px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; } /* header */ .myai-head { display: flex; align-items: center; gap: 14px; } .myai-id { display: flex; align-items: center; gap: 13px; min-width: 0; } .myai-orb { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--grad-brand-3); color: var(--ink-on-brand); box-shadow: var(--glow-teal); } .myai-orb svg { width: 24px; height: 24px; } .myai-live { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); box-shadow: 0 0 10px var(--shield-glow); animation: pulse 2.4s ease-in-out infinite; } .myai-id-txt { min-width: 0; } .myai-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); display: flex; align-items: center; gap: 9px; } .myai-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.02em; color: #2bbf9c; background: color-mix(in srgb, var(--shield) 20%, transparent); border: 1px solid color-mix(in srgb, var(--shield) 52%, transparent); border-radius: var(--r-pill); padding: 3px 9px; } .myai-badge svg { color: currentColor; } [data-theme="light"] .myai-badge { color: #046048; background: color-mix(in srgb, var(--shield) 22%, #ffffff); border-color: color-mix(in srgb, var(--shield) 60%, transparent); } .myai-badge svg { width: 12px; height: 12px; } .myai-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .myai-actions { margin-left: auto; display: flex; gap: 8px; } .myai-iconbtn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--fill-2); border: 1px solid var(--border-soft); color: var(--text-2); cursor: pointer; transition: 0.18s; } .myai-iconbtn:hover { color: var(--teal); border-color: var(--border-hi); background: var(--fill-hover); transform: translateY(-1px); } .myai-iconbtn svg { width: 18px; height: 18px; } /* messages */ .myai-scroll { max-height: clamp(280px, 38vh, 460px); min-height: 168px; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-md); background: var(--well); border: 1px solid var(--hairline); padding: 16px; scrollbar-width: thin; } .myai-messages { display: flex; flex-direction: column; gap: 14px; } .myai-msg { display: flex; gap: 10px; max-width: 100%; } .myai-msg.myai-user { justify-content: flex-end; } .myai-av { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--grad-brand-3); color: var(--ink-on-brand); margin-top: 2px; } .myai-av svg { width: 17px; height: 17px; } .myai-bubble { max-width: 76%; padding: 12px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.62; color: var(--text); } .myai-assistant .myai-bubble { background: var(--surface-2); border: 1px solid var(--border-soft); border-top-left-radius: 6px; } .myai-user .myai-bubble { background: var(--grad-brand); color: var(--ink-on-brand); border-bottom-right-radius: 6px; font-weight: 500; } .myai-bubble p { margin: 0 0 9px; } .myai-bubble p:last-child { margin-bottom: 0; } .myai-bubble ul, .myai-bubble ol { margin: 6px 0 9px; padding-left: 20px; } .myai-bubble li { margin: 3px 0; } .myai-bubble strong { color: var(--text); font-weight: 700; } .myai-assistant .myai-bubble strong { color: #ffffff; } .myai-bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--fill-2); padding: 1px 6px; border-radius: 6px; } .myai-follow { margin-top: 10px !important; padding-top: 9px; border-top: 1px dashed var(--border); color: var(--teal); font-weight: 600; } .myai-error .myai-bubble { border-color: var(--danger-soft); } /* rich-formatted assistant replies — ported MyAI formatter, IDN-tokenized */ .myai-reply-text { font-size: 14.5px; line-height: 1.62; } .myai-reply-text p { margin: 9px 0; } .myai-reply-text > p:first-child { margin-top: 0; } .myai-reply-text > p:last-child { margin-bottom: 0; } .myai-reply-text a { color: var(--teal); } .myai-reply-text code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--fill-2); padding: 1px 6px; border-radius: 6px; } .myai-tag { display: inline-block; padding: 2px 9px; border-radius: 6px; font-weight: 700; font-size: 11.5px; letter-spacing: 0.4px; vertical-align: middle; white-space: nowrap; } /* follow-up question rendered as its own brand-tinted second bubble */ .myai-followq .myai-bubble { background: linear-gradient(135deg, var(--teal-soft), var(--blue-soft)); border: 1px solid var(--border-hi); color: var(--text); font-weight: 600; } .myai-followq .myai-bubble p { margin: 0; } /* F136 · MyAI assessment gate — the unlock CTA rides inside the chat */ .myai-unlock .myai-bubble { background: transparent; border: 0; padding: 0; box-shadow: none; flex: 1; min-width: 0; max-width: none; } .myai-unlock-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; white-space: normal; text-align: center; line-height: 1.3; font-size: 14px; padding: 12px 14px; } .myai-unlock-btn svg { width: 15px; height: 15px; flex-shrink: 0; } /* ── F137 · First-timer contact capture — the account step before Q1 ─────── Same visual language as every other question (q-wrap/q-headline/q-subtext); inputs mirror the .sp-input search field so the whole flow feels like ONE instrument. Dual-theme via tokens — no hardcoded colors. */ .idg-form { margin: 26px auto 0; display: flex; flex-direction: column; gap: 16px; max-width: 560px; width: 100%; } .idg-row { display: flex; gap: 14px; } .idg-row .idg-field { flex: 1; min-width: 0; } .idg-field { display: flex; flex-direction: column; gap: 7px; } .idg-field > span { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .idg-field input { width: 100%; min-height: 56px; padding: 0 18px; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 16px; box-shadow: var(--shadow-sm); transition: border-color .18s, box-shadow .18s, background .18s; } .idg-field input::placeholder { color: var(--muted-2); } .idg-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); } .idg-err { margin: -4px 0 0; font-size: 14px; font-weight: 600; color: var(--danger); text-align: center; } .idg-go { margin-top: 6px; align-self: center; } .idg-note { margin: 20px auto 0; } @media (max-width: 560px) { .idg-row { flex-direction: column; gap: 16px; } .idg-go { align-self: stretch; } } /* ── QUESTION-OVERHAUL INPUT TYPES (Aug 2026) ──────────────────────────────── text (first name) · date (birth date MM/DD/YYYY) · height (ft/in) · weight (lbs) · state-select. Same instrument language as .idg-field — tokens only, dual-theme, reduced-motion safe, 3-breakpoint responsive. */ .qi-wrap { margin: 30px auto 0; max-width: 560px; width: 100%; } .qi-field { display: flex; flex-direction: column; gap: 7px; } .qi-field > span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .qi-field input, .qi-field select { width: 100%; min-height: 60px; padding: 0 18px; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 19px; font-weight: 600; box-shadow: var(--shadow-sm); transition: border-color .18s, box-shadow .18s; } .qi-field input::placeholder { color: var(--muted-2); font-weight: 500; } .qi-field input:focus, .qi-field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); } .qi-text input { text-align: center; font-size: 22px; } /* Birth date / height / weight — segmented numeric fields on one row */ .qi-dob-row { display: flex; align-items: flex-end; gap: 12px; justify-content: center; } .qi-dob-f { flex: 0 0 auto; width: 96px; } .qi-dob-f input { text-align: center; font-variant-numeric: tabular-nums; font-size: 22px; padding: 0 8px; } .qi-dob-y { width: 128px; } .qi-w-f { width: 150px; } .qi-dob-sep { padding-bottom: 16px; font-size: 20px; font-weight: 700; color: var(--muted-2); user-select: none; } .qi-err { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--danger); text-align: center; } /* State dropdown — premium select with our own chevron */ .qi-select { position: relative; } .qi-select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 48px; } .qi-select select:invalid { color: var(--muted-2); } .qi-select-chev { position: absolute; right: 16px; bottom: 18px; pointer-events: none; color: var(--muted); } .qi-select-chev svg { width: 18px; height: 18px; } @media (max-width: 640px) { .qi-dob-row { gap: 8px; } .qi-dob-f { width: 84px; } .qi-dob-y { width: 110px; } .qi-dob-f input { font-size: 19px; min-height: 56px; } .qi-field input, .qi-field select { min-height: 56px; font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .qi-field input, .qi-field select { transition: none; } } /* markdown tables inside replies */ .myai-table-wrap { margin: 10px 0 12px; border: 1px solid var(--border-hi); border-radius: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--fill-1); } .myai-table { width: 100%; min-width: 380px; border-collapse: collapse; } .myai-table thead tr { background: var(--teal-soft); } .myai-table th { text-align: left; padding: 9px 12px; font-size: 12px; font-weight: 700; color: var(--teal); border-bottom: 1px solid var(--border); white-space: nowrap; } .myai-table td { padding: 8px 12px; font-size: 13px; line-height: 1.45; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--text-2); } .myai-table tbody tr:last-child td { border-bottom: none; } /* [ConvoPDF] download card chip appended under a document reply */ .myai-pdf-chip { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; cursor: pointer; text-align: left; border-radius: var(--r-sm); border: 1px solid var(--border-hi); background: linear-gradient(135deg, var(--teal-soft), var(--blue-soft)); color: var(--text); transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; } .myai-pdf-chip:hover { transform: translateY(-1px); border-color: var(--teal); box-shadow: var(--glow-teal); } .myai-pdf-chip.is-loading { opacity: 0.6; pointer-events: none; } .myai-pdf-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--ink-on-brand); background: var(--grad-brand); } .myai-pdf-ic svg { width: 20px; height: 20px; } .myai-pdf-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .myai-pdf-meta b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .myai-pdf-meta i { font-style: normal; font-size: 11.5px; color: var(--text-2); } .myai-pdf-dl { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--teal); background: var(--surface-2); } .myai-pdf-dl svg { width: 16px; height: 16px; } /* transient toast (export/PDF feedback) */ .myai-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); z-index: 9999; max-width: 90vw; padding: 11px 18px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--ink-on-brand); background: var(--grad-brand); box-shadow: var(--shadow-md), var(--glow-teal); opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; } .myai-toast.show { opacity: 1; transform: translate(-50%, 0); } /* typing indicator */ .myai-typing { display: inline-flex; gap: 5px; align-items: center; } .myai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: myai-blink 1.3s infinite ease-in-out; } .myai-typing span:nth-child(2) { animation-delay: 0.18s; } .myai-typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes myai-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } /* suggestion chips */ .myai-suggest { display: flex; flex-wrap: wrap; gap: 8px; } .myai-chip { font-size: 13px; color: var(--text-2); background: var(--fill-2); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; transition: 0.18s; } .myai-chip:hover { color: var(--teal); border-color: var(--border-hi); background: var(--teal-soft); transform: translateY(-1px); } /* input row */ .myai-input { display: flex; align-items: flex-end; gap: 10px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 8px 8px 8px 16px; transition: border-color 0.18s, box-shadow 0.18s; } .myai-input:focus-within { border-color: var(--border-hi); box-shadow: 0 0 0 3px var(--teal-soft); } .myai-input textarea { flex: 1; resize: none; border: none; outline: none; background: transparent; color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; padding: 8px 0; max-height: 160px; } .myai-input textarea::placeholder { color: var(--muted-2); } .myai-send { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: none; cursor: pointer; border-radius: var(--r-sm); background: var(--grad-brand); color: var(--ink-on-brand); box-shadow: var(--glow-teal); transition: 0.18s; } .myai-send:hover { transform: translateY(-1px) scale(1.03); } .myai-send:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; } .myai-send svg { width: 20px; height: 20px; } .myai-foot { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted-2); } .myai-foot svg { width: 13px; height: 13px; } /* history drawer */ .myai-drawer { max-width: 1180px; margin: 10px auto 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; } .myai-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--hairline); font-family: var(--font-display); font-weight: 700; font-size: 15px; } .myai-drawer-head > span { display: inline-flex; align-items: center; gap: 9px; } .myai-drawer-head svg { width: 18px; height: 18px; color: var(--teal); } .myai-drawer-list { max-height: 320px; overflow-y: auto; padding: 10px; } .myai-drawer-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13.5px; } .myai-drawer-group { margin-bottom: 8px; } .myai-drawer-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); padding: 8px 10px 5px; } .myai-convo { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: var(--r-sm); background: transparent; border: 1px solid transparent; color: var(--text-2); cursor: pointer; transition: 0.15s; } .myai-convo:hover { background: var(--fill-hover); border-color: var(--border-soft); color: var(--text); } .myai-convo-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .myai-convo-meta { font-size: 11.5px; color: var(--muted-2); flex: none; } /* light theme nudges */ [data-theme="light"] .myai-scroll { background: rgba(16,42,98,0.035); } [data-theme="light"] .myai-assistant .myai-bubble { background: #ffffff; } [data-theme="light"] .myai-assistant .myai-bubble strong { color: var(--blue); } [data-theme="light"] .myai-input, [data-theme="light"] .myai-drawer { background: #ffffff; } /* on the long results + overview screens, cards are opaque for scroll perf — match it */ body.on-results .myai-panel, body.on-results .myai-drawer, body.on-overview .myai-panel, body.on-overview .myai-drawer { background: linear-gradient(180deg, rgba(22,35,77,0.97), rgba(10,18,40,0.985)); } [data-theme="light"] body.on-results .myai-panel, [data-theme="light"] body.on-results .myai-drawer, [data-theme="light"] body.on-overview .myai-panel, [data-theme="light"] body.on-overview .myai-drawer { background: linear-gradient(180deg, #ffffff, #f7faff); } @media (max-width: 640px) { .myai-bubble { max-width: 86%; } .myai-sub { display: none; } .myai-scroll { max-height: 46vh; } } @media (prefers-reduced-motion: reduce) { .myai-live, .myai-typing span { animation: none; } .myai-send:hover, .myai-chip:hover, .myai-iconbtn:hover { transform: none; } } /* =========================================================================== MyAI — FLOATING LAUNCHER + DOCKED POPUP (the $1B bottom-right experience) The chat surface (.myai-panel) is the SAME component with the SAME ids; only its shell changed. A fixed launcher pill opens a docked popup (desktop) or a full-screen sheet (mobile). Both .myai-fab and .myai-pop are position:fixed. MyAI is now a body-level SINGLETON (one instance, shared by the results + overview screens). CSS gates it to those two screens so it never leaks onto the landing/question screens. =========================================================================== */ /* Body-level singleton: show MyAI ONLY on the results + overview screens. */ body:not(.on-results):not(.on-overview) .myai-fab, body:not(.on-results):not(.on-overview) .myai-pop { display: none !important; } /* ── launcher pill ──────────────────────────────────────────────────────── */ .myai-fab { position: fixed; right: clamp(14px, 2vw, 28px); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; gap: 11px; padding: 8px 18px 8px 8px; border: 2px solid color-mix(in srgb, var(--blue) 66%, transparent); border-radius: var(--r-pill); background: var(--surface-hi); color: var(--text); cursor: pointer; box-shadow: var(--shadow-md), var(--glow-teal); transition: transform .22s var(--ease-spring), box-shadow .25s, opacity .22s; animation: myaiFabIn .6s var(--ease-spring); } .myai-fab::after { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 22px 2px var(--teal-glow); opacity: .3; animation: myaiFabBreath 3.8s ease-in-out infinite; } .myai-fab:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: var(--shadow-md), 0 0 30px 3px var(--teal-glow); } .myai-fab:active { transform: scale(.97); } .myai-fab:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .myai-fab.gone { opacity: 0; transform: scale(.6) translateY(10px); pointer-events: none; } .myai-fab-orb { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--grad-brand-3); color: var(--ink-on-brand); box-shadow: var(--glow-teal); } .myai-fab-orb svg { width: 22px; height: 22px; } .myai-fab-orb .myai-live { right: 0; bottom: 0; } .myai-fab-label { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; white-space: nowrap; letter-spacing: .01em; } .myai-fab-label b { font-weight: 700; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @keyframes myaiFabIn { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } } @keyframes myaiFabBreath { 0%, 100% { opacity: .26; } 50% { opacity: .68; } } /* T1.2 · compact icon-only launcher for preview visitors — never covers the Begin-my-assessment CTA. Label collapses; orb carries the identity alone. */ .myai-fab.myai-fab--mini { padding: 6px; gap: 0; } .myai-fab.myai-fab--mini .myai-fab-label { display: none; } .myai-fab.myai-fab--mini .myai-fab-orb { width: 42px; height: 42px; } /* ── docked popup shell ─────────────────────────────────────────────────── */ .myai-pop { position: fixed; right: clamp(14px, 2vw, 28px); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 80; width: min(420px, calc(100vw - 28px)); height: min(798px, calc(100dvh - 116px)); display: flex; transform-origin: bottom right; opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; transition: opacity .26s var(--ease-out), transform .34s var(--ease-spring), width 1.1s var(--ease-lux); } .myai-pop.show { opacity: 1; transform: none; pointer-events: auto; } .myai-pop[hidden] { display: none; } .myai-pop-scrim { display: none; } /* Computer (≥1025px): the header collapses to ONE compact ~65px row, so let the docked popup rise to just shy of it — top lands ~74px from the viewport top (18px bottom anchor + the chat's own height), a hair below the top bar. The smaller-width clearance above is left alone (there the results nav can wrap to a second row, so it needs the taller gap). */ @media (min-width: 1025px) { .myai-pop { height: min(1040px, calc(100dvh - 92px)); } } /* the chat card fills the popup; its scroll region flexes to all free height */ .myai-pop .myai-panel { position: relative; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lg), var(--glow-teal); } /* LIGHT MODE — make the popped-up companion unmistakable: wrap the card in the signature teal back-glow (an even all-around halo, not the faint default drop glow) plus a crisp teal ring so the whole outline reads green and aesthetic. Scoped to .myai-pop, so only the floating popup gets it (never the inline one). */ [data-theme="light"] .myai-pop .myai-panel { box-shadow: var(--shadow-lg), /* depth — lift off the page */ 0 0 0 1.5px color-mix(in srgb, var(--teal) 52%, transparent), /* teal ring outline */ 0 0 30px rgba(27, 197, 212, 0.30), /* tight green halo */ 0 0 84px rgba(27, 197, 212, 0.20); /* wide ambient back-glow */ } /* paint the gradient hairline fully teal in light mode so every edge glows green */ [data-theme="light"] .myai-pop .myai-panel.card-grad-border::after { background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 70%, transparent), color-mix(in srgb, var(--teal) 38%, transparent) 55%, color-mix(in srgb, var(--teal) 20%, transparent)); } .myai-pop .myai-scroll { max-height: none; min-height: 0; flex: 1 1 auto; } .myai-pop .myai-close:hover { color: var(--danger); border-color: var(--danger-soft); } /* history drawer → full overlay sheet inside the popup card */ .myai-pop .myai-drawer { position: absolute; inset: 0; margin: 0; max-width: none; border-radius: var(--r-lg); display: flex; flex-direction: column; z-index: 4; box-shadow: none; } .myai-pop .myai-drawer[hidden] { display: none; } .myai-pop .myai-drawer-list { flex: 1 1 auto; max-height: none; } /* keep the back-to-top button clear of the launcher (both bottom-right) */ .results-shell .back-top, body.on-overview .ov-top { bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); } /* ── mobile → full-screen sheet + scrim ─────────────────────────────────── */ @media (max-width: 640px) { /* F151 · phones: the launcher is always the tight icon-only orb (the T1.2 mini treatment for everyone) — no label pill crowding the footer bar. */ .myai-fab { right: 12px; padding: 5px; gap: 0; border-width: 1.5px; } .myai-fab .myai-fab-label { display: none; } .myai-fab-orb { width: 40px; height: 40px; } .myai-fab::after { display: none; } /* no breathing glow halo on phones — quieter */ .myai-pop { inset: 0; right: 0; bottom: 0; width: auto; height: 100dvh; transform-origin: bottom center; transform: translateY(26px) scale(.99); } .myai-pop .myai-panel { margin-top: max(18px, env(safe-area-inset-top)); height: calc(100dvh - max(18px, env(safe-area-inset-top))); border-radius: var(--r-lg) var(--r-lg) 0 0; } .myai-pop-scrim { display: block; position: absolute; inset: 0; z-index: -1; background: rgba(4, 9, 26, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } } @media (prefers-reduced-motion: reduce) { .myai-fab { animation: none; } .myai-fab::after { animation: none; } .myai-fab:hover, .myai-fab:active { transform: none; } .myai-pop { transition: opacity .12s linear; transform: none; } .myai-pop.show { transform: none; } } /* Body systems board (replaces the old radar — interactive, zero-blur, fast) */ .systems-board { display: flex; flex-direction: column; } .systems-board .block-title { flex-wrap: wrap; row-gap: 10px; } .sys-sort { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03); } .ss-btn { border: 0; cursor: pointer; font: 600 11.5px/1 var(--font-body); letter-spacing: 0.02em; color: var(--muted); background: transparent; padding: 7px 13px; border-radius: var(--r-pill); transition: color 0.2s, background 0.2s; } .ss-btn:hover { color: var(--text-2); } .ss-btn.active { color: var(--ink-on-brand); background: var(--grad-brand); box-shadow: 0 4px 14px -6px var(--teal-glow); } .sys-tally { display: flex; flex-wrap: wrap; gap: 14px; margin: -4px 0 14px; } .tly { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); } .tly b { color: var(--text); font-family: var(--font-display); font-size: 13px; } .tly::before { content: ''; width: 8px; height: 8px; border-radius: 50%; } .t-strong::before { background: var(--teal); box-shadow: 0 0 8px var(--teal-glow); } .t-building::before { background: var(--blue); box-shadow: 0 0 8px rgba(91,149,255,0.5); } .t-focus::before { background: var(--warning); box-shadow: 0 0 8px rgba(255,181,71,0.45); } /* ── "Since your last check-in" movement strip (returning users only) ────── Real stored history (§P7): how many systems improved / held / dipped vs the previous run. A quiet gradient-washed band above the rows. */ .sys-move { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid rgba(20, 224, 203, 0.16); background: linear-gradient(110deg, var(--teal-soft), var(--blue-soft) 70%); } .sys-move > svg { width: 15px; height: 15px; color: var(--teal); flex: none; } .sm-cap { font-size: 12px; color: var(--text-2); } .sm-cap b { color: var(--text); font-weight: 700; } .sm-chips { display: inline-flex; gap: 7px; flex-wrap: wrap; margin-left: auto; } .mv { font-family: var(--font-display); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid transparent; } .mv.pos { color: var(--success); background: var(--shield-soft); border-color: rgba(58,235,181,0.25); } .mv.neg { color: var(--warning); background: rgba(255,181,71,0.10); border-color: rgba(255,181,71,0.28); } .mv.neu { color: var(--muted); background: var(--fill-2); border-color: var(--border-soft); } .sys-list { display: flex; flex-direction: column; gap: 7px; } .sys-row { display: grid; grid-template-columns: minmax(132px, 176px) 1fr 36px 76px; grid-template-areas: "name bar score chip"; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; padding: 11px 14px; border-radius: var(--r-md); font-family: inherit; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.022); color: inherit; transition: transform 0.22s var(--ease-out), border-color 0.2s, background 0.2s; } /* returning users: a 5th ▲/▼ delta column slots in between bar and score */ .sys-list.has-deltas .sys-row { grid-template-columns: minmax(132px, 176px) 1fr 44px 36px 76px; grid-template-areas: "name bar delta score chip"; } .sys-row:hover { transform: translateX(5px); border-color: var(--border-hi); background: rgba(255,255,255,0.05); } .sys-row:active { transform: translateX(5px) scale(0.99); } .sys-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .sys-name { grid-area: name; font-size: 13px; font-weight: 600; color: var(--text-2); line-height: 1.25; display: flex; align-items: center; gap: 6px; } .sys-star { color: var(--warning); font-size: 10px; transform: translateY(-1px); flex: none; } .sys-bar { grid-area: bar; position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; } .sys-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; } .sys-range { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: rgba(255,255,255,0.08); } /* ghost tick — where this system scored LAST time (sits above the fill) */ .sys-prev { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: rgba(255,255,255,0.55); border-radius: 1px; z-index: 1; box-shadow: 0 0 6px rgba(255,255,255,0.35); } .band-strong .sys-fill { background: linear-gradient(90deg, #0fbfae, var(--teal)); box-shadow: 0 0 12px var(--teal-glow); } .band-building .sys-fill { background: linear-gradient(90deg, #3f6fe8, var(--blue)); box-shadow: 0 0 12px rgba(91,149,255,0.45); } .band-focus .sys-fill { background: linear-gradient(90deg, #e98c2e, var(--warning)); box-shadow: 0 0 12px rgba(255,181,71,0.4); } /* ▲/▼ since-last-time chip */ .sys-d { grid-area: delta; justify-self: end; font-family: var(--font-display); font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; font-variant-numeric: tabular-nums; } .sys-d.pos { color: var(--success); background: var(--shield-soft); } .sys-d.neg { color: var(--warning); background: rgba(255,181,71,0.12); } .sys-d.neu { color: var(--muted-2); background: var(--fill-2); } .sys-d.new { color: var(--violet); background: var(--violet-soft); text-transform: uppercase; font-size: 9px; letter-spacing: 0.1em; } .sys-score { grid-area: score; font-family: var(--font-display); font-weight: 800; font-size: 16px; text-align: right; } .band-strong .sys-score { color: var(--teal); } .band-building .sys-score { color: var(--blue); } .band-focus .sys-score { color: var(--warning); } .sys-chip { grid-area: chip; justify-self: end; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid; } .band-strong .sys-chip { color: var(--teal); border-color: rgba(20,224,203,0.3); background: rgba(20,224,203,0.07); } .band-building .sys-chip { color: var(--blue); border-color: rgba(91,149,255,0.3); background: rgba(91,149,255,0.07); } .band-focus .sys-chip { color: var(--warning); border-color: rgba(255,181,71,0.32); background: rgba(255,181,71,0.08); } /* F411 · inactive domain — honest "Not enough data yet" row: muted, no band color, non-interactive cursor (there is no score sheet to open). */ .band-nodata .sys-chip { color: var(--muted); border-color: var(--line); background: transparent; text-transform: none; letter-spacing: 0.02em; } .band-nodata .sys-name, .band-nodata .sys-score-nodata { color: var(--muted); } .band-nodata { opacity: 0.72; cursor: default; } .band-nodata .sys-bar { opacity: 0.4; } .sys-hint { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12px; color: var(--muted); } .sys-hint svg { width: 13px; height: 13px; color: var(--teal); flex: none; } /* user-triggered re-sort: quick settle pulse so the reorder reads as intentional */ .sys-list.resorted .sys-row { animation: sysSettle 0.34s var(--ease-out) backwards; } @keyframes sysSettle { from { opacity: 0.35; transform: translateY(4px); } } /* F452 · per-row Health Trajectory Age Estimate chip — COMPUTER ONLY (≥1025px). Tablet/phone grids are untouched: the chip is display:none below 1025px. */ .sys-tage { display: none; } @media (min-width: 1025px) { .sys-tage { grid-area: tage; display: inline-flex; align-items: center; gap: 5px; justify-self: end; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1; padding: 4px 9px; border-radius: 999px; white-space: nowrap; border: 1px dashed color-mix(in srgb, var(--border-hi) 60%, transparent); } .sys-tage:empty { display: none; } .sys-tage svg { width: 11px; height: 11px; flex: none; opacity: .75; } .sys-tage b { font-family: var(--font-display); font-weight: 700; color: var(--text-2); font-size: 11.5px; } .sys-row { grid-template-columns: minmax(132px, 176px) 1fr auto 36px 76px; grid-template-areas: "name bar tage score chip"; } .sys-list.has-deltas .sys-row { grid-template-columns: minmax(132px, 176px) 1fr auto 44px 36px 76px; grid-template-areas: "name bar tage delta score chip"; } } /* system detail inside the why-modal */ .sysm-hero { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 10px; margin-bottom: 16px; } .sysm-num { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; } .sysm-of { font-size: 12.5px; color: var(--muted); } .sysm-bar { grid-column: 1 / -1; height: 9px; border-radius: 99px; background: rgba(127,127,127,0.16); overflow: hidden; position: relative; } .sysm-bar span { display: block; height: 100%; border-radius: 99px; } .sysm-bar .sysm-prev { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: rgba(255,255,255,0.6); border-radius: 1px; z-index: 1; } [data-theme="light"] .sysm-bar .sysm-prev { background: rgba(16,42,98,0.45); } .sysm-hero.band-strong .sysm-num { color: var(--teal); } .sysm-hero.band-building .sysm-num { color: var(--blue); } .sysm-hero.band-focus .sysm-num { color: var(--warning); } .sysm-hero.band-strong .sysm-bar span { background: linear-gradient(90deg, #0fbfae, var(--teal)); } .sysm-hero.band-building .sysm-bar span { background: linear-gradient(90deg, #3f6fe8, var(--blue)); } .sysm-hero.band-focus .sysm-bar span { background: linear-gradient(90deg, #e98c2e, var(--warning)); } /* "61 → 65 ▲ +4 since Jun 12" trend line under the hero */ .sysm-trend { display: flex; align-items: center; gap: 9px; margin: -6px 0 16px; padding: 10px 13px; border-radius: var(--r-sm); font-size: 13px; color: var(--text-2); background: var(--fill-1); border: 1px solid var(--border-soft); } .sysm-trend svg { width: 15px; height: 15px; color: var(--teal); flex: none; } .sysm-trend b { color: var(--text); font-family: var(--font-display); } .sysm-trend i { font-style: normal; color: var(--muted); font-size: 12px; } .smt { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; padding: 2px 8px; border-radius: var(--r-pill); } .smt.pos { color: var(--success); background: var(--shield-soft); } .smt.neg { color: var(--warning); background: rgba(255,181,71,0.12); } .smt.neu { color: var(--muted); background: var(--fill-2); } /* what we learned */ .learned-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .learned-item { padding: 15px 17px; border-radius: var(--r-md); background: rgba(255,255,255,0.028); border: 1px solid var(--border-soft); transition: 0.2s; } .learned-item:hover { border-color: var(--border); background: rgba(255,255,255,0.045); } .learned-item .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); } .learned-item .v { font-weight: 600; margin-top: 6px; font-size: 14.5px; } /* ── $1B PROGRESS BLOCK — trajectory · cohort · grade · milestone ───────── */ .rg-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; } .progress-block { display: flex; flex-direction: column; } /* grade medallion — the $1B seal (A teal · B blue · C amber · D red) */ .grade-medallion { --g1: var(--teal); --g2: var(--blue); position: relative; width: 52px; height: 52px; border-radius: 50%; flex: none; cursor: pointer; display: grid; place-items: center; border: none; padding: 0; background: conic-gradient(from 210deg, var(--g1), var(--g2), var(--g1)); box-shadow: 0 0 24px -4px color-mix(in srgb, var(--g1) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform .2s var(--ease-spring), box-shadow .2s; } .grade-medallion::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface-2); } .grade-medallion span { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .grade-medallion:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 30px -6px color-mix(in srgb, var(--g1) 70%, transparent), inset 0 1px 0 rgba(255,255,255,0.4); } .grade-medallion:active { transform: scale(.96); } .grade-medallion:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .grade-medallion.grade-b { --g1: var(--blue); --g2: var(--violet); } .grade-medallion.grade-c { --g1: var(--warning); --g2: #ff8a5c; } .grade-medallion.grade-d { --g1: var(--danger); --g2: var(--warning); } /* delta tiles — since last · since first · check-ins */ .prog-deltas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .pg-delta { padding: 13px 8px 11px; border-radius: var(--r-md); text-align: center; background: var(--fill-1); border: 1px solid var(--border-soft); transition: border-color .2s, background .2s; } .pg-delta:hover { border-color: var(--border); background: var(--fill-2); } .pg-delta .v { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.05; font-variant-numeric: tabular-nums; } .pg-delta .v.pos { color: var(--shield); text-shadow: 0 0 22px var(--shield-glow); } .pg-delta .v.neg { color: var(--danger); } .pg-delta .v.neu { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pg-delta .k { display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } /* the trend chart — SVG line/area + HTML dot overlays (always-round dots) */ .pg-chart { position: relative; width: 100%; height: clamp(150px, 17vw, 196px); border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--fill-1); margin-bottom: 16px; touch-action: pan-y; } .pg-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .pg-grid { stroke: var(--grid-line); stroke-width: 1; stroke-dasharray: 2 5; fill: none; } .pg-cross { position: absolute; top: 10px; bottom: 26px; width: 1px; background: var(--border-hi); opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity .15s; } .pg-cross.on { opacity: .6; } .pg-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border-radius: 50%; border: none; background: transparent; cursor: pointer; z-index: 2; } .pg-dot::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-hi); border: 2px solid var(--teal); box-shadow: 0 0 10px var(--teal-glow); transition: transform .18s var(--ease-spring), box-shadow .18s; } .pg-dot:hover::after, .pg-dot.active::after { transform: scale(1.35); box-shadow: 0 0 16px var(--teal-glow); } .pg-dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .pg-dot.now::after { background: var(--grad-brand); border-color: rgba(255,255,255,.85); } .pg-dot.now::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--teal) 55%, transparent); animation: pgPulse 2.4s var(--ease-out) infinite; } @keyframes pgPulse { 0% { transform: scale(.6); opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } } .pg-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); z-index: 3; display: flex; align-items: baseline; gap: 7px; padding: 8px 12px; border-radius: 12px; background: var(--surface-hi); border: 1px solid var(--border-hi); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .15s, left .18s var(--ease-out), top .18s var(--ease-out); white-space: nowrap; } .pg-tip.on { opacity: 1; } .pg-tip b { font-family: var(--font-display); font-weight: 800; font-size: 17px; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pg-tip span { font-size: 11px; color: var(--muted); } .pg-tip em { font-style: normal; font-size: 11px; font-weight: 700; } .pg-tip em.up { color: var(--shield); } .pg-tip em.down { color: var(--danger); } /* single check-in — the readout is pinned, so the crosshair is just noise */ .pg-chart.pg-solo { cursor: default; } .pg-chart.pg-solo .pg-cross { display: none; } .pg-chart.pg-solo .pg-dot::after { transform: scale(1.35); box-shadow: 0 0 16px var(--teal-glow); } .pg-axis { position: absolute; bottom: 7px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); pointer-events: none; } .pg-x-l { left: 12px; } .pg-x-r { right: 12px; } /* cohort track — you vs the IDLife average */ .prog-compare { margin-bottom: 16px; } .pgc-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 20px; } .pgc-head svg { width: 15px; height: 15px; color: var(--blue); flex: none; } .pgc-head b { font-family: var(--font-display); color: var(--text); } .pg-track { position: relative; height: 10px; border-radius: 99px; margin: 0 6px 26px; background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 28%, transparent), color-mix(in srgb, var(--warning) 30%, transparent) 38%, color-mix(in srgb, var(--teal) 32%, transparent) 72%, color-mix(in srgb, var(--shield) 38%, transparent)); } .pg-avg, .pg-you { position: absolute; top: 50%; width: 0; height: 0; } .pg-avg i { position: absolute; left: 0; top: -9px; transform: translateX(-50%); width: 2px; height: 18px; border-radius: 2px; background: var(--muted); opacity: .8; } .pg-avg .pgl { position: absolute; top: -26px; left: 0; transform: translateX(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; letter-spacing: .03em; } .pg-you i { position: absolute; left: 0; top: -8px; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--grad-brand); border: 2.5px solid var(--surface-hi); box-shadow: 0 0 16px var(--teal-glow); } .pg-you .pgl { position: absolute; top: 14px; left: 0; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; } .pg-you .pgl b { font-family: var(--font-display); color: var(--teal); } /* next milestone */ .prog-milestone { border-top: 1px solid var(--border-soft); padding-top: 14px; } .pg-ms-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-2); } .pg-ms-row svg { width: 14px; height: 14px; color: var(--teal); vertical-align: -2px; margin-right: 3px; } .pg-ms-row b { color: var(--text); } .pg-away { flex: none; font-size: 11px; font-weight: 700; color: var(--teal); border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent); border-radius: var(--r-pill); padding: 4px 11px; background: var(--teal-soft); white-space: nowrap; } .prog-milestone .meter { margin: 12px 0 2px; } /* SHIELD block (spans full width below grid) */ .shield-block { border-color: rgba(58,235,181,0.22); } .shield-block::after { content:''; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: radial-gradient(120% 100% at 0% 0%, rgba(58,235,181,0.10), transparent 45%); } .shield-block .block-title svg { color: var(--shield); } .shield-screened { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; } .shield-screened .chip { font-size: 12px; padding: 7px 13px; border-radius: var(--r-pill); background: rgba(58,235,181,0.08); border: 1px solid rgba(58,235,181,0.25); color: var(--shield); text-transform: capitalize; } .blocked-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .blocked-card { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: var(--danger-soft); border: 1px solid rgba(255,97,115,0.22); } .blocked-card .bx { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(255,97,115,0.14); color: var(--danger); } .blocked-card .bx svg { width: 18px; height: 18px; } .blocked-card .bname { font-weight: 700; font-size: 15px; } .blocked-card .bcat { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--danger); margin: 4px 0 7px; } .blocked-card .breason { font-size: 13px; color: var(--text-2); line-height: 1.5; } .blocked-card .bdisc { font-size: 11.5px; color: var(--muted-2); margin-top: 7px; font-style: italic; } /* Shield ALL-CLEAR — a slim, on-brand band (never a giant glyph). Medallion + one line of copy + a quiet “0 conflicts” pill; everything is token-driven. */ .shield-clear { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid rgba(58,235,181,0.22); background: linear-gradient(135deg, rgba(58,235,181,0.10), transparent 55%), var(--fill-1); } .sc-medal { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: var(--shield); background: rgba(58,235,181,0.12); border: 1px solid rgba(58,235,181,0.28); box-shadow: 0 0 18px rgba(58,235,181,0.18); } .sc-medal svg { width: 20px; height: 20px; } .sc-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .sc-copy strong { font-family: var(--font-display); font-size: 14px; letter-spacing: -0.01em; color: var(--text); } .sc-copy span { font-size: 12.5px; line-height: 1.5; color: var(--muted); } .sc-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--shield); border: 1px solid rgba(58,235,181,0.30); background: rgba(58,235,181,0.08); } .sc-pill svg { width: 12px; height: 12px; } @media (max-width: 640px) { .shield-clear { flex-wrap: wrap; } .sc-copy { flex-basis: calc(100% - 54px); } .sc-pill { margin-left: 54px; } } .provider-reminder { display: flex; gap: 11px; align-items: center; margin-top: 16px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border-soft); padding-top: 16px; } .provider-reminder svg { width: 17px; height: 17px; flex: none; color: var(--shield); } /* ───────────────────────────────────────────────────────────────────────── SEARCH PICKER — medications / conditions (theme-aware · inline · premium) Results render IN FLOW (never a floating layer) so they can't overlap the Continue button or run off-screen. All colour comes from design tokens, so light + dark both look intentional. ──────────────────────────────────────────────────────────────────────── */ .search-picker { margin-top: 22px; } .sp { position: relative; } .sp-field { position: relative; display: flex; align-items: center; } .sp-field .sp-ico { position: absolute; left: 17px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; } .sp-field .sp-ico svg { width: 19px; height: 19px; } .sp-input { width: 100%; min-height: 58px; padding: 0 46px; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 16px; box-shadow: var(--shadow-sm); transition: border-color .18s, box-shadow .18s, background .18s; } .sp-input::placeholder { color: var(--muted-2); } .sp-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); } .sp-input:disabled { opacity: .55; } .sp-spin { position: absolute; right: 16px; width: 18px; height: 18px; color: var(--teal); animation: sp-rot 1.1s linear infinite; } .sp-spin svg { width: 18px; height: 18px; } @keyframes sp-rot { to { transform: rotate(360deg); } } /* results — inline list, themed surface */ .sp-results { margin-top: 10px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 6px; max-height: 336px; overflow-y: auto; overscroll-behavior: contain; animation: spDrop .18s var(--ease-out) both; } @keyframes spDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .sp-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 15px; cursor: pointer; transition: background .12s; } .sp-row:hover, .sp-row.active { background: var(--teal-soft); } .sp-row-ico { width: 22px; height: 22px; flex: none; color: var(--muted); display: grid; place-items: center; } .sp-row-ico svg { width: 19px; height: 19px; } .sp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sp-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-row-name mark { background: transparent; color: var(--teal); font-weight: 700; } .sp-row-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-tag { flex: none; font-size: 10.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: var(--r-pill); background: var(--fill-1); } .sp-tag.screened { color: var(--shield); background: var(--shield-soft); } .sp-tag svg { width: 12px; height: 12px; } .sp-row-add { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); opacity: .55; } .sp-row:hover .sp-row-add, .sp-row.active .sp-row-add { color: var(--teal); opacity: 1; } .sp-row-add svg { width: 16px; height: 16px; } .sp-noresult { display: flex; align-items: center; gap: 13px; padding: 16px 14px; color: var(--muted); } .sp-noresult svg { width: 20px; height: 20px; flex: none; opacity: .7; } .sp-noresult b { display: block; color: var(--text-2); font-weight: 600; font-size: 14px; } .sp-noresult span { font-size: 12.5px; } /* selected chips */ .sp-selected { margin-top: 20px; } .sp-sel-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 11px; } .sp-sel-head svg { width: 14px; height: 14px; color: var(--teal); } .sp-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--grad-brand); color: var(--ink-on-brand); font-weight: 800; font-size: 11px; text-transform: none; letter-spacing: 0; } .sp-chips { display: flex; flex-wrap: wrap; gap: 9px; } .sp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 13px; border-radius: var(--r-pill); background: var(--teal-soft); border: 1px solid var(--teal); color: var(--text); font-size: 14px; font-weight: 500; } .sp-chip > svg { width: 15px; height: 15px; color: var(--teal); flex: none; } .sp-chip-x { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; border: none; background: var(--fill-2); color: var(--muted); cursor: pointer; transition: background .14s, color .14s; } .sp-chip-x:hover { background: var(--danger-soft); color: var(--danger); } .sp-chip-x svg { width: 12px; height: 12px; } /* quick-add — common conditions (tap-grid) + condition-driven medications */ .sp-quick { margin-top: 20px; } .sp-quick-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text-2); margin-bottom: 13px; } .sp-quick-head svg { width: 17px; height: 17px; flex: none; color: var(--teal); } .sp-quick-label { font-size: 12px; color: var(--muted); margin: 16px 0 9px; } .sp-quick-label b { color: var(--text-2); font-weight: 600; } .sp-quick-grid { display: flex; flex-wrap: wrap; gap: 9px; } .sp-quick-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: transform .14s var(--ease-spring), border-color .16s, background .16s, box-shadow .16s; } .sp-quick-pill:hover { transform: translateY(-2px); border-color: var(--border-hi); box-shadow: var(--shadow-sm); } .sp-quick-pill:active { transform: translateY(0) scale(.98); } .sp-quick-pill.added { background: var(--teal-soft); border-color: var(--teal); } .sp-pill-shield { display: inline-flex; color: var(--shield); } .sp-pill-shield svg { width: 14px; height: 14px; } .sp-pill-name { white-space: nowrap; } .sp-pill-ico { display: inline-flex; color: var(--muted); } .sp-quick-pill.added .sp-pill-ico { color: var(--teal); } .sp-pill-ico svg { width: 15px; height: 15px; } .sp-quick-note { display: flex; align-items: center; gap: 11px; margin-top: 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--fill-1); border: 1px dashed var(--border); color: var(--muted); font-size: 13.5px; } .sp-quick-note svg { width: 18px; height: 18px; flex: none; color: var(--teal); } .sp-empty-hint { margin-top: 16px; font-size: 13px; color: var(--muted); } /* ───────────────────────────────────────────────────────────────────────── JACOB FIX — data-quality flags (badge + hover tooltip + run-level panel) ──────────────────────────────────────────────────────────────────────── */ .jacob-fix { position: relative; display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255,181,71,0.14); border: 1px solid var(--warning); color: var(--warning); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: help; white-space: nowrap; } .jacob-fix svg { width: 13px; height: 13px; } .jacob-fix.compact { padding: 2px 7px; font-size: 10px; } .jacob-fix .jf-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 320px; padding: 12px 14px; border-radius: 12px; z-index: 60; background: var(--bg-elev, #0e1730); border: 1px solid var(--warning); box-shadow: 0 18px 44px rgba(0,0,0,0.5); color: var(--text-2); font-size: 12.5px; font-weight: 500; line-height: 1.55; text-transform: none; letter-spacing: 0; opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s; pointer-events: none; text-align: left; } .jacob-fix .jf-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--warning); } .jacob-fix:hover .jf-tip, .jacob-fix:focus .jf-tip, .jacob-fix:focus-visible .jf-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .jacob-panel { margin: 4px 0 18px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(255,181,71,0.07); border: 1px solid rgba(255,181,71,0.35); border-left: 4px solid var(--warning); } .jacob-panel-head { display: flex; align-items: center; gap: 9px; color: var(--warning); font-size: 14px; } .jacob-panel-head svg { width: 18px; height: 18px; flex: none; } .jacob-panel-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .jacob-panel-list li { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; font-size: 13.5px; } .jf-pill { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(255,181,71,0.16); color: var(--warning); } .jf-subject { font-weight: 600; color: var(--text); } .blocked-card.severe { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; } .blocked-card .why-pill { margin-top: 11px; } /* TIERS band — full-bleed gradient section */ .tiers-band { width: 100%; padding: clamp(40px, 5vw, 80px) 0; margin-top: clamp(16px, 2vw, 28px); background: radial-gradient(80% 120% at 50% 0%, rgba(79,142,247,0.08), transparent 60%), linear-gradient(180deg, rgba(8,15,35,0.0), rgba(8,15,35,0.5)); border-block: 1px solid var(--hairline); } .tiers-band-inner { padding-inline: clamp(18px, 4vw, 56px); } .tier-intro { text-align: center; margin-bottom: clamp(26px, 3vw, 44px); } .tier-intro .h2 { margin: 10px 0; } .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 28px); align-items: stretch; } .tier { position: relative; padding: clamp(24px, 2.2vw, 34px) clamp(20px, 1.8vw, 28px); display: flex; flex-direction: column; border: 1.5px solid var(--border); border-radius: var(--r-xl); background: var(--grad-card); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: transform 0.28s var(--ease-spring), border-color 0.25s, box-shadow 0.25s; } /* each tier carries one hue of the brand triad — Essential teal · Targeted blue · Comprehensive violet */ .tier[data-ti="0"] { --thue: var(--teal); } .tier[data-ti="1"] { --thue: var(--blue); } .tier[data-ti="2"] { --thue: var(--violet); } .tier::before { content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--thue, var(--teal)), transparent); opacity: .75; } .tier:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--thue, var(--teal)) 45%, transparent); box-shadow: var(--shadow-lg); } .tier.recommended { border-color: var(--border-hi); box-shadow: var(--glow-teal), var(--shadow-lg); background: linear-gradient(180deg, rgba(20,224,203,0.07), rgba(10,18,40,0.82)); transform: scale(1.02); } .tier.recommended:hover { transform: translateY(-8px) scale(1.02); } .tier .rec-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--grad-brand); color: var(--ink-on-brand); padding: 6px 18px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--glow-teal); } .tier .tname { font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); } .tier .tcount { color: var(--thue, var(--teal)); border-color: color-mix(in srgb, var(--thue, var(--teal)) 32%, transparent); background: color-mix(in srgb, var(--thue, var(--teal)) 9%, transparent); } .tier .ttag { font-size: 13px; color: var(--muted); margin-top: 4px; min-height: 2.6em; } .tier .tprice { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 2.6vw, 40px); margin: 16px 0 4px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tier .tprice small { font-size: 14px; color: var(--muted); font-weight: 500; -webkit-text-fill-color: var(--muted); } /* budget honesty chip — only present when real pricing is live (P4.E) */ .tier .tfit { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 10px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; } .tier .tfit svg { width: 12px; height: 12px; flex: none; } .tier .tfit-within { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 32%, transparent); background: color-mix(in srgb, var(--teal) 9%, transparent); } .tier .tfit-stretch { color: var(--amber, #f0b429); border-color: color-mix(in srgb, var(--amber, #f0b429) 32%, transparent); background: color-mix(in srgb, var(--amber, #f0b429) 9%, transparent); } .tier .tfit-above { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 32%, transparent); background: color-mix(in srgb, var(--violet) 9%, transparent); } .tier .tbest { font-size: 12.5px; color: var(--text-2); margin-bottom: 18px; } .tier .titems { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 20px; flex: 1; } .tier .titems > li { font-size: 13.5px; display: flex; gap: 9px; align-items: flex-start; color: var(--text-2); } .tier .titems > li > svg { width: 15px; height: 15px; color: var(--thue, var(--teal)); flex: none; margin-top: 3px; } /* anchored value footer — bottoms align across all three tiers (no dead space) */ .tier .tier-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 15px; } .tier .tier-value { display: flex; align-items: stretch; gap: 8px; } .tier .tv { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 2px 4px; } .tier .tv + .tv { border-left: 1px solid var(--border-soft); } .tier .tv b { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .tier .tv b svg { width: 13px; height: 13px; color: var(--shield); flex: none; } .tier .tv span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); white-space: nowrap; } /* why pills — glass pill triggers (open the premium why-modals) */ .why-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); background: color-mix(in srgb, var(--teal) 8%, transparent); color: var(--teal); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .16s var(--ease-spring), background .18s, border-color .18s, box-shadow .18s; } .why-pill svg { width: 13px; height: 13px; flex: none; } .why-pill:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--teal) 14%, transparent); border-color: color-mix(in srgb, var(--teal) 50%, transparent); box-shadow: 0 6px 18px -8px var(--teal-glow); } .why-pill:active { transform: scale(.97); } .why-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .why-pill.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); } .why-pill.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 52%, transparent); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--danger) 45%, transparent); } .why-src { display: none; } .why-level { font-size: 12.5px; margin-bottom: 9px; color: var(--text-2); line-height: 1.5; } .why-level:last-child { margin-bottom: 0; } .why-level b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--teal); margin-bottom: 3px; } .why-cite { font-size: 11px; color: var(--muted-2); font-style: italic; margin-top: 6px; } /* Full reason list — every distinct triggered reason with its own studies */ .why-reasons { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .why-reason { padding-left: 11px; border-left: 2px solid var(--border-soft); } .why-reason-t { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.5; } .why-reason-cite { display: block; font-size: 10.5px; color: var(--muted-2); font-style: italic; margin-top: 4px; } /* secondary grid (deferred + completeness) */ .results-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.6vw, 24px); padding: clamp(28px, 3vw, 48px) clamp(18px, 4vw, 56px) 0; } .deferred-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .deferred-item:last-child { border-bottom: none; padding-bottom: 0; } .deferred-item .dname { font-weight: 600; font-size: 14.5px; } .deferred-item .dreason { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .deferred-item .later { margin-left: auto; font-size: 11px; color: var(--muted); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 5px 12px; align-self: center; max-width: 46%; text-align: center; line-height: 1.3; } .ov-saved-later .block-title { flex-wrap: wrap; row-gap: 8px; } .ov-saved-revisit { margin-left: auto; font-size: 11px; line-height: 1; color: var(--muted); border: 1px solid var(--border-soft); padding: 7px 10px; border-radius: var(--r-pill); white-space: nowrap; } .ov-saved-later .deferred-item { align-items: flex-start; gap: clamp(14px, 2vw, 26px); } .ov-saved-later .deferred-main { flex: 0 0 min(210px, 34%); min-width: 120px; } .ov-saved-later .deferred-why { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .ov-saved-later .deferred-why b { display: block; margin-bottom: 3px; color: var(--text); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .ov-saved-later .deferred-why span { display: block; } .meter { height: 9px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; margin: 14px 0 12px; } .meter > span { display: block; height: 100%; background: var(--grad-brand-3); border-radius: 99px; box-shadow: 0 0 16px rgba(20,224,203,0.5); transition: width 1s var(--ease-out); } .completeness-up { font-size: 13.5px; color: var(--text-2); line-height: 1.55; } /* DNA-connected confirmation row in the "How complete is this?" card — replaces the connect-upsell whenever the LIVE session has DNA linked. */ .dna-confirm { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-hi); background: linear-gradient(135deg, var(--teal-soft), var(--blue-soft)); font-size: 13.5px; line-height: 1.5; color: var(--text-2); } .dna-confirm b { color: var(--text); font-weight: 700; } .dna-confirm svg { width: 16px; height: 16px; flex: none; } .dna-confirm svg:first-child { color: var(--teal); } .dna-confirm svg:last-child { width: 14px; height: 14px; color: var(--shield); } /* Methylation add-on NOT yet connected — the missing piece keeping the plan below 100%. An ACTION prompt (not a confirmation), so a distinct violet, dashed treatment that reads as "do this next" rather than "done". */ .methyl-upsell { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 11px 14px; border-radius: var(--r-sm); border: 1px dashed var(--violet); background: var(--violet-soft); font-size: 13px; line-height: 1.5; color: var(--text-2); } .methyl-upsell b { color: var(--text); font-weight: 700; } .methyl-upsell svg { width: 16px; height: 16px; flex: none; color: var(--violet); margin-top: 1px; } .ov-precision-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .ov-precision-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--fill-1); } .ov-precision-row.is-on { border-color: var(--border-hi); background: linear-gradient(135deg, var(--teal-soft), var(--blue-soft)); } .ov-precision-row.is-off, .ov-precision-row.is-due { border-style: dashed; } .ov-precision-row.is-off { border-color: color-mix(in srgb, var(--violet) 70%, var(--border)); background: var(--violet-soft); } .ov-precision-row.is-due { border-color: color-mix(in srgb, var(--warning, #f5a623) 70%, var(--border)); background: color-mix(in srgb, var(--warning, #f5a623) 9%, transparent); } .ov-precision-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--teal); background: var(--fill-2); } .ov-precision-row.is-off .ov-precision-ic { color: var(--violet); } .ov-precision-row.is-due .ov-precision-ic { color: var(--warning, #f5a623); } .ov-precision-ic svg { width: 15px; height: 15px; } .ov-precision-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ov-precision-tx b { color: var(--text); font-weight: 700; font-size: 13px; } .ov-precision-tx small { color: var(--muted); font-size: 11.8px; line-height: 1.4; } .ov-precision-ok { flex: none; color: var(--shield); } .ov-precision-ok svg { width: 15px; height: 15px; } .ov-precision-btn { flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 42%; border: 1px solid var(--border-hi); border-radius: 999px; padding: 7px 10px; cursor: pointer; background: var(--fill-2); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .ov-precision-btn:hover { background: var(--teal-soft); color: var(--teal); } .ov-precision-btn svg { width: 12px; height: 12px; } @media (max-width: 560px) { .ov-precision-row { align-items: flex-start; flex-wrap: wrap; } .ov-precision-btn { max-width: none; margin-left: 38px; } } /* footer CTA */ .results-footer { padding: clamp(28px, 3vw, 44px) clamp(18px, 4vw, 56px) clamp(40px, 5vw, 72px); } .cta-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(26px, 3vw, 40px); } .cta-card .cta-copy { max-width: 60ch; } .cta-card .cta-copy h3 { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); font-weight: 700; margin-bottom: 6px; } .cta-card .cta-copy p { color: var(--muted); font-size: 14px; } .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; } .disclaimer { font-size: 11.5px; color: var(--muted-2); text-align: center; margin-top: 22px; max-width: 70ch; margin-inline: auto; line-height: 1.6; } /* =========================================================================== RESPONSIVE =========================================================================== */ /* Tablet */ @media (max-width: 1024px) { .results-hero { grid-template-columns: 1fr; text-align: center; gap: 28px; justify-items: center; } .hero-copy { display: flex; flex-direction: column; align-items: center; } .hero-opps { justify-content: center; } .results-grid { grid-template-columns: 1fr; } .results-secondary { grid-template-columns: 1fr; } .tiers { grid-template-columns: 1fr; max-width: 580px; margin-inline: auto; } .tier.recommended { order: -1; transform: scale(1); } .tier.recommended:hover { transform: translateY(-8px); } } /* Phone */ @media (max-width: 640px) { .hero-traj { flex-direction: column; gap: 10px; text-align: center; } .hero-traj-vs { border-left: 0; padding-left: 0; align-items: center; border-top: 1px solid var(--hairline); padding-top: 10px; } .options.cols-2 { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } /* single column on phones — the odd-count centering (incl. its .dense width override, which outranks a 3-class selector) must be fully undone */ .options.cols-2.odd-center > .option:last-child, .options.cols-2.dense.odd-center > .option:last-child { grid-row: auto; grid-column: auto; justify-self: stretch; width: auto; } .options.scale { grid-template-columns: repeat(5, 1fr); } .tiers { grid-template-columns: 1fr; } .tier.recommended { order: -1; transform: none; } .tier.recommended:hover { transform: translateY(-6px); } .blocked-list { grid-template-columns: 1fr; } .learned-grid { grid-template-columns: 1fr; } .cta-card { flex-direction: column; align-items: stretch; text-align: center; } .cta-actions { flex-direction: column; } .cta-actions .btn { width: 100%; } .option { padding: 17px; min-height: 60px; } /* nav chips: left-aligned scroll strip with a soft right fade cue */ .results-nav { justify-content: flex-start; padding-bottom: 10px; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 34px), transparent 100%); } .rnav-chip { padding: 7px 12px; font-size: 12px; } .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } .back-top { right: 14px; width: 44px; height: 44px; } .prog-deltas { gap: 8px; } .pg-delta { padding: 11px 6px 9px; } .pg-delta .k { font-size: 9px; } .pg-chart { height: 150px; } .grade-medallion { width: 46px; height: 46px; } .grade-medallion span { font-size: 16.5px; } .grade-medallion:hover { transform: none; } .pg-ms-row { flex-wrap: wrap; } /* system rows stack: name + score + chip on top, full-width bar below */ .sys-row { grid-template-columns: 1fr 36px auto; grid-template-areas: "name score chip" "bar bar bar"; row-gap: 9px; padding: 13px 14px; } .sys-list.has-deltas .sys-row { grid-template-columns: 1fr 44px 36px auto; grid-template-areas: "name delta score chip" "bar bar bar bar"; } .sys-row:hover { transform: none; } .sys-move { padding: 10px 12px; } .sys-move .sm-chips { margin-left: 0; width: 100%; } .block-title .sys-sort { margin-top: 2px; } /* kill hover transforms on touch */ .tier:hover, .option:hover, .btn-primary:hover, .attr:hover, .btn-ghost:hover, .rnav-chip:hover, .back-top:hover { transform: none; } .orb.o3 { display: none; } } @media (max-width: 380px) { .options.scale { grid-template-columns: repeat(5, 1fr); gap: 6px; } .options.scale .opt-label { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.1s !important; } .orb, .bg::after { animation: none; } } /* =========================================================================== F398 · FLOATING TOP-RIGHT ACCOUNT BUTTON (was the theme toggle) One fixed pill, three states: ACCOUNT (default — monogram or user glyph), CART (F370, on the portal with items), and the shared sizing/skin below. Theme switching now lives inside Account & Settings. =========================================================================== */ .acct-btn { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 60; width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--text-2); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-spring), color .2s, border-color .2s, background .2s; } .acct-btn:hover { color: var(--text); border-color: var(--border-hi); transform: translateY(-2px); } .acct-btn:active { transform: scale(.94); } .acct-btn svg { width: 20px; height: 20px; } /* F183 · MOBILE ONLY — shrink the floating switch to the SAME height as the assessment Shield pill (25px — the reference "perfect" mobile icon) so the top-right controls read symmetrically across home / assessment / results. Phones only; tablet + desktop keep the 44px target. */ @media (max-width: 640px) { .acct-btn { width: 25px; height: 25px; } .acct-btn svg { width: 14px; height: 14px; } } /* F183 · EXCEPTION — the HOMEPAGE PORTAL (castle overview) shows a bigger 38px circular Shield badge (not the 25px assessment pill), so on that screen the button matches THAT: a 38px circle. Assessment + results keep the 25px pill-matched size above. `body.on-overview` out-specifies the rule above. */ @media (max-width: 640px) { body.on-overview .acct-btn { width: 38px; height: 38px; } body.on-overview .acct-btn svg { width: 18px; height: 18px; } /* F370 · cart-mode centering for the 38px phone circle ((66 − 38) / 2) */ body.on-overview .acct-btn.cart-mode { top: max(14px, env(safe-area-inset-top)); } /* the Health Report (Data & Reports) screen matches — 25px was too small */ body.on-results .acct-btn { width: 38px; height: 38px; } body.on-results .acct-btn svg { width: 18px; height: 18px; } } /* F412 · PORTAL ONLY — vertically center the fixed account button inside the sticky 60px topbar so it lines up with the nav tabs. Horizontal (right) is untouched; the transform only moves it on the Y axis. */ body.on-overview #acct-btn { top: 0; height: 44px; transform: translateY(calc((var(--ov-topbar-h, 60px) - 44px) / 2)); } body.on-overview #acct-btn:hover { transform: translateY(calc((var(--ov-topbar-h, 60px) - 44px) / 2 - 2px)); } body.on-overview #acct-btn:active { transform: translateY(calc((var(--ov-topbar-h, 60px) - 44px) / 2)) scale(.94); } @media (max-width: 640px) { body.on-overview #acct-btn { height: 38px; transform: translateY(calc((var(--ov-topbar-h, 60px) - 38px) / 2)); } body.on-overview #acct-btn:hover { transform: translateY(calc((var(--ov-topbar-h, 60px) - 38px) / 2 - 2px)); } body.on-overview #acct-btn:active { transform: translateY(calc((var(--ov-topbar-h, 60px) - 38px) / 2)) scale(.94); } } /* keep the sticky topbars clear of the floating toggle */ .results-topbar { padding-right: calc(clamp(18px, 4vw, 56px) + 54px); } #screen-question .flow-topbar { padding-right: calc(clamp(18px, 4vw, 40px) + 50px); } @media (max-width: 640px) { #screen-question .flow-topbar { padding: 12px calc(64px + env(safe-area-inset-right)) 12px 14px; } #screen-question .flow-topbar-inner { display: grid; grid-template-columns: max-content minmax(42px, 1fr) max-content max-content; gap: clamp(8px, 2.2vw, 12px); max-width: none; align-items: center; } #screen-question .brandmark-sm { min-width: 0; gap: 6px; } #screen-question .brand-idn-word { font-size: 13px; letter-spacing: .035em; } #screen-question .progress-track { min-width: 42px; max-width: 100%; } #screen-question .progress-count { min-width: 46px; padding: 0 9px; } #screen-question #q-shield-pill { justify-self: end; } } /* =========================================================================== LANDING — BRAND SYSTEM (the "Core Visual System" slide) =========================================================================== */ #screen-landing .flow { max-width: 1120px; } /* the cinematic hero shell */ .landing-hero { width: 100%; max-width: 1200px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(16px, 2.6vw, 26px); } .ls-art { display: flex; flex-direction: column; align-items: center; gap: 14px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; } .brand-trio { font-size: clamp(30px, 6.6vw, 60px); line-height: 1.08; letter-spacing: -0.03em; } .brand-trio span { white-space: nowrap; } .kw-blue { color: var(--blue); } .kw-cyan { color: var(--teal); } .kw-violet { color: var(--violet); } /* compact proof chips (replace the text-heavy cards) */ .proof-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .proof-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--fill-1); font-size: 13.5px; color: var(--text-2); transition: transform .22s var(--ease-spring), border-color .22s, box-shadow .22s, background .22s; } .proof-chip svg { width: 17px; height: 17px; } .proof-chip b { font-family: var(--font-display); font-weight: 600; color: var(--text); } .proof-chip.c-blue { color: var(--blue); } .proof-chip.c-cyan { color: var(--teal); } .proof-chip.c-violet { color: var(--violet); } .proof-chip:hover { transform: translateY(-3px); border-color: currentColor; box-shadow: 0 10px 26px -12px currentColor; background: var(--fill-2); } .pc-caption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; max-width: 30ch; } .pc-caption-mobile { display: none; } .pc-cap-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--shield); padding: 7px 15px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--shield) 38%, transparent); background: var(--shield-soft); box-shadow: 0 0 28px var(--shield-glow), inset 0 1px 0 rgba(255,255,255,0.08); } .pc-cap-label svg { width: 14px; height: 14px; } .pc-cap-label .live { width: 6px; height: 6px; border-radius: 50%; background: var(--shield); box-shadow: 0 0 10px var(--shield); animation: pulse 1.8s ease-in-out infinite; } .pc-cap-head { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.32; letter-spacing: -0.015em; color: var(--text); max-width: 22ch; } .pc-cap-head .hl { background: var(--grad-shield); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── THE PROTECTION CORE — animated hero (pure CSS/SVG) ──────────────── */ .protect-core { position: relative; display: grid; place-items: center; width: clamp(280px, 40vw, 460px); aspect-ratio: 1; margin-inline: auto; animation: pcFloat 7s var(--ease-out) infinite; } .protect-core > * { grid-area: 1 / 1; } .pc-halo { width: 90%; aspect-ratio: 1; border-radius: 50%; opacity: .6; filter: blur(28px); background: conic-gradient(from 0deg, transparent 0 10%, var(--teal) 20%, transparent 36%, var(--blue) 54%, transparent 70%, var(--violet) 86%, transparent 100%); animation: pcSpin 16s linear infinite; will-change: transform; } .pc-ring { border-radius: 50%; border: 1px solid transparent; } .pc-ring-1 { width: 100%; aspect-ratio: 1; border-color: color-mix(in srgb, var(--teal) 50%, transparent); box-shadow: inset 0 0 50px var(--teal-glow), 0 0 70px -16px var(--teal-glow); } .pc-ring-2 { width: 78%; aspect-ratio: 1; border-style: dashed; border-color: color-mix(in srgb, var(--blue) 42%, transparent); animation: pcSpin 30s linear infinite reverse; will-change: transform; } .pc-ring-3 { width: 56%; aspect-ratio: 1; border-color: color-mix(in srgb, var(--violet) 32%, transparent); } .pc-orbit { position: relative; width: 78%; aspect-ratio: 1; animation: pcSpin 24s linear infinite; will-change: transform; } .pc-node { position: absolute; width: 0; height: 0; } .pc-node::after { content: ''; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; opacity: .8; background: radial-gradient(circle at 32% 30%, #fff, var(--teal)); box-shadow: 0 0 7px var(--teal-glow); } .pc-sparks { position: relative; width: 100%; aspect-ratio: 1; } .pc-spark { position: absolute; width: 0; height: 0; } .pc-spark::after { content: ''; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.3); width: 20px; height: 20px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, var(--teal) 0%, transparent 70%); animation: pcSpark 3.2s ease-out infinite; } .pc-core { position: relative; width: clamp(112px, 14.5vw, 184px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: visible; background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.18), rgba(8,15,35,.9)); border: 1px solid var(--border-hi); box-shadow: 0 0 60px -6px var(--teal-glow), inset 0 0 34px rgba(20,224,203,.22), 0 18px 50px rgba(3,8,24,.5); animation: pcBreath 4.5s var(--ease-out) infinite; will-change: transform; } .pc-core .pc-id-shield { width: 72%; height: auto; transform-origin: 50% 56%; filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--blue) 42%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--teal) 30%, transparent)); animation: pcShieldFloat 5.5s var(--ease-out) infinite; will-change: transform; } @keyframes pcShieldFloat { 0%,100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-4px) rotate(1.4deg); } } @keyframes pcSpin { to { transform: rotate(360deg); } } @keyframes pcBreath{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes pcFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pcSpark { 0% { opacity:0; transform: translate(-50%,-50%) scale(.3); } 14% { opacity:.9; transform: translate(-50%,-50%) scale(1); } 34% { opacity:0; transform: translate(-50%,-50%) scale(1.6); } 100% { opacity:0; } } /* footer ribbon: Better insights · Stronger protection · Greater confidence */ .landing-ribbon { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 16px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text-2); } .landing-ribbon .rb.accent { color: var(--teal); } .landing-ribbon .sep { width: 1px; height: 13px; background: var(--border); display: inline-block; } /* keyword glow only in dark */ [data-theme="dark"] .kw-blue { text-shadow: 0 0 34px rgba(91,149,255,0.38); } [data-theme="dark"] .kw-cyan { text-shadow: 0 0 34px rgba(20,224,203,0.34); } [data-theme="dark"] .kw-violet { text-shadow: 0 0 34px rgba(181,108,255,0.32); } /* =========================================================================== $7B UPGRADE LAYER — motion · depth · trust · polish (F1–F16) Cross-browser: vendor-prefixed clip/backdrop + @supports guards, transforms/ opacity only, no Chrome-only APIs. ALL motion neutralized by the global prefers-reduced-motion rule (plus the targeted overrides at the end here). =========================================================================== */ /* F15 · graceful page load-in (opacity only → safe with reduced-motion) */ .app { animation: appIn .7s var(--ease-out) both; } @keyframes appIn { from { opacity: 0; } to { opacity: 1; } } /* F6 · ambient particle drift (motes injected by initParticles) */ .particles { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } .particles .mote { position: absolute; bottom: -12px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0) 66%); animation-name: moteRise; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform, opacity; } @keyframes moteRise { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 12% { opacity: .55; } 88% { opacity: .38; } 100% { transform: translate(var(--drift, 0), -92vh) scale(1); opacity: 0; } } /* F1 · cursor-reactive 3D shield — the tilt rides a WRAPPER so it never fights the inner float/spin/breath animations. F3 · cinematic intro (scale+unblur). Two separate layers = two separate transforms (no fill-forwards conflict). */ .pc-stage { display: grid; place-items: center; width: 100%; transform: perspective(1100px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; } .pc-stage > * { grid-area: 1 / 1; } .pc-intro { display: grid; place-items: center; width: 100%; animation: pcIntro 1.15s var(--ease-out) both; } .pc-intro > * { grid-area: 1 / 1; } @keyframes pcIntro { from { opacity: 0; transform: scale(.84); filter: blur(9px); } to { opacity: 1; transform: none; filter: blur(0); } } /* F5 · volumetric top key-light on the shield (single, consistent light source) */ .pc-keylight { width: 124%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.22), rgba(255,255,255,0) 56%); mix-blend-mode: screen; opacity: .85; } /* F10 · live "screening" radar sweep around the core */ .pc-core::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 76%, rgba(70,230,255,0.55) 86%, transparent 96%); -webkit-mask: radial-gradient(circle, transparent 53%, #000 55%); mask: radial-gradient(circle, transparent 53%, #000 55%); opacity: .7; animation: pcScan 4.4s linear infinite; will-change: transform; } @keyframes pcScan { to { transform: rotate(360deg); } } /* F4 · breathing gradient headline — each word keeps its brand identity, then shimmers. The gradient/clip is @supports-guarded so unsupported engines keep the existing solid color (no ugly background box). */ .brand-trio .kw-blue { animation: wordIn .7s var(--ease-spring) .12s both, shimmerText 7s ease-in-out infinite; } .brand-trio .kw-cyan { animation: wordIn .7s var(--ease-spring) .22s both, shimmerText 7s ease-in-out .5s infinite; } .brand-trio .kw-violet { animation: wordIn .7s var(--ease-spring) .32s both, shimmerText 7s ease-in-out 1s infinite; } @keyframes wordIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .brand-trio .kw-blue, .brand-trio .kw-cyan, .brand-trio .kw-violet { background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .brand-trio .kw-blue { background-image: linear-gradient(96deg, #4f8ef7 0%, #a9c8ff 50%, #4f8ef7 100%); } .brand-trio .kw-cyan { background-image: linear-gradient(96deg, #14e0cb 0%, #8bf8e8 50%, #14e0cb 100%); } .brand-trio .kw-violet { background-image: linear-gradient(96deg, #b56cff 0%, #ddbcff 50%, #b56cff 100%); } [data-theme="light"] .brand-trio .kw-blue { background-image: linear-gradient(96deg, #1652F0 0%, #5a86ff 50%, #1652F0 100%); } [data-theme="light"] .brand-trio .kw-cyan { background-image: linear-gradient(96deg, #0fb6c6 0%, #25cfe0 50%, #0fb6c6 100%); } [data-theme="light"] .brand-trio .kw-violet { background-image: linear-gradient(96deg, #7C4DFF 0%, #a787ff 50%, #7C4DFF 100%); } } /* F2 · magnetic + idle light-sweep primary CTA. ID-specificity transforms read the JS-set --mag-x/--mag-y so hover/active states still compose. */ /* F2 · magnetic + idle light-sweep primary CTA. The JS lerp loop OWNS the translate, so transform is excluded from #start-btn's transition — the base .btn `transition: transform .22s var(--ease-spring)` (a spring that overshoots) restarting every frame was the "jumpy" feel. box-shadow/background still ease; the hover lift is folded into the eased --mag-y; :active press stays snappy. */ .btn-primary { --mag-x: 0px; --mag-y: 0px; } #start-btn { transform: translate(var(--mag-x), var(--mag-y)); transition: box-shadow .25s var(--ease-out), background .2s, opacity .2s; } #start-btn:active { transform: translate(var(--mag-x), var(--mag-y)) scale(.975); } .btn-primary::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,0.38) 50%, transparent 68%); background-size: 220% 100%; background-position: 180% 0; mix-blend-mode: screen; animation: ctaIdleSheen 4.6s var(--ease-out) infinite; } @keyframes ctaIdleSheen { 0% { background-position: 180% 0; } 55%, 100% { background-position: -90% 0; } } /* F7 · frosted-glass shield caption pill (progressive — falls back to soft bg) */ .pc-cap-label { -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } /* F8 · trust bar + F9 · authority mark */ .ls-trust { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 2px; } .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; } .trust-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--fill-1); color: var(--text-2); font-size: 12.5px; line-height: 1; white-space: nowrap; transition: border-color .2s, background .2s, transform .2s var(--ease-spring); } .trust-chip svg { width: 15px; height: 15px; color: var(--shield); } .trust-chip b { font-family: var(--font-display); font-weight: 600; color: var(--text); } .trust-chip:hover { transform: translateY(-2px); border-color: var(--border-hi); background: var(--fill-2); } .trust-auth { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); letter-spacing: .01em; } .trust-auth svg { width: 13px; height: 13px; color: var(--muted); } /* F11 · optical typography refinement */ .lead, .pc-cap-head, .brand-trio, .h2, .display, .q-headline { text-wrap: balance; } /* F13 · skip-to-content link + strong focus rings */ .skip-link { position: fixed; left: 14px; top: -64px; z-index: 200; padding: 11px 18px; border-radius: 12px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); background: var(--surface-hi); border: 1px solid var(--border-hi); box-shadow: var(--shadow-md); transition: top .2s var(--ease-out); } .skip-link:focus { top: 14px; } .btn:focus-visible, .acct-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } /* F12 · light-mode polish for the new layers */ [data-theme="light"] .particles .mote { background: radial-gradient(circle, rgba(22,82,240,0.5), rgba(22,82,240,0) 66%); } [data-theme="light"] .pc-keylight { opacity: .6; mix-blend-mode: normal; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.85), rgba(255,255,255,0) 58%); } [data-theme="light"] .pc-core::after { background: conic-gradient(from 0deg, transparent 0 76%, rgba(22,82,240,0.45) 86%, transparent 96%); } [data-theme="light"] .trust-auth, [data-theme="light"] .trust-auth svg { color: var(--muted); } /* Neutralize the NEW motion under reduced-motion (belt + suspenders) */ @media (prefers-reduced-motion: reduce) { .pc-stage { transform: none !important; } .pc-intro, .pc-core::after, .btn-primary::before, .app, .brand-trio .kw-blue, .brand-trio .kw-cyan, .brand-trio .kw-violet { animation: none !important; } .brand-trio .kw-blue, .brand-trio .kw-cyan, .brand-trio .kw-violet { opacity: 1; transform: none; } .particles { display: none; } } /* =========================================================================== LIGHT THEME — the $20B daylight pass. Porcelain canvas · pure-white floating cards · navy ink · blue-led accents. Token components adapt automatically; everything here re-tunes pieces that were designed for dark glass — neon glows become crisp shadows, gray washes become white cards, teal accents hand over to the saturated brand blue. =========================================================================== */ /* canvas: airy porcelain — a whisper of brand, zero pastel splotches */ [data-theme="light"] .bg { background: radial-gradient(120% 90% at 85% -15%, rgba(22,82,240,0.055), transparent 50%), radial-gradient(110% 90% at 8% 112%, rgba(27,197,212,0.065), transparent 52%), linear-gradient(180deg, #fbfdff 0%, #f4f8fe 55%, #eef4fc 100%); } [data-theme="light"] .bg::after { background: radial-gradient(40% 40% at 30% 25%, rgba(27,197,212,0.05), transparent 70%), radial-gradient(36% 36% at 72% 70%, rgba(22,82,240,0.045), transparent 70%); } [data-theme="light"] .grain { opacity: 0.018; mix-blend-mode: multiply; } [data-theme="light"] .dots { background-image: radial-gradient(var(--dot-color) 1px, transparent 1px); opacity: 0.55; } [data-theme="light"] .orb { opacity: 0.15; filter: blur(130px); } [data-theme="light"] .orb.o1 { background: rgba(27,197,212,0.55); } [data-theme="light"] .orb.o2 { background: rgba(22,82,240,0.45); } [data-theme="light"] .orb.o3 { background: rgba(124,77,255,0.35); } /* chrome: opaque topbar (no scroll-through) + jewel-box toggle + blue progress */ [data-theme="light"] .flow-topbar { background: var(--bg); } [data-theme="light"] .results-chrome { background: var(--topbar-bg); } [data-theme="light"] .acct-btn { background: #ffffff; border-color: rgba(16,42,98,0.10); box-shadow: 0 1px 2px rgba(16,42,98,0.05), 0 8px 22px -8px rgba(20,50,120,0.20); } [data-theme="light"] .progress-track { background: var(--track); } [data-theme="light"] .progress-fill { box-shadow: 0 0 12px rgba(22,82,240,0.35); } /* buttons: white ink on the blue-led gradient + deep blue float shadow */ [data-theme="light"] .btn-primary { box-shadow: 0 14px 34px -10px rgba(22,82,240,0.42), inset 0 1px 0 rgba(255,255,255,0.35); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 22px 52px -12px rgba(22,82,240,0.50), inset 0 1px 0 rgba(255,255,255,0.45); } [data-theme="light"] .btn-ghost { background: #ffffff; border-color: rgba(16,42,98,0.12); box-shadow: 0 4px 14px -8px rgba(20,50,120,0.14); } [data-theme="light"] .btn-ghost:hover { background: #f6f9ff; } /* answer cards: pure white, floating, crisp — the heart of the flow */ [data-theme="light"] .option { background: #ffffff; border-color: rgba(16,42,98,0.085); box-shadow: 0 1px 2px rgba(16,42,98,0.04), 0 12px 28px -16px rgba(20,50,120,0.16); } [data-theme="light"] .option::before { background: var(--blue-soft); } [data-theme="light"] .option:hover { border-color: rgba(22,82,240,0.40); box-shadow: 0 2px 4px rgba(16,42,98,0.05), 0 18px 40px -16px rgba(22,82,240,0.24); } [data-theme="light"] .option:hover::before { opacity: .35; } [data-theme="light"] .option.selected { border-color: rgba(22,82,240,0.55); background: linear-gradient(180deg, #ffffff, #f5f9ff); box-shadow: 0 2px 4px rgba(16,42,98,0.04), 0 20px 46px -18px rgba(22,82,240,0.32), inset 0 0 0 1px rgba(22,82,240,0.16); } [data-theme="light"] .option.selected::before { opacity: 0; } [data-theme="light"] .option .opt-ico { background: linear-gradient(135deg, rgba(27,197,212,0.16), rgba(22,82,240,0.12)); color: var(--blue); } [data-theme="light"] .option.selected .opt-ico { background: var(--grad-brand); color: var(--ink-on-brand); box-shadow: 0 8px 20px -8px rgba(22,82,240,0.55); } [data-theme="light"] .option .opt-check { border-width: 1.5px; border-color: rgba(16,42,98,0.16); background: #ffffff; } [data-theme="light"] .option.selected .opt-check { background: var(--grad-brand); border-color: transparent; box-shadow: 0 5px 14px -4px rgba(22,82,240,0.45); } /* shield pills: white jewel pills with a soft mint float (no neon haze) */ [data-theme="light"] .q-shield-note { background: #ffffff; border-color: rgba(11,179,154,0.30); box-shadow: 0 1px 2px rgba(16,42,98,0.04), 0 12px 28px -14px rgba(11,179,154,0.45); } /* F373 · processing engine reads clean on daylight — soften the aura so the glass halo + gradient shield pop against the white canvas (dark untouched). */ [data-theme="light"] .proc-aura { filter: blur(30px); opacity: .55; } [data-theme="light"] .proc-grid { opacity: .38; } [data-theme="light"] .proc-halo { background: #ffffff; border-color: rgba(16,42,98,0.10); box-shadow: 0 18px 44px -20px rgba(20,50,120,0.28), inset 0 1px 0 rgba(255,255,255,0.9); } [data-theme="light"] .shield-badge { background: #ffffff; border-color: color-mix(in srgb, var(--blue) 66%, transparent); box-shadow: 0 1px 2px rgba(16,42,98,0.04), 0 12px 28px -14px rgba(11,179,154,0.40); /* T2.7 · shield text was sub-AA on white — deepen toward ink for ≥4.5:1 while the live dot + halo keep the full-strength mint identity */ color: color-mix(in srgb, var(--shield) 55%, var(--text)); } /* F170 · light-theme not-yet-active override (higher specificity than the base light .shield-badge above so the red identity wins in light mode). */ [data-theme="light"] .shield-badge.not-active { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 48%, transparent); color: color-mix(in srgb, var(--danger) 72%, var(--text)); box-shadow: 0 1px 2px rgba(16,42,98,0.04), 0 12px 28px -14px color-mix(in srgb, var(--danger) 45%, transparent); } /* intensity-ramp scale cards: white base + hue tint (not neon-on-transparent) */ [data-theme="light"] .options.scale .option.selected { background: color-mix(in srgb, var(--ramp) 7%, #ffffff); border-color: color-mix(in srgb, var(--ramp) 60%, transparent); box-shadow: 0 2px 4px rgba(16,42,98,0.04), 0 18px 40px -16px color-mix(in srgb, var(--ramp) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ramp) 22%, transparent); } [data-theme="light"] .options.scale .option.selected .opt-bar.lit { box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--ramp) 55%, transparent); } @media (max-width: 640px), (hover: none) { .option:not(.selected):hover { border-color: var(--border); box-shadow: none; } .option:not(.selected):hover::before { opacity: 0; } .options.scale .option:not(.selected):hover { border-color: var(--border); box-shadow: none; } .options.scale .option:not(.selected):hover .opt-bar.lit { background: color-mix(in srgb, var(--ramp) 68%, transparent); box-shadow: none; transform: none; } .options.scale .option:not(.selected):hover .opt-label { color: var(--text-2); } .sp-quick-pill:not(.added):hover, .sp-quick-pill:not(.added):focus { transform: none; border-color: var(--border); background: var(--surface); box-shadow: none; } [data-theme="light"] .option:not(.selected):hover { border-color: rgba(16,42,98,0.085); background: #ffffff; box-shadow: 0 1px 2px rgba(16,42,98,0.04), 0 12px 28px -16px rgba(20,50,120,0.16); } [data-theme="light"] .option:not(.selected):hover::before { opacity: 0; } [data-theme="light"] .sp-quick-pill:not(.added):hover, [data-theme="light"] .sp-quick-pill:not(.added):focus { border-color: rgba(16,42,98,0.085); background: #ffffff; box-shadow: none; } } /* eyebrows read blue on porcelain — teal sits too faint on white */ [data-theme="light"] .eyebrow { color: var(--blue-2); } /* processing / reveal accents re-tuned for daylight */ [data-theme="light"] .reveal-bloom { background: radial-gradient(circle, rgba(22,82,240,0.09), transparent 62%); } [data-theme="light"] .conf-pill { background: #ffffff; box-shadow: 0 6px 16px -8px rgba(20,50,120,0.16); } /* white chips & shells (were dark-glass fills) */ [data-theme="light"] .pill, [data-theme="light"] .attr, [data-theme="light"] .score-chip, [data-theme="light"] .hero-opp, [data-theme="light"] .learned-item, [data-theme="light"] .proof-chip { background: #ffffff; border-color: rgba(16,42,98,0.10); box-shadow: 0 4px 16px -10px rgba(20,50,120,0.14); } /* header status chips share the signature 2px blue outline (matches nav pill + Ask-MyAI) */ [data-theme="light"] .score-chip { border-color: color-mix(in srgb, var(--blue) 66%, transparent); } [data-theme="light"] .learned-item:hover, [data-theme="light"] .proof-chip:hover { background: #f6f9ff; } [data-theme="light"] .meter { background: var(--track); } [data-theme="light"] .ring-bg { stroke: var(--track); } [data-theme="light"] .sys-row { background: #fff; border-color: rgba(16,42,98,0.10); box-shadow: 0 1px 2px rgba(16,42,98,0.04), 0 8px 20px -14px rgba(20,50,120,0.16); } [data-theme="light"] .sys-row:hover { border-color: rgba(22,82,240,0.30); } [data-theme="light"] .sys-bar { background: rgba(16,42,98,0.08); } [data-theme="light"] .sys-range { background: rgba(16,42,98,0.07); } [data-theme="light"] .sys-prev { background: rgba(16,42,98,0.45); box-shadow: none; } [data-theme="light"] .sys-move { border-color: rgba(22,82,240,0.18); } [data-theme="light"] .sys-sort { background: #fff; border-color: rgba(16,42,98,0.12); } /* light mode — the domains title + its sort buttons read pure black */ [data-theme="light"] .systems-board > .block-title { color: #000; } [data-theme="light"] .systems-board > .block-title > svg { color: #000; } [data-theme="light"] .ss-btn { color: #000; } [data-theme="light"] .ss-btn:hover { color: #000; } [data-theme="light"] .sysm-bar { background: rgba(16,42,98,0.10); } [data-theme="light"] .tiers-band { background: var(--tiers-band-bg); } [data-theme="light"] .tier.recommended { background: var(--tier-rec-bg); } [data-theme="light"] .btn-back:hover { background: var(--fill-1); } [data-theme="light"] .card { border-color: rgba(16,42,98,0.07); } /* The card's top highlight sits ABOVE the content, so a heavy white wash here greys out the card's own title row. Keep it as a whisper. */ [data-theme="light"] .card::before { background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 34%); } [data-theme="light"] .pc-core { background: radial-gradient(circle at 50% 34%, #ffffff, #e9f1fc); box-shadow: 0 0 50px -10px var(--teal-glow), inset 0 0 28px rgba(15,182,198,.16), 0 16px 40px rgba(20,50,120,.12); } /* daylight hero stage: calm halo, defined rings, blue-lit nodes (no washout) */ [data-theme="light"] .pc-halo { opacity: .38; } [data-theme="light"] .pc-ring-1 { border-color: color-mix(in srgb, var(--teal) 55%, transparent); box-shadow: inset 0 0 40px rgba(27,197,212,.14), 0 0 50px -18px rgba(27,197,212,.35); } [data-theme="light"] .pc-ring-2 { border-color: color-mix(in srgb, var(--blue) 50%, transparent); } [data-theme="light"] .pc-ring-3 { border-color: color-mix(in srgb, var(--violet) 42%, transparent); } [data-theme="light"] .pc-node::after { background: var(--blue); box-shadow: 0 0 0 2px rgba(22,82,240,.10), 0 0 8px rgba(22,82,240,.35); } [data-theme="light"] .pc-core .pc-id-shield { filter: drop-shadow(0 14px 26px rgba(22,82,240,.30)) drop-shadow(0 0 14px rgba(27,197,212,.22)); } /* =========================================================================== RESPONSIVE — landing brand system =========================================================================== */ @media (max-width: 1024px) { .protect-core { width: clamp(260px, 52vw, 380px); } } @media (max-width: 640px) { .proof-chip { padding: 9px 13px; font-size: 12.5px; } .protect-core { width: clamp(240px, 74vw, 320px); } #screen-landing .ls-art > .pc-caption { display: none; } #screen-landing .pc-caption-mobile { display: flex; } /* CTA sits directly under the art, above the proof strip (natural DOM order) */ #screen-landing .hero-actions { order: 0; } #screen-landing .pc-caption-mobile { order: 5; } .acct-btn:hover { transform: none; } } /* =========================================================================== LANDING — cinematic split hero that fits ONE desktop viewport (no scroll). Simplified copy on the LEFT; the Protection Core absolutely centered on the RIGHT (so the short copy stack never stretches / goes gappy). Mobile/tablet stack naturally: the art sits between the lead and the CTA. =========================================================================== */ @media (min-width: 1025px) { #screen-landing.screen--flow { position: relative; padding-top: clamp(14px, 2.4vh, 32px); padding-bottom: clamp(14px, 2.4vh, 32px); } /* The copy is a real LEFT column: pinned to the left (align-self) with a small left margin, constrained to a column width, text centered INSIDE it. No right gutter — the shield is absolutely positioned on the far right, so the empty middle becomes the "lots of spacing" between the column and the animation. */ .landing-hero { align-self: flex-start; align-items: center; text-align: center; flex: 1 1 auto; min-height: 0; justify-content: center; gap: clamp(14px, 2vh, 24px); width: 100%; max-width: clamp(440px, 36vw, 580px); margin-inline: 0; margin-left: clamp(28px, 4vw, 80px); padding-right: 0; } .landing-hero > *:not(.ls-art) { width: 100%; } .landing-hero .ls-brand { justify-content: center; } /* Center the art on the FULL-HEIGHT screen (#screen-landing is position:relative and fills 100dvh). top/bottom + flex — NOT translateY, which the .stagger entrance (ends on transform:none, fill forwards) would cancel, dropping the shield low. Anchoring to the screen (not the hero) makes centering immune to how the copy column sizes. */ /* Shield right inset is intentionally LARGER than the copy column's left margin (supersedes F014's edge symmetry): both columns are edge-pinned, so the empty middle grew too wide and threw the shield to the far right. Bumping `right` pulls the shield toward center and shrinks the inter-column gap. MUST be the `right` property (not transform) — .ls-art carries .stagger (fill-forwards transform) which would reset any transform after the entrance. */ .ls-art { position: absolute; right: clamp(48px, 16vw, 260px); top: 0; bottom: 0; margin: 0; width: clamp(320px, 30vw, 440px); display: flex; flex-direction: column; align-items: center; justify-content: center; } /* The hero must NOT establish a containing block here, or it captures the absolutely-positioned .ls-art and drags the shield into the narrow left column (overlap). screenIn animates transform with fill:both, which fills a transform forever → containing block. Swap the hero's entrance to an opacity-only keyframe (children keep their transform stagger) so .ls-art anchors to #screen-landing and sits on the far RIGHT. */ #screen-landing .landing-hero.anim-in { animation-name: fadeInOnly; } .landing-hero .hero-actions { justify-content: center; } .brand-trio span { display: block; } /* stack the three words for impact */ #screen-landing .brand-trio { font-size: clamp(40px, 5vw, 60px); } #screen-landing .lead { font-size: clamp(15px, 2.1vh, 19px); max-width: 40ch; margin-inline: auto; } #screen-landing .protect-core { width: 100%; } #screen-landing .btn-lg { min-height: clamp(50px, 6vh, 60px); } #screen-landing .landing-foot { font-size: clamp(11.5px, 1.4vh, 12.5px); } } /* ══ F391i · desktop-only: scale BOTH columns up, pill stays put ────────── The pill must not change size, so nothing here touches .pc-core / .cap-voxels (both sized off `14.5vw`, independent of their parents) or .pc-capsule. Widening .ls-art only grows the halo/rings/orbit AROUND the pill. Selectors carry an extra class/#id so they out-specify the base rules that appear LATER in this file. */ @media (min-width: 1025px) { /* left column — wider, with bigger brand, headline, CTA and trust stats */ #screen-landing .landing-hero { max-width: clamp(500px, 41vw, 660px); } #screen-landing .landing-hero .ls-outcome { font-size: clamp(30px, 3.9vw, 46px); } #screen-landing .ls-brand-idn .id-logo { width: 40px; height: 40px; } #screen-landing .ls-brand-idn .ls-brand-word { font-size: 25px; } #screen-landing .btn-lg { min-height: clamp(56px, 6.6vh, 66px); font-size: 18.5px; padding: 20px 50px; } #screen-landing .ls-proof { gap: 11px 20px; } #screen-landing .ls-proof .lp { font-size: 15.5px; } #screen-landing .ls-proof .lp .lp-num { font-size: 20px; } #screen-landing .ls-proof .lp-lock svg { width: 17px; height: 17px; } #screen-landing .ls-proof .lp-sep { height: 16px; } /* right column — the orbit field grows, the pill inside it does not */ #screen-landing .ls-art { width: clamp(360px, 34vw, 500px); /* the inset IS the right gutter — ~95px at 1429w, which also lands the copy-column-to-art gap at ~160px */ right: clamp(40px, 6.7vw, 120px); } } /* =========================================================================== $20B ELEVATION LAYER — processing · reveal · results trust system Every color is a token (or color-mix of a token) → both themes adapt clean. =========================================================================== */ /* ── REVEAL — bloom · ring ticks · confidence ─────────────────────────────*/ .reveal-bloom { position: absolute; inset: -18%; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--teal) 16%, transparent), transparent 62%); filter: blur(26px); animation: bloomPulse 5.5s var(--ease-out) infinite; } @keyframes bloomPulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } } body.on-results .reveal-bloom { animation: none; } /* scroll-perf freeze (F024 law) */ .ring-ticks { fill: none; stroke: var(--track); stroke-width: 3; stroke-dasharray: 1.5 7.86; opacity: .8; } .reveal-meta { display: flex; flex-direction: column; align-items: center; gap: 10px; } .reveal-meta .ring-label { margin-top: 0; } .conf-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px; background: var(--fill-1); } .conf-pill svg { width: 13px; height: 13px; color: var(--blue); flex: none; } /* ── RESULTS — engine trust stats (REAL deterministic-engine counts) ──────*/ .stat-strip { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-top: 22px; } .stat { display: flex; flex-direction: column; gap: 3px; padding-right: clamp(16px, 2vw, 34px); } .stat + .stat { border-left: 1px solid var(--border-soft); padding-left: clamp(16px, 2vw, 34px); } .stat .sv { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; font-variant-numeric: tabular-nums; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat .sk { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* tier name row + product count + dosing chips */ .tier .tname-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tier .tcount { flex: none; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 5px 11px; background: var(--fill-1); white-space: nowrap; } .dose-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); vertical-align: 2px; background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); border-radius: var(--r-pill); padding: 2.5px 8px; white-space: nowrap; } .dose-chip svg { width: 11px; height: 11px; } /* blocked-product cards: clearer severity accent */ .blocked-card { border-left: 3px solid color-mix(in srgb, var(--danger) 60%, transparent); } /* footer CTA: subtle brand wash so the close feels designed, not flat */ .cta-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 55%); } /* ── Responsive parity for the new layer ──────────────────────────────────*/ @media (max-width: 1024px) { .stat-strip { justify-content: center; } .stat:first-child { padding-left: clamp(16px, 2vw, 34px); } } @media (max-width: 640px) { /* Continue becomes a full-width thumb target; Back stays compact */ .q-foot { flex-wrap: nowrap; } .q-foot .btn-primary { flex: 1 1 auto; min-height: 54px; } .conf-pill { font-size: 11px; text-align: center; } .stat { padding-right: 14px; } .stat + .stat { padding-left: 14px; } .stat .sv { font-size: 19px; } .options.scale .option { min-height: 84px; padding: 14px 4px 12px; } .options.scale .opt-meter { height: 24px; gap: 4px; } .options.scale .opt-bar { width: 5px; } } /* ── LANDING STORY — the shield's ROTATING DNA emblem · proof bar · CTA beacon ── (assessment science) Twin sine strands + base-pair rungs + depth-lit beads, spun by mountHelix() via per-frame attribute writes (no innerHTML, no layout). CSS only assembles the group in once + tints — the 3-D motion lives in JS so it can self-park off-screen. Bead size/opacity/position are JS-owned. */ .pc-id-shield .dna-helix { transform-box: fill-box; transform-origin: center; animation: dnaAssemble 1.05s var(--ease-out) .85s backwards; } @keyframes dnaAssemble { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } } .pc-id-shield .hx-strand { fill: none; stroke: url(#idnRim); stroke-width: 2.6; stroke-linecap: round; opacity: .52; } .pc-id-shield .hx-rung { stroke: url(#idnRim); stroke-width: 2.7; stroke-linecap: round; opacity: .84; } .pc-id-shield .hx-bead { pointer-events: none; } /* cx/cy/r/opacity set per-frame in JS; fill = url(#idnAtom) */ /* proof bar — factual numbers in brand gradient; centered like the rest of the column */ .ls-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; } .lp { display: inline-flex; align-items: baseline; gap: 7px; font-size: 14px; color: var(--muted); white-space: nowrap; } .lp .lp-num { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; background: var(--grad-brand-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-variant-numeric: tabular-nums; } .lp-lock { align-items: center; } .lp-lock svg { width: 15px; height: 15px; color: var(--shield); flex: none; } .lp-sep { width: 1px; height: 14px; background: var(--border); flex: none; } /* CTA beacon — a slow breathing brand halo behind "Begin my assessment". Lives on a pseudo so it NEVER fights the button's own hover shadow/transform. */ #screen-landing .hero-actions { position: relative; } #screen-landing .hero-actions::before { content: ''; position: absolute; inset: -16px -28px; z-index: -1; border-radius: 999px; pointer-events: none; filter: blur(18px); background: radial-gradient(50% 72% at 50% 50%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 72%); animation: ctaBeacon 4.2s var(--ease-out) infinite; } @keyframes ctaBeacon { 0%, 100% { opacity: .5; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.05); } } [data-theme="light"] #screen-landing .hero-actions::before { background: radial-gradient(50% 72% at 50% 50%, rgba(22,82,240,.18), transparent 72%); } @media (max-width: 380px) { .options.scale .opt-label { font-size: 10.5px; } .ls-proof { gap: 8px 12px; } .lp { font-size: 12.5px; } .lp .lp-num { font-size: 15.5px; } } /* =========================================================================== $50B RESULTS LAYER — why-modals · daylight results polish =========================================================================== */ /* WHY MODAL — one glass dialog for "Why this for me" (brand) and "Why we set this aside" (danger). Desktop: centered card. Phone: bottom sheet. */ body.modal-open { overflow-y: hidden !important; } .idn-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--bg) 58%, transparent); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); opacity: 0; transition: opacity .25s var(--ease-out); } /* CRITICAL: `display:flex` above overrides the UA `[hidden]{display:none}`, so without this the closed backdrop stays in the layout (opacity 0) and eats every click on the page beneath it — making only the FIRST popup work. The compound [hidden] selector (0,2,0) outranks the .class rule (0,1,0). */ .idn-modal-backdrop[hidden] { display: none; } .idn-modal-backdrop.show { opacity: 1; } /* light mode — grey the page up a little so the popup pops (dark mode untouched) */ [data-theme="light"] .idn-modal-backdrop { background: color-mix(in srgb, #0c1426 24%, transparent); } .idn-modal { position: relative; width: min(560px, 100%); max-height: min(78dvh, 660px); display: flex; flex-direction: column; background: var(--grad-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-float); overflow: hidden; transform: translateY(16px) scale(.965); opacity: 0; transition: transform .32s var(--ease-out), opacity .25s var(--ease-out); } .idn-modal-backdrop.show .idn-modal { transform: none; opacity: 1; } .idn-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand-3); opacity: .9; } .idn-modal.tone-danger::before { background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 45%, var(--violet))); } .idn-modal-grab { display: none; } .idn-modal-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; z-index: 2; display: grid; place-items: center; border: 1px solid var(--border); background: var(--fill-1); color: var(--muted); cursor: pointer; transition: color .18s, border-color .18s, background .18s, transform .18s var(--ease-spring); } .idn-modal-x:hover { color: var(--text); border-color: var(--border-hi); background: var(--fill-2); transform: rotate(90deg); } .idn-modal-x:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .idn-modal-x svg { width: 15px; height: 15px; } .idn-modal-head { display: flex; gap: 14px; align-items: center; padding: 24px 60px 16px 24px; } .idn-modal-ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--shield-soft); color: var(--shield); border: 1px solid color-mix(in srgb, var(--shield) 30%, transparent); box-shadow: 0 8px 22px -10px var(--shield-glow); } .idn-modal.tone-danger .idn-modal-ico { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--danger) 45%, transparent); } .idn-modal-ico svg { width: 22px; height: 22px; } .idn-modal-tag { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; } .idn-modal.tone-danger .idn-modal-tag { color: var(--danger); } .idn-modal-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.6vw, 22px); line-height: 1.15; } .idn-modal-body { padding: 4px 24px 10px; overflow-y: auto; overscroll-behavior: contain; } .idn-modal-body .why-level { font-size: 13.5px; color: var(--text-2); line-height: 1.55; padding: 13px 16px; border-radius: var(--r-sm); background: var(--fill-1); border: 1px solid var(--border-soft); margin-bottom: 10px; } .idn-modal-body .why-level b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--teal); margin-bottom: 4px; } .idn-modal.tone-danger .idn-modal-body .why-level b { color: var(--danger); } .idn-modal-body .why-cite { font-size: 11px; color: var(--muted-2); font-style: italic; padding: 2px 2px 6px; } .idn-modal-body .why-reason-t { font-size: 13px; } .idn-modal-body .why-reason-cite { font-size: 11px; } .idn-modal-foot { display: flex; justify-content: flex-end; padding: 12px 24px 22px; } .idn-modal-foot .btn { min-height: 44px; padding: 10px 24px; font-size: 14px; } /* ── Product hero — official IDLife imagery as a premium modal header ────── Wide pill-page banners (files.idlife.com) cropped center; a themed gradient + capsule glyph stands in when a product has no image or the asset fails. */ .idn-modal-hero { position: relative; margin: 0; width: 100%; height: 152px; flex: none; overflow: hidden; background: var(--grad-brand-3); border-bottom: 1px solid var(--border-soft); } .idn-modal-hero[hidden] { display: none; } .idn-modal-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .idn-modal-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--bg) 30%, transparent)); } .idn-modal-hero.no-img { height: 100px; background: var(--grad-brand); display: grid; place-items: center; } .idn-modal-hero.no-img .idn-modal-hero-img { display: none; } .idn-modal-hero.no-img::after { display: none; } .idn-modal-hero-fb { display: none; color: #fff; opacity: .92; } .idn-modal-hero.no-img .idn-modal-hero-fb { display: grid; place-items: center; } .idn-modal-hero-fb svg { width: 34px; height: 34px; } .idn-modal.has-hero .idn-modal-head { padding-top: 18px; } /* The X sits ON the colored hero → give it a high-contrast glass disc (dark scrim + white glyph + white hairline) so it stays visible over ANY product photo or the brand-gradient fallback, in BOTH light and dark themes. */ .idn-modal.has-hero .idn-modal-x { color: #fff; border-color: rgba(255,255,255,.62); background: rgba(11,18,32,.48); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 4px 16px -2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.10); } .idn-modal.has-hero .idn-modal-x:hover { color: #fff; border-color: #fff; background: rgba(11,18,32,.68); transform: rotate(90deg); } .idn-modal.has-hero .idn-modal-x:focus-visible { outline-color: #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0,0,0,.4), 0 4px 16px -2px rgba(0,0,0,.5); } .idn-modal.has-hero .idn-modal-grab { background: rgba(255,255,255,.72); } /* ── Ingredient / function support — IDLife-style benefit list ─────────── */ .idn-modal-body .why-ing { padding: 13px 16px 14px; border-radius: var(--r-sm); background: var(--fill-1); border: 1px solid var(--border-soft); margin-bottom: 10px; } .idn-modal-body .why-ing-h { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--teal); margin-bottom: 9px; } .idn-modal.tone-danger .idn-modal-body .why-ing-h { color: var(--danger); } .why-ing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .why-ing-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-2); } .why-ing-dot { flex: none; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); } .why-ing-n { font-weight: 650; color: var(--text); } [data-theme="light"] .idn-modal-body .why-ing { background: #f6f9ff; } @media (max-width: 640px) { .idn-modal-hero { height: 126px; } .idn-modal-hero.no-img { height: 86px; } } /* F238 · TABLET + PHONE (≤1024px) — every popup fills the full available height as a bottom sheet (grab handle, rounded top, flush bottom). The body scrolls internally so tall category popups (F226) never feel cramped. Computer (≥1025px) keeps its centered, content-sized card — untouched. */ @media (max-width: 1024px) { .idn-modal-backdrop { padding: 0; align-items: flex-end; } .idn-modal { width: 100%; height: 96dvh; max-height: 96dvh; border-radius: 22px 22px 0 0; border-bottom: none; transform: translateY(100%); } .idn-modal-backdrop.show .idn-modal { transform: none; } .idn-modal-grab { display: block; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 99px; background: var(--border); z-index: 2; } .idn-modal-head { padding-top: 28px; } /* the scrolling body grows to consume all the freed height */ .idn-modal-body { flex: 1 1 auto; } .idn-modal-foot .btn { width: 100%; } .tier .tv span { font-size: 9px; } } /* daylight results polish — white floating cards, crisp blue shadows */ [data-theme="light"] .idn-modal { background: linear-gradient(180deg, #ffffff, #f8fbff); border-color: rgba(16,42,98,0.12); } [data-theme="light"] .idn-modal-x { background: #fff; } [data-theme="light"] .blocked-card { background: #fff; border-color: color-mix(in srgb, var(--danger) 20%, transparent); box-shadow: 0 4px 16px -10px rgba(20,50,120,0.14); } [data-theme="light"] .why-pill { background: #fff; box-shadow: 0 3px 10px -6px rgba(20,50,120,0.20); } [data-theme="light"] .why-pill.danger { background: #fff; } [data-theme="light"] .tier { box-shadow: 0 2px 4px rgba(16,42,98,0.03), 0 18px 44px -20px rgba(20,50,120,0.18); } [data-theme="light"] .tier.recommended { box-shadow: 0 2px 4px rgba(16,42,98,0.04), 0 26px 60px -22px rgba(22,82,240,0.30); } [data-theme="light"] .idn-modal-body .why-level { background: #f6f9ff; } /* =========================================================================== F077 · HOME DECK DETAIL SHEETS — billion-dollar personalized popups. Reuses the .idn-modal shell (dual-theme glass · mobile bottom-sheet · a11y) with extra tones, a flexible action footer, and a small data-viz vocabulary (score ring · confidence range · milestone ladder · stepped guidance). ========================================================================== */ /* extra tones (the why-modal only uses brand/danger → these never touch it) */ .idn-modal.tone-teal::before { background: linear-gradient(90deg, var(--teal), color-mix(in srgb, var(--teal) 45%, var(--blue))); } .idn-modal.tone-blue::before { background: linear-gradient(90deg, var(--blue), var(--violet)); } .idn-modal.tone-violet::before { background: linear-gradient(90deg, var(--violet), var(--blue)); } .idn-modal.tone-amber::before { background: linear-gradient(90deg, var(--warning), color-mix(in srgb, var(--warning) 45%, var(--danger))); } .idn-modal.tone-teal .idn-modal-ico { background: var(--teal-soft); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 30%, transparent); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--teal) 50%, transparent); } .idn-modal.tone-blue .idn-modal-ico { background: var(--blue-soft); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 30%, transparent); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--blue) 50%, transparent); } .idn-modal.tone-violet .idn-modal-ico { background: var(--violet-soft); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 30%, transparent); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--violet) 50%, transparent); } .idn-modal.tone-amber .idn-modal-ico { background: rgba(255,181,71,.16); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 32%, transparent); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--warning) 55%, transparent); } .idn-modal.tone-blue .idn-modal-tag { color: var(--blue); } .idn-modal.tone-violet .idn-modal-tag { color: var(--violet); } .idn-modal.tone-amber .idn-modal-tag { color: var(--warning); } /* F081 · firmer, thicker, greener frame on the detail / product popups */ .idn-modal.ds-modal { border: 2px solid color-mix(in srgb, var(--shield) 58%, transparent); box-shadow: var(--shadow-float), 0 0 0 1px color-mix(in srgb, var(--shield) 14%, transparent); } /* F355 · OPAQUE product/detail sheet — --grad-card is translucent (.55–.78 alpha in dark mode), so over the blurred backdrop the sheet looked see-through. Layer a SOLID surface UNDER the gradient so content is never visible behind it, in either theme (light was already near-opaque, so this is a no-op there). */ .idn-modal.ds-modal { background: var(--surface); background-image: var(--grad-card); } /* action footer — primary sits to the right on desktop / on top on mobile */ .idn-modal-foot.ds-foot { gap: 10px; flex-wrap: wrap; flex-direction: row-reverse; justify-content: flex-start; } .ds-act { display: inline-flex; align-items: center; gap: 8px; } .ds-act svg { width: 17px; height: 17px; flex: none; } /* stat hero band (score ring + read) */ .ds-hero { display: flex; align-items: center; gap: 16px; padding: 16px; margin: 6px 0 4px; border-radius: var(--r-md); border: 1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 8%, var(--surface)), var(--surface)); } .ds-hero.tone-blue { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, var(--surface)), var(--surface)); } .ds-hero.tone-violet { background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 9%, var(--surface)), var(--surface)); } .ds-hero.tone-amber { background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 12%, var(--surface)), var(--surface)); } .ds-hero-meta { min-width: 0; } .ds-hero-meta p { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin: 7px 0 0; } .ds-hero-meta p b { color: var(--text); font-weight: 700; } .ds-band { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--fill-2); color: var(--text-2); } .ds-band.b-strong { background: var(--teal-soft); color: var(--teal); } .ds-band.b-building { background: var(--blue-soft); color: var(--blue); } .ds-band.b-focus { background: rgba(255,181,71,.16); color: var(--warning); } /* score ring */ .ds-ring-wrap { position: relative; flex: none; width: 84px; height: 84px; display: grid; place-items: center; } .ds-ring { width: 84px; height: 84px; display: block; } .ds-ring-tk { fill: none; stroke: var(--track); stroke-width: 7; } .ds-ring-fg { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out); } .ds-ring-num { position: absolute; font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--text); } /* sections + prose */ .ds-sec { margin-top: 16px; } .ds-sec-h { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 9px; } .ds-p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0; } .ds-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ds-reason { padding-left: 12px; border-left: 2px solid var(--border-soft); } .ds-via { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px; color: var(--teal); font-size: 11px; font-weight: 700; line-height: 1.35; } .ds-via svg { width: 12px; height: 12px; flex: none; } .ds-cite { font-size: 11px; color: var(--muted-2); font-style: italic; line-height: 1.45; margin: 5px 0 0; } .ds-lede { font-size: 15px; color: var(--text); line-height: 1.5; font-weight: 600; margin: 6px 0 2px; } .ds-note { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; } .ds-influence { margin: 16px 0 4px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.5; color: var(--text-2); background: var(--fill-1); border: 1px solid var(--border-soft); border-left: 3px solid var(--teal); } .ds-influence svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; color: var(--teal); } .ds-influence.tone-amber { border-left-color: var(--warning); } .ds-influence.tone-blue { border-left-color: var(--blue); } /* ── F413 · "WHY THIS WAS BLOCKED" science sheet ─────────────────────────── */ .ds-modal.tone-danger .ds-bullet-ic { color: var(--danger); } .ds-blk-hero { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 4px; border-radius: var(--r-md); background: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--danger) 12%, transparent), transparent 58%), var(--fill-1); border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent); } .ds-blk-emb { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--danger) 65%, transparent); } .ds-blk-emb svg { width: 26px; height: 26px; } .ds-blk-meta { min-width: 0; display: flex; flex-direction: column; gap: 7px; } .ds-blk-meta > b { font-family: var(--font-display); font-size: clamp(16px, 2.2vw, 19px); letter-spacing: -.01em; color: var(--text); line-height: 1.2; } .ds-blk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ds-blk-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; color: var(--text-2); background: var(--fill-2); border: 1px solid var(--border-soft); white-space: nowrap; } .ds-blk-chip svg { width: 11px; height: 11px; } .ds-blk-chip.is-block { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 32%, transparent); } .ds-blk-trigs { display: flex; flex-wrap: wrap; gap: 7px; } .ds-blk-trig { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; color: var(--text); background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); } .ds-blk-trig svg { width: 12px; height: 12px; flex: none; color: var(--warning); } [data-theme="light"] .ds-blk-hero { background: #fff5f6; border-color: rgba(214, 60, 80, .3); } [data-theme="light"] .ds-blk-chip { background: #f2f6fd; border-color: rgba(16, 42, 98, .16); } /* The blocked sheet is dense clinical copy — grey is too faint to read here. */ .ds-modal.tone-danger .ds-p, .ds-modal.tone-danger .ds-cite, .ds-modal.tone-danger .ds-note, .ds-modal.tone-danger .ds-sec-h, .ds-modal.tone-danger .ds-influence, .ds-modal.tone-danger .ds-bullet-t, .ds-modal.tone-danger .ds-blk-chip { color: var(--text); } [data-theme="light"] .ds-modal.tone-danger .ds-p, [data-theme="light"] .ds-modal.tone-danger .ds-cite, [data-theme="light"] .ds-modal.tone-danger .ds-note, [data-theme="light"] .ds-modal.tone-danger .ds-sec-h, [data-theme="light"] .ds-modal.tone-danger .ds-influence, [data-theme="light"] .ds-modal.tone-danger .ds-bullet-t, [data-theme="light"] .ds-modal.tone-danger .ds-blk-chip { color: #000; } .ds-blk-chip.is-when { color: var(--teal); background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 34%, transparent); } [data-theme="light"] .ds-modal.tone-danger .ds-blk-chip.is-block { color: var(--danger); } [data-theme="light"] .ds-modal.tone-danger .ds-blk-chip.is-when { color: #0b6d66; } @media (max-width: 640px) { .ds-blk-hero { gap: 11px; padding: 12px; } .ds-blk-emb { width: 44px; height: 44px; border-radius: 14px; } .ds-blk-emb svg { width: 22px; height: 22px; } } /* lever / tip bullets */ .ds-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .ds-bullets li { display: flex; gap: 11px; align-items: flex-start; } .ds-bullet-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--fill-2); color: var(--teal); } .ds-bullet-ic svg { width: 16px; height: 16px; } .idn-modal.tone-amber .ds-bullet-ic { color: var(--warning); } .idn-modal.tone-blue .ds-bullet-ic { color: var(--blue); } .idn-modal.tone-violet .ds-bullet-ic { color: var(--violet); } .ds-bullet-t { font-size: 13px; color: var(--text-2); line-height: 1.5; } .ds-bullet-t b { display: block; font-size: 13.5px; color: var(--text); font-weight: 650; margin-bottom: 1px; } .ds-bullets.plain .ds-bullet-ic { width: 24px; height: 24px; border-radius: 7px; background: transparent; } .ds-bullets.plain .ds-bullet-ic svg { width: 15px; height: 15px; } /* numbered steps */ .ds-steps { list-style: none; margin: 0; padding: 0; counter-reset: dss; display: flex; flex-direction: column; gap: 11px; } .ds-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); line-height: 1.5; } .ds-step-n { counter-increment: dss; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--grad-brand); color: var(--ink-on-brand); font-family: var(--font-display); font-weight: 800; font-size: 12.5px; } .ds-step-n::before { content: counter(dss); } /* linked-system chip + needle-mover jumps */ .ds-chip, .ds-jump { display: inline-flex; align-items: center; gap: 10px; width: 100%; padding: 12px 13px; border-radius: var(--r-md); background: var(--fill-1); border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: left; font-family: var(--font-body); font-size: 13.5px; transition: border-color .2s, background .2s, transform .2s var(--ease-out); } .ds-chip:hover, .ds-jump:hover { border-color: var(--border-hi); background: var(--fill-2); transform: translateY(-1px); } .ds-chip:focus-visible, .ds-jump:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .ds-chip > span, .ds-jump > span { flex: 1; min-width: 0; font-weight: 600; } .ds-chip > svg:first-child { width: 18px; height: 18px; color: var(--blue); flex: none; } .ds-chip b { font-family: var(--font-display); font-weight: 800; } .ds-chip b.b-strong { color: var(--teal); } .ds-chip b.b-building { color: var(--blue); } .ds-chip b.b-focus { color: var(--warning); } .ds-chip svg:last-child, .ds-jump svg:last-child { width: 15px; height: 15px; color: var(--muted); flex: none; } .ds-jumps { display: flex; flex-direction: column; gap: 9px; } .ds-jump-n { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--grad-brand); color: var(--ink-on-brand); font-family: var(--font-display); font-weight: 800; font-size: 12px; } /* milestone ladder */ .ds-mile { list-style: none; margin: 0; padding: 0; } .ds-rung { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--hairline); } .ds-rung:last-child { border-bottom: none; } .ds-rung-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); color: var(--ink-on-brand); } .ds-rung-dot svg { width: 12px; height: 12px; } .ds-rung.done .ds-rung-dot { background: var(--grad-brand); border-color: transparent; } .ds-rung.next .ds-rung-dot { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); } .ds-rung-lbl { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); flex: 1; } .ds-rung.up .ds-rung-lbl, .ds-rung.up .ds-rung-at { color: var(--muted); } .ds-rung-at { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-2); min-width: 26px; text-align: right; } .ds-rung-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; min-width: 52px; text-align: right; } .ds-rung.done .ds-rung-tag { color: var(--teal); } .ds-rung.next .ds-rung-tag { color: var(--violet); } /* stat row */ .ds-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); } .ds-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; background: var(--grad-brand-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.05; } .ds-stat small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; } /* F080 · PLAN SHOWCASE POPUP — the prescribed-plan soft-sell sheet (dsPlan). */ .ds-subp { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 9px 0 2px; } .ds-subp b { color: var(--text); font-weight: 650; } .ds-plan-hero { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; padding: 14px 10px; margin: 8px 0 14px; border-radius: var(--r-md); background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, var(--surface)), var(--surface)); border: 1px solid var(--border-soft); } .ds-plan-metric { text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ds-plan-metric b { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 4vw, 21px); line-height: 1.1; background: var(--grad-brand-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; } .ds-plan-metric small { font-size: 11px; color: var(--muted); } .ds-plan-metric + .ds-plan-metric { border-left: 1px solid var(--hairline); } .ds-prod-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ds-prod { appearance: none; -webkit-appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); background: var(--fill-1); border: 1px solid var(--border-soft); transition: border-color .2s, background .2s, transform .2s var(--ease-out); } .ds-prod:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } @media (hover: hover) { .ds-prod:hover { border-color: var(--border-hi); background: var(--fill-2); transform: translateX(2px); } } .ds-prod-thumb { position: relative; flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--grad-brand); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .ds-prod-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-prod-fb { display: none; } .ds-prod-thumb.no-img .ds-prod-img { display: none; } .ds-prod-thumb.no-img .ds-prod-fb { display: grid; place-items: center; position: absolute; inset: 0; } .ds-prod-thumb.no-img .ds-prod-fb svg { width: 30px; height: 34px; } /* F081 · product-hero fallback — when a supplement has no IDLife photo, show the IDLife iD Shield as a centered Mac-app-icon tile (NOT a full-bleed glyph). */ .ds-modal.has-hero .ds-hero-img.no-img { height: 168px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 16%, var(--surface)), var(--surface)); display: grid; place-items: center; } .ds-modal.has-hero .ds-hero-img.no-img .idn-modal-hero-fb { display: grid; place-items: center; } .ds-modal.has-hero .ds-hero-img.no-img .idn-modal-hero-fb svg { width: 76px; height: 86px; filter: drop-shadow(0 12px 26px rgba(8, 20, 40, .28)); } @media (max-width: 640px) { .ds-modal.has-hero .ds-hero-img.no-img { height: 128px; } .ds-modal.has-hero .ds-hero-img.no-img .idn-modal-hero-fb svg { width: 60px; height: 68px; } } .ds-prod-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .ds-prod-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ds-prod-top b { font-size: 14px; color: var(--text); font-weight: 650; } .ds-prod-goal { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); padding: 2px 8px; border-radius: 999px; } .ds-prod-tx small { font-size: 12px; color: var(--text-2); line-height: 1.45; } .ds-prod-chk { flex: none; color: var(--teal); display: grid; place-items: center; } .ds-prod-chk svg { width: 16px; height: 16px; } .ds-prod-go { flex: none; color: var(--muted); display: grid; place-items: center; transition: color .2s, transform .2s var(--ease-out); } .ds-prod-go svg { width: 18px; height: 18px; } @media (hover: hover) { .ds-prod:hover .ds-prod-go { color: var(--teal); transform: translateX(3px); } } /* F081 · product explainer — meta chips under the hero image */ .ds-pchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .ds-pchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 11px; border-radius: 999px; background: var(--fill-1); border: 1px solid var(--border-soft); } .ds-pchip svg { width: 14px; height: 14px; flex: none; color: var(--teal); } .ds-pchip b { color: var(--text); font-weight: 700; } .ds-pchip-price { color: var(--text); background: var(--teal-soft); border-color: transparent; font-weight: 700; } /* Why the stepper opens where it does — the engine's recommended quantity. */ .ds-pchip-dose { color: var(--text-2, var(--muted)); border-color: color-mix(in srgb, var(--teal) 32%, transparent); } .ds-pchip-dose b { color: var(--teal); font-weight: 800; } .ds-pchip-dose--off { border-color: color-mix(in srgb, var(--violet) 38%, transparent); } .ds-pchip-dose--off svg, .ds-pchip-dose--off b { color: var(--violet); } /* ── clickable affordances on the Home deck ──────────────────────────────── */ .ov-sys[role="button"] { cursor: pointer; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; border: 1px solid transparent; transition: background .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out); } .ov-sys[role="button"]:hover { background: var(--fill-1); border-color: var(--border); } .ov-sys[role="button"]:active { transform: scale(.99); } .ov-sys[role="button"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .ov-sys-go { flex: none; width: 16px; height: 16px; color: var(--muted-2); display: grid; place-items: center; transform: rotate(-90deg); opacity: 0; transition: opacity .18s var(--ease-out); } .ov-sys-go svg { width: 16px; height: 16px; } .ov-sys[role="button"]:hover .ov-sys-go, .ov-sys[role="button"]:focus-visible .ov-sys-go { opacity: 1; } .ov-prio[role="button"] { cursor: pointer; transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-out); } .ov-prio[role="button"]:hover { border-color: var(--border-hi); background: var(--fill-2); } .ov-prio[role="button"]:active { transform: scale(.99); } .ov-prio[role="button"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .ov-prio-go { margin-left: auto; margin-top: 2px; flex: none; width: 16px; height: 16px; color: var(--muted-2); display: grid; place-items: center; transform: rotate(-90deg); opacity: .5; transition: opacity .18s var(--ease-out); } .ov-prio-go svg { width: 16px; height: 16px; } .ov-prio[role="button"]:hover .ov-prio-go { opacity: 1; } .ov-fx li[role="button"] { cursor: pointer; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; border: 1px solid transparent; transition: background .18s var(--ease-out), border-color .18s var(--ease-out); } .ov-fx li[role="button"]:hover { background: var(--fill-1); border-color: var(--border); } .ov-fx li[role="button"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .ov-mom-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 6px 2px; cursor: pointer; color: var(--violet); font-family: var(--font-display); font-weight: 600; font-size: 13.5px; } .ov-mom-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out); } .ov-mom-more:hover svg { transform: translateX(3px); } .ov-mom-more:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; } @media (hover: none) { .ov-sys-go { opacity: .55; } } /* ── F078 · DOCKED SHEET — glide the open detail sheet into the left background lane MyAI's expand opens (body.myai-open), so the popup + chat sit side-by-side. Computer-only (the lane only exists ≥1025px). The scrim dissolves so MyAI and the pinched page stay visible + clickable; only the card keeps pointer events. The card glides from viewport-center into the lane via a transform (the only way to interpolate centered→pinned), left-aligned to the same gutter as the tab pill, in concert with MyAI's 1.1s expand. */ @media (min-width: 1025px) { /* F110 · FOCUS DIM — when MyAI is open AND a popup is docked in the left lane (the only time .docked exists), grey/black-blur EVERYTHING else so just the two popups stand out: the docked card on the LEFT + the MyAI chat on the RIGHT. The scrim drops to z-index 78 so it sits BELOW the MyAI popup (z-80) and below the docked card (its own child) — both stay crisp & interactive — while the page, topbar and tab pill behind it dim out. pointer-events stays none so it's a visual veil only (nothing behind gets click-trapped). */ .ds-backdrop.docked { z-index: 78; /* under MyAI (z-80); the card child still paints above */ pointer-events: none; /* visual-only dim — page + MyAI stay reachable */ background: rgba(8, 11, 20, 0.62); /* grey/black scrim, both themes */ -webkit-backdrop-filter: blur(16px) saturate(118%); backdrop-filter: blur(16px) saturate(118%); transition: background .45s var(--ease-out), -webkit-backdrop-filter .45s var(--ease-out), backdrop-filter .45s var(--ease-out); } .ds-backdrop.docked .ds-modal { --ds-pad: clamp(16px, 2.4vw, 30px); /* matches the tab pill's left gutter */ --ds-w: min(var(--lane-w, 540px), 540px); /* fit the lane, never wider than the resting card */ pointer-events: auto; /* the card itself stays interactive */ width: var(--ds-w); max-width: var(--ds-w); max-height: min(70dvh, 600px); /* clear the floating bottom tab pill */ transform: translateX(calc(var(--ds-pad) - 50vw + var(--ds-w) / 2)) scale(.99); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); transition: transform 1s var(--ease-lux), width 1s var(--ease-lux), max-width 1s var(--ease-lux), opacity .3s var(--ease-out); } } @media (prefers-reduced-motion: reduce) { .ds-ring-fg { transition: none !important; } .ds-chip:hover, .ds-jump:hover { transform: none; } .ov-sys[role="button"]:active, .ov-prio[role="button"]:active { transform: none; } .ov-mom-more:hover svg { transform: none; } .ds-backdrop.docked, .ds-backdrop.docked .ds-modal { transition: none !important; } } [data-theme="light"] .rnav-chip.active { background: #ffffff; border-color: color-mix(in srgb, var(--blue) 38%, transparent); box-shadow: 0 1px 2px rgba(16,42,98,0.05), 0 8px 20px -10px rgba(22,82,240,0.30); } [data-theme="light"] .rnav-chip.active svg { color: var(--blue); } [data-theme="light"] .rnav-chip.active .rnav-n { background: var(--grad-brand); } [data-theme="light"] .results-progress { box-shadow: 0 0 10px rgba(22,82,240,0.35); } [data-theme="light"] .back-top { background: #ffffff; border-color: rgba(16,42,98,0.12); box-shadow: 0 2px 4px rgba(16,42,98,0.05), 0 14px 34px -12px rgba(20,50,120,0.25); } [data-theme="light"] .back-top:hover { color: var(--blue); } [data-theme="light"] .pg-delta { background: #ffffff; border-color: rgba(16,42,98,0.10); box-shadow: 0 4px 14px -10px rgba(20,50,120,0.14); } [data-theme="light"] .pg-delta .v.pos { text-shadow: none; } [data-theme="light"] .pg-chart { background: #ffffff; border-color: rgba(16,42,98,0.10); box-shadow: inset 0 1px 2px rgba(16,42,98,0.04); } [data-theme="light"] .pg-dot::after { background: #ffffff; border-color: var(--blue); box-shadow: 0 1px 6px rgba(22,82,240,0.35); } [data-theme="light"] .pg-dot.now::after { background: var(--grad-brand); border-color: #ffffff; } [data-theme="light"] .pg-tip { background: #ffffff; border-color: rgba(22,82,240,0.30); box-shadow: 0 14px 34px -12px rgba(20,50,120,0.30); } [data-theme="light"] .pg-you i { border-color: #ffffff; box-shadow: 0 2px 10px rgba(22,82,240,0.45); } [data-theme="light"] .grade-medallion::before { background: #ffffff; } /* ── Reduced-motion: neutralize every new infinite/entrance animation ─────*/ @media (prefers-reduced-motion: reduce) { .reveal-bloom, .progress-fill::after, .q-shield-note { animation: none !important; transition: none !important; } /* F373 · the processing engine settles into a still, composed emblem — rings hold their arc, the check stays drawn, sparks/scan are hidden. */ .proc-aura, .proc-grid, .proc-ring, .proc-scan, .proc-sat, .proc-halo, .proc-core, .pc-shield-mark { animation: none !important; } .pc-shield-mark { opacity: 1; } .proc-sparks, .proc-scan { display: none; } .options .option { animation: none !important; opacity: 1; } .options.scale .opt-bar { transition: none; transform: none; } .pc-id-shield .dna-helix { opacity: 1; transform: none; animation: none !important; } #screen-landing .hero-actions::before { animation: none !important; opacity: .6; } .idn-modal-backdrop, .idn-modal { transition: none !important; } .why-pill, .idn-modal-x { transition: none !important; transform: none !important; } .sys-row, .sys-list.resorted .sys-row { transition: none !important; animation: none !important; } .rnav-chip, .back-top { transition: none !important; } .back-top.show { transform: none; } .pg-dot.now::before { animation: none !important; } .pg-tip, .pg-cross, .pg-dot::after, .grade-medallion { transition: none !important; } } /* =========================================================================== F072 · HEADER STATUS POPOVERS — anchored "what does this mean?" cards for the top-right pills (DNA connected · Shield Active · Score N). Official IDLife imagery + graceful gradient/glyph fallback. Steady (anchored), eased, dual- theme, reduced-motion safe. Above the chrome + theme toggle, below the modal. =========================================================================== */ .dna-badge[data-pop], .shield-badge[data-pop], .score-chip[data-pop] { cursor: help; transition: color .18s, border-color .18s, background .18s, transform .18s var(--ease-spring); } .dna-badge[data-pop]:hover, .shield-badge[data-pop]:hover, .score-chip[data-pop]:hover { border-color: color-mix(in srgb, var(--blue) 82%, transparent); transform: translateY(-1px); } .dna-badge[data-pop]:focus-visible, .shield-badge[data-pop]:focus-visible, .score-chip[data-pop]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .idn-pop { position: fixed; z-index: 90; left: 0; top: 0; width: min(360px, calc(100vw - 24px)); /* F100 · OPAQUE popover — --grad-card is translucent (.55–.78 alpha), so the hover card ghosted the page through it. Seal it with a solid --surface base UNDER the gradient: same tinted look, nothing shows through. */ background: var(--grad-card), var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-float); overflow: hidden; opacity: 0; transform: translateY(6px) scale(.97); transform-origin: top right; transition: opacity .24s var(--ease-out), transform .3s var(--ease-out); } .idn-pop[hidden] { display: none; } .idn-pop.show { opacity: 1; transform: none; } .idn-pop[data-place="top"] { transform-origin: bottom right; transform: translateY(-6px) scale(.97); } .idn-pop[data-place="top"].show { transform: none; } .idn-pop::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: var(--grad-brand-3); } .idn-pop[data-tone="shield"]::before { background: linear-gradient(90deg, var(--shield), color-mix(in srgb, var(--shield) 45%, var(--teal))); } .idn-pop[data-tone="dna"]::before { background: linear-gradient(90deg, var(--blue), var(--violet)); } /* pointer — a small tone-colored diamond cap (below the pill) / surface arrow (above) */ .idn-pop-arrow { position: absolute; left: var(--arrow-x, 50%); width: 12px; height: 12px; z-index: 5; transform: translateX(-50%) rotate(45deg); background: var(--teal); } .idn-pop[data-tone="shield"] .idn-pop-arrow { background: var(--shield); } .idn-pop[data-tone="dna"] .idn-pop-arrow { background: var(--blue); } .idn-pop[data-place="bottom"] .idn-pop-arrow { top: -6px; } .idn-pop[data-place="top"] .idn-pop-arrow { bottom: -6px; background: var(--surface); border: 1px solid var(--border); border-left: 0; border-top: 0; } /* hero — official IDLife photo; themed gradient + glyph stands in if it's absent/fails */ .idn-pop-hero { position: relative; margin: 0; height: 116px; overflow: hidden; background: var(--grad-brand-3); } .idn-pop-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .idn-pop-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--bg) 42%, transparent)); } .idn-pop-hero.no-img { background: var(--grad-brand); } .idn-pop[data-tone="shield"] .idn-pop-hero.no-img { background: linear-gradient(135deg, var(--shield), color-mix(in srgb, var(--shield) 45%, var(--teal))); } .idn-pop[data-tone="dna"] .idn-pop-hero.no-img { background: linear-gradient(135deg, var(--blue), var(--violet)); } .idn-pop-hero.no-img .idn-pop-img, .idn-pop-hero.no-img::after { display: none; } .idn-pop-fb { display: none; position: absolute; inset: 0; place-items: center; color: #fff; opacity: .95; } .idn-pop-fb svg { width: 36px; height: 36px; } .idn-pop-hero.no-img .idn-pop-fb { display: grid; } /* glyph chip sealing the photo's lower-right (hidden on the glyph fallback) */ .idn-pop-badge { position: absolute; right: 14px; bottom: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--teal); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .idn-pop[data-tone="shield"] .idn-pop-badge { color: var(--shield); } .idn-pop[data-tone="dna"] .idn-pop-badge { color: var(--blue); } .idn-pop-badge svg { width: 20px; height: 20px; } .idn-pop-hero.no-img .idn-pop-badge { display: none; } .idn-pop-body { padding: 16px 18px 17px; } .idn-pop-tag { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 5px; } .idn-pop[data-tone="shield"] .idn-pop-tag { color: var(--shield); } .idn-pop[data-tone="dna"] .idn-pop-tag { color: var(--blue); } .idn-pop-title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.2; color: var(--text); margin: 0 0 8px; } .idn-pop-title small { font-size: .68em; color: var(--muted); font-weight: 600; } .idn-pop-lede { font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin: 0 0 13px; } .idn-pop-lede em { font-style: normal; color: var(--text); font-weight: 600; } .idn-pop-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .idn-pop[data-tone="score"] .idn-pop-rows { max-height: min(360px, calc(100vh - 330px)); overflow: auto; overscroll-behavior: contain; padding-right: 3px; } .idn-pop-rows li { display: flex; gap: 11px; align-items: flex-start; } .idn-pop-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--teal); background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); } .idn-pop[data-tone="shield"] .idn-pop-ic { color: var(--shield); background: var(--shield-soft); border-color: color-mix(in srgb, var(--shield) 22%, transparent); } .idn-pop[data-tone="dna"] .idn-pop-ic { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); border-color: color-mix(in srgb, var(--blue) 24%, transparent); } .idn-pop-ic svg { width: 16px; height: 16px; } .idn-pop-rt { font-size: 12px; line-height: 1.45; color: var(--text-2); } .idn-pop-rt b { display: block; font-size: 12.5px; color: var(--text); font-weight: 650; margin-bottom: 1px; } .idn-pop-foot { margin: 13px 0 0; padding-top: 11px; border-top: 1px solid var(--border-soft); font-size: 10.5px; line-height: 1.45; color: var(--muted-2); } .idn-pop-foot[hidden] { display: none; } /* F072→F078 · one smart, context-aware question per pill — tap to drop it straight into MyAI. Tinted to the badge's tone; teal by default. */ .idn-pop-ask { margin: 13px 0 0; width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; text-align: left; font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1.35; color: var(--text); background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); transition: background .18s, border-color .18s, transform .18s var(--ease-spring); } .idn-pop-ask:hover { background: color-mix(in srgb, var(--teal) 15%, transparent); border-color: color-mix(in srgb, var(--teal) 48%, transparent); transform: translateY(-1px); } .idn-pop-ask:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .idn-pop-ask[hidden] { display: none; } .idn-pop-ask-ic { flex: none; display: grid; place-items: center; color: var(--teal); } .idn-pop-ask-ic svg { width: 16px; height: 16px; } .idn-pop-ask-tx { flex: 1 1 auto; min-width: 0; } .idn-pop-ask-go { flex: none; display: grid; place-items: center; opacity: .5; transition: transform .18s var(--ease-spring), opacity .18s; } .idn-pop-ask-go svg { width: 15px; height: 15px; } .idn-pop-ask:hover .idn-pop-ask-go { transform: translateX(2px); opacity: .85; } .idn-pop[data-tone="shield"] .idn-pop-ask { background: var(--shield-soft); border-color: color-mix(in srgb, var(--shield) 30%, transparent); } .idn-pop[data-tone="shield"] .idn-pop-ask:hover { background: color-mix(in srgb, var(--shield) 14%, transparent); border-color: color-mix(in srgb, var(--shield) 46%, transparent); } .idn-pop[data-tone="shield"] .idn-pop-ask-ic { color: var(--shield); } .idn-pop[data-tone="shield"] .idn-pop-ask:focus-visible { outline-color: var(--shield); } .idn-pop[data-tone="dna"] .idn-pop-ask { background: color-mix(in srgb, var(--blue) 12%, transparent); border-color: color-mix(in srgb, var(--blue) 30%, transparent); } .idn-pop[data-tone="dna"] .idn-pop-ask:hover { background: color-mix(in srgb, var(--blue) 18%, transparent); border-color: color-mix(in srgb, var(--blue) 48%, transparent); } .idn-pop[data-tone="dna"] .idn-pop-ask-ic { color: var(--blue); } .idn-pop[data-tone="dna"] .idn-pop-ask:focus-visible { outline-color: var(--blue); } [data-theme="light"] .idn-pop { background: linear-gradient(180deg, #ffffff, #f8fbff); border-color: rgba(16,42,98,0.12); } [data-theme="light"] .idn-pop-badge { background: #fff; } @media (prefers-reduced-motion: reduce) { .idn-pop { transition: none !important; } .dna-badge[data-pop]:hover, .shield-badge[data-pop]:hover, .score-chip[data-pop]:hover { transform: none; } } /* =========================================================================== F127 · iDNUTRITION ESSENTIALS — the $3B gamified account hub popover. A violet MyAI-flavored hero (live grid, score ring, level, streak) over a tappable navigation grid to everything doable here. Tokenized · dual-theme · responsive · reduced-motion safe. ==================================================== */ .ess-scrim { position: fixed; inset: 0; z-index: 94; opacity: 0; pointer-events: none; background: color-mix(in srgb, #050d24 74%, transparent); -webkit-backdrop-filter: blur(8px) saturate(.9); backdrop-filter: blur(8px) saturate(.9); transition: opacity .26s var(--ease-out); } .ess-scrim[hidden] { display: none; } .ess-scrim.show { opacity: 1; } [data-theme="light"] .ess-scrim { background: color-mix(in srgb, #0e1c3c 52%, transparent); } @media (prefers-reduced-motion: reduce) { .ess-scrim { transition: none; } } .ess-pop { position: fixed; z-index: 95; left: 0; top: 0; width: min(472px, calc(100vw - 24px)); background: var(--grad-card), var(--surface); border: 1px solid var(--border); border-radius: calc(var(--r-lg) + 4px); box-shadow: 0 40px 90px -34px color-mix(in srgb, var(--violet) 40%, rgba(8,14,40,.6)), 0 14px 40px -22px rgba(8,14,40,.5), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); overflow: hidden; opacity: 0; transform: translateY(10px) scale(.965); transform-origin: top center; transition: opacity .26s var(--ease-out), transform .42s var(--ease-spring); } /* the $1B signature — a faint gradient hairline framing the whole card */ .ess-pop::before { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 70%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--violet) 70%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .ess-pop[hidden] { display: none; } .ess-pop.show { opacity: 1; transform: none; } .ess-pop[data-place="top"] { transform-origin: bottom center; transform: translateY(-10px) scale(.965); } .ess-pop[data-place="top"].show { transform: none; } .ess-arrow { position: absolute; left: var(--arrow-x, 50%); width: 13px; height: 13px; z-index: 5; transform: translateX(-50%) rotate(45deg); background: var(--violet); } .ess-pop[data-place="bottom"] .ess-arrow { top: -6px; } .ess-pop[data-place="top"] .ess-arrow { bottom: -6px; background: var(--surface); border: 1px solid var(--border); border-left: 0; border-top: 0; } /* violet HQ hero — F150 SIMPLIFIED: one calm gradient, no aurora bloom, no grid, no sub-line. Half the ink, same identity. */ .ess-hero { position: relative; padding: clamp(16px, 4.4vw, 20px) clamp(16px, 4.4vw, 20px) clamp(14px, 4vw, 18px); overflow: hidden; color: #fff; isolation: isolate; background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 92%, #fff) 0%, var(--violet) 44%, var(--blue-2) 100%); border-bottom: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); } .ess-hero::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(80% 60% at 18% -10%, rgba(255,255,255,.22), transparent 60%); mix-blend-mode: screen; opacity: .8; } .ess-hero-tag, .ess-hero-sub, .ess-stats { position: relative; z-index: 3; } .ess-hero-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 4.2vw, 18px); letter-spacing: .01em; } .ess-hero-tag .id-logo { width: 1.12em; height: 1.12em; } .ess-hero-tag span { color: rgba(255,255,255,.92); } .ess-hero-tag { color: #fff; } .ess-hero-sub { font-size: clamp(11.5px, 3.2vw, 12.5px); color: rgba(255,255,255,.9); margin-top: 6px; letter-spacing: .005em; } /* F150 · worst→best score graphic — mini trend line + one quiet caption row (the old vertical gauge is gone). Lives on the violet hero (white ink). */ .ess-trend { position: relative; z-index: 3; margin-top: 14px; display: flex; flex-direction: column; gap: 7px; } .ess-tr-caps { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; color: rgba(255,255,255,.78); } .ess-tr-caps b { font-family: var(--font-display); font-weight: 800; color: #fff; } .ess-tr-chart { position: relative; flex: 1; min-width: 0; height: clamp(64px, 18vw, 76px); border-radius: 14px; padding: 4px 6px 2px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); overflow: hidden; } .ess-tr-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ess-tr-line { filter: drop-shadow(0 2px 7px rgba(0,0,0,.28)); } /* line draw-in once the popup shows */ .ess-pop.show .ess-tr-line { animation: essTrDraw 1s var(--ease-out) both; } @keyframes essTrDraw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .ess-tr-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); } .ess-tr-dot.best { background: #b6ffe6; box-shadow: 0 0 10px 2px rgba(95,224,255,.7); } .ess-tr-dot.now { width: 11px; height: 11px; background: #fff; box-shadow: 0 0 12px 3px rgba(95,224,255,.85), 0 0 0 3px rgba(255,255,255,.25); } .ess-tr-nowval { position: absolute; transform: translate(-50%, -150%); font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.45); font-variant-numeric: tabular-nums; pointer-events: none; } /* solo state — first check-in, no trend yet */ .ess-trend--solo { flex-direction: row; align-items: center; gap: 14px; } .ess-tr-solo-num { flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 12px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .ess-tr-solo-num b { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: #fff; } .ess-tr-solo-num small { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; opacity: .75; color: #fff; margin-top: 4px; } .ess-tr-solo-msg { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.92); } .ess-tr-solo-msg b { font-weight: 800; } /* nav grid — F150 SIMPLIFIED: one-line items, no subtitles, no chevrons, no sheen sweep. Quiet hover. */ .ess-grid { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ess-item { position: relative; appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; text-align: left; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--fill-1)); border: 1px solid var(--border); color: var(--text); transition: border-color .2s, background .2s; } .ess-item-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--violet) 20%, transparent); } .ess-item-ic svg { width: 16px; height: 16px; } .ess-item-tx { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .ess-item-tx b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ess-item:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } @media (hover: hover) { .ess-item:hover { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 7%, var(--surface)), var(--fill-1)); } } .ess-item.glow .ess-item-ic { color: #fff; background: linear-gradient(135deg, var(--violet), var(--blue-2)); border-color: transparent; } .ess-item.glow { border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); } .ess-item.dis { opacity: .42; pointer-events: none; } .ess-foot { display: flex; align-items: center; gap: 7px; padding: 10px 18px 15px; margin-top: 2px; font-size: 10.5px; color: var(--muted-2); border-top: 1px solid var(--border); } .ess-foot svg { width: 12px; height: 12px; flex: none; } [data-theme="light"] .ess-pop { background: linear-gradient(180deg, #ffffff, #f8fbff); border-color: rgba(16,42,98,0.12); } /* tablet */ @media (max-width: 760px) { .ess-pop { width: min(420px, calc(100vw - 20px)); } } /* mobile */ @media (max-width: 560px) { .ess-grid { grid-template-columns: 1fr; gap: 8px; padding: 13px; } .ess-pop { width: calc(100vw - 16px); } .ess-foot { padding: 10px 16px 15px; } } @media (prefers-reduced-motion: reduce) { .ess-pop { transition: none !important; } .ess-pop.show .ess-tr-line { animation: none; } } /* =========================================================================== RESULTS PERFORMANCE LAYER — zero backdrop-filters while scrolling --------------------------------------------------------------------------- backdrop-filter forces the GPU to re-blur everything beneath an element on EVERY scrolled frame. The results dashboard can hold 20+ glass surfaces — that is why content lagged in and the raw background peeked through on fast scrolls. On results we swap live blur for near-opaque card surfaces (visually identical over the frozen background, since nothing moves beneath them) and drop the masked dot layer. Scrolling becomes pure compositing. The why-modal keeps its blur — it's transient and never scrolls. */ body.on-results .card, body.on-results .results-chrome, body.on-results .acct-btn, body.on-results .back-top, body.on-results .shield-badge, body.on-results .dna-badge, body.on-results .score-chip, body.on-results .hero-opp, body.on-results .why-pill { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.on-results .card { background: linear-gradient(180deg, rgba(22,35,77,0.97), rgba(10,18,40,0.985)); } body.on-results .tier.recommended { background: var(--tier-rec-bg); } body.on-results .grade-medallion::before { background: #131f42; } [data-theme="light"] body.on-results .grade-medallion::before { background: #ffffff; } body.on-results .results-chrome { background: var(--bg-1); } body.on-results .acct-btn { background: rgba(10,17,40,0.92); } body.on-results .back-top { background: rgba(10,17,40,0.92); } body.on-results .dots { display: none; } [data-theme="light"] body.on-results .card { background: linear-gradient(180deg, #ffffff, #f7faff); } [data-theme="light"] body.on-results .tier.recommended { background: var(--tier-rec-bg); } [data-theme="light"] body.on-results .results-chrome { background: var(--bg-1); } [data-theme="light"] body.on-results .acct-btn { background: #fff; } [data-theme="light"] body.on-results .back-top { background: #fff; } /* =========================================================================== F064 · BILLION-DOLLAR BOOT PRELOADER Full-screen identity-resolve splash that covers first paint, then dissolves over the landing (first-timers) or the overview dashboard (returning users). Token-driven (dual-theme), reduced-motion safe. Sits above EVERYTHING. =========================================================================== */ .preloader { position: fixed; inset: 0; z-index: 100000; /* ALWAYS DARK — the boot splash is a fixed dark experience in BOTH themes. Pin the dark token palette locally so the whole subtree renders dark no matter the active OS/user theme (it must never flip to white). Scoped to .preloader, so nothing else on the page is affected. */ color-scheme: dark; --bg-1: #04091a; --text: #f4f8ff; --text-2: #c5d0e6; --muted: #8493ad; --teal: #14e0cb; --blue: #5b95ff; --violet: #b56cff; --teal-glow: rgba(20,224,203,0.45); --glow-teal: 0 0 50px rgba(20,224,203,0.30); --glow-blue: 0 0 50px rgba(79,142,247,0.26); --glow-violet: 0 0 50px rgba(181,108,255,0.24); --glass-bg: rgba(10,18,40,0.62); --border-hi: rgba(20,224,203,0.55); --track: rgba(255,255,255,0.07); --grad-brand: linear-gradient(135deg, #14e0cb 0%, #4f8ef7 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 30px); background: radial-gradient(120% 80% at 50% 28%, rgba(20,224,203,0.10), transparent 60%), radial-gradient(130% 90% at 50% 104%, rgba(91,149,255,0.13), transparent 66%), var(--bg-1); color: var(--text); text-align: center; overflow: hidden; opacity: 1; transform: scale(1); filter: blur(0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); } .preloader.done { opacity: 0; transform: scale(1.06); filter: blur(14px); pointer-events: none; } /* No document scrollbar while the boot splash is up — the screen rendered UNDERNEATH (landing/overview) is taller than the viewport, so its scrollbar flashed beside the splash. Scroll unlocks the moment the dissolve begins. */ html:has(.preloader:not(.done)), body:has(.preloader:not(.done)) { overflow-y: hidden !important; } /* (light-theme override intentionally removed — the boot splash is always dark) */ .pl-aura { position: absolute; width: min(760px, 124vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(20,224,203,0.16), rgba(79,142,247,0.10) 42%, transparent 68%); filter: blur(22px); animation: plAura 6s var(--ease-out) infinite; pointer-events: none; } @keyframes plAura { 0%,100% { transform: scale(.9); opacity:.65 } 50% { transform: scale(1.07); opacity:1 } } .pl-stage { position: relative; width: clamp(150px, 34vw, 212px); aspect-ratio: 1; display: grid; place-items: center; } .pl-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, var(--teal) 92deg, var(--blue) 210deg, transparent 320deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); opacity: .85; animation: plSpin 3.2s linear infinite; } .pl-ring-2 { inset: 13%; opacity: .6; animation-duration: 4.6s; animation-direction: reverse; background: conic-gradient(from 90deg, transparent 0deg, var(--violet) 74deg, var(--blue) 190deg, transparent 300deg); } .pl-ring-3 { inset: 27%; opacity: .5; animation-duration: 2.4s; background: conic-gradient(from 200deg, transparent 0deg, var(--teal) 84deg, transparent 260deg); } @keyframes plSpin { to { transform: rotate(360deg); } } .pl-orbit { position: absolute; inset: 2%; animation: plSpin 7s linear infinite; pointer-events: none; } .pl-orbit i { position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal-glow); } .pl-orbit i:nth-child(2) { top: 50%; left: auto; right: -3px; margin: -3.5px 0 0; background: var(--blue); box-shadow: 0 0 12px var(--glow-blue); } .pl-orbit i:nth-child(3) { top: auto; bottom: -3px; left: 50%; background: var(--violet); box-shadow: 0 0 12px var(--glow-violet); } .pl-scan { position: absolute; inset: 16%; border-radius: 50%; overflow: hidden; opacity: .55; -webkit-mask: radial-gradient(farthest-side, #000 99%, transparent); mask: radial-gradient(farthest-side, #000 99%, transparent); } .pl-scan::before { content: ''; position: absolute; left: 0; right: 0; top: -55%; height: 60%; background: linear-gradient(180deg, transparent, var(--teal-glow), transparent); animation: plScan 2.3s var(--ease-out) infinite; } @keyframes plScan { 0% { transform: translateY(0) } 100% { transform: translateY(300%) } } .pl-core { position: relative; width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 26%; background: var(--glass-bg); border: 1px solid var(--border-hi); box-shadow: var(--glow-teal), inset 0 1px 0 rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: plBreath 3s var(--ease-out) infinite; } .pl-core svg { width: 62%; height: 62%; filter: drop-shadow(0 4px 14px var(--teal-glow)); } @keyframes plBreath { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } } .pl-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(15px, 2.2vw, 19px); color: var(--text-2); } .pl-brand b { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── iD shield brand lockup — the preloader wordmark "iD·NUTRITION®" ───────── A gradient SHIELD glyph (dark "iD" inside) sized to the wordmark's cap-height and set tight against NUTRITION, with a small ® super. The CSS lives here (index.html's preloader markup references these classes + the --id-rim stroke token); the shield is self-contained so no tokens.css change is needed. */ .pl-word { display: inline-flex; align-items: center; gap: .12em; } .id-logo { --id-rim: rgba(255, 255, 255, 0.34); display: inline-flex; align-items: center; justify-content: center; width: 1.46em; height: 1.46em; flex: none; filter: drop-shadow(0 6px 15px var(--teal-glow)) drop-shadow(0 2px 3px rgba(6, 14, 34, .3)); } .id-logo-svg { width: 100%; height: 100%; display: block; overflow: visible; } /* the iD shield now mirrors the J (Shield-menu) build: gradient body, a glass inner well, and a themed rim of the SAME thickness + colour as the J shield. */ .id-logo-glass { fill: var(--surface-2); stroke: rgba(4, 9, 26, .55); stroke-width: 1.1; stroke-linejoin: round; } .id-logo-rim { stroke: var(--id-rim); stroke-width: 1.3; } /* engraved 3D pass — the i) sits pressed into the shield with a hairline shadow */ .id-logo-inner { filter: drop-shadow(0 .7px .5px rgba(6, 14, 34, .42)); } [data-theme="light"] .id-logo-glass { fill: transparent; } /* gradient body reads as the whole shield, like the light J */ [data-theme="light"] .id-logo-rim { stroke: color-mix(in srgb, #ffffff 68%, #b9c4d4); stroke-width: 1.3; stroke-opacity: .85; } :root:not([data-theme="light"]) .id-logo-body { fill: var(--text-2); } /* grey body + dark glass = grey rim, exactly like the dark J */ :root:not([data-theme="light"]) .id-logo-rim { stroke: none; } .id-logo-tx { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: -.4px; fill: #ffffff; text-transform: none; } .idn-reg { font-size: .5em; vertical-align: top; margin-left: .1em; opacity: .6; letter-spacing: 0; } .pl-bar { width: clamp(160px, 40vw, 240px); height: 3px; border-radius: 999px; overflow: hidden; background: var(--track); } .pl-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--grad-brand); transform: scaleX(.04); transform-origin: left; box-shadow: 0 0 14px var(--teal-glow); } @media (prefers-reduced-motion: reduce) { .preloader { transition: opacity .2s linear; } .pl-aura, .pl-ring, .pl-orbit, .pl-scan::before, .pl-core { animation: none !important; } .pl-bar i { transform: scaleX(1); } } /* =========================================================================== F064 · RETURNING-USER OVERVIEW DASHBOARD ($5B account home) On-brand (dual-theme), fully responsive (mobile / tablet / desktop). Opaque token surfaces + frozen ambient on scroll → buttery (mirrors the F024 law). =========================================================================== */ .ov-shell { width: 100%; min-height: 100dvh; position: relative; } /* freeze ambient motion while the (long, scrolling) overview is up */ body.on-overview .bg::after, body.on-overview .orb { animation: none !important; will-change: auto; } body.on-overview .particles, body.on-overview .dots { display: none; } body.on-overview .gradient-text { animation: none !important; } /* =========================================================================== F127 · FORCE FIELD — not lines, but the air itself bending. A soft, volumetric energy field swells OUT of the IDNutrition fortress's LEFT-MIDDLE wall and warps the page background like a heat-shimmer / force dome. Built from feathered radial energy blooms (teal → blue → violet) blurred into one another, plus an organic fractal-noise distortion masked to the field so the "water/air" reads painterly + dimensional — Mona Lisa caliber, never flat 2D. JS (positionRipple) pins --rip-x/--rip-y to the castle's left-middle so the field's heart stays on the wall across computer / tablet / mobile. Token-only → sings in BOTH light + dark. Sits BEHIND all chrome + cards (z-index 0). =========================================================================== */ #screen-overview .ov-wrap { position: relative; z-index: 1; } /* the header must out-rank the ripple AND stay pinned — keep sticky at #-specificity */ #screen-overview .ov-topbar { position: sticky; top: 0; z-index: 30; } .ov-ripple { position: absolute; inset: 0; /* span the WHOLE overview — every section, all the way down */ z-index: 0; overflow: hidden; pointer-events: none; --rip-x: 72%; --rip-y: 300px; /* fallback origin until JS pins the castle */ /* focal force-field bloom at the castle (fixed px so it stays a hero accent) layered over a continuous theme wash that carries the same tint to the bottom */ background: radial-gradient(1100px 820px at var(--rip-x) var(--rip-y), color-mix(in srgb, var(--teal) 42%, transparent) 0, color-mix(in srgb, var(--blue) 24%, transparent) 14%, color-mix(in srgb, var(--teal) 14%, transparent) 36%, color-mix(in srgb, var(--blue) 8%, transparent) 60%, transparent 84%), linear-gradient(180deg, color-mix(in srgb, var(--teal) 12%, transparent) 0, color-mix(in srgb, var(--blue) 10%, transparent) 38%, color-mix(in srgb, var(--violet) 9%, transparent) 72%, color-mix(in srgb, var(--blue) 10%, transparent) 100%); filter: blur(18px) saturate(1.12); /* dissolve it into one living field */ transform: translateZ(0); } /* the organic distortion — fractal noise warps the field so it shimmers like a force dome bending the light, masked to fade out into the page. GEOMETRY LAW (nav smoothness): the box + mask are FIXED-SIZE (viewport/px units), never a % of the shell — each tab has a different content height, and a %-sized field re-stretched on every switch (a 0.27 full-viewport layout shift = the visible background jump between nav pages). */ .ov-ripple::after { content: ""; position: absolute; top: -80px; left: -10%; right: -10%; height: 340vh; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.014' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); background-size: 820px 820px; -webkit-mask-image: radial-gradient(1500px 1600px at var(--rip-x) var(--rip-y), #000 0, #000 34%, rgba(0,0,0,.45) 64%, transparent 98%); mask-image: radial-gradient(1500px 1600px at var(--rip-x) var(--rip-y), #000 0, #000 34%, rgba(0,0,0,.45) 64%, transparent 98%); mix-blend-mode: overlay; opacity: .8; } /* the leftover ring/core spans aren't needed for the painted field */ .ov-rip, .ov-rip-core { display: none; } /* light mode — a brighter field needs a touch more presence + softer noise. A cluster of dark earthy "landmass" spots wraps the castle focal so the bright field gains a terrain-surround feel (like the dark land in dark mode) without overpowering the blue/white palette. Deepened + more structured so the castle reads as sitting on real terrain, not floating on a flat wash. */ [data-theme="light"] .ov-ripple { background: /* ── soft waterline shadow that seats the whole island ── */ radial-gradient(640px 300px at var(--rip-x) calc(var(--rip-y) + 210px), color-mix(in srgb, #060c16 30%, transparent) 0, color-mix(in srgb, #060c16 12%, transparent) 48%, transparent 74%), /* ── the island shelf directly under the castle base ── */ radial-gradient(520px 300px at var(--rip-x) calc(var(--rip-y) + 140px), color-mix(in srgb, #0a1a12 40%, transparent) 0, color-mix(in srgb, #0e1c20 22%, transparent) 40%, transparent 72%), /* ── clustered earthy rock structures wrapping the base ── */ radial-gradient(310px 210px at calc(var(--rip-x) - 175px) calc(var(--rip-y) + 95px), color-mix(in srgb, #14100a 34%, transparent) 0, color-mix(in srgb, #14100a 12%, transparent) 44%, transparent 70%), radial-gradient(330px 220px at calc(var(--rip-x) + 185px) calc(var(--rip-y) + 105px), color-mix(in srgb, #0b1524 34%, transparent) 0, color-mix(in srgb, #0b1524 12%, transparent) 44%, transparent 70%), radial-gradient(230px 170px at calc(var(--rip-x) + 30px) calc(var(--rip-y) + 205px), color-mix(in srgb, #0d0b06 30%, transparent) 0, transparent 64%), radial-gradient(200px 150px at calc(var(--rip-x) - 60px) calc(var(--rip-y) + 175px), color-mix(in srgb, #0a140e 28%, transparent) 0, transparent 64%), radial-gradient(1100px 820px at var(--rip-x) var(--rip-y), color-mix(in srgb, var(--teal) 64%, transparent) 0, color-mix(in srgb, var(--blue) 40%, transparent) 14%, color-mix(in srgb, var(--teal) 26%, transparent) 36%, color-mix(in srgb, var(--blue) 17%, transparent) 60%, transparent 86%), linear-gradient(180deg, color-mix(in srgb, var(--teal) 22%, transparent) 0, color-mix(in srgb, var(--blue) 18%, transparent) 38%, color-mix(in srgb, var(--violet) 16%, transparent) 72%, color-mix(in srgb, var(--blue) 18%, transparent) 100%); } [data-theme="light"] .ov-ripple::after { mix-blend-mode: soft-light; opacity: .5; } /* light mode ONLY · a deep top-LEFT-corner wash of black + blue + green folded into the ripple field, anchored at the page's top-left. Additive pseudo-layer so the existing background stacks stay intact. DARK MODE IS NOT TOUCHED. */ [data-theme="light"] .ov-ripple::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: /* soft white lift along ALL outer edges (inverse vignette) so the ripple's outsides read lighter/airier in light mode */ radial-gradient(140% 130% at 50% 50%, transparent 52%, color-mix(in srgb, #ffffff 26%, transparent) 78%, color-mix(in srgb, #ffffff 42%, transparent) 100%), /* soft pink → purple → green kiss seated behind the "NUTRITION" hero word */ radial-gradient(360px 200px at 28% 12%, color-mix(in srgb, #d24aa0 18%, transparent) 0, color-mix(in srgb, #5b2c9e 16%, transparent) 34%, color-mix(in srgb, #0e7a52 18%, transparent) 58%, color-mix(in srgb, var(--blue) 18%, transparent) 74%, transparent 88%), /* compact green → purple → blue wash held tight to the TOP-LEFT corner (kept small so the dark colours don't spill more than ~1.5in inward) */ radial-gradient(300px 260px at 0% 0%, color-mix(in srgb, #0a4d33 40%, transparent) 0, color-mix(in srgb, #0e7a52 34%, transparent) 24%, color-mix(in srgb, #5b2c9e 10%, transparent) 48%, color-mix(in srgb, var(--blue) 30%, transparent) 66%, transparent 82%); } /* light mode · computer only — fold a perfect little hint of grey + black into the ripple so the bright field gains depth (dark mode + phones untouched). Deepened into a real island: a seated waterline shadow, a solid earthy shelf under the castle, and a cluster of darker rock structures so the castle looks planted on terrain — matching dark mode's grounded feel while keeping the light palette. */ @media (min-width: 1025px) { [data-theme="light"] .ov-ripple { background: /* ── left-side blend: fold the castle's dark over the bright empty field to the LEFT of the "Science behind your number" + "Health trend" widgets so that half gains depth too (light mode · computer only) ── */ linear-gradient(90deg, color-mix(in srgb, #0a1830 30%, transparent) 0, color-mix(in srgb, #0c1c34 22%, transparent) 15%, color-mix(in srgb, #0e2138 13%, transparent) 28%, color-mix(in srgb, #0e2138 5%, transparent) 40%, transparent 48%), /* ── right-side vignette: darken the castle half of the page so the castle gets dark-mode-style emphasis (light mode only) ── */ linear-gradient(90deg, transparent 34%, color-mix(in srgb, #0a1220 10%, transparent) 58%, color-mix(in srgb, #070d18 26%, transparent) 82%, color-mix(in srgb, #05090f 34%, transparent) 100%), /* ── COUNCIL FIX (light · computer) — the green/purple/light-blue jewels + a soft near-white lift ride HIGH in the stack (above the dark island + rocks) so they actually read: vivid colour in the castle's bottom- right corner and along the middle-bottom, over a pale lift that clears the muddy "dim-mode" dead-zone under the CTAs → a true light field. ── */ radial-gradient(440px 320px at calc(var(--rip-x) + 165px) calc(var(--rip-y) + 205px), color-mix(in srgb, #34d17f 52%, transparent) 0, color-mix(in srgb, #34d17f 20%, transparent) 44%, transparent 72%), radial-gradient(380px 300px at calc(var(--rip-x) + 210px) calc(var(--rip-y) + 145px), color-mix(in srgb, var(--violet) 50%, transparent) 0, color-mix(in srgb, var(--violet) 18%, transparent) 46%, transparent 74%), radial-gradient(420px 320px at calc(var(--rip-x) + 120px) calc(var(--rip-y) + 260px), color-mix(in srgb, #6fb8ff 50%, transparent) 0, color-mix(in srgb, #6fb8ff 18%, transparent) 46%, transparent 74%), radial-gradient(720px 420px at 48% 99%, color-mix(in srgb, #34d17f 46%, transparent) 0, color-mix(in srgb, #34d17f 17%, transparent) 44%, transparent 76%), radial-gradient(660px 440px at 40% 100%, color-mix(in srgb, var(--violet) 44%, transparent) 0, color-mix(in srgb, var(--violet) 16%, transparent) 46%, transparent 76%), radial-gradient(680px 400px at 60% 100%, color-mix(in srgb, #6fb8ff 46%, transparent) 0, color-mix(in srgb, #6fb8ff 17%, transparent) 46%, transparent 76%), /* soft near-white lift — clears the muddy dead-zone (center + bottom) */ radial-gradient(1180px 660px at 38% 98%, color-mix(in srgb, #eef6ff 46%, transparent) 0, color-mix(in srgb, #dbebff 22%, transparent) 42%, transparent 76%), radial-gradient(940px 600px at 30% 60%, color-mix(in srgb, #eef6ff 30%, transparent) 0, transparent 66%), /* ── lower + mid sections — a LIGHT blue · green airy vibe that spans the whole field so the body-systems / priority-moves area reads fresh blue-green, never grey or black (light mode · computer) ── */ radial-gradient(1600px 920px at 26% 50%, color-mix(in srgb, #7fe6cb 22%, transparent) 0, color-mix(in srgb, #7fe6cb 9%, transparent) 46%, transparent 80%), radial-gradient(1500px 900px at 76% 60%, color-mix(in srgb, #a6dcff 22%, transparent) 0, color-mix(in srgb, #a6dcff 9%, transparent) 46%, transparent 80%), radial-gradient(1700px 1040px at 48% 78%, color-mix(in srgb, #74dfbe 18%, transparent) 0, color-mix(in srgb, #74dfbe 7%, transparent) 48%, transparent 82%), radial-gradient(1400px 860px at 64% 90%, color-mix(in srgb, #9fe4ff 18%, transparent) 0, color-mix(in srgb, #9fe4ff 7%, transparent) 48%, transparent 82%), /* ── broad dark halo wrapping the castle focal ── */ radial-gradient(760px 620px at var(--rip-x) calc(var(--rip-y) + 30px), color-mix(in srgb, #060b16 16%, transparent) 0, color-mix(in srgb, #060b16 8%, transparent) 40%, transparent 66%), radial-gradient(880px 600px at var(--rip-x) var(--rip-y), color-mix(in srgb, #07030f 14%, transparent) 0, transparent 56%), /* ── deep waterline shadow that seats the island on the field ── */ radial-gradient(760px 340px at var(--rip-x) calc(var(--rip-y) + 235px), color-mix(in srgb, #05090f 36%, transparent) 0, color-mix(in srgb, #05090f 15%, transparent) 46%, transparent 74%), /* ── the solid earthy island shelf hugging the castle base ── */ radial-gradient(620px 360px at var(--rip-x) calc(var(--rip-y) + 155px), color-mix(in srgb, #0a1a12 34%, transparent) 0, color-mix(in srgb, #0d1c1e 20%, transparent) 38%, color-mix(in srgb, #0a1524 10%, transparent) 60%, transparent 76%), /* ── clustered dark rock structures around the shoreline ── */ radial-gradient(340px 230px at calc(var(--rip-x) - 195px) calc(var(--rip-y) + 100px), color-mix(in srgb, #14100a 8%, transparent) 0, color-mix(in srgb, #14100a 4%, transparent) 46%, transparent 70%), radial-gradient(380px 250px at calc(var(--rip-x) + 205px) calc(var(--rip-y) + 120px), color-mix(in srgb, #0b1524 40%, transparent) 0, color-mix(in srgb, #0b1524 14%, transparent) 46%, transparent 70%), radial-gradient(250px 190px at calc(var(--rip-x) + 45px) calc(var(--rip-y) + 235px), color-mix(in srgb, #0d0b06 34%, transparent) 0, transparent 64%), radial-gradient(220px 170px at calc(var(--rip-x) - 90px) calc(var(--rip-y) + 195px), color-mix(in srgb, #0a140e 10%, transparent) 0, transparent 64%), radial-gradient(180px 150px at calc(var(--rip-x) + 130px) calc(var(--rip-y) + 210px), color-mix(in srgb, #100e08 30%, transparent) 0, transparent 62%), /* ── verdant terrain accents spread across the rest of the field so the whole page reads as a green landscape, not just the castle island ── */ radial-gradient(760px 480px at 14% 64%, color-mix(in srgb, #1f6b3f 28%, transparent) 0, color-mix(in srgb, #1f6b3f 12%, transparent) 42%, transparent 74%), radial-gradient(680px 440px at 88% 72%, color-mix(in srgb, #1c5e3a 26%, transparent) 0, color-mix(in srgb, #1c5e3a 11%, transparent) 44%, transparent 74%), radial-gradient(900px 420px at 50% 96%, color-mix(in srgb, #245a37 26%, transparent) 0, color-mix(in srgb, #245a37 11%, transparent) 46%, transparent 78%), radial-gradient(560px 380px at 32% 86%, color-mix(in srgb, #2b7a4a 24%, transparent) 0, transparent 68%), radial-gradient(1000px 760px at 30% 78%, color-mix(in srgb, var(--violet) 24%, transparent) 0, transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--violet) 6%, transparent) 0, color-mix(in srgb, #0b0a1c 1%, transparent) 56%, color-mix(in srgb, #04030a 2%, transparent) 100%), radial-gradient(1100px 820px at var(--rip-x) var(--rip-y), color-mix(in srgb, var(--teal) 64%, transparent) 0, color-mix(in srgb, var(--blue) 40%, transparent) 14%, color-mix(in srgb, var(--teal) 26%, transparent) 36%, color-mix(in srgb, var(--blue) 17%, transparent) 60%, transparent 86%), linear-gradient(180deg, color-mix(in srgb, var(--teal) 14%, transparent) 0, color-mix(in srgb, var(--blue) 10%, transparent) 38%, color-mix(in srgb, var(--violet) 11%, transparent) 72%, color-mix(in srgb, var(--blue) 10%, transparent) 100%); } } /* phones: pull the heart up + ease the blur for a smaller canvas */ @media (max-width: 700px) { .ov-ripple { --rip-y: 240px; filter: blur(10px) saturate(1.06); } } .ov-topbar { position: sticky; top: 0; z-index: 20; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px clamp(16px, 4vw, 40px); /* reserve the right gutter so the Score pill never tucks under the fixed top-right theme toggle (44px @ right:16px → clears its 60px footprint) */ padding-right: calc(clamp(16px, 4vw, 40px) + 56px); /* F099 · OPAQUE topbar — layer the page bg (--bg-1) UNDER the tinted gradient so scrolling content can never ghost through the sticky header. The gradient keeps its sheen; the solid base seals it. Theme-aware (dark + light). */ background: var(--topbar-bg), var(--bg-1); border-bottom: 2px solid color-mix(in srgb, var(--blue) 66%, transparent); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); } .ov-top-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* ── F115 · TOP-TIER NAV ───────────────────────────────────────────────────── The Home / Plan / Care / Trends / Reports tab bar rides in the header's CENTER slot — between the iD·LIFE lockup and the DNA badge — instead of a floating bottom pill. The topbar becomes a 3-zone flex (brand · nav · status); on phones the nav wraps to its own full-width row beneath the header. */ .ov-topbar { flex-wrap: wrap; row-gap: 8px; } .ov-brandid, .ov-top-right { flex: 0 0 auto; } .ov-topnav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } /* the mounted .mtabbar — de-floated and inlined into the header slot. High specificity (#id) overrides the fixed/floating bottom-bar rules at every width. */ body.mpaged #ov-topnav .mtabbar { position: static; inset: auto; left: auto; right: auto; bottom: auto; transform: none; z-index: auto; width: auto; max-width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-top: 0; border-radius: 0; box-shadow: none; animation: none; } body.mpaged #ov-topnav .mtabbar::-webkit-scrollbar { display: none; } /* tabs stay inline icon+label pills at every width inside the header */ #ov-topnav .mtab { flex: none; flex-direction: row; gap: 7px; padding: 7px 14px; border-radius: var(--r-pill); height: auto; } #ov-topnav .mtab-ic { width: auto; height: auto; background: none; border-radius: 0; } #ov-topnav .mtab-ic svg { width: 17px; height: 17px; } #ov-topnav .mtab-lb { font-size: 13px; letter-spacing: .01em; } #ov-topnav .mtab:hover { color: var(--text); background: var(--fill-1); } #ov-topnav .mtab.active, #ov-topnav .mtab.active:hover { color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 34%, transparent); } #ov-topnav .mtab.active .mtab-ic { background: none; } /* overview no longer has a floating bottom bar → drop the reserved clearance */ body.mpaged #screen-overview:has(.mtabbar--top) .ov-wrap { padding-bottom: clamp(28px, 5vw, 52px); } /* PLAN FOCUS MODE — while the Plan page is open the nav collapses to Plan + Dashboard and the floating MyAI launcher retires, so the plan is the only thing competing for attention. */ body.plan-focus .myai-fab { display: none !important; } /* Plan focus also retires the top-right status pills so nothing pulls the eye off the plan. The floating pill STAYS: in CART MODE it is the plan's cart, and in account mode it is the only route to settings + sign out. */ body.plan-focus #screen-overview .ov-top-right { display: none !important; } /* F126 · RESULTS topbar mirrors the overview: the iD·LIFE lockup is a HOME button, and the section pager rides in the header center slot (between the brand and the report-switch < arrow) instead of floating at the bottom. */ .res-brand { appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer; padding: 0; color: inherit; font: inherit; order: 1; flex: none; transition: transform .2s var(--ease-out), opacity .2s; } .res-brand:hover { transform: translateY(-1px); opacity: .9; } .res-brand:active { transform: scale(.97); } .res-brand:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px; } /* explicit labelled Home button (sits right after the iD·LIFE lockup) → overview */ .res-home-pill { order: 1; flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .01em; color: var(--muted); padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); background: rgba(255,255,255,0.03); white-space: nowrap; transition: color .18s, background .18s, border-color .18s, transform .18s var(--ease-spring); } .res-home-pill svg { width: 16px; height: 16px; } .res-home-pill:hover { color: var(--text); border-color: color-mix(in srgb, var(--blue) 66%, transparent); transform: translateY(-1px); } .res-home-pill:active { transform: scale(.97); } .res-home-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } [data-theme="light"] .res-home-pill { color: #3f6fd6; background: rgba(63,111,214,0.08); } .res-topnav { order: 2; flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } body.mpaged #res-topnav .mtabbar { position: static; inset: auto; left: auto; right: auto; bottom: auto; transform: none; z-index: auto; width: auto; max-width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-top: 0; border-radius: 0; box-shadow: none; animation: none; } body.mpaged #res-topnav .mtabbar::-webkit-scrollbar { display: none; } #res-topnav .mtab { flex: none; flex-direction: row; gap: 7px; padding: 7px 14px; border-radius: var(--r-pill); height: auto; } #res-topnav .mtab-ic { width: auto; height: auto; background: none; border-radius: 0; } #res-topnav .mtab-ic svg { width: 17px; height: 17px; } #res-topnav .mtab-lb { font-size: 13px; letter-spacing: .01em; } #res-topnav .mtab:hover { color: var(--text); background: var(--fill-1); } #res-topnav .mtab.active, #res-topnav .mtab.active:hover { color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 34%, transparent); } #res-topnav .mtab.active .mtab-ic { background: none; } /* empty on overview / when not re-homed → don't reserve center space */ .res-topnav:empty { flex: 0 0 auto; } /* F151 · phones: the nav no longer crams into the header — it lives in the fixed bottom footer bar (see the ≤640 .mtabbar rules). The header stays a clean single row: brand + status. Empty slots reserve no space. */ @media (max-width: 640px) { .ov-topnav:empty, .res-topnav:empty { flex: 0 0 auto; } .ov-top-right { order: 2; } } /* ═══════════════════════════════════════════════════════════════════════════ TIGHT HEADER LAW — mobile + tablet (≤1024px): every topbar is ALWAYS one horizontal line. Status pills (DNA · Shield · Report · Home · Score) compress into premium icon-only capsules — the label text stays in the DOM for screen readers (font-size:0 trick), so accessibility never degrades. Nothing in the header chrome is allowed to wrap to a second row. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { /* the row itself: hard single-line */ .ov-topbar, .results-topbar { flex-wrap: nowrap; } .ov-top-right, .topbar-right { flex-wrap: nowrap; flex: none; gap: 7px; min-width: 0; } .ov-topnav, .res-topnav { min-width: 0; overflow: hidden; } /* DNA + Shield → 38px branded icon capsules (round, jewel-like) */ .ov-topbar .dna-badge, .results-topbar .dna-badge, .ov-topbar .shield-badge, .results-topbar .shield-badge { position: relative; font-size: 0; gap: 0; padding: 0; width: 38px; height: 38px; flex: none; justify-content: center; border-radius: 50%; } .ov-topbar .dna-badge svg, .results-topbar .dna-badge svg, .ov-topbar .shield-badge svg, .results-topbar .shield-badge svg { width: 17px; height: 17px; } /* the live pulse dot rides the capsule edge like a status LED */ .ov-topbar .shield-badge .live, .results-topbar .shield-badge .live { position: absolute; top: 2px; right: 2px; margin: 0; box-shadow: 0 0 8px var(--shield), 0 0 0 2px var(--bg-1, #04091a); } [data-theme="light"] .ov-topbar .shield-badge .live, [data-theme="light"] .results-topbar .shield-badge .live { box-shadow: 0 0 8px var(--shield), 0 0 0 2px #fff; } /* Score chip → number-only pill (the "Score"/"Sample" word collapses) */ .ov-topbar .score-chip { font-size: 0; gap: 0; padding: 0 13px; height: 38px; flex: none; } .ov-topbar .score-chip b { font-size: 15px; } /* Home pill (results) → icon-only capsule */ .res-home-pill { font-size: 0; gap: 0; padding: 0; width: 38px; height: 38px; justify-content: center; border-radius: 50%; flex: none; } .res-home-pill svg { width: 17px; height: 17px; } /* Report switcher → calendar-icon capsule + chevron (date text collapses; the full dated list still opens in the dropdown panel) */ .topbar-right .rs-btn { padding: 5px 8px; gap: 4px; flex: none; } .topbar-right .rs-btn-tx { display: none; } /* header gutters tighten so the capsules breathe on one line */ .ov-topbar { gap: 8px; padding-right: calc(clamp(12px, 3vw, 24px) + 52px); } .results-topbar { gap: 8px; } } /* phones: a touch tighter still — steppers are gone (≤640 rule above), the capsules shrink one notch so brand + 3–4 capsules always clear one line */ @media (max-width: 400px) { .ov-topbar .dna-badge, .results-topbar .dna-badge, .ov-topbar .shield-badge, .results-topbar .shield-badge, .res-home-pill { width: 34px; height: 34px; } .ov-top-right, .topbar-right { gap: 5px; } } .ov-wrap { max-width: 1340px; margin-inline: auto; padding: 0 clamp(16px, 4vw, 40px) clamp(28px, 5vw, 52px); } /* the hero lockup TUCKS BEHIND the science widget — a negative bottom margin pulls the score card up over the pill's lower edge (z-index below the card), so the lockup reads as emerging from behind the widget for a seamless, layered blend. */ .ov-hero { margin: clamp(20px, 3.5vw, 34px) 0 clamp(-26px, -1.7vw, -14px); position: relative; z-index: 0; } /* =========================================================================== F086 · HERO GREETING — the first thing a returning member sees. A gradient monogram anchors a live "welcome back, " line above the commanding title, so the homepage opens with a personal, premium, on-brand handshake. Tokenized · dual-theme · responsive · reduced-motion safe. =========================================================================== */ .ov-greet { display: flex; align-items: center; gap: clamp(13px, 2vw, 18px); width: fit-content; max-width: 100%; } /* F242 · the hero masthead is PURE BRAND TYPOGRAPHY — never a button. (The old [data-essentials] cursor/focus affordances applied only when the attribute existed; the hero no longer carries it.) */ /* both themes — the "$1B intertwined" lockup: the Shield-J and the iD·NUTRITION wordmark stay two crisp, separate emblems, but a living brand field (::before) breathes behind both while an animated energy filament with a travelling light-current + twin anchor nodes (::after) laces them together at the seam. Purely decorative — the marks themselves never move. (The Essentials popup anchors off document.body, so this stacking context does not affect it.) */ .ov-greet { position: relative; isolation: isolate; } /* F242 · the living brand aura re-centers behind the new stacked masthead — a tri-color halo breathing softly under the wordmark, never off to one side. */ .ov-greet::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 54%; transform: translate(-50%, -50%); width: min(112%, 560px); height: 78%; background: radial-gradient(42% 68% at 24% 52%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 74%), radial-gradient(46% 74% at 50% 46%, color-mix(in srgb, var(--blue-2) 22%, transparent), transparent 76%), radial-gradient(42% 68% at 78% 54%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 74%); filter: blur(14px); opacity: .55; animation: ovClaspBreath 4.6s ease-in-out infinite; } /* the connector filament that laced the old Shield-J to the iD·NUTRITION mark was removed with the Shield-J (the hero now opens with the member's possessive name). */ /* the two shields breathe in sync so they read as magnetically linked emblems */ .ov-title-idn .id-logo, .ov-shieldmenu-svg { animation: ovClaspGlow 4.6s ease-in-out infinite; } @keyframes ovClaspBreath { 0%, 100% { opacity: .48; } 50% { opacity: .72; } } @keyframes ovClaspGlow { 0%, 100% { filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--teal) 32%, transparent)); } 50% { filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--blue-2) 52%, transparent)); } } @keyframes ovClaspFlow { 0% { background-position: -30% 50%, 50% 50%, 50% 50%, 50% 50%; } 100% { background-position: 130% 50%, 50% 50%, 50% 50%, 50% 50%; } } @media (prefers-reduced-motion: reduce) { .ov-greet::before, .ov-greet::after, .ov-title-idn .id-logo, .ov-shieldmenu-svg { animation: none; } .ov-greet::after { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%; } } /* F127 · the "Shield J" — the member's monogram pressed into a gradient shield so the avatar reads as a guardian/protective mark AND doubles as the account menu. A whisper-quiet hamburger glyph hugs the outside edge (nav affordance), morphing to an ✕ once the Essentials hub is open. $1B vibe: gradient border, inner glass, brand aura, spring micro-lift. Dual-theme · reduced-motion safe. */ .ov-shield-clip { --shield: polygon(50% 0%, 100% 14%, 100% 46%, 50% 100%, 0% 46%, 0% 14%); } .ov-shieldmenu { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; cursor: pointer; position: relative; flex: none; display: grid; place-items: center; width: clamp(50px, 9vw, 64px); aspect-ratio: 1; isolation: isolate; transition: transform .32s var(--ease-spring), filter .3s var(--ease-out); } .ov-shieldmenu-shield { /* iD-style shield body (SVG silhouette) */ position: relative; display: grid; place-items: center; width: clamp(48px, 8.6vw, 60px); line-height: 0; } .ov-shieldmenu-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--blue) 60%, transparent)); } .ov-sh-glass { fill: var(--surface-2); } .ov-shieldmenu::after { /* soft brand aura behind the shield */ content: ''; position: absolute; inset: 8px 10px 4px; z-index: -1; border-radius: 46% 46% 50% 50% / 36% 36% 70% 70%; background: var(--grad-brand-3); filter: blur(13px); opacity: .4; transition: opacity .3s var(--ease-out); } .ov-shieldmenu-j { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; line-height: 1; } .ov-shieldmenu-j b { font-family: var(--font-display); font-weight: 800; line-height: 1; font-size: clamp(18px, 3.1vw, 23px); transform: translateY(-4%); background: var(--grad-brand-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ov-shieldmenu-j--icon svg { width: clamp(19px, 3.4vw, 25px); height: auto; } .ov-shieldmenu-j--icon { color: var(--teal); transform: translateY(-4%); } /* dark mode only — the J monogram + hamburger lines read crisp white on the shield */ :root:not([data-theme="light"]) .ov-shieldmenu-j b { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; color: #fff; } :root:not([data-theme="light"]) .ov-shieldmenu-j--icon { color: #fff; } :root:not([data-theme="light"]) .ov-shieldmenu-burger i { background: #fff; } /* dark mode only — the shield RIM around the J takes the "NUTRITION" wordmark color (var(--text-2), same as .ov-title-nutri) instead of the teal→violet gradient fill. Overrides the SVG fill="url(#ovShRim)" presentation attr. LIGHT MODE IS NOT TOUCHED. */ :root:not([data-theme="light"]) .ov-sh-rim { fill: var(--text-2); } /* light mode only — the Shield-J now mirrors the iD brand logo: a solid blue-gradient body (no light glass), a crisp WHITE monogram, and a white-grey rim just like the iD shield. (Dark mode above is untouched.) */ [data-theme="light"] .ov-shieldmenu-svg { overflow: visible; } [data-theme="light"] .ov-sh-glass { fill: transparent; } /* let the blue rim gradient read as the whole body */ [data-theme="light"] .ov-sh-rim { stroke: color-mix(in srgb, #ffffff 68%, #b9c4d4); /* white-grey border, à la .id-logo --id-rim */ stroke-width: 1.3; stroke-linejoin: round; stroke-opacity: .85; } [data-theme="light"] .ov-shieldmenu-j b { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; color: #fff; } [data-theme="light"] .ov-shieldmenu-j--icon { color: #fff; } /* hamburger badge — a small gradient-ringed menu chip notched onto the shield's lower-right, so it unmistakably reads as a nav/menu control */ .ov-shieldmenu-burger { position: absolute; right: -5px; bottom: -3px; z-index: 4; pointer-events: none; display: grid; place-content: center; gap: 3px; width: 21px; height: 21px; padding: 4px; border-radius: 8px; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad-brand-3) border-box; border: 1.5px solid transparent; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--violet) 66%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent); transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out); } .ov-shieldmenu-burger i { display: block; width: 11px; height: 2px; border-radius: 2px; background: var(--grad-brand-3); transition: transform .32s var(--ease-spring), opacity .26s var(--ease-out); } .ov-shieldmenu:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 4px; border-radius: 12px; } @media (hover: hover) { .ov-greet:hover .ov-shieldmenu { transform: translateY(-2px) scale(1.04); } .ov-greet:hover .ov-shieldmenu::after { opacity: .56; } .ov-greet:hover .ov-shieldmenu-burger { transform: scale(1.08); } } /* open state — the hamburger snaps into an ✕ to mirror the live menu */ .ov-greet[aria-expanded="true"] .ov-shieldmenu { transform: translateY(-1px) scale(1.03); } .ov-greet[aria-expanded="true"] .ov-shieldmenu-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); } .ov-greet[aria-expanded="true"] .ov-shieldmenu-burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); } .ov-greet[aria-expanded="true"] .ov-shieldmenu-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .ov-shieldmenu, .ov-shieldmenu-burger i { transition: none; } .ov-shieldmenu:hover, .ov-shieldmenu[aria-expanded="true"] { transform: none; } } .ov-greet-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ov-greet-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(10.5px, 1.9vw, 12px); font-weight: 700; color: var(--muted); white-space: nowrap; } .ov-greet-name { color: var(--text); font-weight: 800; } .ov-greet-pulse { /* live "you're here" heartbeat */ flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent); animation: ovGreetPulse 2.4s var(--ease-out) infinite; } @keyframes ovGreetPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--teal) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 0%, transparent); } } /* ═══ F242 · THE $70B MASTHEAD — a two-line precision lockup ═══════════════ Line 1 · the possessive name as a letterspaced instrument eyebrow (the same typographic voice as the shield's beloved "HEALTH SCORE" label), flanked by gradient hairlines. Line 2 · iD shield + NUTRITION wearing the same liquid-platinum ramp as the score digits. Pure typography — NOT a control. */ .ov-title { font-family: var(--font-display); font-weight: 700; line-height: 1; margin: 7px 0 9px; font-size: clamp(38px, 6.6vw, 62px); color: var(--text); letter-spacing: -0.02em; display: flex; flex-direction: column; align-items: center; gap: .3em; max-width: 100%; min-width: 0; } /* ═══ F243 · THE NAME MASTHEAD — the member's name IS the hero ══════════════ A small letterspaced instrument eyebrow "Your next move," (the same quiet voice as the shield's HEALTH SCORE label people love) sits above the giant name row: [iD shield jewel] MAXIMILIENNE. The name wears the liquid-platinum ramp the HEALTH-SCORE digits wear. .ov-name-fit is measured by fitHeroName() which publishes --name-scale so the name shrinks-to-fit any length on any viewport, always on ONE line, never clipped, never a button. */ .ov-title--name { flex-direction: column; align-items: flex-start; justify-content: center; gap: .06em; width: 100%; margin: 4px 0 8px; line-height: .98; } /* the eyebrow — instrument label, letterspaced, the HEALTH-SCORE voice */ .ov-name-lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 1.5vw, 16px); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); padding-left: .18em; opacity: .92; } .ov-name-jewel { flex: none; display: inline-flex; align-items: center; } .ov-name-jewel .id-logo { width: clamp(38px, 5.4vw, 58px); height: clamp(38px, 5.4vw, 58px); display: block; filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--teal) 40%, transparent)); } /* the fit-wrapper — the JS measures its natural width vs. the available width and scales it down via a CSS var, so it fills the space and never overflows */ .ov-name-fit { display: inline-flex; align-items: center; gap: clamp(6px, 1vw, 14px); min-width: 0; white-space: nowrap; transform: scale(var(--name-scale, 1)); transform-origin: left center; } /* the giant name — the platinum ramp people love on HEALTH SCORE */ .ov-name-word { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 7.4vw, 74px); letter-spacing: -0.028em; line-height: .96; background: linear-gradient(168deg, #ffffff 3%, #eafffb 24%, #c8f6ef 42%, #9fe8ff 64%, #8fb8ff 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 8px 30px var(--teal-glow)); } [data-theme="light"] .ov-name-word { background: linear-gradient(160deg, #071f4d 0%, #0d3fb8 38%, #1652f0 60%, #0b87c9 88%, #0fb6b0 110%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 6px 20px rgba(22, 82, 240, .22)); } /* ── F114 · iD brand lockups ──────────────────────────────────────── The "iD·LIFE" mark in the overview topbar + the "iD·NUTRITION®" wordmark in the hero headline. Both reuse the gradient iD shield glyph (idLogo() → .id-logo, styled near .pl-brand). The hero shield is sized in em so it tracks the headline's responsive clamp. */ .ov-brandid { display: inline-flex; align-items: center; gap: 9px; } .ov-brandid[data-essentials] { cursor: pointer; border-radius: var(--r-sm); transition: opacity .2s; } @media (hover: hover) { .ov-brandid[data-essentials]:hover { opacity: .82; } } .ov-brandid[data-essentials]:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .ov-brandid .id-logo { width: 32px; height: 32px; } .ov-brandid-word { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; font-size: 18px; color: var(--text); } .ov-title-idn { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; } .ov-title-idn .id-logo { width: clamp(48px, 8.6vw, 60px); height: clamp(48px, 8.6vw, 60px); flex: none; margin: 0 -.14em; } /* F127 · the iD·NUTRITION lockup is the Essentials trigger — looks like text, acts like a menu. Sleek + blended at rest; a billion-dollar bloom + tooltip on hover. */ .ov-ess-trig { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 4px 13px 6px; margin: -4px -6px 0; border-radius: 15px 15px 0 0; position: relative; /* a hairline gradient ring sits at rest — whisper-quiet, just enough to read as a tappable chip — and brightens on hover. */ background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--teal) 36%, transparent), color-mix(in srgb, var(--violet) 36%, transparent)) border-box; border: 1px solid transparent; border-bottom: 0; background-clip: padding-box, border-box; box-shadow: 0 1px 0 color-mix(in srgb, #fff 0%, transparent); transition: background .28s var(--ease-out), transform .28s var(--ease-out), box-shadow .3s var(--ease-out); } /* light mode gets its own premium glass pill that MIRRORS the science widget below it — the same radial teal top-right tint, the same surface-2→surface vertical fall, a full teal→blue→violet brand rim, and a grounding shadow that anchors the lockup down toward the card so hero + widget read as one $3B system. */ [data-theme="light"] .ov-ess-trig { background: radial-gradient(130% 95% at 100% 0%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 60%) padding-box, linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--surface-2) 72%, #ffffff)) padding-box, linear-gradient(120deg, var(--teal), var(--blue-2) 52%, var(--violet)) border-box; border: 1.4px solid transparent; border-bottom: 0; background-clip: padding-box, padding-box, border-box; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 3px 12px -8px rgba(28, 54, 116, .28), inset 0 1px 0 rgba(255, 255, 255, .95); } .ov-ess-trig-chev { display: inline-grid; place-items: center; width: .42em; height: .42em; margin-left: .16em; transform: rotate(90deg); opacity: .6; transition: opacity .25s, transform .25s var(--ease-out); } .ov-ess-trig-chev svg { width: 100%; height: 100%; } .ov-ess-trig[aria-expanded="true"] .ov-ess-trig-chev { transform: rotate(90deg) translateX(2px); opacity: .95; } .ov-ess-trig:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; } @media (hover: hover) { .ov-greet:hover .ov-ess-trig { background: linear-gradient(color-mix(in srgb, var(--blue-2) 10%, var(--surface)), color-mix(in srgb, var(--violet) 8%, var(--surface))) padding-box, linear-gradient(120deg, var(--teal), var(--blue-2) 55%, var(--violet)) border-box; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent); } [data-theme="light"] .ov-greet:hover .ov-ess-trig { background: linear-gradient(#ffffff, color-mix(in srgb, var(--blue-2) 6%, #ffffff)) padding-box, linear-gradient(120deg, var(--teal), var(--blue-2) 55%, var(--violet)) border-box; box-shadow: 0 3px 12px -8px rgba(28, 54, 116, .28), inset 0 1px 0 rgba(255,255,255,.95); } .ov-greet:hover .ov-ess-trig-chev { opacity: 1; transform: rotate(90deg) translateX(2px); } } @media (prefers-reduced-motion: reduce) { .ov-ess-trig { transition: opacity .15s linear; } } /* F127 · iDNutrition Essentials — a $1B FLOATING trigger anchored to the SW of the IDNutrition castle. A gradient-ringed iD orb + label, gently bobbing with a live pulse ring; hover/tap drops the gamified Essentials hub. Computer-scale; tucks tighter on phones. The .ov-score-main is the positioning anchor. */ .ov-score-main { position: relative; } .ov-ess-float { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(10px, 5%, 56px); z-index: 6; appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 13px; min-width: 248px; justify-content: flex-start; padding: 10px 26px 10px 10px; border-radius: 999px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-brand-3) border-box; border: 1.5px solid transparent; box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--violet) 70%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--blue) 40%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); } .ov-ess-float-orb { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--grad-brand-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .ov-ess-float-orb .id-logo { width: 24px; height: 24px; } .ov-ess-float-orb .id-logo-tx { fill: #fff; } .ov-ess-float-tx { display: flex; flex-direction: column; line-height: 1; text-align: left; } .ov-ess-float-tx b { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--text); letter-spacing: -.01em; } .ov-ess-float-tx small { font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--violet); margin-top: 3px; } .ov-ess-float-pulse { position: absolute; left: 29px; top: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet) 55%, transparent); animation: essFloatPulse 2.8s var(--ease-out) infinite; } @keyframes essFloatPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet) 50%, transparent); } 70%,100% { box-shadow: 0 0 0 16px transparent; } } @media (prefers-reduced-motion: no-preference) { .ov-ess-float { animation: essFloatBob 4.4s var(--ease-out) infinite; } } @keyframes essFloatBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } } .ov-ess-float:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } .ov-ess-float[aria-expanded="true"] { box-shadow: 0 22px 48px -16px color-mix(in srgb, var(--violet) 80%, transparent); } @media (hover: hover) { .ov-ess-float:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 26px 52px -16px color-mix(in srgb, var(--violet) 82%, transparent); } } @media (prefers-reduced-motion: reduce) { .ov-ess-float-pulse { animation: none; } } @media (max-width: 760px) { .ov-ess-float { bottom: 10px; min-width: 210px; padding: 7px 18px 7px 7px; gap: 10px; } .ov-ess-float-orb { width: 30px; height: 30px; } .ov-ess-float-tx b { font-size: 13px; } .ov-ess-float-tx small { font-size: 9.5px; } } /* F242 · NUTRITION wordmark — wears the same liquid-platinum ramp as the Health-Score digits people love (white heat → mint → arctic blue), with the same slow living shimmer. Light mode takes the deep-ocean blue ramp. */ .ov-title-nutri { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; background: linear-gradient(165deg, #ffffff 4%, #eafffb 26%, #c8f6ef 44%, #9fe8ff 66%, #8fb8ff 92%); background-size: 130% 130%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 6px 26px var(--teal-glow)); animation: lhsNumShimmer 9s var(--ease-lux) infinite; } [data-theme="light"] .ov-title-nutri { background: linear-gradient(160deg, #071f4d 0%, #0d3fb8 38%, #1652f0 60%, #0b87c9 88%, #0fb6b0 110%); background-size: 130% 130%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 5px 18px rgba(22, 82, 240, .24)); } @media (prefers-reduced-motion: reduce) { .ov-title-nutri { animation: none; } } /* (F117 .ov-title-poss / .ov-title-lead retired in F242 — the possessive name now lives on its own eyebrow line, .ov-title-own above.) */ .ov-title-reg { align-self: flex-start; position: relative; top: .18em; font-size: .3em; font-weight: 700; color: var(--blue-2); margin-left: .06em; margin-right: .04em; } /* the "Essentials" word folded into the hero title — reads as a gradient sub-lockup so the headline becomes "JACOB'S iD·NUTRITION® Essentials" and the whole line stays the Essentials menu trigger. */ .ov-title-ess { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; font-size: .56em; margin-left: .28em; align-self: center; background: var(--grad-brand-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ov-sub { font-size: clamp(14px, 2.2vw, 16px); color: var(--text-2); max-width: 660px; line-height: 1.5; } /* light-theme: keep the aura airy and the shield shadow soft */ [data-theme="light"] .ov-shieldmenu-svg { filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--blue) 34%, transparent)); } /* the inner shield body now matches the iD brand logo — the same teal→blue→violet shield gradient (via the rim's #ovShRim def), not a flat light-blue glass */ [data-theme="light"] .ov-sh-glass { fill: url(#ovShRim); } [data-theme="light"] .ov-shieldmenu::after { opacity: .26; } /* graceful entrance — a gentle, staggered rise (off when motion is reduced) */ @media (prefers-reduced-motion: no-preference) { .ov-shieldmenu { animation: ovHeroRise .6s var(--ease-out) both; } .ov-greet-eyebrow { animation: ovHeroRise .6s var(--ease-out) .07s both; } .ov-title { animation: ovHeroRise .6s var(--ease-out) .14s both; } } @keyframes ovHeroRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ov-greet-pulse { animation: none; } } .ov-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: start; } .ov-col { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); min-width: 0; } .ov-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(18px, 2.2vw, 26px); box-shadow: var(--shadow-sm); overflow: hidden; } .ov-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--teal-glow), transparent); opacity: .5; } /* F127 · uplevel the lower intelligence cards (Body systems, Priority moves, What's shaping your score) to the SAME premium glass as the Science / Health- Trend widgets — multi-tint frosted background (teal + violet radials over a surface-2/3 mix), a brighter teal top hairline, and the light-theme blue-tinted shadow + inset highlight. One cohesive system in BOTH themes. */ .ov-card.ov-sysmap, .ov-card.ov-priomoves, .ov-card.ov-scorefx { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 56%), radial-gradient(130% 140% at 0% 100%, color-mix(in srgb, var(--violet) 9%, transparent), transparent 50%), linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, transparent), color-mix(in srgb, var(--surface-3) 92%, transparent)); box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent); } .ov-card.ov-sysmap::before, .ov-card.ov-priomoves::before, .ov-card.ov-scorefx::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 55%, transparent), transparent); opacity: .6; } [data-theme="light"] .ov-card.ov-sysmap, [data-theme="light"] .ov-card.ov-priomoves, [data-theme="light"] .ov-card.ov-scorefx { box-shadow: 0 8px 26px -18px rgba(20, 50, 120, .22), inset 0 1px 0 rgba(255, 255, 255, .6); } .ov-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .ov-card-head h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2.4vw, 19px); color: var(--text); margin: 3px 0 0; } .ov-active { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--teal); background: var(--teal-soft); padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .ov-active .live { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; } /* F168 · RED "Inactive" state — the member has NO active IDN autoorder in Exigo. */ .ov-active.ov-active--off { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } /* =========================================================================== F085 · HERO SCORE CARD — one luminous, cohesive surface. Instead of a flat white box with sub-cards floating on top, the card becomes a soft, brand-tinted panel where the ring, the Precision Engine and the Health Trend feel like facets of a single, easy-on-the-eyes surface. Tokenized · dual-theme. =========================================================================== */ .ov-score-card { background: radial-gradient(78% 116% at 0% 0%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 52%), radial-gradient(94% 134% at 100% 100%, color-mix(in srgb, var(--violet) 8%, transparent), transparent 54%), radial-gradient(130% 92% at 50% -12%, color-mix(in srgb, var(--blue-2) 6%, transparent), transparent 60%), var(--surface); } /* a soft spotlight grounds the score ring so the left cluster feels lit, not floating */ .ov-score-card::after { content: ''; position: absolute; z-index: 0; pointer-events: none; top: 1%; left: -7%; width: 46%; height: 72%; background: radial-gradient(56% 60% at 40% 40%, color-mix(in srgb, var(--blue-2) 13%, transparent), transparent 72%); filter: blur(20px); opacity: .85; } .ov-score-card .ov-score-main { position: relative; z-index: 1; } /* embed the inner panels: soften their edges so they read as part of the one card surface rather than hard boxes stacked on it */ .ov-score-card .ov-engine, .ov-score-card .ov-nextmove, .ov-score-card .ov-trend { border-color: var(--border-soft); } [data-theme="light"] .ov-score-card .ov-engine, [data-theme="light"] .ov-score-card .ov-nextmove, [data-theme="light"] .ov-score-card .ov-trend { box-shadow: 0 8px 26px -18px rgba(20, 50, 120, .22), inset 0 1px 0 rgba(255, 255, 255, .6); } /* Light mode ONLY · the "Science behind your number" (engine) and "Your health trend" cards get a crisp BLACK border with a soft black glow that reads as a perfect, seamless fit against the light background. Scoped so dark mode is untouched. Higher specificity than the block above so it wins the border. */ [data-theme="light"] .ov-score-card .ov-engine, [data-theme="light"] .ov-score-card .ov-trend, [data-theme="light"] .ov-engine, [data-theme="light"] .ov-nextmove, [data-theme="light"] .ov-trend, /* …and the SAME thin black border + glow across every white widget on the Home / Plan / Care / Trends / Reports screens (all .ov-card panels, except the intentionally paint-stripped score-card shell — F109), plus the top-nav status pills + theme toggle. LIGHT MODE ONLY — dark mode is never touched. */ [data-theme="light"] .ov-card:not(.ov-score-card), [data-theme="light"] .shield-badge, [data-theme="light"] .score-chip, [data-theme="light"] .dna-badge, [data-theme="light"] .acct-btn { border-color: rgba(0, 0, 0, .7); box-shadow: 0 4px 16px -10px rgba(0, 0, 0, .3), 0 1px 6px -3px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .6); } /* F109 · "delete" the ugly score-card box — the Health Trend, the Precision Engine and the product showcase now sit FREE on the page instead of inside a tinted, bordered, shadowed panel. We strip the card's paint (the .ov-card surface/border/shadow, the brand-tint gradient, and the spotlight ::after) but KEEP the wrapper's padding + overflow:hidden so the fortress stays neatly clipped, and KEEP the element itself so the mobile tab-paging (which targets .ov-score-card) and the layout/stacking keep working. */ .ov-card.ov-score-card { background: none; border: 0; box-shadow: none; } .ov-card.ov-score-card::after { content: none; } /* F114 · also kill the teal top-hairline (.ov-card::before) — the score card spans the full width (left column + the IDNutrition castle), so its 1px teal line was cutting straight across the fortress. */ .ov-card.ov-score-card::before { content: none; } /* F182 · first-timer / unfinished preview — a real SPACER element gives the score board (the "Your next move" widget + the castle showcase) significant breathing room below the top nav so they don't crash into it. A sized box can't margin-collapse (the reason the earlier margin/padding attempts on the overflow:visible score card produced no space), and it's removed the instant the portal unlocks. Desktop takes the big spacer; phones/tablet a lighter one. */ .ov-pv-spacer { height: clamp(16px, 3vh, 34px); } @media (min-width: 1024px) { .ov-pv-spacer { height: 38px; } } /* F184 · COMPUTER ONLY — for a brand-new / non-taken (sealed preview) user, lift the whole "Your next move" widget ABOVE the .ov-pv-spacer that sits over it, and open real breathing room above the ⚡ + "YOUR NEXT MOVE" eyebrow so future $40B assessment hero elements have a home inside the widget. Preview only; the widget already ships position:relative so z-index takes effect. */ @media (min-width: 1025px) { .ov-score-card--pv .ov-nextmove { z-index: 5; padding-top: 14px; } } /* F182 · MOBILE ONLY — for a first-timer / unfinished preview, lift the castle so it sits DIRECTLY beneath the "Your next move" widget instead of being stranded low (below the locked Health-Trend). We dissolve the left column (display:contents) so the next-move row, the castle showcase and the locked trend all become flex items of .ov-score-main, then re-order them: move (1) → castle (2) → trend (3). Desktop keeps its column layout. */ @media (max-width: 1120px) { .ov-score-card--pv .ov-score-main { flex-direction: column; align-items: stretch; } /* NOTE: needs `.ov-score-main >` here to out-specify the base `.ov-score-main > .ov-score-left { display: flex }` rule (equal 2-class specificity would otherwise lose on source order, leaving the column intact and the castle stranded below the trend). */ .ov-score-card--pv .ov-score-main > .ov-score-left { display: contents; } .ov-score-card--pv .ov-score-left > .ov-score-row { order: 1; } .ov-score-card--pv .ov-showcase { order: 2; width: 100%; padding-top: 6px; } .ov-score-card--pv .ov-lockmini { order: 3; } } /* score ring — a precision-instrument health gauge ($1B trust makeover) */ .ov-score-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 28px); } /* F091 · swap the Precision Engine ("the science behind your number") to the LEFT and keep the score ring + grade ("65 · C+ Good") grouped on the RIGHT — wide view only. Visual-order only (DOM keeps the score first for screen readers); phones keep the score-led stack untouched. */ @media (min-width: 700px) { .ov-score-row > .ov-engine { order: -1; /* F103 · match the engine card to the Your Health Trend width on the computer. Both use calc(50% + 40px): the trend's 50% is of .ov-score-left, the engine's 50% is of .ov-score-row — which stretches to that same width — so they render identical px. Phones keep full width. KEEP IN SYNC with .ov-score-left > .ov-trend. F118 · trimmed 140px → 40px so the widget width stops just short of the castle backdrop (the fortress was nudged ~2in left in F097), no overlap. */ max-width: calc(50% + 40px); } /* F144 · Your Next Move inherits the engine's exact top-left footprint so the computer layout (castle clearance, trend pairing, hero centering) is untouched. KEEP IN SYNC with the engine rule above. */ .ov-score-row > .ov-nextmove { order: -1; max-width: calc(50% + 40px); } } .ov-ring-wrap { position: relative; display: grid; place-items: center; flex: none; isolation: isolate; } .ov-ring-aura { position: absolute; z-index: 0; top: 50%; left: 50%; width: 82%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--blue-2) 32%, transparent), transparent 66%); filter: blur(15px); opacity: .65; animation: ovRingAura 5.5s var(--ease-out) infinite; } @keyframes ovRingAura { 0%,100% { opacity: .48; transform: translate(-50%,-50%) scale(.9); } 50% { opacity: .78; transform: translate(-50%,-50%) scale(1.05); } } .ov-ring { position: relative; z-index: 1; width: clamp(120px, 30vw, 144px); height: auto; display: block; overflow: visible; } .ov-ring-grad { fill: none; stroke: color-mix(in srgb, var(--text) 24%, transparent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 7.6; opacity: .4; } .ov-ring-track { fill: none; stroke: var(--track); stroke-width: 9; } .ov-ring-fill { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-out); filter: drop-shadow(0 2px 7px color-mix(in srgb, var(--blue-2) 38%, transparent)); } /* the live endpoint cap — a glowing "you are precisely here" marker */ .ov-ring-cap { opacity: 0; animation: ovRingCapIn .5s var(--ease-out) 1s forwards; } @keyframes ovRingCapIn { to { opacity: 1; } } .ov-ring-cap-halo { fill: var(--blue-2); opacity: .3; transform-box: fill-box; transform-origin: center; animation: ovRingCapPulse 2.6s var(--ease-out) infinite; } @keyframes ovRingCapPulse { 0% { transform: scale(.6); opacity: .4; } 70%,100% { transform: scale(1.8); opacity: 0; } } .ov-ring-cap-dot { fill: #fff; stroke: var(--blue-2); stroke-width: 2.5; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blue-2) 72%, transparent)); } .ov-ring-cap.b-strong .ov-ring-cap-halo { fill: var(--teal); } .ov-ring-cap.b-strong .ov-ring-cap-dot { stroke: var(--teal); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--teal) 72%, transparent)); } .ov-ring-cap.b-focus .ov-ring-cap-halo { fill: var(--warning); } .ov-ring-cap.b-focus .ov-ring-cap-dot { stroke: var(--warning); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--warning) 72%, transparent)); } .ov-ring-center { position: absolute; z-index: 2; text-align: center; display: flex; flex-direction: column; line-height: 1; } .ov-ring-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 7.6vw, 44px); letter-spacing: -.02em; background: var(--grad-brand-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* dark mode only — trajectory ring number is solid white (ring stroke stays its own color) */ :root:not([data-theme="light"]) .ov-ring-num { background: none; -webkit-text-fill-color: #fff; color: #fff; } .ov-ring-center small { font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 5px; letter-spacing: .12em; text-transform: uppercase; } .ov-score-meta { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .ov-grade-row { display: flex; align-items: center; gap: 11px; } /* premium grade badge — band-gradient chip with inset shine + soft glow */ .ov-grade { position: relative; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: 16px; min-width: 38px; height: 38px; padding: 0 9px; display: grid; place-items: center; border-radius: 11px; flex: none; color: #fff; box-shadow: 0 7px 18px -8px color-mix(in srgb, var(--blue-2) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.36); } .ov-grade::after { content: ''; position: absolute; inset: 0 0 52% 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.24), transparent); } .ov-grade.grade-a { background: linear-gradient(135deg, var(--teal), var(--blue-2)); } .ov-grade.grade-b { background: linear-gradient(135deg, var(--blue-2), var(--violet)); } /* COUNCIL F3 · never grade, always coach — the C chip trades the amber "warning" optics for a calm slate-indigo brand tone. Amber stays reserved for genuinely declining system meters (b-focus), where it earns its urgency. */ .ov-grade.grade-c { background: linear-gradient(135deg, color-mix(in srgb, var(--blue-2) 58%, #64748b), color-mix(in srgb, var(--violet) 46%, #64748b)); box-shadow: 0 7px 18px -8px color-mix(in srgb, var(--blue-2) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.32); } .ov-grade.grade-d { background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 58%, var(--violet))); box-shadow: 0 7px 18px -8px color-mix(in srgb, var(--danger) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.32); } .ov-score-label { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 3vw, 21px); color: var(--text); letter-spacing: -.01em; } .ov-score-when { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .ov-score-when svg { width: 13px; height: 13px; flex: none; opacity: .85; } .ov-delta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; width: fit-content; border: 1px solid transparent; } .ov-delta svg { width: 14px; height: 14px; } .ov-delta.pos { background: var(--teal-soft); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 26%, transparent); } .ov-delta.neg { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 26%, transparent); } .ov-delta.neg svg { transform: scaleY(-1); } .ov-delta.neu { background: var(--fill-2); color: var(--muted); border-color: var(--border-soft); } @media (prefers-reduced-motion: reduce) { .ov-ring-aura, .ov-ring-cap-halo { animation: none; } .ov-ring-cap { opacity: 1; animation: none; } .ov-ring-cap-halo { opacity: .22; } } /* =========================================================================== F083 · PRECISION ENGINE — the interactive "science behind your number" widget that rides to the RIGHT of the grade / delta / date inside the score card. A living proof panel: a pulsing engine core, a gradient count-up stat, and tappable facets that rotate through the real depth behind the plan (safety rules · body systems · formulas weighed · match precision). Auto-rotates, pauses on interaction, keyboard-accessible. Tokenized · dual-theme · responsive. It flex-wraps with the ring + meta: rides on the RIGHT when the row is wide, drops to its own full-width line below the score when it isn't. =========================================================================== */ .ov-engine { --eng-accent: var(--teal); position: relative; flex: 1 1 210px; min-width: min(210px, 100%); align-self: stretch; display: flex; flex-direction: column; gap: 9px; padding: 13px 15px 12px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--eng-accent) 13%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 86%, transparent)); box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent); animation: ovEngIn .6s var(--ease-out) both; } @keyframes ovEngIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .ov-eng-glow { position: absolute; z-index: 0; top: -28%; right: -12%; width: 62%; height: 72%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--eng-accent) 40%, transparent), transparent 70%); filter: blur(22px); opacity: .55; transition: background .5s var(--ease-out); } .ov-eng-eyebrow { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } .ov-eng-eyebrow > svg { width: 13px; height: 13px; flex: none; color: var(--eng-accent); transition: color .4s; } .ov-eng-eyebrow > span:not(.ov-eng-live) { flex: 1; min-width: 0; } .ov-eng-eyebrow > .ov-eng-live { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--eng-accent); animation: ovEngLive 2.4s ease-out infinite; } @keyframes ovEngLive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--eng-accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } } .ov-eng-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; } .ov-eng-core { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; transition: transform .3s var(--ease-out); } .ov-eng-core::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--eng-accent) 28%, transparent), transparent 72%); } .ov-eng-core:focus-visible { outline: 2px solid var(--eng-accent); outline-offset: 3px; border-radius: 50%; } .ov-eng-core:active { transform: scale(.95); } @media (hover: hover) { .ov-eng-core:hover { transform: scale(1.06); } } .ov-eng-core-r { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; } .ov-eng-core-r.r1 { border-color: color-mix(in srgb, var(--eng-accent) 38%, transparent); border-top-color: var(--eng-accent); animation: ovEngSpin 9s linear infinite; } .ov-eng-core-r.r2 { inset: 7px; border-style: dashed; border-color: color-mix(in srgb, var(--eng-accent) 32%, transparent); animation: ovEngSpin 6s linear infinite reverse; } @keyframes ovEngSpin { to { transform: rotate(360deg); } } .ov-eng-core-ic { position: relative; z-index: 1; display: grid; place-items: center; color: var(--eng-accent); } .ov-eng-core-ic svg { width: 19px; height: 19px; } .ov-eng-core-ic.pop { animation: ovEngPop .45s var(--ease-out); } @keyframes ovEngPop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ov-eng-readout { min-width: 0; display: flex; flex-direction: column; } .ov-eng-numrow { display: inline-flex; align-items: baseline; gap: 2px; line-height: 1; } .ov-eng-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 6vw, 33px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: var(--grad-brand-3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* dark mode only — the engine readout number is solid white */ :root:not([data-theme="light"]) .ov-eng-num { background: none; -webkit-text-fill-color: #fff; color: #fff; } .ov-eng-suffix { font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 3vw, 19px); color: var(--eng-accent); font-style: normal; transition: color .4s; } .ov-eng-label { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 3px; } /* F126 · inline iD·NUTRITION lockup inside the DNA facet's label */ .ov-eng-label .id-logo { width: 1.05em; height: 1.05em; vertical-align: -.18em; } .ov-eng-nutri { color: var(--text-2); font-weight: 700; letter-spacing: .01em; } .ov-eng-say { position: relative; z-index: 1; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-2); min-height: 3.1em; } .ov-eng-say.swap { animation: ovEngSay .5s var(--ease-out); } @keyframes ovEngSay { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .ov-eng-dots { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; margin-top: auto; } .ov-eng-dot { appearance: none; -webkit-appearance: none; cursor: pointer; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--fill-1); border: 1px solid var(--border); color: var(--muted); transition: transform .25s var(--ease-out), color .25s, border-color .25s, background .25s, box-shadow .25s; } .ov-eng-dot svg { width: 15px; height: 15px; } .ov-eng-dot.on { color: var(--eng-accent); border-color: color-mix(in srgb, var(--eng-accent) 50%, var(--border)); background: color-mix(in srgb, var(--eng-accent) 13%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eng-accent) 12%, transparent); } .ov-eng-dot:focus-visible { outline: 2px solid var(--eng-accent); outline-offset: 2px; } @media (hover: hover) { .ov-eng-dot:hover { transform: translateY(-2px); color: var(--text); border-color: var(--border-hi); } } /* Purple Methylation upsell CTA \u2014 ONLY rendered when DNA is wired in but the Methylation add-on still needs uploading. On-brand violet, with a slow sheen sweep, hover lift, and a nudging arrow. Opens MyAI to guide them to 100%. */ .ov-eng-meth-note { position: relative; z-index: 1; margin: 11px 0 0; font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--text-2); text-align: center; } .ov-eng-cta { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; position: relative; z-index: 1; margin-top: 4px; width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .005em; background: linear-gradient(125deg, color-mix(in srgb, var(--violet) 88%, #ffffff) 0%, var(--violet) 46%, color-mix(in srgb, var(--violet) 64%, var(--blue-2)) 100%); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--violet) 75%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--violet) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .30); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s var(--ease-out); } .ov-eng-cta svg { width: 15px; height: 15px; flex: none; position: relative; z-index: 1; } .ov-eng-cta span { position: relative; z-index: 1; } .ov-eng-cta svg:last-child { transition: transform .25s var(--ease-out); } .ov-eng-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; z-index: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent); transform: skewX(-18deg); animation: ovEngSheen 4.8s var(--ease-out) infinite; } @keyframes ovEngSheen { 0% { left: -60%; } 40%, 100% { left: 135%; } } .ov-eng-cta:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } .ov-eng-cta:active { transform: scale(.985); } @media (hover: hover) { .ov-eng-cta:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--violet) 80%, transparent), 0 3px 8px -3px color-mix(in srgb, var(--violet) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .34); } .ov-eng-cta:hover svg:last-child { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .ov-engine, .ov-eng-say.swap, .ov-eng-core-ic.pop { animation: none; } .ov-eng-core-r { animation: none !important; } .ov-eng-eyebrow > .ov-eng-live, .ov-eng-cta::after { animation: none; } } /* =========================================================================== F126 · MYAI WORD-CLOUD — the "what you talk to MyAI about" facet inside the Precision Engine. Hidden until its card rotates in (.ov-engine.show-words); then the top themes bloom as frequency-sized, tappable chips. Each opens the exact chat it came from; an admin/coach trust line grounds it. Violet vibe, dual-theme, reduced-motion safe. =========================================== */ .ov-eng-words { position: relative; z-index: 1; display: none; flex-direction: column; gap: 9px; } .ov-engine.show-words .ov-eng-words { display: flex; } .ov-engine.show-words .ov-eng-say { display: none; } /* the cloud replaces the prose line */ .ov-eng-cloud { display: flex; flex-wrap: wrap; gap: 7px; } /* MyAI themes always read as a full two-row word bubble, never a thin single line */ .ov-engine.eng-myai.show-words .ov-eng-cloud { min-height: 64px; align-content: flex-start; } .ov-eng-word { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; /* warmer + bigger the more it's used (--hot 0–100) */ font-size: calc(11px + var(--hot, 50) * .055px); font-weight: 700; letter-spacing: -.01em; color: color-mix(in srgb, var(--eng-accent) calc(40% + var(--hot, 50) * .45%), var(--text-2)); background: color-mix(in srgb, var(--eng-accent) calc(7% + var(--hot, 50) * .1%), var(--surface)); border: 1px solid color-mix(in srgb, var(--eng-accent) calc(20% + var(--hot, 50) * .35%), var(--border)); transform: scale(0); opacity: 0; animation: ovWordIn .42s var(--ease-out) both; transition: transform .2s var(--ease-out), color .2s, background .2s, border-color .2s, box-shadow .2s; } .ov-eng-word:nth-child(1){animation-delay:.04s}.ov-eng-word:nth-child(2){animation-delay:.09s} .ov-eng-word:nth-child(3){animation-delay:.14s}.ov-eng-word:nth-child(4){animation-delay:.19s} .ov-eng-word:nth-child(5){animation-delay:.24s}.ov-eng-word:nth-child(6){animation-delay:.29s} .ov-eng-word:nth-child(7){animation-delay:.34s}.ov-eng-word:nth-child(8){animation-delay:.39s} @keyframes ovWordIn { to { transform: scale(1); opacity: 1; } } .ov-eng-word i { font-style: normal; font-weight: 800; font-size: .72em; padding: 1px 5px; border-radius: 999px; color: var(--eng-accent); background: color-mix(in srgb, var(--eng-accent) 16%, transparent); } .ov-eng-word:focus-visible { outline: 2px solid var(--eng-accent); outline-offset: 2px; } @media (hover: hover) { .ov-eng-word:hover { transform: translateY(-2px) scale(1.04); color: #fff; background: var(--eng-accent); border-color: var(--eng-accent); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--eng-accent) 70%, transparent); } .ov-eng-word:hover i { color: #fff; background: rgba(255,255,255,.22); } } .ov-eng-admin { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--muted); } .ov-eng-admin svg { width: 12px; height: 12px; flex: none; color: var(--eng-accent); opacity: .9; } @media (prefers-reduced-motion: reduce) { .ov-eng-word { animation: none; transform: none; opacity: 1; } } /* F143 · preview portal: every engine chip is SEALED — it wears the same gradient lock jewel as the F139 locked tabs (teal→blue→violet), and clicking opens the cinematic unlock invitation instead of the detail popup. */ .engw-lock { display: inline-grid; place-items: center; flex: none; width: 14px; height: 14px; margin-left: -1px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--teal), var(--blue-2) 55%, var(--violet)); box-shadow: 0 2px 8px color-mix(in srgb, var(--blue-2) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.42); transition: transform .24s var(--ease-spring), box-shadow .24s var(--ease-out); } .engw-lock svg { width: 8px; height: 8px; } @media (hover: hover) { .ov-eng-word.engw-locked:hover .engw-lock { transform: scale(1.15); box-shadow: 0 3px 14px color-mix(in srgb, var(--violet) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.5); } } @media (prefers-reduced-motion: reduce) { .engw-lock { transition: none; } } /* F126 · the "Open my DNA Portal" CTA — only on the DNA facet. Teal/helix vibe, matching the violet meth CTA's premium build (sheen, lift, nudging arrow). */ .ov-eng-portal { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; width: 100%; overflow: hidden; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; padding: 10px 14px; border-radius: 12px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; background: linear-gradient(125deg, color-mix(in srgb, var(--teal) 88%, #fff) 0%, var(--teal) 44%, var(--blue-2) 100%); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--teal) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.30); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s; } .ov-eng-portal[hidden] { display: none; } .ov-eng-portal svg { width: 15px; height: 15px; flex: none; } .ov-eng-portal svg:last-child { transition: transform .25s var(--ease-out); } .ov-eng-portal::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-18deg); animation: ovEngSheen 4.8s var(--ease-out) infinite; } .ov-eng-portal:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; } @media (hover: hover) { .ov-eng-portal:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); } .ov-eng-portal:hover svg:last-child { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .ov-eng-portal::after { animation: none; } } /* ══ THE DNA-PORTAL LAUNCHER — shared premium CTA (detail sheet + tooltip) ══ One card-style launcher: helix chip in a glass tile, two-line label, nudging arrow, teal→blue gradient sheen. Fully tokenized (both themes), fluid width (adapts to any container), touch-sized on mobile, reduced-motion safe. */ .idn-portal-cta { appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; overflow: hidden; position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--teal) 34%, transparent); background: linear-gradient(115deg, color-mix(in srgb, var(--teal) 13%, var(--surface)) 0%, color-mix(in srgb, var(--blue-2) 10%, var(--surface)) 100%); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--teal) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-out), border-color .28s; } .idn-portal-cta[hidden] { display: none; } .idn-portal-cta .ipc-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--teal) 0%, var(--blue-2) 100%); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--teal) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } .idn-portal-cta .ipc-ic svg { width: 19px; height: 19px; } .idn-portal-cta .ipc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .idn-portal-cta .ipc-tx b { font-family: var(--font-display); font-weight: 750; font-size: 13.5px; letter-spacing: -.01em; color: var(--text); line-height: 1.25; } .idn-portal-cta .ipc-tx span { font-size: 11px; font-weight: 550; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .idn-portal-cta .ipc-go { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, transparent); transition: transform .25s var(--ease-out), background .25s; } .idn-portal-cta .ipc-go svg { width: 14px; height: 14px; } .idn-portal-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, color-mix(in srgb, #fff 26%, transparent), transparent); transform: skewX(-18deg); animation: ovEngSheen 5.4s var(--ease-out) infinite; } .idn-portal-cta:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; } @media (hover: hover) { .idn-portal-cta:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 55%, transparent); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--teal) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.18); } .idn-portal-cta:hover .ipc-go { transform: translateX(3px); background: color-mix(in srgb, var(--teal) 24%, transparent); } } .idn-portal-cta:active { transform: translateY(0) scale(.985); } /* placements: sheet head gap + tooltip rhythm above the Ask button */ .lhsp > .idn-portal-cta { margin: 2px 0 4px; } .idn-pop .idn-pop-portal { margin: 13px 0 0; } .idn-pop .idn-pop-portal .ipc-tx span { white-space: normal; } /* narrow popover — never truncate */ .idn-pop .idn-pop-portal + .idn-pop-ask { margin-top: 9px; } @media (max-width: 640px) { .idn-portal-cta { padding: 13px 14px; border-radius: 15px; } /* comfortable thumb target */ .idn-portal-cta .ipc-tx span { white-space: normal; } /* let the subline wrap on phones */ } @media (prefers-reduced-motion: reduce) { .idn-portal-cta::after { animation: none; } .idn-portal-cta, .idn-portal-cta .ipc-go { transition: none; } } /* Methylation report download — the connected panel's launcher, violet-toned */ .idn-portal-cta.ipc-meth { border-color: color-mix(in srgb, var(--violet) 34%, transparent); background: linear-gradient(115deg, color-mix(in srgb, var(--violet) 13%, var(--surface)) 0%, color-mix(in srgb, var(--blue-2) 10%, var(--surface)) 100%); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--violet) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.14); } .idn-portal-cta.ipc-meth .ipc-ic { background: linear-gradient(135deg, var(--violet) 0%, var(--blue-2) 100%); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--violet) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } .idn-portal-cta.ipc-meth .ipc-go { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); } @media (hover: hover) { .idn-portal-cta.ipc-meth:hover { border-color: color-mix(in srgb, var(--violet) 55%, transparent); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--violet) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.18); } .idn-portal-cta.ipc-meth:hover .ipc-go { background: color-mix(in srgb, var(--violet) 24%, transparent); } } /* the word → chat popup body (reuses .idn-modal shell) */ .mw-pop { display: flex; flex-direction: column; gap: 10px; } .mw-line { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: var(--r-md); background: var(--fill-1); border: 1px solid var(--border-soft); } .mw-line.mw-you { align-self: flex-end; max-width: 92%; background: color-mix(in srgb, var(--blue-2) 12%, var(--surface)); } .mw-line.mw-ai { align-self: flex-start; max-width: 92%; background: color-mix(in srgb, var(--violet) 9%, var(--surface)); } .mw-who { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .mw-who svg { width: 12px; height: 12px; } .mw-line p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); } .mw-empty { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); display: flex; gap: 8px; align-items: flex-start; } .mw-empty svg { width: 17px; height: 17px; flex: none; color: var(--violet); margin-top: 2px; } .mw-open { margin-top: 4px; width: 100%; gap: 8px; } .mw-open svg { width: 16px; height: 16px; } /* =========================================================================== F144 · YOUR NEXT MOVE — the homepage's top-left command widget. One hero move (accent icon disc · headline · payoff pill · one gradient CTA) + a quiet "Then" queue. Adaptive per user (first-timer / member / DNA states). Inherits the retired engine's exact top-left footprint (see .ov-score-row rules). Tokenized · dual-theme · reduced-motion-safe. ========================================================================== */ .ov-nextmove { --nm-accent: var(--teal); position: relative; flex: 1 1 210px; min-width: min(210px, 100%); align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--nm-accent) 13%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 86%, transparent)); box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent); animation: ovEngIn .6s var(--ease-out) both; } .ov-nm-glow { position: absolute; z-index: 0; top: -30%; right: -16%; width: 70%; height: 85%; pointer-events: none; background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--nm-accent) 22%, transparent), transparent 68%); filter: blur(30px); opacity: .5; } .ov-nm-eyebrow { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } .ov-nm-eyebrow > svg { width: 13px; height: 13px; flex: none; color: var(--nm-accent); } .ov-nm-eyebrow > span:not(.ov-nm-live) { flex: 1; min-width: 0; } .ov-nm-eyebrow > .ov-nm-live { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--nm-accent); animation: ovEngLive 2.4s ease-out infinite; } .ov-nm-hero { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; } .ov-nm-ic { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--nm-accent); background: color-mix(in srgb, var(--nm-accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--nm-accent) 32%, var(--border)); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--nm-accent) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18); } .ov-nm-ic svg { width: 21px; height: 21px; } .ov-nm-tx { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .ov-nm-tx b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15.5px, 2.4vw, 18px); letter-spacing: -.01em; color: var(--text); line-height: 1.2; } .ov-nm-gain { display: inline-flex; align-items: center; gap: 5px; width: fit-content; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--nm-accent); background: color-mix(in srgb, var(--nm-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nm-accent) 28%, transparent); } .ov-nm-gain svg { width: 11px; height: 11px; flex: none; } .ov-nm-why { position: relative; z-index: 1; margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-2); } /* one gradient CTA — accent-driven, same premium build as the engine CTAs */ .ov-nm-cta { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; position: relative; z-index: 1; width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .005em; background: linear-gradient(125deg, color-mix(in srgb, var(--nm-accent) 88%, #ffffff) 0%, var(--nm-accent) 46%, color-mix(in srgb, var(--nm-accent) 58%, var(--blue-2)) 100%); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--nm-accent) 75%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--nm-accent) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .30); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s var(--ease-out); } .ov-nm-cta svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--ease-out); } .ov-nm-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent); transform: skewX(-18deg); animation: ovEngSheen 4.8s var(--ease-out) infinite; } /* dark mode — make button text black for better contrast (Jacob's ask) */ :root:not([data-theme="light"]) .ov-nm-cta { color: #000; } .ov-nm-cta:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 3px; } .ov-nm-cta:active { transform: scale(.985); } @media (hover: hover) { .ov-nm-cta:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--nm-accent) 80%, transparent), 0 3px 8px -3px color-mix(in srgb, var(--nm-accent) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .34); } .ov-nm-cta:hover svg { transform: translateX(3px); } } /* the quiet "Then" queue — the next two moves as glass rows */ .ov-nm-queue { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin-top: auto; } .ov-nm-then { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .ov-nm-row { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; text-align: left; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: var(--fill-1); border: 1px solid var(--border-soft); color: var(--text-2); transition: transform .25s var(--ease-out), border-color .25s, background .25s, color .25s; } .ov-nm-row-ic { flex: none; display: grid; place-items: center; color: var(--nm-accent); } .ov-nm-row-ic svg { width: 14px; height: 14px; } /* T2.6 · queue rows wrap to two lines — the promise text never clips mid-word */ .ov-nm-row-tx { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; } .ov-nm-row-go { flex: none; color: var(--muted); transform: rotate(-90deg); display: grid; place-items: center; } .ov-nm-row-go svg { width: 13px; height: 13px; } .ov-nm-row:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; } @media (hover: hover) { .ov-nm-row:hover { transform: translateY(-2px); color: var(--text); border-color: color-mix(in srgb, var(--nm-accent) 40%, var(--border)); background: var(--fill-2); } } @media (prefers-reduced-motion: reduce) { .ov-nextmove, .ov-nm-eyebrow > .ov-nm-live, .ov-nm-cta::after { animation: none; } .ov-nm-cta, .ov-nm-row { transition: none; } } /* F186 · COMPUTER SCALE-UP (preview): make the top-left Next Move command card larger and more legible so it fills more hero space and reduces blank air between the top nav and the widget's content. */ @media (min-width: 1025px) { .ov-score-card--pv .ov-nextmove { gap: 13px; padding: 18px 20px 20px; } .ov-score-card--pv .ov-nm-eyebrow { font-size: 11px; letter-spacing: .075em; } .ov-score-card--pv .ov-nm-eyebrow > svg { width: 15px; height: 15px; } .ov-score-card--pv .ov-nm-hero { gap: 16px; } .ov-score-card--pv .ov-nm-ic { width: 56px; height: 56px; border-radius: 17px; } .ov-score-card--pv .ov-nm-ic svg { width: 24px; height: 24px; } .ov-score-card--pv .ov-nm-tx b { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.16; } .ov-score-card--pv .ov-nm-gain { font-size: 12px; padding: 4px 10px; } .ov-score-card--pv .ov-nm-why { font-size: 13px; line-height: 1.6; } .ov-score-card--pv .ov-nm-cta { min-height: 52px; font-size: 14px; border-radius: 14px; } .ov-score-card--pv .ov-nm-then { font-size: 10px; } .ov-score-card--pv .ov-nm-row { min-height: 42px; padding: 10px 12px; border-radius: 12px; } .ov-score-card--pv .ov-nm-row-tx { font-size: 13.5px; } } /* =========================================================================== F401 · MY IDNUTRITION PLAN — the member command card (replaces Your Next Move for real members). Two columns on computer, stacked on tablet/phone. Dual-theme (tokens only), reduced-motion-safe. ========================================================================== */ .ov-plancard { position: relative; flex: 1 1 320px; min-width: min(300px, 100%); align-self: stretch; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); padding: clamp(16px, 2vw, 24px); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 86%, transparent)); box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent); animation: ovEngIn .6s var(--ease-out) both; } /* container-typed so the tier title sizes to ITS OWN COLUMN, not the viewport — a viewport clamp let "Foundational" overflow into the .ov-pc-side rail whenever the card's grid column ran narrow (F414). */ .ov-pc-left { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; } .ov-pc-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; } .ov-pc-tier { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; /* 12.5cqw keeps "Foundational" (the longest single WORD) on one line at any column width. Multi-word titles ("Your Current Subscription") WRAP to the next line instead of running into the side rail — never overflow. */ font-size: clamp(17px, 12.5cqw, 34px); line-height: 1.12; color: var(--text); margin: 0 0 6px; white-space: normal; overflow-wrap: break-word; } /* "Customized" — text only beside the tier name (no pill, no icon), marking a plan the member deliberately tuned (adds or quantity changes). Solid teal on dark, solid blue on light — no gradient. */ .ov-pc-custom { display: inline-block; font-style: italic; font-weight: 650; font-size: 0.695em; line-height: 1; letter-spacing: .005em; margin-left: 4px; white-space: nowrap; color: var(--teal); /* optically centred against the tier cap-height, not the text baseline */ vertical-align: middle; position: relative; top: -0.06em; } [data-theme="light"] .ov-pc-custom { color: var(--blue-2); } .ov-pc-count { font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; } .ov-pc-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: clamp(12px, 2vh, 22px); } .ov-pc-price b { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.01em; color: var(--teal); } .ov-pc-price small { font-size: 11.5px; font-weight: 600; color: var(--muted); } .ov-pc-ctas { display: flex; flex-direction: column; gap: 9px; margin-top: auto; } /* computer: the side rail sets the card's height, so the CTA stack floats in the leftover space — split it evenly above and below (centered, not sunk) */ @media (min-width: 861px) { .ov-pc-ctas { margin-bottom: auto; } } .ov-pc-cta { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; position: relative; overflow: hidden; width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 12px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; background: linear-gradient(115deg, var(--teal) 0%, var(--blue-2) 62%, var(--violet) 100%); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--blue-2) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s var(--ease-out); } .ov-pc-cta svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--ease-out); } .ov-pc-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .ov-pc-cta:active { transform: scale(.985); } @media (hover: hover) { .ov-pc-cta:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); } .ov-pc-cta:hover svg { transform: translateX(3px); } } .ov-pc-btn { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-weight: 650; font-size: 12.5px; background: var(--fill-1); border: 1px solid var(--border); color: var(--text-2); transition: transform .25s var(--ease-out), border-color .25s, background .25s, color .25s; } .ov-pc-btn svg { width: 15px; height: 15px; flex: none; color: var(--muted); } .ov-pc-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } @media (hover: hover) { .ov-pc-btn:hover { transform: translateY(-1px); color: var(--text); border-color: color-mix(in srgb, var(--teal) 40%, var(--border)); background: var(--fill-2); } } /* right rail — subscription + connections, its own quiet panel */ .ov-pc-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(12px, 1.6vw, 18px); border-radius: 14px; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--border-soft); } .ov-pc-subrow { display: flex; align-items: center; } .ov-pc-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; } .ov-pc-pill i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .ov-pc-pill.is-on { color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); } .ov-pc-pill.is-on i { background: var(--teal); box-shadow: 0 0 10px var(--teal); } .ov-pc-pill.is-off { color: var(--muted); background: var(--fill-1); border: 1px solid var(--border-soft); } .ov-pc-pill.is-off i { background: var(--muted); } .ov-pc-sublbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 2px 0 -6px; } .ov-pc-subdate { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -.01em; color: var(--text); } /* connection buttons — teal glass when connected, honest red when not */ .ov-pc-conn { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; width: 100%; min-height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 11px; font-weight: 650; font-size: 12px; text-align: left; transition: transform .25s var(--ease-out), border-color .25s, background .25s, filter .25s; } .ov-pc-conn svg { width: 15px; height: 15px; flex: none; } .ov-pc-conn span { flex: 1; min-width: 0; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ov-pc-conn.is-on { color: var(--teal); background: color-mix(in srgb, var(--teal) 9%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 42%, transparent); } .ov-pc-conn.is-off { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); } .ov-pc-conn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } @media (hover: hover) { .ov-pc-conn:hover { transform: translateY(-1px); filter: brightness(1.05); } } .ov-pc-delay { justify-content: center; text-align: center; font-weight: 700; } .ov-pc-delay span { flex: none; } .ov-pc-group { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .ov-pc-grouplbl { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .ov-pc-grouplbl svg { width: 13px; height: 13px; flex: none; } [data-theme="light"] .ov-pc-side { background: #f8fafe; } /* the plan card claims the engine/next-move footprint on computer */ @media (min-width: 700px) { .ov-score-row > .ov-plancard { order: -1; max-width: calc(50% + 40px); } } /* tablet only — match the .ov-scorefx card's full-column width */ @media (min-width: 641px) and (max-width: 1120px) { .ov-score-card .ov-score-row > .ov-plancard { flex: 1 1 100%; max-width: 100%; } } /* tablet + phone — single column; the sub rail rides below the CTAs */ @media (max-width: 860px) { .ov-plancard { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ov-plancard { animation: none; } .ov-pc-cta, .ov-pc-btn, .ov-pc-conn { transition: none; } } /* =========================================================================== F403 · ONE-TIME COVERAGE — "Order Another Box" CTA + re-order sheet. A one-time purchaser sees a coverage countdown, never delivery language. ========================================================================== */ .ov-pc-reorder { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; position: relative; overflow: hidden; width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border-radius: 12px; border: none; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(120deg, #16dbc8, #2f6bf2 55%, #4338e8); background-size: 170% 170%; box-shadow: 0 10px 26px -12px color-mix(in srgb, #2f6bf2 65%, transparent); transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), background-position .5s var(--ease-out); } .ov-pc-reorder svg { width: 16px; height: 16px; flex: none; } .ov-pc-reorder-glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%); background-size: 240% 100%; background-position: 130% 0; animation: pcre-sheen 4.2s var(--ease-out) infinite; } @keyframes pcre-sheen { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -110% 0; } } @media (hover: hover) { .ov-pc-reorder:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px color-mix(in srgb, #2f6bf2 78%, transparent); background-position: 90% 50%; } } .ov-pc-reorder:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* ── The re-order sheet ── */ .pcre-modal { width: min(520px, 100%); overflow: hidden; } .pcre-hero { position: relative; height: 118px; display: grid; place-items: center; background: radial-gradient(120% 160% at 50% -30%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, #2f6bf2 14%, transparent), transparent 70%); border-bottom: 1px solid var(--border-soft); } .pcre-orb { position: absolute; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 62%); filter: blur(22px); } .pcre-boxico { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; color: #fff; background: linear-gradient(140deg, #16dbc8, #2f6bf2 60%, #4338e8); box-shadow: 0 14px 34px -12px color-mix(in srgb, #2f6bf2 70%, transparent); animation: pcre-float 5.5s ease-in-out infinite; } .pcre-boxico svg { width: 30px; height: 30px; } @keyframes pcre-float { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } } .pcre-ring { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--teal) 38%, transparent); animation: pcre-pulse 3.2s var(--ease-out) infinite; } .pcre-ring2 { animation-delay: 1.6s; } @keyframes pcre-pulse { 0% { transform: scale(.72); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } } .pcre-head { padding-top: 16px; } .pcre-tag { color: var(--teal); } .pcre-sub { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); } .pcre-cartchip { margin: 2px 0 14px; } .pcre-cartchip small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .pcre-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pcre-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: var(--text); background: var(--fill-1); border: 1px solid var(--border-soft); } .pcre-chip-more { color: var(--muted); } .pcre-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pcre-paths[hidden] { display: none; } /* display:grid would defeat [hidden] */ /* step 2 = a fresh question page: choices stack full-width like form answers */ .pcre-paths[data-pcre-step2] { grid-template-columns: 1fr; } /* form-style page advance: current content slides out left, next slides in */ .pcre-slide-out { opacity: 0; transform: translateX(-16px); transition: opacity .18s ease, transform .18s ease; } .pcre-slide-in { animation: pcreSlideIn .3s var(--ease-out) both; } @keyframes pcreSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } .pcre-back { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--fill-1); border: 1px solid var(--border-soft); cursor: pointer; transition: color .2s, border-color .2s; } .pcre-back:hover { color: var(--text); border-color: color-mix(in srgb, var(--teal) 35%, transparent); } .pcre-back svg { width: 13px; height: 13px; transform: rotate(180deg); } /* step 3 — review the exact box, then choose how to pay */ .pcre-review { display: flex; flex-direction: column; gap: 12px; } .pcre-review[hidden] { display: none; } .pcre-plan { border-radius: 16px; padding: 14px 16px 12px; background: var(--fill-1); border: 1px solid var(--border-soft); } .pcre-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .pcre-plan-tier { font-family: var(--font-head); font-weight: 700; font-size: 15px; } .pcre-plan-count { font-size: 12px; color: var(--muted); } .pcre-plan-lines { list-style: none; display: flex; flex-direction: column; max-height: 200px; overflow-y: auto; } .pcre-plan-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-soft); font-size: 13px; } .pcre-plan-name b { font-weight: 600; } .pcre-plan-qty { font-style: normal; margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--teal); } .pcre-plan-price { font-weight: 600; white-space: nowrap; } .pcre-plan-price small, .pcre-plan-total small { font-size: .72em; color: var(--muted); font-weight: 500; } .pcre-plan-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 10px; margin-top: 2px; border-top: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); } .pcre-plan-total b { font-size: 18px; } .pcre-plan-note { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12px; color: var(--muted); } .pcre-plan-note svg { width: 14px; height: 14px; flex: none; color: var(--teal); } .pcre-confirm-paths { display: grid; grid-template-columns: 1fr; gap: 12px; } .pcre-path-paynow { border-color: color-mix(in srgb, var(--teal) 55%, transparent); background: color-mix(in srgb, var(--teal) 9%, var(--fill-1)); } .pcre-path { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; text-align: left; position: relative; display: flex; flex-direction: column; gap: 7px; padding: 18px 16px 15px; border-radius: 16px; background: var(--fill-1); border: 1px solid var(--border-soft); color: var(--text); transition: transform .25s var(--ease-spring), border-color .25s, box-shadow .25s var(--ease-out); } .pcre-path b { font-family: var(--font-display); font-size: 14.5px; line-height: 1.3; letter-spacing: -.01em; } .pcre-path small { font-size: 12px; line-height: 1.5; color: var(--muted); } .pcre-path-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent); } .pcre-path-ico svg { width: 18px; height: 18px; } .pcre-path-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; font-size: 12px; color: var(--teal); } .pcre-path-go svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); } .pcre-path-badge { position: absolute; top: -9px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: 3px 9px; border-radius: 999px; background: linear-gradient(120deg, #16dbc8, #2f6bf2); } .pcre-path-sub { border-color: color-mix(in srgb, var(--teal) 34%, transparent); background: color-mix(in srgb, var(--teal) 5%, var(--fill-1)); } @media (hover: hover) { .pcre-path:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 55%, transparent); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--teal) 45%, transparent); } .pcre-path:hover .pcre-path-go svg { transform: translateX(3px); } } .pcre-path:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .pcre-foot { justify-content: center; } .pcre-foot-note { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); } .pcre-foot-note svg { width: 14px; height: 14px; flex: none; color: var(--teal); } [data-theme="light"] .pcre-path { background: #ffffff; } [data-theme="light"] .pcre-path-sub { background: #f4fdfc; } /* hug the content — never stretch to the phone-sheet 96dvh with dead space */ .idn-modal.pcre-modal { height: auto; max-height: min(88dvh, 720px); } .pcre-modal .idn-modal-body { flex: 0 1 auto; } /* step 3 (review) is tall — give it the whole viewport: the decorative hero collapses and the modal grows so the plan + pay choices sit above the fold */ .idn-modal.pcre-modal.pcre-tall { max-height: min(96dvh, 900px); } .pcre-modal.pcre-tall .pcre-hero { height: 56px; } .pcre-modal.pcre-tall .pcre-boxico svg { width: 30px; height: 30px; } .pcre-modal.pcre-tall .pcre-ring, .pcre-modal.pcre-tall .pcre-ring2 { display: none; } @media (max-width: 640px) { .idn-modal.pcre-modal.pcre-tall { max-height: 96dvh; height: 96dvh; } .pcre-modal.pcre-tall .pcre-hero { display: none; } /* the product list absorbs the squeeze so both pay choices stay in view */ .pcre-plan-lines { max-height: 22dvh; } .pcre-modal.pcre-tall .pcre-path { padding: 13px 14px 11px; gap: 5px; } .pcre-modal.pcre-tall .pcre-path small { font-size: 12px; line-height: 1.4; } .pcre-modal.pcre-tall .pcre-plan { padding: 11px 14px 10px; } .pcre-modal.pcre-tall .pcre-plan-line { padding: 5px 0; } .pcre-modal.pcre-tall .pcre-review { gap: 9px; } .pcre-modal.pcre-tall .pcre-confirm-paths { gap: 9px; } .pcre-modal.pcre-tall .pcre-foot { display: none; } } /* paid-cart quantity marker on regimen product cards */ .ov-reg-qty { font-style: normal; font-size: 11px; font-weight: 800; color: var(--teal); } /* one-time coverage rows — desktop stacks (label wraps under the pill, date block beneath); mobile pulls everything onto shared lines */ .ov-pc-subrow-ot { flex-wrap: wrap; gap: 8px; } .ov-pc-otlbl { flex-basis: 100%; margin: 4px 0 -4px; } .ov-pc-otdate { display: flex; flex-direction: column; gap: 1px; } .ov-pc-otdate .ov-pc-sublbl { margin: 0; } @media (max-width: 640px) { .ov-pc-otlbl { flex-basis: auto; margin: 0; } .ov-pc-otdate { flex-direction: row; align-items: baseline; gap: 7px; } .ov-pc-otdate .ov-pc-subdate { font-size: 17px; } } @media (max-width: 640px) { .pcre-paths { grid-template-columns: 1fr; } .pcre-hero { height: 96px; } } @media (prefers-reduced-motion: reduce) { .ov-pc-reorder-glow, .pcre-boxico, .pcre-ring { animation: none; } .ov-pc-reorder, .pcre-path { transition: none; } } /* =========================================================================== F402 · YOUR TOP 3 HEALTH PRIORITIES — the member's 3 lowest body systems (real engine scores as a percent) + trajectory-age estimates. Replaces the trend micro-chart in the hero's left column. Dual-theme, responsive. ========================================================================== */ .ov-top3 { position: relative; width: 100%; display: flex; flex-direction: column; gap: 10px; padding: clamp(15px, 1.8vw, 22px) clamp(16px, 1.9vw, 24px) clamp(14px, 1.6vw, 20px); border-radius: var(--r-md); text-align: left; overflow: hidden; background: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 46%), radial-gradient(130% 140% at 100% 100%, color-mix(in srgb, var(--violet) 8%, transparent), transparent 48%), linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent); animation: ovTrIn .6s var(--ease-out) both; } .ov-top3::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 55%, transparent), transparent); opacity: .6; } [data-theme="light"] .ov-top3 { border-color: rgba(0, 0, 0, .7); box-shadow: 0 8px 26px -18px rgba(20, 50, 120, .22), inset 0 1px 0 rgba(255, 255, 255, .6); } .ov-tp3-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); } .ov-tp3-head { display: grid; grid-template-columns: minmax(0, 1fr) 92px 118px; align-items: baseline; gap: 10px; } .ov-tp3-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; font-size: clamp(19px, 2.3vw, 26px); line-height: 1.12; color: var(--text); margin: 0; } .ov-tp3-col { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); text-align: center; white-space: nowrap; } .ov-tp3-list { display: flex; flex-direction: column; gap: 9px; } .ov-tp3-row { display: grid; grid-template-columns: 34px 24px minmax(0, 1fr) 92px 118px; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 14px; cursor: pointer; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--border-soft); transition: transform .25s var(--ease-out), border-color .25s, background .25s; animation: ovTrIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); } @media (hover: hover) { .ov-tp3-row:hover { transform: translateY(-2px); background: var(--fill-2); border-color: color-mix(in srgb, var(--teal) 42%, var(--border)); } } .ov-tp3-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .ov-tp3-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--teal); font-size: 14px; font-weight: 700; border: 1.5px solid color-mix(in srgb, var(--teal) 55%, transparent); background: color-mix(in srgb, var(--teal) 8%, transparent); } .ov-tp3-ic { display: grid; place-items: center; color: var(--teal); } .ov-tp3-ic svg { width: 17px; height: 17px; } .ov-tp3-name { min-width: 0; font-size: 14.5px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-tp3-score, .ov-tp3-age { display: flex; align-items: baseline; justify-content: center; gap: 4px; } .ov-tp3-score b, .ov-tp3-age b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.01em; color: var(--text); } .ov-tp3-score small, .ov-tp3-age small { font-size: 11px; font-weight: 600; color: var(--muted); } /* F411 · selected priority with no eligible evidence — stays in its rank, shows honest copy instead of a number. */ .ov-tp3-nodata { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; } .ov-tp3-row.b-nodata { opacity: 0.82; } .ov-tp3-row.b-nodata .ov-tp3-ic { color: var(--muted); } /* worst system's score pops teal (the reference's #1 highlight) */ .ov-tp3-row[style*="--i:0"] .ov-tp3-score b, .ov-tp3-row[style*="--i:0"] .ov-tp3-age b { color: var(--teal); } .ov-tp3-note { margin: 0; font-size: 10.5px; color: var(--muted); } /* the priorities panel claims the trend's footprint on computer */ @media (min-width: 700px) { .ov-score-left > .ov-top3 { width: calc(50% + 40px); align-self: flex-start; } } @media (min-width: 1121px) { .ov-score-card .ov-score-left > .ov-top3 { width: 90%; } } /* F414 · thin desktop — full column */ @media (min-width: 1121px) and (max-width: 1320px) { .ov-score-card .ov-score-left > .ov-top3 { width: 100%; } } /* tablet only — match the .ov-scorefx card's full-column width */ @media (min-width: 641px) and (max-width: 1120px) { .ov-score-card .ov-score-left > .ov-top3 { width: 100%; align-self: stretch; } } /* tablet + phone — tighter columns, headers hug the rows */ @media (max-width: 640px) { /* phone — the title claims its own full-width line (never wraps) and the eyebrow drops beside the Score / Biological Age labels. */ .ov-top3 { display: grid; grid-template-columns: minmax(0, 1fr) 58px 74px; align-items: baseline; column-gap: 7px; row-gap: 10px; } .ov-tp3-head { display: contents; } .ov-tp3-title { grid-column: 1 / -1; order: 1; white-space: nowrap; font-size: clamp(15px, 5.1vw, 19px); } .ov-tp3-eyebrow { grid-column: 1; order: 2; align-self: end; } .ov-tp3-col { order: 2; align-self: end; } .ov-tp3-list, .ov-tp3-note { grid-column: 1 / -1; order: 3; } .ov-tp3-col { white-space: normal; line-height: 1.25; } .ov-tp3-row { grid-template-columns: 28px 20px minmax(0, 1fr) 58px 74px; gap: 7px; padding: 11px 11px; } .ov-tp3-n { width: 28px; height: 28px; font-size: 12.5px; } .ov-tp3-ic svg { width: 15px; height: 15px; } .ov-tp3-name { font-size: 13px; white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ov-tp3-score b, .ov-tp3-age b { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .ov-top3, .ov-tp3-row { animation: none; } .ov-tp3-row { transition: none; } } /* =========================================================================== F406 · PRIORITY PRODUCT RECOMMENDATIONS — 3 real SKUs matched to the member's 3 lowest health domains. StartSmart-inspired hover glow + lift, IDN brand tokens, dual-theme, responsive. ========================================================================== */ .ov-reco-slot { width: 100%; } .ov-reco { position: relative; width: 100%; display: flex; flex-direction: column; gap: 10px; padding: clamp(15px, 1.8vw, 22px) clamp(16px, 1.9vw, 24px) clamp(16px, 1.8vw, 22px); border-radius: var(--r-md); overflow: hidden; background: radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--violet) 8%, transparent), transparent 48%), radial-gradient(130% 140% at 0% 100%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 46%), linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent); animation: ovTrIn .6s var(--ease-out) both; } .ov-reco::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 55%, transparent), transparent); opacity: .6; } [data-theme="light"] .ov-reco { border-color: rgba(0, 0, 0, .7); box-shadow: 0 8px 26px -18px rgba(20, 50, 120, .22), inset 0 1px 0 rgba(255, 255, 255, .6); } .ov-reco-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .ov-reco-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); } .ov-reco-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 15px; border-radius: 16px; overflow: hidden; min-width: 0; cursor: pointer; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--border-soft); transition: transform .22s var(--ease-out), border-color .22s, box-shadow .22s; animation: ovTrIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); will-change: transform; } /* the StartSmart hover glow — twin brand-hued radials fading in over the card */ .ov-reco-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .22s var(--ease-out); background: radial-gradient(800px 320px at 25% 15%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 55%), radial-gradient(700px 280px at 85% 25%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%); } @media (hover: hover) { .ov-reco-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--teal) 40%, var(--border)); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--blue-2) 45%, transparent); } .ov-reco-card:hover .ov-reco-glow { opacity: 1; } .ov-reco-card:hover .ov-reco-img { transform: scale(1.04); } } .ov-reco-badge { position: absolute; top: 11px; right: 11px; z-index: 2; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #fff; padding: 4px 10px; border-radius: 999px; background: linear-gradient(115deg, var(--teal), var(--blue-2)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--blue-2) 70%, transparent); } /* Fixed 4:3 stage — the art is ALWAYS fully contained, never cropped. Flex + explicit child sizing: percentage heights don't resolve reliably inside a