/* ========================================================================= DIVYA SCALE — HOME "STAGE" v3 One pinned full-screen stage on a modern animated gradient background. Products float in as cutout PNGs (or framed photo cards where no cutout exists) with their own bob/tilt animation. Nav lives in a bottom dock bar plus a right-side prev/next pair. Light/dark theme via [data-theme] on . Loaded after styles.css, homepage only. ========================================================================= */ :root{ --cine-page-bg:#050506; --cine-ink:#ffffff; --cine-ink-2:rgba(255,255,255,.82); --cine-ink-3:rgba(255,255,255,.68); --cine-ink-4:rgba(255,255,255,.5); --cine-glass-bg:rgba(14,14,16,.72); --cine-glass-bg-strong:rgba(14,14,16,.94); --cine-glass-border:rgba(255,255,255,.12); --cine-hover-bg:rgba(255,255,255,.12); --cine-card-border:rgba(255,255,255,.12); --cine-kicker-bg:rgba(255,255,255,.08); --cine-kicker-border:rgba(255,255,255,.2); --cine-dot-bg:rgba(255,255,255,.24); --cine-grid-line:rgba(255,255,255,.05); --cine-shadow:rgba(0,0,0,.45); } html[data-theme="light"]{ --cine-page-bg:#f2ede9; --cine-ink:#121214; --cine-ink-2:rgba(18,18,20,.8); --cine-ink-3:rgba(18,18,20,.64); --cine-ink-4:rgba(18,18,20,.48); --cine-glass-bg:rgba(255,255,255,.78); --cine-glass-bg-strong:rgba(255,255,255,.95); --cine-glass-border:rgba(18,18,20,.1); --cine-hover-bg:rgba(18,18,20,.07); --cine-card-border:rgba(18,18,20,.08); --cine-kicker-bg:rgba(18,18,20,.06); --cine-kicker-border:rgba(18,18,20,.14); --cine-dot-bg:rgba(18,18,20,.16); --cine-grid-line:rgba(18,18,20,.05); --cine-shadow:rgba(18,18,20,.16); } html,body{scrollbar-width:none;-ms-overflow-style:none;} html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;} /* The page is fully locked (no real scrolling at all) -- navigation is input-driven (wheel/swipe/arrow keys) in home-cinematic.js, one slide at a time. position:fixed on body is the standard cross-browser/iOS-safe way to prevent any scroll or rubber-band bounce. */ body.stage-home{background:var(--cine-page-bg);position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;} body.stage-home main{display:block;} body.stage-home .topbar, body.stage-home .site-header{display:none;} body.stage-home .footer{display:none;} /* kept in the DOM for SEO/NAP text, hidden on this compact layout */ /* ---- Modern animated backdrop ---- */ .stage-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--cine-page-bg);transition:background .4s ease;} .stage-bg i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5;font-style:normal;} .stage-bg i.b1{width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,#e51b3f,transparent 70%);animation:driftA 22s ease-in-out infinite;} .stage-bg i.b2{width:46vw;height:46vw;right:-16vw;top:6vw;background:radial-gradient(circle,#ff3d5f,transparent 70%);opacity:.28;animation:driftB 26s ease-in-out infinite;} .stage-bg i.b3{width:50vw;height:50vw;left:18vw;bottom:-24vw;background:radial-gradient(circle,#7a0d24,transparent 72%);opacity:.42;animation:driftC 30s ease-in-out infinite;} html[data-theme="light"] .stage-bg i{opacity:.22;} .stage-bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--cine-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--cine-grid-line) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);} .stage-bg .noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} @keyframes driftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,5vw) scale(1.12)}} @keyframes driftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,6vw) scale(1.08)}} @keyframes driftC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-4vw) scale(1.1)}} /* ---- The stage: fills the (locked, non-scrolling) viewport ---- */ .stage{position:relative;z-index:1;height:100dvh;} .stage-pin{position:relative;top:0;height:100dvh;min-height:560px;overflow:hidden;} .stage-slides{position:relative;height:100%;} .stage-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s cubic-bezier(.16,1,.3,1),visibility 0s linear .9s;} .stage-slide.is-active{opacity:1;visibility:visible;z-index:2;transition:opacity .9s cubic-bezier(.16,1,.3,1);} /* Product slides stack their text row and image as siblings (not nested) so the image is never clipped by the text row's own overflow:hidden -- it only bleeds and overlaps on purpose, never gets hard-cut. */ .stage-slide:not(.is-hero){flex-direction:column;justify-content:center;gap:18px;} .stage-row{position:relative;z-index:2;width:min(1180px,94vw);max-height:calc(100% - 260px);margin:0 auto 134px;padding:16px 0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:visible;} /* ---- Slide 0: company / brand intro, classic full-screen photo bg -- the photo stays clearly visible; only a soft scrim sits behind the centered text block (not smeared across the whole image) so both the photo and the copy stay readable. ---- */ .stage-slide.is-hero .stage-hero-bg{position:absolute;inset:0;z-index:0;} .stage-slide.is-hero .stage-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:1;transition:opacity .4s ease;} html[data-theme="light"] .stage-slide.is-hero .stage-hero-bg img{opacity:.88;} .stage-slide.is-hero .stage-hero-overlay{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 760px 540px at 76% 46%,var(--cine-page-bg) 0%,var(--cine-page-bg) 40%,transparent 85%),linear-gradient(180deg,var(--cine-page-bg) 0%,transparent 14%,transparent 88%,var(--cine-page-bg) 100%);opacity:.68;} html[data-theme="light"] .stage-slide.is-hero .stage-hero-overlay{opacity:.72;} .stage-slide.is-hero .stage-row{width:97vw;max-width:none;padding-right:88px;box-sizing:border-box;} .stage-slide.is-hero .stage-info{max-width:640px;margin:0 0 0 auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right;} .stage-slide.is-hero .stage-cta{justify-content:flex-end;width:100%;} .stage-slide.is-hero .stage-desc{margin-left:0;margin-right:0;text-align:right;} @media(max-width:1080px){.stage-slide.is-hero .stage-row{padding-right:64px;}} @media(max-width:720px){.stage-slide.is-hero .stage-row{padding-right:54px;}.stage-slide.is-hero .stage-info{max-width:520px;}} /* floating pop-up stat badges beside the company intro text -- positioned in the row's side gutters (outside the ~760px text column), never on top of the headline. */ .hero-floaters{position:absolute;inset:0;pointer-events:none;z-index:3;} .hero-float-badge{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 40px;border-radius:28px;background:var(--cine-glass-bg-strong);border:1.5px solid var(--cine-glass-border);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 22px 50px var(--cine-shadow);opacity:0;transform:translateY(16px) scale(.9);transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--bd,.2s),transform .6s cubic-bezier(.16,1,.3,1) var(--bd,.2s);animation:badgeBob var(--bdur,4.5s) ease-in-out infinite;animation-delay:var(--bad,0s);} .stage-slide.is-active .hero-float-badge{opacity:1;transform:translateY(0) scale(1);} .hero-float-badge b{font-size:40px;font-weight:1000;letter-spacing:-.03em;color:#ff5a76;line-height:1;} .hero-float-badge span{font-size:16px;font-weight:800;color:var(--cine-ink);white-space:nowrap;} .hfb-1{left:4%;top:10%;--bd:.15s;--bdur:5s;--bad:0s;} .hfb-2{left:4%;top:27%;--bd:.28s;--bdur:5.6s;--bad:.4s;} .hfb-3{left:4%;top:44%;--bd:.4s;--bdur:5.2s;--bad:.9s;} .hfb-4{left:4%;top:61%;--bd:.52s;--bdur:6s;--bad:.3s;} @keyframes badgeBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1)}} @media(max-width:1560px){ .hero-float-badge{padding:20px 28px;border-radius:22px;gap:4px;} .hero-float-badge b{font-size:28px;} .hero-float-badge span{font-size:13.5px;} .hfb-1{left:3%;top:9%;} .hfb-2{left:3%;top:26%;} .hfb-3{left:3%;top:43%;} .hfb-4{left:3%;top:60%;} } @media(max-width:940px){.hero-floaters{display:none;}} /* text */ .stage-info{color:var(--cine-ink);max-width:640px;} .stage-slide .kicker{background:var(--cine-kicker-bg);border-color:var(--cine-kicker-border);color:var(--cine-ink);backdrop-filter:blur(6px);opacity:0;transform:translateY(22px) scale(.92);transition:opacity .65s cubic-bezier(.16,1,.3,1) .06s,transform .65s cubic-bezier(.16,1,.3,1) .06s,background .3s ease,color .3s ease,border-color .3s ease;} .stage-slide.is-active .kicker{opacity:1;transform:none;} /* three big selectable cards -- Gallery / Dealer Panel / Download -- sit right under the gallery slide's heading+description, above the photo grid. */ .menu-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%;max-width:980px;margin:22px auto 0;opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1) .18s,transform .7s cubic-bezier(.16,1,.3,1) .18s;} .stage-slide.is-active .menu-cards{opacity:1;transform:none;} .menu-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 14px;border-radius:20px;border:1px solid var(--cine-glass-border);background:var(--cine-glass-bg);backdrop-filter:blur(14px);text-decoration:none;color:var(--cine-ink);transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease,box-shadow .25s ease;} .menu-card:hover{transform:translateY(-6px);border-color:rgba(229,27,63,.4);box-shadow:0 18px 40px rgba(0,0,0,.28);} .menu-card.active{background:linear-gradient(180deg,rgba(229,27,63,.16),rgba(229,27,63,.05));border-color:rgba(229,27,63,.5);} .menu-card-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(229,27,63,.14);color:#ff3d5f;margin-bottom:4px;} .menu-card-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .menu-card h3{margin:0;font-size:16px;font-weight:950;letter-spacing:-.01em;} .menu-card p{margin:0;font-size:12.5px;color:var(--cine-ink-2);line-height:1.4;} @media(max-width:900px){.menu-cards{grid-template-columns:repeat(2,1fr);max-width:520px;}} @media(max-width:640px){.menu-cards{grid-template-columns:1fr;max-width:340px;gap:10px;}.menu-card{flex-direction:row;text-align:left;padding:14px 16px;}.menu-card-icon{width:42px;height:42px;margin-bottom:0;flex:0 0 auto;}.menu-card-icon svg{width:20px;height:20px;}} .stage-info h1,.stage-info h2{font-size:clamp(24px,3.2vw,44px);line-height:1.05;letter-spacing:-.04em;font-weight:1000;margin:12px 0 0;opacity:0;transform:translateY(34px);transition:opacity .75s cubic-bezier(.16,1,.3,1) .15s,transform .75s cubic-bezier(.16,1,.3,1) .15s;} .stage-slide.is-active .stage-info h1,.stage-slide.is-active .stage-info h2{opacity:1;transform:none;} .stage-info h2 em,.stage-info h1 em{font-style:normal;color:#ff3d5f;} .stage-desc{color:var(--cine-ink-2);font-size:clamp(13.5px,1.2vw,16px);line-height:1.5;max-width:720px;margin:10px auto 0;opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1) .25s,transform .7s cubic-bezier(.16,1,.3,1) .25s;} .stage-slide.is-active .stage-desc{opacity:1;transform:none;} .stage-cta{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1) .43s,transform .7s cubic-bezier(.16,1,.3,1) .43s;margin-top:14px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;} .stage-slide.is-active .stage-cta{opacity:1;transform:none;} /* the outline CTA button needs to flip with the theme -- white outline reads fine on the dark stage but disappears on the light one, so give it a dark outline/text there instead. */ html[data-theme="light"] .stage-cta .btn-outline-light{border-color:rgba(18,18,20,.5);background:rgba(18,18,20,.05);color:#121214;} html[data-theme="light"] .stage-cta .btn-outline-light:hover{background:rgba(18,18,20,.1);border-color:#121214;} /* ---- Product slides: poster layout -- a huge bold uppercase title sits left, small description + key-point list + CTA pills underneath it, while the product image bleeds off the right edge, big, sitting just behind the text for a layered poster look. Collapses to a simple stacked column (title, text, image below, no overlap) on tablets/phones. Static image -- no continuous bob/sway, only the one-time entrance transition. ---- */ .stage-slide:not(.is-hero) .stage-row{width:100%;max-width:100%;padding:0 5vw;justify-content:center;align-items:flex-start;position:relative;} .stage-slide:not(.is-hero) .kicker{align-self:flex-start;} .stage-slide:not(.is-hero) .stage-info{text-align:left;margin:0;max-width:100%;} .stage-slide:not(.is-hero) .stage-info h2{font-size:clamp(28px,4.6vw,64px);text-transform:uppercase;line-height:1;letter-spacing:-.01em;} .stage-slide:not(.is-hero) .stage-desc{text-align:left;margin:16px 0 0;max-width:420px;} .stage-slide:not(.is-hero) .stage-cta{justify-content:flex-start;} .stage-main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;max-width:560px;margin:0;} .stage-visual{position:relative;z-index:1;height:min(34vh,300px);width:100%;max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:center;} .stage-glow{position:absolute;width:74%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(229,27,63,.32),transparent 70%);filter:blur(30px);opacity:0;transform:scale(.7);transition:opacity 1s cubic-bezier(.16,1,.3,1) .05s,transform 1s cubic-bezier(.16,1,.3,1) .05s;animation:glowPulse 4.5s ease-in-out infinite;} .stage-slide.is-active .stage-glow{opacity:1;transform:scale(1);} .stage-float{width:100%;height:100%;display:flex;align-items:center;justify-content:center;} .stage-tilt{width:100%;height:100%;display:flex;align-items:center;justify-content:center;} .stage-visual img{max-width:76%;max-height:84%;object-fit:contain;opacity:0;transform:scale(.76) rotate(-5deg) translateY(34px);filter:drop-shadow(0 30px 40px var(--cine-shadow)) blur(16px);transition:opacity .95s cubic-bezier(.16,1,.3,1) .12s,transform 1.05s cubic-bezier(.16,1,.3,1) .12s,filter .95s cubic-bezier(.16,1,.3,1) .12s;} .stage-slide.is-active .stage-visual img{opacity:1;transform:scale(1) rotate(0) translateY(0);filter:drop-shadow(0 30px 40px var(--cine-shadow)) blur(0);} .stage-visual.is-card img{border-radius:22px;box-shadow:0 30px 70px var(--cine-shadow);border:1px solid var(--cine-card-border);} @keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}} /* pending product -- no photo yet, so show a placeholder panel instead of the image, matching the same entrance animation. */ .stage-pending-box{width:100%;max-width:440px;height:70%;margin:0 auto;border-radius:26px;background:repeating-linear-gradient(135deg,var(--cine-glass-bg) 0 16px,transparent 16px 32px);border:1.5px dashed var(--cine-glass-border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--cine-ink-3);opacity:0;transform:scale(.9);transition:opacity .8s cubic-bezier(.16,1,.3,1) .12s,transform .8s cubic-bezier(.16,1,.3,1) .12s;} .stage-slide.is-active .stage-pending-box{opacity:1;transform:scale(1);} .stage-pending-box span:first-child{font-size:44px;} .stage-pending-box span:last-child{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;} /* plain bulleted key-point list -- no card boxes, just a red dot, bold label + colon, then the description running on in normal weight, exactly like a simple spec sheet. */ .stage-features{list-style:none;margin:0;padding:0;width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px;text-align:left;} .stage-features li{position:relative;padding-left:20px;font-size:13px;line-height:1.5;color:var(--cine-ink-2);opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--sd,.3s),transform .6s cubic-bezier(.16,1,.3,1) var(--sd,.3s);} .stage-slide.is-active .stage-features li{opacity:1;transform:none;} .stage-features li:before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#ff3d5f;} .stage-features li b{font-weight:1000;color:var(--cine-ink);} .stage-features li b:after{content:':\00a0';} .stage-features li:nth-child(1){--sd:.3s;} .stage-features li:nth-child(2){--sd:.38s;} .stage-features li:nth-child(3){--sd:.46s;} .stage-features li:nth-child(4){--sd:.54s;} /* ---- Last slide: a compact gallery grid (real installation photos), centered like the hero, with a button through to the full /gallery page. ---- */ .stage-slide.is-gallery .stage-row{align-items:center;text-align:center;} .stage-slide.is-gallery .stage-info{max-width:640px;} .stage-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:10px;width:100%;max-width:1040px;margin:16px auto 0;height:min(42vh,380px);} .stage-gallery-item{position:relative;border-radius:16px;overflow:hidden;background:var(--cine-glass-bg);opacity:0;transform:translateY(16px) scale(.96);transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--gd,.3s),transform .6s cubic-bezier(.16,1,.3,1) var(--gd,.3s);} .stage-slide.is-active .stage-gallery-item{opacity:1;transform:none;} .stage-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;} .stage-gallery-item span{position:absolute;left:8px;bottom:8px;background:rgba(10,10,12,.72);color:#fff;font-size:10.5px;font-weight:800;padding:5px 9px;border-radius:999px;backdrop-filter:blur(6px);} .stage-gallery-item.tall{grid-row:span 2;} .stage-gallery-item.wide{grid-column:span 2;} .stage-gallery-item:nth-child(1){--gd:.28s;} .stage-gallery-item:nth-child(2){--gd:.32s;} .stage-gallery-item:nth-child(3){--gd:.36s;} .stage-gallery-item:nth-child(4){--gd:.4s;} .stage-gallery-item:nth-child(5){--gd:.44s;} .stage-gallery-item:nth-child(6){--gd:.48s;} .stage-gallery-item:nth-child(7){--gd:.52s;} .stage-gallery-item:nth-child(8){--gd:.56s;} .stage-gallery-item:nth-child(9){--gd:.6s;} @media(max-width:1080px){ .stage-gallery-grid{grid-template-columns:repeat(3,1fr);height:min(36vh,340px);} } @media(max-width:720px){ .stage-gallery-grid{grid-template-columns:repeat(2,1fr);height:min(40vh,320px);gap:8px;} .stage-gallery-item.wide{grid-column:span 1;} .stage-gallery-item span{font-size:9.5px;padding:4px 7px;} } @media(min-width:1081px){ .stage-slide:not(.is-hero) .stage-row{padding:0 4vw 0 6vw;} .stage-main{max-width:clamp(380px,42vw,760px);} .stage-visual{position:absolute;right:2vw;top:50%;transform:translateY(-50%);height:min(84vh,760px);width:clamp(480px,50vw,1000px);max-width:none;margin:0;} .stage-visual img{max-width:96%;max-height:97%;} .stage-visual.is-card img{max-width:99%;} } @media(min-width:1600px){ .stage-slide:not(.is-hero) .stage-info h2{font-size:clamp(28px,4.6vw,76px);} } @media(max-width:640px){ .stage-features li{font-size:12px;} } /* ---- Progress: number + dots + hint ---- */ .stage-progress{position:absolute;left:0;right:0;bottom:128px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--cine-ink);pointer-events:none;} .stage-count{font-size:12px;letter-spacing:.18em;font-weight:900;color:var(--cine-ink-3);} .stage-count b{color:var(--cine-ink);} .stage-dots{display:flex;gap:6px;max-width:min(90vw,560px);flex-wrap:wrap;justify-content:center;} .stage-dots span{width:20px;height:3px;border-radius:99px;background:var(--cine-dot-bg);overflow:hidden;transition:background .3s ease;} .stage-dots span.active{background:linear-gradient(90deg,var(--red),#ff3d5f);} .stage-hint{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cine-ink-4);display:flex;align-items:center;gap:6px;} .stage-hint i{display:block;width:1px;height:16px;background:var(--cine-ink-4);animation:stageHintPulse 1.6s ease-in-out infinite;font-style:normal;} @keyframes stageHintPulse{0%,100%{opacity:.25}50%{opacity:1}} /* =========================== RIGHT-SIDE PREV/NEXT ============ */ .stage-nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:10px;} .stage-nav-btn{width:50px;height:50px;border-radius:50%;border:1px solid var(--cine-glass-border);background:var(--cine-glass-bg);backdrop-filter:blur(18px) saturate(160%);color:var(--cine-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 30px var(--cine-shadow);transition:transform .25s ease,background .25s ease,box-shadow .25s ease,opacity .25s ease,color .25s ease;} .stage-nav-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} .stage-nav-btn:hover:not(:disabled){transform:translateY(-3px);background:linear-gradient(135deg,var(--red),#ff3d5f);border-color:transparent;color:#fff;box-shadow:0 18px 40px rgba(229,27,63,.4);} .stage-nav-btn:disabled{opacity:.32;cursor:default;} @media(max-width:1080px){.stage-nav{right:14px;gap:8px;}.stage-nav-btn{width:44px;height:44px;}.stage-nav-btn svg{width:17px;height:17px;}} @media(max-width:720px){.stage-nav{right:10px;top:44%;}.stage-nav-btn{width:38px;height:38px;}} /* =========================== SITE CREDIT (footer is hidden on the home stage, so a small unobtrusive corner credit stands in for it) === */ .stage-credit{position:fixed;left:18px;bottom:18px;z-index:99;font-size:11px;font-weight:700;letter-spacing:.02em;opacity:.55;transition:opacity .2s ease;} .stage-credit a{color:var(--cine-ink-3);text-decoration:none;} .stage-credit:hover{opacity:.9;} .stage-copyright{position:fixed;right:18px;bottom:18px;z-index:99;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--cine-ink-3);opacity:.55;text-align:right;line-height:1.5;} @media(max-width:720px){.stage-credit,.stage-copyright{display:none;}} /* =========================== BOTTOM DOCK NAV =========================== */ .dock-wrap{position:fixed;left:0;right:0;bottom:18px;z-index:100;display:flex;justify-content:center;padding:0 16px;pointer-events:none;} .dock-bar{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:8px;border-radius:999px;background:var(--cine-glass-bg);border:1px solid var(--cine-glass-border);backdrop-filter:blur(22px) saturate(160%);box-shadow:0 20px 50px var(--cine-shadow);max-width:calc(100vw - 32px);transition:background .3s ease,border-color .3s ease;} .dock-brand{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;background:#fff;} .dock-brand img{width:78%;height:78%;object-fit:contain;} .dock-links{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;} .dock-links::-webkit-scrollbar{display:none;} .dock-links a,.dock-cat{color:var(--cine-ink-2);font-weight:800;font-size:13.5px;padding:10px 13px;border-radius:999px;white-space:nowrap;transition:background .2s ease,color .2s ease;border:0;background:transparent;cursor:pointer;flex:0 0 auto;font-family:inherit;} .dock-links a:hover,.dock-links a.active, .dock-cat:hover,.dock-cat.active{background:var(--cine-hover-bg);color:var(--cine-ink);} .dock-cat.active{background:linear-gradient(135deg,rgba(229,27,63,.35),rgba(229,27,63,.16));color:#fff;} .dock-cta{background:linear-gradient(135deg,var(--red),#ff3d5f);color:#fff;font-weight:900;font-size:13.5px;padding:11px 18px;border-radius:999px;white-space:nowrap;flex:0 0 auto;} .dock-more,.theme-toggle{width:42px;height:42px;border-radius:50%;border:0;background:var(--cine-hover-bg);color:var(--cine-ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:18px;cursor:pointer;} .theme-toggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .theme-toggle .icon-moon{display:none;} html[data-theme="light"] .theme-toggle .icon-sun{display:none;} html[data-theme="light"] .theme-toggle .icon-moon{display:block;} /* ---- Full-page blurred menu overlay (opened by the dock's ☰ button) ---- Same 3 big cards as the gallery-slide menu, reused verbatim (.menu-card), plus the auto-play on/off switch. */ .dock-menu-overlay{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;background:rgba(5,5,6,.72);backdrop-filter:blur(18px) saturate(140%);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;padding:24px;} .dock-menu-overlay.open{opacity:1;visibility:visible;transition:opacity .35s ease;} .dock-menu-inner{width:100%;max-width:820px;display:flex;flex-direction:column;align-items:center;gap:22px;transform:translateY(14px) scale(.98);transition:transform .4s cubic-bezier(.16,1,.3,1);} .dock-menu-overlay.open .dock-menu-inner{transform:translateY(0) scale(1);} .dock-menu-close{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--cine-glass-border);background:var(--cine-glass-bg);color:var(--cine-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .2s ease;} .dock-menu-close:hover{background:var(--cine-hover-bg);transform:rotate(90deg);} .dock-menu-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} .dock-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;} .dock-menu-grid .menu-card{opacity:1;transform:none;cursor:pointer;font-family:inherit;} .dock-menu-settings{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:999px;border:1px solid var(--cine-glass-border);background:var(--cine-glass-bg);color:var(--cine-ink-2);font-weight:800;font-size:13.5px;} .autoplay-toggle{width:46px;height:26px;border-radius:999px;border:1px solid var(--cine-glass-border);background:var(--cine-hover-bg);position:relative;cursor:pointer;flex:0 0 auto;transition:background .2s ease;} .autoplay-toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--cine-ink-4);transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s ease;} .autoplay-toggle.is-on{background:rgba(229,27,63,.35);border-color:rgba(229,27,63,.5);} .autoplay-toggle.is-on .autoplay-toggle-thumb{transform:translateX(20px);background:linear-gradient(135deg,#e51b3f,#ff365c);} @media(max-width:900px){.dock-menu-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:720px){.dock-menu-grid{grid-template-columns:1fr;}.dock-menu-close{top:16px;right:16px;}} /* =========================== THEME PICKER MODAL (first visit) ======= */ .theme-modal{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;padding:20px;} .theme-modal.show{opacity:1;visibility:visible;transition:opacity .4s ease;} .theme-modal-card{width:min(420px,92vw);background:var(--cine-glass-bg-strong);border:1px solid var(--cine-glass-border);border-radius:28px;padding:34px 28px;text-align:center;color:var(--cine-ink);box-shadow:0 30px 80px rgba(0,0,0,.5);backdrop-filter:blur(24px);transform:translateY(14px) scale(.97);transition:transform .4s ease;} .theme-modal.show .theme-modal-card{transform:none;} .theme-modal-card h3{margin:0 0 8px;font-size:22px;letter-spacing:-.02em;} .theme-modal-card p{margin:0 0 24px;color:var(--cine-ink-3);font-size:14px;} .theme-modal-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .theme-opt{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px;border-radius:20px;border:1px solid var(--cine-glass-border);background:transparent;color:var(--cine-ink);cursor:pointer;font-weight:800;font-size:14px;font-family:inherit;transition:transform .2s ease,border-color .2s ease,background .2s ease;} .theme-opt:hover{transform:translateY(-3px);border-color:var(--red);background:rgba(229,27,63,.08);} .theme-opt svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} @media(max-width:1080px){ /* Below 1081px the image is stacked in-flow right after the text (not absolutely positioned), so the big bottom margin reserved for the desktop CTA/progress-bar clearance would just shove the image down an extra ~130px for no reason -- collapse it back down here. */ .stage-row{max-height:calc(100% - 220px);margin-bottom:8px;order:2;} .stage-visual{order:1;} .stage-info{max-width:100%;margin:0 auto;} .stage-slide:not(.is-hero) .stage-info{margin:0;} .stage-main{max-width:600px;} .stage-progress{bottom:118px;} } @media(max-width:720px){ .dock-links a,.dock-cat{font-size:12.5px;padding:9px 11px;} .dock-cta{padding:9px 14px;font-size:12.5px;} .stage-row{max-height:calc(100% - 160px);margin-bottom:6px;} /* Image is order:1 (drawn first) now, so the top clearance from the fixed hamburger/scroll-progress bar belongs on the group as a whole, not on the row -- otherwise the image (now first) sits underneath them instead of the text. */ .stage-slide:not(.is-hero){padding-top:72px;gap:10px;} .stage-slide:not(.is-hero) .stage-row{padding:0 6vw;text-align:center;} .stage-main{align-items:center;} .stage-slide:not(.is-hero) .stage-info{align-items:center;text-align:center;} .stage-features{align-items:center;} .stage-features li{text-align:left;} .stage-slide:not(.is-hero) .stage-cta{justify-content:center;} .stage-visual{height:min(30vh,240px);margin-top:4px;} .stage-nav{display:none;} /* Mobile: the bottom dock collapses to just the hamburger, moved up to a small top-right button -- categories/theme/WhatsApp live inside the panel it opens instead of crowding a bottom bar. */ .dock-wrap{top:16px;bottom:auto;left:auto;right:16px;width:auto;justify-content:flex-end;padding:0;} .dock-bar{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;gap:0;} .dock-brand,.dock-links,.theme-toggle,.dock-cta{display:none;} .dock-more{width:46px;height:46px;background:var(--cine-glass-bg-strong);border:1px solid var(--cine-glass-border);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 14px 30px var(--cine-shadow);} /* Scroll progress: one compact row, tucked up near the top-left instead of a tall 3-line stack sitting over the bottom dock. */ .stage-progress{top:16px;bottom:auto;left:16px;right:74px;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;} .stage-count{font-size:10px;letter-spacing:.1em;white-space:nowrap;} .stage-dots{max-width:none;flex-wrap:nowrap;overflow:hidden;gap:4px;} .stage-dots span{width:12px;} .stage-hint{display:none;} } @media (max-height:760px){ .stage-row{max-height:calc(100% - 260px);gap:10px;} .stage-visual{height:min(26vh,210px)!important;margin:6px auto 0;} .stage-main{gap:12px;} .stage-info h1,.stage-info h2{font-size:clamp(20px,3vw,32px);margin-top:6px;} .stage-slide:not(.is-hero) .stage-info h2{font-size:clamp(22px,3.6vw,36px);} .stage-desc{font-size:12.5px;margin-top:6px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;} .stage-cta{margin-top:8px;} .stage-features li{font-size:11.5px;padding-left:16px;} .stage-features li:before{top:6px;width:6px;height:6px;} } @media (prefers-reduced-motion:reduce){ .stage-bg i,.stage-glow{animation:none!important;} } /* ========================================================================= Content overlay -- Gallery / Dealer Panel / Download each get their own full-screen view here, opened straight from the ☰ menu (no dedicated "page 17" anymore -- this works from wherever you are in the story). ========================================================================= */ .content-overlay{position:fixed;inset:0;z-index:9990;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;background:rgba(5,5,6,.88);backdrop-filter:blur(20px) saturate(140%);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;padding:90px 24px 60px;} .content-overlay.open{opacity:1;visibility:visible;transition:opacity .35s ease;} .content-overlay-inner{width:100%;max-width:1180px;display:flex;flex-direction:column;align-items:center;} /* Only one of the 3 sub-views shows at a time, whichever the ☰ menu opened. */ .gallery-sub-view{display:none;width:100%;flex-direction:column;align-items:center;gap:14px;} .content-overlay.show-gallery .gallery-sub-view[data-view="gallery"], .content-overlay.show-dealer .gallery-sub-view[data-view="dealer"], .content-overlay.show-download .gallery-sub-view[data-view="download"]{display:flex;} .gallery-back-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px 10px 14px;border-radius:999px;border:1px solid var(--cine-glass-border);background:var(--cine-glass-bg);color:var(--cine-ink);font-weight:900;font-size:13px;cursor:pointer;backdrop-filter:blur(10px);transition:background .2s ease,transform .2s ease;align-self:flex-start;} .gallery-back-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} .gallery-back-btn:hover{background:var(--cine-hover-bg);transform:translateX(-2px);} /* Compact grid used for the (now removed) inline preview is reused here too, but roomier -- it's the only thing on screen once opened. */ .gl-masonry.gl-masonry-compact{display:grid;grid-template-columns:repeat(9,1fr);grid-auto-rows:60px;grid-auto-flow:dense;gap:6px;width:100%;max-width:1180px;} .gl-masonry-compact .gl-tile{border-radius:10px;} .gl-masonry-compact .gl-tile.size-b,.gl-masonry-compact .gl-tile.size-d{grid-row:span 1;} .gl-masonry-compact .gl-tile.size-d{grid-column:span 2;} .gl-masonry-compact .gl-tile-label{display:none;} .gl-masonry-compact .gl-tile-zoom{width:24px;height:24px;top:5px;right:5px;} .gl-masonry-compact .gl-tile-zoom svg{width:11px;height:11px;} .gallery-sub-view[data-view="gallery"] .gl-masonry.gl-masonry-compact{grid-template-columns:repeat(8,1fr);grid-auto-rows:96px;gap:8px;max-width:1180px;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile{border-radius:16px;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile.size-b{grid-row:span 2;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile.size-d{grid-row:span 2;grid-column:span 2;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile-label{display:flex;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile-zoom{width:32px;height:32px;top:9px;right:9px;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile-zoom svg{width:15px;height:15px;} /* ---- Dealer view: a single centered "continue to login" preview card, styled like the rest of this page -- the real OTP flow lives on /dealer-panel (already reskinned in this same red theme). ---- */ .dealer-preview-card{width:100%;max-width:440px;padding:36px 30px;border-radius:26px;border:1px solid var(--cine-glass-border);background:var(--cine-glass-bg);backdrop-filter:blur(16px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;} .dealer-preview-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(229,27,63,.14);color:#ff3d5f;margin-bottom:6px;} .dealer-preview-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .dealer-preview-card h3{margin:0;font-size:20px;font-weight:950;color:var(--cine-ink);} .dealer-preview-card p{margin:0;font-size:13.5px;color:var(--cine-ink-3);line-height:1.55;} .dealer-preview-form{display:flex;gap:8px;width:100%;margin-top:10px;} .dealer-preview-form input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--cine-glass-border);background:var(--cine-glass-bg-strong);color:var(--cine-ink);font-size:14px;font-family:inherit;outline:0;} .dealer-preview-form input:focus{border-color:#e51b3f;} .dealer-preview-link{margin-top:6px;font-size:12.5px;font-weight:800;color:var(--cine-ink-3);text-decoration:none;} .dealer-preview-link:hover{color:var(--cine-ink);} /* ---- Download view: the same resource cards as /downloads, restyled onto this page's dark glass look and packed into one row so it fits. ---- */ .dl-resource-grid.dl-resource-grid-compact{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:1180px;} .dl-resource-grid-compact .dl-resource-card{padding:20px 16px;border-radius:18px;background:var(--cine-glass-bg);border:1px solid var(--cine-glass-border);box-shadow:none;gap:10px;} .dl-resource-grid-compact .dl-resource-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px var(--cine-shadow);} .dl-resource-grid-compact .dl-resource-card.is-ready{border-color:rgba(229,27,63,.35);} .dl-resource-grid-compact .dl-resource-icon{width:40px;height:40px;border-radius:12px;} .dl-resource-grid-compact .dl-resource-icon svg{width:19px;height:19px;} .dl-resource-grid-compact .dl-resource-tag{background:rgba(255,255,255,.08);color:var(--cine-ink-3);} .dl-resource-grid-compact .dl-resource-card.is-ready .dl-resource-tag{background:rgba(229,27,63,.14);color:#ff7a90;} .dl-resource-grid-compact .dl-resource-body h3{color:var(--cine-ink);font-size:15px;margin:8px 0 4px;} .dl-resource-grid-compact .dl-resource-body p{color:var(--cine-ink-3);font-size:12px;} .dl-resource-grid-compact .dl-resource-btn{font-size:12.5px;padding:10px 14px;} @media(max-width:1080px){ .gl-masonry.gl-masonry-compact{grid-template-columns:repeat(6,1fr);grid-auto-rows:64px;order:3;} .gallery-sub-view[data-view="gallery"] .gl-masonry.gl-masonry-compact{grid-template-columns:repeat(6,1fr);grid-auto-rows:66px;gap:6px;order:0;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile-label{display:none;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile-zoom{width:26px;height:26px;top:6px;right:6px;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile-zoom svg{width:12px;height:12px;} .dl-resource-grid.dl-resource-grid-compact{grid-template-columns:repeat(2,1fr);} } @media(max-width:720px){ .content-overlay{padding:74px 16px 40px;} .gl-masonry.gl-masonry-compact{grid-template-columns:repeat(4,1fr);grid-auto-rows:58px;gap:5px;max-width:420px;} .gl-masonry-compact .gl-tile:nth-child(n+13){display:none;} .gallery-sub-view[data-view="gallery"] .gl-masonry.gl-masonry-compact{grid-template-columns:repeat(3,1fr);grid-auto-rows:72px;gap:5px;max-width:420px;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile:nth-child(n+13){display:block;} /* full set once it's the only thing on screen */ .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile.size-b,.gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile.size-d{grid-row:span 1;} /* keep it dense at 3 columns */ .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile.size-d{grid-column:span 2;} .gallery-sub-view[data-view="gallery"] .gl-masonry-compact .gl-tile-label{display:none;} /* tiles are too small here for readable labels -- tap for the lightbox caption instead */ .dealer-preview-card{padding:28px 22px;} .dealer-preview-form{flex-direction:column;} .dl-resource-grid.dl-resource-grid-compact{grid-template-columns:repeat(2,1fr);gap:8px;} .dl-resource-grid-compact .dl-resource-card{padding:14px 12px;} .dl-resource-grid-compact .dl-resource-body p{display:none;} }