/* ========================================================================== Clearpath design lab — shared primitives Colorless on purpose: rhythm, scale and motion live here so the two variants read as siblings. Each variant owns its own palette. ========================================================================== */ :root { /* Spacing scale — 4px base, geometric-ish after 24 */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ /* Type scale — fluid, clamped so mobile never gets shouty */ --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem); --fs-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem); --fs-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem); --fs-3xl: clamp(2.25rem, 4vw + 1rem, 3.75rem); /* Line heights */ --lh-tight: 1.06; --lh-snug: 1.25; --lh-normal: 1.55; --lh-relaxed: 1.7; /* Tracking */ --tr-tight: -0.03em; --tr-snug: -0.015em; --tr-wide: 0.02em; --tr-caps: 0.08em; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* Layout */ --container: 1120px; --container-narrow: 720px; --nav-h: 60px; /* Motion — Framer-adjacent defaults (refined in motion.css) */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; } /* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100vh; font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; } p { text-wrap: pretty; } ul, ol { list-style: none; padding: 0; } summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } /* -------------------------------------------------------------------------- Shared structural helpers -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } .section { padding-block: var(--sp-9); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 100; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); transform: translateY(-200%); transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translateY(0); } @media (max-width: 640px) { .section { padding-block: var(--sp-7); } } /* Clearpath app — light + dark via data-theme on */ :root, [data-theme="light"] { color-scheme: light; --bg: #fafafa; --bg-sunken: #f4f4f5; --surface: #ffffff; --ink: #16181c; --ink-2: #55595f; --ink-3: #696e75; --ink-4: #9aa0a7; --line: #e8e8ea; --line-strong: #dcdcdf; --line-hover: #dcdcdf; --accent: #35506b; --accent-soft: #eef2f6; --accent-line: #cfdae4; --clear-ink: #2c6b53; --clear-bg: #f0f6f3; --clear-line: #cde3d8; --review-ink: #855321; --review-bg: #fbf5eb; --review-line: #ecdcc0; --shadow-sm: 0 1px 2px rgba(16, 18, 22, 0.04); --shadow-md: 0 6px 24px -8px rgba(16, 18, 22, 0.12), 0 1px 2px rgba(16, 18, 22, 0.04); --nav-bg: rgba(250, 250, 250, 0.72); --nav-bg-scrolled: rgba(250, 250, 250, 0.88); --nav-border-scrolled: var(--line); --nav-shadow-scrolled: 0 1px 0 rgba(16, 18, 22, 0.02), 0 8px 24px -20px rgba(16, 18, 22, 0.18); --btn-primary-bg: #16181c; --btn-primary-fg: #ffffff; --btn-primary-hover-bg: #16181c; --btn-primary-shadow: var(--shadow-sm); --hero-gradient: radial-gradient(60rem 28rem at 50% -8rem, #ffffff 0%, rgba(255, 255, 255, 0) 70%); --selection-bg: #35506b; --selection-fg: #fff; --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --brand-mark-bg: var(--surface); --eyebrow-dot-glow: none; } [data-theme="dark"] { color-scheme: dark; --bg: #0a0a0b; --bg-sunken: #101012; --surface: #141417; --surface-2: #1a1a1e; --ink: #f1f1f2; --ink-2: #b0b0b6; --ink-3: #9a9aa2; --ink-4: #87878f; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.13); --line-hover: rgba(255, 255, 255, 0.22); --accent: #5fd3ae; --accent-soft: rgba(95, 211, 174, 0.14); --accent-line: rgba(95, 211, 174, 0.28); --clear-ink: #5fd3ae; --clear-bg: rgba(95, 211, 174, 0.12); --clear-line: rgba(95, 211, 174, 0.28); --review-ink: #e2b478; --review-bg: rgba(226, 180, 120, 0.12); --review-line: rgba(226, 180, 120, 0.26); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 24px 60px -24px rgba(0, 0, 0, 0.85); --nav-bg: rgba(10, 10, 11, 0.55); --nav-bg-scrolled: rgba(10, 10, 11, 0.82); --nav-border-scrolled: var(--line); --nav-shadow-scrolled: 0 12px 40px -28px rgba(0, 0, 0, 0.7); --btn-primary-bg: #fafafa; --btn-primary-fg: #0a0a0b; --btn-primary-hover-bg: #ffffff; --btn-primary-shadow: none; --hero-gradient: radial-gradient(60rem 28rem at 50% -8rem, rgba(95, 211, 174, 0.07) 0%, transparent 70%); --selection-bg: rgba(95, 211, 174, 0.28); --selection-fg: #fff; --font-display: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --brand-mark-bg: linear-gradient(180deg, var(--surface-2), var(--surface)); --eyebrow-dot-glow: 0 0 0 3px rgba(95, 211, 174, 0.18); } html { color-scheme: light dark; } body, .nav, .btn--primary, .hero, .report, .cta, .footer, .pill, .checker__field { transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1); } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); letter-spacing: var(--tr-snug); } ::selection { background: var(--selection-bg); color: var(--selection-fg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } .skip-link { background: var(--ink); color: #fff; font-size: var(--fs-sm); } /* -------------------------------------------------------------------------- Buttons & pills -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 44px; padding-inline: var(--sp-5); border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--tr-snug); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } .btn--sm { height: 34px; padding-inline: var(--sp-4); font-size: var(--fs-sm); border-radius: var(--r-sm); } .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--btn-primary-shadow); } .btn--primary:hover { background: var(--btn-primary-hover-bg); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .pill { display: inline-flex; align-items: center; gap: var(--sp-1); height: 34px; padding-inline: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; letter-spacing: var(--tr-wide); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .pill:hover { border-color: var(--ink-4); color: var(--ink); } .pill__chev { width: 12px; height: 12px; color: var(--ink-4); } /* -------------------------------------------------------------------------- Nav -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; } .nav.is-scrolled { background: var(--nav-bg-scrolled); border-bottom-color: var(--nav-border-scrolled); box-shadow: var(--nav-shadow-scrolled); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); height: var(--nav-h); } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; } .brand__mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--brand-mark-bg); color: var(--accent); box-shadow: var(--shadow-sm); } .brand__mark svg { width: 15px; height: 15px; } .brand__word { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tr-tight); } .nav__menu { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: var(--sp-5); } .nav__links { display: flex; align-items: center; gap: var(--sp-5); margin-inline: auto; } .nav__links a { position: relative; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 450; transition: color var(--dur) var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; } .nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); } .nav__toggle-bar { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .is-open .nav__toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); } .is-open .nav__toggle-bar:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { padding-block: var(--sp-10) var(--sp-9); border-bottom: 1px solid var(--line); background: var(--hero-gradient), var(--bg); } .hero__inner { max-width: 780px; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-3) 5px var(--sp-2); border: 1px solid var(--accent-line); border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tr-wide); } .eyebrow__dot { position: relative; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; margin-left: var(--sp-1); } .hero__title { margin-top: var(--sp-5); font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.038em; } .hero__lede { max-width: 33rem; margin: var(--sp-5) auto 0; color: var(--ink-2); font-size: var(--fs-lg); line-height: var(--lh-relaxed); } .checker { display: flex; gap: var(--sp-2); max-width: 32rem; margin: var(--sp-7) auto 0; } .checker__field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; } .checker__icon { position: absolute; left: var(--sp-4); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; transition: color var(--dur) var(--ease); } .checker__input { width: 100%; height: 44px; padding: 0 var(--sp-4) 0 42px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0; text-overflow: ellipsis; box-shadow: var(--shadow-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .checker__input::placeholder { color: var(--ink-3); font-family: var(--font-body); letter-spacing: var(--tr-snug); } .checker__input:hover { border-color: var(--ink-4); } .checker__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53, 80, 107, 0.12); } .checker__field:focus-within .checker__icon { color: var(--accent); } .hero__note { margin-top: var(--sp-4); color: var(--ink-3); font-size: var(--fs-sm); } /* -------------------------------------------------------------------------- Section heads -------------------------------------------------------------------------- */ .section-head { max-width: 34rem; margin-bottom: var(--sp-7); } .section-head__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); } .section-head__sub { margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--fs-md); line-height: var(--lh-relaxed); } /* -------------------------------------------------------------------------- Result report -------------------------------------------------------------------------- */ .report { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; } .report__tabs { display: flex; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3) 0; border-bottom: 1px solid var(--line); background: var(--bg-sunken); } .report__tab { padding: var(--sp-2) var(--sp-4); margin-bottom: -1px; border: 1px solid transparent; border-bottom-color: transparent; border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .report__tab:hover { color: var(--ink); } .report__tab.is-active { border-color: var(--line); border-bottom-color: var(--surface); background: var(--surface); color: var(--ink); } .report__panel { padding: var(--sp-6); } .report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); } .report__id { flex: 1 1 16rem; min-width: 0; } .report__label { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-caps); } .report__addr { display: block; margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); word-break: break-all; } .verdict { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border-radius: var(--r-full); border: 1px solid; font-size: var(--fs-sm); font-weight: 500; flex: none; } .verdict__dot { width: 7px; height: 7px; border-radius: var(--r-full); background: currentColor; } .verdict--clear { color: var(--clear-ink); background: var(--clear-bg); border-color: var(--clear-line); } .verdict--review { color: var(--review-ink); background: var(--review-bg); border-color: var(--review-line); } .signals { display: grid; grid-template-columns: repeat(3, 1fr); } .signal { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-right: 1px solid var(--line); } .signal:first-child { padding-left: 0; } .signal:last-child { border-right: 0; padding-right: 0; } .signal:not(:first-child) { padding-left: var(--sp-5); } .signal__name { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-caps); } .signal__value { display: block; margin-top: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; letter-spacing: var(--tr-snug); } .signal__note { display: block; margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-normal); } .report__foot { padding-top: var(--sp-5); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); } /* -------------------------------------------------------------------------- How it works -------------------------------------------------------------------------- */ .how { border-top: 1px solid var(--line); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); counter-reset: step; } .step { padding-top: var(--sp-5); border-top: 1px solid var(--ink); } .step:nth-child(n + 2) { border-top-color: var(--line-strong); } .step__num { display: block; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tr-wide); } .step__title { margin-top: var(--sp-4); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; letter-spacing: var(--tr-snug); } .step__body { margin-top: var(--sp-2); color: var(--ink-2); line-height: var(--lh-relaxed); } /* -------------------------------------------------------------------------- Stats strip -------------------------------------------------------------------------- */ .signals-strip { border-top: 1px solid var(--line); background: var(--bg-sunken); } .signals-strip__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: var(--sp-8); align-items: center; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .stat { padding-left: var(--sp-4); border-left: 1px solid var(--line-strong); } .stat__label { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-caps); } .stat__value { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; letter-spacing: var(--tr-tight); } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .faq__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-8); } .faq__aside { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); align-self: start; } .qa { border-bottom: 1px solid var(--line); } .qa:first-child { border-top: 1px solid var(--line); } .qa__q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; font-size: var(--fs-md); font-weight: 500; letter-spacing: var(--tr-snug); transition: color var(--dur) var(--ease); } .qa__q:hover { color: var(--accent); } .qa__icon { position: relative; flex: none; width: 14px; height: 14px; color: var(--ink-3); } .qa__icon::before, .qa__icon::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease); } .qa__icon::after { transform: rotate(90deg); } .qa[open] .qa__icon::after { transform: rotate(0deg); } .qa__a, .faq-answer { max-width: 42rem; } /* Native Chromium/Safari accordion motion on the details content box */ @supports (interpolate-size: allow-keywords) { html { interpolate-size: allow-keywords; } } details.qa::details-content, .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 380ms cubic-bezier(0.16, 1, 0.3, 1), content-visibility 380ms allow-discrete; } details.qa[open]::details-content, .faq details[open]::details-content { block-size: auto; } @media (prefers-reduced-motion: reduce) { details.qa::details-content, .faq details::details-content { transition: none; } } .qa__a > p { padding-bottom: var(--sp-5); color: var(--ink-2); line-height: var(--lh-relaxed); opacity: 0; transform: translateY(-6px); transition: opacity 280ms var(--ease) 40ms, transform 320ms var(--ease) 40ms; } .faq-answer p { opacity: 0; transform: translateY(-6px); transition: opacity 280ms var(--ease) 40ms, transform 320ms var(--ease) 40ms; } .qa[open] .qa__a > p, .qa.is-open .qa__a > p, .faq details[open] > .faq-answer p, .faq details.is-open > .faq-answer p { opacity: 1; transform: none; } .qa[open] .qa__icon::after, .qa.is-open .qa__icon::after { transform: rotate(0deg); opacity: 0; } /* -------------------------------------------------------------------------- CTA + footer -------------------------------------------------------------------------- */ .cta { padding-block: var(--sp-9); border-top: 1px solid var(--line); background: var(--surface); } .cta__inner { text-align: center; } .cta__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; letter-spacing: var(--tr-tight); } .cta__sub { margin: var(--sp-3) 0 var(--sp-6); color: var(--ink-2); font-size: var(--fs-md); } .footer { border-top: 1px solid var(--line); padding-block: var(--sp-6); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; } .footer__tag { margin-top: var(--sp-1); color: var(--ink-3); font-size: var(--fs-sm); } .footer__nav { display: flex; gap: var(--sp-5); } .footer__nav a { color: var(--ink-2); font-size: var(--fs-sm); transition: color var(--dur) var(--ease); } .footer__nav a:hover { color: var(--ink); } .footer__legal { color: var(--ink-3); font-size: var(--fs-sm); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 940px) { .signals-strip__inner, .faq__inner { grid-template-columns: 1fr; gap: var(--sp-6); } .faq__aside { position: static; } .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .nav__toggle { display: flex; } .nav__menu { position: absolute; top: var(--nav-h); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: var(--sp-4); padding: var(--sp-5); border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md); } .is-open .nav__menu { display: flex; } .nav__links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; } .nav__links a { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); } .nav__links a::after { display: none; } .nav__actions { justify-content: space-between; } .steps, .signals { grid-template-columns: 1fr; } .signal { padding: var(--sp-4) 0; border-right: 0; border-bottom: 1px solid var(--line); } .signal:not(:first-child) { padding-left: 0; } .signal:last-child { border-bottom: 0; padding-bottom: 0; } .signal__value { margin-top: var(--sp-1); } } @media (max-width: 640px) { .hero { padding-block: var(--sp-8) var(--sp-7); } .hero__inner { text-align: left; } .hero__lede { margin-inline: 0; } .checker { flex-direction: column; margin-inline: 0; } .btn { width: 100%; } .btn--sm { width: auto; } .report__panel { padding: var(--sp-5) var(--sp-4); } .stats { grid-template-columns: 1fr; gap: var(--sp-4); } .footer__inner { flex-direction: column; align-items: flex-start; } } /* Theme toggle */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); } .theme-toggle:hover { border-color: var(--line-hover); color: var(--ink); } .theme-toggle__icon { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity 180ms var(--ease), transform 280ms var(--ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1)); } [data-theme="light"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(-30deg) scale(0.7); } [data-theme="light"] .theme-toggle__icon--moon { opacity: 1; transform: none; } [data-theme="dark"] .theme-toggle__icon--sun { opacity: 1; transform: none; } [data-theme="dark"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(30deg) scale(0.7); } .eyebrow__dot { box-shadow: var(--eyebrow-dot-glow); } [data-theme="dark"] .pill:hover { background: var(--surface-2); } /* ========================================================================== Clearpath — Framer-style motion system Shared by Light Studio + Soft Dark. Variants only supply colors. ========================================================================== */ :root { /* Framer / Motion-ish curves */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-reveal: 720ms; --dur-hero: 900ms; --dist-reveal: 28px; } /* -------------------------------------------------------------------------- Reveal primitives (JS toggles .is-in) -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translate3d(0, var(--dist-reveal), 0); filter: blur(6px); transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo), filter calc(var(--dur-reveal) * 0.85) var(--ease-out-quart); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } [data-reveal="fade"] { transform: none; filter: none; } [data-reveal="up-sm"] { --dist-reveal: 14px; filter: blur(4px); } [data-reveal="scale"] { transform: translate3d(0, 12px, 0) scale(0.985); filter: blur(4px); } [data-reveal="scale"].is-in { transform: translate3d(0, 0, 0) scale(1); } /* Stagger helpers — set delay without inline styles everywhere */ [data-stagger] > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; } [data-stagger] > [data-reveal]:nth-child(2) { --reveal-delay: 70ms; } [data-stagger] > [data-reveal]:nth-child(3) { --reveal-delay: 140ms; } [data-stagger] > [data-reveal]:nth-child(4) { --reveal-delay: 210ms; } [data-stagger] > [data-reveal]:nth-child(5) { --reveal-delay: 280ms; } [data-stagger] > [data-reveal]:nth-child(6) { --reveal-delay: 350ms; } [data-stagger="tight"] > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; } [data-stagger="tight"] > [data-reveal]:nth-child(2) { --reveal-delay: 45ms; } [data-stagger="tight"] > [data-reveal]:nth-child(3) { --reveal-delay: 90ms; } [data-stagger="tight"] > [data-reveal]:nth-child(4) { --reveal-delay: 135ms; } [data-stagger="tight"] > [data-reveal]:nth-child(5) { --reveal-delay: 180ms; } /* Hero load choreography (fires once on first paint) */ .hero [data-hero] { opacity: 0; transform: translate3d(0, 36px, 0); filter: blur(8px); } body.is-ready .hero [data-hero] { animation: hero-rise var(--dur-hero) var(--ease-out-expo) forwards; animation-delay: var(--hero-delay, 0ms); } @keyframes hero-rise { to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } } .hero [data-hero="1"] { --hero-delay: 40ms; } .hero [data-hero="2"] { --hero-delay: 120ms; } .hero [data-hero="3"] { --hero-delay: 200ms; } .hero [data-hero="4"] { --hero-delay: 300ms; } .hero [data-hero="5"] { --hero-delay: 400ms; } /* -------------------------------------------------------------------------- Live indicator pulse (Framer-site “status” feel) -------------------------------------------------------------------------- */ .eyebrow__dot { position: relative; } .eyebrow__dot::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: inherit; opacity: 0.45; animation: live-ping 2.4s var(--ease-soft) infinite; } @keyframes live-ping { 0% { transform: scale(1); opacity: 0.45; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } /* -------------------------------------------------------------------------- Nav — soft scroll state -------------------------------------------------------------------------- */ .nav { transition: background 420ms var(--ease-out-quart), border-color 420ms var(--ease-out-quart), box-shadow 420ms var(--ease-out-quart), backdrop-filter 420ms var(--ease-out-quart), -webkit-backdrop-filter 420ms var(--ease-out-quart); } .nav.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; } /* -------------------------------------------------------------------------- Buttons — Framer press / lift -------------------------------------------------------------------------- */ .btn { transition: background 220ms var(--ease-out-quart), color 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart), box-shadow 280ms var(--ease-out-expo), transform 280ms var(--ease-spring); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.98); transition-duration: 90ms; } .btn--primary:hover { box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.35); } /* -------------------------------------------------------------------------- Report tabs — panel crossfade -------------------------------------------------------------------------- */ .report__panel { transition: opacity 380ms var(--ease-out-expo), transform 380ms var(--ease-out-expo), filter 320ms var(--ease-out-quart); } .report__panel.is-leaving { opacity: 0; transform: translate3d(0, 8px, 0); filter: blur(4px); pointer-events: none; } .report__panel.is-entering { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(6px); } .report__panel.is-entering.is-in { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } .report__panel .signal { transition: opacity 420ms var(--ease-out-expo), transform 420ms var(--ease-out-expo); } .report__panel.is-entering .signal { opacity: 0; transform: translate3d(0, 10px, 0); } .report__panel.is-entering.is-in .signal:nth-child(1) { transition-delay: 60ms; opacity: 1; transform: none; } .report__panel.is-entering.is-in .signal:nth-child(2) { transition-delay: 120ms; opacity: 1; transform: none; } .report__panel.is-entering.is-in .signal:nth-child(3) { transition-delay: 180ms; opacity: 1; transform: none; } .report__panel.is-entering.is-in .signal:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; } .verdict { transition: transform 420ms var(--ease-spring), opacity 320ms var(--ease-out-quart); } .report__panel.is-entering .verdict { transform: scale(0.92); opacity: 0; } .report__panel.is-entering.is-in .verdict { transform: scale(1); opacity: 1; transition-delay: 80ms; } /* -------------------------------------------------------------------------- Checker — focus bloom + submit flash -------------------------------------------------------------------------- */ .checker__field { transition: border-color 240ms var(--ease-out-quart), box-shadow 320ms var(--ease-out-expo), background 240ms var(--ease-out-quart); } .checker.is-busy .btn--primary { pointer-events: none; } .checker.is-busy .btn--primary::after { content: ""; width: 14px; height: 14px; margin-left: 2px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .report.is-flash { animation: report-flash 700ms var(--ease-out-expo); } @keyframes report-flash { 0% { transform: scale(1); } 35% { transform: scale(1.008); } 100% { transform: scale(1); } } /* -------------------------------------------------------------------------- Steps / FAQ / links — presence micro-motion -------------------------------------------------------------------------- */ .step { transition: transform 360ms var(--ease-out-expo), border-color 280ms var(--ease-out-quart); } .step:hover { transform: translateX(4px); } .qa { transition: border-color 240ms var(--ease-out-quart); } /* FAQ open/close height animation lives in each variant stylesheet */ .nav__links a, .footer__nav a { position: relative; } .nav__links a::after, .footer__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 320ms var(--ease-out-expo); opacity: 0.45; } .nav__links a:hover::after, .footer__nav a:hover::after { transform: scaleX(1); } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal].is-in, .hero [data-hero], body.is-ready .hero [data-hero], .report__panel, .report__panel .signal, .verdict, .step, .qa__a, .qa__a > p, .btn { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .eyebrow__dot::after { animation: none !important; display: none; } .qa__a { display: block; } } /* Product bridge: real checker, articles, lang, deep-demo aliases on Clearpath */ :root, [data-theme="light"] { --paper: var(--bg); --paper-2: var(--bg-sunken); --ink-soft: var(--ink-2); --mute: var(--ink-3); --mute-2: var(--ink-4); --elev: var(--surface); --display: var(--font-display); --mono: var(--font-mono); --ease-out: var(--ease); --tron: var(--accent); --tron-dark: var(--accent); --tron-soft: var(--accent-soft); --ok: var(--clear-ink); --ok-soft: var(--clear-bg); --flag: var(--review-ink); --flag-soft: var(--review-bg); } [data-theme="dark"] { --paper: var(--bg); --paper-2: var(--bg-sunken); --ink-soft: var(--ink-2); --mute: var(--ink-3); --mute-2: var(--ink-4); --elev: var(--surface); --tron: var(--accent); --tron-dark: var(--accent); --tron-soft: var(--accent-soft); --ok: var(--clear-ink); --ok-soft: var(--clear-bg); --flag: var(--review-ink); --flag-soft: var(--review-bg); } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); } /* ---- Lang switcher ------------------------------------------------------ */ .lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); } .lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.75rem; padding: 0 0.55rem; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em; color: var(--ink-3); } .lang a:hover { color: var(--ink); } .lang a[aria-current="page"] { background: var(--btn-primary-bg); color: var(--btn-primary-fg); } /* ---- Checker product wiring --------------------------------------------- */ .checker { position: relative; } .checker__row { display: flex; gap: var(--sp-3); width: 100%; align-items: stretch; } .checker__field { position: relative; flex: 1; display: flex; align-items: center; } .checker__paste { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: var(--r-sm); border: 0; background: rgba(255, 255, 255, 0.06); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; } .checker__paste:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); } .checker__input { padding-right: 5.5rem; } .checker__scan { position: absolute; left: 2.75rem; right: 5.5rem; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transform: scaleX(0.3); pointer-events: none; } .checker__scan.on { opacity: 1; animation: cp-scan 1.1s var(--ease) infinite; } @keyframes cp-scan { 0% { transform: scaleX(0.2); opacity: 0.2; } 50% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0.2); opacity: 0.2; } } .checker__field.is-bad { border-color: var(--review-line); box-shadow: 0 0 0 3px var(--review-bg); } .checker__hint { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-3); } .checker__hint.ok { color: var(--clear-ink); } .checker__hint.bad { color: var(--review-ink); } .hero__note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-3); } /* ---- Live results ------------------------------------------------------- */ #results { display: none; padding-block: 0 var(--sp-9); } #results.on, body.has-results #results { display: block; } .live-report { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; } .live-report__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line); } .live-report__label { display: block; font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-2); } .live-report__addr { font-family: var(--font-mono); font-size: var(--fs-sm); word-break: break-all; color: var(--ink); } .verdict { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border-radius: var(--r-full); border: 1px solid var(--clear-line); background: var(--clear-bg); color: var(--clear-ink); font-size: var(--fs-sm); font-weight: 600; } .verdict__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; } #verdictBlock.is-listed .verdict, .verdict--listed { border-color: var(--review-line); background: var(--review-bg); color: var(--review-ink); } #verdictBlock.is-clear .verdict, .verdict--clear { border-color: var(--clear-line); background: var(--clear-bg); color: var(--clear-ink); } .live-report__body { padding: var(--sp-5); display: grid; gap: var(--sp-5); } .live-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .live-facts div { min-width: 0; } .live-facts dt { font-size: var(--fs-xs); color: var(--ink-4); letter-spacing: var(--tr-caps); text-transform: uppercase; margin-bottom: var(--sp-1); } .live-facts dd { font-size: var(--fs-md); font-weight: 500; color: var(--ink); } .live-note { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed); } .live-entry { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); } .live-actions { display: flex; gap: var(--sp-3); } .btn-ghost { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border-radius: var(--r-md); border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; } .btn-ghost:hover { border-color: var(--line-strong); color: var(--ink); } .live-context { margin-top: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-sunken); padding: var(--sp-5); } .live-context__head { font-size: var(--fs-md); font-weight: 500; margin-bottom: var(--sp-4); } .live-context__head span { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); } .tool-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); } .tool-glance > div { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .tool-glance span { display: block; font-size: var(--fs-xs); color: var(--ink-4); letter-spacing: var(--tr-caps); text-transform: uppercase; margin-bottom: var(--sp-2); } .tool-glance strong { display: block; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; } .tool-glance em { display: block; margin-top: var(--sp-1); font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); } .live-readout-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); } .live-meter { margin-top: var(--sp-5); } .live-meter__head { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--sp-2); } .live-meter__bar { height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; } .live-meter__bar > i { display: block; height: 100%; width: 0%; border-radius: inherit; background: var(--accent); transition: width var(--dur-slow) var(--ease); } .live-signals { width: 100%; margin-top: var(--sp-5); border-collapse: collapse; font-size: var(--fs-sm); } .live-signals th, .live-signals td { text-align: left; padding: 0.75rem 0; border-bottom: 1px solid var(--line); vertical-align: top; } .live-signals th { font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); font-weight: 500; } .tag { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; } .tag-ok { background: var(--clear-bg); color: var(--clear-ink); } .tag-flag { background: var(--review-bg); color: var(--review-ink); } .live-deep { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); } .live-deep__kicker { font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-2); } .live-deep__title { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--sp-2); } .live-deep__line { color: var(--ink-2); max-width: 36rem; } .live-deep__fee { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); } /* ---- Meaning / index / article ------------------------------------------ */ .meaning { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); } .meaning__col { padding: var(--sp-5); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); } .meaning__tag { display: inline-flex; margin-bottom: var(--sp-3); padding: 0.25rem 0.6rem; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; } .meaning__col--listed .meaning__tag { background: var(--review-bg); color: var(--review-ink); } .meaning__col--clear .meaning__tag { background: var(--clear-bg); color: var(--clear-ink); } .meaning__col p:last-child { color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } .coverage { margin-top: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-sunken); border: 1px solid var(--line); } .coverage__label { font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-2); } .desk-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); align-items: start; } .desk-notes { display: grid; gap: var(--sp-4); } .desk-note { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); } .desk-note h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); } .desk-note p { font-size: var(--fs-sm); color: var(--ink-2); } .faq-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); align-items: start; } .faq-more { margin-top: var(--sp-4); font-size: var(--fs-sm); } .faq-more a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .index-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); } .index-col__label { font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-3); } .index-col ul { display: grid; gap: 0.55rem; } .index-col a { font-size: var(--fs-sm); color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; } .index-col a:hover { color: var(--ink); text-decoration-color: var(--line-strong); } /* Article / FAQ pages */ .masthead { padding: calc(var(--nav-h) + var(--sp-8)) 0 var(--sp-7); border-bottom: 1px solid var(--line); background: var(--hero-gradient), var(--bg); } .masthead__inner { max-width: var(--container-narrow); } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--sp-4); } .breadcrumbs a:hover { color: var(--ink); } .masthead .meta { font-size: var(--fs-xs); color: var(--ink-4); letter-spacing: var(--tr-wide); margin-bottom: var(--sp-3); } .masthead h1 { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); margin-bottom: var(--sp-4); } .masthead .lead { font-size: var(--fs-md); color: var(--ink-2); line-height: var(--lh-relaxed); } .prose-page { max-width: var(--container-narrow); margin-inline: auto; padding: var(--sp-8) var(--sp-5) var(--sp-10); } .prose-page > section, .prose-page .faq { margin-top: var(--sp-7); } .prose-page h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--sp-3); } .prose-page p { color: var(--ink-2); line-height: var(--lh-relaxed); } .cta-box { padding: var(--sp-5); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); } .cta-box h2, .cta-box strong { display: block; font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--sp-2); } .cta-box p { color: var(--ink-2); margin-bottom: var(--sp-4); } .related { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line); } .related h2 { margin-bottom: var(--sp-3); } .related ul { display: grid; gap: 0.5rem; } .related a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; } /* Home FAQ as Clearpath .qa when wrapped */ .faq details, .qa { border-top: 1px solid var(--line); } .faq details:last-child, .qa:last-child { border-bottom: 1px solid var(--line); } .faq summary, .qa__q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; font-size: var(--fs-md); font-weight: 500; color: var(--ink); } .faq-answer, .qa__a { padding-bottom: var(--sp-4); color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } /* Footer richer */ .footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6); } .footer__blurb { margin-top: var(--sp-3); color: var(--ink-3); font-size: var(--fs-sm); max-width: 22rem; } .footer__col-title { font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-3); } .footer__nav { display: grid; gap: 0.45rem; } .footer__nav a { font-size: var(--fs-sm); color: var(--ink-2); } .footer__nav a:hover { color: var(--ink); } .footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-4); } /* Mobile dock */ .mobile-dock { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--nav-bg-scrolled); backdrop-filter: blur(16px); border-top: 1px solid var(--line); } @media (max-width: 720px) { .mobile-dock { display: block; } body { padding-bottom: 4.5rem; } .checker__row { flex-direction: column; } .tool-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .live-facts { grid-template-columns: 1fr; } .meaning, .desk-split, .faq-split, .index-grid, .footer__grid { grid-template-columns: 1fr; } } /* Logo marquee keep subtle */ .logo-marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--sp-5); background: var(--bg-sunken); } .logo-marquee__label { text-align: center; font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--sp-4); } /* Buttons used by deep demo / dock */ .btn-deep { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.7rem 1.05rem; border-radius: var(--r-md); background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-weight: 500; font-size: var(--fs-sm); box-shadow: var(--btn-primary-shadow); } .btn-deep:hover { background: var(--btn-primary-hover-bg); } .btn-sm { padding: 0.45rem 0.8rem; font-size: var(--fs-xs); } .icon { display: inline-block; flex: none; } .mono { font-family: var(--font-mono); } /* Logo rail (badges) — Featured on marquee */ .logo-rail { overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--sp-6); background: transparent; } .logo-rail-head { text-align: center; margin-bottom: var(--sp-4); } .logo-rail-label { font-size: var(--fs-xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); } .logo-rail-viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logo-rail-track { display: flex; width: max-content; animation: logo-rail 42s linear infinite; will-change: transform; } .logo-rail-set { display: flex; gap: var(--sp-7); align-items: center; padding-inline: var(--sp-7); } .logo-rail-item { opacity: 0.82; filter: grayscale(0.35) brightness(1.05); transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); flex: 0 0 auto; } .logo-rail-item:hover { opacity: 1; filter: none; } .logo-rail-item img { height: 40px; width: auto; display: block; } .logo-rail:hover .logo-rail-track { animation-play-state: paused; } @keyframes logo-rail { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @media (prefers-reduced-motion: reduce) { .logo-rail-track { animation: none; } } /* Verdict badge follows block state */ #verdictBlock.is-listed .verdict { border-color: var(--review-line); background: var(--review-bg); color: var(--review-ink); } #verdictBlock.is-clear .verdict { border-color: var(--clear-line); background: var(--clear-bg); color: var(--clear-ink); } /* Ensure checker field chrome from product form */ .checker__field { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: none; min-height: 48px; height: 48px; } /* Product form: stack row + hint */ .checker { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: min(100%, 40rem); margin-inline: auto; } .checker__hint { text-align: center; } .hero__note { text-align: center; max-width: 36rem; margin-inline: auto; } /* ============================================================ TRON brand treatment Accent: TRX red #cc2b2b / glow ============================================================ */ :root, [data-theme="light"] { --tron-red: #cc2b2b; --tron-red-soft: rgba(204, 43, 43, 0.08); --tron-red-line: rgba(204, 43, 43, 0.22); --tron-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M30 0 L60 17.3 L60 34.7 L30 52 L0 34.7 L0 17.3Z' fill='none' stroke='rgba(204,43,43,0.07)' stroke-width='1'/%3E%3C/svg%3E"); } [data-theme="dark"] { --tron-red: #e84040; --tron-red-soft: rgba(232, 64, 64, 0.10); --tron-red-line: rgba(232, 64, 64, 0.28); --tron-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M30 0 L60 17.3 L60 34.7 L30 52 L0 34.7 L0 17.3Z' fill='none' stroke='rgba(232,64,64,0.10)' stroke-width='1'/%3E%3C/svg%3E"); } /* Hero bg: see hero__bg layers at file end */ /* Eyebrow dot: TRX red pulse */ .eyebrow__dot::before { background: var(--tron-red); box-shadow: 0 0 0 0 var(--tron-red); animation: tron-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; } @keyframes tron-pulse { 0% { box-shadow: 0 0 0 0 var(--tron-red-line); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* Checker submit: TRON red on hover */ .btn--primary { position: relative; overflow: hidden; } .btn--primary::after { content: ""; position: absolute; inset: 0; background: var(--tron-red); opacity: 0; transition: opacity 200ms ease; pointer-events: none; } .btn--primary:hover::after { opacity: 0.08; } /* Scanner line: TRON red */ .checker__scan.on, .checker__scan { background: linear-gradient(90deg, transparent, var(--tron-red), transparent); } /* Check input: focus on row shell (field has no inner ring) */ .checker__row:focus-within { border-color: color-mix(in srgb, var(--ink) 22%, var(--line-strong)); } .checker__field:focus-within { border-color: transparent; box-shadow: none; } .checker__row:has(.checker__field.is-bad), .checker__field.is-bad { border-color: var(--review-line); box-shadow: 0 0 0 1px color-mix(in srgb, var(--review-line) 35%, transparent); } /* Eyebrow: TRX red accent */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.85rem 0.35rem 0.55rem; border-radius: var(--r-full); border: 1px solid var(--tron-red-line); background: var(--tron-red-soft); font-size: var(--fs-sm); color: var(--tron-red); font-weight: 500; letter-spacing: var(--tr-snug); } .eyebrow__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tron-red); flex: none; position: relative; } .eyebrow__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--tron-red); opacity: 0.25; animation: tron-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; } /* Verdict listed: TRX red */ #verdictBlock.is-listed .verdict, .verdict--listed { border-color: var(--tron-red-line) !important; background: var(--tron-red-soft) !important; color: var(--tron-red) !important; } /* Tags: flag = TRX red */ .tag-flag { background: var(--tron-red-soft); color: var(--tron-red); } /* Meaning col listed: TRX red */ .meaning__col--listed .meaning__tag { background: var(--tron-red-soft); color: var(--tron-red); border-color: var(--tron-red-line); } /* CTA section: subtle red gradient stripe */ .cta { position: relative; overflow: hidden; } .cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--tron-red-soft) 0%, transparent 70%); pointer-events: none; } /* Footer brand strong: TRX red */ .footer__inner .brand__word, .footer__inner strong { color: var(--tron-red); } /* Nav active link: TRX red underline */ .nav__links a:hover { color: var(--tron-red); } /* Step numbers: TRX red */ .step__num { color: var(--tron-red); opacity: 0.9; } /* Fallback: if is-ready never fires, reveal hero anyway */ @keyframes hero-rise-fallback { 0% { opacity: 0; transform: translate3d(0, 36px, 0); filter: blur(8px); } 100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } } .hero [data-hero] { animation: hero-rise-fallback 900ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--hero-delay, 0ms); } body.is-ready .hero [data-hero] { animation-name: hero-rise; } /* ============================================================ Framer-inspired product shell (dark-first) ============================================================ */ :root { --nav-h: 64px; --nav-pill-h: 52px; --nav-shell-pad: 14px; --nav-stack-h: calc(var(--nav-shell-pad) + env(safe-area-inset-top, 0px) + var(--nav-pill-h)); --ui-radius: 16px; --ui-radius-sm: 10px; --ui-radius-pill: 999px; --section-pad: 112px; --container: 1140px; --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1); --shadow-framer: 0 24px 64px -28px rgba(0, 0, 0, 0.55); --shadow-framer-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.45); /* Framer type scale — GT Walsheim-like via Plus Jakarta Sans */ --framer-hero: clamp(2.75rem, 5vw, 4.25rem); --framer-hero-lede: 1.0625rem; --framer-section: clamp(1.875rem, 2.4vw, 2.625rem); --framer-body: 1rem; --framer-small: 0.8125rem; --framer-nav: 0.875rem; --framer-fw-display: 600; --framer-fw-body: 400; --framer-fw-ui: 500; --framer-track-display: -0.035em; --framer-track-body: -0.014em; --framer-track-ui: -0.012em; } [data-theme="dark"] { --bg: #000000; --bg-sunken: #0a0a0a; --surface: #0c0c0e; --surface-2: #141417; --ink: #f5f5f7; --ink-2: #a8a8b0; --ink-3: #787880; --ink-4: #55555c; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.14); --line-hover: rgba(255, 255, 255, 0.2); --btn-primary-bg: #f5f5f7; --btn-primary-fg: #08080a; --btn-primary-hover-bg: #ffffff; --hero-gradient: radial-gradient(70rem 32rem at 50% -18rem, rgba(232, 64, 64, 0.10) 0%, transparent 68%); --accent: var(--tron-red); --accent-soft: var(--tron-red-soft); --accent-line: var(--tron-red-line); --font-display: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } [data-theme="light"] { --font-display: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --shadow-framer: none; --shadow-framer-sm: none; --card-glow: none; --card-glow-accent: none; } /* ── Landing backdrop + footer floor ──────────────────────── */ html:has(.site-scam) { background: #050506; } body.site-scam { background: transparent; --ui-radius-btn: 8px; } body.site-scam .btn, body.site-scam .btn--primary, body.site-scam .btn--sm, body.site-scam .btn-deep, body.site-scam .btn-ghost, body.site-scam .cta .btn { border-radius: var(--ui-radius-btn); } /* Nested in pill fields / nav dock — match the capsule, not the square 8px chip */ body.site-scam .checker .btn--primary, body.site-scam .checker__paste, body.site-scam .showcase__search-btn, body.site-scam .nav .btn--sm, body.site-scam .nav #navPayBtn { border-radius: 999px; } /* Keep page chrome above the fixed backdrop (don't touch skip-link / mobile overlay) */ body.site-scam main, body.site-scam .footer, body.site-scam .deep-demo, body.site-scam .deep-demo-root, body.site-scam [data-deep-root] { position: relative; z-index: 1; } body.site-scam .nav { z-index: 110; } /* Menu sheet under the nav pill so the burger/X stays clickable */ body.site-scam .mobile-nav { position: fixed; inset: 0; z-index: 100; } body.site-scam .mobile-dock { z-index: 80; } .site-scam .site-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Quiet dark field — red wash under the floating nav so no black header strip */ .site-scam .site-bg__mesh { position: absolute; inset: 0; background: radial-gradient(95% 42% at 50% -8%, rgba(232, 64, 64, 0.16) 0%, transparent 58%), radial-gradient(90% 55% at 50% -15%, rgba(255, 255, 255, 0.055) 0%, transparent 58%), radial-gradient(55% 40% at 100% 0%, rgba(232, 0, 10, 0.08) 0%, transparent 62%), linear-gradient(180deg, #0a0708 0%, #050506 42%, #030304 100%); } .site-scam .site-bg__haze { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 45% at 50% 110%, rgba(255, 255, 255, 0.03) 0%, transparent 70%); } .site-scam .site-bg__noise { position: absolute; inset: 0; background-image: url("../img/noise.svg"); background-size: 160px 160px; opacity: 0.035; mix-blend-mode: soft-light; } body.site-scam .footer { position: relative; background: transparent; } /* CTA — floating TRX field around the closing pitch */ body.site-scam .cta { position: relative; overflow: hidden; background: transparent; border-color: rgba(255, 255, 255, 0.08); } body.site-scam .cta::before { z-index: 0; background: radial-gradient( ellipse 62% 70% at 50% 40%, rgba(232, 64, 64, 0.1) 0%, transparent 72% ); } body.site-scam .cta .hero__logos { inset: -28% -12% -32%; z-index: 0; perspective: 900px; } body.site-scam .cta .hero__logo-float--1 { top: 8%; left: -2%; width: min(220px, 36vw); height: min(220px, 36vw); --logo-rot: -18deg; } body.site-scam .cta .hero__logo-float--2 { top: 10%; right: -2%; left: auto; width: min(200px, 34vw); height: min(200px, 34vw); --logo-rot: 16deg; } body.site-scam .cta .hero__logo-float--3 { top: 58%; left: 12%; width: min(120px, 22vw); height: min(120px, 22vw); --logo-rot: 8deg; } body.site-scam .cta .hero__logo-float--4 { top: -18%; left: 18%; width: min(340px, 52vw); height: min(340px, 52vw); } body.site-scam .cta .hero__logo-float--5 { top: -16%; right: 12%; left: auto; width: min(300px, 46vw); height: min(300px, 46vw); } body.site-scam .cta .hero__logo-float--6 { top: 62%; right: 14%; left: auto; width: 64px; height: 64px; --logo-rot: -12deg; } body.site-scam .cta .hero__logo-float--7 { top: 18%; left: 46%; width: 44px; height: 44px; --logo-rot: 22deg; } body.site-scam .cta .hero__logo-float--8 { top: 68%; left: 42%; width: 32px; height: 32px; --logo-rot: -28deg; } body.site-scam .cta .hero__logo-float--1 img, body.site-scam .cta .hero__logo-float--2 img { opacity: 0.86; filter: saturate(1.2) contrast(1.08) drop-shadow(0 18px 28px rgba(232, 64, 64, 0.32)); } body.site-scam .cta .hero__logo-float--3 img, body.site-scam .cta .hero__logo-float--6 img, body.site-scam .cta .hero__logo-float--7 img, body.site-scam .cta .hero__logo-float--8 img { opacity: 0.9; filter: saturate(1.22) contrast(1.08) drop-shadow(0 10px 16px rgba(232, 64, 64, 0.34)); } body.site-scam .cta .hero__logo-float--4 img, body.site-scam .cta .hero__logo-float--5 img { opacity: 0.28; filter: blur(26px) saturate(1.25); } body.site-scam .cta .cta__inner { position: relative; z-index: 1; } @media (max-width: 820px) { body.site-scam .cta .hero__logo-float--1 { left: -16%; top: 0; width: min(180px, 48vw); height: min(180px, 48vw); } body.site-scam .cta .hero__logo-float--2 { right: -18%; top: 4%; width: min(160px, 44vw); height: min(160px, 44vw); } body.site-scam .cta .hero__logo-float--3, body.site-scam .cta .hero__logo-float--7, body.site-scam .cta .hero__logo-float--8 { display: none; } body.site-scam .cta .hero__logo-float--6 { top: 72%; right: 8%; } } /* ── Nav (Framer: centered command dock pill) ──────────────── */ .nav { /* Fixed floating pill — no in-flow sticky band that paints a black strip */ position: fixed; left: 0; right: 0; top: 0; z-index: 50; width: 100%; height: auto; padding: calc(var(--nav-shell-pad) + env(safe-area-inset-top)) max(var(--sp-5), env(safe-area-inset-right)) 0 max(var(--sp-5), env(safe-area-inset-left)); background: transparent !important; border-bottom: 0; box-shadow: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none; } .nav__inner, .nav__toggle, .nav .brand, .nav .brand--dock, .nav .lang-drop, .nav .btn { pointer-events: auto; } .nav::after { display: none; } .nav.is-scrolled { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .nav__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; width: fit-content; max-width: calc(100% - 8px); margin-inline: auto; min-height: var(--nav-pill-h, 52px); height: auto; padding: 6px 10px 6px 14px; border-radius: var(--ui-radius-pill); border: 1px solid rgba(255, 255, 255, 0.1); background: #08080a; box-shadow: none; overflow: visible; transition: background 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease); } .nav.is-scrolled .nav__inner { background: #0a0a0c; border-color: rgba(255, 255, 255, 0.13); box-shadow: none; } @media (min-width: 821px) { .nav__inner { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; background: #08080a; border-color: rgba(255, 255, 255, 0.08); } .nav.is-scrolled .nav__inner { background: #0a0a0c; border-color: rgba(255, 255, 255, 0.11); } .nav__links { flex: none; } .nav__actions { flex: none; } .nav__toggle { display: none; } } .nav__links { margin-inline: 0; } .nav__links ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; border-radius: 0; background: transparent; border: 0; box-shadow: none; } .nav__links a { display: inline-block; padding: 7px 11px; border-radius: var(--ui-radius-pill); font-family: var(--font-body); font-size: var(--framer-nav); font-weight: var(--framer-fw-ui); letter-spacing: var(--framer-track-ui); line-height: 1; color: var(--ink-2); transition: color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease); } .nav__links a::after { display: none; } .nav__links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); } .nav__actions { display: flex; align-items: center; gap: 5px; padding-left: 0; border-left: 0; overflow: visible; } /* Language dropdown */ .lang-drop { position: relative; flex: none; } .lang-flag { --lang-flag-w: 24px; --lang-flag-h: 16px; display: inline-grid; place-items: center; width: var(--lang-flag-w); height: var(--lang-flag-h); border-radius: 4px; overflow: hidden; flex: none; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 0 rgba(0, 0, 0, 0.35); } .lang-flag svg { display: block; width: 100%; height: 100%; } .lang-flag--trigger { --lang-flag-w: 22px; --lang-flag-h: 15px; } .lang-drop__item .lang-flag { --lang-flag-w: 26px; --lang-flag-h: 17px; } .lang-drop__trigger { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--ui-radius-pill); background: rgba(255, 255, 255, 0.04); color: var(--ink); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); } .lang-drop__trigger:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); } .lang-drop__chev { opacity: 0.55; transition: transform 220ms var(--ease-spring), opacity 180ms var(--ease); } .lang-drop.is-open .lang-drop__chev { transform: rotate(180deg); opacity: 0.85; } .lang-drop__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 108px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(18, 18, 24, 0.98); box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.88); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 180ms var(--ease), transform 220ms var(--ease-spring), visibility 180ms var(--ease); z-index: 80; pointer-events: none; } .lang-drop.is-open .lang-drop__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .lang-drop.is-open .lang-drop__trigger { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); } /* Desktop hover open — touch devices use .is-open via JS only */ @media (hover: hover) and (pointer: fine) { .lang-drop:hover .lang-drop__chev, .lang-drop:focus-within .lang-drop__chev { transform: rotate(180deg); opacity: 0.85; } .lang-drop:hover .lang-drop__menu, .lang-drop:focus-within .lang-drop__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .lang-drop:hover .lang-drop__trigger, .lang-drop:focus-within .lang-drop__trigger { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); } } .lang-drop__item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.52); text-decoration: none; transition: background 160ms var(--ease), color 160ms var(--ease); } .lang-drop__code { line-height: 1; } .lang-drop__item:hover { color: #fff; background: rgba(255, 255, 255, 0.07); text-decoration: none; } .lang-drop__item[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .nav .brand--dock { width: 36px; height: 36px; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, 0.03); box-shadow: none; transition: transform 220ms var(--ease-spring), border-color 220ms var(--ease), background 220ms var(--ease); } .nav .brand--dock:hover { transform: scale(1.04); border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); box-shadow: none; filter: none; } .nav .brand--dock .brand__logo { display: block; width: 18px; height: 18px; color: var(--ink); opacity: 1; transform: translate(0.5px, 0.5px); } .brand { display: inline-flex; align-items: center; gap: 8px; flex: none; text-decoration: none; color: var(--ink); } .brand:hover { text-decoration: none; color: var(--ink); } .brand__logo { display: block; width: 20px; height: 20px; flex: none; color: var(--ink); opacity: 0.92; } .brand:hover .brand__logo { opacity: 1; } .brand__icon { display: block; width: 18px; height: 18px; flex: none; opacity: 0.92; } .brand__mark svg { width: 18px; height: 18px; } .brand__name { font-family: var(--font-body); font-size: var(--framer-nav); font-weight: var(--framer-fw-ui); letter-spacing: var(--framer-track-ui); color: var(--ink); line-height: 1; white-space: nowrap; } .brand__name--footer { font-family: var(--font-body); font-size: var(--framer-nav); font-weight: var(--framer-fw-ui); letter-spacing: var(--framer-track-ui); } /* Ghost controls */ .theme-toggle { width: 34px; height: 34px; border-radius: var(--ui-radius-sm); border: 1px solid transparent; color: var(--ink-2); } .theme-toggle:hover { color: var(--ink); background: var(--surface); border-color: var(--line); } .lang { gap: 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--ui-radius-pill); background: color-mix(in srgb, var(--surface) 80%, transparent); overflow: hidden; } .lang a { min-width: 34px; height: 28px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: var(--ui-radius-pill); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); border-right: 0; } .lang a:last-child { border-right: 0; } .lang a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } .lang a[aria-current="page"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .nav .btn--sm { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: var(--framer-nav); font-weight: var(--framer-fw-ui); letter-spacing: var(--framer-track-ui); box-shadow: none; transition: transform 220ms var(--ease-spring), opacity 180ms var(--ease), background 180ms var(--ease); } .nav .btn--sm .icon { flex: none; width: 14px; height: 14px; } .nav .btn:hover { transform: none; } .nav .btn:active { transform: scale(0.98); } .nav .btn--primary:hover { transform: none; box-shadow: none; opacity: 0.92; } .nav__toggle { display: none; width: 36px; height: 36px; padding: 0; gap: 5px; border: 0; border-radius: var(--ui-radius-pill); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); flex: none; } .nav__toggle:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); border-color: transparent; } .nav__toggle-bar { width: 14px; height: 1.5px; margin-inline: auto; background: currentColor; border-radius: 1px; } /* ── Hero (Framer mesh + big type) ─────────────────────────── */ .hero { position: relative; isolation: isolate; overflow: hidden; margin-top: 0; padding-top: 112px; padding-bottom: 72px; border-bottom: 0; background: transparent !important; background-image: none !important; } .site-scam .hero { background: transparent !important; /* Clear fixed nav; atmosphere runs under the pill (no black header strip) */ padding-top: calc(var(--nav-stack-h) + 56px); } .site-scam .masthead { padding-top: calc(var(--nav-stack-h) + var(--sp-8)); background: transparent; } .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Soft red ceiling so the fixed pill floats on atmosphere, not a black plate */ .site-scam .hero__bg::before { content: ""; position: absolute; left: -10%; right: -10%; top: -18%; height: min(52vh, 420px); background: radial-gradient(ellipse 70% 55% at 50% 18%, rgba(232, 64, 64, 0.2) 0%, transparent 68%), radial-gradient(ellipse 45% 40% at 80% 0%, rgba(232, 0, 10, 0.12) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hero__logos { position: absolute; inset: -10% -14% 12%; z-index: 0; overflow: visible; pointer-events: none; perspective: 1100px; transform-style: preserve-3d; } .hero__logo-float { --logo-rot: 0deg; position: absolute; display: grid; place-items: center; transform: rotate(var(--logo-rot)); transform-style: preserve-3d; will-change: transform; } .hero__logo-float img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; -webkit-user-drag: none; user-select: none; } /* Far atmosphere — soft red blooms behind content */ .hero__logo-float--4 { width: min(460px, 54vw); height: min(460px, 54vw); top: 4%; left: -16%; --logo-rot: -12deg; animation: hero-logo-drift-far 38s ease-in-out infinite; animation-delay: -8s; } .hero__logo-float--4 img { opacity: 0.34; filter: blur(28px) saturate(1.3); } .hero__logo-float--5 { width: min(400px, 50vw); height: min(400px, 50vw); top: 2%; right: -14%; --logo-rot: 14deg; animation: hero-logo-drift-far 42s ease-in-out infinite reverse; animation-delay: -14s; } .hero__logo-float--5 img { opacity: 0.3; filter: blur(24px) saturate(1.25); } /* Mid — readable coins, light depth of field */ .hero__logo-float--1 { width: min(260px, 34vw); height: min(260px, 34vw); top: 28%; left: -2%; --logo-rot: -22deg; animation: hero-logo-drift-mid 26s ease-in-out infinite; } .hero__logo-float--1 img { opacity: 0.78; filter: saturate(1.18) contrast(1.08) drop-shadow(0 22px 36px rgba(232, 64, 64, 0.32)); } .hero__logo-float--2 { width: min(230px, 30vw); height: min(230px, 30vw); top: 34%; right: -4%; --logo-rot: 18deg; animation: hero-logo-drift-mid 30s ease-in-out infinite reverse; animation-delay: -7s; } .hero__logo-float--2 img { opacity: 0.74; filter: saturate(1.15) contrast(1.06) drop-shadow(0 18px 32px rgba(232, 64, 64, 0.28)); } .hero__logo-float--3 { width: min(170px, 22vw); height: min(170px, 22vw); top: 14%; left: 42%; --logo-rot: 8deg; animation: hero-logo-drift-soft 32s ease-in-out infinite; animation-delay: -4s; } .hero__logo-float--3 img { opacity: 0.28; filter: blur(8px) saturate(1.1); } /* Near accents — sharp, small, more motion */ .hero__logo-float--6 { width: 84px; height: 84px; top: 16%; left: 18%; --logo-rot: 28deg; animation: hero-logo-drift-near 18s ease-in-out infinite; animation-delay: -3s; z-index: 1; } .hero__logo-float--6 img { opacity: 0.92; filter: saturate(1.22) contrast(1.1) drop-shadow(0 12px 18px rgba(232, 64, 64, 0.38)); } .hero__logo-float--7 { width: 64px; height: 64px; top: 62%; left: auto; right: 4%; --logo-rot: -16deg; animation: hero-logo-drift-near 16s ease-in-out infinite reverse; animation-delay: -9s; z-index: 1; } .hero__logo-float--7 img { opacity: 0.86; filter: saturate(1.2) contrast(1.08) drop-shadow(0 10px 16px rgba(232, 64, 64, 0.34)); } .hero__logo-float--8 { width: 42px; height: 42px; top: 24%; right: 20%; --logo-rot: -32deg; animation: hero-logo-drift-near 14s ease-in-out infinite; animation-delay: -2s; z-index: 1; } .hero__logo-float--8 img { opacity: 0.8; filter: saturate(1.18) contrast(1.06) drop-shadow(0 8px 12px rgba(232, 64, 64, 0.3)); } @keyframes hero-logo-drift-far { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--logo-rot)) scale(1); } 40% { transform: translate3d(28px, 36px, 0) rotate(calc(var(--logo-rot) + 6deg)) scale(1.04); } 70% { transform: translate3d(-18px, 22px, 0) rotate(calc(var(--logo-rot) - 4deg)) scale(0.97); } } @keyframes hero-logo-drift-mid { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--logo-rot)) rotateY(-8deg); } 35% { transform: translate3d(22px, -28px, 0) rotate(calc(var(--logo-rot) + 8deg)) rotateY(6deg); } 70% { transform: translate3d(-16px, 20px, 0) rotate(calc(var(--logo-rot) - 6deg)) rotateY(-12deg); } } @keyframes hero-logo-drift-soft { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--logo-rot)) scale(1); } 50% { transform: translate3d(18px, 26px, 0) rotate(calc(var(--logo-rot) + 10deg)) scale(1.06); } } @keyframes hero-logo-drift-near { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--logo-rot)) translateY(0); } 25% { transform: translate3d(14px, -18px, 0) rotate(calc(var(--logo-rot) + 12deg)) translateY(-6px); } 55% { transform: translate3d(-20px, 12px, 0) rotate(calc(var(--logo-rot) - 10deg)) translateY(8px); } 80% { transform: translate3d(8px, 16px, 0) rotate(calc(var(--logo-rot) + 4deg)) translateY(-2px); } } /* Legacy aliases kept so older rules don't break */ @keyframes hero-logo-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--logo-rot, 0deg)); } 33% { transform: translate3d(36px, 28px, 0) rotate(calc(var(--logo-rot, 0deg) + 10deg)); } 66% { transform: translate3d(-18px, 44px, 0) rotate(calc(var(--logo-rot, 0deg) - 6deg)); } } @keyframes hero-logo-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--logo-rot, 0deg)); } 50% { transform: translate3d(-42px, 32px, 0) rotate(calc(var(--logo-rot, 0deg) - 12deg)); } } @keyframes hero-logo-drift-c { 0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(var(--logo-rot, 0deg)); } 50% { transform: translate3d(24px, 36px, 0) scale(1.07) rotate(calc(var(--logo-rot, 0deg) + 8deg)); } } @keyframes hero-logo-drift-d { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--logo-rot, 0deg)); } 50% { transform: translate3d(28px, -22px, 0) rotate(calc(var(--logo-rot, 0deg) + 8deg)); } } @keyframes hero-logo-drift-e { 0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(var(--logo-rot, 0deg)); } 50% { transform: translate3d(-30px, 18px, 0) scale(0.94) rotate(calc(var(--logo-rot, 0deg) - 6deg)); } } .hero__mesh { position: absolute; border-radius: 50%; filter: blur(56px); will-change: transform; z-index: 1; } .hero__mesh--a { width: min(38rem, 72vw); height: 18rem; top: 16rem; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 42%, transparent 72%); animation: framer-mesh-a 24s ease-in-out infinite; } .hero__mesh--b { width: 14rem; height: 10rem; top: 18rem; left: 8%; background: radial-gradient(circle, rgba(232, 64, 64, 0.07) 0%, rgba(232, 64, 64, 0.015) 45%, transparent 74%); animation: framer-mesh-b 28s ease-in-out infinite; } .hero__mesh--c { width: 12rem; height: 9rem; top: 20rem; right: 8%; background: radial-gradient(circle, rgba(232, 0, 10, 0.06) 0%, rgba(232, 0, 10, 0.015) 45%, transparent 74%); animation: framer-mesh-c 26s ease-in-out infinite; } .hero__spotlight { display: none; } .hero__grid { display: none; } .hero__fade { position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55)); pointer-events: none; } .site-scam .hero__fade { /* Don’t paint a solid black plate over the page floor grid */ background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35)); height: 22%; } @keyframes framer-mesh-a { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-48%) scale(1.05); } } @keyframes framer-mesh-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3%, 4%); } } @keyframes framer-mesh-c { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4%, 3%); } } @media (prefers-reduced-motion: reduce) { .hero__mesh, .hero__logo-float, .hero__logo-float img { animation: none; } } [data-theme="light"] .hero__spotlight { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0, 0, 0, 0.04) 0%, transparent 72%); } [data-theme="light"] .hero__mesh--a { background: radial-gradient(circle, rgba(99, 102, 241, 0.16) 0%, transparent 68%); } [data-theme="light"] .hero__mesh--b { background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%); } [data-theme="light"] .hero__mesh--c { background: radial-gradient(circle, color-mix(in srgb, var(--tron-red) 10%, transparent) 0%, transparent 72%); } [data-theme="light"] .hero__grid { background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.06) 1px, transparent 1px); opacity: 0.45; } /* Dark shell — no nav/hero banding from legacy tokens */ [data-theme="dark"] .nav, [data-theme="dark"] .nav.is-scrolled { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-bottom: 0 !important; } [data-theme="dark"] .nav__inner, [data-theme="dark"] .nav.is-scrolled .nav__inner { box-shadow: none !important; } [data-theme="dark"] .nav .btn--sm, [data-theme="dark"] .nav .btn--primary:hover { box-shadow: none !important; } .hero__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .eyebrow { gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--ui-radius-pill); background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(12px); color: var(--ink-2); font-family: var(--font-body); font-size: var(--framer-small); font-weight: var(--framer-fw-ui); letter-spacing: var(--framer-track-ui); line-height: 1; box-shadow: none; } .eyebrow__dot { width: 6px; height: 6px; margin: 0; background: var(--tron-red); box-shadow: 0 0 10px color-mix(in srgb, var(--tron-red) 55%, transparent); } .eyebrow__dot::before, .eyebrow__dot::after { display: none !important; } .hero__title { margin-top: 24px; max-width: 11em; font-family: var(--font-display); font-size: var(--framer-hero); font-weight: var(--framer-fw-display); line-height: 1.12; letter-spacing: var(--framer-track-display); color: var(--ink); text-wrap: balance; } .hero__lede { max-width: 32rem; margin: 20px auto 0; color: var(--ink-2); font-family: var(--font-body); font-size: var(--framer-hero-lede); font-weight: var(--framer-fw-body); line-height: 1.55; letter-spacing: var(--framer-track-body); text-wrap: pretty; } /* ── Checker (single pill row) ─────────────────────────────── */ .checker { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 560px; margin: 36px auto 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .checker__row { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 52px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--ui-radius-pill); background: var(--surface); box-shadow: var(--card-glow); transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); } .checker__row:focus-within { border-color: color-mix(in srgb, var(--ink) 22%, var(--line-strong)); } .checker__row:has(.checker__field.is-bad) { border-color: var(--review-line); box-shadow: 0 0 0 1px color-mix(in srgb, var(--review-line) 35%, transparent); } .checker__field { position: relative; flex: 1; min-width: 0; min-height: 44px !important; height: 44px !important; display: flex; align-items: center; border: 0 !important; border-radius: var(--ui-radius-pill) !important; background: var(--bg-sunken) !important; box-shadow: none !important; transition: background 180ms var(--ease); } .checker__field:hover { background: color-mix(in srgb, var(--bg-sunken) 88%, var(--surface-2)) !important; } .checker__field:focus-within { background: var(--bg-sunken) !important; box-shadow: none !important; } .checker__field.is-bad { box-shadow: none !important; } .checker__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); } .checker__field:focus-within .checker__icon { color: var(--ink-3); } .checker__input { width: 100%; height: 100% !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 92px 0 40px !important; font-family: var(--font-body); font-size: var(--framer-nav); font-weight: var(--framer-fw-body); letter-spacing: var(--framer-track-body); color: var(--ink); } .checker__input::placeholder { color: var(--ink-4); font-family: var(--font-body); } .checker__paste { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.06); font-size: 12px; font-weight: 500; color: var(--ink-2); gap: 4px; } .checker__paste:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); } .checker .btn--primary { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 112px; padding: 0 20px; margin: 0; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: var(--framer-nav); font-weight: var(--framer-fw-ui); letter-spacing: var(--framer-track-ui); box-shadow: none; transition: transform 220ms var(--ease-spring), opacity 180ms var(--ease); } .checker .btn--primary:hover { transform: none; box-shadow: none; opacity: 0.92; } .checker .btn--primary[aria-busy="true"] { opacity: 0.88; } .btn-spinner { display: block; flex: none; animation: spin 0.7s linear infinite; } #checkBtnIcon:not([hidden]) { display: inline-flex; align-items: center; line-height: 0; } .checker__hint { margin-top: 12px; padding: 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--ink-3); letter-spacing: -0.008em; } .hero__note { margin-top: 16px; max-width: 32rem; text-align: center; font-size: 13px; line-height: 1.55; color: var(--ink-3); letter-spacing: -0.008em; } /* ── Buttons global (Framer pills) ─────────────────────────── */ .btn--primary::after { display: none; } .btn--primary { border-radius: var(--ui-radius-pill); transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease), background 180ms var(--ease); } .btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-framer-sm); } /* ── Results ──────────────────────────────────────────────── */ #results .container { padding-block: 32px 0; } .live-report, .live-context, .live-deep { border-radius: var(--ui-radius); border: 1px solid var(--line); background: var(--surface); } .live-context { padding: 24px; margin-top: 16px; } .live-deep { margin-top: 16px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .tool-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .tool-glance > div { padding: 14px 16px; border-radius: var(--ui-radius-sm); border: 1px solid var(--line); background: var(--bg-sunken); } /* ── Sections (Cursor rhythm) ─────────────────────────────── */ .section { padding-block: var(--section-pad); } .how, .faq, .cta, .footer { border-top: 1px solid var(--line); } .section-head { margin-bottom: 48px; max-width: 40rem; } .section-head__title { font-family: var(--font-display); font-size: var(--framer-section); font-weight: var(--framer-fw-display); line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); } .section-head__sub { margin-top: 16px; font-family: var(--font-body); font-size: var(--framer-body); font-weight: var(--framer-fw-body); line-height: 1.6; color: var(--ink-2); letter-spacing: var(--framer-track-body); } .steps { gap: 12px; } .step { padding: 28px; border: 1px solid var(--line); border-radius: var(--ui-radius); border-top: 1px solid var(--line); background: var(--surface); transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease), border-color 180ms var(--ease); } .step:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-framer-sm); } .step:nth-child(n + 2) { border-top-color: var(--line); } .step__num { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; } .step__title { margin-top: 16px; font-family: var(--font-body); font-size: var(--framer-body); font-weight: var(--framer-fw-ui); letter-spacing: var(--framer-track-ui); color: var(--ink); } .step__body { margin-top: 8px; font-family: var(--font-body); font-size: var(--framer-nav); font-weight: var(--framer-fw-body); line-height: 1.6; color: var(--ink-2); letter-spacing: var(--framer-track-body); } .meaning { gap: 12px; margin-top: 0; } .meaning__col, .desk-note, .coverage { padding: 28px; border-radius: var(--ui-radius); border: 1px solid var(--line); background: var(--surface); transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease), border-color 180ms var(--ease); } .meaning__col:hover, .desk-note:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-framer-sm); } .coverage { margin-top: 12px; background: var(--bg-sunken); } .meaning__col p:last-child, .desk-note p, .coverage p { font-size: 14px; font-weight: 450; line-height: 1.6; color: var(--ink-2); } .desk-split, .faq-split { gap: 64px; } .desk-note h3 { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 8px; } .faq details, .faq .qa { border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface); } .faq summary, .faq .qa summary { padding: 18px 20px; font-size: 14px; font-weight: 500; letter-spacing: -0.012em; } .faq-answer, .faq .qa p { padding: 0 20px 18px; font-size: 14px; font-weight: 450; line-height: 1.6; color: var(--ink-2); } .index-grid { gap: 32px; margin-top: 0; } .index-col__label { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; } .index-col a { font-size: 14px; font-weight: 450; line-height: 1.5; color: var(--ink-2); } .index-col a:hover { color: var(--ink); } .footer { padding-block: 64px 32px; } .footer__grid { gap: 40px; } .footer__col-title { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; } .footer__blurb { margin-top: 12px; font-size: 14px; font-weight: 450; line-height: 1.6; color: var(--ink-2); } .footer__tag { margin-top: 8px; font-size: 13px; color: var(--ink-3); } .footer__nav a { font-size: 14px; font-weight: 450; color: var(--ink-2); } .footer__nav a::after { display: none; } .footer__bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); } .cta, .cta-box { border-radius: var(--ui-radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(14, 14, 16, 0.55) 0%, rgba(8, 8, 10, 0.62) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @media (max-width: 900px) { .tool-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .live-deep { flex-direction: column; align-items: flex-start; } } @media (max-width: 720px) { :root { --section-pad: 80px; } .hero { padding-top: 96px; padding-bottom: 80px; } .site-scam .hero { padding-top: calc(var(--nav-stack-h) + 40px); } .hero__title { max-width: none; font-size: clamp(2.25rem, 8vw, 3rem); } .checker__row { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; border-radius: var(--ui-radius); } .checker__field { width: 100%; } .checker .btn--primary { width: 100%; min-width: 0; } .steps, .meaning, .index-grid { grid-template-columns: 1fr; } .desk-split, .faq-split { grid-template-columns: 1fr; gap: 40px; } } /* ── Nav mobile — full-screen overlay ─────────────────────── */ .mobile-nav { position: fixed; inset: 0; z-index: 80; pointer-events: none; } .mobile-nav.is-open { pointer-events: auto; } .mobile-nav[hidden] { display: none; } .mobile-nav-panel { position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(90% 42% at 50% -6%, rgba(232, 64, 64, 0.2) 0%, transparent 55%), radial-gradient(80% 50% at 100% 0%, rgba(232, 0, 10, 0.12) 0%, transparent 55%), radial-gradient(70% 40% at 0% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 60%), #050506; padding: calc(var(--nav-shell-pad) + var(--nav-pill-h) + env(safe-area-inset-top) + 1.5rem) max(1.35rem, env(safe-area-inset-right)) calc(1.35rem + env(safe-area-inset-bottom)) max(1.35rem, env(safe-area-inset-left)); display: flex; flex-direction: column; justify-content: flex-start; gap: 0; transform: translateY(8px); opacity: 0; visibility: hidden; transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s; overflow: hidden; } .mobile-nav.is-open .mobile-nav-panel { transform: none; opacity: 1; visibility: visible; } .mobile-nav-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .mobile-nav-deco__glow { position: absolute; width: 70vw; height: 70vw; top: -18%; right: -28%; border-radius: 50%; background: radial-gradient(circle, rgba(232, 64, 64, 0.22) 0%, transparent 68%); filter: blur(8px); } .mobile-nav-deco__rail { position: absolute; left: max(1.35rem, env(safe-area-inset-left)); top: calc(var(--nav-shell-pad) + var(--nav-pill-h) + env(safe-area-inset-top) + 1.5rem); bottom: calc(7.5rem + env(safe-area-inset-bottom)); width: 1px; background: linear-gradient( 180deg, rgba(232, 64, 64, 0.55) 0%, rgba(255, 255, 255, 0.12) 35%, transparent 100% ); } .mobile-nav-deco__mark { position: absolute; right: -6%; bottom: 18%; width: min(58vw, 220px); height: min(58vw, 220px); color: rgba(255, 255, 255, 0.07); display: grid; place-items: center; filter: blur(14px); opacity: 0.85; } .mobile-nav-deco__mark .brand__logo { width: 100%; height: 100%; } .mobile-nav-list, .mobile-nav-lang { position: relative; z-index: 1; } .mobile-nav-list { display: flex; flex-direction: column; flex: 0 0 auto; gap: 0; margin: 0.35rem 0 0; padding: 0 0 0 1.15rem; counter-reset: mobile-nav; } .mobile-nav-item { counter-increment: mobile-nav; display: flex; align-items: center; gap: 0.9rem; flex: none; min-height: 3.9rem; padding: 0.95rem 0.15rem; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: transparent; text-decoration: none; font-family: var(--font-display); font-size: clamp(1.65rem, 7.2vw, 2.05rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); text-align: left; cursor: pointer; width: 100%; appearance: none; -webkit-appearance: none; } .mobile-nav-item::before { content: counter(mobile-nav, decimal-leading-zero); flex: none; width: 1.6rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.35); } .mobile-nav-item:not(.mobile-nav-item--deep):last-of-type { border-bottom: 0; } .mobile-nav-item:hover, .mobile-nav-item:active { color: #fff; text-decoration: none; } .mobile-nav-item:hover::before, .mobile-nav-item:active::before { color: var(--accent, var(--tron-red)); } .mobile-nav-item--deep { margin-top: 1rem; min-height: 3.55rem; padding: 0.85rem 1rem; gap: 0.75rem; border: 1px solid rgba(232, 64, 64, 0.42); border-radius: 14px; background: linear-gradient(135deg, rgba(232, 64, 64, 0.28) 0%, rgba(232, 64, 64, 0.1) 55%, rgba(255, 255, 255, 0.04) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 28px -18px rgba(232, 64, 64, 0.55); color: #fff; font-size: clamp(1.35rem, 5.8vw, 1.7rem); } .mobile-nav-item--deep::before { color: rgba(232, 64, 64, 0.95); } .mobile-nav-item--deep .icon { flex: none; color: #fff; opacity: 0.92; } .mobile-nav-item--deep:hover, .mobile-nav-item--deep:active { color: #fff; border-color: rgba(232, 64, 64, 0.65); background: linear-gradient(135deg, rgba(232, 64, 64, 0.38) 0%, rgba(232, 64, 64, 0.16) 55%, rgba(255, 255, 255, 0.05) 100%); } .mobile-nav-item--deep:hover::before, .mobile-nav-item--deep:active::before { color: #fff; } .mobile-nav-lang { flex: 0 0 auto; margin-top: auto; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav-label { margin: 0 0 0.7rem; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); } .lang-mobile { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 0.35rem; padding: 0.3rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(255, 255, 255, 0.03); } .lang-mobile a { flex: none; text-align: center; padding: 0.65rem 0.25rem; font-size: 0.8125rem; font-weight: 600; min-height: 3.25rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; border-radius: 8px; color: var(--ink-3); } .lang-mobile .lang-flag { --lang-flag-w: 26px; --lang-flag-h: 17px; } .lang-mobile a[aria-current="page"] { color: var(--btn-primary-fg) !important; background: var(--btn-primary-bg) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .mobile-nav-connect { width: 100%; min-height: 3.25rem; } @media (max-width: 820px) { body.nav-open { overflow: hidden; } body.nav-open .nav { z-index: 110; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Keep the floating pill solid — shell is transparent / pointer-events none */ body.nav-open .nav__inner { background: #08080a; border-color: rgba(255, 255, 255, 0.08); box-shadow: none; } body.nav-open .nav__toggle { z-index: 111; } .nav__inner { display: grid; /* Logo left · lang + burger right */ grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; width: 100%; max-width: none; margin-inline: 0; padding: 6px 10px 6px 12px; background: #08080a; border-color: rgba(255, 255, 255, 0.08); box-shadow: none; } .nav__links { display: none; } .nav__actions { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; margin-right: 0; } .nav__actions .btn--sm { display: none; } .nav__actions .lang-drop__trigger { height: 34px; padding: 0 9px 0 10px; } .nav__actions .lang-drop__menu { right: 0; left: auto; } .nav .brand--dock { grid-column: 1; justify-self: start; width: 34px; height: 34px; } .nav .brand--dock .brand__logo { width: 17px; height: 17px; } .nav__toggle { grid-column: 3; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; } .nav.is-open .nav__toggle-bar:first-child, body.nav-open .nav__toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); } .nav.is-open .nav__toggle-bar:last-child, body.nav-open .nav__toggle-bar:last-child { transform: translateY(-3.25px) rotate(-45deg); } } @media (min-width: 821px) { .mobile-nav { display: none !important; } } @media (max-width: 640px) { .hero { padding-top: 72px; padding-bottom: 72px; } .site-scam .hero { padding-top: calc(var(--nav-stack-h) + 28px); } .hero__inner { align-items: center; text-align: center; } .hero__title { max-width: none; font-size: clamp(2.125rem, 9vw, 2.75rem); line-height: 1.14; letter-spacing: -0.032em; } .hero__lede { font-size: 1rem; line-height: 1.5; max-width: none; } .eyebrow { max-width: 100%; font-size: 12px; padding: 6px 12px 6px 9px; text-wrap: balance; } .hero__logos { /* Bleed upward under the fixed nav pill */ inset: -18% -6% 8%; perspective: 800px; } .hero__logo-float--4 { width: min(320px, 88vw); height: min(320px, 88vw); top: -8%; left: -22%; } .hero__logo-float--5 { width: min(280px, 78vw); height: min(280px, 78vw); top: -10%; right: -18%; } .hero__logo-float--1 { width: min(170px, 48vw); height: min(170px, 48vw); top: 26%; left: -10%; } .hero__logo-float--2 { width: min(150px, 42vw); height: min(150px, 42vw); top: 32%; right: -8%; } .hero__logo-float--3 { width: min(110px, 32vw); height: min(110px, 32vw); top: 12%; left: 68%; } .hero__logo-float--6 { width: 68px; height: 68px; /* Beside the hero title line */ top: 15.5%; left: auto; right: 2%; z-index: 2; } .hero__logo-float--6 img { opacity: 0.96; filter: saturate(1.28) contrast(1.12) drop-shadow(0 12px 18px rgba(232, 64, 64, 0.5)); } .hero__logo-float--7, .hero__logo-float--8 { display: none; } .hero__logo-float { animation-duration: 32s; } .hero__logo-float--4 img, .hero__logo-float--5 img { opacity: 0.26; filter: blur(20px) saturate(1.25); } .hero__logo-float--1 img, .hero__logo-float--2 img { opacity: 0.55; filter: saturate(1.12) contrast(1.04) drop-shadow(0 14px 22px rgba(232, 64, 64, 0.22)); } .hero__logo-float--3 img { opacity: 0.2; filter: blur(6px) saturate(1.1); } .checker { margin-top: 28px; max-width: none; } .checker__row { border-radius: var(--ui-radius); } .checker__hint, .hero__note { text-align: center; padding-inline: 0; } .hero__mesh--a { height: 18rem; top: -10rem; } .hero__grid { opacity: 0.2; } } /* ── Site-scam design polish (unified dark desk) ───────────── */ body.site-scam .desk-notes.bento-card { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.site-scam .desk-note, body.site-scam .qa { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.02); } body.site-scam .section.how, body.site-scam .section.faq, body.site-scam .section.cta, body.site-scam .footer { border-top-color: rgba(255, 255, 255, 0.06); } body.site-scam .footer { background: transparent; } /* ── Homepage sections (site-scam) — quiet editorial system ─ */ .section-kicker { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); } body.site-scam .section-head { margin-bottom: 2.5rem; max-width: 38rem; } body.site-scam .section-head__title { letter-spacing: -0.03em; } body.site-scam .section-head__sub { margin-top: 0.85rem; color: var(--ink-3); font-size: 1rem; line-height: 1.55; } body.site-scam .desk-intro__lede { margin-top: 1rem; } /* Shared surface: one quiet material, no sheen / lift theater */ body.site-scam .platform-strip .bento-card, body.site-scam .bento--steps .bento-card, body.site-scam .bento--meaning .bento-card, body.site-scam .bento--desk .desk-intro, body.site-scam .bento--explore .index-col { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(10, 10, 12, 0.72); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.site-scam .bento--desk .desk-notes { border: 0; background: transparent; box-shadow: none; padding: 0; } /* Stats — equal weight, left-aligned, hairline rhythm */ body.site-scam .bento--platform { gap: 10px; } body.site-scam .stat-tile { align-items: flex-start; justify-content: flex-start; text-align: left; gap: 0.45rem; min-height: 0; padding: 1.35rem 1.25rem 1.4rem; position: relative; } body.site-scam .stat-tile__icon { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 0.35rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: var(--ink-3); } body.site-scam .stat-tile__icon .icon { display: block; } body.site-scam .stat-tile__label { order: 0; margin: 0; color: var(--ink-4); } body.site-scam .stat-tile__value { margin: 0.15rem 0 0; font-size: clamp(1.85rem, 2.8vw, 2.35rem); font-weight: 560; letter-spacing: -0.045em; color: var(--ink); background: none; -webkit-background-clip: unset; background-clip: unset; } body.site-scam .stat-tile__hint { margin: 0; max-width: none; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.45; } body.site-scam .stat-tile--chart { gap: 0.65rem; } body.site-scam .stat-tile__chart { width: 100%; height: 52px; margin: 0.35rem 0 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.025); } /* Steps — typographic procedure with quiet icons */ body.site-scam .bento--steps { gap: 10px; } body.site-scam .bento--steps .step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 0.85rem; row-gap: 0.45rem; padding: 1.5rem 1.4rem 1.55rem; border-top: 0; background: rgba(10, 10, 12, 0.72); } body.site-scam .bento--steps .step:hover { transform: none; box-shadow: none; } body.site-scam .bento--steps .step__num { grid-column: 1; grid-row: 1; display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-4); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; align-self: center; } body.site-scam .bento--steps .step__icon { grid-column: 2; grid-row: 1; justify-self: end; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: var(--ink-3); } body.site-scam .bento--steps .step__title { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.2rem); font-weight: 560; letter-spacing: -0.025em; line-height: 1.25; } body.site-scam .bento--steps .step__body { grid-column: 1 / -1; grid-row: 3; margin: 0; color: var(--ink-3); font-size: 0.9375rem; line-height: 1.55; max-width: 36rem; } body.site-scam .bento--steps .bento-card--span-12 .step__body { max-width: 44rem; } /* Meaning — status chips only; calm panels */ body.site-scam .bento--meaning { gap: 10px; } body.site-scam .bento--meaning .meaning__col, body.site-scam .bento--meaning .coverage { padding: 1.5rem 1.4rem; } body.site-scam .bento--meaning .meaning__col:hover, body.site-scam .bento--meaning .coverage:hover { transform: none; } body.site-scam .bento--meaning .meaning__tag { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0.28rem 0.7rem 0.28rem 0.55rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } body.site-scam .meaning__tag-icon, body.site-scam .coverage__icon, body.site-scam .index-col__icon, body.site-scam .desk-note__icon { display: block; flex: none; opacity: 0.9; } body.site-scam .bento--meaning .coverage__label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.55rem; padding: 0; border: 0; background: none; border-radius: 0; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); } body.site-scam .bento--meaning .meaning__col--listed .meaning__tag { border-color: rgba(255, 107, 107, 0.28); background: rgba(255, 107, 107, 0.08); color: #ff9a9a; } body.site-scam .bento--meaning .meaning__col--clear .meaning__tag { border-color: rgba(95, 211, 174, 0.28); background: rgba(95, 211, 174, 0.08); color: #7edcc0; } body.site-scam .bento--meaning .meaning__col p:last-child { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; } body.site-scam .bento--meaning .coverage { display: block; } body.site-scam .bento--meaning .coverage p:last-child { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; max-width: 48rem; } /* Desk — intro + stacked notes */ body.site-scam .bento--desk { gap: 10px; align-items: stretch; } body.site-scam .bento--desk .desk-intro { padding: 1.75rem 1.55rem; display: flex; flex-direction: column; justify-content: center; } body.site-scam .bento--desk .desk-notes { display: grid; gap: 10px; } body.site-scam .bento--desk .desk-note { padding: 1.35rem 1.4rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(10, 10, 12, 0.72); } body.site-scam .bento--desk .desk-note:hover { transform: none; box-shadow: none; } body.site-scam .bento--desk .desk-note h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.45rem; font-size: 1rem; font-weight: 560; letter-spacing: -0.02em; color: var(--ink); } body.site-scam .bento--desk .desk-note__icon { color: var(--ink-3); } body.site-scam .bento--desk .desk-note p { margin: 0; color: var(--ink-3); font-size: 0.9375rem; line-height: 1.55; } /* FAQ — aligned intro + clean accordion, no nested frames */ body.site-scam .faq-split { display: grid; grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.22fr); gap: 2.5rem; align-items: start; } body.site-scam .faq__aside, body.site-scam .faq__list { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } body.site-scam .faq__aside { position: sticky; top: calc(var(--nav-shell-pad, 12px) + var(--nav-pill-h, 52px) + 1.25rem); align-self: start; padding-top: 0.15rem; } body.site-scam .faq__mark { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 0 1.15rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); color: var(--ink-2); } body.site-scam .faq__aside .section-head__title { max-width: none; margin: 0; } body.site-scam .faq__aside .section-head__sub { margin-top: 0.75rem; max-width: 22rem; } body.site-scam .faq-more { margin-top: 1.5rem; } body.site-scam .faq-more a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); font-size: 0.875rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding-bottom: 2px; } body.site-scam .faq-more a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.45); } body.site-scam .faq__list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } body.site-scam .faq__list .qa, body.site-scam .faq__list details { margin: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: transparent; } body.site-scam .faq__list .qa[open], body.site-scam .faq__list details[open] { border-color: rgba(255, 255, 255, 0.1); background: transparent; } body.site-scam .faq__list .qa__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0.15rem; font-size: 0.98rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); list-style: none; cursor: pointer; } body.site-scam .faq__list .qa__q::-webkit-details-marker { display: none; } body.site-scam .faq__list .qa__lead { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; } body.site-scam .faq__list .qa__lead-icon { margin-top: 0.12rem; color: var(--ink-3); } body.site-scam .faq__list .qa__text { min-width: 0; } body.site-scam .faq__list .qa__icon { position: relative; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); } body.site-scam .faq__list .qa__icon::before, body.site-scam .faq__list .qa__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.55rem; height: 1px; background: var(--ink-2); transform: translate(-50%, -50%); } body.site-scam .faq__list .qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 180ms var(--ease), opacity 180ms var(--ease); } body.site-scam .faq__list .qa[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 1; } body.site-scam .faq__list .qa.is-open .qa__icon::after, body.site-scam .faq__list details.is-open > summary .qa__icon::after { opacity: 0; } body.site-scam .faq__list .qa__a, body.site-scam .faq__list .faq-answer { display: block; padding: 0 0 0 2.35rem; max-width: none; overflow: visible; } body.site-scam .faq__list .qa__a p, body.site-scam .faq__list .faq-answer p { margin: 0; padding: 0 0 1.2rem; color: var(--ink-3); font-size: 0.9rem; line-height: 1.6; max-width: 42rem; opacity: 0; transform: translateY(-6px); transition: opacity 280ms var(--ease) 40ms, transform 320ms var(--ease) 40ms; } body.site-scam .faq__list .qa[open] .qa__a p, body.site-scam .faq__list .qa.is-open .qa__a p, body.site-scam .faq__list .qa.is-open .qa__a > p, body.site-scam .faq__list details[open] > .faq-answer p, body.site-scam .faq__list details.is-open > .faq-answer p { opacity: 1; transform: none; } /* Explore — quiet index columns */ body.site-scam .bento--explore { gap: 10px; } body.site-scam .bento--explore .index-col { min-height: 0; padding: 1.35rem 1.25rem 1.45rem; } body.site-scam .index-col__label { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.85rem; padding: 0 0 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); } body.site-scam .index-col__icon { color: var(--ink-3); } body.site-scam .index-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; } body.site-scam .index-col a { display: block; padding: 0.4rem 0; border: 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.4; text-decoration: none; transition: color 160ms var(--ease); } body.site-scam .index-col a::after { content: none; } body.site-scam .index-col a:hover { color: #fff; padding-left: 0; } @media (max-width: 820px) { body.site-scam .section-head { margin-bottom: 1.75rem; } body.site-scam .faq-split { grid-template-columns: 1fr; gap: 1.75rem; } body.site-scam .faq__aside { position: static; } body.site-scam .faq__list .qa__a, body.site-scam .faq__list .faq-answer { padding-left: 0; } body.site-scam .stat-tile, body.site-scam .bento--steps .step, body.site-scam .bento--meaning .meaning__col, body.site-scam .bento--meaning .coverage, body.site-scam .bento--desk .desk-intro, body.site-scam .bento--desk .desk-note, body.site-scam .bento--explore .index-col { padding: 1.25rem 1.15rem; } } /* ============================================================ Framer bento blocks + hero showcase ============================================================ */ :root { --framer-blue: #e84040; --framer-purple: #e84040; --card-glow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 48px -28px rgba(0, 0, 0, 0.75); --card-glow-accent: 0 0 0 1px rgba(232, 64, 64, 0.22), 0 0 40px -18px rgba(232, 64, 64, 0.14), 0 18px 48px -28px rgba(0, 0, 0, 0.75); } .section--bento { border-top: 0; } .container--showcase { margin-top: 48px; padding-inline: var(--sp-5); } /* ── Hero product showcase ─────────────────────────────────── */ .hero-showcase { width: 100%; } .showcase { position: relative; } .showcase__aura { position: absolute; inset: 8% 4% -8%; background: radial-gradient(circle at 30% 20%, rgba(232, 64, 64, 0.18) 0%, transparent 52%), radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.08) 0%, transparent 48%); filter: blur(40px); pointer-events: none; } .showcase__frame { position: relative; border-radius: var(--ui-radius, 16px); border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(16, 16, 18, 0.72) 0%, rgba(8, 8, 10, 0.78) 100%); box-shadow: var(--card-glow); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .showcase__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); } .showcase__traffic { display: inline-flex; gap: 6px; } .showcase__traffic i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); } .showcase__traffic i:first-child { background: #ff5f57; } .showcase__traffic i:nth-child(2) { background: #febc2e; } .showcase__traffic i:nth-child(3) { background: #28c840; } .showcase__title { flex: 1; font-size: var(--framer-small); font-weight: var(--framer-fw-ui); color: var(--ink-2); letter-spacing: var(--framer-track-ui); } .showcase__pill { padding: 4px 10px; border-radius: var(--ui-radius-pill); border: 1px solid var(--line); font-size: 11px; font-weight: var(--framer-fw-ui); color: var(--ink-3); } .showcase__layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr); min-height: 320px; } .showcase__main { padding: 20px; border-right: 1px solid var(--line); } .showcase__search { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--ui-radius-pill); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); } .showcase__search-icon { color: var(--ink-4); flex: none; } .showcase__search .mono { flex: 1; font-size: 13px; color: var(--ink-2); } .showcase__search-btn { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.08); color: var(--ink-2); font-size: 12px; font-weight: 500; letter-spacing: var(--framer-track-ui); transition: color 180ms var(--ease), background 180ms var(--ease); } .showcase__search-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.12); } .showcase__verdict { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(95, 211, 174, 0.22); background: rgba(95, 211, 174, 0.08); color: var(--clear-ink, #5fd3ae); font-size: 14px; font-weight: var(--framer-fw-ui); } .showcase__verdict-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; } .showcase__verdict em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-3); } .showcase__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; } .showcase__metrics > div { min-width: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); } .showcase__metrics span { display: block; font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; } .showcase__metrics strong { display: block; margin-top: 6px; font-size: clamp(12px, 1.35vw, 15px); line-height: 1.25; font-weight: var(--framer-fw-ui); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; } .showcase__metrics em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; line-height: 1.35; color: var(--ink-3); overflow-wrap: anywhere; } .showcase__meter { margin-top: 16px; } .showcase__meter-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; } .showcase__meter-bar { height: 6px; border-radius: var(--ui-radius-pill); background: rgba(255, 255, 255, 0.06); overflow: hidden; } .showcase__meter-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(232, 64, 64, 0.85), rgba(255, 255, 255, 0.55)); } .showcase__rail { display: flex; flex-direction: column; padding: 20px; background: rgba(255, 255, 255, 0.015); } .showcase__rail-label { font-size: 12px; font-weight: var(--framer-fw-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); } .showcase__signals { margin-top: 14px; display: grid; gap: 10px; } .showcase__signals li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); font-size: 13px; color: var(--ink-2); } .showcase__signals li > span:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; word-break: break-word; } .showcase__signals .tag { flex-shrink: 0; margin-top: 1px; } .showcase__rail-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; } .showcase__rail-foot .mono { display: block; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; word-break: break-word; } .showcase__rail-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--framer-fw-ui); color: var(--ink); } /* ── Bento grid system ───────────────────────────────────── */ .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; } .bento-card { position: relative; min-width: 0; border-radius: var(--ui-radius, 16px); border: 1px solid rgba(255, 255, 255, 0.09); background: linear-gradient(180deg, rgba(14, 14, 16, 0.62) 0%, rgba(8, 8, 10, 0.7) 100%); box-shadow: var(--card-glow); overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .bento-card--span-12 { grid-column: span 12; } .bento-card--span-8 { grid-column: span 8; } .bento-card--span-7 { grid-column: span 7; } .bento-card--span-6 { grid-column: span 6; } .bento-card--span-5 { grid-column: span 5; } .bento-card--span-4 { grid-column: span 4; } .bento-card--span-3 { grid-column: span 3; } .bento-card--accent { box-shadow: var(--card-glow); border-color: rgba(232, 64, 64, 0.22); } /* Platform stats strip */ .platform-strip { padding-block: 24px var(--section-pad, 112px); margin-top: 0; } .bento--platform { align-items: stretch; } .stat-tile { padding: 24px 20px; min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; } .stat-tile__label { font-size: 11px; font-weight: var(--framer-fw-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4); order: -1; } .stat-tile__value { font-family: var(--font-display); font-size: clamp(2.25rem, 3.6vw, 3rem); font-weight: var(--framer-fw-display); letter-spacing: -0.04em; line-height: 1; color: var(--ink); margin-top: 0; } .stat-tile__hint { font-size: 12px; color: var(--ink-3); line-height: 1.45; max-width: 16rem; } .stat-tile--chart .stat-tile__value { margin-top: 0; } .stat-tile--chart { justify-content: center; gap: 12px; } .stat-tile__chart { height: 64px; margin-block: 8px 4px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.02); } .stat-tile__chart svg { width: 100%; height: 100%; } /* Results showcase — live output matches hero preview */ .results-showcase { padding-block: 8px 0; } .results-showcase .showcase { margin-top: 0; } .results-showcase .showcase__search--result { pointer-events: auto; padding: 0 6px 0 14px; } .results-showcase .showcase__addr { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; word-break: break-all; color: var(--ink); background: none; border: 0; padding: 0; } .showcase__copy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } .showcase__copy-btn .icon { width: 13px; height: 13px; opacity: 0.85; } .showcase__entry { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .showcase__entry:empty { display: none; } .showcase__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; } .showcase__facts div { min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); } .showcase__facts div:last-child { grid-column: 1 / -1; } .showcase__facts dt { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); } .showcase__facts dd { margin: 6px 0 0; font-size: 13px; line-height: 1.4; font-weight: var(--framer-fw-ui); color: var(--ink); overflow-wrap: anywhere; word-break: break-word; } .showcase__note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); } .showcase__signal-detail { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--ink-4); font-weight: 400; } .showcase__deep { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 18px 20px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); } .showcase__deep-copy { min-width: 0; flex: 1 1 16rem; } .showcase__deep-kicker { margin: 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); } .showcase__deep-title { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--framer-fw-display); letter-spacing: -0.02em; color: var(--ink); } .showcase__deep-line { margin: 6px 0 0; max-width: 36rem; font-size: 13px; line-height: 1.5; color: var(--ink-3); } .showcase__deep-actions { display: grid; gap: 8px; justify-items: end; flex: 0 0 auto; } .showcase__deep-actions .btn { white-space: nowrap; } .showcase__deep-fee { margin: 0; font-size: 12px; color: var(--ink-4); text-align: right; } #verdictBlock.is-listed .showcase__deep { border-top-color: rgba(255, 107, 107, 0.22); background: linear-gradient(180deg, rgba(255, 107, 107, 0.08), rgba(255, 255, 255, 0.01)); } #verdictBlock.is-listed .showcase__verdict { border-color: rgba(255, 107, 107, 0.28); background: rgba(255, 107, 107, 0.1); color: var(--review-ink, #ff8a8a); } #verdictBlock.is-listed .showcase__pill { border-color: rgba(255, 107, 107, 0.35); color: var(--review-ink, #ff8a8a); } #verdictBlock.is-error .showcase__verdict { border-color: rgba(245, 180, 72, 0.32); background: rgba(245, 180, 72, 0.1); color: #f0c36a; } #verdictBlock.is-error .showcase__pill { border-color: rgba(245, 180, 72, 0.4); color: #f0c36a; } #verdictBlock.is-error .showcase__deep { border-top-color: rgba(245, 180, 72, 0.2); background: linear-gradient(180deg, rgba(245, 180, 72, 0.06), rgba(255, 255, 255, 0.01)); } .showcase__signals .tag-na { color: var(--ink-3); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } .results-showcase .showcase__metrics.is-loading strong, .results-showcase .showcase__metrics.is-loading em { opacity: 0.55; } @media (max-width: 900px) { .showcase__facts { grid-template-columns: 1fr; } .showcase__facts div:last-child { grid-column: auto; } .showcase__deep { flex-direction: column; align-items: stretch; } .showcase__deep-actions { justify-items: stretch; } .showcase__deep-actions .btn { width: 100%; justify-content: center; } .showcase__deep-fee { text-align: left; } } /* Legacy results bento (unused on blacklist checker home) */ .results-bento { padding-block: 24px 0; } .results-bento .live-report, .results-bento .live-context, .results-bento .live-deep { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .results-bento .live-report { padding: 24px; } .results-bento .live-context { margin-top: 0; padding: 24px; border-top: 1px solid var(--line); } .results-bento .live-deep { margin-top: 0; padding: 24px; flex-direction: column; align-items: flex-start; border-left: 1px solid var(--line); } .bento--results { align-items: stretch; } .bento--results > .bento-card--span-12 { padding: 0; } .bento--results > .bento-card--span-8, .bento--results > .bento-card--span-4 { padding: 0; display: flex; flex-direction: column; } /* Steps bento */ .bento--steps .step { padding: 1.5rem 1.4rem; border-top: 0; } .bento--steps .step:hover { transform: none; box-shadow: none; } body.site-scam .bento--steps .bento-card:first-child { box-shadow: none; } /* Meaning / coverage */ .bento--meaning .meaning__col { padding: 1.5rem 1.4rem; } .bento--meaning .coverage { margin-top: 0; padding: 1.5rem 1.4rem; } .bento--meaning .meaning__col:hover, .bento--meaning .coverage:hover { transform: none; } /* Desk bento */ .bento--desk .desk-intro { padding: 1.75rem 1.55rem; } .bento--desk .desk-notes { display: grid; gap: 10px; padding: 0; border: 0; background: transparent; box-shadow: none; } .bento--desk .desk-note { padding: 1.35rem 1.4rem; } .bento--desk .desk-note:hover { transform: none; box-shadow: none; } /* Explore + FAQ cards */ .bento--explore .index-col { padding: 1.35rem 1.25rem; min-height: 0; } .faq__aside, .faq__list { padding: 0; } .faq__list .qa, .faq details { border: 0; border-radius: 0; background: transparent; } /* Live cards inherit bento glow when wrapped */ #results .bento-card, .platform-strip .bento-card, .bento--steps .bento-card, .bento--meaning .bento-card, .bento--desk .bento-card, .bento--explore .bento-card, .faq__aside.bento-card, .faq__list.bento-card { isolation: isolate; } .tool-glance > div { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); } @media (max-width: 900px) { .showcase__layout { grid-template-columns: 1fr; } .showcase__main { border-right: 0; border-bottom: 1px solid var(--line); } .showcase__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-card--span-8, .bento-card--span-7, .bento-card--span-6, .bento-card--span-5, .bento-card--span-4, .bento-card--span-3 { grid-column: span 12; } .results-bento .live-deep { border-left: 0; border-top: 1px solid var(--line); } .bento--desk .desk-notes { margin-top: 0; } } @media (max-width: 640px) { .container--showcase { margin-top: 32px; padding-inline: var(--sp-4); } .showcase__frame { border-radius: 16px; } .stat-tile { min-height: 132px; padding: 20px 16px; } .stat-tile__value { font-size: clamp(1.85rem, 7vw, 2.4rem); } } /* ── Light theme: bento + showcase ─────────────────────────── */ [data-theme="light"] .showcase__aura { background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 52%), radial-gradient(circle at 72% 24%, rgba(232, 64, 64, 0.08) 0%, transparent 48%); } [data-theme="light"] .showcase__frame { background: var(--surface); border-color: var(--line-strong); box-shadow: none; } [data-theme="light"] .showcase__bar, [data-theme="light"] .showcase__main, [data-theme="light"] .showcase__rail { background: transparent; } [data-theme="light"] .showcase__search, [data-theme="light"] .showcase__metrics > div, [data-theme="light"] .showcase__signals li { background: var(--bg-sunken); border-color: var(--line-strong); } [data-theme="light"] .step:hover { transform: none; box-shadow: none; } [data-theme="light"] .bento-card { background: var(--surface); border: 1px solid var(--line); box-shadow: none; } [data-theme="light"] .bento--steps .bento-card:first-child, [data-theme="light"] .bento--steps .bento-card:first-child:hover, [data-theme="light"] .step:hover, [data-theme="light"] .meaning__col:hover, [data-theme="light"] .desk-note:hover { box-shadow: none; transform: none; border-color: var(--line); } [data-theme="light"] .bento--steps .bento-card:first-child { border-color: var(--line-strong); } [data-theme="light"] .checker__row { background: var(--surface); border-color: var(--line-strong); box-shadow: none; } [data-theme="light"] .checker__field { background: var(--bg-sunken) !important; } [data-theme="light"] .checker__paste { background: var(--surface); } [data-theme="light"] .nav { background: color-mix(in srgb, var(--bg) 82%, transparent); } [data-theme="light"] .hero__mesh--a, [data-theme="light"] .hero__mesh--b, [data-theme="light"] .hero__mesh--c { opacity: 0.85; } [data-theme="light"] .tool-glance > div, [data-theme="light"] .bento--desk .desk-note, [data-theme="light"] .faq__list .qa, [data-theme="light"] .faq details { background: var(--bg-sunken); border-color: var(--line-strong); } [data-theme="light"] .nav.is-open::after { background: rgba(16, 18, 22, 0.28); } [data-theme="light"] .nav__menu { background: color-mix(in srgb, var(--bg) 94%, transparent); } /* ── Telegram help launcher ───────────────────────────────── */ .tg-help { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .tg-help__fab, .tg-help__panel, .tg-help__close, .tg-help__cta { pointer-events: auto; } .tg-help__fab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: #f5f5f7; color: #08080a; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; box-shadow: 0 12px 40px -18px rgba(0, 0, 0, 0.65); cursor: pointer; transition: transform 220ms var(--ease-spring, cubic-bezier(0.34, 1.45, 0.64, 1)), background 180ms ease, opacity 180ms ease; } .tg-help__fab:hover { background: #ffffff; transform: translateY(-1px); } .tg-help.is-open .tg-help__fab { opacity: 0.92; } .tg-help__fab .icon { flex: none; } .tg-help__panel { position: relative; width: min(292px, calc(100vw - 2rem)); padding: 18px 18px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(80% 60% at 100% 0%, rgba(232, 64, 64, 0.14), transparent 55%), #0c0c0e; color: var(--ink, #f5f5f7); box-shadow: 0 24px 64px -28px rgba(0, 0, 0, 0.7); transform-origin: 100% 100%; transform: translateY(8px) scale(0.98); opacity: 0; visibility: hidden; transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s; } .tg-help.is-open .tg-help__panel { transform: none; opacity: 1; visibility: visible; } .tg-help__panel[hidden] { display: block !important; } .tg-help:not(.is-open) .tg-help__panel[hidden] { display: none !important; } .tg-help__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--ink-3, #787880); cursor: pointer; } .tg-help__close:hover { color: var(--ink, #f5f5f7); background: rgba(255, 255, 255, 0.1); } .tg-help__kicker { margin: 0 28px 6px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4, #55555c); } .tg-help__title { margin: 0 28px 8px 0; font-family: var(--font-display, var(--font-body)); font-size: 1.05rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink, #f5f5f7); } .tg-help__body { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--ink-2, #a8a8b0); } .tg-help__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 14px; border-radius: 999px; background: #2aabee; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity 180ms ease, transform 180ms ease; } .tg-help__cta:hover { opacity: 0.94; color: #fff; text-decoration: none; transform: translateY(-1px); } @media (max-width: 720px) { .tg-help { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); right: max(0.85rem, env(safe-area-inset-right)); } .tg-help__fab-label { display: none; } .tg-help__fab { width: 48px; height: 48px; padding: 0; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .tg-help__fab, .tg-help__panel, .tg-help__cta { transition: none; } }