/* bhovix-site/dist/assets/css/site.css Authored in-place per build.py:23. Token vars live in tokens.css. Vanilla CSS — no preprocessor, no Node, strict-CSP friendly. Visual language: Linear-style dark (refined 2026-05-17). */ /* ============================================================ 1. Font face (Inter v4 variable, self-hosted, woff2) ============================================================ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-var.woff2") format("woff2-variations"), url("/assets/fonts/inter-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ 2. STRIPE-LIGHT TOKEN OVERRIDE (2026-06-04 whole-site repaint) This :root block loads AFTER tokens.css (regenerated DARK by build.py) AND after tokens-motion.css, so it is the FINAL word in the cascade and SURVIVES every `python build.py`. Palette source of truth = awesome-design-md Stripe DESIGN.md. Clean white canvas · deep-navy ink (never pure black) · indigo CTA used sparingly · hairline borders · soft layered shadows. ============================================================ */ :root { /* Surfaces — light. */ --bg-primary: #ffffff; /* page background */ --bg-secondary: #ffffff; /* card surface */ --bg-elevated: #ffffff; /* raised card */ --bg-deep: #F6F9FC; /* cool off-white band (footer/newsletter) */ /* Ink hierarchy — dark on light (Stripe navy ink). */ --ink-bright: #0A2540; /* primary text */ --ink-muted: #425466; /* body secondary */ --ink-subtle: #687385; /* helper / labels */ --ink-tertiary: #8792A2; /* faintest */ /* Borders — real hairlines. */ --hairline: #E3E8EE; --hairline-strong: #D5DBE3; /* Accent system → indigo (CTA + links only, sparingly). */ --accent: #635BFF; --accent-soft: #7A73FF; --accent-alt: #B45309; /* caution amber, AA on white */ --error: #E0264D; --success: #0E9F6E; --text-on-dark: var(--ink-bright); --text-on-paper: var(--ink-bright); --text-on-accent:#ffffff; --muted: var(--ink-muted); --paper: #ffffff; /* All headings use Inter (Stripe DESIGN.md = the canonical Sohne sub). */ --font-display: "Inter", system-ui, sans-serif; /* ---- Modular type scale (1.250 major-third, fluid) ------------------- Premium hierarchy needs ≥1.25 contrast between steps. These are the single source of truth; headings + UI text bind to them below. */ --fs-display: clamp(2.2rem, 5.2vw, 3.6rem); --fs-h1: clamp(1.85rem, 4.4vw, 2.9rem); --fs-h2: clamp(1.4rem, 2.9vw, 1.85rem); --fs-h3: clamp(1.12rem, 1.6vw, 1.28rem); --fs-h4: clamp(0.95rem, 1.1vw, 1.02rem); --fs-lead: clamp(1.05rem, 1.7vw, 1.22rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.78rem; --fs-2xs: 0.7rem; /* ---- Spacing scale (8px rhythm, fluid at the large end) -------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: clamp(2.5rem, 5vw, 3.5rem); --space-8: clamp(3.5rem, 8vw, 6rem); /* ---- Radii scale ---------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* ---- Premium elevation (Stripe = soft navy-tinted layered shadows) -- */ --elev-1: 0 1px 2px rgba(50, 50, 93, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04); --elev-2: 0 7px 14px -6px rgba(50, 50, 93, 0.12), 0 3px 6px -2px rgba(0, 0, 0, 0.06); --elev-3: 0 30px 60px -24px rgba(50, 50, 93, 0.18), 0 8px 18px -8px rgba(0, 0, 0, 0.08); /* Semantic surfaces for color-coded results (light tints). */ --tint-good: #E6F6EF; --tint-warn: #FEF6E7; --tint-bad: #FDECEE; } /* ============================================================ 3. Reset + base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-bright); background: var(--bg-primary); /* Stripe DESIGN.md: ss01 globally; tabular figures applied per money cell. */ font-feature-settings: "ss01", "cv01", "cv02"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.5em; color: var(--ink-bright); text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } h2 { font-size: var(--fs-h2); margin-top: 1.8em; letter-spacing: -0.018em; line-height: 1.18; } h3 { font-size: var(--fs-h3); margin-top: 1.2em; letter-spacing: -0.012em; } h4 { font-size: var(--fs-h4); margin-top: 1em; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--accent); text-decoration: none; text-decoration-thickness: 1px; text-decoration-color: rgba(99, 91, 255, 0.35); text-underline-offset: 3px; transition: color 120ms ease, text-decoration-color 120ms ease; } a:hover { color: var(--accent-soft); text-decoration: underline; text-decoration-color: var(--accent-soft); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ul, ol { padding-left: 1.25em; margin: 0 0 1em; } li { margin-bottom: 0.4em; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; background: #EDEBFF; color: var(--accent); padding: 0.12em 0.4em; border-radius: 4px; } blockquote { margin: 1.25em 0; padding: 0.9em 1.1em; border-left: 3px solid var(--accent); background: var(--bg-deep); color: var(--ink-bright); border-radius: 0 8px 8px 0; } hr { border: none; border-top: 1px solid var(--hairline); margin: 2em 0; } ::selection { background: #D7D4FF; color: var(--ink-bright); } /* ============================================================ 4. Layout containers ============================================================ */ .wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding-left: clamp(1rem, 3vw, 1.5rem); padding-right: clamp(1rem, 3vw, 1.5rem); } .section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .section + .section { border-top: 1px solid var(--hairline); } .section-hero { position: relative; padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); background: linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 70%); overflow: hidden; isolation: isolate; } .section-hero h1 { margin-bottom: 0.4em; } /* WebGL canvas behind hero text — fallback to CSS gradient if canvas missing/blocked */ .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.75; pointer-events: none; transition: opacity 600ms ease; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0) 100%); } .hero-canvas + .wrap { position: relative; z-index: 1; } /* Light Stripe hero text — no dark drop shadow, crisp navy ink. */ .hero-headline { text-shadow: none; } .hero-headline .accent { text-shadow: none; } .hero { max-width: 760px; } /* Hero grid — text + 3D coin side by side on desktop, stacked on mobile */ .hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; max-width: 1100px; } @media (min-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 3rem; } } .hero-text { max-width: 600px; } /* ============================================================ Hero 3D stage — rotating CSS coin + orbital rings. Pure CSS 3D, CSP-safe, always-animating without JS. ============================================================ */ .hero-3d { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 360px; max-height: 360px; margin: 0 auto; perspective: 900px; perspective-origin: 50% 50%; pointer-events: none; } .coin { position: absolute; inset: 22%; transform-style: preserve-3d; animation: coin-spin 9s linear infinite, coin-float 5s ease-in-out infinite alternate; filter: drop-shadow(0 24px 40px rgba(34, 211, 238, 0.18)); } .coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.08), inset 0 10px 30px rgba(255, 255, 255, 0.18), inset 0 -20px 40px rgba(0, 0, 0, 0.55); } .coin-front { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(160deg, #22D3EE 0%, #5E6AD2 65%, #1E2533 100%); transform: translateZ(14px); } .coin-back { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(160deg, #FACC15 0%, #F59E0B 60%, #3B2E0F 100%); transform: translateZ(-14px) rotateY(180deg); } .coin-glyph { font-family: var(--font-body); font-weight: 900; font-size: clamp(3rem, 8vw, 5rem); color: rgba(15, 17, 21, 0.85); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4), 0 -2px 4px rgba(0, 0, 0, 0.25); letter-spacing: -0.04em; } .coin-edge { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #0e7490 0%, #5E6AD2 50%, #0e7490 100%); transform: rotateX(90deg) scaleY(0.12); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.4); } /* Orbital rings — gentle rotation around the coin */ .orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(34, 211, 238, 0.2); transform-style: preserve-3d; pointer-events: none; } .orbit-1 { inset: 6%; border-color: rgba(34, 211, 238, 0.28); animation: orbit-tilt-a 16s linear infinite; } .orbit-2 { inset: 0%; border-color: rgba(94, 106, 210, 0.22); animation: orbit-tilt-b 22s linear infinite reverse; } .orbit-3 { inset: -8%; border-color: rgba(250, 204, 21, 0.14); border-style: dashed; animation: orbit-tilt-c 30s linear infinite; } /* Tiny satellite dots */ .orbit-1::before, .orbit-2::before, .orbit-3::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(34, 211, 238, 0.7); transform: translateX(-50%); } .orbit-2::before { background: #5E6AD2; box-shadow: 0 0 12px rgba(94, 106, 210, 0.7); } .orbit-3::before { background: var(--accent-alt); box-shadow: 0 0 12px rgba(250, 204, 21, 0.6); top: auto; bottom: -4px; } @keyframes coin-spin { 0% { transform: rotateY(0deg) rotateX(8deg); } 100% { transform: rotateY(360deg) rotateX(8deg); } } @keyframes coin-float { 0% { translate: 0 -6px; } 100% { translate: 0 6px; } } @keyframes orbit-tilt-a { 0% { transform: rotateX(62deg) rotateY(0deg); } 100% { transform: rotateX(62deg) rotateY(360deg); } } @keyframes orbit-tilt-b { 0% { transform: rotateX(72deg) rotateZ(10deg) rotateY(0deg); } 100% { transform: rotateX(72deg) rotateZ(10deg) rotateY(360deg); } } @keyframes orbit-tilt-c { 0% { transform: rotateX(55deg) rotateZ(-20deg) rotateY(0deg); } 100% { transform: rotateX(55deg) rotateZ(-20deg) rotateY(360deg); } } @media (prefers-reduced-motion: reduce) { .coin, .orbit, .orbit-1, .orbit-2, .orbit-3 { animation: none; } .coin { transform: rotateY(-22deg) rotateX(8deg); } } @media (max-width: 860px) { .hero-3d { max-width: 220px; max-height: 220px; margin-top: 1rem; } } /* ============================================================ Floating coin variant — appears on every non-home hero (tool pages, /about, /ai-audit, /disclaimer, /privacy, /terms, /contact, /thanks). Right-aligned, smaller, transparent enough not to crowd the text. Auto-injected by effects-3d.js. ============================================================ */ .section-hero.has-hero-3d-floating .wrap { position: relative; } .hero-3d-floating { position: absolute; right: clamp(0.5rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); width: clamp(120px, 18vw, 200px); height: clamp(120px, 18vw, 200px); margin: 0; pointer-events: none; z-index: 1; opacity: 0.95; } .hero-3d-floating .coin { inset: 18%; animation: coin-spin 8s linear infinite, coin-float 4s ease-in-out infinite alternate; } .hero-3d-floating .coin-face { border-width: 1.5px; } .hero-3d-floating .coin-glyph { font-size: clamp(2rem, 5vw, 3rem); } .hero-3d-floating .orbit-3 { display: none; } /* less busy on smaller scale */ @media (max-width: 720px) { .hero-3d-floating { position: static; transform: none; margin: 1rem auto 0; display: block; } .section-hero.has-hero-3d-floating .wrap { text-align: left; } } /* Floating-coin padding rule kept dormant — no .has-hero-3d-floating class is applied at runtime now that ensureHero3DEverywhere() is disabled. The rule below would still scope the padding correctly if the floating coin is ever re-enabled per-page. */ @media (min-width: 720px) { .section-hero.has-hero-3d-floating h1, .section-hero.has-hero-3d-floating .hero-sub { padding-right: clamp(140px, 22vw, 240px); } } .hero-headline { font-family: var(--font-body); font-size: var(--fs-display); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 0.42em; color: var(--ink-bright); } .hero-headline .accent { color: var(--accent); } .hero-sub { font-size: var(--fs-lead); color: var(--ink-muted); max-width: 58ch; line-height: 1.55; text-wrap: pretty; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; } .prose { max-width: 70ch; } .prose h2 { margin-top: 2em; } .prose p { color: var(--ink-bright); } .muted { color: var(--ink-muted); } .micro { font-size: 0.82rem; color: var(--ink-subtle); } .accent { color: var(--accent); } /* ============================================================ 5. Header + footer ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--hairline); } .header-wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 0.85rem; padding-bottom: 0.85rem; gap: 1rem; } .brand { display: flex; flex-direction: row; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink-bright); line-height: 1.15; } .brand:hover { color: var(--ink-bright); } .brand-mark-svg { display: block; width: 1.75rem; height: 1.75rem; flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-mark { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; } .brand-tag { font-size: 0.7rem; color: var(--ink-subtle); letter-spacing: 0.02em; font-weight: 500; } .brand--footer .brand-mark-svg { width: 1.5rem; height: 1.5rem; } .site-nav { display: flex; gap: 1.5rem; align-items: center; } .site-nav a { color: var(--ink-muted); text-decoration: none; font-weight: 500; font-size: 0.92rem; padding: 0.4rem 0; border-bottom: 1px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .site-nav a:hover { color: var(--ink-bright); border-bottom-color: var(--accent); } .site-footer { margin-top: 4rem; padding-top: 3rem; background: var(--bg-deep); color: var(--ink-muted); border-top: 1px solid var(--hairline); } .footer-wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; } .footer-col h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-subtle); margin: 0 0 0.85em; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 0.4em; } .footer-col a { color: var(--ink-muted); text-decoration: none; font-size: 0.9rem; } .footer-col a:hover { color: var(--ink-bright); } .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; padding-bottom: 1.5rem; border-top: 1px solid var(--hairline); color: var(--ink-subtle); } /* ============================================================ 6. Buttons — Linear-flat ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; /* Stripe pill: tight padding, full radius. */ padding: 0.62em 1.2em; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; user-select: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 150ms ease, transform 120ms ease; line-height: 1.2; letter-spacing: -0.005em; } .btn { transform: translateZ(0); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--text-on-accent); box-shadow: 0 2px 5px -1px rgba(50, 50, 93, 0.18), 0 1px 3px -1px rgba(0, 0, 0, 0.12); } .btn-primary:hover { background: var(--stripe-indigo-deep, #4F46E5); color: var(--text-on-accent); box-shadow: 0 6px 16px -4px rgba(99, 91, 255, 0.45), 0 2px 6px -2px rgba(50, 50, 93, 0.18); transform: translateY(-1px); } .btn-secondary { background: #ffffff; color: var(--accent); border-color: var(--hairline-strong); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: #F6F5FF; } .btn-affiliate { background: var(--success); color: #ffffff; box-shadow: 0 2px 5px -1px rgba(50, 50, 93, 0.18), 0 1px 3px -1px rgba(0, 0, 0, 0.12); } .btn-affiliate:hover { background: #0B8A60; color: #ffffff; box-shadow: 0 6px 16px -4px rgba(14, 159, 110, 0.45); transform: translateY(-1px); } .btn-block { display: flex; width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* ============================================================ 7. Homepage tool grid ============================================================ */ .section-tools h2 + p { margin-top: -0.25em; color: var(--ink-muted); } .tool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; margin-top: 1.75rem; perspective: 1200px; } .tool-card { display: block; padding: 1.5rem 1.45rem 1.6rem; background: #ffffff; border: 1px solid var(--hairline); border-radius: 12px; text-decoration: none; color: var(--ink-bright); transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; box-shadow: var(--elev-1); } .tool-card:hover { border-color: var(--hairline-strong); color: var(--ink-bright); transform: translateY(-3px); box-shadow: var(--elev-3); } .tool-card h3 { margin: 0.5em 0 0.35em; font-size: 1.1rem; letter-spacing: -0.015em; } .tool-card p { margin: 0; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.55; } .tool-card-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); background: #EDEBFF; padding: 0.2em 0.6em; border-radius: 999px; } /* ============================================================ 8. Tool page — input/output split ============================================================ */ .tool { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 860px) { .tool { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } } .tool-input, .tool-output { position: relative; background: #ffffff; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.35rem, 2.5vw, 1.85rem); box-shadow: var(--elev-2); } .tool-input::before, .tool-output::before { content: none; } .tool h2 { margin-top: 0; margin-bottom: 1.1rem; font-size: var(--fs-2xs); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-subtle); display: flex; align-items: center; gap: 0.55em; } .tool h2::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, var(--accent), var(--accent-soft)); box-shadow: none; flex: none; } /* ============================================================ 9. Form fields ============================================================ */ .field { margin-bottom: 1rem; } .field-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1rem; } @media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; gap: 1rem; } } .field-label { display: block; font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.005em; margin-bottom: 0.45em; color: var(--ink-muted); } .field input[type="number"], .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select, input[type="number"], input[type="text"], input[type="email"], select.input, textarea { width: 100%; font: inherit; font-variant-numeric: tabular-nums; padding: 0.62em 0.85em; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: #ffffff; color: var(--ink-bright); box-shadow: 0 1px 2px rgba(50, 50, 93, 0.06); transition: border-color var(--dur-fast, 140ms) var(--ease-out-expo, ease), box-shadow var(--dur-fast, 140ms) var(--ease-out-expo, ease), background var(--dur-fast, 140ms) var(--ease-out-expo, ease); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-tertiary); } .field input:hover, .field textarea:hover, .field select:hover { border-color: #B7C0CD; } .field input:focus, .field textarea:focus, .field select:focus, input:focus, textarea:focus, select.input:focus { outline: none; border-color: var(--accent); background: #ffffff; box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.20); } /* Custom select — premium chevron, no native UA arrow. data: URI SVG is allowed by img-src 'self' data: in CSP. */ select.input, .field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23687385' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85em center; background-size: 14px 14px; padding-right: 2.4em; cursor: pointer; } select.input:focus, .field select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23635BFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } select.input option, .field select option { background: #ffffff; color: var(--ink-bright); } .field input[aria-invalid="true"], .field input.invalid { border-color: var(--error); box-shadow: 0 0 0 3px rgba(224, 38, 77, 0.15); } .field-error { display: block; min-height: 1.1em; font-size: 0.78rem; color: var(--error); margin-top: 0.3em; } .field-error:empty { min-height: 0; } .field-hint { display: block; font-size: 0.76rem; color: var(--ink-subtle); margin-top: 0.3em; } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); margin-right: 0.4em; } /* Premium range slider — custom track + thumb, accent-filled. Falls back to accent-color where ::-webkit-slider-* unsupported. */ input[type="range"] { width: 100%; accent-color: var(--accent); background: transparent; -webkit-appearance: none; appearance: none; height: 28px; cursor: pointer; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent), var(--accent-soft)) no-repeat, #E3E8EE; background-size: var(--range-fill, 30%) 100%; box-shadow: inset 0 1px 1px rgba(50,50,93,0.10); } input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: #E3E8EE; } input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent), var(--accent-soft)); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #ffffff; border: 2px solid var(--accent); box-shadow: 0 2px 6px -1px rgba(50,50,93,0.30); transition: transform var(--dur-fast,140ms) var(--ease-out-expo,ease), box-shadow var(--dur-fast,140ms) var(--ease-out-expo,ease); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #ffffff; border: 2px solid var(--accent); box-shadow: 0 2px 6px -1px rgba(50,50,93,0.30); } input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); } input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.16); } input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 2px 6px -1px rgba(50,50,93,0.30), 0 0 0 4px rgba(99,91,255,0.25); } input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 2px 6px -1px rgba(50,50,93,0.30), 0 0 0 4px rgba(99,91,255,0.25); } @media (prefers-reduced-motion: reduce) { input[type="range"]::-webkit-slider-thumb { transition: none; } } textarea { min-height: 8em; resize: vertical; } /* Honeypot — visually hidden but reachable to bots */ .honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ 10. Metric grid (calculator output) ============================================================ */ .metric-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1rem; } @media (min-width: 520px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } } .metric { position: relative; padding: 0.95rem 1.1rem; background: var(--bg-deep); border: 1px solid var(--hairline); border-radius: 12px; transition: border-color 180ms ease, box-shadow 180ms ease; box-shadow: var(--elev-1); } @media (prefers-reduced-motion: reduce) { .metric { animation: none; } } .metric:hover { border-color: var(--hairline-strong); box-shadow: var(--elev-2); } .metric-label { font-size: 0.75rem; color: var(--ink-subtle); margin-bottom: 0.35em; font-weight: 500; } .metric-value { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.1rem); letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; line-height: 1.08; text-shadow: none; } .metric-value.secondary { font-size: clamp(1.35rem, 2.4vw, 1.6rem); color: var(--ink-bright); text-shadow: none; } .metric-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-2xs); } .verdict { grid-column: 1 / -1; position: relative; font-family: var(--font-body); font-size: 0.96rem; font-weight: 500; line-height: 1.5; padding: 0.95em 1.15em 0.95em 2.55em; border-radius: var(--radius-md); background: #EDEBFF; border: 1px solid rgba(99, 91, 255, 0.28); color: var(--ink-bright); } .verdict::before { content: ""; position: absolute; left: 1.05em; top: 1.25em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(99,91,255,0.16); } .verdict.warn { background: var(--tint-warn); border-color: rgba(180,83,9,0.28); } .verdict.warn::before { background: var(--accent-alt); box-shadow: 0 0 0 4px rgba(180,83,9,0.16); } .verdict.bad { background: var(--tint-bad); border-color: rgba(224,38,77,0.3); } .verdict.bad::before { background: var(--error); box-shadow: 0 0 0 4px rgba(224,38,77,0.16); } .verdict.good { background: var(--tint-good); border-color: rgba(14,159,110,0.28); } .verdict.good::before { background: var(--success); box-shadow: 0 0 0 4px rgba(14,159,110,0.16); } /* ============================================================ 11. Tables (audit-table, compare-table) ============================================================ */ .audit-table, .compare-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; font-size: 0.94rem; font-variant-numeric: tabular-nums; } .audit-table th, .compare-table th { text-align: left; font-weight: 600; font-size: 0.82rem; color: var(--ink-subtle); padding: 0.65em 0.5em; border-bottom: 1px solid var(--hairline-strong); } .audit-table td, .compare-table td { padding: 0.55em 0.5em; border-bottom: 1px solid var(--hairline); vertical-align: middle; } .audit-table tr:last-child td, .compare-table tr:last-child td { border-bottom: none; } .audit-table .col-cost, .audit-table .col-using, .audit-table .col-x { width: 1%; white-space: nowrap; } .audit-table input[type="number"], .audit-table input[type="text"] { padding: 0.4em 0.5em; font-size: 0.9rem; } .audit-table .row-remove { background: transparent; color: var(--ink-subtle); border: none; cursor: pointer; font-size: 1.1rem; padding: 0.25em 0.5em; line-height: 1; } .audit-table .row-remove:hover { color: var(--error); } .compare-table tfoot td { padding-top: 1em; } .compare-table .yes { color: var(--success); font-weight: 600; } .compare-table .no { color: var(--error); font-weight: 600; } .compare-table .partial { color: var(--accent-alt); font-weight: 600; } .compare-table th[scope="col"] { color: var(--ink-bright); font-size: 0.95rem; } .compare-table td.td-m7 { color: var(--accent-alt); font-weight: 700; } @media (max-width: 540px) { .compare-table { font-size: 0.85rem; } .compare-table th, .compare-table td { padding: 0.4em 0.3em; } } /* ============================================================ 11b. Tool Stack Comparator — premium cost-cliff treatment ============================================================ */ .cmp-controls { display: grid; grid-template-columns: 1fr; gap: clamp(1.1rem, 3vw, 1.75rem); margin-bottom: clamp(1.25rem, 3vw, 1.75rem); padding: clamp(1.15rem, 2.5vw, 1.6rem); } @media (min-width: 720px) { .cmp-controls { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } } .cmp-control-field .field-label { margin-bottom: 0.5em; } .cmp-control-seats { padding-top: 0.1rem; } .cmp-seat-readout { display: inline-block; min-width: 2.4em; margin-left: 0.45em; padding: 0.1em 0.6em; border-radius: var(--radius-pill); background: #EDEBFF; border: 1px solid rgba(99,91,255,0.32); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; letter-spacing: -0.01em; } .cmp-seat-scale { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: var(--fs-2xs); color: var(--ink-tertiary); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* --- The two-card cost cliff --- */ .cost-cliff { display: grid; grid-template-columns: 1fr; gap: clamp(0.9rem, 2.2vw, 1.25rem); } @media (min-width: 600px) { .cost-cliff { grid-template-columns: 1fr 1fr; } } .cliff-card { position: relative; padding: clamp(1.15rem, 2.4vw, 1.5rem); border-radius: var(--radius-lg); background: #ffffff; border: 1px solid var(--hairline); box-shadow: var(--elev-2); isolation: isolate; transition: border-color var(--dur-base,280ms) var(--ease-out-expo,ease), box-shadow var(--dur-base,280ms) var(--ease-out-expo,ease), transform var(--dur-base,280ms) var(--ease-out-expo,ease); } .cliff-card--win { border-color: rgba(14,159,110,0.45); box-shadow: var(--elev-3), 0 0 0 1px rgba(14,159,110,0.18); } .cliff-card--lose { border-color: rgba(224,38,77,0.35); } @media (hover: hover) { .cliff-card:hover { transform: translateY(-2px); box-shadow: var(--elev-3); } } .cliff-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; min-height: 1.6rem; } .cliff-tool { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; color: var(--ink-bright); } .cliff-badge { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.28em 0.7em; border-radius: var(--radius-pill); white-space: nowrap; } .cliff-badge[data-tone="good"] { color: #047857; background: var(--tint-good); border: 1px solid rgba(14,159,110,0.35); } .cliff-rows { display: flex; flex-direction: column; gap: 0.55rem; } .cliff-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .cliff-row-label { font-size: var(--fs-xs); color: var(--ink-subtle); letter-spacing: 0.01em; } .cliff-row-label em { font-style: normal; display: block; font-size: var(--fs-2xs); color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.05em; } .cliff-row-val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -0.02em; } .cliff-m1 { font-size: 1.15rem; font-weight: 600; color: var(--ink-muted); } .cliff-row--big .cliff-m7 { font-size: clamp(2rem, 5.5vw, 2.9rem); font-weight: 700; line-height: 1; color: var(--ink-bright); text-shadow: none; } /* Expensive (lose) card: Month-7 bill in red — the cost cliff. */ .cliff-card--lose .cliff-row--big .cliff-m7 { color: var(--error); text-shadow: none; } /* Cheaper (win) card: Month-7 in green. */ .cliff-card--win .cliff-row--big .cliff-m7 { color: #047857; text-shadow: none; } /* The cost-cliff bar: visualizes how high Month-7 climbs vs the other tool */ .cliff-bar { height: 10px; border-radius: var(--radius-pill); background: #EBEEF3; overflow: hidden; box-shadow: inset 0 1px 1px rgba(50,50,93,0.10); margin: 0.15rem 0 0.35rem; } .cliff-bar-fill { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #F59E0B, var(--error)); box-shadow: none; transition: width var(--dur-slow,520ms) var(--ease-out-expo, cubic-bezier(0.16,1,0.30,1)); } .cliff-card--win .cliff-bar-fill { background: linear-gradient(90deg, #34D399, var(--success)); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .cliff-bar-fill { transition: none; } } .cliff-delta { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; margin-top: 0.15rem; } .cliff-delta[data-tone="warn"] { color: var(--accent-alt); } .cliff-delta[data-tone="bad"] { color: var(--error); } .cliff-delta[data-tone="good"] { color: var(--success); } /* --- Verdict card --- */ .verdict-card { position: relative; margin-top: clamp(1.25rem, 3vw, 1.75rem); padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) calc(clamp(1.25rem, 3vw, 1.75rem) + 4px); border-radius: var(--radius-lg); background: var(--bg-deep); border: 1px solid var(--hairline); box-shadow: var(--elev-1); overflow: hidden; } /* Stripe gradient accent rail on the left edge of the verdict. */ .verdict-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #635BFF, #0E8FD8); } .verdict-card.is-flip { background: #FEF6E7; border-color: rgba(180,83,9,0.24); } .verdict-card.is-flip::before { background: linear-gradient(180deg, #F59E0B, #E0264D); } .verdict-card-eyebrow { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.55rem; } .verdict-card.is-flip .verdict-card-eyebrow { color: var(--accent-alt); } .verdict-card-body { margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-bright); font-weight: 500; text-wrap: pretty; } .cmp-table-details { margin-top: 1.25rem; } .cmp-table-details .compare-table { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .cliff-card:hover { transform: none; } } /* ============================================================ 12. Quiz ============================================================ */ .quiz-progress { height: 4px; background: #E3E8EE; border-radius: 999px; overflow: hidden; margin-bottom: 1.75rem; } .quiz-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width 250ms ease; } .quiz-step { display: none; } .quiz-step.active { display: block; } .quiz-step h2 { margin-top: 0; } .quiz-options { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-top: 1rem; } @media (min-width: 520px) { .quiz-options { grid-template-columns: 1fr 1fr; } } .quiz-options label { display: flex; align-items: center; padding: 0.75em 0.95em; background: #ffffff; border: 1px solid var(--hairline-strong); border-radius: 8px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; font-size: 0.94rem; } .quiz-options label:hover { border-color: var(--accent); box-shadow: var(--elev-1); } .quiz-options input[type="radio"]:checked + span { color: var(--accent); font-weight: 600; } .quiz-options label:has(input[type="radio"]:checked) { border-color: var(--accent); background: #F6F5FF; box-shadow: 0 0 0 1px var(--accent); } .quiz-result-pick { padding: 1.05rem 1.15rem; margin-bottom: 0.65rem; background: #F6F5FF; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; } .quiz-result-pick h3 { margin: 0 0 0.35em; font-size: 1.05rem; } /* ============================================================ 13. Details / how-calc, caveats, CTA rows ============================================================ */ .how-calc { margin-top: 1rem; padding: 0.65em 0.95em; background: var(--bg-deep); border: 1px solid var(--hairline); border-radius: 8px; } .how-calc summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.9rem; } .how-calc summary:hover { color: var(--accent-soft); } .how-calc ul { margin-top: 0.6em; padding-left: 1.25em; color: var(--ink-muted); } .how-calc code { background: #EDEBFF; } .caveats { margin-top: 1.5rem; padding: 1.05em 1.2em 1.1em; background: #FEF6E7; border: 1px solid rgba(180, 83, 9, 0.20); border-radius: var(--radius-md); } .caveats h4 { margin: 0 0 0.55em; color: var(--accent-alt); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 0.5em; } .caveats h4::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / 12px no-repeat, var(--accent-alt); flex: none; } .caveats ul { margin-bottom: 0; color: var(--ink-muted); line-height: 1.55; } .tool-cta { margin: 1.4rem 0 0.5rem; } .tool-cta-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ============================================================ 14. Email capture + contact form ============================================================ */ .email-capture { max-width: 32em; } .email-capture .field { margin-bottom: 0.9rem; } .email-capture .btn { margin-top: 0.4rem; } /* ============================================================ 15. Legal pages ============================================================ */ .legal-toc { padding: 0.9em 1.15em 0.9em 2.3em; background: var(--bg-deep); border: 1px solid var(--hairline); border-radius: 8px; margin: 1em 0 2em; } .legal-toc ol { margin: 0; color: var(--ink-muted); } .legal-toc li { margin-bottom: 0.3em; } .legal-toc li a { color: var(--accent); } /* ============================================================ 16. Disclosure banner ============================================================ */ .disclosure { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--hairline-strong); color: var(--ink-muted); box-shadow: 0 -8px 24px -12px rgba(50,50,93,0.18); } .disclosure[hidden] { display: none; } .disclosure-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.7em; padding-bottom: 0.7em; font-size: 0.82rem; } .disclosure-inner strong { color: var(--ink-bright); font-weight: 600; } .disclosure-dismiss { background: transparent; color: var(--ink-bright); border: none; cursor: pointer; font-size: 1.35rem; line-height: 1; padding: 0.2em 0.6em; border-radius: 4px; } .disclosure-dismiss:hover { color: var(--accent); } /* ============================================================ 17. AD SLOTS — CLS-safe reserved space, lazy-fillable. Hidden by default; ad-loader.js adds `body.ads-on` once a valid publisher_id is loaded from /assets/data/ads-config.json. ============================================================ */ body:not(.ads-on) .ad-container { display: none !important; } body:not(.ads-on) .ad-slot-anchor { display: none !important; } .ad-slot { display: block; margin: 1.5rem auto; position: relative; width: 100%; background: var(--bg-deep); border: 1px dashed var(--hairline-strong); border-radius: 8px; overflow: hidden; min-height: 0; } .ad-slot .adsbygoogle { display: block; width: 100%; height: 100%; } .ad-slot[data-ad-state="empty"]::before { content: "Advertisement"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-tertiary); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; opacity: 0.7; } .ad-label { display: block; text-align: center; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); margin-bottom: 0.35rem; opacity: 0.7; } .ad-container { margin: 1.75rem 0; } .ad-slot-top { max-width: 728px; aspect-ratio: 728 / 90; } .ad-slot-inline { max-width: 336px; aspect-ratio: 336 / 280; } .ad-slot-mid { max-width: 728px; aspect-ratio: 728 / 90; } .ad-slot-sidebar { max-width: 300px; aspect-ratio: 300 / 600; position: sticky; top: 5rem; } @media (max-width: 720px) { .ad-slot-top { aspect-ratio: 320 / 100; } .ad-slot-mid { aspect-ratio: 320 / 100; } .ad-slot-sidebar { display: none; } } @media (min-width: 1180px) { .tool-page main > .section:not(.section-hero) > .wrap.has-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; } } .ad-slot-anchor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; margin: 0; max-width: 100%; height: 60px; aspect-ratio: auto; background: #ffffff; border-top: 1px solid var(--hairline-strong); border-bottom: none; border-left: none; border-right: none; display: none; } body.ads-on .ad-slot-anchor.ad-active { display: block; } .ad-slot-anchor[hidden] { display: none !important; } .ad-anchor-dismiss { position: absolute; top: -28px; right: 8px; width: 28px; height: 28px; background: #ffffff; border: 1px solid var(--hairline-strong); border-radius: 50%; color: var(--ink-bright); box-shadow: var(--elev-1); font-size: 1rem; cursor: pointer; display: grid; place-items: center; } .ad-anchor-dismiss:hover { color: var(--accent); } @media (min-width: 720px) { .ad-slot-anchor { display: none !important; } } .tool-list .ad-slot-feed { grid-column: 1 / -1; max-width: 728px; margin: 0.5rem auto; aspect-ratio: 728 / 200; } @media (max-width: 720px) { .tool-list .ad-slot-feed { aspect-ratio: 320 / 200; } } /* Pre-footer slot — site-wide bottom 728x90 */ .ad-slot-pre-footer { max-width: 728px; aspect-ratio: 728 / 90; } .ad-container-pre-footer { margin: 1.5rem auto 0; } @media (max-width: 720px) { .ad-slot-pre-footer { aspect-ratio: 320 / 100; } } /* In-content fluid native ad — between sections of legal/long-form pages */ .ad-slot-in-content { max-width: 728px; min-height: 120px; aspect-ratio: 728 / 200; } .ad-container-in-content { margin: 2rem auto; } @media (max-width: 720px) { .ad-slot-in-content { aspect-ratio: 320 / 200; } } /* Sidebar partial wrapper (semantic