/* ============================================================ Kept — marketing homepage (/start/) Vanilla CSS. Mobile-first 390 → 1440+. Default styles render the RESOLVED end-state (no-JS and prefers-reduced-motion both land here). The scroll-scrub is enabled only when JS adds .js-anim to . ============================================================ */ :root { --ink: #182437; --bg: #f4f7fb; --paper: #ffffff; --accent: #245edb; --accent-light: #5084cd; --warning: #8c601a; --muted: #607086; --hairline: #dae3ee; --tan: #607086; --font-display: "Playfair Display", Georgia, serif; --font-body: "Source Serif 4", Georgia, serif; --track-h: 380svh; /* scrub runway */ --stage-h: 100svh; --container: 1120px; --radius: 10px; --shadow-card: 0 24px 60px -18px rgba(24, 36, 55, 0.22), 0 6px 18px -8px rgba(24, 36, 55, 0.14); } @supports not (height: 100svh) { :root { --track-h: 380vh; --stage-h: 100vh; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, .closer-headline { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.01em; text-wrap: balance; } .figure { font-variant-numeric: tabular-nums; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1; text-decoration: none; padding: 1rem 1.75rem; border-radius: 999px; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(36, 94, 219, 0.55); } .btn-primary:hover { background: #1d4db4; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(36, 94, 219, 0.65); } .btn-primary:active { transform: translateY(0) scale(0.985); } .btn-ghost { color: var(--accent); background: rgba(244, 247, 251, 0.72); box-shadow: inset 0 0 0 1.5px var(--hairline); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); transform: translateY(-2px); background: rgba(244, 247, 251, 0.92); } .btn-ghost:active { transform: translateY(0); } .btn-small { padding: 0.65rem 1.25rem; font-size: 0.95rem; } .btn-large { padding: 1.15rem 2.25rem; font-size: 1.15rem; } .cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; } .cta-row.center { justify-content: center; } /* ---------- Header ---------- */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.25rem, 4vw, 3rem); } .site-header .brand img { width: 96px; height: auto; } .site-header .brand { text-decoration: none; } /* text wordmark — "Kept." with the Glacier blue brand dot, Playfair */ .brand-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); } .brand-dot { color: #245edb; } /* ---------- floating header (JS scrub mode) ---------- The header stays visible over the hero so Kept. is on the first paint (LIFE-361). main.js still toggles .site-header--visible after the scrub for a slightly stronger bar. */ .js-anim .site-header { position: fixed; inset: 0 0 auto 0; height: 64px; padding: 0 clamp(1.25rem, 4vw, 3rem); background: rgba(244, 247, 251, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(24, 36, 55, 0.08); box-shadow: 0 1px 12px rgba(24, 36, 55, 0.06); z-index: 60; opacity: 1; transform: none; pointer-events: auto; transition: transform 0.32s ease, opacity 0.32s ease, background 0.32s ease; will-change: transform, opacity; } .js-anim .site-header--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .js-anim .site-header { transition: none; } } /* ============================================================ HERO — scrub stage Static default = resolved end-state: clean sheet photo with the app card settled in place, headline + CTA on top. ============================================================ */ .scrub-track { position: relative; } /* static default: normal flow — copy first, app card below, photos as a fixed backdrop. No overlap, page grows as needed. */ .scrub-stage { position: relative; min-height: var(--stage-h); overflow: hidden; display: flex; flex-direction: column; align-items: center; } .layer { position: absolute; inset: 0; margin: 0; } .layer-messy img, .layer-clean img { width: 100%; height: 100%; object-fit: cover; } .layer-messy, .layer-clean { height: 100%; } /* readability scrim over the photos, strongest at the top. --scrim is scrubbed by JS: full under the headline, receding while the photos carry the story, returning for the end line. */ .scrub-stage { --scrim: 1; } .scrub-stage::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: var(--scrim); background: linear-gradient( 180deg, rgba(244, 247, 251, 0.97) 0%, rgba(244, 247, 251, 0.88) 26%, rgba(244, 247, 251, 0.45) 46%, rgba(244, 247, 251, 0) 62% ); } /* warm wash used to calm the photo while the app card lands */ .layer-wash { z-index: 4; background: rgba(244, 247, 251, 0.55); opacity: 1; /* static end-state: calmed */ pointer-events: none; } /* static end-state: messy hidden, clean visible */ .layer-messy { opacity: 0; } .layer-clean { opacity: 1; } /* the app hand-off card — in static mode it sits in flow below the copy */ .layer-app { position: relative; inset: auto; order: 2; /* static flow: copy first, then the app card */ z-index: 6; display: flex; align-items: flex-end; justify-content: center; padding: 0 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); margin-top: auto; } .app-card { margin: 0; width: min(720px, 92vw); pointer-events: auto; } .app-card img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid rgba(24, 36, 55, 0.08); background: #fff; } .app-card-caption { margin-top: 0.6rem; text-align: center; font-size: 0.9rem; color: var(--tan); } /* hero copy — static mode: in flow above the app card */ .hero-copy { position: relative; z-index: 10; width: min(760px, calc(100vw - 2.5rem)); text-align: center; } .hero-copy-start { order: 1; margin: clamp(5.5rem, 13svh, 8.5rem) auto 2.5rem; } .hero-copy-start h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); margin-bottom: 0.35em; letter-spacing: -0.018em; color: #182437; } .h1-line { display: block; } .h1-accent { font-style: italic; color: #245edb; letter-spacing: -0.012em; } .hero-sub { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink); max-width: 34em; margin: 0 auto 1.5rem; } .hero-copy-start .cta-row { justify-content: center; } .scroll-hint { display: none; /* only meaningful when the scrub runs */ margin-top: 2.25rem; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tan); } .scroll-hint-label { display: block; margin-bottom: 0.6rem; } .scroll-hint-line { display: inline-block; width: 1px; height: 40px; background: rgba(24, 36, 55, 0.14); position: relative; overflow: hidden; } .scroll-hint-line i { position: absolute; inset: 0; background: var(--accent); transform: translateY(-100%); } /* mid + end scrub captions — hidden unless the scrub runs */ .hero-copy-mid, .hero-copy-end { display: none; } .mid-line, .end-line { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); font-style: italic; margin: 0 0 0.75rem; text-shadow: 0 1px 12px rgba(244, 247, 251, 0.9); } /* the mid caption sits over the busiest part of the photo, so it gets its own paper slip — a solid cream card, slightly laid-down, that keeps the serif elegant while guaranteeing contrast (AA-ish: ink on ~0.96 cream). Only meaningful in scrub mode; hidden otherwise. */ .js-anim .mid-line { display: inline-block; color: var(--ink); background: linear-gradient(126deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%, rgba(24, 36, 55, 0.03) 90%), rgba(244, 247, 251, 0.97); padding: 0.48em 1em 0.54em; border-radius: 3px; text-shadow: none; box-shadow: 0 22px 48px -16px rgba(24, 36, 55, 0.45), 0 3px 10px -3px rgba(24, 36, 55, 0.22); transform: rotate(-1.8deg); } /* the end line returns while the scrim is still climbing back — give it a soft cream halo so it never fights the sheet photo */ .js-anim .hero-copy-end::before { content: ""; position: absolute; inset: -18% -14%; z-index: -1; border-radius: 50%; background: radial-gradient( closest-side, rgba(244, 247, 251, 0.92) 0%, rgba(244, 247, 251, 0.75) 55%, rgba(244, 247, 251, 0) 100% ); } /* ---------- Scrub mode (JS + motion OK) ---------- */ .js-anim .scrub-track { height: var(--track-h); } .js-anim .scrub-stage { position: sticky; top: 0; height: var(--stage-h); } /* start frame: messy on top, clean waiting, app + wash offstage. Layers go back to absolute overlays for the scrub. */ .js-anim .layer-messy { opacity: 1; will-change: opacity, transform; } .js-anim .layer-clean { opacity: 0; will-change: opacity, transform; } .js-anim .layer-wash { opacity: 0; } .js-anim .layer-app { position: absolute; inset: 0; margin-top: 0; opacity: 0; transform: translateY(7svh) scale(0.94); will-change: opacity, transform; pointer-events: none; } .js-anim .hero-copy { position: absolute; left: 50%; transform: translateX(-50%); } .js-anim .hero-copy-start { top: clamp(4.75rem, 12svh, 8rem); margin: 0; will-change: opacity, transform; } .js-anim .scroll-hint { display: block; } .js-anim .hero-copy-mid, .js-anim .hero-copy-end { display: block; opacity: 0; pointer-events: none; } .hero-copy-mid { top: 58svh; } .hero-copy-end { top: clamp(4.5rem, 11svh, 7.5rem); } .hero-copy-end .btn { pointer-events: auto; } /* once the scrub completes, let the end CTA take clicks */ .js-anim .scrub-done .hero-copy-end { pointer-events: auto; } .js-anim .scrub-done .layer-app { pointer-events: auto; } @media (prefers-reduced-motion: no-preference) { .js-anim .scroll-hint-line i { animation: hint-run 2.1s cubic-bezier(0.65, 0, 0.35, 1) infinite; } } @keyframes hint-run { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* ---------- Entrance choreography (first 1.2s, scrub mode only) ---------- Elements start held; html.loaded (added on the first painted frame) releases them on a stagger. Reduced-motion / no-JS never get .js-anim, so the static page renders instantly. */ .js-anim .e1, .js-anim .e2, .js-anim .e3, .js-anim .e4, .js-anim .e5 { opacity: 0; transform: translateY(26px); transition: opacity 950ms cubic-bezier(0.16, 1, 0.3, 1), transform 950ms cubic-bezier(0.16, 1, 0.3, 1); } .js-anim.loaded .e1, .js-anim.loaded .e2, .js-anim.loaded .e3, .js-anim.loaded .e4, .js-anim.loaded .e5 { opacity: 1; transform: translateY(0); } .js-anim .e2 { transition-delay: 110ms; } .js-anim .e3 { transition-delay: 240ms; } .js-anim .e4 { transition-delay: 360ms; } .js-anim .e5 { transition-delay: 520ms; } /* the end-line's green underline "draws" via scaleX (JS-driven) */ .u-wrap { position: relative; white-space: nowrap; } .u-ink { position: absolute; left: 0.02em; right: 0.02em; bottom: -0.04em; height: 0.075em; background: var(--accent); border-radius: 1px; transform: scaleX(0); transform-origin: left center; will-change: transform; } /* ============================================================ FLYING PAPERS — decorative scraps scrubbed by scroll. Pure transform/opacity (static filter blur for depth of field on the far layer). Hidden entirely without .js-anim (no-JS and prefers-reduced-motion never see them). CSS-drawn: zero image weight. Motion model, three composed layers: .paper — JS writes the scroll-scrubbed flight transform .flut — CSS keyframe: horizontal sway + rotate, period --fd .flut2 — CSS keyframe: vertical bob + skew, period --fd2 The two periods are co-prime-ish per paper, so the composite path never visibly repeats — continuous organic flutter with zero per-frame JS cost. ============================================================ */ .layer-papers { display: none; } .js-anim .layer-papers { display: block; z-index: 4; /* above wash, below scrim/app/copy */ pointer-events: none; overflow: visible; } .paper { position: absolute; will-change: transform, opacity; } /* depth of field */ .depth-far { filter: blur(1.7px); z-index: 1; } .paper { z-index: 2; } .depth-near { z-index: 3; } .depth-near.paper-receipt, .depth-near.paper-note { box-shadow: 0 22px 44px -14px rgba(24, 36, 55, 0.5); } .flut, .flut2 { display: block; width: 100%; height: 100%; } .flut2 { padding: 10px 12px; overflow: hidden; position: relative; } @media (prefers-reduced-motion: no-preference) { .js-anim .flut { animation: flut-sway var(--fd, 6.4s) ease-in-out var(--fp, 0s) infinite; } .js-anim .flut2 { animation: flut-bob var(--fd2, 5s) ease-in-out var(--fp2, 0s) infinite; } } /* sway: side drift + roll — one axis of the Lissajous pair */ @keyframes flut-sway { 0%, 100% { transform: translateX(calc(var(--fa, 1) * -3px)) rotate(calc(var(--fa, 1) * -1.7deg)); } 50% { transform: translateX(calc(var(--fa, 1) * 5px)) rotate(calc(var(--fa, 1) * 2.1deg)); } } /* bob: lift + settle with a skew "breath" — paper bending in air */ @keyframes flut-bob { 0%, 100% { transform: translateY(calc(var(--fa, 1) * 3px)) skewX(0deg) rotate(0deg); } 33% { transform: translateY(calc(var(--fa, 1) * -6px)) skewX(calc(var(--fa, 1) * 1.6deg)) rotate(0.6deg); } 66% { transform: translateY(calc(var(--fa, 1) * 2px)) skewX(calc(var(--fa, 1) * -1.3deg)) rotate(-0.5deg); } } /* printed lines on the scraps */ .pl { display: block; font-style: normal; font-family: var(--font-body); font-size: 10px; line-height: 1.9; letter-spacing: 0.06em; color: rgba(24, 36, 55, 0.5); white-space: nowrap; font-variant-numeric: tabular-nums; } .pl-total { color: rgba(24, 36, 55, 0.72); border-top: 1px solid rgba(24, 36, 55, 0.25); } /* shared lighting: a raking sheen from the top-left + soft lower shade so every scrap reads as lit paper, not a flat rectangle */ .paper-receipt, .paper-frag, .paper-scrap { background-blend-mode: normal; } /* receipt: narrow white strip, ruled, torn bottom edge */ .paper-receipt { width: 128px; min-height: 96px; background: linear-gradient(128deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 38%, rgba(24, 36, 55, 0.045) 82%), repeating-linear-gradient( 180deg, transparent 0 17px, rgba(24, 36, 55, 0.05) 17px 18px ), #ffffff; box-shadow: 0 14px 30px -12px rgba(24, 36, 55, 0.4); clip-path: polygon( 0 0, 100% 0, 100% 92%, 92% 96%, 84% 91%, 74% 97%, 63% 92%, 52% 97%, 41% 91%, 30% 96%, 19% 91%, 9% 97%, 0 92% ); } .paper-receipt-long { width: 138px; min-height: 132px; } /* statement fragment: wider cream sheet with a fold crease */ .paper-frag { width: 168px; min-height: 78px; background: linear-gradient(124deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%, rgba(24, 36, 55, 0.05) 85%), linear-gradient(180deg, transparent 46%, rgba(24, 36, 55, 0.06) 50%, rgba(255, 255, 255, 0.4) 52%, transparent 58%), linear-gradient(180deg, rgba(36, 94, 219, 0.1) 0 14px, transparent 14px), #ffffff; border: 1px solid rgba(24, 36, 55, 0.07); box-shadow: 0 16px 34px -14px rgba(24, 36, 55, 0.42); } .paper-frag .flut2 { padding-top: 20px; } /* torn scrap: irregular blank shred */ .paper-scrap { width: 74px; height: 58px; background: linear-gradient(132deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 45%, rgba(24, 36, 55, 0.05) 88%), #f4f7fb; box-shadow: 0 10px 24px -10px rgba(24, 36, 55, 0.38); clip-path: polygon( 4% 12%, 32% 0, 68% 6%, 96% 2%, 100% 44%, 90% 78%, 62% 100%, 28% 94%, 0 76%, 6% 42% ); } /* banknote: sage-tinted note, double guilloche border, corner numerals */ .paper-note { width: 148px; height: 70px; border-radius: 2px; background: radial-gradient(ellipse 36px 24px at 50% 50%, rgba(36, 94, 219, 0.16), rgba(36, 94, 219, 0) 72%), linear-gradient(118deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 42%, rgba(24, 36, 55, 0.05) 86%), linear-gradient(180deg, #e8f0fa, #d4e2f2); box-shadow: inset 0 0 0 1px rgba(36, 94, 219, 0.3), inset 0 0 0 5px rgba(244, 247, 251, 0.6), inset 0 0 0 6px rgba(36, 94, 219, 0.18), 0 12px 26px -10px rgba(24, 36, 55, 0.38); } .paper-note .flut2::before, .paper-note .flut2::after { content: "50"; position: absolute; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: rgba(36, 94, 219, 0.55); font-variant-numeric: tabular-nums; } .paper-note .flut2::before { top: 6px; left: 10px; } .paper-note .flut2::after { bottom: 6px; right: 10px; } /* home positions (percent-based so both widths compose) */ .f1 { left: 6%; top: 34%; } .f2 { left: 76%; top: 26%; } .f3 { left: 16%; top: 66%; } .f4 { left: 84%; top: 58%; } .f5 { left: 30%; top: 44%; } .f6 { left: 64%; top: 72%; } .f7 { left: 46%; top: 62%; } .f8 { left: 88%; top: 40%; } .f9 { left: 12%; top: 52%; } .f10 { left: 70%; top: 46%; } .f11 { left: 40%; top: 30%; } .f12 { left: 55%; top: 68%; } .f13 { left: 24%; top: 74%; } .f14 { left: 60%; top: 22%; } .d1 { left: 34%; top: 58%; } .d2 { left: 80%; top: 70%; } .d3 { left: 8%; top: 76%; } .d4 { left: 52%; top: 40%; } .s1 { left: 24%; top: 30%; } .s2 { left: 68%; top: 36%; } .s3 { left: 48%; top: 24%; } .s4 { left: 36%; top: 70%; } /* settle papers only appear during the hand-off; JS drives opacity */ .settle { opacity: 0; } /* soft cream spotlight behind the app card during the hand-off — JS drives opacity; static gradient, transform/opacity only */ .layer-glow { z-index: 5; opacity: 0; pointer-events: none; background: radial-gradient( ellipse 60% 52% at 50% 62%, rgba(244, 247, 251, 0.85) 0%, rgba(244, 247, 251, 0.45) 55%, rgba(244, 247, 251, 0) 100% ); } .js-anim .layer-glow { will-change: opacity; } @media (max-width: 640px) { /* Tall phones (Pixel Pro / Pro Max ~9:20): cover would crop the right-side mug. Bias the clean desk to keep coffee + paper. */ .layer-clean img { object-position: 78% 40%; } .layer-messy img { object-position: 50% 42%; } .shot-lightbox { width: calc(100vw - 1.25rem); max-height: calc(100dvh - 1.25rem); padding: 1rem 1rem 0.9rem; overflow: auto; } .shot-lightbox-nav { grid-template-columns: 1fr; justify-items: stretch; } .shot-lightbox-caption { justify-self: stretch; text-align: left; } } @media (max-width: 640px) and (max-aspect-ratio: 10/19) { :root { --stage-h: 100dvh; } .layer-clean img { object-position: 84% 34%; } .hero-copy-start { margin: clamp(4.25rem, 8svh, 6.5rem) auto 1.25rem; } } @media (max-width: 640px) { .pm-hide { display: none; } /* blur is the one non-composited cost — drop it on phones */ .depth-far { filter: none; opacity: 0.88; } .paper-receipt { width: 96px; min-height: 76px; } .paper-frag { width: 128px; min-height: 64px; } .paper-scrap { width: 56px; height: 44px; } .paper-note { width: 112px; height: 54px; } .f1 { left: 4%; top: 30%; } .f3 { left: 10%; top: 68%; } .f5 { left: 56%; top: 46%; } .f8 { left: 70%; top: 26%; } .f9 { left: 8%; top: 52%; } .f11 { left: 42%; top: 32%; } .d1 { left: 30%; top: 60%; } .d4 { left: 62%; top: 40%; } .s1 { left: 18%; top: 30%; } .s3 { left: 58%; top: 24%; } .s4 { left: 30%; top: 72%; } } /* ============================================================ SECTIONS ============================================================ */ html.js-anim { scroll-padding-top: 72px; } .section { padding: clamp(4.5rem, 10vw, 8rem) 0; scroll-margin-top: 72px; } .container { width: min(var(--container), calc(100% - 2.5rem)); margin: 0 auto; } .container.narrow { max-width: 780px; } .container.center { text-align: center; } .kicker { font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 1rem; } h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); } .lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink); max-width: 38em; } h3 { font-size: 1.3rem; margin-bottom: 0.35em; } /* problem */ .section-problem { background: var(--bg); } .problem-list { list-style: none; margin: 3rem 0 0; padding: 0; } .problem-list li { padding: 1.75rem 0; border-top: 1px solid var(--hairline); } .problem-list li:last-child { border-bottom: 1px solid var(--hairline); } .problem-list p { margin: 0; color: var(--tan); max-width: 44em; } /* how it works */ .section-how { background: var(--paper); } .steps { list-style: none; counter-reset: step; margin: 3rem 0 0; padding: 0; display: grid; gap: 2.25rem; } .step { position: relative; padding-left: 4.25rem; } .step-num { position: absolute; left: 0; top: 0.1rem; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--bg); background: var(--accent); font-variant-numeric: tabular-nums; } .step p { margin: 0; color: var(--tan); max-width: 36em; } /* the app / proof */ .section-app { background: var(--bg); } .shot { margin: 0; } .shot img { border-radius: var(--radius); border: 1px solid var(--hairline); box-shadow: 0 18px 44px -20px rgba(24, 36, 55, 0.28); background: #fff; } .shot figcaption { margin-top: 0.75rem; font-size: 0.95rem; color: var(--tan); } .shot-hero { margin-top: 3rem; max-width: 900px; } .shot-row { margin-top: 3rem; display: grid; gap: 2.25rem; } .shot-open, .shot-caption { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .shot-open img { display: block; width: 100%; height: auto; } .shot-open:focus-visible, .shot-caption:focus-visible, .shot-lightbox-story:focus-visible, .shot-lightbox-nav button:focus-visible, .shot-lightbox-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .shot-caption:hover { color: var(--ink); } .shot-lightbox { width: min(1120px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: 0 24px 64px -24px rgba(24, 36, 55, 0.45); } .shot-lightbox::backdrop { background: rgba(13, 27, 42, 0.55); } .shot-lightbox-frame { display: grid; gap: 0.65rem; } .shot-lightbox h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 2rem); } .shot-lightbox-story, .shot-lightbox-caption { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--tan); text-align: left; cursor: pointer; } .shot-lightbox-story { max-width: 42em; line-height: 1.45; } .shot-lightbox img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--hairline); background: #fff; } .shot-lightbox-nav { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; } .shot-lightbox-nav button { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; } .shot-lightbox-caption { justify-self: center; text-align: center; } .shot-lightbox-close { justify-self: end; margin-top: 0.25rem; font: inherit; color: var(--tan); background: none; border: 0; cursor: pointer; } /* trust */ .section-trust { background: var(--paper); } .trust-list { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; } .trust-list li { padding-left: 1.9rem; position: relative; color: var(--tan); } .trust-list li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 0.85rem; height: 0.45rem; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); } .trust-list strong { color: var(--ink); } /* closer */ .section-closer { background: var(--bg); padding-bottom: clamp(5.5rem, 12vw, 9rem); } .closer-headline { font-size: clamp(2.4rem, 6vw, 4rem); } .section-closer .lead { margin-inline: auto; } .section-closer .cta-row { margin-top: 2rem; } /* footer */ .site-footer { border-top: 1px solid var(--hairline); background: var(--paper); padding: 2.25rem 0; font-size: 0.95rem; color: var(--tan); } .footer-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; } .footer-inner img { width: 74px; height: auto; } .footer-inner p { margin: 0; } .footer-inner nav { display: flex; gap: 1.5rem; } .footer-inner a { color: var(--accent); text-decoration: none; } .footer-inner a:hover { text-decoration: underline; } /* ---------- Reveals (gentle, gated on .js-anim) ---------- */ .js-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1); } .js-anim .reveal.in { opacity: 1; transform: translateY(0); } /* parallax layers move via JS transform; keep them cheap */ .js-anim [data-parallax] { will-change: transform; } /* ---------- Wider screens ---------- */ @media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .step { padding-left: 0; padding-top: 4.25rem; } .step-num { top: 0; } .shot-row { grid-template-columns: repeat(3, 1fr); } .app-card { width: min(760px, 74vw); } } @media (min-width: 1100px) { .layer-app { padding-bottom: 3rem; } .app-card { width: min(820px, 58vw); } } /* Marketing photography is cream. OS-dark must not invert --ink to near-white or the hero headline washes out (LIFE-361). Browser chrome still uses the dark theme-color meta; this page stays glacier-light. */ @media (prefers-color-scheme: dark) { :root { color-scheme: light; } .brand-wordmark { color: #182437; } .brand-dot { color: #245edb; } .js-anim .site-header { background: rgba(244, 247, 251, 0.92); border-bottom: 1px solid rgba(24, 36, 55, 0.08); box-shadow: 0 1px 12px rgba(24, 36, 55, 0.06); } .btn-ghost { background: rgba(255, 255, 255, 0.72); } .btn-ghost:hover { background: #fff; } }