/* ===== Revebe Digital — Light theme ===== Default is DARK (no attribute). When the user picks Light, is set (persisted in localStorage). Everything here is scoped to [data-theme="light"] so the dark default is never affected. */ /* ---- global tokens (style.css uses these across all standard pages) ---- */ :root[data-theme="light"]{ --bg:#ffffff; --bg-2:#f3f5fc; --panel:#ffffff; --panel-2:#eef1fb; --panel-grad:#f4f6fc; /* was inheriting a dark navy stop that rendered muddy grey on white */ --red:#ff2d4d; --red-2:#e11d2a; --red-soft:rgba(255,45,77,.09); --text:#0e1230; --muted:#565d80; --border:rgba(10,15,40,.12); --shadow:0 18px 50px rgba(20,20,60,.12); color-scheme:light; } :root[data-theme="light"] body{ background:var(--bg); color:var(--text); } :root[data-theme="light"] .nav{ background:rgba(255,255,255,.82); border-bottom-color:rgba(10,15,40,.10); } :root[data-theme="light"] .nav-links a{ color:#4a5170; } :root[data-theme="light"] .nav-links a:hover,:root[data-theme="light"] .nav-links a.active{ color:#0e1230; } :root[data-theme="light"] .footer{ background:var(--bg-2); border-top-color:rgba(10,15,40,.10); } :root[data-theme="light"] .btn-ghost{ color:#0e1230; border-color:rgba(10,15,40,.18); background:rgba(10,15,40,.02); } :root[data-theme="light"] .btn-ghost:hover{ background:rgba(10,15,40,.05); } /* ---- premium layer (non-home pages) ---- */ :root[data-theme="light"] body.has-premium{ background-image: radial-gradient(1100px 650px at 82% -6%,rgba(255,45,77,.06),transparent 60%), radial-gradient(950px 600px at -6% 8%,rgba(97,114,255,.06),transparent 58%); } :root[data-theme="light"] body.has-premium .tline-top, :root[data-theme="light"] body.has-premium .tline-left{ background:rgba(10,15,40,.07); } /* ---- home page v2 (.rvx-home uses its own --v-* tokens) ---- */ :root[data-theme="light"] .rvx-home{ --v-bg:#f7f8fd; --v-bg2:#eef1fb; --v-panel:#ffffff; --glass:rgba(255,255,255,.78); --v-line:rgba(10,15,40,.10); --v-line2:rgba(10,15,40,.16); --v-text:#0e1230; --v-muted:#565d80; --v-dim:#8990b3; background: radial-gradient(1200px 700px at 82% -2%,rgba(255,45,77,.06),transparent 60%), radial-gradient(1000px 620px at -6% 10%,rgba(97,114,255,.06),transparent 58%),var(--v-bg); } /* hardcoded whites -> dark ink */ :root[data-theme="light"] .rvx-home .kpi .v, :root[data-theme="light"] .rvx-home .tile .v, :root[data-theme="light"] .rvx-home .region-row b, :root[data-theme="light"] .rvx-home .hstats .n, :root[data-theme="light"] .rvx-home .crow .m b{ color:#0e1230; } :root[data-theme="light"] .rvx-home .region-row{ color:#3a4165; } :root[data-theme="light"] .rvx-home .check li{ color:#2a3050; } :root[data-theme="light"] .rvx-home .panel-top .name{ color:#565d80; } /* card surfaces */ :root[data-theme="light"] .rvx-home .panel, :root[data-theme="light"] .rvx-home .cpanel{ background:linear-gradient(180deg,#ffffff,#f4f6fc); box-shadow:0 30px 70px rgba(20,20,60,.12); } :root[data-theme="light"] .rvx-home .panel-top{ background:rgba(10,15,40,.02); } :root[data-theme="light"] .rvx-home .kpi{ background:linear-gradient(180deg,#f2f5fc,#e9edf8); } :root[data-theme="light"] .rvx-home .kpi .bar{ background:rgba(10,15,40,.08); } :root[data-theme="light"] .rvx-home .tile, :root[data-theme="light"] .rvx-home .crow{ background:#f6f8fd; } :root[data-theme="light"] .rvx-home .feat, :root[data-theme="light"] .rvx-home .pain{ background:linear-gradient(180deg,#ffffff,#f6f7fc); } :root[data-theme="light"] .rvx-home .explain{ background:rgba(97,114,255,.06); } /* top hairline sheens read as thin dark line on light */ :root[data-theme="light"] .rvx-home .kpi::before, :root[data-theme="light"] .rvx-home .feat::before, :root[data-theme="light"] .rvx-home .pain::before, :root[data-theme="light"] .rvx-home .post-card::before, :root[data-theme="light"] .rvx-home .panel-box::before{ background:linear-gradient(90deg,transparent,rgba(10,15,40,.10),transparent); } /* ---- Converter / tools UI in light mode ---- */ :root[data-theme="light"]{ --tl-panel:#ffffff; --tl-panel-2:#f3f5fc; --tl-line:rgba(10,15,40,.10); } :root[data-theme="light"] .nav-drop{ background:rgba(255,255,255,.98); box-shadow:0 30px 80px rgba(20,20,60,.18); } :root[data-theme="light"] .nav-drop a.nd-item{ color:#4a5170; } :root[data-theme="light"] .nav-drop a.nd-item:hover{ background:rgba(10,15,40,.06); color:#0e1230; } :root[data-theme="light"] .nav-drop-foot p{ color:#565d80; } /* ---- mobile menu sheet in light mode (its bg is hardcoded dark otherwise) ---- */ @media(max-width:980px){ :root[data-theme="light"] .nav-links{ background:#ffffff; border-color:rgba(10,15,40,.10); } :root[data-theme="light"] .nav-links a{ border-bottom-color:rgba(10,15,40,.06); } }