/* TajirBook marketing site — light/dark theme. Loaded AFTER each page's own inline styles (which are the original DARK design and are left untouched). theme.js sets ; everything below only applies when it says "light". Dark = the original. */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* ── LIGHT PALETTE — same variable names every page already uses ── */ html[data-theme="light"] { --dark: #f7f8fa; /* page background */ --dark2: #ffffff; /* cards / panels */ --dark3: #f0f2f5; --dark4: #e6e9ee; --text: #111827; --text2: #4b5563; --text3: #6b7280; --border: rgba(17,24,39,0.10); /* Gold is used for TEXT as well as fills. The bright gold is unreadable as text on white, so text gets a deeper gold; solid gold fills (buttons, badges) are switched back to the bright gold just below. */ --gold: #9a6f00; --gold-dim: rgba(154,111,0,0.10); --gold-glow: rgba(154,111,0,0.20); --green: #15803d; --red: #dc2626; } /* Bright gold for solid fills (black text on top stays readable). */ html[data-theme="light"] .btn-gold, html[data-theme="light"] .feat-tab.active, html[data-theme="light"] .lang-toggle button.active, html[data-theme="light"] .nav-logo, html[data-theme="light"] .price-badge, html[data-theme="light"] .phone-submit { background: #e8b84b; } html[data-theme="light"] .feat-tab.active { border-color: #e8b84b; } html[data-theme="light"] [style*="background:var(--gold)"] { background: #e8b84b !important; } /* "ANDROID APP — DIRECT DOWNLOAD" tag: hard-coded bright green (fine on black, washed out on a pale green tint). */ html[data-theme="light"] [style*="color:#3dd56d"] { color: #15803d !important; } /* Big decorative step numbers ("01", "02"…) use the panel colour, which is almost invisible on white. */ html[data-theme="light"] .wstep-num { color: #d3d8e1; } /* Pricing: the highlighted card fades to a hard-coded dark brown, which turns into a muddy grey smear on a light page — use a soft gold tint. */ html[data-theme="light"] .price-card.featured { background: linear-gradient(160deg, #ffffff 0%, #fdf4d8 100%); border-color: rgba(154,111,0,0.45); box-shadow: 0 0 0 1px rgba(154,111,0,0.18), 0 20px 48px rgba(154,111,0,0.14); } html[data-theme="light"] .price-card:hover { box-shadow: 0 20px 48px rgba(17,24,39,0.12); } /* Pricing: the "Platinum" plan name is hard-coded near-white. */ html[data-theme="light"] .price-tier[style*="e5e4e2"] { color: #6b7280 !important; } /* ── Hard-coded dark spots ── */ html[data-theme="light"] nav { background: rgba(255,255,255,0.92); } html[data-theme="light"] body::before { display: none; } /* film-grain overlay is for dark */ /* ── 404 page: its colours are hard-coded (no variables) ── */ html[data-theme="light"] body.page-404 { background: #f7f8fa; color: #111827; } html[data-theme="light"] body.page-404 h1 { color: #111827; } html[data-theme="light"] body.page-404 .code { color: #9a6f00; } html[data-theme="light"] body.page-404 p, html[data-theme="light"] body.page-404 .btn-secondary { color: #6b7280; } html[data-theme="light"] body.page-404 .btn-secondary:hover { color: #111827; } /* ── THE SWITCH (added by theme.js) ── */ .theme-switch { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex-shrink: 0; border-radius: 10px; cursor: pointer; border: 1px solid var(--border, rgba(255,255,255,0.12)); background: var(--dark3, transparent); color: var(--text2, #b8bcc8); transition: color .15s, border-color .15s; } .theme-switch:hover { color: var(--gold, #e8b84b); border-color: var(--gold, #e8b84b); } .theme-switch svg { width: 18px; height: 18px; display: block; } /* Light page shows the moon (click = go dark); dark page shows the sun. */ .theme-switch .ico-sun { display: none; } html[data-theme="dark"] .theme-switch .ico-moon { display: none; } html[data-theme="dark"] .theme-switch .ico-sun { display: block; } /* Phones: the nav bar was already too wide (its right side ran off the screen and overlapped the "TajirBook" name) before the switch existed. To make room for the switch on phones, the nav drops its small APK and "Start Free Trial" buttons — the hero directly below has big versions of both — and keeps Sign In, the language toggle and the switch. */ @media (max-width: 480px) { .nav-cta a[href$="tajirbook.apk"], .nav-cta a.btn-gold { display: none !important; } .theme-switch { width: 32px; height: 32px; } .theme-switch svg { width: 16px; height: 16px; } } @media (max-width: 400px) { nav { padding-left: 12px !important; padding-right: 12px !important; } .nav-cta { gap: 4px !important; } .nav-cta .btn { padding: 7px 9px !important; } .lang-toggle button { padding: 5px 9px !important; } .nav-name { font-size: 15px !important; } } @media (max-width: 340px) { .nav-name { display: none; } /* very small phones: logo only */ } /* Pages with no nav (404) get a floating switch. */ .theme-switch--float { position: fixed; top: 16px; right: 16px; z-index: 200; }