/* ============================================================ DepthField Photo — alpha landing page Brand: warm near-black canvas, paper-white text, amber iris accent. Sora for headlines (matches the logotype); native system stack for body. ============================================================ */ :root { /* Surfaces — warm near-black, matching the logo canvas (#111110) */ --bg: #111110; --bg-alt: #16150f; --surface: #1b1a16; --surface-2: #211f1a; /* Ink — warm paper, the logo stroke colour (#f3ece0) */ --text: #ece6da; --text-strong: #f6f1e7; --text-muted: #9b9488; --text-dim: #6b655c; /* Accent — the amber iris */ --amber: #f0a23a; --amber-hover: #f7b85e; --amber-soft: rgba(240, 162, 58, 0.14); /* Secondary — the app's signature purple, used only as a glow */ --violet: #7c6ff0; --ok: #5fd3c4; --warn: #e0a030; --border: rgba(243, 236, 224, 0.1); --border-strong: rgba(243, 236, 224, 0.18); --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif; --maxw: 1120px; --maxw-narrow: 720px; --radius: 14px; --radius-sm: 9px; --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* `clip`, not `hidden`: `overflow-x: hidden` coerces overflow-y to `auto`, which makes the scroll container and breaks window scroll events (and thus the scroll-driven reveals). `clip` clips without scrolling. */ overflow-x: clip; } img, svg { display: block; max-width: 100%; } a { color: var(--amber); text-decoration: none; transition: color 0.15s var(--ease); } a:hover { color: var(--amber-hover); } code { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 0.86em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0.08em 0.42em; color: var(--text-strong); } h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); line-height: 1.12; letter-spacing: -0.02em; margin: 0; font-weight: 700; text-wrap: balance; } strong { color: var(--text-strong); font-weight: 650; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); } .container-narrow { max-width: var(--maxw-narrow); } .container-wide { max-width: 1240px; } .accent { color: var(--amber); } /* Uppercase-only labels (pills, badges, kicker headings): no descenders, so the line box's reserved descender space makes flex/absolute centering sit visibly high. Trim the box to cap height / baseline. Applies to block containers — flex items and positioned boxes qualify; wrap anonymous inline text in a span to use it. Ignored harmlessly where unsupported. */ .cap-trim { text-box: trim-both cap alphabetic; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--amber); color: #111110; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; font-weight: 600; } .skip-link:focus { left: 0; } /* ───────────────────────── Buttons ───────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-sm { padding: 9px 18px; font-size: 14.5px; } .btn-block { width: 100%; padding: 16px 24px; font-size: 17px; } .btn-primary { background: var(--amber); color: #111110; box-shadow: 0 8px 26px -10px rgba(240, 162, 58, 0.6); } .btn-primary:hover { background: var(--amber-hover); color: #111110; transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(240, 162, 58, 0.7); } .btn-ghost { background: transparent; color: var(--text-strong); border-color: var(--border-strong); } .btn-ghost:hover { color: var(--text-strong); border-color: var(--text-muted); background: rgba(243, 236, 224, 0.04); } /* ───────────────────────── Header ───────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 20px; height: 72px; } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand img { height: 40px; width: auto; } .nav { display: flex; gap: 28px; margin-left: auto; margin-right: 8px; } .nav a { color: var(--text-muted); font-size: 15px; font-weight: 500; } .nav a:hover { color: var(--text-strong); } /* ───────────────────────── Hero ───────────────────────── */ .hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 110px); } .hero::before { /* soft amber + violet depth glow */ content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 78% 28%, rgba(240, 162, 58, 0.16), transparent 70%), radial-gradient(55% 60% at 15% 12%, rgba(124, 111, 240, 0.12), transparent 70%); pointer-events: none; } .hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: clamp(32px, 6vw, 72px); } .hero-copy { max-width: 640px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--amber); background: var(--amber-soft); border: 1px solid rgba(240, 162, 58, 0.3); padding: 9px 14px; border-radius: 999px; margin: 0 0 24px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(240, 162, 58, 0.6); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(240, 162, 58, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(240, 162, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 162, 58, 0); } } .hero h1 { font-size: clamp(33px, 5.2vw, 56px); font-weight: 800; margin-bottom: 22px; } .lede { font-size: clamp(17px, 2vw, 20px); color: var(--text-muted); line-height: 1.6; margin: 0 0 32px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; } .hero-note { font-size: 14px; color: var(--text-dim); margin: 0; letter-spacing: 0.01em; } /* Shared media frame — hosts the hero reel, demo videos, before/after sliders, and the looks grid. Rounded, clipped, soft depth gradient. */ .media-frame { position: relative; width: 100%; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; background: radial-gradient(70% 80% at 72% 22%, rgba(240, 162, 58, 0.16), transparent 70%), radial-gradient(62% 72% at 18% 82%, rgba(124, 111, 240, 0.16), transparent 70%), var(--surface-2); } .ar-16x9 { aspect-ratio: 16 / 9; } .ar-4x3 { aspect-ratio: 4 / 3; } /* Real media (img / video) drops in and fills the frame edge-to-edge. */ .media-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Placeholder affordances — delete once real assets land. */ .slot-label { /* Dev placeholder marker for the hero reel; its long monospace text + ▶ glyph overflows the frame on small screens, so it's hidden until the real reel is dropped in (at which point this whole block goes away per the HTML comment). */ display: none; position: absolute; top: 10px; left: 10px; z-index: 4; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.03em; color: var(--text-muted); background: rgba(17, 17, 16, 0.66); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 4px 11px; backdrop-filter: blur(4px); } .slot-note { max-width: 32ch; margin: 0; padding: 24px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); } /* Hero visual — frame holds the reel; the aperture animation stands in. */ .hero-visual { position: relative; } .hero-frame { box-shadow: var(--shadow); } .aperture { position: relative; height: 84%; aspect-ratio: 1; display: grid; place-items: center; } .aperture .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(243, 236, 224, 0.22); } .aperture .ring-2 { inset: 13%; border-color: rgba(243, 236, 224, 0.32); animation: spin 26s linear infinite; border-style: dashed; } .aperture .ring-3 { inset: 26%; border-color: rgba(240, 162, 58, 0.4); box-shadow: 0 0 60px -8px rgba(240, 162, 58, 0.4) inset; } .aperture .hex { position: relative; width: 62%; height: auto; filter: drop-shadow(0 0 24px rgba(240, 162, 58, 0.45)); } @keyframes spin { to { transform: rotate(360deg); } } .bokeh { position: absolute; border-radius: 50%; filter: blur(1px); opacity: 0.5; animation: drift 12s ease-in-out infinite; } .b1 { width: 70px; height: 70px; top: 6%; left: 12%; background: radial-gradient(circle, rgba(240, 162, 58, 0.55), transparent 70%); } .b2 { width: 44px; height: 44px; bottom: 14%; left: 4%; background: radial-gradient(circle, rgba(124, 111, 240, 0.5), transparent 70%); animation-delay: -3s; } .b3 { width: 90px; height: 90px; bottom: 2%; right: 8%; background: radial-gradient(circle, rgba(240, 162, 58, 0.4), transparent 70%); animation-delay: -6s; } .b4 { width: 30px; height: 30px; top: 22%; right: 4%; background: radial-gradient(circle, rgba(243, 236, 224, 0.4), transparent 70%); animation-delay: -2s; } .b5 { width: 52px; height: 52px; top: 48%; right: 24%; background: radial-gradient(circle, rgba(124, 111, 240, 0.4), transparent 70%); animation-delay: -8s; } @keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -16px); } } /* ───────────────────────── Sections ───────────────────────── */ .section { padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--border); } .section-alt { background: var(--bg-alt); } .section-title { font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; margin-bottom: 18px; } .section-lede { font-size: clamp(17px, 2vw, 19px); color: var(--text-muted); max-width: 60ch; margin: 0 0 36px; } /* ───────────────────────── The deal ───────────────────────── */ .deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; } .deal-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 28px 30px; } .give-get { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 9px; } .give-get::before { content: ''; width: 9px; height: 9px; border-radius: 50%; } .give-get.get { color: var(--amber); } .give-get.get::before { background: var(--amber); } .give-get.give { color: var(--violet); } .give-get.give::before { background: var(--violet); } .check-list, .what-list { list-style: none; margin: 0; padding: 0; } .check-list li, .what-list li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--text); } .check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--amber); font-weight: 700; } .check-list.ask li::before { content: '→'; color: var(--violet); } .deal-footnote { color: var(--text-muted); font-size: 16px; margin: 0; max-width: 70ch; } /* ───────────────────────── Creed ───────────────────────── */ .section-creed { text-align: center; } .section-creed .section-title { margin-bottom: 26px; } .creed-text { font-size: clamp(18px, 2.3vw, 22px); line-height: 1.6; color: var(--text); max-width: 56ch; margin: 0 auto 18px; text-wrap: balance; } .creed-close { font-family: var(--font-display); font-weight: 600; color: var(--amber); margin-bottom: 0; } /* ───────────────────────── What is it ───────────────────────── */ .what-list { display: grid; gap: 16px; margin-bottom: 32px; } .what-list li { padding-left: 0; padding-block: 16px; border-bottom: 1px solid var(--border); margin: 0; } .what-list li:first-child { border-top: 1px solid var(--border); } .price-line { font-size: 18px; color: var(--text); background: var(--amber-soft); border: 1px solid rgba(240, 162, 58, 0.25); border-radius: var(--radius-sm); padding: 18px 22px; margin: 0; } /* Two columns: bullets left, the app screenshot (glossy 3D tilt) right. */ .what-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 56px); align-items: center; margin-bottom: 32px; } .what-grid .what-list { margin-bottom: 0; } /* App screenshot — a glossy "pane of glass" held at a fixed 3D product angle (rotateY/rotateX) that catches a crisp reflection sweeping across on scroll, iPhone-ad style. The reflection edge (--gloss-pos, inherited from .app-shot) is driven by main.js; reduced-motion users keep a static reflection (no sweep). */ .app-shot { perspective: 1500px; } .app-shot-glass { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); transform: rotateY(-20deg) rotateX(12deg); transform-origin: 50% 50%; box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.8), 0 6px 18px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .app-shot-img { display: block; width: 100%; height: auto; } /* The reflection — an even sheen that cuts HARD to nothing at --gloss-pos, so the light reads as a crisp diagonal edge sliding across the glass (not a soft band). screen-blended so it brightens the screenshot like real glare. */ .app-shot-gloss { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient( 118deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) calc(var(--gloss-pos, 55%) - 0.6%), transparent var(--gloss-pos, 55%) ); mix-blend-mode: screen; } /* ───────────────────────── Showcases (see it work) ───────────────────────── */ .showcases { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 84px); margin-top: 8px; } .showcase { display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); } .showcase:nth-child(even) { flex-direction: row-reverse; } .showcase-media { flex: 1.55; min-width: 0; margin: 0; } .showcase-media .media-frame { box-shadow: var(--shadow); } .showcase-text { flex: 1; min-width: 0; } .showcase-eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px; } .showcase-text h3 { font-size: clamp(22px, 2.7vw, 31px); margin-bottom: 12px; } .showcase-text p { color: var(--text-muted); font-size: 17px; margin: 0; } /* Before / after slider — BEFORE left, AFTER right (house convention). */ .ba-slider { --pos: 50; touch-action: none; user-select: none; cursor: ew-resize; } /* Scroll-driven by default: --pos follows scroll progress (--p, 0→1), wiping from all-before to all-after as the block passes through the viewport. Hovering takes manual control — .manual stops the mapping and the inline --pos (set from the cursor) wins; leaving clears it and the wipe resumes. */ .ba-slider:not(.manual) { --pos: calc((1 - var(--p, 0.5)) * 100); } .ba-layer { position: absolute; inset: 0; width: 100%; height: 100%; } .ba-layer img { width: 100%; height: 100%; object-fit: cover; display: block; } .ba-after { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); } /* Placeholder gradients so the slider demonstrates itself before real images land: BEFORE reads cool/flat, AFTER reads warm/vivid. */ .ph-before { background: linear-gradient(135deg, #2a2a30, #3a3a44 60%, #4a4a55); filter: saturate(0.4) brightness(0.85); } .ph-after { background: radial-gradient(80% 90% at 68% 22%, rgba(240, 162, 58, 0.6), transparent 70%), linear-gradient(135deg, #3a2c18, #7c6ff0 135%); } .ph-tag { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 236, 224, 0.55); } .ba-after .ph-tag { color: rgba(243, 236, 224, 0.85); } /* Divider + grip — matches the app's SplitView: white line split into two segments around a transparent ring grip with inward white chevrons. */ .ba-handle { position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%); width: 0; transform: translateX(-50%); z-index: 3; cursor: ew-resize; } .ba-handle::before, .ba-handle::after { content: ''; position: absolute; left: 50%; width: 1.5px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); } .ba-handle::before { top: 0; bottom: calc(50% + 18px); } .ba-handle::after { top: calc(50% + 18px); bottom: 0; } .ba-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; } .ba-grip svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); } .ba-handle:focus-visible { outline: none; } .ba-handle:focus-visible .ba-grip { box-shadow: 0 0 0 3px rgba(240, 162, 58, 0.75); } .ba-badge { position: absolute; top: 12px; z-index: 2; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-strong); background: rgba(17, 17, 16, 0.6); border-radius: 999px; padding: 7px 10px; backdrop-filter: blur(4px); pointer-events: none; transition: opacity 0.18s var(--ease); /* JS hides a badge when the divider crosses it */ } .ba-badge-before { left: 12px; } .ba-badge-after { right: 12px; } /* Eased reveal for the leave-revert + sky-chip wipe; hover-scrub stays instant (the .ba-ease class is removed on pointermove). */ .ba-slider.ba-ease .ba-after { transition: clip-path 450ms var(--ease); } .ba-slider.ba-ease .ba-handle { transition: left 450ms var(--ease); } /* ── Replace-sky picker (mirrors the app's sky filmstrip) ── */ .sky-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .sky-chip { flex: 1 1 0; min-width: 74px; display: flex; flex-direction: column; padding: 0 0 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); font-family: var(--font-display); font-size: 11px; font-weight: 600; cursor: pointer; overflow: hidden; transition: color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease); } .sky-chip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; margin-bottom: 6px; } .sky-chip:hover { color: var(--text-strong); border-color: var(--border-strong); transform: translateY(-2px); } .sky-chip.is-active { color: var(--amber); border-color: rgba(240, 162, 58, 0.6); } /* ── Depth player — 5 clips, one visible at a time, icon switcher below ── */ .depth-player { overflow: hidden; } .depth-stage { position: absolute; inset: 0; } .depth-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; color: var(--text-strong); } .depth-slide.is-active { opacity: 1; } .depth-slide .media-el, .depth-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Distinct placeholder tints so switching is obviously doing something. */ .ph-depth.ph-depth, .ph-depth { background: var(--surface-2); } .depth-slide[data-effect='bokeh'] { background: radial-gradient(60% 70% at 65% 35%, rgba(240, 162, 58, 0.4), transparent 70%), #1b1a16; } .depth-slide[data-effect='relight'] { background: radial-gradient(80% 90% at 20% 20%, rgba(243, 236, 224, 0.32), transparent 60%), #16150f; } .depth-slide[data-effect='fog'] { background: linear-gradient(180deg, #3a3a44, #1b1a16); } .depth-slide[data-effect='tilt-shift'] { background: linear-gradient(180deg, #1b1a16, rgba(124, 111, 240, 0.3) 50%, #1b1a16); } .depth-slide[data-effect='sunrays'] { background: radial-gradient(50% 60% at 70% 25%, rgba(240, 162, 58, 0.55), transparent 65%), #161310; } .depth-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .depth-btn { flex: 1; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); font-family: var(--font-display); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease); } .depth-btn svg { width: 24px; height: 24px; color: inherit; } .depth-btn:hover { color: var(--text-strong); border-color: var(--border-strong); } .depth-btn.is-active { color: var(--amber); border-color: rgba(240, 162, 58, 0.55); background: var(--amber-soft); } /* ── Looks stack — original shows large; 9 looks fade/scale/blur in on scroll ── */ .looks-stack { overflow: hidden; } .look-base, .look-layer { position: absolute; inset: 0; width: 100%; height: 100%; } .look-base img, .look-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .look-base { display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; color: var(--text-muted); } /* JS sets opacity / transform / filter per layer from scroll progress; these are the resting (hidden) values before the driver runs. */ .look-layer { opacity: 0; transition: opacity 160ms ease, transform 1200ms linear; /* crisp switches; transform = finale scale-down (matches the fade) */ will-change: opacity, transform; } /* Phantom flicker storm reuses the already-painted look layers: bumping z-index pops a layer to the front instantly (no img decode lag), above the other looks but below the logo panel. */ .look-layer.flick-front { z-index: 4; } /* Finale scale-down: the looks zoom out slightly as the screen fades to black. */ .looks-stack .look-base { transition: transform 1200ms linear; } .looks-stack.is-fading .look-base, .looks-stack.is-fading .look-layer { transform: scale(0.84); } /* Finale: an opaque brand panel that fades in over the last look. */ .look-logo { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: var(--bg); opacity: 0; transition: opacity 1200ms linear; /* long, steady fade — begins during the tail, completes after the flicker storm */ /* Brand tokens for the inline finale logo SVG. */ --df-fg: #f3ece0; --df-accent: #f0a23a; } .finale-logo { width: min(64%, 460px); height: auto; display: block; overflow: visible; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.55)); } /* Finale logo entrance — reproduces the app SplashScreen: the mark pops in (scale + blur), the hexagon spins 720° (810° overshoot) while the iris counter-rotates, then the words pop in. Runs when .look-logo gets .playing. */ .finale-logo .mark { opacity: 0; filter: blur(8px); transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0.7); } .finale-logo .mark-hex, .finale-logo .mark-pupil { transform-box: fill-box; transform-origin: 50% 50%; } .finale-logo .word-depth, .finale-logo .word-field { opacity: 0; filter: blur(6px); transform: translateY(14px); } .finale-logo .word-photo { opacity: 0; filter: blur(6px); transform: translateX(28px); } .look-logo.playing .mark { animation: markPopIn 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .look-logo.playing .mark-hex { animation: hexSpin 1700ms 0ms both; } .look-logo.playing .mark-pupil { animation: pupilSpin 1700ms 0ms both; } .look-logo.playing .word-depth { animation: wordPopIn 1500ms 550ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .look-logo.playing .word-field { animation: wordPopIn 1500ms 750ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .look-logo.playing .word-photo { animation: photoPopIn 1500ms 1050ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes markPopIn { 0% { opacity: 0; transform: scale(0.7); filter: blur(8px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes hexSpin { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.62, 0, 0.25, 1); } 82% { transform: rotate(810deg); animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1); } 100% { transform: rotate(720deg); } } @keyframes pupilSpin { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.62, 0, 0.25, 1); } 82% { transform: rotate(405deg); animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1); } 100% { transform: rotate(360deg); } } @keyframes wordPopIn { 0% { opacity: 0; filter: blur(6px); transform: translateY(14px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } @keyframes photoPopIn { 0% { opacity: 0; filter: blur(6px); transform: translateX(28px); } 100% { opacity: 1; filter: blur(0); transform: translateX(0); } } /* Distinct placeholder hues so the stacking reads even without real images. */ .ph-look { background-color: #1b1a16; } .ph-look-0 { background: linear-gradient(135deg, #2a2a30, #45454f); } .ph-look-1 { background: linear-gradient(135deg, #7a3b1a, #f0a23a); } .ph-look-2 { background: linear-gradient(135deg, #15323a, #5fd3c4); } .ph-look-3 { background: linear-gradient(135deg, #3a1530, #e84393); } .ph-look-4 { background: linear-gradient(135deg, #2a2350, #7c6ff0); } .ph-look-5 { background: linear-gradient(135deg, #1a1a1a, #8a8a8a); } .ph-look-6 { background: linear-gradient(135deg, #3a2a10, #e6c35c); } .ph-look-7 { background: linear-gradient(135deg, #102a1a, #7c8264); } .ph-look-8 { background: linear-gradient(135deg, #2a1018, #d63a2f); } .ph-look-9 { background: linear-gradient(135deg, #0a1f24, #1746c8); } .ph-look-10 { background: linear-gradient(135deg, #2a1606, #c47a2a); } .ph-look-11 { background: linear-gradient(135deg, #07262a, #2ac4b0); } .ph-look-12 { background: linear-gradient(135deg, #260a24, #c42a9a); } .ph-look-13 { background: linear-gradient(135deg, #161628, #5a5ad0); } .ph-look-14 { background: linear-gradient(135deg, #262606, #c4c42a); } .ph-look-15 { background: linear-gradient(135deg, #07261a, #2ac46a); } /* ───────────────────────── Who it's for ───────────────────────── */ .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .fit-col { border-radius: var(--radius); padding: 26px 28px; border: 1px solid var(--border); } .fit-yes { background: var(--surface); } .fit-no { background: transparent; } .fit-col h3 { font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; } .fit-yes h3 { color: var(--amber); } .fit-yes h3::before { content: '✓'; } .fit-no h3 { color: var(--text-muted); } .fit-no h3::before { content: '✕'; color: var(--text-dim); } .fit-col ul { list-style: none; margin: 0; padding: 0; } .fit-col li { padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: 15.5px; } .fit-no li { color: var(--text-muted); } .fit-col li:last-child { border-bottom: none; } /* ───────────────────────── Apply form ───────────────────────── */ .section-apply { background: var(--bg-alt); } .apply-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow); } .founder-note { /* block (not flex) so the cutout can float and the bio wraps around it */ background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 36px; text-align: left; overflow: hidden; /* contain the float so the card grows to fit a tall cutout */ } .founder-note p { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; } /* Transparent-background cutout floated to the right; the bio hugs the silhouette via shape-outside (alpha channel). Negative margins cancel the card padding so the figure bleeds flush to the top / right / bottom edges (not boxed in like the text); only the inner-left keeps a gap, since that's where the bio wraps. The card's overflow:hidden crops the figure cleanly at the bottom edge. */ .founder-photo { float: right; width: clamp(160px, 36%, 220px); height: auto; margin: -22px -26px -22px 20px; shape-outside: url('/assets/jens-roland-cutout.avif'); shape-margin: 18px; } /* Wide landscape banner used only on narrow screens (see below). Hidden by default. */ .founder-photo-wide { display: none; } /* Narrow screens: the tall portrait cutout crushes the text column and looks awkward, so swap it for a wide landscape banner bled flush across the full width of the card top (the card's overflow:hidden + border-radius clip its top corners). If the wide asset is missing it hides itself and the bio just flows as clean text. */ @media (max-width: 600px) { .founder-photo { display: none; } .founder-photo-wide { display: block; /* override the global img max-width:100% — the banner is bled past the card padding on both sides, so it must be allowed to exceed the content box */ max-width: none; width: calc(100% + 52px); height: auto; margin: -22px -26px 18px; } } .field { margin-bottom: 18px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field label { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-strong); margin-bottom: 7px; } .field input[type='text'], .field input[type='email'], .field textarea, .field select { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--text-strong); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); appearance: none; } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239b9488' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } .field textarea { resize: vertical; min-height: 76px; line-height: 1.5; } .field label .optional { color: var(--text-dim); font-weight: 400; } .field input::placeholder, .field textarea::placeholder { color: var(--text-dim); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 162, 58, 0.2); } .field-check { margin-top: 6px; } .checkbox { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; font-family: var(--font-body) !important; font-weight: 400 !important; font-size: 15px !important; color: var(--text-muted) !important; margin-bottom: 0 !important; } .checkbox input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--amber); cursor: pointer; } .form-status { margin: 14px 0 0; font-size: 15px; min-height: 1px; } .form-status.error { color: var(--warn); } .form-status.success { color: var(--ok); } .form-fineprint { font-size: 13px; color: var(--text-dim); margin: 16px 0 0; text-align: center; } /* Honeypot — visually + functionally hidden, but not display:none (some bots skip display:none fields) */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* "We're full" state */ .apply-full { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(28px, 5vw, 44px); text-align: center; } .apply-full h3 { font-size: 26px; margin-bottom: 14px; } .apply-full p { color: var(--text-muted); max-width: 54ch; margin: 0 auto 24px; } .notify-form { display: flex; gap: 12px; max-width: 460px; margin: 0 auto; } .notify-form input { flex: 1; font-size: 16px; color: var(--text-strong); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px; padding: 12px 18px; } .notify-form input:focus { outline: none; border-color: var(--amber); } /* ───────────────────────── FAQ ───────────────────────── */ .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-strong); padding: 20px 36px 20px 0; cursor: pointer; list-style: none; position: relative; transition: color 0.15s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--amber); } .faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--amber); transition: transform 0.2s var(--ease); } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-item p { margin: 0; padding: 0 36px 22px 0; color: var(--text-muted); font-size: 16px; } /* ───────────────────────── Footer ───────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding-block: 40px; background: var(--bg); } .footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 32px; } .footer-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; color: var(--text-strong); } .footer-brand img { border-radius: 8px; } .footer-nav { display: flex; gap: 24px; margin-left: auto; } .footer-nav a { color: var(--text-muted); font-size: 15px; } .footer-nav a:hover { color: var(--text-strong); } .footer-made { width: 100%; color: var(--text-dim); font-size: 13.5px; margin: 0; } /* ───────────────────────── Scroll reveal ───────────────────────── */ body.reveal-ready .section { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } body.reveal-ready .section.in-view { opacity: 1; transform: none; } /* ───────────────────────── Responsive ───────────────────────── */ @media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { order: -1; max-width: 480px; margin-inline: auto; } .deal-grid, .fit-grid { grid-template-columns: 1fr; } .what-grid { grid-template-columns: 1fr; max-width: 560px; } .app-shot-glass { /* the steep -20° desktop pose is too much full-width on a phone */ transform: rotateY(-10deg) rotateX(8deg); } .showcase, .showcase:nth-child(even) { flex-direction: column; } .showcase-media, .showcase-text { flex: none; width: 100%; } .nav { display: none; } } @media (max-width: 540px) { body { font-size: 16px; } .field-row { grid-template-columns: 1fr; gap: 0; } .notify-form { flex-direction: column; } .notify-form input, .notify-form .btn { width: 100%; } .hero-cta .btn { flex: 1; } .footer-nav { margin-left: 0; width: 100%; } /* Keep all five options on one row down to the smallest phones (iPhone 12 mini ≈ 320px of content). flex-grow still fills the row, so on wider phones the chips look identical — the lower min-width only stops the 5th from wrapping. */ .depth-switch, .sky-strip { gap: 6px; } .depth-btn { min-width: 48px; padding: 9px 4px; font-size: 11px; } .depth-btn svg { width: 22px; height: 22px; } .sky-chip { min-width: 48px; font-size: 10px; } } /* ───────────────────────── Reduced motion ───────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } body.reveal-ready .section { opacity: 1; transform: none; } }