/* ============================================================================ HUMBLE — clean rebuild · single stylesheet · recolored to APERTURE ---------------------------------------------------------------------------- 1. DESIGN TOKENS (Aperture; Humble palette switchable via data-palette) 2. Reset & base 3. Layout helpers + eyebrows (pill + inline) 4. Buttons 5. Header 6. Hero (full-bleed media + overlay headline + secondary block + CTA) 7. Device mockup 8. Intro ("Meet Humble") 9. Persona tabs 10. Landscape illustration band 11. Stacked folder cards (Today / With Humble) 12. Comparison table (4 columns, brand column filled) 13. Alternating feature rows 14. Vertical timeline 15. Roadmap cards 16. FAQ (dark accordion) 17. CTA + footer 18. Subpage components 19. Responsive ============================================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* type families — Aperture (Phase 8) */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* type scale */ --fs-hero: 58px; --fs-display: 50px; --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-lead: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-cap: 13px; --fs-micro: 12px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ---- COLOR — APERTURE (Phase 5 recolor; values pulled live + DESIGN.md). Only values changed vs Humble; names/roles identical. Add data-palette="humble" to to compare with the original orange. ---- */ --accent: #0A7E94; /* brand-600: interactive (AA on white) */ --accent-hover: #075E6E; /* brand-700 */ --accent-tint: rgba(10,126,148,0.08); --accent-contrast: #FFFFFF; --accent-bright: #10C8E0; /* electric cyan: decorative dots/glow only */ --bad: #C0142B; --bad-bg: rgba(192,20,43,0.08); /* semantic: state only */ --ink: #0A0F14; --ink-soft: #1A2229; --body: #3A444C; --muted: #6B7780; --faint: #97A2AA; --on-dark: #ECF6F9; --on-dark-muted: #9DB0B8; --canvas: #FCFDFE; --surface: #FFFFFF; --paper: #F2F6F7; --paper-2: #E9EFF1; --paper-3: #E4E8EB; --dark: #05090D; --dark-2: #142029; --line: #E4E8EB; --line-soft: rgba(10,15,20,0.06); --fill-soft: rgba(10,15,20,0.04); --line-on-dark: rgba(255,255,255,0.08); /* radii — Aperture squared (sm 4 · md 8 · lg 12 · xl 16); buttons ~10, never pills */ --r-xs: 4px; --r-sm: 8px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 16px; --r-pill: 10px; --r-full: 50%; /* spacing — Aperture 8-pt */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 96px; --s-11: 128px; /* containers */ --container: 1600px; --container-md: 1000px; --container-sm: 720px; --reading: 640px; /* elevation */ --shadow-card: 0 0.7px 0.7px -0.4px rgba(10,15,20,0.03), 0 3.5px 3.5px -0.3px rgba(10,15,20,0.04), 0 9px 18px -2px rgba(10,15,20,0.06); --shadow-raise: 0 0.84px 0.84px -0.31px rgba(10,15,20,0.10), 0 12px 32px -8px rgba(10,15,20,0.14); --shadow-btn: 0 8px 20px -6px rgba(10,15,20,0.35); --ease-out: cubic-bezier(.2,.8,.2,1); --ease-inout: cubic-bezier(.4,0,.2,1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 280ms; } /* always-dark surfaces use the brighter dark-mode cyan */ .section--dark .eyebrow-pill { --accent: #22D3EE; } .footer__big .accent { color: #22D3EE; } /* original Humble palette (comparison): add data-palette="humble" to */ :root[data-palette="humble"] { --accent: #FF4000; --accent-hover: #E63A00; --accent-tint: rgba(255,64,0,0.07); --accent-contrast: #FFFFFF; --accent-bright: #FF4000; --ink: #000000; --ink-soft: #1C1C1C; --body: rgba(0,0,0,0.72); --muted: rgba(0,0,0,0.56); --faint: rgba(0,0,0,0.40); --on-dark: #FFFFFF; --on-dark-muted: rgba(255,255,255,0.64); --canvas: #FAFAFA; --surface: #FFFFFF; --paper: #F7F6F2; --paper-2: #ECEBE8; --paper-3: #E7E6E3; --dark: #000000; --dark-2: #1F1F1F; --line: rgba(0,0,0,0.12); --line-soft: rgba(0,0,0,0.06); --fill-soft: rgba(0,0,0,0.04); --line-on-dark: rgba(255,255,255,0.12); } :root[data-palette="humble"] .footer__big .accent { color: #FF4000; } /* ============================================================ 2. Reset & base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--body); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; position: relative; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; padding: 0; } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; } /* ============================================================ 3. Layout helpers + eyebrows ============================================================ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(32px, 5vw, 76px); } .container--md { max-width: var(--container-md); } .container--sm { max-width: var(--container-sm); } .section { padding-block: var(--s-9); } /* stacked-folders section: modest bottom padding so the stack scrolls away cleanly before the next section's title arrives */ .section--stackpin { padding-bottom: var(--s-8); } .section--tight { padding-block: var(--s-8); } .section--dark { background: var(--dark); color: var(--on-dark); } .section--dark h1,.section--dark h2,.section--dark h3 { color: var(--on-dark); } .divider { height: 1px; background: var(--line); max-width: var(--container); margin: 0 auto; } /* eyebrows — Aperture: uppercase mono label, cyan, consistent everywhere */ .eyebrow, .eyebrow-pill { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); background: none; padding: 0; } /* hero eyebrow carries the short accent underline from the brand */ .heroA__eyebrow { padding-bottom: var(--s-2); border-bottom: 2px solid var(--accent); } .section-head { text-align: center; max-width: 820px; margin: 0 auto var(--s-8); } .section-head .eyebrow-pill { margin-bottom: var(--s-5); } .section-head h2 { font-size: var(--fs-h1); margin-bottom: var(--s-4); } .section-head p { font-size: var(--fs-lead); color: var(--muted); max-width: 60ch; margin-inline: auto; } .lead { font-size: var(--fs-lead); color: var(--muted); } .muted { color: var(--muted); } /* ============================================================ 4. Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 10px 22px; border-radius: 999px; font-size: var(--fs-body); font-weight: var(--fw-medium); transition: transform var(--t-fast) var(--ease-out), background var(--t-base), color var(--t-base), box-shadow var(--t-base); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--accent); color: var(--accent-contrast); } .btn--primary:hover { background: var(--accent-hover); } .btn--dark { background: var(--ink); color: #fff; box-shadow: var(--shadow-btn); } .btn--dark:hover { background: var(--ink-soft); } .btn--secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .btn--secondary:hover { background: var(--accent); color: var(--accent-contrast); box-shadow: inset 0 0 0 1px var(--accent); } .btn--ghost { color: var(--accent); } .btn--ghost:hover { color: var(--accent-hover); background: var(--accent-tint); } .btn--danger { background: var(--bad); color: #fff; } .btn--danger:hover { background: #a3122a; } .btn--sm { padding: 9px 16px; font-size: var(--fs-sm); } .btn--lg { padding: 12px 26px; font-size: var(--fs-body); } .btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; } /* form controls — Aperture (squared, cyan focus, lowercase labels) */ .field { display: block; margin-bottom: var(--s-4); } .field > .label { display: block; font-size: var(--fs-sm); color: var(--body); margin-bottom: var(--s-2); } input[type=text], input[type=email], input[type=password], input[type=search], textarea, select { width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 14px; transition: border-color var(--t-base), box-shadow var(--t-base); } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .field--error input, .field--error textarea { border-color: var(--bad); } .field__error { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--bad); } /* ============================================================ 5. Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, #FFFFFF 78%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); box-shadow: 0 2px 14px -6px rgba(10,15,20,.08); } .nav { display: flex; align-items: center; justify-content: space-between; height: 62px; } .nav__brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lead); color: var(--ink); } .nav__brand .dot { width: 20px; height: 20px; border-radius: var(--r-full); background: var(--accent-bright); } .nav__logo { height: 28px; width: auto; display: block; flex: none; } .nav__links { display: flex; align-items: center; gap: var(--s-7); } .nav__links a { font-size: var(--fs-sm); color: var(--body); transition: color var(--t-base); } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--accent); } .nav__cta { display: flex; align-items: center; gap: var(--s-3); } .nav__toggle { display: none; } /* ============================================================ 6. Hero (headline left · operator media + aside right · device below) ============================================================ */ .hero { position: relative; padding-top: var(--s-6); overflow: hidden; } /* framed top row: headline (left) · divider · aside (right), with hairline grid */ .hero__head { display: grid; grid-template-columns: 1.5fr 0.85fr; align-items: stretch; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hero__title { font-size: var(--fs-hero); letter-spacing: -0.05em; line-height: 1.02; max-width: 12ch; padding: var(--s-6) var(--s-6) var(--s-6) var(--s-5); border-left: 1px solid var(--line); align-self: center; } .hero__title .accent { color: var(--accent); } .hero__aside { border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: var(--s-6); align-self: center; } .hero__aside h2 { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); line-height: 1.4; margin-bottom: var(--s-3); } .hero__aside h2 .accent { color: var(--accent); } .hero__aside .link { color: var(--accent); font-weight: var(--fw-medium); } .hero__aside p { font-size: var(--fs-sm); color: var(--muted); } .hero__aside p strong { color: var(--ink); font-weight: var(--fw-medium); } /* ============================================================ 7. Stage: big operator over a detailed device, shapes at top corners, landscape + jars peeking behind ============================================================ */ .hero__stage { position: relative; padding-top: var(--s-6); } .hero__operator { position: relative; z-index: 5; width: 440px; max-width: 58%; aspect-ratio: 4 / 5; margin: 0 auto -120px; mix-blend-mode: multiply; } .hero__operator video, .hero__operator img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } .hero__cta { position: relative; z-index: 6; display: flex; justify-content: center; margin-bottom: -28px; } .device-wrap { position: relative; max-width: 1080px; margin: 0 auto; } .hero__backdrop { position: absolute; left: -340px; right: -340px; top: 4%; bottom: -6%; z-index: 0; border-radius: var(--r-2xl); overflow: hidden; background: linear-gradient(180deg, #dcecf3 0%, #e7f1ea 55%, #f4efe6 100%); } .hero__jars { position: absolute; bottom: 0; width: 360px; height: 82%; object-fit: cover; } .hero__jars--l { left: 0; } .hero__jars--r { right: 0; transform: scaleX(-1); } .hero__shape { position: absolute; top: -30px; width: 340px; height: 320px; background: var(--accent-bright); border-radius: var(--r-2xl); z-index: 1; } .hero__shape--l { left: -70px; } .hero__shape--r { right: -70px; } .device { position: relative; z-index: 2; border-radius: var(--r-xl); background: #0b1116; padding: 10px; box-shadow: var(--shadow-raise); } .device__screen { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10; } .device__screen video, .device__screen img { width: 100%; height: 100%; object-fit: cover; } .device__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: var(--r-full); background: rgba(10,15,20,.82); color: #fff; display: grid; place-items: center; font-size: 20px; z-index: 3; box-shadow: var(--shadow-raise); transition: background var(--t-base); } .device__play:hover { background: var(--ink); } /* ---- Hero Direction A: photo → value split (ContentsIQ) ---- */ .heroA { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-9); align-items: center; padding-block: var(--s-9) var(--s-10); } .heroA__copy h1 { font-size: var(--fs-hero); letter-spacing: -0.05em; line-height: 1.0; max-width: 13ch; } .heroA__copy h1 .accent { color: var(--accent); } .heroA__eyebrow { margin-bottom: var(--s-5); } .heroA__sub { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--muted); max-width: 46ch; } .heroA__actions { margin-top: var(--s-7); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; } .heroA__trust { margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); } /* the photo→value card */ .rcv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); box-shadow: var(--shadow-raise); max-width: 380px; margin-left: auto; } .rcv-photo { border-radius: var(--r-lg); overflow: hidden; background: var(--paper); aspect-ratio: 16/9; display: grid; place-items: center; color: var(--faint); border: 1px solid var(--line-soft); margin-bottom: var(--s-4); } .rcv-photo img { width: 100%; height: 100%; object-fit: cover; } .rcv-photo .ph { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); font-size: var(--fs-cap); } .rcv-row { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--s-2); } .rcv-row + .rcv-row { border-top: 1px solid var(--line-soft); } .rcv-k { font-size: var(--fs-sm); color: var(--muted); } .rcv-v { font-family: var(--font-mono); color: var(--ink); font-size: var(--fs-sm); } .rcv-v--big { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } .rcv-foot { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .rcv-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent-bright); flex: none; } .rcv-matches { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--accent); } .rcv-src { font-size: var(--fs-cap); color: var(--faint); } .rcv-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); background: var(--accent-tint); color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-cap); padding: 6px 10px; border-radius: var(--r-sm); } /* factual note under the comparison table */ .table-note { max-width: var(--container); margin: var(--s-5) auto 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; } /* ---- Cinematic dark hero (loss footage bg + capture panel) ---- */ .hero--cine { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(560px, 82vh, 760px); --accent: #22D3EE; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(5,9,13,.95) 0%, rgba(5,9,13,.84) 38%, rgba(5,9,13,.5) 68%, rgba(5,9,13,.72) 100%); } .hero--cine .container { position: relative; z-index: 2; width: 100%; } .hero--cine .heroA { padding-block: var(--s-8); align-items: center; } .hero--cine .heroA__copy h1 { color: #fff; max-width: 14ch; } .hero--cine .eyebrow { color: #22D3EE; } .hero--cine .heroA__sub { color: rgba(236,246,249,.82); } .hero--cine .heroA__trust { color: rgba(236,246,249,.58); } .hero--cine .btn--primary { background: #22D3EE; color: #05090D; } .hero--cine .btn--primary:hover { background: #5FE3F7; } .hero--cine .btn--secondary { background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); } .hero--cine .btn--secondary:hover { background: #22D3EE; color: #05090D; box-shadow: inset 0 0 0 1px #22D3EE; } /* capture panel: the pro documenting, with the RCV value coming out */ .capture { position: relative; padding: 0 var(--s-6) var(--s-6) 0; } .capture__person { position: relative; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-raise); aspect-ratio: 4 / 3.4; } .capture__person video, .capture__person img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 18%; } .capture__chip { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; background: rgba(5,9,13,.82); color: #fff; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .03em; padding: 6px 10px; border-radius: 8px; z-index: 2; } .capture__chip .rcv-dot { background: #22D3EE; } .capture__reticle { position: absolute; inset: auto 16% 26% auto; width: 92px; height: 92px; border: 2px solid #22D3EE; border-radius: 10px; z-index: 2; box-shadow: 0 0 0 4px rgba(34,211,238,.18); } .rcv-card--float { position: absolute; right: 0; bottom: 0; z-index: 3; width: 268px; max-width: 78%; margin: 0; } /* hero "evaluating the loss": cyan scan sweep + floating AI detection tags */ .hero__scan { position: absolute; left: 0; right: 0; top: 8%; height: 2px; z-index: 1; background: linear-gradient(90deg, transparent, #22D3EE 30%, #22D3EE 70%, transparent); opacity: .55; box-shadow: 0 0 18px 2px rgba(34,211,238,.35); animation: heroScan 7s var(--ease-inout) infinite; pointer-events: none; } @keyframes heroScan { 0% { top: 10%; } 50% { top: 86%; } 100% { top: 10%; } } .hero__detect { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(5,9,13,.66); border: 1px solid rgba(34,211,238,.55); border-radius: 8px; padding: 6px 10px; font-family: var(--font-mono); font-size: var(--fs-micro); color: #EAF7FA; backdrop-filter: blur(2px); } .hero__detect .v { color: #22D3EE; } .hero__detect .rcv-dot { background: #22D3EE; } .hero__detect--1 { top: 22%; left: 40%; } .hero__detect--2 { bottom: 30%; left: 33%; } @media (prefers-reduced-motion: reduce) { .hero__scan { animation: none; top: 42%; } } @media (max-width: 900px) { .hero__detect, .hero__scan { display: none; } } /* ---- Scan demo band: loss video + animated scan → RCV result ---- */ .scan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; } .scan-video { border-radius: var(--r-xl); overflow: hidden; background: var(--dark); box-shadow: var(--shadow-card); position: relative; } .scan-video video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; } .scan-video__cap { position: absolute; left: var(--s-4); bottom: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: rgba(5,9,13,.6); padding: 6px 10px; border-radius: var(--r-sm); } .scan-stage { position: relative; } .scan-frame { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; } .scan-obj { width: 52%; color: var(--ink); opacity: .88; } .scan-line { position: absolute; left: 10%; right: 10%; top: 14%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); box-shadow: 0 0 16px 2px rgba(16,200,224,.4); animation: scanY 6s var(--ease-inout) infinite; } @keyframes scanY { 0% { top: 14%; opacity: 0; } 8% { opacity: 1; } 46% { top: 82%; opacity: 1; } 54% { opacity: 0; } 100% { opacity: 0; } } .scan-box { position: absolute; inset: 24% 26%; border: 2px solid var(--accent-bright); border-radius: var(--r-sm); opacity: 0; animation: boxIn 6s var(--ease-out) infinite; } @keyframes boxIn { 0%,40% { opacity: 0; } 50% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } } .scan-status { position: absolute; top: var(--s-4); left: var(--s-4); height: 18px; } .scan-status .chip { position: absolute; top: 0; left: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); } .scan-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); } .scan-status .s-scan { animation: fadeEarly 6s infinite; } .scan-status .s-done { opacity: 0; animation: fadeLate 6s infinite; } @keyframes fadeEarly { 0%,44% { opacity: 1; } 52%,100% { opacity: 0; } } @keyframes fadeLate { 0%,48% { opacity: 0; } 56%,92% { opacity: 1; } 100% { opacity: 0; } } .scan-result { position: absolute; right: -8px; bottom: -12px; width: 76%; max-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-raise); padding: var(--s-5); opacity: 0; animation: resultIn 6s var(--ease-out) infinite; } @keyframes resultIn { 0%,52% { opacity: 0; transform: translateY(12px); } 60% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .scan-line { display: none; } .scan-box { opacity: 1; animation: none; } .scan-result { opacity: 1; animation: none; transform: none; } .scan-status .s-scan { opacity: 0; } .scan-status .s-done { opacity: 1; animation: none; } } @media (max-width: 900px) { .scan-grid { grid-template-columns: 1fr; gap: var(--s-6); } .scan-result { position: static; width: 100%; max-width: none; margin-top: var(--s-5); opacity: 1; animation: none; transform: none; } } /* ---- Hero: centered statement over a soft arced wash + one cinematic video ---- */ .hero--minimal { position: relative; overflow: hidden; /* slide up behind the translucent header bar (63px = 62px bar + 1px border) so the wash paints from the very top */ margin-top: -63px; padding-top: calc(63px + var(--s-9)); padding-bottom: var(--s-9); background: url("../assets/hero-bg.svg") top center / 100% auto no-repeat #FFFFFF; } .hero--minimal .container { position: relative; z-index: 1; } .hero__center { max-width: 860px; margin-inline: auto; text-align: center; } .hero--minimal .hero__title { max-width: 18ch; margin-inline: auto; padding: 0; border-left: none; font-size: clamp(2.6rem, 4.8vw, 3.9rem); letter-spacing: -0.03em; line-height: 1.04; font-weight: 500; } .hero--minimal .hero__title .accent { color: var(--accent); } .hero--minimal .hero__sub { margin: var(--s-5) auto 0; font-size: var(--fs-lead); color: var(--body); max-width: 800px; line-height: 1.6; } .hero--minimal .hero__cta { margin: var(--s-6) 0 0; z-index: auto; display: flex; justify-content: center; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .hero--minimal .hero__note { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--muted); } /* the single cinematic media panel below the copy */ .hero__cinema { position: relative; margin-top: var(--s-8); border-radius: 16px; overflow: hidden; aspect-ratio: 2.7 / 1; background: var(--dark); box-shadow: 0 30px 70px -28px rgba(10,15,20,.35), 0 2px 8px rgba(10,15,20,.08); } .hero__cinema video { width: 100%; height: 100%; object-fit: cover; display: block; } /* scan overlay — media card only, above the image, non-interactive */ .scan-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .scan-corner { position: absolute; width: 28px; height: 28px; border: 0 solid rgba(16,200,224,.85); } .scan-corner.tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; } .scan-corner.tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; } .scan-corner.bl { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; } .scan-corner.br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; } .scan-sweep { position: absolute; left: 0; right: 0; top: 0; height: 56px; background: linear-gradient(to bottom, rgba(16,200,224,0), rgba(16,200,224,.14)); border-bottom: 1.5px solid rgba(16,200,224,.75); box-shadow: 0 0 14px rgba(16,200,224,.5); opacity: .5; animation: heroSweep 3.5s ease-in-out infinite; } @keyframes heroSweep { 0% { top: -8%; opacity: 0; } 12% { opacity: .55; } 85% { opacity: .55; } 100% { top: 100%; opacity: 0; } } .scan-detect { position: absolute; border: 1px solid rgba(16,200,224,.8); border-radius: 3px; opacity: 0; } .scan-detect .lbl { position: absolute; top: -17px; left: -1px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: #EAF7FA; background: rgba(5,9,13,.78); padding: 2px 5px; border-radius: 3px; white-space: nowrap; } .scan-detect--1 { top: 32%; left: 20%; width: 26%; height: 24%; animation: detect1 3.5s ease-in-out infinite; } .scan-detect--2 { top: 54%; left: 52%; width: 24%; height: 22%; animation: detect2 3.5s ease-in-out infinite; } @keyframes detect1 { 0%,32% { opacity: 0; } 42% { opacity: 1; } 66% { opacity: 1; } 76%,100% { opacity: 0; } } @keyframes detect2 { 0%,52% { opacity: 0; } 62% { opacity: 1; } 82% { opacity: 1; } 92%,100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .scan-sweep { animation: none; top: 46%; opacity: .4; } .scan-detect { animation: none; opacity: 0; } } @media (max-width: 900px) { .hero--minimal { padding-block: var(--s-7) var(--s-8); } .hero__cinema { aspect-ratio: 16 / 10; border-radius: 16px; margin-top: var(--s-6); } .hero--minimal .hero__cta .btn { width: 100%; max-width: 340px; } } @media (max-width: 900px) { .heroA { grid-template-columns: 1fr; gap: var(--s-7); padding-block: var(--s-7); } .rcv-card { margin-inline: auto; } .hero--cine { min-height: 0; } .hero--cine .heroA__copy h1 { max-width: none; } .capture { padding: 0 0 var(--s-7) 0; max-width: 420px; margin-inline: auto; } .rcv-card--float { right: auto; left: 50%; transform: translateX(-30%); } } /* ============================================================ 8. Intro ("Meet ContentsIQ") — centered eyebrow + two-tone headline + body block flanked by thin vertical rules (Humble "Meet" layout) ============================================================ */ .intro { text-align: center; } .intro .eyebrow { display: block; font-size: var(--fs-lead); margin-bottom: var(--s-5); } .intro__title { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; line-height: 1.06; } .intro__title .line-2 { color: var(--faint); } .intro__title .accent { color: var(--accent); } .intro__body { max-width: 60ch; margin: var(--s-9) auto 0; padding: var(--s-2) clamp(24px, 4vw, 56px); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .intro__sub { font-size: var(--fs-lead); line-height: 1.65; color: var(--muted); } .intro__sub + .intro__sub { margin-top: var(--s-6); } .intro__sub .accent { color: var(--accent); font-weight: var(--fw-medium); } .intro__strong { color: var(--ink); font-weight: var(--fw-medium); } @media (max-width: 640px) { .intro__body { border: none; padding-inline: 0; } } /* ============================================================ 9. Persona tabs — scroll-driven (sticky viewport + step sentinels) ============================================================ */ .scrolltabs { position: relative; height: 320vh; } .scrolltabs__step { position: absolute; left: 0; width: 1px; height: 25%; pointer-events: none; } .scrolltabs__step:nth-child(1) { top: 0; } .scrolltabs__step:nth-child(2) { top: 25%; } .scrolltabs__step:nth-child(3) { top: 50%; } .scrolltabs__step:nth-child(4) { top: 75%; } .scrolltabs__sticky { position: sticky; top: 78px; } .tabs__head { display: flex; gap: var(--s-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); overflow: visible; } .tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--s-4) var(--s-2); font-size: var(--fs-cap); font-weight: var(--fw-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: 1; transition: color var(--t-base), border-color var(--t-base); } .tab .ficon { width: 20px; height: 20px; border-radius: 6px; opacity: .55; filter: saturate(.35); transition: opacity var(--t-base), filter var(--t-base); } .tab .ficon svg { width: 12px; height: 12px; } .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); } .tab[aria-selected="true"] .ficon, .tab:hover .ficon { opacity: 1; filter: none; } .tab:hover { color: var(--ink); } .tab-panel { display: none; } .tab-panel[data-active] { display: block; animation: panelIn .55s cubic-bezier(.22,1,.36,1); } @keyframes panelIn { 0% { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(4px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; } } .tab-card { border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); padding: var(--s-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); box-shadow: var(--shadow-card); min-height: 400px; align-items: center; } .tab-card h3 { font-size: var(--fs-h2); margin-bottom: var(--s-3); } .tab-card .sub { color: var(--muted); margin-bottom: var(--s-6); } .tab-card .mini { margin-top: var(--s-5); } .tab-card .mini h4 { font-size: var(--fs-body); color: var(--ink); margin-bottom: 2px; } .tab-card .mini p { font-size: var(--fs-cap); color: var(--muted); } .tab-card__preview { background: var(--paper); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); position: relative; min-height: 300px; align-self: stretch; } .tab-card__preview .label { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } /* persona label chip — only shown on mobile, where the tab bar is hidden and all personas stack as self-labelled cards */ .persona-tag { display: none; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-lead); color: var(--ink); } .persona-tag .ficon { width: 28px; height: 28px; border-radius: 8px; } .persona-tag .ficon svg { width: 16px; height: 16px; } /* ---- animated product vignettes (pure CSS, 7s loops, reduced-motion safe) ---- */ .vg { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .vg b { font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--ink); font-size: var(--fs-sm); } .vg__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); flex: none; } /* PA: inventory rows assemble, evidence attaches, total lands */ .vg__row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; opacity: 0; animation: vgIn 7s var(--ease-out) infinite; animation-delay: var(--d, 0s); } .vg__thumb { width: 30px; height: 30px; border-radius: 7px; flex: none; background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); box-shadow: inset 0 0 0 1px var(--line); } .vg__name { flex: 1; font-size: var(--fs-sm); color: var(--ink); font-weight: var(--fw-medium); line-height: 1.25; } .vg__name i { display: block; font-style: normal; font-size: var(--fs-micro); color: var(--muted); font-weight: 400; } .vg__chip { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent); background: var(--accent-tint); border-radius: 7px; padding: 5px 10px; opacity: 0; animation: vgIn 7s var(--ease-out) infinite; animation-delay: var(--d, 0s); } .vg__total { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; font-size: var(--fs-sm); color: var(--muted); opacity: 0; animation: vgIn 7s var(--ease-out) infinite; animation-delay: var(--d, 0s); } .vg__total b { font-size: var(--fs-lead); } @keyframes vgIn { 0% { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(3px); } 5% { opacity: 1; transform: translateY(-2px) scale(1.005); filter: blur(0); } 8% { transform: none; } 88% { opacity: 1; transform: none; filter: blur(0); } 96%, 100% { opacity: 0; } } /* Resto: photos scanned, records fall out below */ .vg__photos { position: relative; display: flex; gap: 8px; overflow: hidden; border-radius: 10px; padding: 2px; } .vg__ph { flex: 1; aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; animation: vgIn 7s var(--ease-out) infinite; animation-delay: var(--d, 0s); } .vg__scanline { position: absolute; left: 2px; right: 2px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); box-shadow: 0 0 10px rgba(16,200,224,.55); animation: vgScan 7s var(--ease-inout) infinite; } @keyframes vgScan { 0%, 12% { top: 4%; opacity: 0; } 16% { opacity: 1; } 38% { top: 92%; opacity: 1; } 42%, 100% { top: 96%; opacity: 0; } } .vg__flow { text-align: center; color: var(--accent); font-size: var(--fs-sm); opacity: 0; animation: vgIn 7s ease infinite; animation-delay: 1.2s; } .vg__rec { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: var(--fs-sm); color: var(--ink); font-weight: var(--fw-medium); opacity: 0; animation: vgIn 7s var(--ease-out) infinite; animation-delay: var(--d, 0s); } /* Pros: job card travels the pipeline, meter fills, review-ready lands */ .vg__stages { display: flex; gap: 6px; } .vg__st { flex: 1; text-align: center; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 6px 4px; } .vg__st--1 { animation: vgStage 7s infinite; } .vg__st--2 { animation: vgStage 7s infinite 1.7s; } .vg__st--3 { animation: vgStage 7s infinite 3.4s; } @keyframes vgStage { 0%, 4% { color: var(--muted); border-color: var(--line); background: var(--surface); box-shadow: none; } 8%, 26% { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), 0 6px 16px -8px rgba(10,126,148,.45); } 32%, 100% { color: var(--muted); border-color: var(--line); background: var(--surface); box-shadow: none; } } .vg__lane { position: relative; height: 52px; background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; overflow: hidden; } .vg__job { position: absolute; top: 50%; left: 0; width: max-content; transform: translate(0, -50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 12px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink); box-shadow: var(--shadow-card); animation: vgTravel 7s var(--ease-inout) infinite; } @keyframes vgTravel { 0%, 6% { left: 2%; transform: translate(0, -50%); } 24%, 34% { left: 50%; transform: translate(-50%, -50%); } 52%, 62% { left: 98%; transform: translate(-100%, -50%); } 78%, 100% { left: 98%; transform: translate(-100%, -50%); opacity: 1; } } .vg__meter { height: 6px; border-radius: 4px; background: var(--paper-2); overflow: hidden; } .vg__meter span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); width: 0; animation: vgMeter 7s var(--ease-inout) infinite; position: relative; overflow: hidden; } .vg__meter span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: meterShine 2.4s ease-in-out infinite; } @keyframes meterShine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } } @keyframes vgMeter { 0%, 6% { width: 2%; } 62% { width: 100%; } 92% { width: 100%; } 100% { width: 2%; } } .vg__ready { align-self: flex-end; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent); background: var(--accent-tint); border-radius: 7px; padding: 5px 10px; opacity: 0; animation: vgIn 7s var(--ease-out) infinite 4.6s; } /* Home: recovery checklist ticks itself, progress fills */ .vg__check { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: var(--fs-sm); color: var(--ink); opacity: 0; animation: vgIn 7s var(--ease-out) infinite; animation-delay: var(--d, 0s); } .vg__check i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--accent); position: relative; animation: checkPop 7s cubic-bezier(.34,1.56,.64,1) infinite; animation-delay: calc(var(--d, 0s) + .18s); transform: scale(0); } @keyframes checkPop { 0%, 1% { transform: scale(0); } 5% { transform: scale(1.25); } 8%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } } .vg__check i::after { content: ""; position: absolute; left: 5px; top: 4px; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(43deg); } .vg__bar { height: 6px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-top: 2px; } .vg__bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); width: 0; animation: vgMeter 7s var(--ease-inout) infinite; } @media (prefers-reduced-motion: reduce) { .tab-panel[data-active] { animation: none; } .vg *, .vg__scanline, .vg__job { animation: none !important; opacity: 1 !important; } .vg__meter span, .vg__bar span { width: 78%; } .vg__meter span::after { display: none; } .vg__check i { transform: none; } .vg__job { left: 60%; transform: translate(-50%, -50%); } } /* ---- feature explainer vignettes (reuse vg primitives inside .fx panels) ---- */ .fx, .feature-row__media.fx { border-radius: var(--r-lg); padding: var(--s-6) var(--s-7); min-height: 320px; display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; overflow: hidden; background: var(--paper) radial-gradient(rgba(10,15,20,.05) 1px, transparent 1.3px); background-size: 16px 16px; } .fx::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(62% 52% at 100% 0%, rgba(16,200,224,.09), transparent 62%); } .tab-card__preview { background-image: radial-gradient(rgba(10,15,20,.05) 1px, transparent 1.3px); background-size: 16px 16px; } .tab-card__preview::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(62% 52% at 100% 0%, rgba(16,200,224,.09), transparent 62%); } .fx > *, .tab-card__preview > * { position: relative; z-index: 1; } .fx .vg__row, .fx .vg__rec { background: var(--surface); } /* illustrated item thumbs + photo tiles */ .vg__thumb { display: grid; place-items: center; color: var(--ink-soft); overflow: hidden; } .vg__thumb svg { width: 18px; height: 18px; } .vg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .vg__ph { display: grid; place-items: center; color: var(--muted); overflow: hidden; } .vg__ph svg { width: 24px; height: 24px; } .vg__ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } /* live dots pulse */ .vg__dot { animation: dotPulse 2.2s ease-out infinite; } @keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,200,224,.4); } 55% { box-shadow: 0 0 0 5px rgba(16,200,224,0); } } /* retailer logo tiles: consistent square chips */ .fx__logo { width: 34px; height: 34px; flex: none; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .fx__logo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* flagship phase 2: everything below the hero stays hidden until the scan lands */ .fx__after { display: flex; flex-direction: column; gap: 10px; opacity: 0; animation: fxAfter 7s var(--ease-out) infinite; } @keyframes fxAfter { 0%, 38% { opacity: 0; } 44%, 100% { opacity: 1; } } /* small photo thumbs inside record rows and the traveling claim chip */ .vg__rec .vg__thumb { width: 26px; height: 26px; border-radius: 6px; flex: none; } .vg__rec--img { justify-content: flex-start; } .vg__rec--img b, .vg__rec--img .fx__status { margin-left: auto; } .vg__job img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; display: block; } /* photos + logos inside the how-it-works mockups */ .mock__upload img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; display: inline-block; vertical-align: middle; } .mock__src span { display: inline-flex; align-items: center; gap: 8px; } .mock__src .lg { width: 24px; height: 24px; flex: none; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; font-style: normal; } .mock__src .lg img { width: 100%; height: 100%; object-fit: cover; display: block; } .fx__pane svg { width: 16px; height: 16px; flex: none; color: var(--ink-soft); opacity: .85; } .rcv-v--img { display: inline-flex; align-items: center; gap: 7px; } .rcv-v--img img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; display: block; } /* homeowner photo strip: the documented home, in pictures */ .vg__strip { display: flex; gap: 8px; } .vg__strip span { flex: 1; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; animation: vgIn 7s var(--ease-out) infinite; animation-delay: var(--d, 0s); } .vg__strip img { width: 100%; height: 100%; object-fit: cover; display: block; } /* fast sweep: races full right after the item lands in the list */ .fx__fast span { animation: fxSweep 7s var(--ease-inout) infinite; } @keyframes fxSweep { 0%, 46% { width: 2%; } 56% { width: 100%; } 88% { width: 100%; opacity: 1; } 96%, 100% { width: 100%; opacity: 0; } } /* value stamp: springs in after the sweep lands */ .fx__result { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; font-size: var(--fs-sm); color: var(--muted); opacity: 0; animation: fxPop 7s var(--ease-out) infinite; } .fx__result b { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--ink); } @keyframes fxPop { 0%, 56% { opacity: 0; transform: scale(.92); } 62% { opacity: 1; transform: scale(1.05); } 67% { transform: scale(1); } 88% { opacity: 1; } 96%, 100% { opacity: 0; } } /* flagship: photo gets scanned, then shrinks down into the list-row thumbnail */ .fx--scan { justify-content: flex-end; padding-top: 190px; } .fxh { position: absolute; z-index: 2; top: 20px; left: 50%; width: 200px; margin-left: -100px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px -14px rgba(10,15,20,.4); transform-origin: top left; animation: fxHero 7s var(--ease-inout) infinite; } .fxh img { width: 100%; height: 100%; object-fit: cover; display: block; } .fxh i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); box-shadow: 0 0 10px rgba(16,200,224,.6); animation: fxhLine 7s var(--ease-inout) infinite; } .fxh .c { position: absolute; width: 15px; height: 15px; border: 0 solid rgba(16,200,224,.9); } .fxh .c1 { top: 7px; left: 7px; border-top-width: 1.5px; border-left-width: 1.5px; } .fxh .c2 { top: 7px; right: 7px; border-top-width: 1.5px; border-right-width: 1.5px; } .fxh .c3 { bottom: 7px; left: 7px; border-bottom-width: 1.5px; border-left-width: 1.5px; } .fxh .c4 { bottom: 7px; right: 7px; border-bottom-width: 1.5px; border-right-width: 1.5px; } @keyframes fxHero { 0% { opacity: 0; transform: translateY(10px); } 5%, 32% { opacity: 1; transform: none; } 42% { opacity: 0; transform: translate(-96px, 132px) scale(.15); } 100% { opacity: 0; transform: translate(-96px, 132px) scale(.15); } } @keyframes fxhLine { 0%, 8% { top: 6%; opacity: 0; } 12% { opacity: 1; } 30% { top: 92%; opacity: 1; } 34%, 100% { top: 92%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fxh { animation: none; opacity: 1; transform: none; } .fxh i { display: none; } } /* consensus winner ring */ .fx__win { animation: vgIn 7s var(--ease-out) infinite, fxWin 7s infinite; animation-delay: var(--d, 0s); } @keyframes fxWin { 0%, 44% { border-color: var(--line); box-shadow: none; } 52%, 88% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } 96%, 100% { border-color: var(--line); box-shadow: none; } } /* retailer tiles */ .fx__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fx__tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; opacity: 0; animation: vgIn 7s var(--ease-out) infinite; animation-delay: var(--d, 0s); } .fx__tinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fx__tile .r { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); } .fx__tile .s { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; } /* stacked workflow panes light up in sequence */ .fx__pane { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); } .fx__pane i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; font-style: normal; } .fx__pane span { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); } .fx__pane--1 { animation: fxPane 7s infinite; } .fx__pane--2 { animation: fxPane 7s infinite 1.6s; } .fx__pane--3 { animation: fxPane 7s infinite 3.2s; } .fx__pane--1 i { animation: fxDot 7s infinite; } .fx__pane--2 i { animation: fxDot 7s infinite 1.6s; } .fx__pane--3 i { animation: fxDot 7s infinite 3.2s; } @keyframes fxPane { 0%, 4% { border-color: var(--line); } 8%, 26% { border-color: var(--accent); } 32%, 100% { border-color: var(--line); } } @keyframes fxDot { 0%, 4% { background: var(--line); } 8%, 26% { background: var(--accent-bright); } 32%, 100% { background: var(--line); } } /* review queue: pending flips to approved per row */ .fx__status { position: relative; font-family: var(--font-mono); font-size: var(--fs-micro); min-width: 86px; text-align: right; } .fx__status .pend, .fx__status .ok { position: absolute; right: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; } .fx__status .pend { color: var(--muted); animation: fxOut 7s infinite; animation-delay: var(--d, 0s); } .fx__status .ok { color: var(--accent); opacity: 0; animation: fxInStat 7s infinite; animation-delay: var(--d, 0s); } @keyframes fxOut { 0%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } } @keyframes fxInStat { 0%, 32% { opacity: 0; } 40%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fx * { animation: none !important; opacity: 1 !important; } .fx__fast span { width: 100%; } .fx__status .pend { opacity: 0 !important; } } /* ============================================================ 10. Landscape illustration band ============================================================ */ .landscape { width: 100%; } .landscape img { width: 100%; max-height: 520px; object-fit: cover; display: block; } /* ============================================================ 11. Stacked folder cards (Today / With Humble) ============================================================ */ .stack { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-8); align-items: start; } /* intro rides level with the pinned folder: plain sticky offset (no transform — sticky math ignores transforms, which desyncs the start and exit positions) */ .stack__intro { position: sticky; top: 175px; align-self: start; } .stack__intro h2 { font-size: var(--fs-h2); margin-bottom: var(--s-5); } .stack__intro p { color: var(--muted); margin-bottom: var(--s-3); } .stack__intro .accent { color: var(--accent); font-weight: var(--fw-medium); } .stack__intro .btn { margin-top: var(--s-5); } /* file folders: exact tab geometry (217x50 SVG trapezoid with curved shoulders) + pure-CSS sticky stacking track (scroll = the animation) */ .folders { display: flex; flex-direction: column; } /* travel lives in TOP margins and the tail spacer: a sticky item's ride is capped by the container minus its own BOTTOM margin, so bottom margins must stay 0 on all folders or the last one cancels its own travel and never pins */ .folder { position: sticky; top: 132px; width: 100%; max-width: 607px; margin: 0 auto; } .folder + .folder { margin-top: 38vh; } .folders__tail { height: 26vh; } .folder__tab { width: 217px; height: 50px; margin-left: calc(42px + var(--i, 0) * 153px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 217 50'%3E%3Cpath d='M24.818 13.22C30.396 4.954 39.715 0 49.686 0L164.736 0C174.221 0 183.147 4.485 188.808 12.096L217 50L0 50Z' fill='%23FFFFFF' stroke='rgba(0,0,0,0.15)'/%3E%3C/svg%3E") center / 217px 50px no-repeat; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 24px 6px; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; } /* app-icon tiles: rounded gradient chips with white glyphs (Apple/Google style) */ .ficon { --g1: #58AFFF; --g2: #2B6BE8; width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -1px 2px rgba(0,0,0,.16), 0 1px 3px rgba(10,15,20,.22); } .ficon svg { width: 13px; height: 13px; color: #fff; } .folder__tab .ficon { margin-right: 0; } .folder__body { margin-top: -4px; position: relative; z-index: 2; background: var(--surface); border: 1px solid rgba(10,15,20,0.15); border-radius: 30px; padding: clamp(28px, 3vw, 44px) clamp(28px, 3.2vw, 48px); /* equal heights on every folder: sticky end-caps depend on item height, so identical heights = the whole stack pins and exits in perfect alignment */ height: 344px; box-shadow: 0 6px 16px -12px rgba(10,15,20,.10); display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); } .folder__row { padding-left: var(--s-5); border-left: 2px solid var(--line); } .folder__row .k { display: block; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--s-3); } .folder__row p { color: var(--muted); font-size: var(--fs-body); line-height: 1.65; max-width: 62ch; } .folder__row.is-humble { border-left-color: var(--accent); } .folder__row.is-humble .k { color: var(--accent); font-size: var(--fs-lead); } .folder__row.is-humble p { color: var(--ink-soft); } /* ============================================================ 12. Comparison table (4 cols, brand column filled) ============================================================ */ .compare { max-width: var(--container); margin: 0 auto; overflow-x: auto; } .compare table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 920px; } .compare th, .compare td { padding: var(--s-5); text-align: center; vertical-align: middle; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); } .compare td:first-child, .compare thead th:first-child { text-align: left; } .compare thead th { font-family: var(--font-display); font-size: var(--fs-lead); color: var(--ink); font-weight: var(--fw-medium); border-bottom: none; } .compare td:first-child, .compare thead th:first-child { font-weight: var(--fw-semibold); color: var(--ink); width: 18%; } .compare .col-brand { background: var(--accent); color: var(--accent-contrast); } .compare .col-brand .k { font-weight: var(--fw-semibold); display: block; } .compare thead .col-brand { color: var(--accent-contrast); border-radius: var(--r-lg) var(--r-lg) 0 0; text-align: center; padding-block: var(--s-6); } .compare tbody tr:last-child .col-brand { border-radius: 0 0 var(--r-lg) var(--r-lg); } .compare .col-brand { border-bottom-color: rgba(255,255,255,0.18); } .compare td:not(.col-brand):not(:first-child) { color: var(--muted); } .compare .brand-mark { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; background: #fff; border-radius: 10px; padding: 8px 16px 8px 12px; box-shadow: 0 2px 8px -3px rgba(5,9,13,.3); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lead); color: var(--ink); } .compare .brand-mark img { width: 24px; height: auto; display: block; } /* ============================================================ 13. Alternating feature rows ============================================================ */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; } .feature-row + .feature-row { margin-top: var(--s-11); } .feature-row:nth-child(even) .feature-row__media { order: -1; } .feature-row__copy .eyebrow { margin-bottom: var(--s-4); } .feature-row__copy h3 { font-size: var(--fs-h2); letter-spacing: -0.03em; margin-bottom: var(--s-6); } .feature-row__copy .mini h4 { font-size: var(--fs-body); color: var(--ink); margin-bottom: var(--s-2); } .feature-row__copy .mini p { color: var(--muted); font-size: var(--fs-sm); padding-left: var(--s-4); border-left: 3px solid var(--line); } .feature-row__media { border-radius: var(--r-2xl); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .feature-row__media video, .feature-row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper); } .feature-row__media.is-graphic img { object-fit: contain; padding: var(--s-7); aspect-ratio: 4 / 3; } .feature-note { max-width: var(--container-md); margin: var(--s-10) auto 0; text-align: center; color: var(--muted); font-size: var(--fs-lead); } .feature-note .accent { color: var(--accent); font-weight: var(--fw-medium); } /* ============================================================ 14. Vertical timeline ============================================================ */ .timeline { position: relative; max-width: var(--container-md); margin: 0 auto; padding-left: var(--s-7); } .timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), var(--line)); } .tl-step { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); padding-block: var(--s-8); align-items: center; } .tl-step::before { content: ""; position: absolute; left: calc(-1 * var(--s-7) + 1px); top: var(--s-9); width: 12px; height: 12px; border-radius: var(--r-full); background: var(--ink); } .tl-step__badge { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 2px 8px; margin-bottom: var(--s-3); } .tl-step__day { font-family: var(--font-display); font-size: var(--fs-h1); color: var(--ink); } .tl-step__day .accent { color: var(--accent); } .tl-step h3 { font-size: var(--fs-h3); margin: var(--s-2) 0 var(--s-3); } .tl-step p { color: var(--muted); font-size: var(--fs-sm); } .tl-step__art { display: grid; place-items: center; } .tl-step__art img { max-width: 300px; } /* ============================================================ 15. Roadmap cards ============================================================ */ .roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); max-width: var(--container); margin: 0 auto; } .roadmap__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-card); } .roadmap__icon { --g1: #58AFFF; --g2: #2B6BE8; width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(10,15,20,.2); display: grid; place-items: center; margin-bottom: var(--s-5); } .roadmap__icon svg { width: 21px; height: 21px; } .roadmap__col h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); } .roadmap__col p { font-size: var(--fs-sm); color: var(--muted); } /* ============================================================ 15b. Testimonials — minimal light cards, gradient monogram avatars ============================================================ */ /* infinite marquee: two identical sets slide left; -50% of the track = one full set */ .tstm { overflow: hidden; padding-block: 28px; margin-block: -20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .tstm__track { display: flex; width: max-content; animation: tstmSlide 60s linear infinite; } .tstm:hover .tstm__track { animation-play-state: paused; } .tstm__set { display: flex; gap: var(--s-5); margin-right: var(--s-5); } @keyframes tstmSlide { to { transform: translateX(-50%); } } .tstm__card { position: relative; width: 380px; flex: none; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); box-shadow: var(--shadow-card); transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-base); } .tstm__card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 18px 44px -20px rgba(10,15,20,.22), 0 2px 6px rgba(10,15,20,.05); } .tstm__card::before { content: "\201C"; font-family: var(--font-display); font-size: 44px; line-height: .6; color: var(--accent); opacity: .85; display: block; height: 18px; } .tstm__card blockquote { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.62; } .tstm__card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); } .tstm__ava { --g1: #58AFFF; --g2: #2B6BE8; width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 13px; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -1px 2px rgba(0,0,0,.16); } .tstm__ava img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (prefers-reduced-motion: reduce) { .tstm__track { animation: none; } .tstm { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } } .tstm__card figcaption b { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: var(--fw-medium); } .tstm__card figcaption i { display: block; font-style: normal; font-size: var(--fs-cap); color: var(--muted); } /* ============================================================ 16. FAQ (dark accordion) ============================================================ */ .faq__list { max-width: var(--container-sm); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-3); } details.faq__item { background: var(--accent); color: #fff; border-radius: var(--r-lg); padding: 0 var(--s-6); box-shadow: var(--shadow-card); } .faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; text-align: left; font-family: var(--font-display); font-size: var(--fs-lead); color: #fff; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q .icon { flex: none; width: 24px; height: 24px; position: relative; } .faq__q .icon::before, .faq__q .icon::after { content: ""; position: absolute; inset: 50% 0; height: 2px; background: #fff; } .faq__q .icon::after { transform: rotate(90deg); transition: opacity var(--t-base); } details.faq__item[open] .faq__q .icon::after { opacity: 0; } .faq__a { padding: 0 0 var(--s-5); color: rgba(255,255,255,.85); font-size: var(--fs-body); max-width: 64ch; } /* ============================================================ 17. CTA + footer ============================================================ */ /* closing scene: copy floats in the illustration's sky, the artwork fills the section, and its base dissolves into the dark footer as one composition */ /* closing scene: copy overlaid near the top of the full illustration, which dissolves into the dark footer */ .cta { position: relative; text-align: center; padding: var(--s-5) 0 74vh; background: url("../assets/cta-scene.jpg") center bottom / cover no-repeat #FCFDFE; } .cta::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; pointer-events: none; background: linear-gradient(180deg, #FCFDFE 0%, rgba(252,253,254,.4) 55%, rgba(252,253,254,0) 100%); } .cta::after { content: ""; position: absolute; inset: auto 0 0; height: 26%; pointer-events: none; background: linear-gradient(180deg, rgba(5,9,13,0) 0%, rgba(5,9,13,.6) 62%, #05090D 100%); } .cta .container { position: relative; z-index: 1; } .cta h2 { font-size: var(--fs-h1); } .cta p { margin: var(--s-4) auto var(--s-6); max-width: 50ch; color: var(--body); font-size: var(--fs-lead); } .cta--landscape { position: relative; } .site-footer { position: relative; background: var(--dark); color: var(--on-dark); padding-block: var(--s-9) var(--s-7); margin-top: -6px; } .footer__top { display: flex; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; } .footer__brand { display: flex; flex-direction: column; gap: var(--s-4); max-width: 380px; } .footer__big { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: -0.03em; color: var(--on-dark); } .footer__lockup { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lead); color: #fff; } .footer__lockup img { width: 26px; height: auto; background: #fff; border-radius: 8px; padding: 4px; box-sizing: content-box; display: block; } .footer__cols { display: flex; gap: var(--s-10); } .footer__col h4 { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-dark-muted); margin-bottom: var(--s-4); } .footer__col a { display: block; padding-block: var(--s-2); font-size: var(--fs-sm); color: var(--on-dark-muted); transition: color var(--t-base); } .footer__col a:hover { color: var(--on-dark); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--line-on-dark); font-size: var(--fs-sm); color: var(--on-dark-muted); } .footer__social { display: flex; gap: var(--s-4); } /* ============================================================ 17b. Contact page ============================================================ */ .contact { position: relative; overflow: hidden; padding-block: var(--s-8) var(--s-9); background: radial-gradient(120% 70% at 50% -12%, color-mix(in srgb, var(--accent-bright) 8%, transparent), transparent 60%), var(--canvas); } .contact__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .contact__intro h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); letter-spacing: -0.03em; line-height: 1.05; margin: var(--s-3) 0 var(--s-4); } .contact__intro h1 .accent { color: var(--accent); } .contact__intro .lead { max-width: 42ch; color: var(--body); line-height: 1.55; } .contact__details { margin-top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); } .contact__details li { padding-left: var(--s-4); border-left: 2px solid var(--line); } .contact__details b { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 3px; font-weight: var(--fw-medium); } .contact__details a, .contact__details span { font-size: var(--fs-body); color: var(--ink); } .contact__details a:hover { color: var(--accent); } .contact__details a:hover { color: var(--accent); } .contact__form { align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2vw, 28px); box-shadow: 0 18px 44px -26px rgba(10,15,20,.2), 0 2px 6px rgba(10,15,20,.05); } .contact__form .field { margin-bottom: var(--s-3); } .contact__form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .contact__form .label { margin-bottom: 5px; } .contact__form input, .contact__form select, .contact__form textarea { padding: 9px 12px; } .contact__form .btn { width: 100%; margin-top: var(--s-2); } .contact__fineprint { margin-top: var(--s-3); text-align: center; font-size: var(--fs-cap); color: var(--muted); } @media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; gap: var(--s-7); } .contact__form .field-row { grid-template-columns: 1fr; } } /* ============================================================ 18. Subpage components ============================================================ */ .page-hero { padding-top: var(--s-9); } .page-hero__top { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--s-8); align-items: end; padding-bottom: var(--s-7); } .page-hero h1 { font-size: var(--fs-display); letter-spacing: -0.05em; } .page-hero__aside { font-size: var(--fs-sm); color: var(--muted); } .page-hero__aside .actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; } .page-hero--center { text-align: center; padding-block: var(--s-10); } .page-hero--center h1 { max-width: 18ch; margin: 0 auto; } /* stat badge row */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); } .stat { padding: var(--s-4) var(--s-5); display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink); } .stat + .stat { border-left: 1px solid var(--line); } .stat .ic { color: var(--accent); } /* photo-thumb fit list */ .fitlist { display: flex; flex-direction: column; gap: var(--s-6); max-width: var(--container-md); margin: 0 auto; } .fititem { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-7); align-items: center; } .fititem__media { border-radius: var(--r-lg); overflow: hidden; background: var(--paper); aspect-ratio: 16/10; } .fititem__media video, .fititem__media img { width: 100%; height: 100%; object-fit: cover; } .fititem h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); } .fititem p { color: var(--muted); font-size: var(--fs-sm); } /* industry image tiles */ .industries { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } .industry img, .industry video { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg); background: var(--paper); } .industry span { display: block; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s-3); } .note-line { display: flex; gap: var(--s-3); align-items: center; justify-content: center; margin-top: var(--s-7); color: var(--body); font-size: var(--fs-sm); } .note-line .accent { color: var(--accent); } /* interactive checklist card */ .checkcard { max-width: var(--container-sm); margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s-8); box-shadow: var(--shadow-card); } .checkrow { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .checkrow:last-child { border-bottom: none; } .checkrow input { appearance: none; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: var(--r-xs); flex: none; margin-top: 1px; transition: all var(--t-base); position: relative; } .checkrow input:checked { background: var(--accent); border-color: var(--accent); } .checkrow input:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; } .checkrow span { font-size: var(--fs-body); color: var(--ink); } /* verdict cards (fit) */ .fit-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } .fit-card { border-radius: var(--r-xl); padding: var(--s-7); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); border-top: 4px solid var(--line); } .fit-card--no { border-top-color: var(--faint); } .fit-card--maybe { border-top-color: #E0A100; } .fit-card--yes { border-top-color: var(--accent); } .fit-card h3 { font-size: var(--fs-h3); margin-bottom: var(--s-4); } .fit-card li { font-size: var(--fs-sm); color: var(--muted); padding: var(--s-1) 0 var(--s-1) var(--s-5); position: relative; } .fit-card li::before { content: "›"; position: absolute; left: 0; color: var(--accent); } /* pricing: start card + included grid + effort */ .start-card { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s-8); box-shadow: var(--shadow-card); max-width: var(--container-md); margin: 0 auto; align-items: center; } .start-card h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); } .start-card .sub { color: var(--muted); margin-bottom: var(--s-5); } .checks li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--ink); } .checks li:first-child { border-top: none; } .checks .tick { flex: none; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; } .included-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); } .included { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); } .included .ic { color: var(--ink); margin-bottom: var(--s-6); } .included h3 { font-size: var(--fs-body); margin-bottom: var(--s-3); } .included p { font-size: var(--fs-cap); color: var(--muted); } .effort-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } .effort-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-card); } .effort-card .ic { color: var(--ink); margin-bottom: var(--s-5); } .effort-card h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); } .effort-card .meta { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-cap); margin-bottom: var(--s-3); } .effort-card p { font-size: var(--fs-sm); color: var(--muted); } /* security: chip graphic + promise cards */ .chip-art { display: grid; place-items: center; padding: var(--s-7) 0; } .chip-art img { max-width: 360px; } .promise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } .promise { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-7); box-shadow: var(--shadow-card); } .promise h3 { font-size: var(--fs-h3); margin-bottom: var(--s-5); } .promise .ic { color: var(--ink); margin-bottom: var(--s-5); } .promise .k { display: block; font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--fs-sm); margin-bottom: var(--s-2); } .promise p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-4); } .promise .k.accent { color: var(--accent); } .promise--contact { background: var(--paper); display: flex; flex-direction: column; justify-content: center; } .promise--contact .badge { width: 88px; margin-bottom: var(--s-4); } /* about: story + team badges */ .story { position: relative; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-raise); margin-bottom: var(--s-9); } .story video, .story img { width: 100%; aspect-ratio: 16/8; object-fit: cover; } .story__play { position: absolute; right: var(--s-7); bottom: var(--s-7); width: 56px; height: 56px; border-radius: var(--r-full); background: rgba(255,255,255,0.92); color: var(--ink); font-size: 18px; display: grid; place-items: center; box-shadow: var(--shadow-raise); } .story__play:hover { background: #fff; } .story__label { position: absolute; left: var(--s-7); bottom: var(--s-7); color: #fff; font-family: var(--font-display); text-shadow: 0 2px 14px rgba(0,0,0,0.5); } .team-join--art { position: relative; padding: 0; overflow: hidden; } .team-join--art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .team-join--art .team-join__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; padding: var(--s-7); height: 100%; justify-content: flex-end; background: linear-gradient(transparent, rgba(5,9,13,0.85)); color: var(--on-dark); } .team-join--art .team-join__body h3 { color: #fff; font-size: var(--fs-h3); } .story__label .small { font-size: var(--fs-sm); opacity: 0.85; } .story__label .big { font-size: var(--fs-h3); } .prose { max-width: var(--reading); margin: 0 auto; } .prose h3 { font-size: var(--fs-h3); margin: var(--s-7) 0 var(--s-3); } .prose p { color: var(--body); margin-bottom: var(--s-4); } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } .team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--shadow-card); display: flex; gap: var(--s-5); } .team-card .avatar { flex: none; width: 64px; height: 64px; border-radius: var(--r-full); object-fit: cover; background: var(--paper-2); display: grid; place-items: center; font-family: var(--font-display); color: var(--muted); } .team-card h3 { font-size: var(--fs-lead); } .team-card .role { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-3); } .team-card p { font-size: var(--fs-sm); color: var(--muted); } .team-join { background: var(--dark); color: var(--on-dark); border-radius: var(--r-xl); padding: var(--s-7); display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); } .team-join h3 { color: var(--on-dark); font-size: var(--fs-h2); } /* ============================================================ 18b. Blog index + article ============================================================ */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } .post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); } .post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raise); } .post-card__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .post-card__cat { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); } .post-card h3 { font-size: var(--fs-h3); } .post-card p { color: var(--muted); font-size: var(--fs-sm); flex: 1; } .post-card__meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--faint); } .article { max-width: 720px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 24px); } .article__head { margin-bottom: var(--s-7); } .article__cat { font-family: var(--font-mono); font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); } .article__head h1 { font-size: var(--fs-h1); margin: var(--s-3) 0; letter-spacing: -0.03em; } .article__meta { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); } .article__body { font-size: var(--fs-lead); color: var(--body); line-height: 1.7; } .article__body h2 { font-size: var(--fs-h2); margin: var(--s-8) 0 var(--s-3); } .article__body h3 { font-size: var(--fs-h3); margin: var(--s-6) 0 var(--s-2); } .article__body p { margin-bottom: var(--s-4); } .article__body ul, .article__body ol { margin: 0 0 var(--s-4) var(--s-5); } .article__body li { margin-bottom: var(--s-2); } .answer-capsule { background: var(--accent-tint); border-left: 3px solid var(--accent); border-radius: 0; padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6); font-size: var(--fs-lead); color: var(--ink); } .answer-capsule .k { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: var(--s-2); } .article table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--fs-sm); } .article th, .article td { border: 1px solid var(--line); padding: var(--s-3) var(--s-4); text-align: left; } .article th { background: var(--paper); font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--ink); } .article td:first-child { color: var(--ink); } .article__faq details { border-bottom: 1px solid var(--line); } .article__faq summary { padding: var(--s-4) 0; font-family: var(--font-display); font-size: var(--fs-lead); color: var(--ink); cursor: pointer; } .article__faq .a { padding-bottom: var(--s-4); font-size: var(--fs-body); color: var(--muted); } @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } } /* ============================================================ 18c. How it works — sticky scroll ============================================================ */ /* self-contained step rows: number + copy on one side, its live mockup on the other, sides alternating. Each step's animation lives with the step — no disconnected pinned panel, so it reads perfectly on mobile too. */ .how-flow { display: flex; flex-direction: column; gap: clamp(52px, 8vw, 104px); max-width: 1000px; margin: 0 auto; } .how-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 76px); align-items: center; transition: opacity var(--t-base); } .how-row:nth-child(even) .how-row__viz { order: -1; } .how-row:not(.is-active) { opacity: .5; } .how-row__viz { display: grid; place-items: center; } .how-step__num { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(58px, 8vw, 92px); line-height: .85; letter-spacing: -.03em; color: var(--faint); margin-bottom: var(--s-3); transition: color var(--t-base); } .how-step__num .accent { color: var(--faint); transition: color var(--t-base); } .how-row.is-active .how-step__num { color: var(--ink); } .how-row.is-active .how-step__num .accent { color: var(--accent); } .how-step__badge { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: var(--s-2); } .how-row__lead h3 { font-size: var(--fs-h2); margin-bottom: var(--s-3); } .how-row__lead p { color: var(--muted); max-width: 42ch; } .how-viz.mock { position: static; inset: auto; opacity: 1; transform: none; pointer-events: auto; width: 100%; max-width: 440px; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .how-row.is-active .how-viz.mock { transform: translateY(-5px); box-shadow: 0 26px 52px -26px rgba(10,15,20,.30); } /* HTML/CSS app mockups (no image assets) */ .mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-raise); overflow: hidden; } .mock__bar { display: flex; align-items: center; gap: 6px; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); background: var(--paper); } .mock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .mock__name { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); margin-left: var(--s-2); text-transform: uppercase; letter-spacing: 0.06em; } .mock__pad { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); } .mock__label { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .mock__field { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-sm); color: var(--ink); background: var(--canvas); } .mock__upload { border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 12px; font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: var(--s-2); } .mock__cta { margin-top: var(--s-2); background: var(--accent); color: #fff; text-align: center; padding: 10px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); } .mock__scan { height: 72px; border-radius: var(--r-sm); background: var(--paper); position: relative; overflow: hidden; } .mock__scan span { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); animation: mockScan 2.2s var(--ease-inout) infinite; } @keyframes mockScan { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } } .mock__src { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); color: var(--ink); padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .mock__src b { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--accent); font-weight: var(--fw-medium); } .mock__src b.is-muted { color: var(--faint); } .mock__bar2 { height: 6px; border-radius: 999px; background: var(--paper); overflow: hidden; margin-top: var(--s-2); } .mock__bar2 span { display: block; height: 100%; width: 72%; background: var(--accent); } .mock .rcv-tag { margin-top: var(--s-4); } /* --- step 1: batch upload — photos drop in one by one, progress races --- */ .mock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mock__grid .mg { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; animation: mgIn 6s var(--ease-out) infinite; animation-delay: var(--d, 0s); } .mock__grid .mg img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes mgIn { 0% { opacity: 0; transform: translateY(12px) scale(.92); filter: blur(3px); } 5% { opacity: 1; transform: translateY(-1px) scale(1.01); filter: blur(0); } 8% { transform: none; } 88% { opacity: 1; } 96%, 100% { opacity: 0; } } .mock__bar2--live span { width: 0; animation: mockUp 6s var(--ease-inout) infinite; } @keyframes mockUp { 0%, 4% { width: 0; } 38% { width: 100%; } 90% { width: 100%; opacity: 1; } 97%, 100% { width: 100%; opacity: 0; } } /* --- step 2: identification — item card blooms, confidence counts, RCV lands --- */ .mock__idrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--canvas); opacity: 0; animation: mgIn 6s var(--ease-out) infinite .2s; } .mock__idrow img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; } .mock__idname { flex: 1; min-width: 0; } .mock__idname b { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: var(--fw-medium); } .mock__idname i { display: block; font-style: normal; font-size: var(--fs-micro); color: var(--muted); } .mock__conf { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent); background: var(--accent-tint); border-radius: 6px; padding: 4px 7px; } .mock__rcvpop { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); opacity: 0; animation: rcvPop 6s var(--ease-out) infinite; } .mock__rcvpop b { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ink); } @keyframes rcvPop { 0%, 52% { opacity: 0; transform: scale(.94); } 58% { opacity: 1; transform: scale(1.04); } 63% { transform: scale(1); } 90% { opacity: 1; } 97%, 100% { opacity: 0; } } /* --- step 3: estimator review — value gets edited, then approved --- */ .mock__edit { display: flex; align-items: center; gap: 10px; padding-block: var(--s-2); border-top: 1px solid var(--line-soft); } .mock__vals { position: relative; flex: 1; height: 30px; } .mock__vals b { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ink); } .mock__vals .v1 { animation: valOut 6s infinite; } .mock__vals .v2 { opacity: 0; color: var(--accent); animation: valIn 6s infinite; } @keyframes valOut { 0%, 30% { opacity: 1; text-decoration: none; } 36%, 44% { opacity: .35; text-decoration: line-through; } 50%, 100% { opacity: 0; } } @keyframes valIn { 0%, 44% { opacity: 0; transform: translateY(calc(-50% + 8px)); } 52% { opacity: 1; transform: translateY(-50%); } 100% { opacity: 1; transform: translateY(-50%); } } .mock__edit .pen { width: 16px; height: 16px; flex: none; color: var(--muted); animation: penWiggle 6s var(--ease-inout) infinite; } @keyframes penWiggle { 0%, 28% { transform: none; color: var(--muted); } 33% { transform: rotate(-14deg) translateY(-2px); color: var(--accent); } 38% { transform: rotate(6deg); color: var(--accent); } 44% { transform: none; } 54%, 100% { color: var(--muted); } } .mock__approve { margin-top: var(--s-2); text-align: center; padding: 10px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); border: 1px solid var(--line); color: var(--muted); animation: approveFill 6s var(--ease-out) infinite; } .mock__approve .tick { opacity: 0; animation: tickIn 6s var(--ease-out) infinite; } @keyframes approveFill { 0%, 58% { background: var(--surface); color: var(--muted); border-color: var(--line); } 66%, 92% { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 8px 20px -8px rgba(10,126,148,.5); } 100% { background: var(--surface); color: var(--muted); } } @keyframes tickIn { 0%, 62% { opacity: 0; } 70%, 92% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mock__grid .mg, .mock__idrow, .mock__rcvpop { animation: none; opacity: 1; } .mock__bar2--live span { animation: none; width: 85%; } .mock__vals .v1 { animation: none; opacity: 0; } .mock__vals .v2 { animation: none; opacity: 1; transform: translateY(-50%); } .mock__edit .pen { animation: none; } .mock__approve { animation: none; background: var(--accent); color: #fff; border-color: var(--accent); } .mock__approve .tick { animation: none; opacity: 1; } } /* ============================================================ 18d. Motion: scroll reveals, blur-in, editorial grid lines ============================================================ */ .reveal-init { opacity: 0; transform: translateY(24px); } .reveal-in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .blur-init { opacity: 0; filter: blur(12px); } .blur-in { opacity: 1; filter: blur(0); transition: opacity .7s var(--ease-out), filter .7s var(--ease-out); } [data-float] { will-change: transform; } /* editorial vertical rule lines framing the main content */ .page-rules { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(var(--container), calc(100% - 2 * var(--s-5))); border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); pointer-events: none; z-index: 0; } @media (max-width: 900px) { /* how-it-works: each step stacks its own animation directly beneath the number */ .how-flow { gap: var(--s-9); } .how-row { grid-template-columns: 1fr; gap: var(--s-5); } .how-row:nth-child(even) .how-row__viz { order: 0; } .how-row:not(.is-active) { opacity: 1; } .how-row .how-step__num { color: var(--ink); } .how-row .how-step__num .accent { color: var(--accent); } .how-viz.mock { max-width: 400px; margin-inline: auto; } .how-row.is-active .how-viz.mock { transform: none; } .page-rules { display: none; } } /* ============================================================ 19. Responsive ============================================================ */ @media (max-width: 1199px) { .included-grid { grid-template-columns: repeat(3, 1fr); } .industries { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { :root { --fs-hero: 42px; --fs-display: 34px; --fs-h1: 30px; --fs-h2: 25px; } .nav__links { display: none; } .nav__toggle { display: inline-flex; } .nav__cta .btn--primary { display: none; } /* header CTA hidden on mobile; hamburger + hero CTA cover it */ .nav__brand { font-size: var(--fs-body); } /* current centered hero: clear the sticky header, tighter type + spacing */ .hero--minimal { margin-top: -62px; padding: 84px 0 var(--s-7); } .hero--minimal .hero__title { font-size: clamp(1.9rem, 8.4vw, 2.5rem); } .hero--minimal .hero__sub { font-size: var(--fs-body); margin-top: var(--s-4); } .hero__cinema { margin-top: var(--s-6); aspect-ratio: 16 / 11; border-radius: 14px; } .hero__head, .page-hero__top { grid-template-columns: 1fr; gap: 0; border: none; } .hero__title { border-left: none; padding: 0 0 var(--s-5); } .hero__aside { border: none; padding: var(--s-5) 0 0; border-top: 1px solid var(--line); } .hero__operator { width: 260px; max-width: 70%; margin-bottom: -70px; } .hero__backdrop { left: -120px; right: -120px; } .hero__jars { width: 200px; } .hero__shape { width: 220px; height: 220px; } .hero__shape--l { left: -50px; } .hero__shape--r { right: -50px; } /* personas: drop the scroll-driven single-panel machinery and stack all four as self-labelled cards you simply scroll through — no tab bar, no auto-switch */ .tab-card { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6); min-height: 0; } .scrolltabs { height: auto; } .scrolltabs__step { display: none; } .scrolltabs__sticky { position: static; } .tabs__head { display: none; } .tab-panel { display: block; } .tab-panel + .tab-panel { margin-top: var(--s-6); } .persona-tag { display: inline-flex; } .stack { grid-template-columns: 1fr; gap: var(--s-6); } .stack__intro { position: static; transform: none; margin-bottom: var(--s-5); } /* mobile folder stack: staggered sticky cascade with tabs zig-zagging left↔right so the pinned cards fan out like a real deck of labelled folders */ .folder { top: 80px; max-width: 100%; } .folder:nth-child(2) { top: 124px; } .folder:nth-child(3) { top: 168px; } .folder:nth-child(4) { top: 212px; } .folder:nth-child(5) { top: 256px; } .folder:nth-child(6) { top: 300px; } .folder + .folder { margin-top: 46vh; } .folders__tail { height: 34vh; } .folder__body { height: auto; min-height: 292px; padding: var(--s-7) var(--s-6); border-radius: 24px; } .folder__tab { margin-left: 4px; } .folder:nth-child(even) .folder__tab { margin-left: auto; margin-right: 4px; } .feature-row { grid-template-columns: 1fr; gap: var(--s-5); } .feature-row:nth-child(even) .feature-row__media { order: 0; } .feature-row + .feature-row { margin-top: var(--s-8); } .tl-step { grid-template-columns: 1fr; gap: var(--s-4); } .tl-step__art { display: none; } .roadmap { grid-template-columns: 1fr 1fr; } .tstm__card { width: 300px; } .included-grid, .effort-grid, .industries, .fit-cards, .promise-grid, .team-grid, .stat-row { grid-template-columns: 1fr; } .stat + .stat { border-left: none; border-top: 1px solid var(--line); } .fititem { grid-template-columns: 1fr; gap: var(--s-4); } .start-card { grid-template-columns: 1fr; } .footer__top { flex-direction: column; } .footer__cols { gap: var(--s-8); } .section { padding-block: var(--s-8); } } /* comparison table -> stacked cards on small screens (no more sideways scroll) */ @media (max-width: 860px) { .compare { overflow: visible; } .compare table { min-width: 0; width: 100%; border-collapse: collapse; } .compare thead { display: none; } .compare tbody { display: flex; flex-direction: column; gap: var(--s-4); } .compare tr { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); } .compare td { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); text-align: right; padding: 11px var(--s-5); border-bottom: 1px solid var(--line-soft); width: auto !important; } .compare td:last-child { border-bottom: none; } .compare td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; flex: none; } .compare td:first-child { justify-content: flex-start; background: var(--paper); font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--ink); font-size: var(--fs-body); } .compare td:first-child::before { display: none; } .compare .col-brand { background: var(--accent); color: #fff; } .compare .col-brand::before { color: rgba(255,255,255,.75); } .compare .col-brand .k { color: #fff; text-align: right; } } @media (max-width: 600px) { .roadmap { grid-template-columns: 1fr; } .hero__cta { flex-direction: column; } .hero__cta .btn, .cta .btn { width: 100%; } .footer__bottom { flex-direction: column; gap: var(--s-4); align-items: flex-start; } /* vignettes: stack retailer tiles + tighten so nothing overflows the card */ .fx__tiles { grid-template-columns: 1fr; } .fx, .tab-card__preview { padding: var(--s-5) var(--s-5); } .vg__name, .fx__tile .r, .fx__tile .s, .vg__rec span, .mock__idname b { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .fxh { width: 62%; left: 6%; margin-left: 0; } } /* mobile personas: each stacked card rises + sharpens as it scrolls into view. Scroll-linked, so it tracks the finger exactly. Enhancement only — where view() timelines are unsupported the cards simply show, fully styled. */ @supports (animation-timeline: view()) { @media (max-width: 900px) { .tab-panel { animation: personaRise linear both; animation-timeline: view(); animation-range: entry 4% entry 46%; } } } @keyframes personaRise { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .tab-panel { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } * { animation: none !important; transition: none !important; scroll-behavior: auto; } html { scroll-behavior: auto; } }