/* AboutAll.in — Editorial design system Light is default. Dark is opt-in via data-theme="dark" on . Tokens defined here override per-page :root because attribute selectors are more specific. */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700;6..72,800&family=Roboto:wght@300;400;500;600;700&display=swap'); /* ============ LIGHT (default) ============ */ :root, :root[data-theme="light"] { /* Surface colors */ --bg: #F8FAFC; /* page bg — soft slate-50 */ --surface: #FFFFFF; /* cards, panels */ --surface-2: #F1F5F9; /* secondary surfaces */ --border: #E2E8F0; /* borders, dividers */ --border-strong: #CBD5E1; /* Text colors */ --text: #020617; /* slate-950 — body */ --text-soft: #1E293B; /* slate-800 — secondary body */ --muted: #475569; /* slate-600 — meta, captions */ --muted-2: #64748B; /* slate-500 — subtle */ /* Brand */ --primary: #0F172A; /* trust navy — primary brand */ --primary-soft: #1E3A8A; /* deeper royal blue */ --accent: #1E40AF; /* link / CTA */ --accent-soft: #DBEAFE; /* tinted accent bg */ --highlight: #CA8A04; /* premium gold — used sparingly */ --highlight-soft: #FEF3C7; /* Status */ --success: #15803D; --success-soft: #DCFCE7; --warn: #B45309; --warn-soft: #FEF3C7; --error: #B91C1C; --error-soft: #FEE2E2; /* Code / inline */ --code-bg: #F1F5F9; --code-fg: #0F172A; /* Tints used in legacy pages */ --subtle: #F1F5F9; /* Effects */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04); --ring: 0 0 0 3px rgba(30, 64, 175, 0.18); /* Typography */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light; } /* ============ DARK ============ */ :root[data-theme="dark"] { /* Surface colors */ --bg: #0B0F1A; --surface: #111826; --surface-2: #0F1623; --border: #1F2A3D; --border-strong: #2C3A52; /* Text colors */ --text: #F1F5F9; --text-soft: #CBD5E1; --muted: #94A3B8; --muted-2: #64748B; /* Brand */ --primary: #E2E8F0; /* invert: light primary on dark */ --primary-soft: #BFDBFE; --accent: #93C5FD; --accent-soft: #1E3A8A; --highlight: #FBBF24; --highlight-soft: #422006; /* Status */ --success: #4ADE80; --success-soft: #14532D; --warn: #FBBF24; --warn-soft: #422006; --error: #F87171; --error-soft: #450A0A; /* Code */ --code-bg: #1E293B; --code-fg: #E2E8F0; --subtle: #0F1623; /* Effects */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); --ring: 0 0 0 3px rgba(147, 197, 253, 0.25); color-scheme: dark; } /* Auto-respect OS preference if user has not chosen */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0B0F1A; --surface: #111826; --surface-2: #0F1623; --border: #1F2A3D; --border-strong: #2C3A52; --text: #F1F5F9; --text-soft: #CBD5E1; --muted: #94A3B8; --muted-2: #64748B; --primary: #E2E8F0; --primary-soft: #BFDBFE; --accent: #93C5FD; --accent-soft: #1E3A8A; --highlight: #FBBF24; --highlight-soft: #422006; --code-bg: #1E293B; --code-fg: #E2E8F0; --subtle: #0F1623; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); --ring: 0 0 0 3px rgba(147, 197, 253, 0.25); color-scheme: dark; } } /* ============ Base reset (gentle, complements per-page CSS) ============ */ html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-feature-settings: "kern", "liga", "ss01"; font-variant-numeric: tabular-nums; transition: background-color 200ms ease, color 200ms ease; } a { color: var(--accent); } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; } /* Selection colour */ ::selection { background: var(--highlight-soft); color: var(--text); } /* Reduce motion when user prefers it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============ Theme toggle button ============ */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease; flex-shrink: 0; } .theme-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .theme-toggle:active { transform: scale(0.96); } .theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ============ Light-mode adapter ============ The pages were authored with a dark-only palette and contain hardcoded colours (#0d1117, #1a2236, #8892a4 etc.). When the user picks light, we force the most common patterns onto the editorial light palette so we do not need to edit each of 39 pages individually. */ /* Decorative dark backdrops are hidden in light mode */ :root[data-theme="light"] .bg-grid, :root[data-theme="light"] .bg-glow { display: none !important; } /* Body / wrapper / section text */ :root[data-theme="light"] body, :root[data-theme="light"] .wrapper, :root[data-theme="light"] main, :root[data-theme="light"] article, :root[data-theme="light"] section { background: transparent; color: var(--text); } :root[data-theme="light"] body { background: var(--bg); } /* Paragraph / list / table body — dark grey on white meets WCAG AA */ :root[data-theme="light"] p, :root[data-theme="light"] li, :root[data-theme="light"] td, :root[data-theme="light"] dd, :root[data-theme="light"] blockquote { color: var(--text-soft); } /* Strong / b emphasis stays full-strength black */ :root[data-theme="light"] strong, :root[data-theme="light"] b, :root[data-theme="light"] dt { color: var(--text); } /* Headings */ :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3, :root[data-theme="light"] h4, :root[data-theme="light"] h5, :root[data-theme="light"] h6 { color: var(--text); font-family: var(--font-display); } :root[data-theme="light"] h1 span, :root[data-theme="light"] h2 span { color: var(--accent); } /* Meta / byline / breadcrumb / footer text — softer grey */ :root[data-theme="light"] .meta, :root[data-theme="light"] .breadcrumb, :root[data-theme="light"] .article-meta, :root[data-theme="light"] .article-meta span, :root[data-theme="light"] footer, :root[data-theme="light"] footer span, :root[data-theme="light"] footer a { color: var(--muted); } /* Surfaces: the cards and side panels written with hardcoded #0d1117 */ :root[data-theme="light"] .surface, :root[data-theme="light"] table, :root[data-theme="light"] .toc, :root[data-theme="light"] .callout, :root[data-theme="light"] .article-card, :root[data-theme="light"] .hub-card, :root[data-theme="light"] .tool-card, :root[data-theme="light"] .ai-tool-card, :root[data-theme="light"] .recent-card, :root[data-theme="light"] .bio-card, :root[data-theme="light"] .team-card, :root[data-theme="light"] .value-card, :root[data-theme="light"] .contact-card, :root[data-theme="light"] .faq-section details { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); } :root[data-theme="light"] table thead th, :root[data-theme="light"] table th { background: var(--surface-2); color: var(--text); } :root[data-theme="light"] table td { border-top-color: var(--border); color: var(--text-soft); } /* Callouts / breadcrumbs / sources */ :root[data-theme="light"] .callout { background: var(--accent-soft); border-color: rgba(30, 64, 175, 0.18); color: var(--text-soft); } :root[data-theme="light"] .callout p { color: var(--text-soft); } :root[data-theme="light"] .callout-warn { background: var(--warn-soft); border-color: rgba(180, 83, 9, 0.25); } :root[data-theme="light"] .callout-warn p { color: #78350F; } /* CTA box */ :root[data-theme="light"] .cta-box { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--highlight-soft) 100%); border-color: rgba(30, 64, 175, 0.18); color: var(--text); } :root[data-theme="light"] .cta-box h3 { color: var(--text); } :root[data-theme="light"] .cta-box p { color: var(--text-soft); } :root[data-theme="light"] .cta-btn { background: var(--primary); color: #FFFFFF; } :root[data-theme="light"] .cta-btn.outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); } /* Borders, dividers */ :root[data-theme="light"] hr, :root[data-theme="light"] .divider { border-color: var(--border); } :root[data-theme="light"] nav { border-bottom-color: var(--border); } :root[data-theme="light"] footer { border-top-color: var(--border); } /* Nav-link hover and active */ :root[data-theme="light"] .nav-links a { color: var(--text-soft); } :root[data-theme="light"] .nav-links a:hover, :root[data-theme="light"] .nav-links a.active { color: var(--accent); } :root[data-theme="light"] .logo-text { color: var(--text); } :root[data-theme="light"] .logo-text span { color: var(--accent); } /* Hero gradient title (homepage) — switch to a darker gradient on light */ :root[data-theme="light"] .hero-title .line2 { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--highlight) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } :root[data-theme="light"] .hero-eyebrow { background: var(--accent-soft); border-color: rgba(30, 64, 175, 0.25); color: var(--accent); } /* Tags and chips — readable on light */ :root[data-theme="light"] .tag, :root[data-theme="light"] .cat, :root[data-theme="light"] .page-eyebrow { background: var(--accent-soft); border-color: rgba(30, 64, 175, 0.18); color: var(--accent); } :root[data-theme="light"] .tag-india { background: #DCFCE7; color: #166534; border-color: #BBF7D0; } :root[data-theme="light"] .tag-gulf { background: #FCE7F3; color: #9F1239; border-color: #FBCFE8; } :root[data-theme="light"] .tag-general { background: #FEF3C7; color: #92400E; border-color: #FDE68A; } /* Author byline card */ :root[data-theme="light"] .article-byline { background: var(--accent-soft) !important; border-color: rgba(30, 64, 175, 0.20) !important; } :root[data-theme="light"] .article-byline a { color: var(--accent) !important; } /* FAQ details summary */ :root[data-theme="light"] .faq-section details { background: var(--surface) !important; border-color: var(--border) !important; } :root[data-theme="light"] .faq-section summary { color: var(--text) !important; } :root[data-theme="light"] .faq-section details > div { color: var(--text-soft) !important; } /* Sources section */ :root[data-theme="light"] section a[rel*="nofollow"] { color: var(--accent) !important; } /* Hub cards on homepage have dark borders + shadows tuned for dark. Soften shadows on light. */ :root[data-theme="light"] .hub-card { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); } :root[data-theme="light"] .hub-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); } /* Logo mark — invert from gradient to solid in light mode for clarity */ :root[data-theme="light"] .logo-mark { background: linear-gradient(135deg, var(--primary), var(--accent)) !important; color: #FFFFFF; } /* Inline form / button */ :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: var(--surface); border: 1px solid var(--border); color: var(--text); } :root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } /* Utility classes still available */ .surface { background: var(--surface) !important; } .surface-2 { background: var(--surface-2) !important; } .text-soft { color: var(--text-soft) !important; } .text-muted { color: var(--muted) !important; } .border-soft { border-color: var(--border) !important; } /* ============ Dark-mode polish ============ The pages already render OK in dark, but the editorial fonts we added need to be applied in dark too. Plus, ensure decorative bg-grid stays visible. */ :root[data-theme="dark"] body { background: var(--bg); color: var(--text); } :root[data-theme="dark"] .article-byline { background: rgba(99, 102, 241, 0.08) !important; border-color: rgba(99, 102, 241, 0.25) !important; } /* ============ Dark-mode chip color overrides ============ Some inline chip colours were darkened for light-mode contrast. In dark mode, we lighten them via !important attribute selectors. */ :root[data-theme="dark"] [style*="color:#15803D"] { color: #4ADE80 !important; } :root[data-theme="dark"] [style*="color:#B45309"] { color: #FBBF24 !important; } :root[data-theme="dark"] [style*="color:#9D174D"] { color: #F472B6 !important; } :root[data-theme="dark"] [style*="color:#0E7490"] { color: #67E8F9 !important; } :root[data-theme="dark"] [style*="color:#5B21B6"] { color: #C4B5FD !important; } /* ============ Nav layout: ensure toggle is visible ============ */ nav .nav-links { gap: 16px; } @media (max-width: 600px) { nav .nav-links { gap: 10px; flex-wrap: wrap; } .theme-toggle { width: 32px; height: 32px; } .theme-toggle svg { width: 14px; height: 14px; } }