/* ═══════════════════════════════════════════════════════════ LIGHT THEME — Avishka Madushan Activated by [data-theme="light"] on (see theme toggle script in index.html). The dark theme in premium.css/style.css is untouched and remains the default — this file only adds an opt-in override layer, scoped entirely under the attribute selector below, so nothing here can leak into the dark theme. ── Design direction (v2) ── v1 leaned on violet for headings because the dark theme happens to use it in a few places. That was a mistake: it diluted the one color that's actually the brand (orange, --p-orange, used for the nav dot, splash bar, counter, cursor, glows, badges…) and made the page read as a generic template instead of this portfolio. v2 rule: orange does the accent work, neutrals do everything else. Section headings are a confident near-black, not a tinted hue — that's what makes a light UI read as premium instead of "pastel." Orange is spent deliberately: the hero name, buttons, active nav state, numerals, badges, card accents, links on hover. Neutral scale is Tailwind slate, the same family the dark theme's own backgrounds already use (#0F172A slate-900, #1E293B slate-800) — so light/dark read as one system, just inverted, not two unrelated palettes bolted together. Brand orange (#F96D00) is ~2.8:1 on this bg/white — fails WCAG AA as text even at large sizes. It's used for backgrounds, icons, borders and fills (where that doesn't matter) via --tl-orange, and a darkened, AA-safe --tl-orange-text (~5:1) for anywhere it's actually typography (links, the hero name, active nav, numerals). ═══════════════════════════════════════════════════════════ */ html[data-theme="light"] { --tl-bg: #F8FAFC; /* slate-50 */ --tl-surface: #FFFFFF; --tl-surface-2: #F1F5F9; /* slate-100, for tracks/subtle fills */ --tl-text: #0F172A; /* slate-900 */ --tl-text-soft: #475569; /* slate-600 */ --tl-text-mute: #64748B; /* slate-500 — slate-400 measured under 3:1, too low for real text */ --tl-border: rgba(15, 23, 42, 0.08); --tl-border-firm: rgba(15, 23, 42, 0.14); --tl-shadow: rgba(15, 23, 42, 0.10); --tl-shadow-lift: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.09); --tl-orange: #F96D00; /* brand — backgrounds/icons/borders/fills only, not text */ --tl-orange-text: #C2410C; /* orange-700, AA-safe on white/bg (~5:1) */ --tl-orange-tint: rgba(249, 109, 0, 0.10); } /* ── Scrollbars ── */ html[data-theme="light"] { scrollbar-color: var(--tl-orange-text) var(--tl-surface-2); } html[data-theme="light"] .vlog-modal-scroll, html[data-theme="light"] .pm-modal-scroll { scrollbar-color: var(--tl-orange-text) var(--tl-surface-2); } html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--tl-surface-2) !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background-color: rgba(194, 65, 12, 0.45) !important; /* --tl-orange-text at reduced opacity */ } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(194, 65, 12, 0.7) !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb:active { background-color: var(--tl-orange-text) !important; } /* ── Base page ── */ html[data-theme="light"] body { background: var(--tl-bg) !important; color: var(--tl-text-soft) !important; } /* Splash screen is intentionally NOT themed — it stays the original dark Poppins brand moment in both themes (see premium.css). */ /* ── Navbar ── */ html[data-theme="light"] .ftco-navbar-light:not(.scrolled) { background: linear-gradient(180deg, rgba(248, 250, 252, 0.94) 0%, rgba(248, 250, 252, 0.55) 70%, transparent 100%) !important; } html[data-theme="light"] .ftco-navbar-light.scrolled { background: rgba(255, 255, 255, 0.88) !important; border-color: rgba(249, 109, 0, 0.25) !important; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(249, 109, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; } html[data-theme="light"] .ftco-navbar-light .navbar-brand { color: var(--tl-text) !important; } html[data-theme="light"] .ftco-navbar-light .navbar-nav > .nav-item > .nav-link { color: var(--tl-text-soft) !important; } html[data-theme="light"] .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover { color: var(--tl-text) !important; background: var(--tl-orange-tint) !important; } html[data-theme="light"] .ftco-navbar-light.scrolled .nav-item.active > .nav-link, html[data-theme="light"] .ftco-navbar-light.scrolled .nav-item > .nav-link.active { color: var(--tl-orange-text) !important; background: var(--tl-orange-tint) !important; } @media (max-width: 991.98px) { html[data-theme="light"] .ftco-navbar-light, html[data-theme="light"] .ftco-navbar-light:not(.scrolled), html[data-theme="light"] .ftco-navbar-light.scrolled { background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 2px 20px rgba(15, 23, 42, 0.14) !important; } html[data-theme="light"] .ftco-navbar-light .navbar-collapse { background: rgba(255, 255, 255, 0.99) !important; border-top-color: rgba(249, 109, 0, 0.15) !important; } html[data-theme="light"] .ftco-navbar-light .nav-item > .nav-link { color: var(--tl-text-soft) !important; } html[data-theme="light"] .ftco-navbar-light.scrolled .nav-item.active > .nav-link, html[data-theme="light"] .ftco-navbar-light.scrolled .nav-item > .nav-link.active { color: var(--tl-orange-text) !important; } } /* ── "My works" outline button — light theme (used in the hero and elsewhere) — style.css's .btn-outline-white assumes a dark backdrop, so on light it needs a real border/fill or it washes out to near-invisible. Hero-specific light-theme rules now live in css/hero.css alongside the rest of that component. */ html[data-theme="light"] .btn.btn-white.btn-outline-white { background: var(--tl-surface) !important; border-color: var(--tl-border-firm) !important; color: var(--tl-text) !important; box-shadow: var(--tl-shadow-lift) !important; } html[data-theme="light"] .btn.btn-white.btn-outline-white:hover { border-color: transparent !important; background: var(--tl-orange) !important; color: #fff !important; } /* ── Primary buttons (Hire me, Download CV, Read More…) ── style.css hardcodes these to violet (#A855F7) even though premium.css's own hover glow on this class is already an orange shadow — a pre-existing mismatch in the dark theme. Left alone there, but the light theme is a clean slate: make the primary CTA actually brand-orange, with the same dark-text-on-bright-pill pattern the original button already used (dark text reads far better than white on a fill this light: ~6:1 vs ~3:1). */ html[data-theme="light"] .btn.btn-primary { background: var(--tl-orange) !important; border-color: var(--tl-orange) !important; color: var(--tl-text) !important; } html[data-theme="light"] .btn.btn-primary:hover { background: #E05F00 !important; border-color: #E05F00 !important; color: var(--tl-text) !important; } /* ── Section headings & body copy ── Neutral, not colored — this is what keeps a light UI reading as premium/editorial rather than "every heading is a crayon." */ html[data-theme="light"] .heading-section h2 { color: var(--tl-text) !important; } html[data-theme="light"] .heading-section p { color: var(--tl-text-soft) !important; } html[data-theme="light"] h2.big { color: rgba(15, 23, 42, 0.04) !important; } /* ── Blog cards ── */ html[data-theme="light"] .blog-entry { background: var(--tl-surface) !important; border-color: var(--tl-border) !important; box-shadow: var(--tl-shadow-lift) !important; color: var(--tl-text-soft) !important; } html[data-theme="light"] .blog-entry h3 a { color: var(--tl-text) !important; } html[data-theme="light"] .blog-entry h3 a:hover { color: var(--tl-orange-text) !important; } html[data-theme="light"] .blog-entry .meta, html[data-theme="light"] .blog-entry .meta span { color: var(--tl-text-mute) !important; } html[data-theme="light"] .blog-entry .meta i { color: var(--tl-orange-text) !important; } html[data-theme="light"] .blog-entry .text p { color: var(--tl-text-soft) !important; } html[data-theme="light"] .blog-readmore-link { color: var(--tl-orange-text) !important; } html[data-theme="light"] .blog-readmore-link:hover, html[data-theme="light"] .blog-readmore-link:focus-visible { color: var(--tl-text) !important; } /* ── About 2030 (editorial split-bento) ── */ html[data-theme="light"] .about-2030__headline { color: var(--tl-text) !important; } html[data-theme="light"] .about-2030__headline span { color: var(--tl-orange-text) !important; } html[data-theme="light"] .about-2030__bio { color: var(--tl-text-soft) !important; } html[data-theme="light"] .about-2030__float-card { background: linear-gradient(180deg, #FFFFFF, var(--tl-surface-2)) !important; border-color: var(--tl-border) !important; box-shadow: var(--tl-shadow-lift) !important; } html[data-theme="light"] .about-2030__float-card i { color: var(--tl-orange-text) !important; } html[data-theme="light"] .about-2030__float-card strong { color: var(--tl-text) !important; } html[data-theme="light"] .about-2030__float-card span { color: var(--tl-text-mute) !important; } html[data-theme="light"] .about-2030__stats { border-color: var(--tl-border) !important; } /* stat numerals are brand orange at ~2rem — pure --p-orange fails AA even at this size on a light bg, so they get the text-safe shade, same rule as the old counter numeral this module replaces */ html[data-theme="light"] .about-2030__stat-num { color: var(--tl-orange-text) !important; } html[data-theme="light"] .about-2030__stat-label { color: var(--tl-text-mute) !important; } html[data-theme="light"] .about-2030__focus-label { color: var(--tl-text-mute) !important; } html[data-theme="light"] .about-2030__focus-tags span { background: var(--tl-orange-tint) !important; border-color: rgba(249,109,0,.3) !important; color: var(--tl-orange-text) !important; } /* ── Education (vertical timeline) ── The spine is drawn per-row by .edu-rail::before (solid 2px line) and .edu-rail::after (blurred glow duplicate) — .edu-timeline::before matches nothing, so this never actually applied and the line kept its dark-theme colors/glow, which read as a messy doubled edge against light cards. */ html[data-theme="light"] .edu-rail::before { background: var(--tl-orange) !important; opacity: .85; } html[data-theme="light"] .edu-rail::after { background: rgba(249,109,0,.35) !important; opacity: .35 !important; } /* Opaque solid base (--tl-surface) under the tinted gradient — the previous rgba-only fill was translucent, so the timeline line behind it bled straight through the icon instead of appearing to stop at its edge. */ html[data-theme="light"] .edu-icon { background: linear-gradient(135deg, rgba(249,109,0,.14), rgba(249,109,0,.03)) var(--tl-surface) !important; border-color: rgba(249,109,0,.3) !important; box-shadow: 0 0 0 6px var(--tl-bg), 0 8px 16px rgba(15,23,42,.1) !important; } html[data-theme="light"] .edu-icon i { color: var(--tl-orange-text) !important; } html[data-theme="light"] .edu-item.is-current .edu-icon { background: linear-gradient(135deg, var(--tl-orange) 0%, #FFA94D 100%) !important; border-color: var(--tl-orange) !important; box-shadow: 0 0 0 6px var(--tl-bg), 0 0 0 4px rgba(249,109,0,.16), 0 8px 20px rgba(249,109,0,.25) !important; } html[data-theme="light"] .edu-item.is-current .edu-icon i { color: #fff !important; } html[data-theme="light"] .edu-card { background: linear-gradient(180deg, #FFFFFF, var(--tl-surface-2)) !important; border: 1px solid var(--tl-border) !important; box-shadow: var(--tl-shadow-lift) !important; backdrop-filter: none !important; } html[data-theme="light"] .edu-item.is-current .edu-card { border-color: rgba(249,109,0,.3) !important; box-shadow: 0 0 0 1px rgba(249,109,0,.1), 0 16px 34px rgba(15,23,42,.1) !important; } html[data-theme="light"] .edu-card:hover { border-color: rgba(249,109,0,.3) !important; box-shadow: 0 20px 40px rgba(15,23,42,.12), 0 0 0 1px rgba(249,109,0,.18) !important; } html[data-theme="light"] .edu-date { color: var(--tl-orange-text) !important; } html[data-theme="light"] .edu-status { color: var(--tl-text-mute) !important; border-color: var(--tl-border-firm) !important; } html[data-theme="light"] .edu-status--current { color: #fff !important; background: var(--tl-orange) !important; border-color: var(--tl-orange) !important; } html[data-theme="light"] .edu-card h3 { color: var(--tl-text) !important; } html[data-theme="light"] .edu-org { color: var(--tl-text-soft) !important; } html[data-theme="light"] .edu-org i { color: var(--tl-orange-text) !important; } /* ── Services (premium bento grid) ── */ html[data-theme="light"] .services-eyebrow { color: var(--tl-orange-text) !important; } html[data-theme="light"] .services-premium .heading-section p { color: var(--tl-text-mute) !important; } html[data-theme="light"] .services-group-label { color: var(--tl-text-mute) !important; } html[data-theme="light"] .services-group-label .services-group-line { background: linear-gradient(90deg, var(--tl-orange), transparent) !important; } html[data-theme="light"] #services-section .services-1 { background: linear-gradient(180deg, #FFFFFF, var(--tl-surface-2)) !important; border: 1px solid var(--tl-border) !important; box-shadow: var(--tl-shadow-lift) !important; backdrop-filter: none !important; } html[data-theme="light"] #services-section .services-1:hover { border-color: rgba(249,109,0,.35) !important; box-shadow: 0 20px 46px rgba(15,23,42,.14), 0 0 0 1px rgba(249,109,0,.2) !important; } html[data-theme="light"] #services-section .services-1::after { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(249,109,0,.12) 0%, transparent 70%) !important; } html[data-theme="light"] #services-section .services-index { color: rgba(15,23,42,.07) !important; } html[data-theme="light"] #services-section .services-1:hover .services-index { color: rgba(249,109,0,.28) !important; } html[data-theme="light"] #services-section .services-1 .icon { background: linear-gradient(135deg, #F96D00 0%, #FFA94D 100%) !important; box-shadow: 0 8px 20px rgba(249,109,0,.22) !important; } html[data-theme="light"] #services-section .services-1 .icon i { color: #fff !important; } html[data-theme="light"] #services-section .services-1 .desc h3 { color: var(--tl-text) !important; } html[data-theme="light"] #services-section .services-1 .desc p { color: var(--tl-text-mute) !important; } html[data-theme="light"] #services-section .services-stack { color: var(--tl-orange-text) !important; } html[data-theme="light"] #services-section .services-arrow { border-color: var(--tl-border-firm) !important; color: var(--tl-text-mute) !important; } html[data-theme="light"] #services-section .services-1:hover .services-arrow { background: var(--tl-orange) !important; border-color: var(--tl-orange) !important; color: #fff !important; } /* ── Skills ── */ html[data-theme="light"] .skill-card { background: var(--tl-surface) !important; border-color: var(--tl-border) !important; box-shadow: var(--tl-shadow-lift) !important; } html[data-theme="light"] .skill-card:hover { border-color: var(--tl-orange) !important; } html[data-theme="light"] .skill-card-head h3 { color: var(--tl-text) !important; } html[data-theme="light"] .skill-card-tagline { color: var(--tl-text-mute) !important; opacity: 1 !important; } html[data-theme="light"] .skill-tags li { background: var(--tl-surface-2) !important; border-color: var(--tl-border) !important; color: var(--tl-text-soft) !important; } html[data-theme="light"] .skill-tags li:hover { background: var(--tl-orange-lo, rgba(249,109,0,.08)) !important; border-color: var(--tl-orange) !important; } /* ── Projects — filter pills, cards ── */ html[data-theme="light"] .pm-filter-pill { background: var(--tl-surface) !important; border-color: var(--tl-border-firm) !important; color: var(--tl-text-soft) !important; } html[data-theme="light"] .pm-filter-pill:hover { border-color: var(--tl-orange) !important; color: var(--tl-text) !important; } html[data-theme="light"] .pm-filter-pill.is-active { background: var(--tl-orange) !important; border-color: var(--tl-orange) !important; color: #fff !important; } html[data-theme="light"] .pm-empty-state { color: var(--tl-text-mute) !important; } html[data-theme="light"] .project-card { background: var(--tl-surface) !important; border-color: var(--tl-border) !important; box-shadow: var(--tl-shadow-lift) !important; color: var(--tl-text-soft) !important; } html[data-theme="light"] .project-title { color: var(--tl-text) !important; } html[data-theme="light"] .project-summary { color: var(--tl-text-mute) !important; } html[data-theme="light"] .project-card-footer { border-top-color: var(--tl-border) !important; } html[data-theme="light"] .project-badge { color: var(--tl-text) !important; } html[data-theme="light"] .pm-card-flag { color: var(--tl-orange-text) !important; } html[data-theme="light"] .tech-tag { background: var(--tl-orange-tint) !important; color: var(--tl-orange-text) !important; } html[data-theme="light"] .tech-tag:hover { background: var(--tl-orange) !important; color: #fff !important; } /* ── Project case-study panel (.pm-modal — mirrors .vlog-modal below) ── */ html[data-theme="light"] .pm-modal-backdrop { background: rgba(15, 23, 42, 0.45) !important; } html[data-theme="light"] .pm-modal-content { background: var(--tl-surface) !important; color: var(--tl-text-soft) !important; box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18) !important; } html[data-theme="light"] .pm-modal-progress { background: var(--tl-border) !important; } html[data-theme="light"] .pm-modal-topbar { background: rgba(255, 255, 255, 0.9) !important; border-bottom-color: var(--tl-border) !important; } html[data-theme="light"] .pm-modal-brand { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pm-modal-close { background: var(--tl-surface-2) !important; border-color: var(--tl-border-firm) !important; color: var(--tl-text) !important; } html[data-theme="light"] .pm-modal-close:hover, html[data-theme="light"] .pm-modal-close:focus-visible { background: var(--tl-orange-tint) !important; border-color: var(--tl-orange) !important; color: var(--tl-orange-text) !important; } html[data-theme="light"] .pm-modal-image::after { background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.98) 100%) !important; } html[data-theme="light"] #pm-modal-title { color: var(--tl-text) !important; } html[data-theme="light"] .pm-modal-meta { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pm-modal-summary { color: var(--tl-text-soft) !important; border-bottom-color: var(--tl-border) !important; } html[data-theme="light"] .pm-modal-tag { color: var(--tl-text) !important; } html[data-theme="light"] .pm-modal-tabs { border-bottom-color: var(--tl-border) !important; } html[data-theme="light"] .pm-tab { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pm-tab:hover { color: var(--tl-text) !important; } html[data-theme="light"] .pm-tab.is-active { color: var(--tl-orange-text) !important; } html[data-theme="light"] .pm-panel-heading { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pm-modal-description { color: var(--tl-text-soft) !important; } html[data-theme="light"] .pm-modal-features li { color: var(--tl-text-soft) !important; } html[data-theme="light"] .pm-modal-features li::before { color: var(--tl-orange-text) !important; } html[data-theme="light"] .pm-gallery-item { border-color: var(--tl-border) !important; } html[data-theme="light"] .pm-posts-empty { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pm-post { background: var(--tl-surface-2) !important; border-color: var(--tl-border) !important; } html[data-theme="light"] .pm-post.is-open, html[data-theme="light"] .pm-post:hover { border-color: var(--tl-orange) !important; } html[data-theme="light"] .pm-post-title { color: var(--tl-text) !important; } html[data-theme="light"] .pm-post-date { color: var(--tl-orange-text) !important; } html[data-theme="light"] .pm-post-chevron { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pm-post-body > p { color: var(--tl-text-soft) !important; } html[data-theme="light"] .pm-modal-footer { border-top-color: var(--tl-border) !important; } html[data-theme="light"] .pm-action-btn { background: var(--tl-surface-2) !important; border-color: var(--tl-border-firm) !important; color: var(--tl-text) !important; } html[data-theme="light"] .pm-action-btn.pm-action-demo { background: var(--tl-orange) !important; border-color: var(--tl-orange) !important; color: #fff !important; } html[data-theme="light"] .pm-action-btn.pm-action-pdf { background: var(--tl-orange-tint) !important; border-color: rgba(249, 109, 0, 0.3) !important; color: var(--tl-orange-text) !important; } /* Kicker uses pure brand orange in premium.css (fine on the dark bg there, ~8:1) — on light it measures ~2.8:1, so it needs the AA-safe shade here. */ html[data-theme="light"] #contact-section .heading-section .subheading { color: var(--tl-orange-text) !important; } /* ── Contact cards & CTA ── */ html[data-theme="light"] .contact-card { background: var(--tl-surface) !important; border-color: var(--tl-border) !important; box-shadow: var(--tl-shadow-lift) !important; color: var(--tl-text-soft) !important; } html[data-theme="light"] .contact-card:hover { box-shadow: 0 22px 52px rgba(249, 109, 0, .14), 0 0 0 1px rgba(249, 109, 0, .25) !important; } html[data-theme="light"] .contact-card h3 { color: var(--tl-text) !important; } html[data-theme="light"] .contact-card-value { color: var(--tl-text) !important; } html[data-theme="light"] .contact-card-link:hover .contact-card-value { color: var(--tl-orange-text) !important; } html[data-theme="light"] .contact-card-note { color: var(--tl-text-mute) !important; } /* Same "boldest surface on the page" principle as dark mode, adapted for light: a saturated orange panel (not a dark void) so it reads as a confident stage rather than clashing with the rest of the light page. */ html[data-theme="light"] .contact-cta { background: radial-gradient(120% 160% at 100% 0%, rgba(255, 214, 168, .55) 0%, transparent 55%), linear-gradient(120deg, #FF8A3D 0%, var(--tl-orange) 55%, #C2410C 100%) !important; border-color: rgba(194, 65, 12, .35) !important; box-shadow: 0 30px 70px -24px rgba(194, 65, 12, .38), inset 0 1px 0 rgba(255,255,255,.35) !important; } html[data-theme="light"] .contact-cta-orb { background: radial-gradient(circle, rgba(255, 255, 255, .5) 0%, transparent 70%) !important; } html[data-theme="light"] .contact-cta::after { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 26px) !important; } html[data-theme="light"] .contact-cta-status { color: #FFF3E6 !important; background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .35) !important; } html[data-theme="light"] .contact-cta-text h3 { color: #FFFFFF !important; } html[data-theme="light"] .contact-cta-text p { color: rgba(255, 255, 255, .88) !important; } html[data-theme="light"] .contact-cta-btn { background: #FFFFFF !important; color: var(--tl-orange-text) !important; box-shadow: 0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6) !important; } html[data-theme="light"] .contact-cta-btn:hover { color: var(--tl-orange-text) !important; box-shadow: 0 20px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.7) !important; } /* ── Footer ── Kept light for full-page consistency (rather than a permanently-dark band) since the goal is one coherent light experience end to end. */ html[data-theme="light"] .pf-footer { background: linear-gradient(175deg, #FFFFFF 0%, #F1F5F9 100%) !important; border-top-color: rgba(249, 109, 0, 0.25) !important; } html[data-theme="light"] .pf-footer-logo { color: var(--tl-text) !important; } html[data-theme="light"] .pf-footer-tagline { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pf-footer-socials a { color: var(--tl-text-soft) !important; border-color: rgba(249, 109, 0, 0.35) !important; } html[data-theme="light"] .pf-footer-socials a:hover { background: var(--tl-orange) !important; border-color: var(--tl-orange) !important; color: #fff !important; } html[data-theme="light"] .pf-footer-col h4 { color: var(--tl-text) !important; border-bottom-color: rgba(249, 109, 0, 0.3) !important; } html[data-theme="light"] .pf-footer-col ul li, html[data-theme="light"] .pf-footer-col ul li a { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pf-footer-col ul li a:hover { color: var(--tl-orange-text) !important; } html[data-theme="light"] .pf-footer-bottom { border-top-color: var(--tl-border) !important; } html[data-theme="light"] .pf-footer-bottom span { color: var(--tl-text-mute) !important; } html[data-theme="light"] .pf-footer-bottom-tag strong { color: var(--tl-orange-text) !important; } /* ── Scroll-to-top button: brand orange bg + white icon already works on any surface — theme-neutral, no override. Same for the custom cursor, ambient glows, project/soft-skill badge gradients, and splash progress bar (all brand-orange or multi-color decoration, not page chrome). ── */ /* ── Blog article panel (slide-in reader) ── */ html[data-theme="light"] .vlog-modal-backdrop { background: rgba(15, 23, 42, 0.45) !important; } html[data-theme="light"] .vlog-modal-content { background: var(--tl-surface) !important; color: var(--tl-text-soft) !important; box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18) !important; } html[data-theme="light"] .vlog-modal-progress { background: var(--tl-border) !important; } html[data-theme="light"] .vlog-modal-topbar { background: rgba(255, 255, 255, 0.9) !important; border-bottom-color: var(--tl-border) !important; } html[data-theme="light"] .vlog-modal-brand { color: var(--tl-text-mute) !important; } html[data-theme="light"] .vlog-modal-close { background: var(--tl-surface-2) !important; border-color: var(--tl-border-firm) !important; color: var(--tl-text) !important; } html[data-theme="light"] .vlog-modal-close:hover, html[data-theme="light"] .vlog-modal-close:focus-visible { background: var(--tl-orange-tint) !important; border-color: var(--tl-orange) !important; color: var(--tl-orange-text) !important; } html[data-theme="light"] .vlog-modal-image::after { background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.98) 100%) !important; } html[data-theme="light"] #vlog-modal-title { color: var(--tl-text) !important; } html[data-theme="light"] .vlog-modal-meta { color: var(--tl-text-mute) !important; border-bottom-color: var(--tl-border) !important; } html[data-theme="light"] .vlog-modal-description { color: var(--tl-text-soft) !important; } html[data-theme="light"] .vlog-modal-footer { border-top-color: var(--tl-border) !important; } html[data-theme="light"] .vlog-modal-author-text strong { color: var(--tl-text) !important; } html[data-theme="light"] .vlog-modal-author-text small { color: var(--tl-text-mute) !important; } html[data-theme="light"] .vlog-modal-social-label { color: var(--tl-text-mute) !important; } html[data-theme="light"] .vlog-share-btn { background: var(--tl-surface-2) !important; color: var(--tl-text-soft) !important; }