/* ========================================================================== Nirmaan AI — Desktop / landscape presentation layer Active only when deck.js sets (wide + landscape, ≥900px). Renders window.DECK as 16:9 one-slide-at-a-time landscape slides. Desktop slides carry the .card class, so every theme + chart-animation rule in styles.css applies unchanged — this file only handles STRUCTURE, sizing, and the desktop chrome. Fully inert on mobile (all rules are scoped to the desktop stage or the data-mode attribute). ========================================================================== */ /* ---- Neutralize the mobile shell in desktop mode -------------------------- */ /* Hide the phone reel + its chrome; the desktop stage replaces them. */ :root[data-mode="desktop"] .reel, :root[data-mode="desktop"] .topbar, :root[data-mode="desktop"] .hint, :root[data-mode="desktop"] .tapzone, :root[data-mode="desktop"] .kbd-hint { display: none !important; } /* Full-bleed the app: no phone frame, notch, or status dots. */ :root[data-mode="desktop"] body { background: radial-gradient(120% 120% at 50% 0%, #12233b 0%, #070d16 70%); display: block; } :root[data-mode="desktop"] #app { width: 100%; max-width: none; height: 100dvh; border-radius: 0; box-shadow: none; background: var(--near-black); } :root[data-mode="desktop"] #app::before, :root[data-mode="desktop"] #app::after { display: none !important; } /* ---- Stage: header strip + slide area + controls -------------------------- */ .stage { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--near-black); } .d-topbar { position: relative; z-index: 5; flex: none; padding: 16px clamp(40px, 5vw, 96px) 10px; display: flex; flex-direction: column; gap: 10px; } .d-progress { display: flex; gap: 5px; } .d-seg { flex: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; cursor: pointer; transition: background .3s; } .d-seg > i { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 3px; transition: width .4s var(--ease-out); } .d-seg.done > i, .d-seg.active > i { width: 100%; } .d-seg.active { background: rgba(232, 51, 10, .25); } .d-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .d-brand { height: 26px; width: auto; opacity: .92; } .d-counter { font-family: var(--font-head); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: rgba(255, 255, 255, .5); } /* ---- Slides area ---------------------------------------------------------- */ .slides { position: relative; flex: 1; min-height: 0; } /* Each slide reuses .card. Override its reel geometry; only the active slide is shown, cross-fading between slides. */ .card.dslide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; scroll-snap-align: none; overflow: hidden; gap: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: none; transition: opacity .45s var(--ease); } .card.dslide.active { opacity: 1; visibility: visible; pointer-events: auto; } /* Split: text pane (left) + visual pane (right). */ .card.dslide.split { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); align-items: center; gap: clamp(28px, 4vw, 72px); padding: clamp(40px, 6vh, 84px) clamp(48px, 6vw, 110px); } /* Statement: centered single column (cover / vision / close). */ .card.dslide.dstate { padding: clamp(40px, 7vh, 100px) clamp(48px, 8vw, 150px); gap: clamp(16px, 3vh, 28px); } .card.dslide.dstate > * { max-width: min(940px, 82vw); } /* Panes */ .card.dslide .slide-content, .card.dslide .slide-visual { min-width: 0; max-height: 100%; overflow: auto; scrollbar-width: none; } .card.dslide .slide-content::-webkit-scrollbar, .card.dslide .slide-visual::-webkit-scrollbar { display: none; } .card.dslide .slide-content { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2.2vh, 22px); max-width: 640px; } .card.dslide .slide-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2vh, 20px); } /* ---- Desktop typography: read as a presentation, not a blown-up phone ----- */ .card.dslide .headline { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.12; } .card.dslide.dstate .headline { font-size: clamp(30px, 4vw, 56px); } .card.dslide .hero-line { font-size: clamp(19px, 2.3vw, 30px); } .card.dslide .sub { font-size: clamp(15px, 1.5vw, 21px); } .card.dslide .body { font-size: clamp(14px, 1.35vw, 19px); } .card.dslide .tagline { font-size: clamp(17px, 2vw, 26px); } .card.dslide .big-num { font-size: clamp(54px, 7vw, 92px); } .card.dslide .bn-v { font-size: clamp(28px, 3vw, 40px); } .card.dslide .bn-k { font-size: clamp(12px, 1vw, 15px); } /* ---- Visual sizing inside the right pane ---------------------------------- */ .card.dslide .slide-visual > * { width: 100%; } .card.dslide .slide-visual img { max-width: 100%; } .card.dslide .viz-img img { width: auto; max-width: 100%; max-height: 56dvh; margin: 0 auto; } .card.dslide .viz-img.viz-phone img { max-height: 58dvh; } .card.dslide .figure img { max-width: 74%; } .card.dslide .loop5-wrap svg { max-width: 528px; max-height: 69.6dvh; } .card.dslide .bars { height: clamp(200px, 38dvh, 340px); } .card.dslide .rm-chart { height: clamp(200px, 38dvh, 340px); } .card.dslide .donut { width: clamp(200px, 22vw, 300px); } .card.dslide .quadrant svg { max-height: 60dvh; } /* Business segments become a 2×2 grid in the wide pane. */ .card.dslide .segments { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Donut legend can breathe on a wide pane. */ .card.dslide .donut-legend { max-width: 360px; } /* ---- Navigation controls -------------------------------------------------- */ .d-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(12, 18, 28, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, opacity .2s, transform .2s; } .d-nav:hover { background: rgba(232, 51, 10, .85); transform: translateY(-50%) scale(1.06); } .d-nav.prev { left: clamp(12px, 2vw, 30px); } .d-nav.next { right: clamp(12px, 2vw, 30px); } .d-nav:disabled { opacity: 0; pointer-events: none; } .d-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 999px; background: rgba(12, 18, 28, .6); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px; color: rgba(255, 255, 255, .65); transition: opacity .8s ease; } .d-hint.fade { opacity: 0; } .d-hint kbd { font-family: var(--font-head); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 5px; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); } /* ---- Soft gate as a centered card (not a full-width phone sheet) ---------- */ :root[data-mode="desktop"] .gate { align-items: center; padding: clamp(40px, 8vh, 96px); } :root[data-mode="desktop"] .gate > * { width: 100%; max-width: 460px; } :root[data-mode="desktop"] .gate h2 { font-size: clamp(24px, 2.4vw, 32px); } /* ---- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .card.dslide { transition: none !important; } .d-nav, .d-hint, .d-seg, .d-seg > i { transition: none !important; } }