/** * BKGS Theme System * Two modes: dark (default) and light. * * Color theory rationale: * Dark: deep blue-black (#05050a) base, warm off-white text, vivid red (#e8232a) * accent. High contrast, cinematic, premium gaming feel. * Light: warm parchment (#f7f4f0) base, dark warm-toned text (#1a1612), * same vivid red. Warm neutrals are analogous to red's warmth — * the palette stays harmonious without feeling washed-out. * * All color tokens are CSS custom properties. Fonts live here too so * every page shares a single source of truth. * * Usage: Apply data-theme="dark"|"light" to . * A tiny inline script in each page sets it before first paint * to prevent flash of unstyled content (FOUC). */ /* ═══════════════════════════════════════════════════════════════ FONTS (theme-independent) ═══════════════════════════════════════════════════════════════ */ :root { --sans: 'Bebas Neue', sans-serif; --raj: 'Rajdhani', sans-serif; --dm: 'DM Sans', sans-serif; /* Brand red — unchanged in both modes */ --red: #e8232a; --red2: #c01a20; } /* ═══════════════════════════════════════════════════════════════ DARK MODE (default — applied when html has no data-theme or data-theme="dark") ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #05050a; --bg2: #0a0a14; --bg3: #181824; /* Text */ --white: #f0eeea; --muted: rgba(240, 238, 234, 0.68); /* Brand tints */ --red-dim: rgba(232, 35, 42, 0.14); --red-mid: rgba(232, 35, 42, 0.45); --red-glow: rgba(232, 35, 42, 0.25); /* Nav */ --nav-bg: rgba(5, 5, 10, 0.94); /* Borders */ --border: rgba(255, 255, 255, 0.06); --border-subtle: rgba(255, 255, 255, 0.05); --border-faint: rgba(255, 255, 255, 0.025); /* Card surfaces */ --surface-overlay: rgba(255, 255, 255, 0.08); --surface-overlay-sm: rgba(255, 255, 255, 0.04); --card-hover-bg: #241618; /* Image overlays (on full-bleed image cards) */ --overlay-heavy: rgba(0, 0, 0, 0.55); --overlay-medium: rgba(0, 0, 0, 0.42); /* Glassmorphism bg (CTA overlays) */ --bg-glass: rgba(5, 5, 10, 0.70); /* Hero gradient intermediate stops */ --hero-mid-75: rgba(5, 5, 10, 0.75); --hero-mid-55: rgba(5, 5, 10, 0.55); --hero-mid-30: rgba(5, 5, 10, 0.30); --hero-mid-50: rgba(5, 5, 10, 0.50); --hero-mid-60: rgba(5, 5, 10, 0.60); } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; /* Surfaces — warm parchment tones (analogous to red's warmth) */ --bg: #f7f4f0; --bg2: #ede9e3; --bg3: #e2dbd2; /* Text — warm near-black, never pure #000 */ --white: #1a1612; --muted: rgba(26, 22, 18, 0.60); /* Brand tints — same hue, adjusted opacity for light bg */ --red-dim: rgba(232, 35, 42, 0.10); --red-mid: rgba(232, 35, 42, 0.38); --red-glow: rgba(232, 35, 42, 0.15); /* Nav */ --nav-bg: rgba(247, 244, 240, 0.96); /* Borders */ --border: rgba(26, 22, 18, 0.08); --border-subtle: rgba(26, 22, 18, 0.07); --border-faint: rgba(26, 22, 18, 0.03); /* Card surfaces */ --surface-overlay: rgba(26, 22, 18, 0.05); --surface-overlay-sm: rgba(26, 22, 18, 0.03); --card-hover-bg: #f0e8df; /* Image overlays — lighter so photos breathe in light mode */ --overlay-heavy: rgba(0, 0, 0, 0.36); --overlay-medium: rgba(0, 0, 0, 0.26); /* Glassmorphism bg */ --bg-glass: rgba(247, 244, 240, 0.80); /* Hero gradient — keep dark so hero text always has contrast */ --hero-mid-75: rgba(5, 5, 10, 0.75); --hero-mid-55: rgba(5, 5, 10, 0.55); --hero-mid-30: rgba(5, 5, 10, 0.30); --hero-mid-50: rgba(5, 5, 10, 0.50); --hero-mid-60: rgba(5, 5, 10, 0.60); } /* ═══════════════════════════════════════════════════════════════ SMOOTH THEME TRANSITIONS Only transition color/bg — not transforms/opacity which break scroll-driven animations. ═══════════════════════════════════════════════════════════════ */ body, nav, footer, .g-card, .g-card::before, .g-card::after, .svc-item, .svc-item::before, .svc-item::after, .lab-card, .lab-card::before, .lab-card::after, .cli-card, .cli-card::before, .ui-card::before, .g-info-card::after, .p-info-card::after, .cs-linked-card::after, section, footer > *, .ft-top, .ft-bot, .search-input, .chip-btn, .page-banner, .filter-area, .skeleton { transition-property: background-color, border-color, color, box-shadow !important; transition-duration: 0.28s !important; transition-timing-function: ease !important; } /* ═══════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON (shared across all pages) ═══════════════════════════════════════════════════════════════ */ .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-subtle); background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: none; flex-shrink: 0; position: relative; overflow: hidden; margin-left: 8px; } .theme-toggle:hover { border-color: var(--red-mid); color: var(--red); background: var(--red-dim); } .theme-toggle svg { width: 16px; height: 16px; position: absolute; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } /* Dark mode: show moon, hide sun */ [data-theme="dark"] .theme-toggle .t-sun { transform: translateY(110%); opacity: 0; } [data-theme="dark"] .theme-toggle .t-moon { transform: translateY(0); opacity: 1; } /* Light mode: show sun, hide moon */ [data-theme="light"] .theme-toggle .t-sun { transform: translateY(0); opacity: 1; } [data-theme="light"] .theme-toggle .t-moon { transform: translateY(-110%); opacity: 0; } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE OVERRIDES — specific elements that need extra care ═══════════════════════════════════════════════════════════════ */ /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg2); } /* Nav links in light mode: use dark text */ [data-theme="light"] .nav-links a { color: var(--muted); } [data-theme="light"] .nav-links a:hover { color: var(--white); } [data-theme="light"] .nav-cta { color: var(--white); } /* nav-cta bg layers in light mode */ [data-theme="light"] .nav-cta::before { background: var(--white); } [data-theme="light"] .nav-cta::after { background: var(--bg); } [data-theme="light"] .nav-cta:hover { color: var(--red); } [data-theme="light"] .nav-cta:hover::before { background: var(--red); } /* Logo text */ [data-theme="light"] .logo-main, [data-theme="light"] .ft-brand-name { color: var(--white); } /* btn-ghost layers */ [data-theme="light"] .btn-ghost { color: var(--white); } [data-theme="light"] .btn-ghost::before { background: var(--white); } [data-theme="light"] .btn-ghost::after { background: var(--bg); } [data-theme="light"] .btn-ghost:hover { color: var(--red); } [data-theme="light"] .btn-ghost:hover::before { background: var(--red); } /* Game cards text contrast */ /* Hide the large decorative number in light mode — it takes ~80px of vertical space and visually dominates in light contexts. Genre tag sits at the top instead, matching the clean card layout in the design reference. */ [data-theme="light"] .g-num { display: none; } [data-theme="light"] .g-title { color: var(--white); } [data-theme="light"] .g-desc { color: var(--muted); } /* Marquee band — stays red in both modes, keep white text */ .marquee-band, .marquee-inner { background: var(--red) !important; } /* Section dividers and borders in index.html (inline-styled) — keep working */ [data-theme="light"] [style*="rgba(255,255,255,0.05)"] { background: rgba(26, 22, 18, 0.06) !important; border-color: rgba(26, 22, 18, 0.06) !important; } /* Footer border in light mode */ [data-theme="light"] footer { border-top-color: var(--red-dim); } /* Lab cards */ [data-theme="light"] .lab-title { color: var(--white); } [data-theme="light"] .lab-desc { color: var(--muted); } /* Banner big number */ [data-theme="light"] .banner-count { color: rgba(232, 35, 42, 0.07); } /* Skeleton loading in light mode */ [data-theme="light"] .skeleton { background: var(--bg3); } [data-theme="light"] .sk-line { background: rgba(26, 22, 18, 0.08); } /* Service items */ [data-theme="light"] .svc-title { color: var(--white); } [data-theme="light"] .svc-desc { color: var(--muted); } /* Footer fine-print text — hardcoded warm-white alpha needs to flip in light mode */ [data-theme="light"] .ft-copy { color: rgba(26, 22, 18, 0.42); } [data-theme="light"] .ft-soc a { color: rgba(26, 22, 18, 0.42); } [data-theme="light"] .ft-soc a:hover { color: var(--red); } /* Case-study callout text — stays readable on coloured callout bg */ [data-theme="light"] .cs-callout-info .cs-callout-text { color: #1a6a6a; } [data-theme="light"] .cs-callout-warning .cs-callout-text { color: #7a6000; } [data-theme="light"] .cs-callout-success .cs-callout-text { color: #1a6a3a; } /* Platform button in game.html — border needs to show on light bg */ [data-theme="light"] .g-plat-btn { color: var(--white); } /* cs-quote in case-study — background needs to adapt */ [data-theme="light"] .cs-quote { background: rgba(232, 35, 42, 0.05); } [data-theme="light"] .cs-quote-text { color: var(--white); } /* ─── Game text cards (.g-card) in light mode ────────────────────────────── The card uses clip-path to cut diagonal notches at two corners. Outside the clip-path the card's own background shows through. In dark mode the page bg is near-black, so the notches read as crisp dark cuts — no extra work needed. In light mode the page bg is parchment, which blends with the card fill and makes the notches invisible. Setting a near-black card background restores the dark corner cuts without touching the card fill (the ::after pseudo-element still paints the parchment interior on top). ─────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .g-card { background: #12100f; } /* ─── Portfolio image cards (.cli-card) in light mode ─────────────────────── Switch from the dark cinematic look to an airy image-forward look: • object-fit: cover so the image fills the frame completely (no letterbox) • Light off-white card bg for any uncovered corners / loading state • Lighter overlay so the photography breathes — title stays legible because it is still white text over an image, just less smothered ─────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .cli-card { background: var(--bg); } [data-theme="light"] .cli-bg-img { object-fit: cover; background: var(--bg2); filter: brightness(1); } [data-theme="light"] .cli-card::before { background: rgba(0, 0, 0, 0.30); border-color: rgba(26, 22, 18, 0.10); } [data-theme="light"] .cli-tag, [data-theme="light"] .cli-year { background: rgba(0, 0, 0, 0.42); } [data-theme="light"] .cli-title { color: #fff; } /* ─── Lab cards (.lab-card) — text cards, same notch treatment as .g-card ── The clip-path cuts expose the card's own background at the corners. Use the same near-black as .g-card so the diagonal notches read dark against the parchment page background. The ::after still paints the parchment interior on top, so only the notch corners show dark. ────────── */ [data-theme="light"] .lab-card { background: #12100f; }