/* ResumeRadar — styles.css * --------------------------------------------------------------------------- * Premium dark redesign: deep navy + teal, layered surfaces, soft depth and a * tasteful accent glow. Built to the polish bar of Linear / Vercel / Stripe, * while staying honest + trustworthy for a privacy-first resume tool. * * Plain CSS, no framework build. System font stack only (zero network cost — * the privacy/offline promise stays intact; no webfonts, no sw.js change). * Custom properties on :root drive theming so pro.js (white-label, OTO2) can * override --rr-accent / --rr-logo at runtime. * * KEY BEHAVIORS THE CONTRACT DEPENDS ON: * - Every --rr-* custom property in the DOM contract §3 is still defined. * - Every class the JS toggles/reads is preserved + styled. * - Entrance animation is PURE progressive enhancement: .reveal content is * visible by default; it only hides-then-fades when * is present (set inline before paint) AND motion isn't reduced. So no JS, * no IntersectionObserver, or reduced motion => everything is visible. * --------------------------------------------------------------------------- */ /* =========================================================== DESIGN TOKENS = */ :root { color-scheme: dark; /* Brand — navy + teal. --rr-accent is teal (the action color); navy is the structural ink. Names kept exactly as pro.js / injected Pro CSS expect. */ --rr-navy: #0e2a47; --rr-navy-700: #13345b; --rr-navy-900: #081b30; --rr-accent: #2dd4bf; /* teal 400 — primary action on dark */ --rr-accent-strong: #5eead4; /* teal 300 — hover / brighter */ --rr-accent-deep: #0d9488; /* teal 600 — solid fills / shadows */ --rr-accent-soft: #0f3b39; /* teal tint surface on dark */ /* White-label logo override slot — pro.js (OTO2) writes a url() here at runtime. Kept defined so the property always exists for the cascade. */ --rr-logo: none; /* Layered dark surfaces (real depth, not flat) */ --rr-bg: #07101e; /* page floor */ --rr-bg-2: #0a1626; /* nav / banded sections */ --rr-surface: #0f1d31; /* cards / panels */ --rr-surface-2: #142640; /* inset fields, nested surfaces */ --rr-surface-3: #1a2f4d; /* hover / raised */ --rr-text: #e9f1fb; --rr-text-muted: #9fb2cc; --rr-text-dim: #6f859f; --rr-border: #1e3354; --rr-border-strong: #2c476f; --rr-good: #34d399; --rr-good-soft: #0e3328; --rr-good-text: #5ce0ac; --rr-warn: #f5b945; --rr-warn-soft: #3a2c0d; --rr-warn-text: #f7c768; --rr-bad: #f4707f; --rr-bad-soft: #3a1620; --rr-bad-text: #f88e9b; /* Radii */ --rr-radius: 16px; --rr-radius-sm: 10px; --rr-radius-lg: 22px; /* Elevation — soft, layered, dark-tuned + an accent halo for hero/featured */ --rr-shadow-sm: 0 1px 2px rgba(0,0,0,.5); --rr-shadow: 0 2px 8px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.55); --rr-shadow-lg: 0 36px 90px rgba(0,0,0,.62); --rr-glow: 0 0 0 1px rgba(45,212,191,.18), 0 22px 70px rgba(13,148,136,.28); --rr-ring: 0 0 0 4px rgba(45, 212, 191, .32); /* System font stack — zero network cost */ --rr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --rr-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --rr-maxw: 1200px; --rr-maxw-narrow: 880px; /* Fluid type scale (clamp) */ --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --fs-sm: clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem); --fs-base: clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem); --fs-md: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); --fs-lg: clamp(1.25rem, 1.10rem + 0.75vw, 1.7rem); --fs-xl: clamp(1.6rem, 1.30rem + 1.40vw, 2.4rem); --fs-2xl: clamp(2.1rem, 1.55rem + 2.7vw, 3.6rem); --fs-3xl: clamp(2.6rem, 1.8rem + 3.8vw, 4.6rem); /* Spacing scale (fluid) — consistent vertical rhythm */ --sp-1: clamp(0.25rem, 0.22rem + 0.15vw, 0.4rem); --sp-2: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem); --sp-3: clamp(0.75rem, 0.65rem + 0.5vw, 1.1rem); --sp-4: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); --sp-6: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); --sp-8: clamp(2rem, 1.5rem + 2.4vw, 3.6rem); --sp-12: clamp(3rem, 2.2rem + 3.8vw, 5.5rem); /* Motion */ --ease: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --t-fast: .15s; --t-mid: .28s; --t-slow: .5s; } /* Optional light preference — keep a tasteful light variant, but the brand is dark-first. (color-scheme above keeps form controls dark by default.) */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --rr-accent: #0d9488; --rr-accent-strong: #0b7d73; --rr-accent-deep: #0b7d73; --rr-accent-soft: #d4f3ef; --rr-bg: #eef3f9; --rr-bg-2: #e6edf6; --rr-surface: #ffffff; --rr-surface-2: #f1f6fb; --rr-surface-3: #e9f1fa; --rr-text: #0e2a47; --rr-text-muted: #51637c; --rr-text-dim: #6f829a; --rr-border: #e0e8f2; --rr-border-strong: #c4d3e5; --rr-good: #0f9d58; --rr-good-soft: #dcf5e7; --rr-good-text: #0b7a44; --rr-warn: #c2790b; --rr-warn-soft: #fcefcf; --rr-warn-text: #9a5b00; --rr-bad: #d63b48; --rr-bad-soft: #fde3e5; --rr-bad-text: #bb2030; --rr-shadow-sm: 0 1px 2px rgba(14, 42, 71, .06); --rr-shadow: 0 2px 6px rgba(14, 42, 71, .06), 0 14px 40px rgba(14, 42, 71, .08); --rr-shadow-lg: 0 24px 70px rgba(14, 42, 71, .14); --rr-glow: 0 0 0 1px rgba(13,148,136,.18), 0 22px 60px rgba(13,148,136,.20); --rr-ring: 0 0 0 4px var(--rr-accent-soft); } } /* =============================================================== RESET ===== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--rr-font); font-size: var(--fs-base); color: var(--rr-text); background: var(--rr-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 800; color: var(--rr-text); } p { margin: 0; } img, svg { max-width: 100%; } :target { scroll-margin-top: 90px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Global focus ring — accessibility, non-negotiable */ :focus-visible { outline: 3px solid var(--rr-accent); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--rr-accent-deep); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; box-shadow: var(--rr-shadow); } .skip-link:focus { left: 0; outline: 3px solid var(--rr-accent); } .wrap { max-width: var(--rr-maxw); margin-inline: auto; padding-inline: clamp(1rem, 0.5rem + 3vw, 2.5rem); } /* =============================================================== BUTTONS === */ .btn { font: inherit; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; border-radius: 999px; padding: 12px 22px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn svg { flex: 0 0 auto; } .btn:focus-visible { outline: none; box-shadow: var(--rr-ring); } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { background: linear-gradient(180deg, var(--rr-accent-strong), var(--rr-accent)); color: #052420; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px rgba(13,148,136,.40); } .btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 14px 32px rgba(13,148,136,.50); } .btn--ghost { background: var(--rr-surface-2); color: var(--rr-text); border-color: var(--rr-border-strong); } .btn--ghost:hover:not(:disabled) { background: var(--rr-surface-3); border-color: var(--rr-accent); color: var(--rr-accent-strong); transform: translateY(-1px); } .btn--navy { background: var(--rr-surface-3); color: var(--rr-text); border-color: var(--rr-border-strong); } .btn--navy:hover:not(:disabled) { background: var(--rr-surface-2); border-color: var(--rr-accent); color: var(--rr-accent-strong); transform: translateY(-2px); } .btn--lg { padding: 16px 30px; font-size: var(--fs-md); } .btn--sm { padding: 9px 16px; min-height: 38px; font-size: var(--fs-sm); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: saturate(.6); } .btn--scan { width: 100%; padding: 16px; font-size: var(--fs-md); margin-top: var(--sp-1); } .linklike { background: none; border: 0; color: var(--rr-accent-strong); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 2px; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; border-radius: 6px; transition: color var(--t-fast); } .linklike:hover { color: var(--rr-accent); } .linklike:focus-visible { outline: none; box-shadow: var(--rr-ring); } /* =============================================================== TOP BAR === */ .topbar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--rr-bg-2) 80%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--rr-border); } .topbar__inner { max-width: var(--rr-maxw); margin: 0 auto; padding: 10px clamp(1rem, 0.5rem + 3vw, 2.5rem); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* ---- CSS + inline-SVG wordmark (no PNG-on-white anywhere) ---- */ .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--rr-text); } .brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: linear-gradient(160deg, var(--rr-surface-3), var(--rr-surface)); border: 1px solid var(--rr-border-strong); color: var(--rr-text); box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); } .brand__mark svg { display: block; } .brand__mark--sm { width: 30px; height: 30px; border-radius: 9px; } /* #brandLogo stays an for pro.js white-label override, but is HIDDEN in the default (un-branded) state so we never show the PNG-on-anything. pro.js swaps its .src to a data: URL when a coach white-labels; we key off that with no pro.js change: a data:-URL logo is shown and the SVG mark is hidden in its place. */ .brand__logo { display: none; width: 30px; height: 30px; object-fit: contain; border-radius: 8px; } .brand__logo[src^="data:"] { display: block; } .brand:has(.brand__logo[src^="data:"]) .brand__mark { display: none; } /* explicit class hook too, in case pro.js (or a future build) opts to set it */ .brand--wl .brand__mark { display: none; } .brand--wl .brand__logo { display: block; } .brand__name { font-weight: 800; font-size: 1.22rem; letter-spacing: -.025em; } .brand__accent { color: var(--rr-accent); } .privacy-badge { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; background: var(--rr-good-soft); color: var(--rr-good-text); border: 1px solid color-mix(in srgb, var(--rr-good) 30%, transparent); padding: 7px 13px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; } .privacy-badge svg { flex: 0 0 auto; } .topbar__actions { display: flex; align-items: center; gap: var(--sp-2); } .entitlement-chip { font-size: var(--fs-xs); font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--rr-surface-2); color: var(--rr-text-muted); border: 1px solid var(--rr-border); } .entitlement-chip[data-tier="core"], .entitlement-chip[data-tier="pro"] { background: var(--rr-accent-soft); color: var(--rr-accent-strong); border-color: color-mix(in srgb, var(--rr-accent) 38%, transparent); } @media (max-width: 620px) { .privacy-badge span { display: none; } .privacy-badge { margin-left: auto; padding: 9px; } } /* =============================================================== HERO ====== */ .hero { position: relative; overflow: hidden; background: radial-gradient(1200px 560px at 86% -12%, color-mix(in srgb, var(--rr-accent-deep) 30%, transparent), transparent 60%), radial-gradient(900px 620px at -8% 8%, color-mix(in srgb, var(--rr-navy) 60%, transparent), transparent 55%), var(--rr-bg); } /* subtle moving accent glow behind the preview — purely decorative */ .hero__glow { position: absolute; top: -10%; right: -6%; width: 620px; height: 620px; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--rr-accent) 26%, transparent), transparent 62%); filter: blur(10px); opacity: .8; z-index: 0; } .hero__inner { position: relative; z-index: 1; max-width: var(--rr-maxw); margin: 0 auto; padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(1rem, 0.5rem + 3vw, 2.5rem) var(--sp-12); display: grid; grid-template-columns: 1.02fr 0.98fr; gap: var(--sp-8); align-items: center; } @media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); } } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--rr-accent-strong); background: var(--rr-accent-soft); border: 1px solid color-mix(in srgb, var(--rr-accent) 30%, transparent); padding: 6px 14px; border-radius: 999px; margin-bottom: var(--sp-3); } .hero__title { font-size: var(--fs-3xl); letter-spacing: -.038em; } .hero__title .grad { background: linear-gradient(100deg, var(--rr-accent-strong), var(--rr-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { font-size: var(--fs-md); color: var(--rr-text-muted); margin-top: var(--sp-4); max-width: 38ch; line-height: 1.6; } .hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } .hero__trust { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); list-style: none; padding: 0; } .hero__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--rr-text); } .hero__trust svg { color: var(--rr-accent); flex: 0 0 auto; } /* big privacy assurance card in hero */ .hero__shield { margin-top: var(--sp-6); display: inline-flex; align-items: center; gap: 12px; background: var(--rr-surface); border: 1px solid var(--rr-border); box-shadow: var(--rr-shadow-sm); padding: 12px 16px; border-radius: var(--rr-radius); } .hero__shield svg { color: var(--rr-good); flex: 0 0 auto; } .hero__shield b { display: block; font-size: var(--fs-sm); color: var(--rr-text); } .hero__shield span { font-size: var(--fs-xs); color: var(--rr-text-muted); } /* ---- HERO VISUAL ANCHOR: realistic product-preview card (pure HTML/CSS) ---- */ .hero__media { position: relative; display: flex; justify-content: center; } .preview { width: min(100%, 460px); background: linear-gradient(180deg, var(--rr-surface), var(--rr-bg-2)); border: 1px solid var(--rr-border-strong); border-radius: var(--rr-radius-lg); box-shadow: var(--rr-glow), var(--rr-shadow-lg); overflow: hidden; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform var(--t-slow) var(--ease); } .hero:hover .preview { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-4px); } .preview__chrome { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--rr-bg-2); border-bottom: 1px solid var(--rr-border); } .preview__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rr-border-strong); } .preview__dot:first-child { background: #f4707f; } .preview__dot:nth-child(2) { background: #f5b945; } .preview__dot:nth-child(3) { background: #34d399; } .preview__url { margin-left: 8px; font-size: var(--fs-xs); color: var(--rr-text-dim); font-weight: 600; font-family: var(--rr-font-mono); letter-spacing: -.01em; } .preview__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); } .preview__scorebar { display: flex; align-items: center; gap: var(--sp-4); } .preview__gauge { position: relative; flex: 0 0 auto; width: 104px; height: 104px; } .preview__gtrack { fill: none; stroke: var(--rr-border); stroke-width: 11; } .preview__gfill { fill: none; stroke: var(--rr-good); stroke-width: 11; stroke-linecap: round; /* r=52 => circumference ~326.7; 82% filled => offset ~58.8 */ stroke-dasharray: 326.7; stroke-dashoffset: 58.8; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rr-good) 55%, transparent)); } .preview__gnum { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .preview__gnum b { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--rr-text); } .preview__gnum b i { font-size: 1rem; font-style: normal; color: var(--rr-text-muted); margin-left: 1px; } .preview__gnum span { font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rr-text-dim); font-weight: 700; margin-top: 3px; } .preview__meta { min-width: 0; } .preview__metatitle { font-weight: 800; font-size: var(--fs-base); color: var(--rr-text); } .preview__metasub { font-size: var(--fs-xs); color: var(--rr-text-muted); margin-top: 2px; } .preview__minibars { display: flex; gap: 6px; margin-top: 10px; } .preview__mb { flex: 1 1 0; height: 6px; background: var(--rr-border); border-radius: 999px; overflow: hidden; } .preview__mb i { display: block; height: 100%; background: var(--rr-accent); border-radius: 999px; } .preview__row { display: flex; flex-direction: column; gap: 7px; } .preview__label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; } .preview__label--ok { color: var(--rr-good-text); } .preview__label--warn { color: var(--rr-warn-text); } .preview__chips { display: flex; flex-wrap: wrap; gap: 6px; } .pchip { font-size: var(--fs-xs); font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; } .pchip--ok { background: var(--rr-good-soft); color: var(--rr-good-text); border-color: color-mix(in srgb, var(--rr-good) 34%, transparent); } .pchip--warn { background: var(--rr-warn-soft); color: var(--rr-warn-text); border-color: color-mix(in srgb, var(--rr-warn) 34%, transparent); } .preview__finding { display: flex; align-items: center; gap: 9px; font-size: var(--fs-xs); font-weight: 700; color: var(--rr-warn-text); background: var(--rr-warn-soft); border: 1px solid color-mix(in srgb, var(--rr-warn) 30%, transparent); border-radius: var(--rr-radius-sm); padding: 9px 12px; } .preview__finding svg { flex: 0 0 auto; color: var(--rr-warn); } .preview__badge { position: absolute; bottom: -14px; left: 18px; display: inline-flex; align-items: center; gap: 6px; background: var(--rr-surface-3); color: var(--rr-good-text); border: 1px solid color-mix(in srgb, var(--rr-good) 32%, transparent); font-size: var(--fs-xs); font-weight: 800; padding: 7px 13px; border-radius: 999px; box-shadow: var(--rr-shadow); } .preview__badge svg { color: var(--rr-good); } @media (max-width: 940px) { .preview { transform: none; } .hero:hover .preview { transform: translateY(-2px); } } /* =============================================================== SECTIONS = */ .section { padding-block: var(--sp-12); position: relative; } .section--tint { background: var(--rr-bg-2); border-block: 1px solid var(--rr-border); } .section__head { max-width: 640px; margin: 0 auto var(--sp-8); text-align: center; } .section__eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rr-accent-strong); margin-bottom: var(--sp-2); } .section__title { font-size: var(--fs-xl); } .section__sub { color: var(--rr-text-muted); margin-top: var(--sp-3); font-size: var(--fs-md); } /* =============================================================== TOOL ===== */ .tool { scroll-margin-top: 80px; } .tool__inner { max-width: var(--rr-maxw); margin: 0 auto; padding-inline: clamp(1rem, 0.5rem + 3vw, 2.5rem); } .tool__head { text-align: center; margin-bottom: var(--sp-6); } .tool__head h2 { font-size: var(--fs-xl); } .tool__head p { color: var(--rr-text-muted); margin-top: var(--sp-2); max-width: 60ch; margin-inline: auto; } .layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-4); align-items: start; } @media (max-width: 940px) { .layout { grid-template-columns: 1fr; } } .panel { background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg); box-shadow: var(--rr-shadow); padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); } .panel--input { position: relative; } .panel--results { position: sticky; top: 80px; } @media (max-width: 940px) { .panel--results { position: static; } } .panel__heading { font-size: var(--fs-lg); } .panel__sub { color: var(--rr-text-muted); margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-sm); } /* =============================================================== FIELDS === */ .field-group { margin-bottom: var(--sp-4); } .field-group__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--sp-2); } .field-group__title { font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rr-text-muted); display: flex; align-items: center; gap: 8px; } .field-group__title .step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rr-accent); color: #052420; font-size: .7rem; font-weight: 800; } .field { display: block; } .field__label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; color: var(--rr-text); } .field__input { width: 100%; font: inherit; color: var(--rr-text); background: var(--rr-surface-2); border: 1.5px solid var(--rr-border); border-radius: var(--rr-radius-sm); padding: 12px 14px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast); } .field__input::placeholder { color: var(--rr-text-dim); opacity: 1; } .field__input:hover { border-color: var(--rr-border-strong); } .field__input:focus-visible { outline: none; border-color: var(--rr-accent); box-shadow: var(--rr-ring); background: var(--rr-surface-3); } .field__input--area { resize: vertical; min-height: 110px; line-height: 1.55; } .field__input--key { font-family: var(--rr-font-mono); font-size: var(--fs-sm); } .field__input--select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239fb2cc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .field__input--select option { color: #0e2a47; } .badge-pro { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: linear-gradient(120deg, var(--rr-accent), var(--rr-accent-deep)); color: #052420; padding: 3px 9px; border-radius: 999px; } /* =============================================================== DROPZONE = */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: clamp(1.4rem, 1rem + 2vw, 2.2rem) 18px; min-height: 150px; border: 2px dashed var(--rr-border-strong); border-radius: var(--rr-radius); background: var(--rr-surface-2); cursor: pointer; color: var(--rr-text-muted); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .dropzone svg { transition: transform var(--t-mid) var(--ease); color: var(--rr-accent); } .dropzone:hover, .dropzone:focus-visible { border-color: var(--rr-accent); color: var(--rr-accent-strong); outline: none; background: var(--rr-accent-soft); } .dropzone:hover svg { transform: translateY(-3px); } .dropzone:focus-visible { box-shadow: var(--rr-ring); } .dropzone.is-drag { border-color: var(--rr-accent); background: var(--rr-accent-soft); color: var(--rr-accent-strong); transform: scale(1.01); } .dropzone.is-drag svg { transform: translateY(-4px) scale(1.08); } .dropzone__main { font-weight: 800; color: var(--rr-text); font-size: var(--fs-base); } .dropzone.is-drag .dropzone__main, .dropzone:hover .dropzone__main { color: var(--rr-accent-strong); } .dropzone__sub { font-size: var(--fs-xs); } .filemeta { margin-top: var(--sp-2); padding: 12px 14px; border-radius: var(--rr-radius-sm); background: var(--rr-good-soft); color: var(--rr-good-text); font-size: var(--fs-sm); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid color-mix(in srgb, var(--rr-good) 30%, transparent); } .filemeta.is-error { background: var(--rr-bad-soft); color: var(--rr-bad-text); border-color: color-mix(in srgb, var(--rr-bad) 30%, transparent); } .filemeta__clear { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; min-height: 32px; padding: 4px 6px; border-radius: 6px; } .filemeta__clear:focus-visible { outline: none; box-shadow: var(--rr-ring); } .scan-hint { font-size: var(--fs-xs); color: var(--rr-text-muted); margin-top: var(--sp-2); text-align: center; } /* =============================================================== EMPTY ==== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 360px; color: var(--rr-text-muted); text-align: center; border: 1px dashed var(--rr-border); border-radius: var(--rr-radius); background: var(--rr-surface-2); } .empty-state svg { opacity: .4; color: var(--rr-accent); } .empty-state p { font-weight: 700; max-width: 24ch; color: var(--rr-text); } .empty-state__hint { font-size: var(--fs-xs); color: var(--rr-text-dim); max-width: 28ch; } /* =============================================================== GAUGE ==== */ .score-block { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-6); } .gauge { position: relative; flex: 0 0 auto; } .gauge svg { display: block; } .gauge__track { fill: none; stroke: var(--rr-border); stroke-width: 12; } .gauge__fill { fill: none; stroke: var(--rr-accent); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .9s var(--ease), stroke var(--t-slow); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rr-accent) 55%, transparent)); } .gauge__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gauge__num { font-size: clamp(2.4rem, 2rem + 1.5vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--rr-text); } .gauge__label { font-size: var(--fs-xs); color: var(--rr-text-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .subscores { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: var(--sp-3); } .subscore__head { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 5px; } .bar { height: 9px; background: var(--rr-border); border-radius: 999px; overflow: hidden; } .bar__fill { height: 100%; width: 0; background: var(--rr-accent); border-radius: 999px; transition: width .85s var(--ease), background var(--t-slow); } .score-caption { font-size: var(--fs-sm); color: var(--rr-text-muted); margin-top: 4px; } /* score color states applied via JS toggling these on gauge + bar ancestors */ .is-good { --rr-accent: var(--rr-good); } .is-warn { --rr-accent: var(--rr-warn); } .is-bad { --rr-accent: var(--rr-bad); } /* =============================================================== RESULTS == */ .result-section { padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--rr-border); } .result-section__title { font-size: var(--fs-md); font-weight: 800; display: flex; align-items: center; gap: 9px; } .result-section__hint { color: var(--rr-text-muted); font-size: var(--fs-sm); margin: 5px 0 var(--sp-3); } .count { font-size: var(--fs-xs); font-weight: 800; background: var(--rr-surface-2); color: var(--rr-text-muted); border: 1px solid var(--rr-border); border-radius: 999px; padding: 2px 9px; } /* =============================================================== CHIPS ==== */ .chips-group__title { font-size: var(--fs-sm); font-weight: 800; margin: var(--sp-3) 0 var(--sp-2); color: var(--rr-text-muted); display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .03em; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; min-height: 34px; border: 1.5px solid var(--rr-border-strong); background: var(--rr-surface-2); color: var(--rr-text); border-radius: 999px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 7px; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .chip:hover { border-color: var(--rr-accent); transform: translateY(-1px); } .chip:active { transform: scale(.96); } .chip:focus-visible { outline: none; box-shadow: var(--rr-ring); } .chip--must { background: var(--rr-bad-soft); border-color: color-mix(in srgb, var(--rr-bad) 38%, transparent); color: var(--rr-bad-text); } .chip--nice { background: var(--rr-warn-soft); border-color: color-mix(in srgb, var(--rr-warn) 38%, transparent); color: var(--rr-warn-text); } .chips--matched .chip { background: var(--rr-good-soft); border-color: color-mix(in srgb, var(--rr-good) 38%, transparent); color: var(--rr-good-text); cursor: default; } .chips--matched .chip:hover { border-color: color-mix(in srgb, var(--rr-good) 38%, transparent); transform: none; } .chip__via { font-size: .66rem; font-weight: 800; opacity: .75; text-transform: uppercase; letter-spacing: .03em; } .chip__copy { opacity: .6; } /* =============================================================== ATS ===== */ .issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .issue { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: start; padding: 13px 15px; border-radius: var(--rr-radius-sm); border: 1px solid var(--rr-border); background: var(--rr-surface-2); } .issue__sev { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; align-self: start; } .issue--error .issue__sev { background: var(--rr-bad-soft); color: var(--rr-bad-text); } .issue--warning .issue__sev { background: var(--rr-warn-soft); color: var(--rr-warn-text); } .issue--info .issue__sev { background: var(--rr-accent-soft); color: var(--rr-accent-strong); } .issue--error { border-left: 4px solid var(--rr-bad); } .issue--warning { border-left: 4px solid var(--rr-warn); } .issue--info { border-left: 4px solid var(--rr-accent); } .issue__body { min-width: 0; } .issue__msg { font-weight: 700; font-size: var(--fs-sm); } .issue__fix { font-size: var(--fs-sm); color: var(--rr-text-muted); margin-top: 3px; } .issue__fix::before { content: "Fix: "; font-weight: 800; color: var(--rr-text); } /* =============================================================== COVERAGE = */ .coverage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; } .coverage li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 700; padding: 10px 12px; border-radius: var(--rr-radius-sm); background: var(--rr-surface-2); border: 1px solid var(--rr-border); } .coverage .tick { width: 18px; height: 18px; flex: 0 0 auto; } .coverage .ok { color: var(--rr-good); } .coverage .no { color: var(--rr-bad); } /* =============================================================== ACTIONS == */ .actions { margin: 0; padding-left: 0; list-style: none; counter-reset: act; display: flex; flex-direction: column; gap: 10px; } .actions li { counter-increment: act; position: relative; padding: 13px 15px 13px 50px; border: 1px solid var(--rr-border); border-radius: var(--rr-radius-sm); background: var(--rr-surface-2); } .actions li::before { content: counter(act); position: absolute; left: 13px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--rr-accent); color: #052420; font-size: .82rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .action__title { font-weight: 800; font-size: var(--fs-sm); } .action__detail { font-size: var(--fs-sm); color: var(--rr-text-muted); margin-top: 3px; } /* =============================================================== EXPORT === */ .export-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .muted { color: var(--rr-text-muted); font-size: var(--fs-xs); } /* =============================================================== UPSELL === */ .upsell { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--rr-radius); text-align: center; background: linear-gradient(135deg, var(--rr-accent-soft), var(--rr-surface-2)); border: 1px solid color-mix(in srgb, var(--rr-accent) 32%, transparent); } .upsell p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); color: var(--rr-text); } /* gated regions when locked: blur + non-interactive */ .is-locked .gated { filter: blur(5px); pointer-events: none; user-select: none; opacity: .85; } /* =============================================================== HOW-IT-WORKS */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } } .step-card { position: relative; background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: var(--sp-6) var(--sp-4); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid); } .section--tint .step-card { background: var(--rr-surface); } .step-card:hover { transform: translateY(-4px); box-shadow: var(--rr-shadow); border-color: color-mix(in srgb, var(--rr-accent) 45%, transparent); } .step-card__num { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: var(--rr-accent-soft); color: var(--rr-accent-strong); border: 1px solid color-mix(in srgb, var(--rr-accent) 30%, transparent); margin-bottom: var(--sp-3); } .step-card__num svg { display: block; } .step-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); } .step-card p { color: var(--rr-text-muted); font-size: var(--fs-sm); } /* =============================================================== FEATURES = */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); } .feature { background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); padding: var(--sp-6) var(--sp-4); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid); } .section--tint .feature { background: var(--rr-surface); } .feature:hover { transform: translateY(-4px); box-shadow: var(--rr-shadow); border-color: color-mix(in srgb, var(--rr-accent) 35%, transparent); } .feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: var(--rr-accent-soft); color: var(--rr-accent-strong); border: 1px solid color-mix(in srgb, var(--rr-accent) 26%, transparent); margin-bottom: var(--sp-3); } .feature h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); } .feature p { color: var(--rr-text-muted); font-size: var(--fs-sm); } /* =============================================================== PRICING == */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: stretch; } @media (max-width: 860px) { .pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } .price-card { position: relative; display: flex; flex-direction: column; background: var(--rr-surface); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg); padding: var(--sp-6); box-shadow: var(--rr-shadow-sm); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid); } .price-card:hover { transform: translateY(-4px); box-shadow: var(--rr-shadow); border-color: var(--rr-border-strong); } .price-card--featured { border: 1.5px solid var(--rr-accent); box-shadow: var(--rr-glow); } .price-card--featured:hover { box-shadow: var(--rr-glow), var(--rr-shadow); } .price-card__tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--rr-accent-strong), var(--rr-accent)); color: #052420; font-size: var(--fs-xs); font-weight: 800; padding: 5px 14px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(13,148,136,.4); } .price-card h3 { font-size: var(--fs-md); } .price-card__price { display: flex; align-items: baseline; gap: 4px; margin: var(--sp-3) 0; } .price-card__amount { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; } .price-card__per { font-size: var(--fs-sm); color: var(--rr-text-muted); font-weight: 600; } .price-card__desc { color: var(--rr-text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-3); } .price-card__list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; } .price-card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-sm); color: var(--rr-text); } .price-card__list svg { color: var(--rr-accent); flex: 0 0 auto; margin-top: 2px; } .price-card .btn { width: 100%; } /* =============================================================== FAQ ====== */ .faq { max-width: var(--rr-maxw-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-2); } .faq__item { border: 1px solid var(--rr-border); border-radius: var(--rr-radius); background: var(--rr-surface); overflow: hidden; transition: border-color var(--t-fast), background var(--t-fast); } .section--tint .faq__item { background: var(--rr-surface); } .faq__item[open] { border-color: color-mix(in srgb, var(--rr-accent) 45%, transparent); } .faq__q { cursor: pointer; list-style: none; padding: var(--sp-4); font-weight: 700; font-size: var(--fs-base); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--rr-text); } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--rr-accent); transition: transform var(--t-fast) var(--ease); line-height: 1; } .faq__item[open] .faq__q::after { transform: rotate(45deg); } .faq__q:hover { color: var(--rr-accent-strong); } .faq__q:focus-visible { outline: none; box-shadow: var(--rr-ring); border-radius: var(--rr-radius); } .faq__a { padding: 0 var(--sp-4) var(--sp-4); color: var(--rr-text-muted); font-size: var(--fs-sm); } /* =============================================================== CTA BAND = */ .cta-band { position: relative; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(135deg, var(--rr-navy), var(--rr-navy-900)); border-top: 1px solid var(--rr-border); } .cta-band__inner { max-width: var(--rr-maxw-narrow); margin: 0 auto; padding: var(--sp-12) clamp(1rem,.5rem+3vw,2.5rem); position: relative; z-index: 1; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 320px at 82% -22%, color-mix(in srgb, var(--rr-accent) 50%, transparent), transparent 60%); pointer-events: none; } .cta-band h2 { font-size: var(--fs-xl); color: #fff; } .cta-band p { color: rgba(255,255,255,.85); margin-top: var(--sp-3); font-size: var(--fs-md); } .cta-band .btn--primary { margin-top: var(--sp-6); } .cta-band__note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: rgba(255,255,255,.7); } /* =============================================================== DIALOG === */ .dialog { border: 1px solid var(--rr-border-strong); border-radius: var(--rr-radius-lg); padding: 0; max-width: 480px; width: calc(100% - 32px); box-shadow: var(--rr-shadow-lg); color: var(--rr-text); background: var(--rr-surface); } .dialog::backdrop { background: rgba(4, 12, 24, .68); backdrop-filter: blur(4px); } .dialog[open] { animation: dialogIn .25s var(--ease); } @keyframes dialogIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .dialog__form { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); display: flex; flex-direction: column; gap: var(--sp-3); } .dialog__title { font-size: var(--fs-lg); } .dialog__desc { color: var(--rr-text-muted); font-size: var(--fs-sm); } .dialog__status { font-size: var(--fs-sm); font-weight: 700; min-height: 1.2em; } .dialog__status.is-error { color: var(--rr-bad-text); } .dialog__status.is-ok { color: var(--rr-good-text); } .dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); flex-wrap: wrap; } .dialog__note { font-size: var(--fs-xs); color: var(--rr-text-muted); border-top: 1px solid var(--rr-border); padding-top: var(--sp-3); } /* =============================================================== TOAST ==== */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: var(--rr-surface-3); color: var(--rr-text); padding: 12px 20px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--rr-shadow-lg); opacity: 0; border: 1px solid var(--rr-border-strong); transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); z-index: 120; max-width: calc(100% - 32px); } .toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } /* =============================================================== FOOTER === */ .sitefooter { background: var(--rr-bg-2); border-top: 1px solid var(--rr-border); } .sitefooter__inner { max-width: var(--rr-maxw); margin: 0 auto; padding: var(--sp-8) clamp(1rem,.5rem+3vw,2.5rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-items: start; } @media (max-width: 700px) { .sitefooter__inner { grid-template-columns: 1fr; } } .sitefooter__brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: var(--sp-3); color: var(--rr-text); } .sitefooter__brand b { font-size: 1.12rem; font-weight: 800; } .sitefooter p { color: var(--rr-text-muted); font-size: var(--fs-sm); max-width: 60ch; } .sitefooter__legal { display: flex; flex-direction: column; gap: 8px; } .sitefooter__legal a { color: var(--rr-text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; transition: color var(--t-fast); } .sitefooter__legal a:hover { color: var(--rr-accent-strong); } .sitefooter__copy { border-top: 1px solid var(--rr-border); margin-top: var(--sp-2); } .sitefooter__copy p { text-align: center; padding: var(--sp-3) 0; font-size: var(--fs-xs); color: var(--rr-text-dim); } /* =============================================================== PHRASE LIB */ .phrase-lib-disclosure { margin-top: var(--sp-3); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-sm); background: var(--rr-surface-2); } .phrase-lib-disclosure > summary { cursor: pointer; font-weight: 800; font-size: var(--fs-sm); padding: 12px 14px; color: var(--rr-text); list-style: none; min-height: 44px; display: flex; align-items: center; } .phrase-lib-disclosure > summary::-webkit-details-marker { display: none; } .phrase-lib-disclosure > summary::before { content: "▸"; color: var(--rr-accent); margin-right: 8px; } .phrase-lib-disclosure[open] > summary::before { content: "▾"; } .phrase-lib-disclosure > summary:focus-visible { outline: none; box-shadow: var(--rr-ring); border-radius: var(--rr-radius-sm); } .phrase-lib { padding: 4px 14px 14px; } .phrase-lib__title { font-size: var(--fs-base); margin: 6px 0 2px; } .phrase-section { margin-top: var(--sp-3); } .phrase-section__title { font-size: var(--fs-xs); font-weight: 800; color: var(--rr-text-muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; } .phrase-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .phrase-copy { font: inherit; font-size: var(--fs-sm); text-align: left; width: 100%; cursor: pointer; min-height: 40px; border: 1px solid var(--rr-border); background: var(--rr-surface); color: var(--rr-text); border-radius: var(--rr-radius-sm); padding: 9px 11px; transition: border-color var(--t-fast), background var(--t-fast); } .phrase-copy:hover { border-color: var(--rr-accent); background: var(--rr-accent-soft); } .phrase-copy:focus-visible { outline: none; box-shadow: var(--rr-ring); } .verb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .verb-group { margin-bottom: 8px; } .verb-group__label { display: block; font-size: var(--fs-xs); font-weight: 800; color: var(--rr-text-muted); margin-bottom: 4px; text-transform: capitalize; } .phrase-tips { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--rr-text-muted); display: flex; flex-direction: column; gap: 4px; } /* =============================================================== SCROLL REVEAL PROGRESSIVE ENHANCEMENT ONLY. By default .reveal content is fully VISIBLE (no opacity:0 in the base rule), so if JS / IntersectionObserver never runs, nothing is hidden — no empty void. Entrance animation is armed ONLY when the inline head script added .js-anim to (JS + IO present + motion allowed); then .reveal hides until .is-in is toggled on by the observer. */ .js-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js-anim .reveal.is-in { opacity: 1; transform: none; } /* hero entrance — also gated behind .js-anim so no-JS shows it instantly */ .js-anim .preview { opacity: 0; animation: previewIn .8s var(--ease) .1s forwards; } @keyframes previewIn { from { opacity: 0; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(20px); } to { opacity: 1; } } @media (max-width: 940px) { .js-anim .preview { animation-name: previewInFlat; } @keyframes previewInFlat { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } } /* =============================================================== REDUCED MOTION Hard kill-switch: no transforms/animations for motion-sensitive users, and everything is shown instantly (defensive belt-and-suspenders alongside the .js-anim gating, which already isn't applied when reduced motion is set). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal, .js-anim .reveal { opacity: 1 !important; transform: none !important; } .preview, .js-anim .preview { opacity: 1 !important; animation: none !important; transform: none !important; } .btn:hover, .chip:hover, .step-card:hover, .feature:hover, .price-card:hover, .dropzone:hover svg, .dropzone:hover, .hero:hover .preview { transform: none !important; } }