/* ============================================================================ interactive.css — the touch layer, shared by index.html and the five product subpages. Everything here is ADDITIVE and mobile-first. On desktop the pages keep the static layouts in pages.css; below 700px the phone grids become swipeable carousels, and on every size a phone can be tapped to open full screen. Loaded alongside (not instead of) pages.css. index.html keeps its own inline CSS and links this on top, which is why every rule here is scoped tightly enough not to disturb the existing layouts. ========================================================================= */ /* ---------- 1. SWIPEABLE GALLERIES (mobile) ---------- A 2-across grid of phones on a 375px screen gives you two ~150px-wide phones you cannot read. One card at 74vw that you flick through is both legible and something to actually do with your thumb. scroll-snap does the work; there is no JS driving the scroll, so it keeps native momentum and never fights the browser. */ @media(max-width:700px){ .gallery,.gallery.three,.gallery.four,.gallery.five{ display:flex;grid-template-columns:none; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; gap:14px;padding:4px calc(50% - 37vw) 4px; scrollbar-width:none} .gallery::-webkit-scrollbar{display:none} /* No negative bleed margin here. Most galleries sit inside .wide.quiet, and .quiet's `padding: 0` shorthand zeroes .wide's horizontal gutter — so they are already edge to edge, and a -20px margin made them 40px wider than the viewport (a 20px overflow on , which body's overflow-x hidden masks on desktop but rubber-bands on iOS). The one gallery that IS the .wide element keeps its own gutter, which is correct. */ .gallery figure{flex:0 0 74vw;scroll-snap-align:center;margin:0; transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1)} /* The neighbours sit back so the centred card reads as the one in hand. */ .gallery figure:not(.near){opacity:.44;transform:scale(.93)} .gallery figcaption{font-size:14px;margin-top:11px} } /* dots under a swipeable gallery — injected by site.js, so it only appears where a carousel actually exists */ .gdots{display:none} @media(max-width:700px){ .gdots{display:flex;justify-content:center;gap:7px;margin-top:16px} .gdots b{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.22; transition:opacity .25s,width .25s;display:block} .gdots b.on{opacity:.9;width:17px;border-radius:3px} } /* ---------- 2. TAP TO OPEN ---------- Every framed phone becomes a target. On a phone the screenshots are small enough that "what does that actually say" is the first thing anyone wants, and pinch-zooming a page is a poor answer. */ .zoomable{cursor:zoom-in;-webkit-tap-highlight-color:transparent} .zoomable:active{transform:scale(.985)} .lb{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center; background:rgba(8,10,16,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); opacity:0;pointer-events:none;transition:opacity .28s ease;padding:24px} .lb.on{opacity:1;pointer-events:auto} .lb img{max-width:min(86vw,420px);max-height:86vh;width:auto;height:auto; mix-blend-mode:normal !important; transform:scale(.92) translateY(10px);transition:transform .34s cubic-bezier(.2,.8,.3,1)} .lb.on img{transform:none} .lb .cap{position:absolute;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom)); text-align:center;color:rgba(255,255,255,.78);font-size:14px;padding:0 24px; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif} .lb .x{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;width:38px;height:38px; border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff; font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center} .lb .x:hover{background:rgba(255,255,255,.24)} /* Arrows are pointless on touch — you swipe — and clutter on a phone. */ .lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0; border-radius:50%;background:rgba(255,255,255,.13);color:#fff;font-size:20px;cursor:pointer; display:none;align-items:center;justify-content:center} .lb .nav.prev{left:18px}.lb .nav.next{right:18px} @media(hover:hover) and (min-width:760px){.lb .nav{display:flex}.lb .nav:hover{background:rgba(255,255,255,.24)}} /* ---------- 3. LIVE THEME SWATCHES (messages page) ---------- The dots under the headline were decoration. Making them change the thread below is the one place on the site where you can operate the product instead of reading about it. */ .bubbles{--me:#FFD60A;--me-ink:#3a2e00} .bubble.me{background:var(--me);color:var(--me-ink); transition:background .45s ease,color .45s ease} .swatches.live i{cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .22s cubic-bezier(.2,1.5,.4,1),box-shadow .22s; border:2.5px solid transparent;background-clip:padding-box} .swatches.live i:hover{transform:scale(1.13)} .swatches.live i:active{transform:scale(.94)} .swatches.live i.on{transform:scale(1.2);box-shadow:0 0 0 2.5px rgba(0,0,0,.14),0 4px 16px rgba(0,0,0,.2)} .swatchhint{font-size:13.5px;color:var(--ink2);margin-top:14px;text-align:center} /* ---------- 4. TAP FEEDBACK ---------- Cards and store badges get a press state. Desktop already has hover; touch had nothing, which makes a tap feel like it missed. */ .pcard,.sbadge,.btn,.lm{-webkit-tap-highlight-color:transparent} .pcard:active{transform:scale(.985)} .sbadge:active{transform:scale(.96)} /* ---------- 5. SCROLL PROGRESS ---------- These pages are long. A 2px rule at the top is the cheapest way to say how much is left without adding furniture. */ .sprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;pointer-events:none; background:linear-gradient(90deg,#30D158,#64D2FF 40%,#FF5E8A 75%,#FF9F0A); transition:width .08s linear} @media(prefers-reduced-motion:reduce){ .gallery figure:not(.near){opacity:1;transform:none} .lb,.lb img,.bubble.me,.swatches.live i{transition:none} .sprog{transition:none} } /* ---------- 6. EDITOR SIMULATOR (camera page) ---------- The 13 camera screenshots are all the SAME photograph with a different tool open. That is what makes this work: swap the image and nothing moves except the panel, so hovering the tool list reads as the editor responding rather than as a slideshow. Two stacked s crossfade rather than one swapping src — a src swap on a decoded-but-uncached image flashes, and the whole illusion depends on the photo underneath never blinking. */ .sim{display:flex;align-items:center;justify-content:center; gap:clamp(18px,3.4vw,52px);margin-top:clamp(32px,4vw,54px);padding-inline:clamp(20px,4vw,60px)} .simstage{position:relative;flex:0 0 auto;width:clamp(240px,29vw,340px);aspect-ratio:619/1298} .simstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; mix-blend-mode:normal;opacity:0;transition:opacity .26s ease} .simstage img.on{opacity:1} .simtools{list-style:none;margin:0;padding:0;display:grid;gap:7px;flex:0 0 auto} .simtools button{font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em; color:rgba(255,255,255,.62);background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);border-radius:12px; padding:9px 18px;min-width:132px;text-align:left;cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s,color .2s,border-color .2s,transform .2s cubic-bezier(.2,.9,.3,1)} .simtools button:hover{background:rgba(255,255,255,.13);color:#fff;transform:translateX(3px)} .simtools button[aria-selected="true"]{background:#fff;color:#0B0F18;border-color:#fff;transform:translateX(3px)} .simhint{text-align:center;font-size:13.5px;color:rgba(255,255,255,.5);margin-top:20px} @media(max-width:780px){ /* Tools move under the phone as a thumb-scrollable chip row. A vertical list beside a phone does not fit, and shrinking it makes it untappable. */ .sim{flex-direction:column;gap:20px;padding-inline:0} .simstage{width:min(62vw,270px)} .simtools{display:flex;gap:8px;overflow-x:auto;width:100%; padding:2px clamp(20px,5vw,28px) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .simtools::-webkit-scrollbar{display:none} .simtools li{flex:0 0 auto} .simtools button{min-width:0;padding:10px 17px;font-size:14.5px;text-align:center} .simtools button:hover,.simtools button[aria-selected="true"]{transform:none} } @media(prefers-reduced-motion:reduce){ .simstage img{transition:none} .simtools button{transition:none} } /* ---------- 7. STICKY DOWNLOAD BAR ---------- The analytics reason this exists: the median visitor reaches 31% of the page and the home page's own median is 0%. The store badges sit in the hero and again in the footer, which means anyone who scrolls a little and stops never has a call to action on screen. This keeps one there. Mobile only. On desktop the badges are visible in the hero without scrolling and a fixed bar would just cover the work. */ .dlbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none; align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-top:1px solid rgba(0,0,0,.10); transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.8,.3,1)} .dlbar.on{transform:none} .darkpage .dlbar{background:rgba(10,14,24,.82);border-top-color:rgba(255,255,255,.14)} .dlbar-t{flex:1;min-width:0;line-height:1.25} .dlbar-t b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .dlbar-t span{display:block;font-size:11.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .darkpage .dlbar-t b{color:#fff} .darkpage .dlbar-t span{color:rgba(255,255,255,.62)} .dlbar a{flex:0 0 auto;background:var(--blue);color:#fff;font-size:14.5px;font-weight:600; padding:11px 20px;border-radius:980px;text-decoration:none;white-space:nowrap; -webkit-tap-highlight-color:transparent} .dlbar a:active{transform:scale(.97)} .dlbar .x{flex:0 0 auto;background:none;border:0;color:var(--ink2);font-size:17px; line-height:1;padding:6px 2px 6px 4px;cursor:pointer} .darkpage .dlbar .x{color:rgba(255,255,255,.5)} @media(max-width:760px){.dlbar{display:flex}} @media(prefers-reduced-motion:reduce){.dlbar{transition:none}}