/* * SouthKorea.today — Light Mode Stylesheet (v2 — Full Fix) * File: assets/css/light-mode.css * * Design: "Hanji & Dancheong" — Korean traditional paper warmth * Activated via: */ /* ═══════════════════════════════════════════════════ CSS VARIABLES — LIGHT PALETTE ═══════════════════════════════════════════════════ */ html.sk-light { --bg: #f4efe6; --bg2: #ece6db; --bg3: #e4ddd0; --surface: rgba(255,255,255,0.65); --surface2:rgba(255,255,255,0.90); --border: rgba(50,35,15,0.12); --border2: rgba(50,35,15,0.22); --text: #18120a; --text2: #5a4535; --text3: #9a8070; --neon: #b52a1c; --neon2: #7b4f2a; --neon3: #1a5f8a; --gold: #9a6e0a; --gold2: #b88c1a; } /* ═══════════════════════════════════════════════════ BODY ═══════════════════════════════════════════════════ */ html.sk-light body { background: var(--bg); color: var(--text); } html.sk-light body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9990; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ═══════════════════════════════════════════════════ CURSOR ═══════════════════════════════════════════════════ */ html.sk-light .cursor { background: var(--neon); mix-blend-mode: multiply; } html.sk-light .cursor-ring { border-color: rgba(181,42,28,0.3); } /* ═══════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════ */ html.sk-light nav { background: rgba(244,239,230,0.92) !important; border-bottom: 1px solid var(--border); backdrop-filter: blur(20px) saturate(160%); } html.sk-light .nav-logo { color: var(--text); } html.sk-light .nav-logo-text { color: var(--neon); } html.sk-light .nav-links a { color: var(--text2); } html.sk-light .nav-links a:hover { color: var(--text); } html.sk-light .nav-links a::after { background: var(--neon); } html.sk-light .nav-cta { background: var(--neon); color: #fff; } html.sk-light .nav-cta:hover { box-shadow: 0 4px 20px rgba(181,42,28,0.4); } html.sk-light .nav-hamburger { border-color: var(--border2); } html.sk-light .nav-hamburger span { background: var(--text); } html.sk-light .nav-drawer { background: rgba(244,239,230,0.97); border-right: 1px solid var(--border); } html.sk-light .nav-drawer-links li a { color: var(--text2); border-bottom-color: var(--border); } html.sk-light .nav-drawer-links li a:hover { color: var(--neon); } html.sk-light .nav-overlay { background: rgba(24,18,10,0.45); } html.sk-light .sk-weather-pill { background: rgba(181,42,28,0.06); border: 1px solid rgba(181,42,28,0.18); color: var(--text2); } .sk-light .sk-nav-pill { border: 1px solid rgb(0 0 0 / 20%); background: rgb(0 0 0 / 75%); } .sk-light .sk-nav-pill:hover{ opacity:.8; border: 1px solid rgb(0 0 0 / 20%); background: rgb(0 0 0 / 75%); } /* ═══════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════ HERO - LIGHT MODE OPTIMIZED ═══════════════════════════════════════════════════ */ html.sk-light .hero-bg { background: radial-gradient(circle at 50% -20%, rgba(181, 42, 28, 0.08), transparent 70%), radial-gradient(circle at 10% 50%, rgba(0, 102, 255, 0.04), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); position: relative; } html.sk-light .stars { display: block; opacity: 0.25; mix-blend-mode: multiply; filter: invert(1); } html.sk-light .scanlines { opacity: 0.03; pointer-events: none; } html.sk-light .city-skyline * { fill: rgba(30, 41, 59, 0.05) !important; stroke: rgba(30, 41, 59, 0.03) !important; transition: fill 0.3s ease; } html.sk-light .hero-eyebrow { color: var(--neon); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } html.sk-light .hero-title { color: #0f172a; } html.sk-light .hero-title .line2 { color: transparent; -webkit-text-stroke: 1.2px rgba(15, 23, 42, 0.15); } html.sk-light .hero-title .accent { color: var(--neon); -webkit-text-stroke: 0; text-shadow: 2px 2px 0px rgba(181, 42, 28, 0.1); } html.sk-light .hero-subtitle { color: #475569; } html.sk-light .hero-search { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.02); } html.sk-light .hero-search:focus-within { border-color: var(--neon); background: #ffffff; box-shadow: 0 20px 25px -5px rgba(181, 42, 28, 0.12); } html.sk-light .hero-search input { color: #1e293b; } html.sk-light .hero-search input::placeholder { color: #94a3b8; } html.sk-light .hero-search button { background: var(--neon); color: #ffffff; transition: transform 0.2s ease, background 0.2s ease; } html.sk-light .hero-search button:hover { background: #9a2018; transform: scale(1.02); } html.sk-light .hero-tag { background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(15, 23, 42, 0.08); color: #64748b; transition: all 0.2s ease; } html.sk-light .hero-tag:hover { background: #ffffff; border-color: var(--neon); color: var(--neon); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(181, 42, 28, 0.08); } html.sk-light .scroll-hint span { color: #94a3b8; } html.sk-light .scroll-line { background: linear-gradient(to bottom, var(--neon), transparent); } /* ═══════════════════════════════════════════════════ SECTION BASE — label + title ═══════════════════════════════════════════════════ */ html.sk-light .section-label { color: var(--neon); } html.sk-light .section-title { color: var(--text); } /* CRITICAL: em uses white stroke by default → swap to ink */ html.sk-light .section-title em { color: transparent; -webkit-text-stroke: 1.5px rgba(24,18,10,0.28); } /* ═══════════════════════════════════════════════════ LIVE STRIP ═══════════════════════════════════════════════════ */ html.sk-light .sk-live-strip { background: linear-gradient(135deg, #fff9f0 0%, #f4ece0 100%); border-top: 1px solid rgba(181,42,28,0.10); border-bottom: 1px solid rgba(181,42,28,0.10); box-shadow: 0 2px 16px rgba(50,35,15,0.05); } html.sk-light .sk-live-strip::before { background: linear-gradient(90deg, transparent, rgba(181,42,28,0.22), transparent); } html.sk-light .sk-live-label { color: rgba(181,42,28,0.60); } html.sk-light .sk-live-dot { background: var(--neon); box-shadow: 0 0 6px rgba(181,42,28,0.55); } html.sk-light .aql { color: rgba(181,42,28,0.60); } html.sk-light .sk-aqi-sub-label { color: var(--text3); } /* All text inside live strip */ html.sk-light .sk-live-strip * { color: var(--text); } html.sk-light .sk-live-strip .sk-live-label, html.sk-light .sk-live-strip .aql { color: rgba(181,42,28,0.60); } html.sk-light .sk-live-strip .sk-aqi-sub, html.sk-light .sk-live-strip .sk-aqi-pollutants, html.sk-light .sk-live-strip .sk-aqi-sub-label { color: var(--text3); } html.sk-light .sk-live-strip .sk-aqi-pollutants strong { color: var(--text2); } /* Cards in strip */ html.sk-light .sk-live-strip .sk-weather-card, html.sk-light .sk-live-strip .sk-aqi-card { background: rgba(255,255,255,0.72) !important; border: 0.5px solid rgba(50,35,15,0.12) !important; box-shadow: 0 2px 8px rgba(50,35,15,0.05) !important; } /* Dividers inside strip */ html.sk-light .sk-live-col--weather, html.sk-light .sk-live-col--aqi { border-left-color: rgba(50,35,15,0.08); } /* ═══════════════════════════════════════════════════ BENTO GRID ═══════════════════════════════════════════════════ */ html.sk-light .bento-card { background: #e6e0d5; border-color: rgba(50,35,15,0.12); } html.sk-light .bento-card:hover { border-color: rgba(50,35,15,0.20); } /* Photo cards: overlay stays dark, text stays white */ html.sk-light .bento-card .card-overlay { background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 60%); } html.sk-light .card-title-text { color: #fff; } html.sk-light .card-meta { color: rgba(255,255,255,0.55); } html.sk-light .read-more { color: rgba(255,255,255,0.45); } html.sk-light .bento-card:hover .read-more { color: #ff7070; } /* Rotating border */ html.sk-light .bento-featured-wrap { background: conic-gradient(from var(--angle, 0deg), transparent 0%, var(--neon) 20%, transparent 40%); } /* ═══════════════════════════════════════════════════ CITY CARDS ═══════════════════════════════════════════════════ */ html.sk-light .sk-cities { background: var(--bg2); } html.sk-light .sk-cities::before { background: linear-gradient(90deg, transparent, rgba(50,35,15,0.10), transparent); } /* ═══════════════════════════════════════════════════ MAP / CITY INFO ═══════════════════════════════════════════════════ */ html.sk-light .map-section, html.sk-light #map { background: var(--bg3); border-top-color: var(--border); border-bottom-color: var(--border); } html.sk-light .map-land { fill: #cfc5b0 !important; stroke: #b0a090 !important; } html.sk-light .map-land:hover { fill: #bfaa80 !important; } html.sk-light .map-container svg, html.sk-light .map-wrap svg { filter: drop-shadow(0 0 30px rgba(181,42,28,0.06)); } html.sk-light .map-info { color: var(--text); } html.sk-light .city-item { background: var(--surface2); border-color: var(--border); } html.sk-light .city-item:hover { border-color: rgba(181,42,28,0.22); background: rgba(181,42,28,0.04); } html.sk-light .city-item::before { background: var(--neon); } html.sk-light .city-num { color: rgba(24,18,10,0.18); } html.sk-light .city-info h3 { color: var(--text); } html.sk-light .city-info p { color: var(--text2); } html.sk-light .city-tag { color: var(--neon); } html.sk-light .glow-line { background: linear-gradient(to right, var(--neon), transparent); } html.sk-light .map-explore-btn { background: rgba(181,42,28,0.08); border-color: rgba(181,42,28,0.26); color: var(--neon); } html.sk-light .map-explore-btn:hover { background: rgba(181,42,28,0.14); border-color: rgba(181,42,28,0.48); } html.sk-light .map-explore-note { color: var(--text3); } /* ═══════════════════════════════════════════════════ DESTINATIONS CAROUSEL ═══════════════════════════════════════════════════ */ html.sk-light .sk-dest-carousel-header { color: var(--text); } html.sk-light .sk-carousel-btn { border-color: rgba(50,35,15,0.18); background: rgba(50,35,15,0.04); color: var(--text2); } html.sk-light .sk-carousel-btn:hover { border-color: rgba(181,42,28,0.38); color: var(--neon); background: rgba(181,42,28,0.06); } /* Dest cards have photos → keep dark overlay, white text */ html.sk-light .dest-name { color: #fff; } html.sk-light .dest-desc { color: rgba(255,255,255,0.75); } /* ═══════════════════════════════════════════════════ AFFILIATE HOTELS ═══════════════════════════════════════════════════ */ html.sk-light .affiliate-section { background: linear-gradient(180deg, #fff9f0 0%, #f4ece0 100%); border-top-color: var(--border); position: relative; } /* Dancheong top stripe */ html.sk-light .affiliate-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( 90deg, #b52a1c 0, #b52a1c 20px, #1a5f8a 20px, #1a5f8a 40px, #9a6e0a 40px, #9a6e0a 60px, #2d7a42 60px, #2d7a42 80px ); opacity: 0.50; } html.sk-light .affiliate-grid { background: rgba(50,35,15,0.09); border-color: rgba(50,35,15,0.09); } html.sk-light .affiliate-card { background: rgba(255,255,255,0.92); } html.sk-light .affiliate-card:hover { background: #fff; } html.sk-light .affiliate-card::after { background: linear-gradient(90deg, transparent, rgba(50,35,15,0.02), transparent); } html.sk-light .affiliate-commission { color: var(--text3); background: rgba(50,35,15,0.04); border-color: var(--border); } html.sk-light .affiliate-partner { color: var(--neon); } html.sk-light .affiliate-name { color: var(--text); } html.sk-light .affiliate-price { color: var(--gold2); } html.sk-light .affiliate-price-label { color: var(--text3); } html.sk-light .affiliate-stars { color: var(--gold); } html.sk-light .affiliate-btn { border-color: var(--gold); color: var(--gold); background: transparent; } html.sk-light .affiliate-btn:hover { background: var(--gold); color: #fff; } html.sk-light .affiliate-disclosure { color: var(--text3); } /* Hotel specific */ html.sk-light .sk-hotel-btn { background: #b52a1c; color: #fff; } html.sk-light .sk-hotel-btn:hover { background: #9a2018; } html.sk-light .sk-hotel-price-orig { color: rgba(24,18,10,0.28); } html.sk-light .sk-hotel-badge--bestseller, html.sk-light .sk-hotel-badge:not([class*='--']) { background: rgba(181,42,28,0.08); color: #b52a1c; border-color: rgba(181,42,28,0.20); } html.sk-light .sk-hotel-badge--limited { background: rgba(181,42,28,0.08); color: #b52a1c; border-color: rgba(181,42,28,0.22); } html.sk-light .sk-hotel-badge--view { background: rgba(26,95,138,0.08); color: var(--neon3); border-color: rgba(26,95,138,0.20); } /* ═══════════════════════════════════════════════════ GENERIC INPUTS ═══════════════════════════════════════════════════ */ html.sk-light input, html.sk-light select, html.sk-light textarea { background: rgba(255,255,255,0.88); border-color: var(--border2); color: var(--text); } html.sk-light input::placeholder, html.sk-light textarea::placeholder { color: var(--text3); } html.sk-light input:focus, html.sk-light select:focus, html.sk-light textarea:focus { border-color: rgba(181,42,28,0.42); box-shadow: 0 0 0 3px rgba(181,42,28,0.09); outline: none; } html.sk-light input[type="range"] { accent-color: var(--neon); } /* ═══════════════════════════════════════════════════ DIVIDERS & UTILS ═══════════════════════════════════════════════════ */ html.sk-light .divider { background: linear-gradient(to right, transparent, rgba(181,42,28,0.12), transparent); } /* ═══════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════ */ html.sk-light footer { background: #1a120a; border-top: 3px solid var(--neon); } html.sk-light .footer-logo { color: #f4efe6; } html.sk-light .footer-logo span { color: rgba(181,42,28,0.80); } html.sk-light .footer-links a { color: rgba(244,239,230,0.45); } html.sk-light .footer-links a:hover { color: rgba(244,239,230,0.85); } html.sk-light .footer-copy { color: rgba(244,239,230,0.30); border-top-color: rgba(244,239,230,0.07); } html.sk-light .footer-copy a { color: rgba(244,239,230,0.45); } html.sk-light .footer-copy a:hover { color: rgba(244,239,230,0.75); } /* ═══════════════════════════════════════════════════ SCROLLBAR & SELECTION ═══════════════════════════════════════════════════ */ html.sk-light ::-webkit-scrollbar-track { background: var(--bg2); } html.sk-light ::-webkit-scrollbar-thumb { background: rgba(50,35,15,0.20); border-radius: 3px; } html.sk-light ::-webkit-scrollbar-thumb:hover { background: rgba(181,42,28,0.38); } html.sk-light ::selection { background: rgba(181,42,28,0.18); color: var(--text); } /* ═══════════════════════════════════════════════════ THEME TOGGLE BUTTON ═══════════════════════════════════════════════════ */ .sk-theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface); cursor: none; flex-shrink: 0; position: relative; overflow: hidden; transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.25s; } .sk-theme-toggle:hover { border-color: rgba(0,200,255,0.55); background: rgba(0,200,255,0.08); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,200,255,0.2); } html.sk-light .sk-theme-toggle { border-color: rgba(50,35,15,0.20); background: rgba(255,255,255,0.60); } html.sk-light .sk-theme-toggle:hover { border-color: rgba(181,42,28,0.40); background: rgba(181,42,28,0.07); box-shadow: 0 4px 16px rgba(181,42,28,0.18); } .sk-theme-toggle .sk-icon-moon, .sk-theme-toggle .sk-icon-sun { position: absolute; width: 17px; height: 17px; transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } .sk-theme-toggle .sk-icon-moon { opacity: 1; transform: rotate(0) scale(1); color: rgba(0,200,255,0.80); } .sk-theme-toggle .sk-icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); color: #9a6e0a; } html.sk-light .sk-theme-toggle .sk-icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } html.sk-light .sk-theme-toggle .sk-icon-sun { opacity: 1; transform: rotate(0) scale(1); } /* Mobile drawer toggle */ .sk-drawer-theme-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .sk-drawer-theme-label { font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text3); font-family: 'DM Sans', sans-serif; } .sk-theme-pill { display: flex; align-items: center; background: var(--surface2); border: 1px solid var(--border2); border-radius: 99px; padding: 3px 10px 3px 3px; cursor: none; gap: 0; } .sk-theme-pill-knob { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border2); font-size: 12px; flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.25s; } html.sk-light .sk-theme-pill { background: rgba(255,255,255,0.75); border-color: rgba(50,35,15,0.15); } html.sk-light .sk-theme-pill-knob { background: var(--neon); border-color: transparent; transform: translateX(2px); } .sk-drawer-mode-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-family: 'DM Sans', sans-serif; padding: 0 6px; transition: color 0.25s; color: var(--text3); line-height: 1; } /* ═══════════════════════════════════════════════════ SMOOTH TRANSITIONS ═══════════════════════════════════════════════════ */ html { transition: background-color 0.35s ease, color 0.35s ease; } html nav, html footer, html .affiliate-card, html .bento-card, html .sk-city-card, html .city-item, html .sk-live-strip, html .nav-drawer { transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.3s ease; } /* ═══════════════════════════════════════════════════ FLIGHT SEARCH (.sk-flights) ═══════════════════════════════════════════════════ */ html.sk-light .sk-flights { background: linear-gradient(180deg, #f0ebe0 0%, #ece5d8 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } html.sk-light .sk-flights-sub { color: var(--text3); } html.sk-light .sk-flights-powered { background: rgba(50,35,15,0.06); border: 1px solid var(--border); color: var(--text3); } html.sk-light .sk-flights-freshness { color: var(--text3); } html.sk-light .sk-fresh-dot { background: #2d7a42; box-shadow: 0 0 5px rgba(45,122,66,0.55); } /* Form */ html.sk-light .sk-ff-label { color: var(--text3); } html.sk-light .sk-ff-input { background: rgba(255,255,255,0.88); border-color: var(--border2); color: var(--text); } html.sk-light .sk-ff-input::placeholder { color: var(--text3); } html.sk-light .sk-ff-input:focus { border-color: rgba(181,42,28,0.38); box-shadow: 0 0 0 3px rgba(181,42,28,0.08); } html.sk-light .sk-ff-auto { background: rgba(181,42,28,0.08); color: var(--neon); border-color: rgba(181,42,28,0.20); } html.sk-light .sk-ff-ico { color: var(--text3); } /* Destination tabs */ html.sk-light .sk-ff-dtab { background: rgba(50,35,15,0.05); border: 1px solid var(--border); color: var(--text2); } html.sk-light .sk-ff-dtab:hover { border-color: rgba(181,42,28,0.28); color: var(--text); } html.sk-light .sk-ff-dtab.active { background: var(--neon); border-color: var(--neon); color: #fff; } html.sk-light .sk-ff-dtab-code { color: inherit; opacity: 0.75; } html.sk-light .sk-ff-divider { color: var(--text3); } /* Submit button */ html.sk-light .sk-ff-submit { background: var(--neon); color: #fff; } html.sk-light .sk-ff-submit:hover { background: #9a2018; } /* Flight cards */ html.sk-light .sk-fc { background: rgba(255,255,255,0.90); border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(50,35,15,0.06); } html.sk-light .sk-fc:hover { border-color: rgba(181,42,28,0.28); box-shadow: 0 8px 28px rgba(50,35,15,0.10); } html.sk-light .sk-fc--est { border-style: dashed; } html.sk-light .sk-fc-dest { color: var(--text); } html.sk-light .sk-fc-code { color: var(--text3); } html.sk-light .sk-fc-price { color: var(--neon); } html.sk-light .sk-fc-meta { color: var(--text3); } html.sk-light .sk-fc-airline { color: var(--text2); } html.sk-light .sk-fc-badge { background: rgba(181,42,28,0.08); color: var(--neon); border-color: rgba(181,42,28,0.20); } html.sk-light .sk-flights-err { color: var(--text3); } /* ═══════════════════════════════════════════════════ BUDGET CALCULATOR (.sk-budget) ═══════════════════════════════════════════════════ */ html.sk-light .sk-budget { background: var(--bg); border-top: 1px solid var(--border); } html.sk-light .sk-budget-subtitle { color: var(--text3); } html.sk-light .sk-bc-label { color: var(--text2); } html.sk-light .sk-bc-val { color: var(--neon); background: rgba(181,42,28,0.08); border-color: rgba(181,42,28,0.18); } html.sk-light .sk-bc-select { background: rgba(255,255,255,0.90); border-color: var(--border2); color: var(--text); } html.sk-light .sk-bc-select:focus { border-color: rgba(181,42,28,0.38); box-shadow: 0 0 0 3px rgba(181,42,28,0.08); } html.sk-light .sk-bc-select-wrap { position: relative; } html.sk-light .sk-bc-arrow { color: var(--text3); } html.sk-light .sk-bc-range-labels span { color: var(--text3); } html.sk-light .sk-bc-pill { background: rgba(50,35,15,0.06); border: 1px solid var(--border); color: var(--text2); } html.sk-light .sk-bc-pill:hover { border-color: rgba(181,42,28,0.28); color: var(--text); } html.sk-light .sk-bc-pill--active { background: var(--neon) !important; border-color: var(--neon) !important; color: #fff !important; } /* Result panel */ html.sk-light .sk-bc-result { background: rgba(255,255,255,0.88); border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(50,35,15,0.07); } html.sk-light .sk-bc-total-label { color: var(--text3); } html.sk-light .sk-bc-total-usd { color: var(--text); } html.sk-light .sk-bc-total-krw { color: var(--text3); } html.sk-light .sk-bc-breakdown-row { border-top-color: var(--border); } html.sk-light .sk-bc-breakdown-label { color: var(--text2); } html.sk-light .sk-bc-breakdown-val { color: var(--text); } html.sk-light .sk-bc-tip { background: rgba(26,95,138,0.07); border-color: rgba(26,95,138,0.18); color: var(--neon3); } html.sk-light .sk-bc-cta-note { color: var(--text3); } html.sk-light .sk-bc-cta-btn { background: var(--neon); color: #fff; } html.sk-light .sk-bc-cta-btn:hover { background: #9a2018; } /* ═══════════════════════════════════════════════════ KLOOK ACTIVITIES (.sk-klook) ═══════════════════════════════════════════════════ */ html.sk-light .sk-klook { background: var(--bg2); border-top: 1px solid var(--border); } /* Tab bar */ html.sk-light .sk-klook-tab { background: rgba(50,35,15,0.05); border: 1px solid var(--border); color: var(--text2); } html.sk-light .sk-klook-tab:hover { border-color: rgba(181,42,28,0.26); color: var(--text); } html.sk-light .sk-klook-tab--active { background: var(--neon) !important; border-color: var(--neon) !important; color: #fff !important; } /* Activity cards */ html.sk-light .sk-klook-card { background: rgba(255,255,255,0.92); border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(50,35,15,0.06); } html.sk-light .sk-klook-card:hover { border-color: rgba(181,42,28,0.26); box-shadow: 0 10px 32px rgba(50,35,15,0.11); } /* Card images have dark overlays — keep white text */ html.sk-light .sk-klook-card-title { color: var(--text); } html.sk-light .sk-klook-card-cat { color: var(--text3); } html.sk-light .sk-klook-card-price { color: var(--neon); } html.sk-light .sk-klook-card-meta { color: var(--text3); } html.sk-light .sk-klook-rating-val { color: var(--text2); } html.sk-light .sk-klook-reviews { color: var(--text3); } html.sk-light .sk-klook-badge { background: rgba(181,42,28,0.10); color: var(--neon); border-color: rgba(181,42,28,0.22); } html.sk-light .sk-klook-badge--new { background: rgba(26,95,138,0.10); color: var(--neon3); border-color: rgba(26,95,138,0.22); } html.sk-light .sk-klook-tag { background: rgba(50,35,15,0.06); color: var(--text3); border-color: var(--border); } html.sk-light .sk-klook-book-btn { background: var(--neon); color: #fff; } html.sk-light .sk-klook-book-btn:hover { background: #9a2018; } html.sk-light .sk-klook-see-all { background: rgba(181,42,28,0.08); border-color: rgba(181,42,28,0.26); color: var(--neon); } html.sk-light .sk-klook-see-all:hover { background: rgba(181,42,28,0.14); } html.sk-light .sk-klook-affiliate-note { color: var(--text3); } /* ═══════════════════════════════════════════════════ NEWS HUB (.sk-news-hub) ═══════════════════════════════════════════════════ */ html.sk-light .sk-news-hub { background: var(--bg); border-top: 1px solid var(--border); } /* Tab bar */ html.sk-light .sk-news-hub-tabs { border-bottom-color: var(--border); } html.sk-light .sk-news-tab { color: var(--text3); border-bottom: 2px solid transparent; } html.sk-light .sk-news-tab:hover { color: var(--text2); } html.sk-light .sk-news-tab.active { color: var(--neon); border-bottom-color: var(--neon); } /* Featured article card */ html.sk-light .sk-news-featured { background: rgba(255,255,255,0.88); border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(50,35,15,0.07); } html.sk-light .sk-news-featured:hover { border-color: rgba(181,42,28,0.24); box-shadow: 0 12px 36px rgba(50,35,15,0.11); } /* Featured image overlay stays dark for readability */ html.sk-light .sk-news-feat-meta { color: var(--text3); } html.sk-light .sk-news-feat-title { color: var(--text); } html.sk-light .sk-news-feat-excerpt{ color: var(--text2); } html.sk-light .sk-news-feat-badge { background: rgba(181,42,28,0.09); color: var(--neon); border-color: rgba(181,42,28,0.22); } /* Side list items */ html.sk-light .sk-news-item { background: rgba(255,255,255,0.72); border: 1px solid var(--border); } html.sk-light .sk-news-item:hover { background: rgba(255,255,255,0.95); border-color: rgba(181,42,28,0.20); } html.sk-light .sk-news-item-title { color: var(--text); } html.sk-light .sk-news-item-meta { color: var(--text3); } html.sk-light .sk-news-item-tag { background: rgba(50,35,15,0.06); color: var(--text3); border-color: var(--border); } /* World news row */ html.sk-light .sk-world-item { border-bottom-color: var(--border); } html.sk-light .sk-world-item:hover { background: rgba(50,35,15,0.03); } html.sk-light .sk-world-item-title { color: var(--text); } html.sk-light .sk-world-item-meta { color: var(--text3); } html.sk-light .sk-world-source { background: rgba(50,35,15,0.06); color: var(--text3); border-color: var(--border); } html.sk-light .sk-news-read-more { color: var(--neon); border-bottom-color: rgba(181,42,28,0.22); } html.sk-light .sk-news-read-more:hover { border-bottom-color: var(--neon); } /* ═══════════════════════════════════════════════════ ITINERARY BUILDER (.sk-itinerary) ═══════════════════════════════════════════════════ */ html.sk-light .sk-itinerary { background: var(--bg2); border-top: 1px solid var(--border); } html.sk-light .sk-it-subtitle { color: var(--text3); } /* Sidebar */ html.sk-light .sk-it-sidebar { background: rgba(255,255,255,0.80); border: 1px solid var(--border); } html.sk-light .sk-it-sidebar-head { color: var(--text3); border-bottom-color: var(--border); } html.sk-light .sk-it-dest-btn { background: rgba(50,35,15,0.04); border: 1px solid var(--border); } html.sk-light .sk-it-dest-btn:hover { background: rgba(255,255,255,0.90); border-color: rgba(181,42,28,0.24); } html.sk-light .sk-it-dest-btn.active { background: rgba(181,42,28,0.07); border-color: rgba(181,42,28,0.32); } html.sk-light .sk-it-dest-name { color: var(--text); } html.sk-light .sk-it-dest-kr { color: var(--text3); } html.sk-light .sk-it-dest-add { color: var(--text3); } html.sk-light .sk-it-setting-label { color: var(--text2); } html.sk-light .sk-it-setting-sel { background: rgba(255,255,255,0.90); border-color: var(--border2); color: var(--text); } html.sk-light .sk-it-trip-settings { border-top-color: var(--border); } /* Timeline / day cards */ html.sk-light .sk-it-main { background: transparent; } html.sk-light .sk-it-day-card { background: rgba(255,255,255,0.88); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(50,35,15,0.06); } html.sk-light .sk-it-day-card.is-dragging { box-shadow: 0 12px 32px rgba(50,35,15,0.15); border-color: rgba(181,42,28,0.32); } html.sk-light .sk-it-day-num { color: var(--text3); } html.sk-light .sk-it-day-city { color: var(--text); } html.sk-light .sk-it-day-kr { color: var(--text3); } html.sk-light .sk-it-drag-handle { color: var(--text3); } html.sk-light .sk-it-remove-btn { color: var(--text3); } html.sk-light .sk-it-remove-btn:hover { color: var(--neon); } /* Affiliate suggestion rows inside day cards */ html.sk-light .sk-it-aff-row { border-top-color: var(--border); } html.sk-light .sk-it-aff-label { color: var(--text3); } html.sk-light .sk-it-aff-link { background: rgba(181,42,28,0.08); border-color: rgba(181,42,28,0.22); color: var(--neon); } html.sk-light .sk-it-aff-link:hover { background: rgba(181,42,28,0.14); } html.sk-light .sk-it-aff-link--hotel { background: rgba(154,110,10,0.08); border-color: rgba(154,110,10,0.22); color: var(--gold); } html.sk-light .sk-it-aff-link--hotel:hover { background: rgba(154,110,10,0.14); } /* Empty state */ html.sk-light .sk-it-empty { border: 2px dashed var(--border2); color: var(--text3); } html.sk-light .sk-it-empty-icon { opacity: 0.35; } /* Summary footer */ html.sk-light .sk-it-summary { background: rgba(255,255,255,0.80); border: 1px solid var(--border); } html.sk-light .sk-it-summary-label { color: var(--text3); } html.sk-light .sk-it-summary-val { color: var(--text); } html.sk-light .sk-it-export-btn { background: var(--neon); color: #fff; } html.sk-light .sk-it-export-btn:hover { background: #9a2018; } /* ═══════════════════════════════════════════════════════════ V3 — TARGETED FIXES (class names matched to live HTML) Phân tích từ HTML thực tế ngày 11/05/2026 ═══════════════════════════════════════════════════════════ */ /* ─── 1. HERO — search suggestions & tags ────────────────── */ html.sk-light .hero-bg-overlay { background: linear-gradient(180deg, rgba(244,239,230,0.55) 0%, rgba(244,239,230,0.20) 40%, rgba(244,239,230,0.72) 80%, rgba(244,239,230,0.97) 100%), radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(244,239,230,0.4) 100%); } html.sk-light .hero-search-label { color: rgba(24,18,10,0.45); } html.sk-light .hero-suggestions { background: rgba(244,239,230,0.97); border-color: rgba(181,42,28,0.22); box-shadow: 0 16px 48px rgba(50,35,15,0.18); } html.sk-light .hero-sugg-item { color: var(--text2); border-bottom-color: var(--border); } html.sk-light .hero-sugg-item:hover, html.sk-light .hero-sugg-item.active { background: rgba(181,42,28,0.05); color: var(--text); } html.sk-light .hero-sugg-icon { background: rgba(181,42,28,0.06); border-color: rgba(181,42,28,0.14); } html.sk-light .hero-sugg-type { color: rgba(181,42,28,0.55); } html.sk-light .hero-sugg-section { color: rgba(181,42,28,0.45); } /* ─── 2. FLIGHT CARDS — actual class names: .sk-fc-* ─────── */ html.sk-light .sk-fc-dest-name { color: var(--text); } html.sk-light .sk-fc-dest-sub { color: var(--text3); } html.sk-light .sk-fc-price-from { color: var(--text3); } html.sk-light .sk-fc-price-usd { color: var(--text3); } html.sk-light .sk-fc-stripe { opacity: 0.5; } html.sk-light .sk-fc-top { border-bottom-color: var(--border); } html.sk-light .sk-fc-route { border-bottom-color: var(--border); } html.sk-light .sk-fc-r-iata { color: var(--text3); } html.sk-light .sk-fc-r-node { background: rgba(50,35,15,0.25); } html.sk-light .sk-fc-r-track { background: var(--border); } html.sk-light .sk-fc-r-stop { border-color: rgba(50,35,15,0.2); } html.sk-light .sk-chip { border-color: var(--border); color: var(--text3); } html.sk-light .sk-chip--date { color: var(--text3); border-color: var(--border); } html.sk-light .sk-chip--stop { color: var(--neon2); border-color: rgba(123,79,42,0.25); } html.sk-light .sk-chip--airline { color: var(--text3); border-color: var(--border); } html.sk-light .sk-fc-cta { color: var(--neon); } html.sk-light .sk-flights-trust { border-top-color: var(--border); } html.sk-light .sk-trust-item { color: var(--text3); } html.sk-light .sk-trust-disclosure { color: var(--text3); } /* Search form - actual structure */ html.sk-light .sk-flights-form { border-color: var(--border2); background: rgba(255,255,255,0.60); } html.sk-light .sk-ff-field { border-right-color: var(--border); } html.sk-light .sk-ff-input[type="date"] { color-scheme: light; color: var(--text); } /* ─── 3. BUDGET CALCULATOR — actual classes ──────────────── */ html.sk-light .sk-budget-controls { background: rgba(255,255,255,0.70); border-color: var(--border); } html.sk-light .sk-budget-total-card { background: rgba(181,42,28,0.06); border-color: rgba(181,42,28,0.22); } html.sk-light .sk-bt-eyebrow { color: rgba(181,42,28,0.70); } html.sk-light .sk-bt-amount { color: var(--text); } html.sk-light .sk-bt-amount-krw { color: var(--text3); } html.sk-light .sk-bt-note { color: var(--text3); } html.sk-light .sk-budget-breakdown { background: rgba(255,255,255,0.65); border-color: var(--border); } html.sk-light .sk-bb-row { /* grid rows — no bg needed */ } html.sk-light .sk-bb-label { color: var(--text2); } html.sk-light .sk-bb-bar-wrap { background: rgba(50,35,15,0.08); } html.sk-light .sk-bb-amount { color: var(--text); } html.sk-light .sk-budget-hotel-row { background: rgba(255,255,255,0.65); border-color: var(--border); } html.sk-light .sk-bh-label { color: var(--text3); } html.sk-light .sk-bh-card { background: rgba(255,255,255,0.85); border-color: var(--border); } html.sk-light .sk-bh-card:hover { border-color: rgba(181,42,28,0.28); background: #fff; } html.sk-light .sk-bh-name { color: var(--text); } html.sk-light .sk-bh-meta { color: var(--text3); } html.sk-light .sk-bh-price { color: var(--neon); } html.sk-light .sk-bh-cta { color: rgba(181,42,28,0.65); } html.sk-light .sk-bh-all { color: var(--neon); border-bottom-color: rgba(181,42,28,0.22); } html.sk-light .sk-bh-all:hover { color: #9a2018; border-bottom-color: var(--neon); } /* ─── 4. KLOOK — actual card classes: .sk-ka-* ──────────── */ html.sk-light .sk-ka-card { background: rgba(255,255,255,0.92); border-color: var(--border); box-shadow: 0 2px 12px rgba(50,35,15,0.06); } html.sk-light .sk-ka-card:hover { border-color: rgba(181,42,28,0.26); box-shadow: 0 16px 40px rgba(50,35,15,0.12); } /* Image area keeps dark overlay — white text over photo is fine */ html.sk-light .sk-ka-body { background: transparent; } html.sk-light .sk-ka-title { color: var(--text); } html.sk-light .sk-ka-rating-val { color: var(--text2); } html.sk-light .sk-ka-reviews { color: var(--text3); } html.sk-light .sk-ka-duration { color: var(--text3); } html.sk-light .sk-ka-tag { background: rgba(50,35,15,0.06); border-color: var(--border); color: var(--text3); } html.sk-light .sk-ka-footer { border-top-color: var(--border); } html.sk-light .sk-ka-from { color: var(--text3); } html.sk-light .sk-ka-amount { color: var(--text); } html.sk-light .sk-ka-per { color: var(--text3); } html.sk-light .sk-ka-cta { color: var(--neon2); } /* Klook tab bar — actual classes */ html.sk-light .sk-klook-tab { background: rgba(50,35,15,0.06) !important; border-color: var(--border) !important; color: var(--text2) !important; } html.sk-light .sk-klook-tab:hover { border-color: rgba(181,42,28,0.26) !important; color: var(--text) !important; } html.sk-light .sk-klook-tab--active { background: var(--neon) !important; border-color: var(--neon) !important; border-bottom-color: var(--neon) !important; color: #fff !important; } html.sk-light .sk-klook-footer { border-top-color: var(--border); } html.sk-light .sk-klook-see-all { background: rgba(181,42,28,0.08); border-color: rgba(181,42,28,0.26); color: var(--neon); } html.sk-light .sk-klook-affiliate-note { color: var(--text3); } /* ─── 5. NEWS HUB — actual classes ──────────────────────── */ /* Tab pill container */ html.sk-light .sk-news-hub-tabs { background: rgba(255,255,255,0.55); border-color: var(--border); } html.sk-light .sk-tab { color: var(--text3); } html.sk-light .sk-tab:hover { color: var(--text2); } html.sk-light .sk-tab.active { background: rgba(181,42,28,0.10); box-shadow: 0 0 0 1px rgba(181,42,28,0.22); color: var(--neon); } /* Guides: featured card */ html.sk-light .sk-guide-featured { background: rgba(255,255,255,0.88); border-color: var(--border); box-shadow: 0 4px 20px rgba(50,35,15,0.07); } html.sk-light .sk-guide-featured:hover { border-color: rgba(181,42,28,0.26); } html.sk-light .sk-gf-type-badge { background: rgba(181,42,28,0.10); border-color: rgba(181,42,28,0.26); color: var(--neon); } html.sk-light .sk-gf-date { color: var(--text3); } html.sk-light .sk-gf-title { color: var(--text); } html.sk-light .sk-gf-excerpt { color: var(--text2); } html.sk-light .sk-gf-read { color: var(--neon); } /* Mini stack items */ html.sk-light .sk-guide-mini { background: rgba(255,255,255,0.65); border-color: var(--border); } html.sk-light .sk-guide-mini:hover { background: rgba(255,255,255,0.92); border-color: rgba(181,42,28,0.18); } html.sk-light .sk-gm-img { background: rgba(50,35,15,0.08); } html.sk-light .sk-gm-no-img { color: rgba(50,35,15,0.20); } html.sk-light .sk-gm-type { color: var(--neon2); } html.sk-light .sk-gm-title { color: var(--text); } html.sk-light .sk-gm-date { color: var(--text3); } html.sk-light .sk-gm-arrow { color: var(--text3); } html.sk-light .sk-guide-mini:hover .sk-gm-arrow { color: var(--neon); } html.sk-light .sk-guide-stack-footer { border-top-color: var(--border); } html.sk-light .sk-view-all { color: var(--neon); } /* Korea/World hero card */ html.sk-light .sk-korea-hero { background: rgba(255,255,255,0.85); border-color: var(--border); } html.sk-light .sk-korea-hero:hover { border-color: rgba(181,42,28,0.24); } html.sk-light .sk-kh-source { color: var(--neon); } html.sk-light .sk-kh-sep { color: var(--border2); } html.sk-light .sk-kh-time { color: var(--text3); } html.sk-light .sk-ext-icon { color: var(--text3); } html.sk-light .sk-kh-title { color: var(--text); } html.sk-light .sk-kh-desc { color: var(--text2); } /* Korea/World grid cards */ html.sk-light .sk-korea-card { background: rgba(255,255,255,0.65); border-color: var(--border); } html.sk-light .sk-korea-card:hover { background: rgba(255,255,255,0.92); border-color: rgba(181,42,28,0.18); } html.sk-light .sk-kc-source { color: var(--neon); } html.sk-light .sk-kc-time { color: var(--text3); } html.sk-light .sk-kc-title { color: var(--text); } html.sk-light .sk-kc-img { background: rgba(50,35,15,0.08); } /* ─── 6. ITINERARY BUILDER — actual classes ──────────────── */ html.sk-light .sk-it-dest-btn { border-bottom-color: var(--border); } html.sk-light .sk-it-dest-btn:hover { background: rgba(50,35,15,0.04); } html.sk-light .sk-it-clear-btn { border-color: var(--border); color: var(--text3); } html.sk-light .sk-it-clear-btn:hover { border-color: rgba(181,42,28,0.28); color: var(--neon); } /* Day cards — actual class: .sk-it-day */ html.sk-light .sk-it-day { background: rgba(255,255,255,0.88); border-color: var(--border); box-shadow: 0 2px 10px rgba(50,35,15,0.06); } html.sk-light .sk-it-day-header { /* border-left keeps accent color */ } html.sk-light .sk-it-day-num { color: rgba(50,35,15,0.18); } html.sk-light .sk-it-day-name { color: var(--text); } html.sk-light .sk-it-day-kr { color: var(--text3); } html.sk-light .sk-it-day-btn { background: transparent; border-color: var(--border); color: var(--text3); } html.sk-light .sk-it-day-btn:hover { border-color: rgba(181,42,28,0.28); color: var(--neon); } html.sk-light .sk-it-nights-row { background: rgba(50,35,15,0.03); border-top-color: var(--border); } html.sk-light .sk-it-nights-label { color: var(--text3); } html.sk-light .sk-it-nights-btn { background: rgba(50,35,15,0.06); border-color: var(--border); color: var(--text2); } html.sk-light .sk-it-nights-btn:hover { border-color: var(--border2); color: var(--text); } html.sk-light .sk-it-nights-val { color: var(--text); } html.sk-light .sk-it-suggestions { border-top-color: var(--border); } html.sk-light .sk-it-sugg-label { color: var(--text3); } html.sk-light .sk-it-sugg-card { background: rgba(255,255,255,0.72); border-color: var(--border); } html.sk-light .sk-it-sugg-card:hover { border-color: rgba(181,42,28,0.26); } html.sk-light .sk-it-sugg-name { color: var(--text); } html.sk-light .sk-it-sugg-price { color: var(--neon); } html.sk-light .sk-it-sugg-cta { color: var(--text3); } html.sk-light .sk-it-sugg-more { color: var(--text3); } html.sk-light .sk-it-sugg-more:hover { color: var(--neon); } html.sk-light .sk-it-empty { border-color: var(--border2); background: rgba(255,255,255,0.40); } html.sk-light .sk-it-empty-title { color: var(--text2); } html.sk-light .sk-it-empty-sub { color: var(--text3); } html.sk-light .sk-it-export-bar { background: rgba(181,42,28,0.06); border-color: rgba(181,42,28,0.18); } html.sk-light .sk-it-export-summary { color: var(--text2); } html.sk-light .sk-it-export-btn { background: rgba(50,35,15,0.06); border-color: var(--border2); color: var(--text2); } html.sk-light .sk-it-export-btn:hover { border-color: var(--border2); color: var(--text); } html.sk-light .sk-it-export-btn--primary { background: rgba(181,42,28,0.10); border-color: rgba(181,42,28,0.28); color: var(--neon); } /* ─── 7. CLOCK widget ────────────────────────────────────── */ html.sk-light .sk-clock-wrap { background: rgba(181,42,28,0.04); border-color: rgba(181,42,28,0.12); } html.sk-light .sk-clock-kr { color: rgba(181,42,28,0.50); } html.sk-light .sk-clock-time { color: var(--text); text-shadow: none; } html.sk-light .sk-clock-date { color: var(--text3); } html.sk-light .sk-clock-tz { color: rgba(181,42,28,0.55); background: rgba(181,42,28,0.07); border-color: rgba(181,42,28,0.18); } /* ─── 8. WEATHER widget ──────────────────────────────────── */ html.sk-light .sk-weather-bar { background: rgba(255,255,255,0.55); border-color: var(--border); } html.sk-light .sk-wtab { background: rgba(50,35,15,0.05); border-color: var(--border); color: var(--text2); } html.sk-light .sk-wtab strong { color: var(--text); } html.sk-light .sk-wtab:hover { background: rgba(181,42,28,0.06); border-color: rgba(181,42,28,0.24); color: var(--text); } html.sk-light .sk-wtab.active { background: rgba(181,42,28,0.10); border-color: rgba(181,42,28,0.38); color: var(--text); } html.sk-light .sk-wdetail { border-top-color: var(--border); } html.sk-light .sk-wtemp { color: var(--text); } html.sk-light .sk-wdesc { color: var(--text2); } html.sk-light .sk-wfeels { color: var(--neon2); } html.sk-light .sk-wmeta { color: var(--text3); } html.sk-light .sk-wicon { filter: none; } /* ─── 9. AQI widget ──────────────────────────────────────── */ html.sk-light .sk-aqi-card { background: rgba(255,255,255,0.60) !important; border-color: var(--border) !important; } html.sk-light .sk-aqi-card:hover { background: rgba(255,255,255,0.85) !important; border-color: var(--border2) !important; } html.sk-light .sk-aqi-city { color: var(--text2) !important; } html.sk-light .sk-aqi-level { /* keeps level color via inline style */ } html.sk-light .sk-aqi-pollutants { color: var(--text3) !important; } html.sk-light .sk-aqi-pollutants strong { color: var(--text2) !important; } html.sk-light .sk-aqi-advice { color: var(--text3) !important; } /* AQI arc track — make visible on light bg */ html.sk-light .sk-aqi-arc path:first-child { stroke: rgba(50,35,15,0.10); } html.sk-light .sk-aqi-dot { background: rgba(50,35,15,0.18); } html.sk-light .sk-aqi-dot.active { background: var(--neon); box-shadow: 0 0 6px rgba(181,42,28,0.40); } /* ─── 10. CAROUSEL / DESTINATIONS section label ──────────── */ html.sk-light .carousel-section { background: var(--bg); } html.sk-light .sk-dest-carousel-header { color: var(--text); } /* ─── 11. GLOBAL text fixes missed by earlier rules ─────── */ /* Any inline dark-bg element that bleeds through */ html.sk-light .sk-bc-select option { background: #fff; color: var(--text); } html.sk-light .sk-it-setting-sel option { background: #fff; color: var(--text); } /* Reveal animation: sections that start transparent */ html.sk-light .reveal-on-scroll { background: transparent; } /* Section separators */ html.sk-light .divider { background: linear-gradient(90deg, transparent, rgba(181,42,28,0.12), transparent); } /* ─── 12. Trust items — svg icon colors baked as fill in HTML */ html.sk-light .sk-trust-item svg path, html.sk-light .sk-trust-item svg circle { stroke: var(--neon2); }