/* ════════════════════════════════════════════════════════════════ HAPPY FOLDERS — somethang.fun A happy, sticker-shop landing page. Cream paper, thick ink, candy accents. Everything readable with zero JS; GSAP only adds life. ════════════════════════════════════════════════════════════════ */ :root{ --paper:#FFF7EC; --paper-2:#FFEFDB; --card:#FFFDF7; --ink:#2A211C; --ink-soft:#6B5B4E; --ink-faint:#A08D7C; --coral:#FF6B57; --coral-deep:#F25B3F; --coral-soft:#FFE0D6; --mustard:#FFC23E; --mustard-deep:#F0A818; --mustard-soft:#FFF0C9; --teal:#2EC4B6; --teal-deep:#17A395; --teal-soft:#D5F5F0; --sage:#9CC24A; --berry:#E84A8A; --berry-soft:#FFE3EE; --lav:#8F7BFF; --lav-deep:#7C63F2; --lav-soft:#E9E4FF; --night:#171028; --night-2:#251A40; --night-card:#1F1635; --star:#F4ECFF; --r-lg:28px; --r-md:20px; --r-sm:12px; --bw:3px; --shadow-soft:0 18px 50px rgba(42,33,28,.14); --shadow-card:0 10px 28px rgba(42,33,28,.10); --spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.22,.61,.36,1); --f-display:"Fredoka","Nunito",system-ui,-apple-system,sans-serif; --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; --f-hand:"Caveat",cursive; --nav-h:72px; } *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } /* author display rules (e.g. .ticker{display:flex}) must never resurrect a [hidden] element — this keeps the hidden attribute trustworthy everywhere */ [hidden]{ display:none !important; } /* NOTE: no `scroll-behavior:smooth` here — Lenis owns scrolling, and CSS smoothing on top of it makes the two animation systems fight per frame (wheel feels like molasses, anchors land short). JS handles the no-Lenis fallback with scrollTo({behavior:"smooth"}). */ html, body{ overflow-x:clip; } html.lenis, html.lenis body{ height:auto; } /* !important so it also beats any inline scroll-behavior an extension or embedder sneaks onto — CSS smoothing must never stack on Lenis */ html.lenis, .lenis.lenis-smooth{ scroll-behavior:auto !important; } /* anchored sections stop below the sticky ticker + nav, never under them */ section[id]{ scroll-margin-top:calc(var(--ticker-h,0px) + var(--nav-h) + 10px); } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* paper grain over everything (no blend-mode: a fixed full-page multiply layer forces whole-page recomposite on every scroll frame) */ body::before{ content:""; position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img,svg{ display:block; max-width:100%; } a{ color:inherit; } b,strong{ font-weight:800; } s{ text-decoration-thickness:2.5px; text-decoration-color:var(--coral); } kbd{ font-family:var(--f-body); font-weight:800; font-size:.85em; background:var(--card); border:2px solid var(--ink); border-bottom-width:4px; border-radius:8px; padding:.05em .45em; } code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95em; background:var(--card); border:2px dashed var(--ink-faint); border-radius:8px; padding:.15em .5em; user-select:all; -webkit-user-select:all; } .visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } :focus-visible{ outline:3px dashed var(--coral); outline-offset:3px; border-radius:6px; } ::selection{ background:var(--mustard); color:var(--ink); } /* ─────────────────────────── buttons ─────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--f-display); font-weight:600; letter-spacing:.01em; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap; background:var(--card); border:var(--bw) solid var(--ink); border-radius:999px; padding:.72em 1.5em; font-size:1rem; line-height:1.1; box-shadow:0 5px 0 var(--ink); transition:transform .18s var(--spring), box-shadow .18s var(--spring), background .2s; transform:translateY(0); } .btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 var(--ink); } .btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--ink); } .btn--primary{ background:var(--coral); color:#fff; } .btn--primary:hover{ background:var(--coral-deep); } .btn--lav{ background:var(--lav); color:#fff; } .btn--lav:hover{ background:var(--lav-deep); } .btn--ghost{ background:transparent; box-shadow:none; border-style:dashed; } .btn--ghost:hover{ background:var(--card); transform:translateY(-2px); box-shadow:none; } .btn--ghost:active{ transform:translateY(1px); } .btn--big{ font-size:1.15rem; padding:.85em 1.8em; } .btn--small{ font-size:.92rem; padding:.55em 1.1em; box-shadow:0 4px 0 var(--ink); } .btn--tiny{ font-size:.8rem; padding:.3em .8em; box-shadow:0 3px 0 var(--ink); } .btn--paypal{ background:#FFC439; } .btn__icon{ font-size:1.15em; } /* ─────────────────────────── ticker ─────────────────────────── */ .ticker{ position:sticky; top:0; z-index:120; display:flex; align-items:center; background:var(--ink); color:var(--paper); font-family:var(--f-display); font-size:.95rem; } .ticker a{ flex:1; display:flex; align-items:center; justify-content:center; gap:.6em; padding:.6em 2.6em .6em 1em; text-decoration:none; min-width:0; } .ticker a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ticker__arrow{ flex:none; transition:transform .2s; } .ticker a:hover .ticker__arrow{ transform:translateX(4px); } .ticker--live{ background:linear-gradient(90deg,#7C63F2,#E04580 50%,#F0A818); color:#fff; } .ticker__close{ position:absolute; right:.4em; top:50%; transform:translateY(-50%); background:none; border:none; color:inherit; font-size:1.3rem; line-height:1; cursor:pointer; padding:.2em .5em; opacity:.7; } .ticker__close:hover{ opacity:1; } /* ─────────────────────────── nav ─────────────────────────── */ .nav{ position:sticky; top:var(--ticker-h,0px); z-index:110; height:var(--nav-h); display:flex; align-items:center; gap:1.5rem; padding:0 clamp(16px,4vw,40px); background:transparent; transition:background .3s, box-shadow .3s, backdrop-filter .3s; } .nav--scrolled{ background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(42,33,28,.1); } /* the nav's sticky offset follows the ticker via --ticker-h (set in JS) */ .nav__logo{ display:flex; align-items:center; gap:.55rem; text-decoration:none; } .nav__logo-mark{ width:38px; height:38px; transition:transform .3s var(--spring); } .nav__logo:hover .nav__logo-mark{ transform:rotate(-8deg) scale(1.08); } .nav__logo-word{ font-family:var(--f-display); font-weight:700; font-size:1.25rem; letter-spacing:-.01em; } .nav__logo-word b{ color:var(--coral-deep); } .nav__links{ display:flex; gap:clamp(.8rem,2.2vw,1.8rem); margin-inline:auto; } .nav__links a{ position:relative; text-decoration:none; font-weight:800; font-size:.98rem; color:var(--ink-soft); padding:.3em .1em; transition:color .2s; white-space:nowrap; } .nav__links a:hover{ color:var(--ink); } .nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:3px; background:var(--coral); border-radius:3px; transition:right .25s var(--ease-out); } .nav__links a:hover::after{ right:0; } .nav__ai-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lav-deep); margin-left:2px; vertical-align:super; animation:pulse 2s infinite; } @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.7) } } .nav__actions{ display:flex; align-items:center; gap:.7rem; } .nav__sound{ background:none; border:none; font-size:1.15rem; cursor:pointer; line-height:1; padding:.35em; border-radius:50%; transition:transform .2s var(--spring); } .nav__sound:hover{ transform:scale(1.15) rotate(-6deg); } .nav__sound[aria-pressed="false"]{ filter:grayscale(1); opacity:.55; } /* burger (mobile only) + the drop-down sheet */ .nav__burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:9px; background:var(--card); border:2.5px solid var(--ink); border-radius:12px; cursor:pointer; box-shadow:0 3px 0 var(--ink); } .nav__burger span{ display:block; height:3px; border-radius:2px; background:var(--ink); transition:transform .25s var(--spring), opacity .2s; } .nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } .nav__sheet{ position:absolute; top:calc(100% + 10px); left:12px; right:12px; z-index:109; display:grid; gap:2px; padding:10px; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r-md); box-shadow:var(--shadow-soft); } .nav__sheet a{ text-decoration:none; font-family:var(--f-display); font-weight:600; font-size:1.05rem; padding:.65em .8em; border-radius:12px; } .nav__sheet a:active, .nav__sheet a:hover{ background:var(--coral-soft); } /* ─────────────────────────── hero ─────────────────────────── */ .hero{ position:relative; min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(8px,4vh,40px) 20px 90px; isolation:isolate; overflow:clip; } .hero__3d{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; } .hero__blobs{ position:absolute; inset:0; z-index:-3; overflow:hidden; } .hb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; } .hb--1{ width:42vmax; height:42vmax; left:-12vmax; top:-10vmax; background:var(--mustard-soft); } .hb--2{ width:36vmax; height:36vmax; right:-10vmax; top:8vmax; background:var(--teal-soft); } .hb--3{ width:38vmax; height:38vmax; left:24vmax; bottom:-18vmax; background:var(--coral-soft); } .hero__inner{ position:relative; z-index:2; max-width:760px; text-align:center; } /* a soft cream halo guarantees the headline stays readable over the 3D field */ .hero__inner::before{ content:""; position:absolute; inset:-12% -18%; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, var(--paper) 38%, color-mix(in srgb, var(--paper) 72%, transparent) 68%, transparent 100%); } .hero__eyebrow{ margin:0 0 1rem; } .eyebrow-pill{ display:inline-block; font-family:var(--f-display); font-weight:600; font-size:.92rem; background:var(--card); border:2.5px solid var(--ink); border-radius:999px; padding:.4em 1.1em; box-shadow:0 4px 0 var(--ink); transform:rotate(-1.5deg); } .hero__title{ margin:0; font-family:var(--f-display); font-weight:700; font-size:clamp(2.7rem,7.2vw,5.6rem); line-height:1.04; letter-spacing:-.02em; } .ht-line{ display:block; } .ht-happy{ position:relative; font-style:normal; color:var(--coral-deep); display:inline-block; padding-bottom:.08em; } .ht-squiggle{ position:absolute; left:0; bottom:-.14em; width:100%; height:.18em; overflow:visible; } .ht-dot{ color:var(--ink); } .hero__sub{ margin:1.4rem auto 0; max-width:620px; color:var(--ink-soft); font-size:clamp(1.02rem,1.9vw,1.25rem); font-weight:600; } .hero__ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; } .hero__pricehint{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.2em .55em; margin:2rem auto 0; max-width:560px; font-size:.95rem; color:var(--ink-soft); font-weight:700; } .hero__pricehint span{ white-space:nowrap; } .hero__pricehint i{ font-style:normal; color:var(--ink-faint); } .hero__pricehint strong{ color:var(--coral-deep); } .hero__dragnote{ display:none; margin:1.1rem 0 0; font-family:var(--f-hand); font-weight:700; font-size:1.15rem; color:var(--ink-soft); transform:rotate(-2deg); } .hero__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:center; margin:1.2rem 0 0; padding:0; font-size:.88rem; font-weight:800; color:var(--ink-soft); } /* the playground (real draggable tiles) Wide screens (≥1280px): tiles float in the side margins of the hero, provably clear of the centered text column. Below 1280px: the playground becomes its own band under the hero copy, so nothing can ever overlap the headline. */ .playground{ position:absolute; inset:0; z-index:3; pointer-events:none; } .playground__hint{ position:absolute; left:50%; bottom:7%; transform:translateX(-50%) rotate(-3deg); font-family:var(--f-hand); font-weight:700; font-size:clamp(1.1rem,2.2vw,1.5rem); color:var(--ink-soft); display:flex; align-items:flex-end; gap:.3em; white-space:nowrap; } .hint-arrow{ width:34px; transform:scaleX(-1) rotate(-50deg); margin-bottom:-14px; } .tile{ position:absolute; width:clamp(86px,9vw,124px); padding:0; margin:0; background:none; border:none; cursor:grab; pointer-events:auto; font-family:var(--f-display); touch-action:none; transform:rotate(var(--rot,0deg)); transition:filter .2s; will-change:transform; z-index:3; } /* wide-screen positions: side columns only (x ≤ 9% or x ≥ 83%) */ .tile--1{ left:3%; top:12%; --rot:-6deg; } .tile--2{ left:88%; top:10%; --rot:5deg; } .tile--3{ left:8%; top:38%; --rot:7deg; } .tile--4{ left:84%; top:36%; --rot:-8deg; } .tile--5{ left:4%; top:64%; --rot:4deg; } .tile--6{ left:88%; top:62%; --rot:-4deg; } .tile:active{ cursor:grabbing; } .tile__shape{ width:100%; filter:drop-shadow(0 10px 14px rgba(42,33,28,.22)); transition:filter .25s; } .tile:hover .tile__shape{ filter:drop-shadow(0 16px 22px rgba(42,33,28,.3)); } .tile__emoji{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-size:clamp(1.7rem,2.6vw,2.3rem); pointer-events:none; } .tile__name{ display:block; margin-top:.25em; text-align:center; font-weight:600; font-size:clamp(.85rem,1.3vw,1rem); color:var(--ink); text-shadow:0 1px 0 var(--paper); } /* user-supplied art (assets/tiles/tile-N.svg|png|gif|webp) replaces the built-in shape + emoji; the sticker shadow stays */ .tile__img{ width:100%; height:auto; pointer-events:none; -webkit-user-drag:none; filter:drop-shadow(0 10px 14px rgba(42,33,28,.22)); transition:filter .25s; } .tile:hover .tile__img{ filter:drop-shadow(0 16px 22px rgba(42,33,28,.3)); } .tile.is-dragging{ z-index:9; } .tile.is-dragging .tile__shape, .tile.is-dragging .tile__img{ filter:drop-shadow(0 22px 30px rgba(42,33,28,.34)); } @media (hover:hover){ .tile:not(.is-dragging):hover{ animation:wiggle 0.5s var(--spring); } } @keyframes wiggle{ 0%{rotate:0deg} 30%{rotate:4deg} 60%{rotate:-3deg} 100%{rotate:0deg} } .hero__scrollhint{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:4; width:28px; height:46px; border:3px solid var(--ink); border-radius:16px; opacity:.55; transition:opacity .2s; } .hero__scrollhint:hover{ opacity:1; } .hero__scrollhint span{ position:absolute; left:50%; top:8px; width:5px; height:9px; margin-left:-2.5px; background:var(--ink); border-radius:3px; animation:scrollhint 1.6s infinite var(--ease-out); } @keyframes scrollhint{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(14px); opacity:0 } 100%{ opacity:0 } } /* ─────────────────────────── marquee ─────────────────────────── */ /* the clip strip lets the tilted ribbon bleed top/bottom but never adds horizontal page overflow */ .marquee-clip{ overflow-x:clip; overflow-y:visible; overflow:clip visible; margin-top:-10px; } .marquee{ background:var(--ink); color:var(--paper); overflow:hidden; padding:.85em 0; transform:rotate(-1.2deg) scale(1.02); border-block:var(--bw) solid var(--ink); } .marquee__track{ display:flex; align-items:center; gap:2.2em; white-space:nowrap; width:max-content; font-family:var(--f-display); font-weight:600; font-size:1.05rem; letter-spacing:.04em; animation:marquee 30s linear infinite; } .marquee__track span{ text-transform:uppercase; } .marquee__track i{ font-style:normal; color:var(--mustard); } @keyframes marquee{ to{ transform:translateX(-50%); } } /* ─────────────────────────── sections ─────────────────────────── */ .section{ padding:clamp(70px,11vh,130px) clamp(18px,5vw,48px); } .section-head{ max-width:780px; margin:0 auto clamp(36px,6vh,64px); text-align:center; } .section-eyebrow{ display:inline-block; margin:0 0 .9rem; font-family:var(--f-hand); font-weight:700; font-size:1.3rem; color:var(--coral-deep); transform:rotate(-2deg); } .section-head h2{ margin:0; font-family:var(--f-display); font-weight:700; font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.12; letter-spacing:-.015em; } .section-sub{ margin:1.1rem auto 0; max-width:640px; color:var(--ink-soft); font-weight:600; font-size:clamp(1rem,1.7vw,1.15rem); } .section-head--dark h2, .section-head--dark .section-sub{ color:var(--star); } .section-head--dark .section-sub{ opacity:.85; } .hl{ font-style:normal; padding:.02em .14em; border-radius:.3em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } .hl--coral{ background:var(--coral-soft); color:var(--coral-deep); } .hl--teal{ background:var(--teal-soft); color:var(--teal-deep); } .hl--mustard{ background:var(--mustard-soft); color:var(--mustard-deep); } .hl--berry{ background:var(--berry-soft); color:var(--berry); } .hl--lav{ background:rgba(143,123,255,.22); color:#CDc2FF; } /* ─────────────────────────── before / after ─────────────────────────── */ .ba{ max-width:980px; margin:0 auto; } .ba__frame{ position:relative; aspect-ratio:16/9.4; border:var(--bw) solid var(--ink); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-soft); background:var(--paper-2); cursor:ew-resize; touch-action:pan-y; --cut:50%; } .ba__scene{ position:absolute; inset:0; } .ba__scene--after{ background: radial-gradient(130% 100% at 20% 0%, #FFE9C9 0%, transparent 50%), radial-gradient(120% 110% at 85% 100%, #D8F4EE 0%, transparent 55%), linear-gradient(160deg,#FFF3DC,#FFE2D2 55%,#EFE5FB); } .ba-tile{ position:absolute; width:13%; min-width:74px; transform:rotate(var(--r,0deg)); } .ba-tile svg{ filter:drop-shadow(0 8px 10px rgba(42,33,28,.2)); } .ba-tile i{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); font-style:normal; font-size:clamp(1.2rem,2.4vw,1.9rem); } .ba-tile b{ display:block; text-align:center; font-family:var(--f-display); font-weight:600; font-size:clamp(.7rem,1.3vw,.95rem); margin-top:.2em; } .ba__scene--before{ background:linear-gradient(165deg,#E7E2D8,#D9D2C4 60%,#CFC6B5); clip-path:inset(0 calc(100% - var(--cut)) 0 0); } .ba-mess{ position:absolute; inset:0; font-family:ui-monospace,Menlo,monospace; } .ba-mess span{ position:absolute; font-size:clamp(.55rem,1.25vw,.8rem); color:#5d564a; white-space:nowrap; background:rgba(255,255,255,.4); border:1px solid rgba(93,86,74,.25); border-radius:6px; padding:.25em .5em; transform:rotate(calc((var(--i,0) - 1) * 1deg)); } .ba__tag{ position:absolute; bottom:4%; font-family:var(--f-hand); font-weight:700; font-size:clamp(1rem,2vw,1.4rem); background:var(--card); border:2.5px solid var(--ink); border-radius:999px; padding:.15em .8em; box-shadow:0 4px 0 var(--ink); } .ba__tag--before{ left:4%; transform:rotate(-2deg); } .ba__tag--after{ right:4%; transform:rotate(2deg); } .ba__handle{ position:absolute; top:0; bottom:0; left:var(--cut); width:0; pointer-events:none; } .ba__handle::before{ content:""; position:absolute; top:0; bottom:0; left:-2px; width:4px; background:var(--ink); } .ba__handle span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; display:grid; place-items:center; background:var(--mustard); border:var(--bw) solid var(--ink); border-radius:50%; font-weight:900; box-shadow:0 4px 0 var(--ink); font-size:1.1rem; } .ba__rangewrap{ display:block; margin-top:14px; } #ba-range{ width:100%; appearance:none; -webkit-appearance:none; height:10px; border-radius:6px; background:linear-gradient(90deg,#CFC6B5, var(--mustard)); border:2.5px solid var(--ink); cursor:ew-resize; } #ba-range::-webkit-slider-thumb{ appearance:none; -webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:var(--coral); border:var(--bw) solid var(--ink); box-shadow:0 3px 0 var(--ink); cursor:grab; } #ba-range::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:var(--coral); border:var(--bw) solid var(--ink); box-shadow:0 3px 0 var(--ink); cursor:grab; } /* ─────────────────────────── features ─────────────────────────── */ .features{ background:var(--paper); } .feature{ display:grid; grid-template-columns:minmax(300px,460px) minmax(320px,560px); gap:clamp(28px,5vw,80px); align-items:center; justify-content:center; max-width:1160px; margin:0 auto; padding:clamp(40px,7vh,90px) 0; } .feature--flip .feature__copy{ order:2; } .feature--flip .feature__stage{ order:1; } .feature__eyebrow{ margin:0 0 .6rem; font-family:var(--f-hand); font-weight:700; font-size:1.25rem; color:var(--fc,var(--coral-deep)); transform:rotate(-1.5deg); display:inline-block; } .feature h3{ margin:0 0 .8rem; font-family:var(--f-display); font-weight:700; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.15; letter-spacing:-.01em; } .feature__copy p{ color:var(--ink-soft); font-weight:600; margin:0 0 1rem; } .ticks{ list-style:none; margin:0; padding:0; } .ticks li{ position:relative; padding-left:1.7em; margin:.45em 0; font-weight:700; font-size:.97rem; } .ticks li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:900; color:var(--teal-deep); background:var(--teal-soft); width:1.25em; height:1.25em; border-radius:50%; display:grid; place-items:center; font-size:.85em; margin-top:.15em; } .feature__stage{ position:relative; min-height:340px; border:var(--bw) solid var(--ink); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-card); overflow:hidden; } /* shared mini-window */ .mini-window{ position:absolute; background:#fff; border:2.5px solid var(--ink); border-radius:14px; box-shadow:0 10px 22px rgba(42,33,28,.16); padding:10px 12px 12px; min-width:120px; } .mw-dots{ display:flex; gap:5px; margin-bottom:7px; } .mw-dots i{ width:9px; height:9px; border-radius:50%; background:#FF5F57; } .mw-dots i:nth-child(2){ background:#FEBC2E; } .mw-dots i:nth-child(3){ background:#28C840; } .mini-window b{ font-family:var(--f-display); font-weight:600; font-size:.8rem; display:block; margin-bottom:6px; } .mw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; } .mw-grid i{ aspect-ratio:1; border-radius:6px; background:var(--teal-soft); border:1.5px solid rgba(42,33,28,.2); } .mw-lines i{ display:block; height:7px; border-radius:4px; background:var(--paper-2); border:1px solid rgba(42,33,28,.15); margin:5px 0; } .mw-art{ height:54px; border-radius:8px; background:linear-gradient(120deg,var(--lav-soft),var(--berry-soft)); border:1.5px solid rgba(42,33,28,.2); } /* V1 — one click, everything opens */ .stage-v1 .v1-tile{ position:absolute; left:6%; bottom:8%; width:110px; z-index:3; } .stage-v1 .v1-tile svg{ filter:drop-shadow(0 8px 12px rgba(42,33,28,.22)); } .stage-v1 .v1-tile i{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); font-style:normal; font-size:1.8rem; } .stage-v1 .v1-tile b{ display:block; text-align:center; font-family:var(--f-display); font-weight:600; font-size:.85rem; margin-top:.2em; } .v1-win--1{ right:34%; top:10%; width:34%; z-index:1; } .v1-win--2{ right:5%; top:24%; width:30%; z-index:2; } .v1-win--3{ right:24%; bottom:12%; width:36%; z-index:2; } .v1-chip{ position:absolute; font-weight:800; font-size:.8rem; background:var(--card); border:2px solid var(--ink); border-radius:999px; padding:.25em .7em; box-shadow:0 3px 0 var(--ink); z-index:3; } .v1-chip--1{ left:34%; top:14%; transform:rotate(-4deg); } .v1-chip--2{ left:28%; top:44%; transform:rotate(3deg); } .v1-chip--3{ left:38%; bottom:10%; transform:rotate(-2deg); } /* V2 — drag & drop */ .stage-v2 .v2-file{ position:absolute; left:8%; top:18%; background:#fff; border:2.5px solid var(--ink); border-radius:12px; padding:.5em .9em; font-weight:800; font-size:.9rem; box-shadow:0 8px 16px rgba(42,33,28,.18); z-index:3; } .stage-v2 .v2-file i{ font-style:normal; } .stage-v2 .v2-tile{ position:absolute; right:12%; bottom:14%; width:150px; } .stage-v2 .v2-tile svg{ filter:drop-shadow(0 10px 14px rgba(42,33,28,.22)); } .stage-v2 .v2-tile i{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); font-style:normal; font-size:2.1rem; } .stage-v2 .v2-tile b{ display:block; text-align:center; font-family:var(--f-display); font-weight:600; margin-top:.2em; } .v2-ring{ position:absolute; inset:-7% -5% 12%; border:4px solid #3B82F6; border-radius:26px; opacity:0; transform:scale(.92); transition:opacity .2s; } .stage-v2.is-on .v2-ring{ opacity:1; } .v2-badge{ position:absolute; left:50%; top:12%; transform:translateX(-50%) rotate(2deg); font-family:var(--f-hand); font-weight:700; font-size:1.15rem; color:var(--ink-soft); } /* V3 — draw */ .stage-v3{ display:flex; align-items:center; justify-content:center; gap:4%; padding:24px; } .v3-canvas{ position:relative; width:46%; background:#fff; border:2.5px solid var(--ink); border-radius:16px; padding:12px; box-shadow:0 10px 22px rgba(42,33,28,.14); } .v3-dots{ position:absolute; right:10px; top:10px; display:flex; gap:5px; } .v3-dots i{ width:13px; height:13px; border-radius:50%; border:2px solid var(--ink); } .v3-arrow{ font-size:2rem; font-weight:900; color:var(--ink-faint); } .v3-sticker{ width:34%; text-align:center; } .v3-sticker svg{ filter:drop-shadow(0 10px 16px rgba(42,33,28,.2)); } .v3-sticker b{ font-family:var(--f-display); font-weight:600; } /* V4 — packs */ .stage-v4{ display:flex; align-items:center; justify-content:space-between; padding:30px clamp(16px,4%,40px); } .mini-mac{ width:34%; text-align:center; } .mm-screen{ display:flex; align-items:center; justify-content:center; gap:8%; aspect-ratio:16/10; border:2.5px solid var(--ink); border-radius:12px; background:linear-gradient(150deg,#FFF3DC,#EFE5FB); padding:8%; box-shadow:0 10px 20px rgba(42,33,28,.14); } .mini-mac b{ display:block; margin-top:.6em; font-family:var(--f-hand); font-weight:700; font-size:1.1rem; color:var(--ink-soft); } .mm-tile{ width:22%; aspect-ratio:1; border-radius:26%; background:var(--c); border:2.5px solid var(--ink); box-shadow:0 4px 8px rgba(42,33,28,.18); } .mm-tile--ghost{ opacity:.25; border-style:dashed; box-shadow:none; } .stage-v4.is-on .mm-tile--ghost{ opacity:1; border-style:solid; box-shadow:0 4px 8px rgba(42,33,28,.18); transition:opacity .4s, box-shadow .4s; } .v4-pack{ text-align:center; background:var(--card); border:2.5px solid var(--ink); border-radius:14px; padding:.7em 1em; box-shadow:0 6px 0 var(--ink); z-index:2; } .v4-pack i{ font-style:normal; font-size:1.6rem; display:block; } .v4-pack b{ font-family:ui-monospace,Menlo,monospace; font-size:.72rem; font-weight:700; } /* V5 — layers */ .stage-v5{ padding:0; } .v5-desk{ position:absolute; inset:0; background:linear-gradient(160deg,#FFF3DC,#FFE2D2 55%,#EFE5FB); } .v5-tilebg{ position:absolute; width:64px; height:64px; border-radius:18px; background:var(--c); border:2.5px solid var(--ink); box-shadow:0 6px 10px rgba(42,33,28,.16); } .v5-window{ left:30%; top:16%; width:58%; z-index:2; } .v5-pin{ position:absolute; right:6%; bottom:10%; width:110px; z-index:3; } .v5-pin svg{ filter:drop-shadow(0 10px 16px rgba(42,33,28,.26)); } .v5-pin i{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); font-style:normal; font-size:1.7rem; } .v5-pin b{ display:block; text-align:center; font-family:var(--f-display); font-weight:600; font-size:.8rem; margin-top:.2em; } /* ─────────────────────────── AI section ─────────────────────────── */ .ai{ position:relative; background: radial-gradient(90% 60% at 80% 0%, #34206b66 0%, transparent 60%), radial-gradient(70% 50% at 10% 100%, #58206b55 0%, transparent 55%), var(--night); color:var(--star); overflow:clip; isolation:isolate; border-block:var(--bw) solid var(--ink); } .ai__stars{ position:absolute; inset:0; z-index:-1; opacity:.5; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 36% 64%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 58% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 74% 48%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 88% 76%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 84%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 48% 38%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 66% 90%, #fff 50%, transparent 51%); background-size:900px 700px; } .ai .section-eyebrow{ color:var(--mustard); } .pulse-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--mustard); margin-right:.35em; animation:pulse 1.8s infinite; } .ai--live .pulse-dot{ background:#3DDC84; animation:none; } .ai__demo{ max-width:760px; margin:0 auto; } .ai__promptbox{ display:flex; align-items:center; gap:.9em; background:var(--night-card); border:2.5px solid #4A3B73; border-radius:18px; padding:.9em 1.1em; box-shadow:0 16px 40px rgba(0,0,0,.4); } .ai__sparkle{ font-size:1.2rem; } .ai__prompt{ flex:1; margin:0; font-family:ui-monospace,Menlo,monospace; font-size:.95rem; color:#CDC2FF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .ai__prompt::after{ content:"▏"; animation:blink 1.1s steps(1) infinite; color:var(--mustard); } @keyframes blink{ 50%{ opacity:0 } } .ai__progress{ margin:1rem 4px 0; } .ai__bar{ display:block; height:10px; border-radius:6px; width:0%; background:linear-gradient(90deg,var(--lav),var(--berry),var(--mustard)); border:2px solid #4A3B73; transition:width .35s var(--ease-out); } .ai__progress em{ display:block; margin-top:.5em; font-size:.85rem; color:#9C8FD0; font-style:normal; font-family:ui-monospace,Menlo,monospace; } .ai__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,2.5vw,22px); margin-top:1.6rem; } /* chrome-less by design: just the art floating on the night sky. Drop your own art in assets/ai-tiles/ai-N.svg|png|gif|webp to replace. */ .ai-tile{ position:relative; text-align:center; transform:rotate(var(--r,0deg)); } .ai-tile svg{ width:78%; margin:0 auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)); } .ai-tile i{ position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); font-style:normal; font-size:1.7rem; } .ai-tile__img{ width:84%; height:auto; margin:0 auto; pointer-events:none; -webkit-user-drag:none; filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)); } .ai-tile b{ display:block; margin-top:.5em; font-family:var(--f-display); font-weight:600; font-size:.9rem; color:var(--star); } .ai__caption{ margin:1.1rem 4px 0; text-align:center; font-size:.8rem; color:#8d7fc4; } .ai__points{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,3vw,28px); max-width:980px; margin:clamp(36px,6vh,60px) auto 0; padding:0; } .ai__points li{ background:rgba(255,255,255,.04); border:2px solid #3A2D5E; border-radius:var(--r-md); padding:1.2em 1.3em; } .ai__points b{ display:block; font-family:var(--f-display); font-weight:600; font-size:1.05rem; margin-bottom:.35em; color:#fff; } .ai__points span{ font-size:.92rem; color:#BBAEE8; font-weight:600; } .ai__cta{ text-align:center; margin-top:clamp(36px,6vh,56px); } .ai__cta p{ margin:.9rem auto 0; max-width:520px; font-size:.9rem; color:#9C8FD0; font-weight:600; } /* ─────────────────────────── pricing ─────────────────────────── */ .pricing{ background:linear-gradient(var(--paper), var(--paper-2)); } .currency-toggle{ display:inline-flex; margin-top:1.4rem; border:var(--bw) solid var(--ink); border-radius:999px; background:var(--card); overflow:hidden; box-shadow:0 4px 0 var(--ink); } .currency-toggle button{ border:none; background:none; cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:.95rem; padding:.55em 1.2em; color:var(--ink-soft); transition:background .2s,color .2s; } .currency-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); } .plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,420px)); gap:clamp(20px,3.5vw,36px); justify-content:center; align-items:stretch; max-width:980px; margin:0 auto; } .plan{ position:relative; display:flex; flex-direction:column; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r-lg); padding:clamp(22px,3.5vw,34px); box-shadow:var(--shadow-soft); } .plan h3{ margin:0; font-family:var(--f-display); font-weight:700; font-size:1.6rem; } .plan__tag{ margin:.25em 0 0; font-family:var(--f-hand); font-weight:700; font-size:1.15rem; color:var(--ink-soft); } .plan__price{ display:flex; align-items:baseline; gap:.5em; margin:1rem 0 1.1rem; flex-wrap:wrap; } .plan__price b{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.2rem); line-height:1; } .plan__was{ color:var(--ink-faint); font-weight:800; font-size:1.15rem; } .plan__per{ font-size:.9rem; font-weight:800; color:var(--ink-soft); } .ticks--plan{ margin:0 0 1.6rem; flex:1; } .ticks--plan li{ font-size:.93rem; } .plan__cta{ width:100%; } .plan__alt{ margin:.9rem 0 0; text-align:center; font-size:.88rem; font-weight:700; color:var(--ink-soft); } .plan__alt a{ color:var(--coral-deep); } .plan--ai{ background:var(--night); border-color:var(--ink); color:var(--star); } .plan--ai .plan__tag{ color:#BBAEE8; } .plan--ai .plan__per{ color:#BBAEE8; } .plan--ai .plan__was{ color:#7A6BB0; } .plan--ai .ticks--plan li{ color:#E4DCFF; } .plan--ai .ticks--plan li::before{ background:rgba(143,123,255,.25); color:#CDC2FF; } .plan--ai .plan__alt{ color:#9C8FD0; } .plan__ribbon{ position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-2deg); margin:0; background:var(--mustard); border:2.5px solid var(--ink); border-radius:999px; font-family:var(--f-display); font-weight:600; font-size:.85rem; color:var(--ink); padding:.3em 1em; box-shadow:0 4px 0 var(--ink); white-space:nowrap; } .ai-word{ background:linear-gradient(90deg,var(--lav),var(--berry)); color:#fff; border-radius:.35em; padding:0 .25em; margin-left:.05em; } .pricing__notes{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:center; max-width:980px; margin:clamp(28px,5vh,44px) auto 0; padding:0; font-size:.9rem; font-weight:800; color:var(--ink-soft); } /* ─────────────────────────── reviews ─────────────────────────── */ .reviews__wall{ columns:3 280px; column-gap:18px; max-width:980px; margin:0 auto clamp(28px,5vh,48px); } .review-card{ break-inside:avoid; background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-md); padding:1.1em 1.2em; margin:0 0 18px; box-shadow:var(--shadow-card); transform:rotate(var(--r,0deg)); } .review-card .rc-stars{ color:var(--mustard-deep); letter-spacing:.1em; font-size:1rem; } .review-card p{ margin:.5em 0; font-weight:600; font-size:.95rem; } .review-card b{ font-family:var(--f-hand); font-weight:700; font-size:1.1rem; color:var(--ink-soft); } .review-form{ max-width:560px; margin:0 auto; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r-lg); padding:clamp(20px,4vw,30px); box-shadow:var(--shadow-soft); } .review-form h3{ margin:0 0 1rem; font-family:var(--f-display); font-weight:700; font-size:1.3rem; } .review-form__row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .review-form__row input{ flex:1; min-width:180px; } .review-form input, .review-form textarea, .paid-form input, #dl-form input{ width:100%; font-family:var(--f-body); font-weight:700; font-size:1rem; color:var(--ink); background:#fff; border:2.5px solid var(--ink); border-radius:14px; padding:.7em .9em; margin:0 0 12px; outline-offset:2px; } .review-form textarea{ resize:vertical; } .review-form input::placeholder, .review-form textarea::placeholder, .paid-form input::placeholder, #dl-form input::placeholder{ color:var(--ink-faint); font-weight:600; } .stars{ display:flex; gap:2px; margin-bottom:12px; } .stars button{ background:none; border:none; cursor:pointer; font-size:1.7rem; line-height:1; padding:.05em; color:#D9CCBC; transition:transform .15s var(--spring), color .15s; } .stars button:hover{ transform:scale(1.2) rotate(-8deg); } .stars button.is-on{ color:var(--mustard-deep); } .form-msg{ margin:.6rem 0 0; font-weight:800; font-size:.92rem; min-height:1.4em; } .form-msg.ok{ color:var(--teal-deep); } .form-msg.err{ color:var(--coral-deep); } /* ─────────────────────────── faq ─────────────────────────── */ .faq__list{ max-width:720px; margin:0 auto; } .qa{ background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r-md); margin-bottom:12px; box-shadow:var(--shadow-card); overflow:hidden; } .qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1em; font-family:var(--f-display); font-weight:600; font-size:1.05rem; padding:1em 1.2em; } .qa summary::-webkit-details-marker{ display:none; } .qa summary::after{ content:"+"; font-size:1.5rem; font-weight:600; color:var(--coral-deep); transition:transform .25s var(--spring); flex:none; } .qa[open] summary::after{ transform:rotate(45deg); } .qa p{ margin:0; padding:0 1.2em 1.1em; color:var(--ink-soft); font-weight:600; font-size:.97rem; } /* ─────────────────────────── finale ─────────────────────────── */ .finale{ text-align:center; position:relative; overflow:clip; background:var(--paper-2); } .finale__tiles{ display:flex; justify-content:center; gap:clamp(10px,2.5vw,26px); margin-bottom:2rem; } .finale__tiles i{ width:clamp(44px,7vw,72px); aspect-ratio:1; border-radius:24%; background:linear-gradient(135deg,var(--c1),var(--c2)); border:var(--bw) solid var(--ink); box-shadow:0 8px 14px rgba(42,33,28,.18); animation:bob 3.2s ease-in-out infinite; animation-delay:var(--d,0s); transform:rotate(calc((var(--i,0) - 2) * 3deg)); } @keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -12px } } .finale h2{ margin:0; font-family:var(--f-display); font-weight:700; font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.1; letter-spacing:-.015em; } .finale p{ color:var(--ink-soft); font-weight:700; margin:1rem 0 0; } .finale__ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; } .finale__fine{ font-size:.85rem; color:var(--ink-faint); margin-top:1.4rem !important; font-weight:800; } /* ─────────────────────────── footer ─────────────────────────── */ .footer{ background:var(--ink); color:var(--paper); padding:clamp(40px,7vh,70px) clamp(18px,5vw,48px) 26px; } .footer a{ color:var(--mustard); text-decoration-thickness:2px; text-underline-offset:3px; } .footer__top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; max-width:980px; margin:0 auto; } .footer__brand{ display:flex; gap:1rem; align-items:flex-start; } .footer__brand .nav__logo-mark{ width:46px; height:46px; } .footer__brand p{ margin:0; font-weight:700; line-height:1.55; } .footer__links{ display:grid; gap:.5rem; font-weight:800; } .footer__links a{ text-decoration:none; } .footer__links a:hover{ text-decoration:underline; } .footer__legal{ max-width:980px; margin:2.2rem auto 0; display:grid; gap:.6rem; } .footer__legal details{ border:2px solid rgba(255,247,236,.25); border-radius:14px; padding:.7em 1em; } .footer__legal summary{ cursor:pointer; font-weight:800; font-family:var(--f-display); } .footer__legal p{ margin:.6em 0 0; color:#D8CCC0; font-size:.92rem; font-weight:600; } .footer__bottom{ max-width:980px; margin:2rem auto 0; font-size:.85rem; color:#B5A597; font-weight:700; } /* ─────────────────────────── modals ─────────────────────────── */ .modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:18px; background:rgba(31,22,16,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .25s; } .modal.is-open{ opacity:1; } .modal[hidden]{ display:none; } .modal__card{ position:relative; width:min(94vw,520px); max-height:min(88svh,860px); overflow:auto; background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--r-lg); padding:clamp(22px,4vw,32px); box-shadow:0 30px 80px rgba(0,0,0,.35); transform:translateY(16px) scale(.97); transition:transform .3s var(--spring); } .modal.is-open .modal__card{ transform:translateY(0) scale(1); } .modal__card--narrow{ width:min(94vw,440px); } .modal__close{ position:absolute; top:12px; right:12px; width:38px; height:38px; background:var(--coral); color:#fff; border:2.5px solid var(--ink); border-radius:50%; font-size:1.3rem; line-height:1; cursor:pointer; box-shadow:0 3px 0 var(--ink); transition:transform .2s var(--spring); } .modal__close:hover{ transform:rotate(90deg); } .modal__card h3{ margin:0 0 .2rem; font-family:var(--f-display); font-weight:700; font-size:1.5rem; padding-right:1.6em; } .modal__productline{ margin:0 0 1.2rem; font-family:var(--f-hand); font-weight:700; font-size:1.2rem; color:var(--coral-deep); } .segmented{ display:flex; border:2.5px solid var(--ink); border-radius:999px; overflow:hidden; background:var(--card); margin-bottom:1.1rem; box-shadow:0 3px 0 var(--ink); } .segmented button{ flex:1; border:none; background:none; cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:.95rem; padding:.6em .4em; color:var(--ink-soft); } .segmented button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); } .pay-pane{ text-align:center; } .pay-amount{ margin:.2rem 0 .8rem; font-weight:700; } .pay-amount b{ font-family:var(--f-display); font-size:1.6rem; color:var(--coral-deep); } .pay-qr{ width:min(220px,60vw); aspect-ratio:1; object-fit:contain; margin:0 auto .8rem; background:#fff; border:2.5px solid var(--ink); border-radius:16px; padding:8px; } .pay-qr[data-missing]{ display:none; } .pay-copy{ display:flex; align-items:center; justify-content:center; gap:.6em; flex-wrap:wrap; font-weight:700; } .modal__divider{ display:flex; align-items:center; gap:1em; margin:1.3rem 0 1rem; color:var(--ink-faint); font-family:var(--f-hand); font-weight:700; font-size:1.1rem; } .modal__divider::before,.modal__divider::after{ content:""; flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--ink-faint) 0 8px,transparent 8px 16px); } .paid-form__lead{ margin:0 0 .9rem; font-weight:700; font-size:.97rem; } #dl-form{ margin-top:1rem; } /* video modal: a dark 16:9 stage */ .modal__card--video{ width:min(94vw, 920px); background:var(--ink); padding:14px; border-color:var(--ink); overflow:visible; } .video-frame{ position:relative; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; } .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .modal__card--video .modal__close{ top:-14px; right:-14px; } /* review images + upload */ .review-card__img{ width:100%; height:auto; border:2.5px solid var(--ink); border-radius:12px; margin:.6em 0 .2em; display:block; } .review-card__tag{ display:inline-block; font-family:var(--f-hand); font-weight:700; font-size:.95rem; color:var(--ink-faint); margin-top:.3em; } .rv-upload{ display:flex; align-items:center; gap:.7em; flex-wrap:wrap; border:2.5px dashed var(--ink-faint); border-radius:14px; padding:.6em .9em; margin:0 0 12px; cursor:pointer; font-weight:700; color:var(--ink-soft); transition:border-color .2s, background .2s; } .rv-upload:hover{ border-color:var(--coral); background:var(--coral-soft); } .rv-upload input{ display:none; } .rv-upload__thumb{ width:54px; height:54px; object-fit:cover; border-radius:10px; border:2px solid var(--ink); } .rv-upload__clear{ border:none; background:var(--ink); color:var(--paper); border-radius:999px; font-size:.75rem; font-weight:800; padding:.25em .7em; cursor:pointer; } /* ─────────────────────────── toast / confetti / glow ─────────────────────────── */ .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:400; background:var(--ink); color:var(--paper); font-weight:800; font-size:.95rem; border-radius:999px; padding:.7em 1.4em; box-shadow:0 14px 34px rgba(0,0,0,.3); max-width:88vw; text-align:center; } #confetti{ position:fixed; inset:0; width:100vw; height:100vh; z-index:500; pointer-events:none; } #glow{ position:fixed; z-index:1; width:340px; height:340px; border-radius:50%; pointer-events:none; left:0; top:0; opacity:0; background:radial-gradient(closest-side, rgba(255,194,62,.18), transparent 70%); transform:translate(-50%,-50%); transition:opacity .4s; } /* ─────────────────────────── responsive ─────────────────────────── */ /* hide the bottom hint when a short viewport squeezes the hero (wide mode) */ @media (min-width:1280px) and (max-height:760px){ .playground__hint{ display:none; } } /* 761–1279px: the side margins can't hold full tiles, so the stickers PEEK in from the hero's edges — half on-screen, still draggable (grab one and pull it all the way in). Nothing can touch the centered text column. */ @media (max-width:1279px){ .hero__scrollhint{ display:none; } .playground__hint{ display:none; } .hero__dragnote{ display:block; } /* peek offsets via left-calc, NOT the translate property — GSAP folds independent transforms into its matrix and would wipe a translate */ .tile{ width:88px; } .tile--1{ left:-44px; top:12%; } .tile--3{ left:-44px; top:40%; } .tile--5{ left:-44px; top:68%; } .tile--2{ left:calc(100% - 44px); top:10%; } .tile--4{ left:calc(100% - 44px); top:38%; } .tile--6{ left:calc(100% - 44px); top:66%; } } /* once a peeking tile is grabbed, it's loose — no more edge offset */ .tile.is-loose{ translate:0 0 !important; } @media (max-width:900px){ .feature{ grid-template-columns:1fr; gap:24px; padding:clamp(28px,5vh,56px) 0; } .feature--flip .feature__copy{ order:1; } .feature--flip .feature__stage{ order:2; } .feature__stage{ min-height:300px; } .ai__grid{ grid-template-columns:repeat(2,1fr); } .ai__points{ grid-template-columns:1fr; } .footer__top{ flex-direction:column; } } /* ≤760px: compact header with burger; the tiles become a tight strip right inside the hero (under the copy), visible without scrolling */ @media (max-width:760px){ :root{ --nav-h:60px; } .nav{ gap:.6rem; } .nav__links{ display:none; } .nav__burger{ display:flex; } .nav__logo-mark{ width:32px; height:32px; } .nav__logo-word{ font-size:1.1rem; } .nav__actions{ margin-left:auto; } .nav__actions .btn--small{ font-size:.85rem; padding:.5em .9em; } .ticker{ font-size:.85rem; } .hero{ padding-top:1vh; } .hero__sub{ margin-top:1rem; } .hero__ctas{ margin-top:1.3rem; } .hero__pricehint{ margin-top:1.1rem; } .hero__chips{ margin-top:1rem; } .hero__dragnote{ margin-top:1.3rem; } .playground{ position:relative; inset:auto; height:118px; width:100%; max-width:520px; margin:6px auto 0; } .tile{ width:58px; } .tile__name{ font-size:.66rem; margin-top:.15em; } .tile__emoji{ font-size:1.35rem; } .tile--1{ left:2%; top:14%; } .tile--2{ left:18%; top:8%; } .tile--3{ left:34%; top:16%; } .tile--4{ left:50%; top:7%; } .tile--5{ left:66%; top:15%; } .tile--6{ left:82%; top:9%; } .stage-v3{ flex-wrap:wrap; } .v3-canvas{ width:64%; } .v3-sticker{ width:42%; } .modal__card{ padding:20px 16px; } } @media (max-width:480px){ body{ font-size:16px; } .hero__title{ font-size:2.3rem; } .hero__ctas .btn--big{ width:100%; } .finale__ctas .btn--big{ width:100%; } .btn--big{ font-size:1.05rem; } .ai__promptbox{ flex-wrap:wrap; } .ai__prompt{ flex-basis:100%; order:2; white-space:normal; max-height:3em; } .ai__promptbox .btn{ order:3; margin-left:auto; } .reviews__wall{ columns:1; } } /* ─────────────────────────── reduced motion ─────────────────────────── */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .marquee__track{ animation:none; } .hero__scrollhint span{ animation:none; } .finale__tiles i{ animation:none; } #glow{ display:none; } }