/* ═══════════════════════════════════════════════════════════════════════════ MINETLY — base.css Foundation layer for the "RENDER ROOM+" build. Implements: art-direction.md §1 (tokens), §2 (type), §3.3 (global page rules), §7 (a11y primitives), §9.2 (.cta), and the paper-room inversion used by §7 and §9. CONTRACT NOTES FOR EVERY OTHER IMPLEMENTER ------------------------------------------ 1. Every value in §1 is a custom property below. Do not hardcode a hex or a px for anything §1 covers. If §1 does not define it, it does not exist. 2. Tier is published on the root element as . The document ships with data-tier="stills" so the page is correct with JavaScript disabled; js/app.js upgrades it to "standard" or "cinema". CINEMA-only treatments are therefore written as [data-tier="cinema"] ... 3. Paper rooms (§7 ledger, §9 FAQ) use .room-paper. That class REBINDS the ink-room colour tokens to their paper equivalents, so a component written once against --text-mid / --ink-panel / --spot-gold / --edge / --ring is automatically legal on paper (colour law §1.16.3). See "PAPER ROOMS". 4. Breakpoints are literal px because CSS cannot use custom properties in a media query. Only two exist: 768px (body size step, §1.9) and 900px (mobile/desktop, §3.1 and §5.10 `narrow`). ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 1. DESIGN TOKENS — transcribed verbatim from art-direction.md §1 ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ═══ 1.1 INK ROOMS — the page's default ground ═══════════════════════ */ --ink-void: #050507; /* page background. Not #000: keeps the darkest particle values off the clip point. */ --ink-deep: #0A0A12; /* section bands */ --ink-panel: #0F0F16; /* cards, tiles, accordion bodies */ --ink-raised: #15151F; /* hovered card, input fields */ --indigo-deep: #1E1B4B; /* OTT Secondary — 3D fog + gradients */ --indigo-mid: #312E81; /* OTT Border — edge lighting */ --violet-beam: #6D5BF5; /* the projector beam in the hero shader */ /* ═══ 1.2 PAPER ROOMS — §7 ledger and §9 FAQ ONLY ═════════════════════ */ --paper: #FAFAF9; /* paper-room ground */ --paper-raised: #FFFFFF; /* card inside a paper room */ --paper-ink: #0C0A09; /* body + headings on paper — 19.3:1 */ --paper-stone: #57534E; /* secondary copy on paper — 7.3:1 */ --paper-dim: #78716C; /* labels, ✕ glyphs — 4.9:1, ≥16px only */ --paper-rule: #D6D3D1; /* hairlines on paper */ --paper-rule-faint:#EAE8E6; --gold-ink: #7E22CE; /* accent on paper (was gold ink). ~6.9:1 on paper */ /* ═══ 1.3 TYPE COLOURS (ink rooms) ════════════════════════════════════ */ --text-hi: #F8FAFC; /* OTT Foreground. ~18.9:1 on --ink-void */ --text-mid: #C8CEDA; /* ~11.5:1 */ --text-low: #94A3B8; /* OTT Muted Foreground. ~7.5:1 — FLOOR for any real copy. Never go below this. */ --text-faint: #5A6376; /* DECORATIVE ONLY (ghost numerals). ~3.3:1. NEVER body copy, never a label. */ /* ═══ 1.4 ACTION — red means "do the thing" ═══════════════════════════ */ --rec-red: #E11D48; /* OTT Accent. #FFFFFF on it = 4.70:1 */ --rec-red-hot: #FF2D55; /* hover / gradient top stop only */ --rec-red-deep: #9F1239; /* pressed */ --on-rec: #FFFFFF; /* OTT "On Accent" — mandated */ /* ═══ 1.5 VALUE — gold means "this is worth money" ════════════════════ */ --spot-gold: #F0ABFC; /* ACCENT: offer labels, icons (was gold; name kept). ~11:1 */ --proof-grad: linear-gradient(115deg, #F0ABFC 0%, #A78BFA 48%, #67E8F9 100%); /* proof numerals: the AI "aurora" (owner, 2026-09-23) */ --proof-solid: #C4B5FD; /* proof numerals where a gradient cannot clip. ~11:1 on --ink-void */ --spot-gold-lift: #F5D0FE; /* gradient top stop only (was gold) */ --spot-gold-dim: #A78BFA; /* accent rules and borders (was gold) */ --on-gold: #0F0F14; /* the ONLY text colour permitted on gold */ /* ═══ 1.6 STRUCTURE ═══════════════════════════════════════════════════ */ --edge: rgba(255,255,255,0.08); /* Short Video Editor Border */ --edge-strong: rgba(255,255,255,0.16); --edge-lit: rgba(109,91,245,0.35); --ring: #FFFFFF; /* OTT Ring — focus is white */ --scrim-h: linear-gradient(to right, rgba(5,5,7,.92) 0%, rgba(5,5,7,.78) 46%, rgba(5,5,7,.30) 100%); --scrim-v: linear-gradient(to top, rgba(5,5,7,.95) 0%, rgba(5,5,7,.70) 55%, rgba(5,5,7,.10) 100%); /* ═══ 1.7 GRADIENTS — max 3 stops, dark grounds only ══════════════════ */ --grad-beam: radial-gradient(60% 50% at 50% 0%, #1E1B4B 0%, #0A0A12 55%, #050507 100%); --grad-cta: linear-gradient(135deg, #FF2D55 0%, #E11D48 55%, #9F1239 100%); --grad-price: linear-gradient(180deg, #F5D0FE 0%, #F0ABFC 55%, #C084FC 100%); /* was gold: owner, 2026-09-29 — accent is now aurora pink-lilac */ --grad-text: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.72) 100%); /* ═══ 1.8 TYPE FAMILIES ═══════════════════════════════════════════════ */ --font-display: 'Bebas Neue', 'Bebas Fallback R', 'Bebas Fallback A', 'Arial Narrow', 'Roboto Condensed', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-tamil: 'Anek Tamil', 'Noto Sans Tamil', sans-serif; /* ═══ 1.9 TYPE SCALE ══════════════════════════════════════════════════ */ --t-hero: clamp(52px, 13.5vw, 128px); /* Bebas 400 */ --t-h2: clamp(36px, 7.0vw, 72px); /* Bebas 400 */ --t-statement: clamp(30px, 5.5vw, 56px); /* Bebas 400 */ --t-answer: clamp(30px, 8.0vw, 56px); /* Bebas 400 — inverted FAQ */ --t-stat: clamp(44px, 11.0vw, 88px); /* Bebas 400 */ --t-price: clamp(56px, 14.0vw, 104px); /* Bebas 400 */ --t-price-mid: clamp(28px, 6.0vw, 40px); /* Bebas 400 — bars, inline */ --t-tilenum: clamp(38px, 9.0vw, 64px); /* Bebas 400 — spec tiles */ --t-ghostnum: clamp(48px, 12.0vw, 96px); /* Bebas 400 — card watermark */ --t-h3: clamp(19px, 2.4vw, 24px); /* Inter 600 */ --t-lead: clamp(18px, 2.2vw, 22px); /* Inter 400 */ --t-body: 17px; /* Inter 400 — 18px at ≥768px */ --t-micro: 14px; /* Inter 400/500 */ --t-label: 12px; /* Inter 500 UPPERCASE */ --t-tamil-eye: 14px; /* Anek Tamil 700 */ --t-btn: 16px; /* Inter 600 UPPERCASE */ /* ═══ 1.10 TRACKING + LEADING ═════════════════════════════════════════ */ --tr-display: 0.5px; --lh-hero: 0.86; --tr-h3: -0.5px; --lh-h2: 0.92; --tr-label: 1.2px; --lh-statement: 1.00; --tr-btn: 1.0px; --lh-h3: 1.25; --tr-num: 1.0px; --lh-body: 1.65; --tr-mark: 2.0px; --lh-lead: 1.55; --lh-label: 1.20; --lh-num: 0.90; /* ═══ 1.11 SPACING (4px base) ═════════════════════════════════════════ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10:128px; --section-y: clamp(72px, 12vh, 136px); /* vertical rhythm, every section */ --gutter: clamp(20px, 5vw, 64px); /* page side padding — never < 20px*/ --maxw: 1200px; /* content column cap */ --measure: 46ch; /* paragraph cap */ --bar-top: 56px; --bar-bottom: 68px; /* ═══ 1.12 RADII ══════════════════════════════════════════════════════ */ --r-0: 0px; --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; /* ═══ 1.13 ELEVATION (dimensional-layering, 4 levels) ═════════════════ */ --e1: 0 1px 2px rgba(0,0,0,.40); --e2: 0 4px 12px rgba(0,0,0,.45); --e3: 0 12px 32px rgba(0,0,0,.50); --e4: 0 28px 64px rgba(0,0,0,.55); --pe1: 0 1px 2px rgba(12,10,9,.05); /* paper rooms only */ --pe2: 0 4px 12px rgba(12,10,9,.07); --pe3: 0 12px 32px rgba(12,10,9,.09); --glow-cta: 0 10px 40px rgba(255,45,85,.35); /* hero + offer CTA only */ --glow-price: 0 0 48px rgba(192,132,252,.26); /* the price numeral only (violet) */ /* ═══ 1.14 MOTION ═════════════════════════════════════════════════════ */ --mo-instant: 120ms; /* press feedback */ --mo-quick: 200ms; /* hover, accordion marker */ --mo-base: 350ms; /* reveals — gsap Scroll Reveal / Subtle */ --mo-slow: 500ms; /* card stagger — gsap Scroll Reveal / Standard */ --mo-scene: 900ms; /* canvas state cross-fade */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* ≈ power2.out */ --ease-soft: cubic-bezier(0.33, 0.00, 0.20, 1); /* ≈ power1.inOut */ --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1); /* ═══ 1.14b MOBILE MOTION — design/mobile-motion.md §A ═══════════════ */ --mo-exit: 200ms; /* departures, always --ease-in */ --mo-card: 600ms; /* card focus-pull, roll */ --mo-mask: 650ms; /* one word's mask rise */ --mo-clip: 800ms; /* clip-path image develop */ --mo-spring: 560ms; /* anything on --ease-spring */ --mo-shimmer: 900ms; /* one-shot CTA light pass */ --mo-stagger: 80ms; /* §8.2, as a token */ --mo-word: 28ms; /* between words on one line */ --mo-line: 90ms; /* between lines */ --mo-d1: 8px; --mo-d2: 12px; --mo-d3: 24px; --mo-d4: 40px; --mo-depth: 18svh; /* parallax range multiplier */ --mo-scale-in: 0.94; /* card focus-pull start */ --mo-scale-press: 0.97; /* §8.6 */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* ≈ expo.out */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* departures */ --ease-spring: var(--ease-out); /* fallback, see below */ /* ═══ 1.15 Z-INDEX — the complete ladder. No other values exist. ══════ */ --z-canvas: 0; /* #stage, fixed, pointer-events:none */ --z-scrim: 1; /* gradient scrims + vignette over the canvas */ --z-content: 2; /* every
*/ --z-raised: 3; /* the offer card, the certificate sticker */ --z-bar-top: 60; --z-bar-bot: 70; --z-skip: 100; /* skip-to-content link when focused */ } /* ζ = 0.72 damped spring, 3.8% overshoot, sampled at 23 points. */ @supports (transition-timing-function: linear(0, 1)){ :root{ --ease-spring: linear(0 0%, 0.049 5%, 0.166 9%, 0.313 14%, 0.466 18%, 0.608 23%, 0.73 27%, 0.83 32%, 0.906 36%, 0.962 41%, 0.999 45%, 1.022 50%, 1.034 55%, 1.038 59%, 1.037 64%, 1.033 68%, 1.028 73%, 1.022 77%, 1.017 82%, 1.012 86%, 1.008 91%, 1.004 95%, 1 100%); } } /* §1.9 — "17px Inter 400 — 18px at ≥768px". The token itself steps. */ @media (min-width: 768px){ :root{ --t-body: 18px; } } /* ═══════════════════════════════════════════════════════════════════════════ 2. RESET ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after{ box-sizing: border-box; } /* Zero the UA margins. Rhythm comes from the primitives, never from defaults. */ html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend, hr{ margin: 0; } ul[class], ol[class]{ list-style: none; padding: 0; } /* §3.3 — global page rules, verbatim */ html{ touch-action: manipulation; overscroll-behavior-y: contain; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* ux: Focus Not Obscured (Minimum) — offset both sticky bars */ scroll-padding-top: 64px; scroll-padding-bottom: 80px; scroll-behavior: smooth; background-color: var(--ink-void); color-scheme: dark; } body{ min-height: 100%; background-color: var(--ink-void); color: var(--text-mid); font-family: var(--font-body); font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* §3.2 — clear the mobile-only sticky bottom bar. Scoped to the same breakpoint the bar itself lives at; see the 900px block below. */ padding-bottom: calc(var(--bar-bottom) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 900px){ body{ padding-bottom: 0; } /* no bottom bar exists at this width */ } /* Media defaults — explicit width/height still required on every (§8) */ img, picture, video, canvas, svg{ display: block; max-width: 100%; } img, video{ height: auto; } /* Form inheritance */ input, button, textarea, select{ font: inherit; color: inherit; letter-spacing: inherit; } button{ background: none; border: 0; } textarea{ resize: vertical; } a{ color: inherit; text-decoration: none; } /* Long words must not force a horizontal scrollbar at 360px */ h1, h2, h3, p, li, summary, dd, dt{ overflow-wrap: break-word; } hr{ border: 0; border-top: 1px solid var(--edge); } ::selection{ background: var(--rec-red); color: var(--on-rec); } /* ═══════════════════════════════════════════════════════════════════════════ 3. BASE TYPOGRAPHY — §2 families, §1.9 scale, §1.10 tracking + leading ═══════════════════════════════════════════════════════════════════════════ */ /* Bebas Neue has NO lowercase and NO Tamil coverage. Display elements are text-transform: uppercase so a stray lowercase source string still sets. Any Tamil or sentence-case display line must use .tamil / --font-tamil. */ h1, h2, .t-statement, .t-answer, .t-stat, .t-price, .t-price-mid, .t-tilenum, .t-ghostnum{ font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tr-display); color: var(--text-hi); } h1{ font-size: var(--t-hero); line-height: var(--lh-hero); } h2{ font-size: var(--t-h2); line-height: var(--lh-h2); } .t-statement{ font-size: var(--t-statement); line-height: var(--lh-statement); } .t-answer { font-size: var(--t-answer); line-height: var(--lh-statement); } .t-stat { font-size: var(--t-stat); line-height: var(--lh-num); letter-spacing: var(--tr-num); } .t-price { font-size: var(--t-price); line-height: var(--lh-num); letter-spacing: var(--tr-num); } .t-price-mid{ font-size: var(--t-price-mid); line-height: var(--lh-num); letter-spacing: var(--tr-num); } .t-tilenum { font-size: var(--t-tilenum); line-height: var(--lh-num); letter-spacing: var(--tr-num); } .t-ghostnum { font-size: var(--t-ghostnum); line-height: var(--lh-num); letter-spacing: var(--tr-num); color: var(--text-faint); } /* DECORATIVE ONLY — §1.3 */ h3, .t-h3{ font-family: var(--font-body); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--text-hi); } .lead{ font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--text-mid); max-width: var(--measure); } .micro{ font-size: var(--t-micro); line-height: var(--lh-body); color: var(--text-low); } .label{ font-family: var(--font-body); font-weight: 500; font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-low); } /* §2 — Tamil. Anek Tamil 700 carries every Tamil string and every sentence-case display line, because Bebas covers neither. :lang(ta) catches correctly-marked runs; .tamil is the explicit hook. */ .tamil, :lang(ta){ font-family: var(--font-tamil); font-weight: 700; text-transform: none; /* never uppercase Tamil */ } .t-tamil-eye{ font-size: var(--t-tamil-eye); line-height: var(--lh-label); } /* §2 — "font-variant-numeric: tabular-nums on every numeral". */ .u-num, .t-stat, .t-price, .t-price-mid, .t-tilenum, .t-ghostnum, .cta, input[type="tel"]{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* §1.7 --grad-text, with a solid fallback so contrast never depends on clip */ .u-grad-text{ color: var(--text-hi); } @supports (-webkit-background-clip: text) or (background-clip: text){ .u-grad-text{ background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } } .u-measure{ max-width: var(--measure); } /* ═══════════════════════════════════════════════════════════════════════════ 4. LAYOUT PRIMITIVES ═══════════════════════════════════════════════════════════════════════════ */ /* The page container + gutter. --gutter never resolves below 20px (§1.11). */ .wrap{ width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } /* A full-bleed band whose inner content is still capped at --maxw. */ .band{ position: relative; z-index: var(--z-content); background-color: var(--ink-void); } .band--deep { background-color: var(--ink-deep); } .band--panel{ background-color: var(--ink-panel); } /* Section rhythm. Every
gets this; §1 hero overrides it. */ .section{ position: relative; z-index: var(--z-content); padding-block: var(--section-y); } .section > .wrap{ position: relative; } /* Stack rhythm helpers, spacing scale only. */ .stack > * + *{ margin-top: var(--s-4); } .stack-sm > * + *{ margin-top: var(--s-2); } .stack-lg > * + *{ margin-top: var(--s-6); } .stack-xl > * + *{ margin-top: var(--s-7); } /* The fixed WebGL stage sits under everything. It is fixed to the viewport and therefore contributes 0 CLS by construction (§5.0). */ #stage{ position: fixed; inset: 0; z-index: var(--z-canvas); width: 100%; height: 100%; pointer-events: none; background-color: var(--ink-void); } /* §5.4 vignette / scrim plate over the canvas, under all content. */ .scrim{ position: absolute; inset: 0; z-index: var(--z-scrim); pointer-events: none; } .scrim--h{ background-image: var(--scrim-h); } .scrim--v{ background-image: var(--scrim-v); } /* §5.4 letterbox cue — 1px rules, no fake black bars, no timecode. */ .rule{ border: 0; border-top: 1px solid var(--edge); } .rule--strong{ border-top-color: var(--edge-strong); } /* §5.11 — the STILLS hero plate. critical.css declares the same rule with a DOCUMENT-relative url() because it is inlined in ; this stylesheet- relative one loads later and wins. Both resolve to the same file. The same WebP is the §10 background — one download, two jobs. */ .hero__still{ background-image: url("../assets/hero-still.webp"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; /* 60s / 2%-travel drift. Free, and the global reduced-motion rule in §8 collapses it to a settled frame rather than a moving one. */ animation: still-drift 60s var(--ease-soft) infinite alternate; } @keyframes still-drift{ from{ background-position: 49% 51%; } to { background-position: 51% 49%; } } /* The canvas replaces it on the tiers that have one. swapToStatic() (§5.2) sets data-tier back to "stills", which reveals this plate again. */ [data-tier="cinema"] .hero__still, [data-tier="standard"] .hero__still{ opacity: 0; } /* ═══════════════════════════════════════════════════════════════════════════ 5. PAPER ROOMS — §7 ledger and §9 FAQ ONLY The inversion is done by REBINDING tokens, not by re-authoring components. This is what makes colour law §1.16.3 unbreakable: --spot-gold inside a paper room resolves to --gold-ink (5.3:1), never #F5B301 (1.6:1). ═══════════════════════════════════════════════════════════════════════════ */ .room-paper{ /* grounds */ --ink-void: var(--paper); --ink-deep: var(--paper); --ink-panel: var(--paper-raised); --ink-raised: var(--paper-raised); /* type */ --text-hi: var(--paper-ink); --text-mid: var(--paper-ink); --text-low: var(--paper-stone); --text-faint: var(--paper-dim); /* value colour — law 3: the only gold permitted on light */ --spot-gold: var(--gold-ink); --spot-gold-lift: var(--gold-ink); --spot-gold-dim: var(--gold-ink); /* structure */ --edge: var(--paper-rule); --edge-strong: var(--paper-rule); --edge-lit: var(--paper-rule); /* focus: #FFFFFF ring is invisible on #FAFAF9. ux: Focus Appearance also states `outline: 2px solid currentColor`; on paper that is --paper-ink. */ --ring: var(--paper-ink); /* elevation */ --e1: var(--pe1); --e2: var(--pe2); --e3: var(--pe3); --e4: var(--pe3); /* no --pe4 exists; --pe3 is the nearest token */ position: relative; z-index: var(--z-content); background-color: var(--paper); color: var(--paper-ink); /* §7/§9: the canvas is hard-clipped behind an opaque paper ground */ isolation: isolate; } .room-paper .rule{ border-top-color: var(--paper-rule); } .room-paper .rule--faint{ border-top-color: var(--paper-rule-faint); } .room-paper ::selection{ background: var(--gold-ink); color: var(--paper-raised); } /* ═══════════════════════════════════════════════════════════════════════════ 6. THE CTA — §9.2, one label, one look, seven surfaces Every CTA on this page is an pointing at the Razorpay placeholder. Never a