/* RingSafe — shared design system. Vanilla CSS, dark + signal-green theme. Self-hosted fonts (no third-party network calls). */ /* ── Self-hosted fonts ─────────────────────────────────────────────── */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; /* variable axis */ font-display: swap; src: url('../fonts/2026/Geist-variable.woff2') format('woff2-variations'), url('../fonts/2026/Geist-variable.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/2026/GeistMono-variable.woff2') format('woff2-variations'), url('../fonts/2026/GeistMono-variable.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/2026/InstrumentSerif-Regular.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/2026/InstrumentSerif-Italic.woff2') format('woff2'); } /* ── Theme tokens (hardcoded — dark + signal-green) ────────────────── 2026-05-11: "Option A" lift — bumped bg from #06080a → #0c1014 (slight elevation, page no longer feels flat); panel/elevated layers bumped proportionally so cards float visually; --ink-dim and --ink-mute lifted from 62%/42% opacity → 78%/62% so muted body text passes WCAG AA at smaller sizes. Accents (green/cyan) unchanged. 2026-05-23: --ink-mute lifted 62% → 70% for tiny-text legibility on stat labels / eyebrows. Light-mode tokens added under [data-theme="light"] for the optional nav toggle (default stays dark for brand). */ :root{ --bg:#0f1318; --bg-soft:#141a21; --panel:#191f27; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17); --ink:#e8ece9; --ink-dim:rgba(232,236,233,.78); --ink-mute:rgba(232,236,233,.70); --accent:#9dff5e; --accent-2:#5ee7ff; --warn:#ff7a59; --violet:#c8b6ff; --shadow-primary:0 0 0 1px rgba(157,255,94,.4), 0 14px 40px -12px rgba(157,255,94,.45); --dot-glow:0 0 0 4px rgba(157,255,94,.18); --serif:"Instrument Serif", ui-serif, Georgia, serif; --sans:"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Type scale (1.25 minor third ratio, fluid via clamp) ────────── Use these tokens for any new heading/body styling instead of raw px/rem. Per-template overrides will still win on specificity for existing surfaces; new components inherit the scale automatically. */ --text-2xs: clamp(11px, 0.69rem, 12px); /* captions, micro labels */ --text-xs: clamp(12px, 0.81rem, 13px); /* small UI text, chips */ --text-sm: clamp(13px, 0.88rem, 14px); /* secondary body */ --text-base: clamp(15px, 1rem, 16px); /* default body (16px mobile-min) */ --text-md: clamp(16px, 1.13rem, 18px); /* lede paragraph */ --text-lg: clamp(18px, 1.31rem, 21px); /* h4 / large body */ --text-xl: clamp(22px, 1.7vw + 14px, 27px); /* h3 */ --text-2xl: clamp(28px, 2.5vw + 16px, 36px); /* h2 — section heads */ --text-3xl: clamp(36px, 4vw + 18px, 52px); /* h1 — page heads */ --text-display:clamp(48px, 6vw + 20px, 80px); /* hero display */ /* Weights */ --w-regular:400; --w-medium:500; --w-semi:600; --w-bold:700; /* Line heights */ --lh-display:1.02; --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65; /* Letter spacing */ --tracking-tight:-0.025em; --tracking-snug:-0.015em; --tracking-normal:0; --tracking-wide:0.06em; --tracking-wider:0.12em; --tracking-widest:0.16em; } /* Light-mode token overrides. Activated by the nav toggle (sets data-theme="light" on ) or by prefers-color-scheme when no choice is stored. Accent darkens to keep ≥4.5:1 contrast on white backgrounds. IMPORTANT: this block also overrides LEGACY tokens from style.css (--white, --muted, --faint, --border, --cyan, --card, --bg2, --green, --cyan-dim, --cyan-glow, --glow). Legacy templates use those names literally for text/border/card colors, so without these overrides every non-2026 page renders broken in light mode (e.g., white text on white). Each override mirrors the dark token's semantic role rather than its literal colour, so cascade behaviour stays predictable. */ :root[data-theme="light"]{ /* 2026 tokens */ --bg:#fafbfa; --bg-soft:#f1f3f2; --panel:#ffffff; --line:rgba(10,12,14,.10); --line-2:rgba(10,12,14,.16); --ink:#0a0c0e; --ink-dim:rgba(10,12,14,.74); --ink-mute:rgba(10,12,14,.60); --accent:#00873d; --accent-2:#0075a6; --warn:#c93d18; --violet:#5a3ee0; --shadow-primary:0 0 0 1px rgba(0,135,61,.35), 0 12px 32px -14px rgba(0,135,61,.45); --dot-glow:0 0 0 4px rgba(0,135,61,.15); /* Legacy tokens (style.css) — semantic flip for light mode */ --bg2:#f1f3f2; --white:#0a0c0e; /* legacy uses --white as text colour on dark bg → flip to dark on light */ --muted:rgba(10,12,14,.66); /* mid-grey muted text */ --faint:rgba(10,12,14,.50); /* even fainter, e.g. timestamps */ --border:rgba(10,12,14,.12); /* subtle dark border (legacy is cyan-tinted) */ --cyan:#0075a6; /* deepened brand cyan for AA on white */ --cyan-dim:rgba(0,117,166,.10); --cyan-glow:rgba(0,117,166,.18); --card:rgba(10,12,14,.025); /* very subtle dark tint over white panel */ --green:#00873d; /* deepened brand green */ --glow:0 0 22px rgba(0,117,166,.14); /* softer ambient glow */ --brand-cyan:#00557a; /* darker logo-cyan variant for light bg use */ --brand-amber:#b56a06; --brand-red:#b91c1c; --brand-violet:#7c3aed; --violet-dim:rgba(124,58,237,.10); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{overflow-x:hidden} ::selection{background:var(--accent);color:var(--bg)} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0} img{max-width:100%;display:block} /* Keyboard focus — visible everywhere, no ring on mouse clicks */ :focus{outline:none} :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } .btn:focus-visible, .nav-links a:focus-visible, .nav-logo:focus-visible{ outline-offset:3px; border-radius:999px; } /* ── Layout ────────────────────────────────────────────────────────── */ .wrap{max-width:1320px;margin:0 auto;padding:0 32px} @media (max-width:720px){ .wrap{padding:0 20px} } .eyebrow{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)} .eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent); margin-right:8px;vertical-align:1px;box-shadow:var(--dot-glow)} .display{font-family:var(--sans);font-weight:500;letter-spacing:-.035em;line-height:.95;margin:0} .display em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--ink)} .display .mute{color:var(--ink-mute)} .body-lg{font-size:var(--text-md);line-height:var(--lh-relaxed);color:var(--ink-dim);max-width:56ch} .body-md{font-size:var(--text-base);line-height:var(--lh-relaxed);color:var(--ink-dim)} .body-sm{font-size:var(--text-sm);line-height:var(--lh-normal);color:var(--ink-dim)} .caption{font-size:var(--text-xs);line-height:var(--lh-normal);color:var(--ink-mute)} /* ── Base typography — applies to bare h1-h6 / p / li / small wherever templates haven't defined their own. Per-template heading styles continue to win on specificity, so this is a safety net for the long tail (news posts, academy modules, default WP content). */ html{font-size:16px} h1,h2,h3,h4,h5,h6{ font-family:var(--sans); color:var(--ink); margin:0 0 .5em; } h1{font-size:var(--text-3xl);font-weight:var(--w-medium);letter-spacing:var(--tracking-tight);line-height:var(--lh-tight)} h2{font-size:var(--text-2xl);font-weight:var(--w-medium);letter-spacing:var(--tracking-snug);line-height:var(--lh-snug)} h3{font-size:var(--text-xl);font-weight:var(--w-medium);letter-spacing:var(--tracking-snug);line-height:var(--lh-snug)} h4{font-size:var(--text-lg);font-weight:var(--w-semi);letter-spacing:var(--tracking-snug);line-height:var(--lh-snug)} h5{font-size:var(--text-md);font-weight:var(--w-semi);line-height:var(--lh-normal)} h6{font-size:var(--text-base);font-weight:var(--w-semi);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:var(--lh-normal)} /* Italic serif accent — works in any heading via */ h1 em,h2 em,h3 em,h4 em{font-family:var(--serif);font-style:italic;font-weight:var(--w-regular);letter-spacing:var(--tracking-snug)} /* Bare paragraphs / lists / table cells inherit a sensible default */ p,li,td,th,dd,dt{font-size:inherit;line-height:var(--lh-normal)} small{font-size:var(--text-sm)} .hr{height:1px;background:var(--line);width:100%} /* ── Buttons ───────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px; font-weight:500;font-size:14px;letter-spacing:-.005em;border:1px solid transparent; transition:transform .18s ease, background .18s ease, border-color .18s ease; cursor:pointer;white-space:nowrap;text-decoration:none} .btn-primary{background:var(--accent);color:var(--bg); box-shadow:var(--shadow-primary)} .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.08)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.02)} .btn .arr{display:inline-block;transition:transform .2s ease} .btn:hover .arr{transform:translateX(3px)} /* ── Chip ──────────────────────────────────────────────────────────── */ .chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px; border:1px solid var(--line-2);border-radius:999px;font:500 11px/1 var(--mono); letter-spacing:.04em;color:var(--ink-dim);background:rgba(255,255,255,.02)} .chip .dot-sm{width:5px;height:5px;border-radius:50%;background:var(--accent)} /* ── Section header pattern ────────────────────────────────────────── */ .sec-head{display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:start;padding-bottom:56px} @media (max-width:900px){ .sec-head{grid-template-columns:1fr;gap:18px;padding-bottom:40px} } .sec-head .num{font:500 12px/1 var(--mono);letter-spacing:.15em;color:var(--ink-mute);padding-top:12px} .sec-head h2{margin:0;font-size:clamp(36px,5vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1.02} .sec-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400} .sec-head .lede{margin-top:18px;font-size:17px;line-height:1.55;color:var(--ink-dim);max-width:54ch} /* ── Nav ───────────────────────────────────────────────────────────── */ .nav{position:fixed;top:14px;left:0;right:0;z-index:50;pointer-events:none} .nav::before{content:"";position:fixed;top:0;left:0;right:0;height:88px;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(6,8,10,.92) 0%, rgba(6,8,10,.78) 60%, rgba(6,8,10,0) 100%); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%)} .nav-inner{pointer-events:auto;display:flex;align-items:center;justify-content:space-between; height:54px;padding:0 14px 0 18px;border:1px solid var(--line-2);border-radius:999px; background:rgba(8,11,13,.94); -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%); box-shadow:0 10px 32px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset} @supports not (backdrop-filter: blur(1px)){ .nav-inner{background:rgba(8,11,13,.98)} } .nav-logo{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.015em;font-size:15px;color:var(--ink)} /* ── Brand tagline tricolor — "Cybersecurity for INDIA" ──────────────── Bigger font + solid bright colors instead of subtle gradients so the colour pops at the small monospace size. INDIA gets per-letter flag colours (alternating saffron / white / green) which read MUCH better than horizontal-stripe gradient at this point size. Used in both .nav-logo .tag and .ftr-tag. */ .tag-cyber{ color:var(--accent) !important; -webkit-text-fill-color:var(--accent); font-weight:600; letter-spacing:.14em; } .tag-india{ font-weight:800; font-size:1.12em; letter-spacing:.06em; margin-left:3px; display:inline-block; } .tag-india .l1{color:#FF9933 !important;-webkit-text-fill-color:#FF9933;} .tag-india .l2{color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF;} .tag-india .l3{color:#138808 !important;-webkit-text-fill-color:#138808;} .tag-india .l4{color:#FF9933 !important;-webkit-text-fill-color:#FF9933;} .tag-india .l5{color:#138808 !important;-webkit-text-fill-color:#138808;} @media (prefers-reduced-motion:no-preference){ .tag-india span{transition:filter .25s ease} .nav-logo:hover .tag-india span, .ftr:hover .tag-india span{filter:drop-shadow(0 0 4px currentColor)} } .nav-links{display:flex;gap:4px} .nav-links a{padding:8px 12px;font-size:13.5px;color:var(--ink-dim);border-radius:999px} .nav-links a:hover, .nav-links a.active{color:var(--ink);background:rgba(255,255,255,.04)} @media (max-width:880px){ .nav-links{display:none} } /* ── Inner page header ─────────────────────────────────────────────── */ .phead{padding:112px 0 44px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate} .phead .glow{position:absolute;inset:-30% -10% auto -10%;height:140%; background:radial-gradient(50% 50% at 50% 30%, rgba(157,255,94,.08), transparent 70%); pointer-events:none;filter:blur(20px)} /* Atmospheric mesh backdrop (added 2026-05-24): anchored right, masked to fade out over the left text column. Dark mode shows it; light mode keeps a hint. */ .phead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:url(../img/hero-mesh.webp) right center/cover no-repeat;opacity:.55; -webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 72%); mask-image:linear-gradient(90deg,transparent 20%,#000 72%)} :root[data-theme="light"] .phead::after{opacity:.16} .phead .crumbs{font:500 11.5px/1 var(--mono);letter-spacing:.08em;color:var(--ink-mute);margin-bottom:18px;position:relative} .phead .crumbs a{color:var(--ink-mute)} .phead .crumbs a:hover{color:var(--ink)} .phead .crumbs .sep{margin:0 10px;opacity:.5} .phead h1{margin:0;font-size:clamp(34px,4.4vw,60px);font-weight:500;letter-spacing:-.035em;line-height:1.04;max-width:22ch;position:relative} .phead h1 em{font-family:var(--serif);font-style:italic;font-weight:400} .phead h1 .mute{color:var(--ink-mute)} .phead .lede{margin-top:16px;font-size:16px;line-height:1.55;color:var(--ink-dim);max-width:60ch;position:relative} @media (max-width:760px){ .phead{padding:96px 0 36px} .phead h1{font-size:clamp(30px,7.4vw,42px)} .phead .lede{font-size:15px} } /* ── Page-head modifiers (used by all-modules etc.) ────────────────── */ .phead.phead-tight{padding:104px 0 36px} .phead.phead-tight .crumbs{margin-bottom:24px} .phead.phead-tight h1{font-size:clamp(40px,6vw,80px);line-height:1} .phead.phead-tight .lede{margin-top:20px;font-size:17px} /* ── CTA band ──────────────────────────────────────────────────────── */ .cta-band{padding:90px 0;border-top:1px solid var(--line);position:relative;isolation:isolate; background:var(--bg) url('../img/cta-band-bg.webp') center center / cover no-repeat} /* Homepage featured-card hover — CSP-safe replacement for inline onmouseover/onmouseout */ .rs-feat-card:hover{border-color:var(--accent,#9dff5e)!important;transform:translateY(-3px)} .cta-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(6,8,10,.55) 0%,rgba(6,8,10,.35) 50%,rgba(6,8,10,.55) 100%)} .cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative} .cta-band h3{font-size:clamp(32px,4.5vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:0;max-width:18ch} .cta-band h3 em{font-family:var(--serif);font-style:italic;font-weight:400} .cta-band .cta-buttons{display:flex;gap:12px;flex-wrap:wrap} .cta-band.cta-tight{padding:80px 0} .cta-band.cta-tight h3{font-size:clamp(30px,4vw,48px)} @media (max-width:760px){ .cta-band{background-position:center center;background-size:cover} .cta-band::before{background:linear-gradient(180deg,rgba(6,8,10,.7) 0%,rgba(6,8,10,.55) 50%,rgba(6,8,10,.7) 100%)} } /* ── Stats band ────────────────────────────────────────────────────── */ .stats-band{padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} @media (max-width:760px){ .stat-grid{grid-template-columns:repeat(2,1fr);gap:32px 0} } .stat{padding:0 28px;border-left:1px solid var(--line)} .stat:first-child{border-left:0;padding-left:0} .stat .num{font-size:clamp(48px,5.4vw,76px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink)} .stat .num em{font-family:var(--serif);font-style:italic;font-weight:400} .stat .lbl{margin-top:14px;color:var(--ink-dim);font-size:14px;line-height:1.5;max-width:24ch} /* ── Accessibility: skip link ──────────────────────────────────────── */ .skip-link{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden; background:var(--accent);color:var(--bg);padding:10px 16px;font:500 13px/1 var(--sans); border-radius:0 0 12px 0;z-index:9999} .skip-link:focus,.skip-link:focus-visible{left:0;width:auto;height:auto;overflow:visible;outline:0} /* ── Footer ────────────────────────────────────────────────────────── */ .ftr{padding:60px 0 50px;color:var(--ink-mute);font-size:13px} .ftr-top{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)} @media (max-width:760px){ .ftr-top{grid-template-columns:1fr} } .ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media (max-width:760px){ .ftr-cols{grid-template-columns:repeat(2,1fr)} } .ftr h6{margin:0 0 14px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--ink);text-transform:uppercase} .ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .ftr ul a{color:var(--ink-mute)} .ftr ul a:hover{color:var(--ink)} .ftr-bot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:32px;flex-wrap:wrap} .ftr-mark{display:flex;align-items:center;gap:12px;color:var(--ink)} /* ── Card ──────────────────────────────────────────────────────────── */ .card{border:1px solid var(--line);border-radius:14px;padding:24px;background:rgba(255,255,255,.012); transition:background .2s, border-color .2s} .card:hover{background:rgba(255,255,255,.025);border-color:var(--line-2)} /* ── Reduced-motion: pause sweeps, marquees, blips, pulses ─────────── */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Theme toggle button (nav) ─────────────────────────────────────── */ .rs-theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;margin:0 8px 0 6px;border-radius:50%; background:transparent;border:1px solid var(--line-2);color:var(--ink-dim); cursor:pointer;transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; } .rs-theme-toggle:hover{color:var(--ink);border-color:var(--ink-mute);background:rgba(255,255,255,.04)} .rs-theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .rs-theme-toggle .rs-theme-icon{display:none} .rs-theme-toggle .rs-theme-icon-moon{display:block} :root[data-theme="light"] .rs-theme-toggle .rs-theme-icon-moon{display:none} :root[data-theme="light"] .rs-theme-toggle .rs-theme-icon-sun{display:block} :root[data-theme="light"] .rs-theme-toggle:hover{background:rgba(0,0,0,.04)} /* ── Light-mode polish: nav chrome + section backgrounds ───────────── */ :root[data-theme="light"] .nav::before{ background:linear-gradient(180deg, rgba(250,251,250,.94) 0%, rgba(250,251,250,.80) 60%, rgba(250,251,250,0) 100%); } :root[data-theme="light"] .nav-inner{ background:rgba(255,255,255,.94); box-shadow:0 10px 32px -16px rgba(10,12,14,.18), 0 0 0 1px rgba(10,12,14,.04) inset; } @supports not (backdrop-filter: blur(1px)){ :root[data-theme="light"] .nav-inner{background:rgba(255,255,255,.99)} } :root[data-theme="light"] .nav-links a:hover, :root[data-theme="light"] .nav-links a.active{background:rgba(10,12,14,.05)} :root[data-theme="light"] .btn-ghost:hover{border-color:rgba(10,12,14,.28);background:rgba(10,12,14,.04)} :root[data-theme="light"] .card{background:rgba(10,12,14,.02)} :root[data-theme="light"] .card:hover{background:rgba(10,12,14,.04)} :root[data-theme="light"] .chip{background:rgba(10,12,14,.03)} :root[data-theme="light"] ::selection{background:var(--accent);color:#fff} :root[data-theme="light"] .phead .glow{ background:radial-gradient(50% 50% at 50% 30%, rgba(0,135,61,.10), transparent 70%); } :root[data-theme="light"] .cta-band::before{ background:linear-gradient(180deg,rgba(250,251,250,.55) 0%,rgba(250,251,250,.35) 50%,rgba(250,251,250,.55) 100%); } @media (max-width:760px){ :root[data-theme="light"] .cta-band::before{ background:linear-gradient(180deg,rgba(250,251,250,.78) 0%,rgba(250,251,250,.62) 50%,rgba(250,251,250,.78) 100%); } } /* India-flag tag stays brand-accurate in light mode (white letter gets a thin border for visibility) */ :root[data-theme="light"] .tag-cyber{color:var(--accent) !important;-webkit-text-fill-color:var(--accent)} :root[data-theme="light"] .tag-india .l2{color:#0a0c0e !important;-webkit-text-fill-color:#0a0c0e} /* Mobile: keep toggle visible but slightly tighter */ @media (max-width:520px){ .rs-theme-toggle{width:36px;height:36px;margin:0 4px} } /* ── Light-mode dropdown + mega-menu overrides ───────────────────────── The inline