/* ========================================================= SUSHRUT STUDIOS — Electric Lime (themeable) Typography: Inter (display / body / mono) — Proxima/Helvetica-style grotesque Theming: data-accent (lime|cyan|magenta|amber) + data-theme (dark|light) on , driven by assets/js/theme.js — see the THEMING block near the end of this file. ========================================================= */ /* --- Tokens --- Theming model: - data-accent on selects the accent hue (lime | cyan | magenta | amber). - data-theme on selects the surface mode (dark default | light). - --accent : the vivid hue, used for FILLS / gradients / glows. - --accent-ink : the readable text/thin-outline color. Equals --accent in dark mode (so dark is byte-for-byte unchanged); darkens to --accent-deep in light mode where vivid lime/cyan is illegible. - *-rgb tokens let the hardcoded glow/shadow alphas follow the active accent. ========================================================= */ :root { /* Accent palette (lime — default). Overridden by [data-accent="…"]. --accent-deep : readable-as-TEXT on white (AA) for light mode. --accent-mid : vibrant-but-grounded tone for light-mode PARTICLES. */ --accent: #3fd6c8; --accent-2: #2f9fd6; --accent-rgb: 63, 214, 200; --accent-2-rgb: 47, 159, 214; --accent-deep: #0e6d68; --accent-mid: #159b93; --accent-mid-rgb: 21, 155, 147; --bg: #05080b; --bg-elev: #080d11; --bg-card: rgba(0, 0, 0, 0.5); --bg-card-hov: rgba(var(--accent-rgb), 0.03); --border: rgba(var(--accent-rgb), 0.1); --border-strong:rgba(var(--accent-rgb), 0.25); --accent-soft: rgba(var(--accent-rgb), 0.08); --btn-line: rgba(var(--accent-rgb), 0.30); /* secondary-button frame (dim) */ --accent-glow: rgba(var(--accent-rgb), 0.5); --accent-ink: var(--accent); /* text/outline — dark mode = vivid accent */ --accent-2-ink: var(--accent-2); /* Surface helpers (theme-aware so light mode can re-tint them) */ --surface-glass: rgba(5, 8, 11, 0.85); /* sticky header / overlays */ --surface-deep: rgba(0, 0, 0, 0.4); /* deep insets, CTA wash */ /* Particle field — read by particles.js / ambient.js. In dark mode the vivid accent glows on near-black; in light mode it switches to a strong dark green so grains stay clearly visible on the pale surface. */ --particle-color: var(--accent); /* hex, particles.js fill + glow */ --particle-rgb: var(--accent-rgb); /* "r,g,b", ambient.js */ --particle-trail: rgba(5, 5, 5, 0.55); /* home canvas fade */ --text: #ffffff; --text-muted: #aeb9ae; /* brightened for readability — ~9:1 on --bg (was 5.8:1) */ --text-dim: #96a296; /* ~7:1 — small/footer text */ --text-mid: #c4cfc4; --danger: #ff5a5a; --container: 1300px; --pad-x: clamp(20px, 5vw, 50px); --section-py: clamp(64px, 9vw, 110px); --t-fast: 200ms ease; --t-base: 300ms ease; --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } img, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* Visible keyboard focus (keyboard only — won't show on mouse click) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Screen-reader-only — visually hidden, still in the a11y tree */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip-to-content link — appears only on keyboard focus */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: #000; padding: 10px 18px; font-family: var(--font-body); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; transition: top var(--t-base); } .skip-link:focus { top: 12px; } /* --- Base --- */ /* overflow-x:hidden must be on too — with it only on , absolutely-positioned decorative elements (.energy-wave glows, the home .particle-canvas, over-wide hero words) still stretch the root layout viewport, so phones render ~30-60px wider than the screen (360→420). */ html { overflow-x: hidden; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 17px; line-height: 1.75; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Numeric displays — Inter has tabular figures; line them up. */ .stat-value, .stat-num, .case-metric .m-num, .m-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- Background rays + waves on hero / page-hero --- */ .bg-effects { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .ray { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; /* centre the 2px bar exactly on the 50% line */ background: linear-gradient(180deg, var(--accent), transparent 72%); opacity: 0.18; transform-origin: top center; /* every ray pivots from the SAME point (50%, 0) */ filter: blur(0.5px); animation: rayPulse 4s ease-in-out infinite; } /* All rays share the top-centre pivot and fan out in symmetric ± pairs, so the cone emanates from dead centre and spreads evenly to both sides. NB: use :nth-of-type, NOT :nth-child — .bg-effects' first child is the