/* =========================================================== OUTPAINT — studio-grade restyle A24 × IMAX: true black, film grain, letterbox, gold accent Bodoni Moda (display) + Archivo (UI) =========================================================== */ :root{ color-scheme:dark; /* opt out of browser auto-dark/night-mode re-tint (e.g. Brave darkening the cream button to brown). The CSS prop is honored where the alone isn't. */ --accent:#ece7dd; /* warm white — mono accent */ --accent-soft:rgba(236,231,221,.16); --ink:#070707; /* theatre black */ --ink-1:#0d0c0b; /* lifted panel */ --ink-2:#15130f; /* card */ --line:rgba(236,231,221,.14); --line-2:rgba(236,231,221,.08); --gen-field:transparent; --lift-top:rgba(236,231,221,.18); /* lit-window: dim disabled; warm edge-light kept */ --cream:#ece7dd; /* warm white text */ --cream-soft:rgba(236,231,221,.60); --cream-faint:rgba(236,231,221,.38); --cream-readable:rgba(236,231,221,.55); /* 5.26:1 — AA-passing muted text */ --r-s:2px; --r-m:3px; --r-l:5px; --r-xl:8px; --shadow:0 40px 90px -50px rgba(0,0,0,.95); --maxw:1240px; --pad:clamp(20px,5vw,64px); --ease:cubic-bezier(.4,.12,.2,1); --font-d:'Archivo', system-ui, sans-serif; --font-b:'Archivo', system-ui, sans-serif; --grain:url("data:image/svg+xml;utf8,"); } *{box-sizing:border-box;} /* pure #000 on html + body so iOS's safe-area "mirror" paints the notch band in solid black matching the nav. Keep --ink (#070707) as the brand token for sections that explicitly use it. */ /* Horizontal-overflow guard lives on HTML, never on body. On iOS Safari, overflow-x:clip/hidden on turns it into a clip/containing context, which un-pins position:fixed children (.nav, body::before) from the visual viewport — after you scroll, the notch band exposes the hero gradient and stays wrong until you scroll back to top. The working true3d.com keeps body free of overflow for exactly this reason. */ html{scroll-behavior:smooth; background:#000; overflow-x:hidden; overflow-x:clip;} body{ margin:0; background:#000; color:var(--cream); min-height:100vh; min-height:100dvh; font-family:var(--font-b); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; /* position:relative makes the grain below span the whole document as an absolute layer. relative is safe for the fixed nav — unlike transform/ overflow it does NOT clip fixed children out of the safe-area inset. */ position:relative; } /* Global film grain — position:absolute (NOT fixed) so it scrolls with the page instead of being a full-viewport layer iOS must recomposite every frame. A fixed full-screen overlay starves the compositor during fast momentum scroll and makes the fixed notch cover drop frames (content flashes through the notch). Scrolling grain is visually identical at opacity .05. */ body::after{content:''; position:absolute; inset:0; z-index:200; pointer-events:none; opacity:.05; background-image:var(--grain); background-size:160px;} h1,h2,h3,h4{font-family:var(--font-d); font-weight:600; line-height:1.04; margin:0; letter-spacing:-.022em;} p{margin:0;} a{color:inherit; text-decoration:none;} a:focus-visible,button:focus-visible,.btn:focus-visible,.switch button:focus-visible,.modal .x:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-s);} .skip{position:absolute; left:-9999px;} .skip:focus{left:16px; top:16px; z-index:300; background:var(--cream); color:#0a0a0a; padding:10px 16px; border-radius:var(--r-s); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;} img{display:block; max-width:100%;} ::selection{background:var(--accent); color:#0a0a0a;} /* .wrap pads horizontally by --pad on small screens, but extends with the landscape notch inset so content never tucks behind the camera island on a sideways iPhone. */ .wrap{max-width:var(--maxw); margin:0 auto; padding-left:max(var(--pad), env(safe-area-inset-left, 0px)); padding-right:max(var(--pad), env(safe-area-inset-right, 0px));} .label,.eyebrow{font-family:var(--font-b); font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; display:inline-flex; align-items:center;} .label{color:var(--accent); gap:12px;} .label::before{content:''; width:30px; height:1px; background:var(--accent); display:inline-block;} .eyebrow{color:rgba(236,231,221,.72);} .muted{color:var(--cream-soft);} .section{padding-block:clamp(80px,12vw,156px); position:relative;} .center{text-align:center;} /* ---------------- buttons ---------------- */ .btn{ font-family:var(--font-b); font-weight:600; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; display:inline-flex; align-items:center; gap:12px; white-space:nowrap; padding:16px 26px; border-radius:var(--r-s); border:1px solid transparent; line-height:1; transition:background .25s var(--ease), color .25s, border-color .25s, opacity .25s; } .btn .ar{transition:transform .3s var(--ease);} .btn:hover .ar{transform:translateX(5px);} .btn-primary{background:var(--cream); color:#0a0a0a;} .btn-primary:hover{background:#fff;} .btn-ghost{background:transparent; border-color:var(--line); color:var(--cream);} .btn-ghost:hover{border-color:var(--cream-soft); background:rgba(236,231,221,.04);} .btn-dark{background:transparent; border-color:var(--line); color:var(--cream);} .btn-dark:hover{border-color:var(--accent); color:var(--accent);} .btn-lg{padding:19px 34px; font-size:13px;} /* ---------------- nav ---------------- */ /* iOS notch — body bg + nav bg are both #000 so they can't seam; body::before paints the notch band at the highest z-index as a guaranteed fallback cover. CRITICAL: NO transform / will-change / backface-visibility on these fixed elements, and NO overflow:clip on any ancestor (body). On iOS WebKit either of those clips a position:fixed element to the layout viewport — EXCLUDING the safe-area inset — so the bar stops covering the notch band once you scroll and page content shows through. The horizontal-overflow guard therefore lives on , and these stay transform-free. */ /* --navp = scroll progress 0→1, set per-frame by nav.js. The bar + logo + wordmark interpolate linearly off it (no transition) so they shrink *with* the scroll, not on a snap. size = big - shrink*navp. Keep the clamp on ONE side only: nesting clamp() on both ends of the interpolation evaluates to 0 in Chromium. shrink is a plain px delta; clamp keeps the big end shrinking on narrow screens. */ .nav{position:fixed; inset:0 0 auto; z-index:60; padding-top:env(safe-area-inset-top, 0px); --navp:0; /* big = top state, shrink = px removed at full scroll → compact = big-shrink. Bumped big AND shrink together so only the *top* state grew; the scrolled/compact size is unchanged. */ --nav-h-big:clamp(116px,10.5vw,156px); --nav-h-shrink:66px; --logo-big:clamp(32px,3.7vw,42px); --logo-shrink:16px; --brand-big:clamp(27px,3vw,35px); --brand-shrink:13px; /* opaque black up top (covers the iOS notch); the bottom edge feathers to transparent only while expanded. The 84px fade length matches the carousel's 11%-of-760px edge mask so the two read as one treatment; the feather's alpha climbs with --navp, so the edge is solid once compact. */ background:linear-gradient(180deg, #000 0%, #000 calc(100% - 84px), rgba(0,0,0,var(--navp)) 100%);} .nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%; height:calc(var(--nav-h-big) - var(--nav-h-shrink) * var(--navp));} body::before{content:''; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top, 0px); background:#000; z-index:9999; pointer-events:none;} .brand{display:flex; align-items:center; gap:14px; font-family:var(--font-d); font-weight:800; letter-spacing:-.04em; text-transform:none; color:var(--cream); font-size:calc(var(--brand-big) - var(--brand-shrink) * var(--navp));} .brand .logo{flex:none; color:var(--cream); width:calc(var(--logo-big) - var(--logo-shrink) * var(--navp)); height:calc(var(--logo-big) - var(--logo-shrink) * var(--navp));} .nav-links{display:flex; align-items:center; gap:22px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;} .nav-links a.lnk{color:var(--cream-soft); transition:color .2s;} .nav-links a.lnk:hover{color:var(--cream);} .nav-links .btn{padding:13px 20px; font-size:11px; letter-spacing:.14em;} /* hamburger button — three hairline bars that fold into an X when open. Desktop shows the two inline buttons instead; the burger only appears on phone (see the 640px block). */ .nav .wrap{position:relative;} .nav-burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:30px; height:30px; padding:0; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;} .nav-burger span{display:block; width:22px; height:1.5px; margin:0 auto; background:var(--cream); transition:transform .3s var(--ease), opacity .2s var(--ease);} /* Open: the nav rides above the overlay so brand + button stay put, and the three bars fold into an X in place (same button = same location, no jump). */ body.nav-open .nav{z-index:80;} body.nav-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} body.nav-open .nav-burger span:nth-child(2){opacity:0;} body.nav-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} /* full-screen menu overlay (replaces the old dropdown). Fades in over the page with its own tight logo + X header; links stacked large, sentence-case, hairline-divided. */ .nav-menu{position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; overflow-y:auto; padding:0 0 44px; /* top set by JS to clear the bar; left/right come from the inner .wrap */ background:radial-gradient(100% 78% at 82% 0%, rgba(201,168,106,.05), transparent 55%), linear-gradient(180deg, #0c0b0a 0%, var(--ink) 60%); visibility:hidden; opacity:0; transition:opacity .28s var(--ease), visibility .28s;} .nav-menu.is-open{visibility:visible; opacity:1;} .nav-menu>.wrap{width:100%;} /* flex item: force fill to --maxw so its padded left edge matches the bar's logo (else auto margins shrink-to-fit + center) */ .nav-menu-links{display:flex; flex-direction:column; width:100%; max-width:680px; margin-top:clamp(34px,7vh,76px);} .nav-menu-lnk{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(16px,2.3vh,24px) 2px; border-top:1px solid var(--line-2); font-family:var(--font-d); font-weight:600; font-size:clamp(28px,4.4vw,38px); letter-spacing:-.015em; color:var(--cream); transition:padding-left .25s var(--ease);} .nav-menu-lnk:last-child{border-bottom:1px solid var(--line-2);} .nav-menu-lnk .ar{font-size:.46em; color:var(--cream-faint); transition:transform .25s var(--ease), color .15s;} .nav-menu-lnk:hover{padding-left:12px;} .nav-menu-lnk:hover .ar{transform:translateX(8px); color:var(--cream-soft);} body.nav-open{overflow:hidden;} /* ---------------- hero ---------------- */ .hero{position:relative; padding-top:150px; padding-bottom:90px; overflow:hidden; isolation:isolate;} .hero::before{content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(80% 60% at 50% 38%, rgba(201,168,106,.06), transparent 60%), radial-gradient(120% 100% at 50% 0%, #100f0d, var(--ink) 70%);} .hero-inner{text-align:center; max-width:1000px; margin:0 auto;} .h-title{font-family:var(--font-d); font-weight:700; font-size:clamp(50px,9.5vw,118px); letter-spacing:-.04em; line-height:.98;} .h-title .em{font-weight:700; color:var(--accent);} .h-sub{font-size:clamp(17px,1.9vw,20px); color:var(--cream-soft); max-width:52ch; margin:28px auto 34px; line-height:1.7; text-wrap:balance;} .h-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;} .h-trust{display:flex; align-items:center; gap:14px; justify-content:center; margin-top:34px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-faint);} .h-trust b{color:var(--cream-soft); font-weight:600;} /* ---- /ugc-to-ctv: two-column hero + scrolling video gallery ---- Wider than the standard wrap so the copy sits further left, with a generous gap keeping clear space between the text and the video marquee. */ .uc-hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6.5vw,112px); align-items:center; text-align:left; max-width:1360px;} .uc-hero-copy{min-width:0;} .uc-hero .h-title{font-size:clamp(40px,4.4vw,62px); line-height:1.0;} .uc-hero .h-sub{margin:26px 0 34px; max-width:48ch;} .uc-hero .h-cta{justify-content:flex-start;} /* margin-right bleeds the gallery out to the viewport's right edge (620px = --maxw/2), so the bigger tiles fill the room; .hero{overflow:hidden} clips the overflow. */ .uc-gallery{display:flex; gap:18px; height:min(760px,90vh); overflow:hidden; pointer-events:none; margin-right:min(0px,calc(620px - 50vw)); -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent); mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);} .marq-col{flex:1; min-width:0; overflow:hidden;} .marq-col.down{margin-top:-56px;} .marq-track{display:flex; flex-direction:column;} .marq-col.up .marq-track{animation:marqUp 30s linear infinite;} .marq-col.down .marq-track{animation:marqDown 34s linear infinite;} @keyframes marqUp{from{transform:translateY(0);} to{transform:translateY(-50%);}} @keyframes marqDown{from{transform:translateY(-50%);} to{transform:translateY(0);}} @keyframes marqLeft{from{transform:translateX(0);} to{transform:translateX(-50%);}} /* mobile horizontal ribbon */ .marq-card{margin:0 0 16px; position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:var(--r-m); background:#000; box-shadow:0 24px 50px -30px rgba(0,0,0,.9);} .marq-card video{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; filter:saturate(.98) brightness(.9) contrast(1.02);} /* testimonial scroll (above "why it's a no-brainer") — horizontal auto-marquee. Cards use margin-right (not gap) so the track is uniform units and -50% loops seamlessly; one copy (3 cards) overfills the wrap, so there's never empty space. */ .quote-marq{margin-top:54px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);} .quote-track{display:flex; width:max-content; animation:quoteMarq 48s linear infinite;} .quote-marq:hover .quote-track{animation-play-state:paused;} .quote-card{flex:0 0 clamp(290px,32vw,400px); margin-right:20px; background:var(--ink-1); border:1px solid var(--line-2); border-radius:var(--r-m); padding:30px 30px 26px; display:flex; flex-direction:column; box-shadow:var(--shadow); text-align:left;} .quote-card blockquote{margin:0; font-family:var(--font-d); font-weight:500; font-size:clamp(16px,1.2vw,18px); line-height:1.5; color:var(--cream); letter-spacing:-.01em; text-wrap:pretty;} .quote-card .q-short{display:none;} /* full quote on desktop; a shorter variant swaps in on mobile */ .qc-person{display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:24px;} .qc-avatar{flex:none; width:42px; height:42px; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; font-family:var(--font-b); font-weight:700; font-size:13px; letter-spacing:.03em; color:var(--cream); background:rgba(236,231,221,.08); border:1px solid var(--line);} .qc-meta{display:flex; flex-direction:column; line-height:1.3;} .qc-meta b{font-weight:600; font-size:14.5px; color:var(--cream);} .qc-meta span{font-size:12.5px; color:var(--cream-soft);} /* Testimonial swipe indicator — built by the inline carousel JS, shown on mobile only (the .quote-dots{display:flex} lives in the max-width:760px block). */ .quote-dots{display:none;} .quote-dot{width:7px; height:7px; padding:0; border:0; -webkit-appearance:none; appearance:none; border-radius:50%; background:var(--line); cursor:pointer; transition:width .25s var(--ease), background .25s var(--ease);} .quote-dot.is-on{width:22px; border-radius:4px; background:var(--cream-soft);} @keyframes quoteMarq{from{transform:translateX(0);} to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){ .quote-track{animation:none; flex-wrap:wrap; justify-content:center; row-gap:20px;} } /* Mobile: marquee → native swipeable carousel. The card sits centered with a slice of the neighbours peeking on both sides, so it reads as a swipeable strip. Both card sets stay rendered so quotes.js can loop the swipe endlessly (card N and card N+4 are identical, so the recenter jump is invisible). */ @media(max-width:760px){ .quote-marq{overflow:visible; -webkit-mask-image:none; mask-image:none;} .quote-track{width:auto; animation:none; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 8vw;} .quote-track::-webkit-scrollbar{display:none;} /* size by the viewport (a % flex-basis resolves against the padded track box, and

carries a default 40px side margin). 84vw fills the screen while leaving a visible sliver of the next card on each side; the brighter border makes that peek read. */ .quote-card{flex:0 0 84vw; margin:0 14px 0 0; padding:26px 24px 24px; scroll-snap-align:center; border-color:var(--line);} .quote-card .q-full{display:none;} .quote-card .q-short{display:inline;} .quote-dots{display:flex; justify-content:center; gap:8px; margin-top:24px;} } /* /ugc-to-ctv-examples — static responsive grid of the brand UGC→CTV clips (reuses .marq-card styling; just lays them out and drops the marquee bottom-margin) */ .uc-ex-grid{display:grid; gap:24px; grid-template-columns:repeat(2,1fr); margin-top:44px;} .uc-ex-grid .marq-card{margin:0;} @media(max-width:640px){ .uc-ex-grid{grid-template-columns:1fr;} } /* each card is its own compare/expand demo (reuses .ctv-mask + .ctv-expand-btn). Starts expanded to full CTV with the band guides faded; the button collapses the masks back to the original vertical band. Scoped to .uc-ex-grid so the hero marquee cards are untouched. */ .uc-ex-grid .ctv-demo::before,.uc-ex-grid .ctv-demo::after{transition:opacity .35s;} .uc-ex-grid .ctv-demo.is-expanded::before,.uc-ex-grid .ctv-demo.is-expanded::after{opacity:0;} /* each card sits in the TV-bezel (.tv-frame) like the /ugc-to-ctv showcase; the button is a sibling of the figure, so it floats over the screen on desktop and the showcase's ≤640px rule drops it below the video as a section on mobile. Reset the frame's showcase-only centering/width and strip the card's own border so it reads as the screen. */ .uc-ex-grid .tv-frame{max-width:none; margin:0;} .uc-ex-grid .tv-frame .marq-card{border:none; border-radius:4px; box-shadow:none;} /* single "See it" showcase clip (replaces the example grid) */ .uc-showcase{margin:46px auto 0; max-width:900px; overflow:hidden; background:#000; border:1px solid var(--line-2); border-radius:var(--r-m); box-shadow:var(--shadow); position:relative;} .uc-showcase video{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; filter:saturate(.98) brightness(.94) contrast(1.02);} /* outpaint demo guides — dashed lines marking the original (centered vertical UGC band) vs the outpainted sides. --dg-l/--dg-r are the band edges; default ≈31.6%-wide band for 9:16 → 16:9. */ .uc-showcase,.marq-card{--dg-l:34.2%; --dg-r:65.8%;} .marq-card::before,.marq-card::after,.demo-guide::before,.demo-guide::after{ content:''; position:absolute; top:0; bottom:0; z-index:3; width:2px; pointer-events:none; /* white dashes. NO `filter` (iOS WebKit drops drop-shadow on a thin box). translateZ(0) promotes the line to its own compositing layer so WebKit orders it ABOVE the video's filter layer by z-index — otherwise the hardware-composited