/* ============================================================================= * VERITY — visual identity layer · "Clarity with substance" * ----------------------------------------------------------------------------- * Warm, grounded, editorial. Deep pine & forest for authority, bronze for * precision, parchment/bone surfaces, charcoal ink for text. No blue. Light is * used sparingly and only in forest / bronze / moss — never neon, never a * generic colour gradient. Everything decorative is aria-hidden by construction * (pseudo-elements / injected [data-verity]) and sits BEHIND content. * * Signal → PRECISION PATH: the recurring motif is a line of clarity — a route * confirmed node by node from question to resolved answer. * * Loaded as a parallel in each page (off the critical path). * ===========================================================================*/ /* ============================ 0 · PRIMITIVES ============================== */ .verity-glow::before, .verity-glow::after { content: ''; position: absolute; z-index: -1; width: var(--glow-size); height: var(--glow-size); border-radius: 50%; pointer-events: none; filter: blur(6px); opacity: var(--glow-alpha); background: radial-gradient(closest-side, color-mix(in srgb, var(--glow-1) 85%, transparent), color-mix(in srgb, var(--glow-1) 28%, transparent) 46%, transparent 72%); } /* Very fine editorial grain — kills gradient banding, adds warmth. */ .verity-grain::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme='dark'].verity-grain::after, [data-theme='dark'] .verity-grain::after { mix-blend-mode: overlay; opacity: 0.06; } /* ===================== 1 · SECTION LIGHT & TRANSITIONS ==================== */ /* Warm tonal rhythm instead of one long white sheet. */ .section[data-theme='paper'] { background: linear-gradient(180deg, color-mix(in srgb, var(--bronze) 4%, var(--parchment)) 0%, var(--parchment) 24%, var(--parchment) 100%); } .section[data-theme='light'] { background: radial-gradient(120% 60% at 50% -12%, var(--tint-forest-soft), transparent 60%), var(--bone); } /* Hairline precision transition between consecutive sections. */ .section + .section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(var(--container), 100% - 2 * var(--gutter)); height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 12%, transparent) 18%, color-mix(in srgb, var(--forest) 40%, transparent) 50%, color-mix(in srgb, var(--ink) 12%, transparent) 82%, transparent); opacity: 0.65; z-index: 0; pointer-events: none; } .section[data-theme='dark'] + .section::before, .section + .section[data-theme='dark']::before { opacity: 0; } /* ============================== 2 · HERO ================================= */ .hero { overflow: clip; } /* Two soft depth layers behind the composition — forest ground + bronze warmth. */ .hero::before, .hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(4px); } .hero::before { /* forest, upper-right near the visual */ width: 46rem; height: 46rem; right: -12rem; top: -16rem; opacity: calc(var(--glow-alpha) + 0.04); background: radial-gradient(closest-side, color-mix(in srgb, var(--forest) 70%, transparent), color-mix(in srgb, var(--forest) 22%, transparent) 46%, transparent 72%); } .hero::after { /* bronze warmth, lower-left, very soft */ width: 38rem; height: 38rem; left: -16rem; bottom: -20rem; opacity: calc(var(--glow-alpha) - 0.02); background: radial-gradient(closest-side, color-mix(in srgb, var(--bronze) 55%, transparent), transparent 70%); } /* Grain over the hero only. */ .hero .container { position: relative; } .hero .container::after { content: ''; position: absolute; inset: -2rem 0; z-index: -1; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay; 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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Editorial emphasis — solid, no colour gradient. */ .hero h1 .serif { color: var(--accent-ink); -webkit-text-fill-color: currentColor; } /* Signal composition — grounded frame + ambient light behind the map. */ .hero__visual { position: relative; } .hero__visual::before { /* concentrated forest bloom */ content: ''; position: absolute; inset: 8% 6%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--forest) 40%, transparent), transparent 70%); opacity: 0.5; filter: blur(10px); } /* Parallax layers set by verity.js (desktop, pointer, non-reduced only). */ .hero[data-verity-parallax] .hero__visual { transition: transform 400ms var(--ease-lum); will-change: transform; } /* =========================== 3 · BUTTONS ================================ */ .btn--primary { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--forest) 92%, #ffffff 8%), var(--forest)); color: var(--on-accent); box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent) inset, 0 6px 16px -8px color-mix(in srgb, var(--pine) 80%, transparent); } .btn--primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--forest) 88%, #ffffff 12%), var(--accent-strong)); box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent) inset, 0 10px 24px -8px color-mix(in srgb, var(--pine) 70%, transparent); } /* Sheen — a single warm sweep on hover, never looping. */ .btn--primary::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, #f6f2ea 32%, transparent), transparent); opacity: 0; } .btn--primary:hover::after { animation: verity-sheen var(--sheen-dur) var(--ease-lum) 1; } @keyframes verity-sheen { 0% { left: -60%; opacity: 0; } 12% { opacity: 0.85; } 100% { left: 130%; opacity: 0; } } .btn--ghost:hover { border-color: color-mix(in srgb, var(--forest) 55%, transparent); box-shadow: 0 0 0 3px var(--tint-forest-soft); } /* Links: animated underline that grows from the start. */ .link-arrow { position: relative; } .link-arrow::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; transform: scaleX(0); transform-origin: left; background: currentColor; opacity: 0.5; transition: transform var(--dur) var(--ease-lum); } .link-arrow:hover::after { transform: scaleX(1); } /* ============================= 4 · CARDS ================================ */ .card, .result-path, .path-card, .article-card .thumb, .plan, .opp-card { transition: transform var(--dur) var(--ease-lum), border-color var(--dur) var(--ease-lum), box-shadow var(--dur) var(--ease-lum); } .card--hover:hover, .result-path:hover, .path-card:hover, .opp-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--forest) 40%, var(--border-strong)); box-shadow: var(--shadow-md), 0 12px 28px -18px color-mix(in srgb, var(--forest) 40%, transparent); } /* Editorial "outcome" blocks: lit top rule. */ .result-block { position: relative; } .result-block::before { content: ''; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: linear-gradient(90deg, var(--forest), transparent); opacity: 0.9; } .result-block .n { display: inline-block; color: var(--accent-ink); font-weight: 600; letter-spacing: 0.02em; } /* Positioning strip → lit index chips. */ .strip__item { position: relative; padding-left: 0; } .strip__item .n { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--tint-forest); color: var(--accent-ink); font-variant-numeric: tabular-nums; } /* Progress + dashboard edges pick up the identity. */ .dash-progress span, .scan__bar span { background: linear-gradient(90deg, var(--forest), var(--forest-lum)); } .dashboard { box-shadow: var(--shadow-lg), 0 40px 80px -50px color-mix(in srgb, var(--forest) 35%, transparent); } /* Opportunity rows: index chip, revealed direction. */ .opp-row .num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); font-variant-numeric: tabular-nums; transition: border-color var(--dur) var(--ease-lum), color var(--dur) var(--ease-lum), background var(--dur) var(--ease-lum); } .opp-row:hover .num, .opp-row[aria-current='true'] .num { border-color: transparent; background: var(--tint-forest); color: var(--accent-ink); } .opp-row .go { transform: translateX(-4px); } .opp-row:hover .go, .opp-row[aria-current='true'] .go { transform: translateX(0); } .opp-preview { background: radial-gradient(120% 80% at 100% 0%, var(--tint-forest-soft), transparent 60%), var(--surface); } /* Two category families for opportunities: forest (default) + bronze (peri). */ .card__icon--peri, .accent-clay { color: var(--bronze); } .tag--peri { color: var(--bronze-ink); border-color: color-mix(in srgb, var(--bronze) 34%, transparent); } /* ========================= 5 · PROCESS / PRECISION PATH ================= */ /* The Precision Path connects the method steps: a lit rail with nodes that come up sequentially as each step reveals — a route confirmed step by step. */ .process { position: relative; } .process::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--forest) 0%, var(--bronze) 60%, transparent 100%); opacity: 0.3; pointer-events: none; } .process__step::before { /* lit node on the rail */ background: var(--forest-lum); box-shadow: 0 0 8px color-mix(in srgb, var(--forest-lum) 60%, transparent); width: 10px; height: 2px; } .process__step .n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-ink); } .process__step.is-in::before { animation: verity-node 600ms var(--ease-lum) both; } @keyframes verity-node { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: none; } } @media (max-width: 760px) { .process::before { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--forest), var(--bronze) 65%, transparent); } } /* ============================ 6 · PRICING =============================== */ .plan { background: linear-gradient(180deg, color-mix(in srgb, var(--forest) 3%, var(--surface)), var(--surface)); } .plan--featured { border-color: color-mix(in srgb, var(--forest) 55%, transparent); background: radial-gradient(120% 70% at 50% -10%, var(--tint-forest), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--forest) 7%, var(--surface)), var(--surface)); box-shadow: 0 20px 46px -30px color-mix(in srgb, var(--forest) 50%, transparent); } .plan--featured::before { /* precision light above the card */ content: ''; position: absolute; inset: -1px -1px auto; height: 3px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(90deg, transparent, var(--forest), var(--bronze), transparent); } .pricing-toggle button[aria-selected='true'] { background: linear-gradient(180deg, var(--forest), var(--accent-strong)); color: var(--on-accent); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--pine) 70%, transparent); } /* ========================== 7 · DIAGNOSTIC ============================= */ .scan { position: relative; } .scan__head { position: relative; } .scan__head::before { /* strategic scan light */ content: ''; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: -3rem; transform: translateX(-50%); width: 32rem; height: 20rem; border-radius: 50%; background: radial-gradient(closest-side, var(--tint-forest), transparent 70%); opacity: 0.8; filter: blur(6px); } .scan__bar { box-shadow: inset 0 0 0 1px var(--hairline); } .scan__bar span { box-shadow: 0 0 8px color-mix(in srgb, var(--forest-lum) 55%, transparent); } .scan-option.is-selected { box-shadow: 0 0 0 3px var(--tint-forest-soft), 0 8px 18px -12px color-mix(in srgb, var(--forest) 45%, transparent); } .scan-option:hover { box-shadow: 0 0 0 3px var(--tint-forest-soft); } .result-path { position: relative; overflow: hidden; } .result-path__rank { color: var(--accent-ink); } /* ============================ 8 · FINAL CTA ============================ */ .cta-banner { background: radial-gradient(90% 120% at 12% 0%, var(--pine-deep-2), var(--pine) 55%), var(--pine); box-shadow: 0 30px 74px -40px color-mix(in srgb, var(--forest) 55%, transparent); } .cta-banner::before { /* forest→moss bloom behind copy */ content: ''; position: absolute; z-index: 0; pointer-events: none; right: -8rem; top: -10rem; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--forest-lum) 60%, transparent), color-mix(in srgb, var(--moss) 30%, transparent) 50%, transparent 72%); opacity: 0.55; filter: blur(8px); animation: verity-drift var(--float-dur) ease-in-out infinite alternate; } .cta-banner::after { /* bronze warmth, lower-left */ content: ''; position: absolute; z-index: 0; pointer-events: none; left: -6rem; bottom: -8rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--bronze) 45%, transparent), transparent 70%); opacity: 0.4; filter: blur(8px); } .cta-banner > * { position: relative; z-index: 1; } @keyframes verity-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-1.5rem, 1rem, 0) scale(1.06); } } /* Precision Path arriving at the CTA (injected by verity.js as [data-verity-thread]). */ .cta-banner [data-verity-thread] { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; } /* ============================= 9 · HEADER ============================== */ .site-header[data-scrolled='true'] { background: var(--surface-glass); border-bottom-color: var(--hairline); box-shadow: 0 1px 0 var(--hairline), 0 10px 30px -24px color-mix(in srgb, var(--ink) 40%, transparent); } .nav-primary a { position: relative; } .nav-primary a::after { content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.15rem; height: 1.5px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--forest), var(--bronze)); transition: transform var(--dur) var(--ease-lum); } .nav-primary a:hover::after { transform: scaleX(1); } .nav-primary a[aria-current='page'] { color: var(--text-strong); } .nav-primary a[aria-current='page']::after { transform: scaleX(1); background: var(--bronze); left: 50%; right: auto; width: 6px; height: 6px; bottom: -0.1rem; border-radius: 50%; transform: translateX(-50%); } .header-cta.btn--primary { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--pine) 70%, transparent); } /* ===================== 10 · IMAGE / EDITORIAL SURFACES ================= */ .image-placeholder { background: radial-gradient(120% 90% at 100% 100%, var(--tint-bronze), transparent 55%), repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--ink) 3%, transparent) 22px 23px), var(--surface-2); } /* ===================== 11 · SECTION REVEAL SYSTEM ===================== */ [data-reveal] { transform: translateY(var(--reveal-shift)); transition: opacity var(--reveal-dur) var(--ease-lum), transform var(--reveal-dur) var(--ease-lum); } /* =========================== 12 · PER-PAGE ACCENT ===================== */ body[data-page='diagnostic'] { --page-accent: var(--forest); } body[data-page='insights'], body[data-page='insight'] { --page-accent: var(--bronze); } body[data-page='contact'] { --page-accent: var(--bronze); } body[data-page='pricing'] { --page-accent: var(--forest); } body[data-page='about'] { --page-accent: var(--moss); } .page-hero { position: relative; } .page-hero::before { content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0; top: -2rem; width: 22rem; height: 16rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--page-accent) 16%, transparent), transparent 70%); opacity: 0.8; filter: blur(6px); } .page-hero .breadcrumb { position: relative; } /* Legal / reading pages stay calm — strip ambient section light. */ body[data-page='terms'] .section, body[data-page='privacy'] .section, body[data-page='cookies'] .section, body[data-page='disclaimer'] .section, body[data-page='refund'] .section, body[data-page='accessibility'] .section, body[data-page='acceptable-use'] .section { background: var(--bg); } body[data-page='terms'] .section + .section::before, body[data-page='privacy'] .section + .section::before, body[data-page='cookies'] .section + .section::before, body[data-page='disclaimer'] .section + .section::before { opacity: 0.3; } /* ============================ 13 · PORTAL ============================= */ /* Function first: colour for status/priority/progress, no decorative glow in dense areas (fields, tables). Identity in header, empty states, cards. */ .portal__brand .live, .portal-badge--live { box-shadow: 0 0 8px color-mix(in srgb, var(--forest-lum) 55%, transparent); } .portal__main .pcard { transition: border-color var(--dur) var(--ease-lum), box-shadow var(--dur) var(--ease-lum); } .portal__main .pcard:hover { border-color: color-mix(in srgb, var(--forest) 30%, var(--border)); } .dash-progress span, .pcard__progress span, [data-progress] { background: linear-gradient(90deg, var(--forest), var(--forest-lum)) !important; } .portal-empty, .empty-state { position: relative; } .portal-empty::before, .empty-state::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 20%; transform: translateX(-50%); width: 24rem; height: 14rem; border-radius: 50%; background: radial-gradient(closest-side, var(--tint-forest), transparent 70%); opacity: 0.7; filter: blur(6px); } /* ============================= 14 · MOBILE ============================ */ /* Keep the beauty, shed the load: one glow per area, no parallax, lighter blur. */ @media (max-width: 720px) { .hero::after { display: none; } .hero::before { width: 30rem; height: 30rem; right: -10rem; top: -12rem; filter: blur(2px); } .hero__visual::before { filter: blur(6px); } .cta-banner::after { display: none; } .cta-banner::before { animation: none; width: 22rem; height: 22rem; filter: blur(5px); } .section[data-theme='light'] { background: var(--bone); } .scan__head::before { width: 20rem; height: 14rem; filter: blur(4px); } .verity-grain::after, .hero .container::after { opacity: 0.03; } } /* ========================= 15 · REDUCED MOTION ======================= */ @media (prefers-reduced-motion: reduce) { .cta-banner::before, .process__step.is-in::before, .btn--primary:hover::after { animation: none !important; } .hero[data-verity-parallax] .hero__visual { transform: none !important; } .link-arrow::after, .nav-primary a::after { transition: none; } }