/* * Global Color System & Dark / Light Mode * ======================================== * Single source of truth for every color used across the site. * Loaded AFTER main.css and BEFORE custom.css in every page. */ /* ============================================================ CORE PALETTE — base values, never change names. ============================================================ */ :root { --color-pink: #c93e70; /* Deep pink — matches .button-scheme */ --color-pink-rgb: 201, 62, 112; --color-blue: #5bb8f5; /* Sky blue */ --color-blue-rgb: 91, 184, 245; --color-black: #111111; --color-white: #ffffff; } /* ============================================================ SEMANTIC TOKENS — Dark mode (default) ============================================================ */ :root { --bg: #111111; --text: #f0f0f0; --text-muted: #9f9f9f; --nav-text: rgba(255, 255, 255, 0.82); --social-text: rgba(255, 255, 255, 0.70); --surface: rgba(255, 255, 255, 0.05); --surface-2: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.15); --card-bg-1: #2a2a2a; --card-bg-2: #1a1a1a; --card-text: #ffffff; --input-bg: rgba(255, 255, 255, 0.07); --input-border: rgba(255, 255, 255, 0.15); --input-text: #e0e4ee; --modal-bg: #1a1a1a; } /* ============================================================ SEMANTIC TOKENS — Light mode (applied to for early init AND after DOM loads) ============================================================ */ html.light-mode, body.light-mode { --bg: #ffffff; --text: #111111; --text-muted: #555555; --nav-text: rgba(0, 0, 0, 0.80); --social-text: rgba(0, 0, 0, 0.70); --surface: rgba(0, 0, 0, 0.04); --surface-2: rgba(0, 0, 0, 0.07); --border: rgba(0, 0, 0, 0.12); --card-bg-1: #f0f0f0; --card-bg-2: #e8e8e8; --card-text: #111111; --input-bg: rgba(0, 0, 0, 0.04); --input-border: rgba(0, 0, 0, 0.15); --input-text: #111111; --modal-bg: #f5f5f5; } /* Smooth theme transition */ body { transition: background-color 0.3s ease, color 0.3s ease; } /* ============================================================ LIGHT MODE — Body background & global text (main.css hardcodes body{bg:#111;color:#9f9f9f} and h1-h6{color:#f0f0f0}) ============================================================ */ html.light-mode body, body.light-mode { background-color: #ffffff !important; color: #111111 !important; } html.light-mode h1, html.light-mode h2, html.light-mode h3, html.light-mode h4, html.light-mode h5, html.light-mode h6, body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode h6 { color: #111111 !important; } /* ============================================================ LIGHT MODE — Home / Starfield section (.home-area has bg:#111 and .element-cover-bg has rgba(0,0,0,.85) in main.css — both override the body background, so must be cleared separately. Canvas uses clearRect → transparent → shows the section's background color through.) ============================================================ */ html.light-mode .home-area, body.light-mode .home-area { background-color: #ffffff !important; } html.light-mode .element-cover-bg, body.light-mode .element-cover-bg { background-color: #ffffff !important; } /* The :before pseudo-element adds a dark overlay — remove in light mode */ html.light-mode .home-area:before, body.light-mode .home-area:before { background-color: transparent !important; } /* Home text: hardcoded color:#fff in main.css */ html.light-mode .home-area .home-name, html.light-mode .home-area .home-headline, body.light-mode .home-area .home-name, body.light-mode .home-area .home-headline { color: #111111 !important; } /* ============================================================ LIGHT MODE — Navbar ALL pages: navbar stays transparent (same as dark mode). Only nav-link text and hamburger lines go dark. ============================================================ */ html.light-mode #navbar, body.light-mode #navbar { background-color: transparent !important; box-shadow: none !important; border-bottom: none !important; } html.light-mode #navbar .nav-link, body.light-mode #navbar .nav-link { color: #111111 !important; } html.light-mode #navbar .nav-link:hover, body.light-mode #navbar .nav-link:hover { color: var(--color-pink) !important; } html.light-mode #navbar .btn-line, body.light-mode #navbar .btn-line { background: #333333 !important; } /* ============================================================ LIGHT MODE — Social icons & language selector ============================================================ */ html.light-mode .social-icons a, html.light-mode .social-icons i, body.light-mode .social-icons a, body.light-mode .social-icons i { color: #111111 !important; } html.light-mode .single-language, body.light-mode .single-language { color: rgba(0, 0, 0, 0.70) !important; } /* Active language stays pink in both modes */ html.light-mode .languages-list a.active .single-language, body.light-mode .languages-list a.active .single-language { color: var(--color-pink) !important; } /* ============================================================ LIGHT MODE — Standalone pages: About / Resume / Contact (These pages use inline color styles that need !important overrides) ============================================================ */ /* Section description text ("Get to know me", "Check out my Resume", etc.) */ html.light-mode .section-description, body.light-mode .section-description { color: #555555 !important; } /* About page — content block with inline color: #ccc */ html.light-mode .content-description, body.light-mode .content-description { color: #333333 !important; } /* About page — info values with inline color: #fff */ html.light-mode .single-info p, body.light-mode .single-info p { color: #111111 !important; } /* About page — info labels with inline color: #888 */ html.light-mode .single-info span, body.light-mode .single-info span { color: #555555 !important; } /* Resume page — item details (dates/institutions) */ html.light-mode .item-details, body.light-mode .item-details { color: #555555 !important; } /* Resume page — item descriptions (bullet points) */ html.light-mode .item-description, body.light-mode .item-description { color: #333333 !important; } /* Resume page — card background (main.css gives .resume-item a dark bg) */ html.light-mode .resume-item, body.light-mode .resume-item { background: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } /* Resume / About — col-block section wrapper (may carry a dark surface bg) */ html.light-mode .col-block, body.light-mode .col-block { background: transparent !important; } /* Contact page — info description paragraph */ html.light-mode .info-description, body.light-mode .info-description { color: #333333 !important; } /* Contact page — info values (phone, email, address) */ html.light-mode .info-value, body.light-mode .info-value { color: #333333 !important; } /* Contact page — info type labels */ html.light-mode .info-type, body.light-mode .info-type { color: #555555 !important; } /* Contact page — form inputs */ html.light-mode .contact-form .form-control, body.light-mode .contact-form .form-control { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #111111 !important; } html.light-mode .contact-form .form-control::placeholder, body.light-mode .contact-form .form-control::placeholder { color: #888888 !important; } /* ============================================================ LIGHT MODE — Lightbox panels (About / Resume / Contact in index) ============================================================ */ html.light-mode .lightbox-wrapper, body.light-mode .lightbox-wrapper { background: rgba(255, 255, 255, 0.98); } html.light-mode .lightbox-wrapper .section-description, body.light-mode .lightbox-wrapper .section-description { color: #555555 !important; } /* ============================================================ LIGHT MODE — Tools listing page (tools.html) ============================================================ */ html.light-mode .tool-card, body.light-mode .tool-card { background: linear-gradient(135deg, var(--card-bg-1) 0%, var(--card-bg-2) 100%) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } html.light-mode .tool-card:hover, body.light-mode .tool-card:hover { background: linear-gradient(135deg, #e6e6e6 0%, #dddddd 100%) !important; box-shadow: 0 0 30px rgba(0, 0, 0, 0.08), 0 8px 25px rgba(0, 0, 0, 0.12); } html.light-mode .tool-card:active, body.light-mode .tool-card:active { background: linear-gradient(135deg, #d8d8d8 0%, #cfcfcf 100%) !important; } html.light-mode .tool-card h3, body.light-mode .tool-card h3 { color: var(--card-text) !important; } /* ============================================================ LIGHT MODE — Tool detail pages (tools/*.html) ============================================================ */ html.light-mode .tool-detail-page, html.light-mode .tools-page, body.light-mode .tool-detail-page, body.light-mode .tools-page { background-color: #ffffff; } html.light-mode .tool-textarea, body.light-mode .tool-textarea { background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%) !important; border-color: #cccccc; color: #111111; } html.light-mode .tool-textarea::placeholder, body.light-mode .tool-textarea::placeholder { color: #888888; opacity: 0.9; } /* Study tracker modal */ html.light-mode #recordModal > div, body.light-mode #recordModal > div { background: var(--modal-bg) !important; color: #111111; } html.light-mode #recordModal label, body.light-mode #recordModal label { color: #555555 !important; } html.light-mode #recordModal input, html.light-mode #recordModal textarea, html.light-mode #recordModal select, body.light-mode #recordModal input, body.light-mode #recordModal textarea, body.light-mode #recordModal select { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.2) !important; color: #111111 !important; } /* Section heading title on tool pages */ html.light-mode .section-title, body.light-mode .section-title { color: #111111 !important; } /* ============================================================ LIGHT MODE — Page transition (preloader + overlay) main.js animates these on page load; they should match theme ============================================================ */ html.light-mode .preloader, body.light-mode .preloader { background-color: #ffffff !important; } html.light-mode .preloader-block, body.light-mode .preloader-block { background: #ffffff !important; } html.light-mode #overlay-effect, body.light-mode #overlay-effect { background-color: #ffffff !important; } /* ============================================================ LIGHT MODE — Study Tracker modal (tools/2.html) Extra overrides that theme.css #recordModal rules don't cover ============================================================ */ /* Modal close button */ html.light-mode #closeModalBtn, body.light-mode #closeModalBtn { color: #333333 !important; } /* Date picker — switch browser chrome to light mode */ html.light-mode #recordDate, body.light-mode #recordDate { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #111111 !important; color-scheme: light !important; } html.light-mode #recordDate::-webkit-calendar-picker-indicator, body.light-mode #recordDate::-webkit-calendar-picker-indicator { filter: none !important; opacity: 0.45 !important; } /* Drum column fade gradients — must match modal background (white) */ html.light-mode .drum-col::before, body.light-mode .drum-col::before { background: linear-gradient(to bottom, rgba(255,255,255,0.97) 0%, transparent 100%) !important; } html.light-mode .drum-col::after, body.light-mode .drum-col::after { background: linear-gradient(to top, rgba(255,255,255,0.97) 0%, transparent 100%) !important; } /* Drum wrapper border */ html.light-mode .time-drum-wrap, body.light-mode .time-drum-wrap { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.12) !important; } /* Duration preset buttons */ html.light-mode .dur-btn, body.light-mode .dur-btn { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #444444 !important; } html.light-mode .dur-btn:hover, body.light-mode .dur-btn:hover { background: rgba(0, 0, 0, 0.09) !important; color: #111111 !important; } /* ============================================================ DARK / LIGHT TOGGLE BUTTON Fixed at navbar height (top: 18px) aligned horizontally with the language column (left: 50px = fixed-wrapper margin). ============================================================ */ .theme-toggle-btn { position: fixed; top: 18px; left: 50px; z-index: 1200; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; color: rgba(255, 255, 255, 0.85); font-size: 1.25rem; transition: transform 0.2s ease, opacity 0.2s ease; outline: none; padding: 0; line-height: 1; opacity: 0.85; } .theme-toggle-btn:hover { transform: scale(1.20); opacity: 1; } .theme-toggle-btn:focus, .theme-toggle-btn:focus-visible { outline: none !important; } /* Light mode: dark sun */ html.light-mode .theme-toggle-btn, body.light-mode .theme-toggle-btn { color: rgba(30, 30, 30, 0.80); opacity: 0.80; } html.light-mode .theme-toggle-btn:hover, body.light-mode .theme-toggle-btn:hover { opacity: 1; } html.light-mode .theme-toggle-btn:focus, html.light-mode .theme-toggle-btn:focus-visible, body.light-mode .theme-toggle-btn:focus, body.light-mode .theme-toggle-btn:focus-visible { outline: none !important; } /* ============================================================ LIGHT MODE — L-shaped HUD corners (dark gray, more opaque) In dark mode: rgba(168,217,255,0.55) + opacity:0.28 In light mode: visible dark gray lines ============================================================ */ html.light-mode body.index-page #home .cockpit-hud .hud-corner, body.light-mode.index-page #home .cockpit-hud .hud-corner { opacity: 0.55 !important; } html.light-mode body.index-page #home .cockpit-hud .hud-corner-tl, body.light-mode.index-page #home .cockpit-hud .hud-corner-tl { border-top-color: rgba(50, 50, 50, 0.7) !important; border-left-color: rgba(50, 50, 50, 0.7) !important; } html.light-mode body.index-page #home .cockpit-hud .hud-corner-tr, body.light-mode.index-page #home .cockpit-hud .hud-corner-tr { border-top-color: rgba(50, 50, 50, 0.7) !important; border-right-color: rgba(50, 50, 50, 0.7) !important; } html.light-mode body.index-page #home .cockpit-hud .hud-corner-bl, body.light-mode.index-page #home .cockpit-hud .hud-corner-bl { border-bottom-color: rgba(50, 50, 50, 0.7) !important; border-left-color: rgba(50, 50, 50, 0.7) !important; } html.light-mode body.index-page #home .cockpit-hud .hud-corner-br, body.light-mode.index-page #home .cockpit-hud .hud-corner-br { border-bottom-color: rgba(50, 50, 50, 0.7) !important; border-right-color: rgba(50, 50, 50, 0.7) !important; }