/* book-theme-day.css :: "daylight terminal" day-mode skin (2026-05-30). * * Replaces the retired Windows-97 silver joke skin. Day mode now speaks the * LANDING's light palette (cream paper + ink + violet/mint) so /book reads as * the same brand world as kevinaimentor.com in light mode, while keeping the * terminal STRUCTURE the night skin has: [ SECTION ] brackets, `> field_` * labels, dividers, and JetBrains Mono throughout. Night (the CRT cobalt * console) is untouched. * * Activated by body.day, applied by the no-flicker init in book.html, which * mirrors the landing's theme (localStorage 'kevinaimentor.theme'). There is * no in-widget toggle anymore. * * Palette sourced from dashboard/src/landing/tokens/colors.css (:root light): * --cream #F5EFE2 paper page --ink #1A1330 primary text * surface #FAF5EB card --ink-soft #2A1F4A secondary text * --violet #5847B0 accent/brackets --mint #7DEAB0 / #4FB585 CTA * --coral #FF7A55 h1 accent muted #6B5E8A * * Contrast (WCAG AA, body 4.5:1): * --text-primary #1A1330 vs --bg-page #F5EFE2 → 13.9:1 * --text-secondary #2A1F4A vs --bg-page #F5EFE2 → 11.1:1 * --text-muted #6B5E8A vs --bg-page #F5EFE2 → 4.6:1 * --violet #5847B0 vs --bg-card #FAF5EB → 5.7:1 (brackets/links, normal text) * --ink #1A1330 vs --mint #7DEAB0 → 9.8:1 (CTA label on mint) */ /* Tokens are declared on `.day` (the no-flicker init + book-effects stamp the * class on BOTH and ). Declaring on means the page area * OUTSIDE the card inherits the cream page token too — scoping to body.day * left reading the night --bg-page and showing a dark band. */ .day { --text-primary: #1A1330; --text-secondary: #2A1F4A; --text-muted: #6B5E8A; --bg-page: #F5EFE2; --bg-card: #FAF5EB; /* day-only accents (no leakage into night) */ --day-violet: #5847B0; --day-violet-soft: rgba(88, 71, 176, 0.10); --day-mint: #7DEAB0; --day-mint-deep: #4FB585; --day-coral: #C44A22; --day-border: #E3D9C6; --day-surface: #FDFAF4; } html.day { background: var(--bg-page) !important; } body.day { background: var(--bg-page) !important; background-image: none !important; color: var(--text-primary) !important; /* Keep JetBrains Mono: day mode is a daylight TERMINAL, not a GUI. */ font-size: 14px !important; } body.day::before { display: none !important; } /* Hide all night-skin CRT chrome layers in day mode. */ body.day .crt-scanlines, body.day .crt-vignette, body.day .crt-band, body.day .spark, body.day .click-spark, body.day .lore-panel::before, body.day .lore-panel::after, body.day .card::before, body.day .card::after { display: none !important; } body.day .silk-tag, body.day h1 { text-shadow: none !important; } /* ── Card (warm paper, hairline border, soft lift) ─────── */ body.day .card { background: var(--bg-card) !important; border: 1px solid var(--day-border) !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(26, 19, 48, 0.04), 0 12px 32px rgba(26, 19, 48, 0.08) !important; padding: 28px !important; } body.day .card.discharge { animation: none !important; } /* ── Status bar ─────────────────────────────────────────── */ body.day .status-bar { border-bottom: 1px solid var(--day-border) !important; color: var(--text-muted) !important; } body.day .status-dot { background: var(--day-mint-deep) !important; box-shadow: 0 0 0 3px rgba(79, 181, 133, 0.18) !important; animation: none !important; } body.day .status-bar .right { color: var(--text-muted) !important; } /* ── Silkscreen tags → quiet violet chips ──────────────── */ body.day .silk-tag { color: var(--day-violet) !important; background: var(--day-violet-soft) !important; border: 1px solid transparent !important; border-radius: 999px !important; padding: 2px 10px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; } body.day .silk-tag.muted { color: var(--text-muted) !important; background: transparent !important; border: 1px solid var(--day-border) !important; } body.day .silk-tag.clickable:hover { background: rgba(88, 71, 176, 0.16) !important; } /* ── Headings + subtitles ──────────────────────────────── */ body.day h1 { color: var(--text-primary) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } body.day h1 .accent { color: var(--day-coral) !important; } body.day .sub, body.day .subtitle { color: var(--text-secondary) !important; } body.day .sub.spam-warning { background: rgba(196, 74, 34, 0.07) !important; border-left: 2px solid var(--day-coral) !important; color: var(--text-secondary) !important; } /* ── Dividers (hairline + violet brackets) ─────────────── */ body.day .divider { color: var(--day-violet) !important; font-weight: 500 !important; letter-spacing: 0.08em !important; margin: 22px 0 10px !important; } body.day .divider::before, body.day .divider::after { background: var(--day-border) !important; } body.day .divider span { color: var(--day-violet) !important; } body.day .divider .bracket { color: var(--day-mint-deep) !important; } /* ── Form labels + radio fieldset ──────────────────────── */ body.day label { color: var(--text-primary) !important; font-weight: 500 !important; } body.day .field:focus-within label::after { display: none !important; } body.day fieldset.meeting-type-group { background: var(--day-surface) !important; border: 1px solid var(--day-border) !important; border-radius: 10px !important; padding: 12px 14px !important; } body.day fieldset.meeting-type-group legend { color: var(--day-violet) !important; } body.day .meeting-type-option { color: var(--text-secondary) !important; } body.day .meeting-type-option:hover { color: var(--text-primary) !important; } /* ── Inputs + textareas (clean fields, violet focus ring) ── */ body.day select, body.day input, body.day textarea { background: var(--day-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--day-border) !important; border-radius: 8px !important; box-shadow: none !important; padding: 9px 11px !important; } body.day input::placeholder, body.day textarea::placeholder { color: var(--text-muted) !important; } body.day select:focus, body.day input:focus, body.day textarea:focus { background: #fff !important; border-color: var(--day-violet) !important; outline: none !important; box-shadow: 0 0 0 3px var(--day-violet-soft) !important; } /* ── Slot buttons (paper chips, mint selected) ─────────── */ body.day .slot-btn { background: var(--day-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--day-border) !important; border-radius: 8px !important; box-shadow: none !important; } body.day .slot-btn:hover { background: var(--day-violet-soft) !important; color: var(--text-primary) !important; border-color: var(--day-violet) !important; box-shadow: none !important; } body.day .slot-btn.selected { color: var(--text-primary) !important; background: var(--day-mint) !important; border-color: var(--day-mint-deep) !important; font-weight: 600 !important; box-shadow: none !important; outline: none !important; } body.day .slot-btn.selected::before { display: none !important; } body.day .slot-btn.unavailable { color: var(--text-muted) !important; opacity: 0.55 !important; } /* ── Primary + danger buttons ──────────────────────────── */ body.day button.primary { background: var(--day-mint) !important; color: var(--text-primary) !important; border: 1px solid var(--day-mint-deep) !important; border-radius: 9px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; box-shadow: 0 1px 2px rgba(26, 19, 48, 0.10) !important; text-align: center !important; padding: 12px 18px !important; margin-top: 14px !important; } body.day button.primary:hover, body.day button.primary.charging { background: var(--day-mint-deep) !important; color: #06210f !important; } body.day button.primary:active { transform: translateY(1px) !important; } body.day button.primary.confirmed { background: var(--day-mint-deep) !important; color: #06210f !important; box-shadow: none !important; } body.day button.danger { background: transparent !important; color: var(--day-coral) !important; border: 1px solid var(--day-coral) !important; border-radius: 9px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; box-shadow: none !important; padding: 10px 16px !important; } /* ── Footnote + manage links ───────────────────────────── */ body.day .footnote { color: var(--text-muted) !important; } body.day .footnote a, body.day #manage-link, body.day [data-testid="manage-link"] { color: var(--day-violet) !important; border: none !important; text-decoration: underline !important; font-weight: 500 !important; } body.day .footnote a:hover { color: var(--day-violet) !important; } body.day .footnote .dot { color: var(--text-muted) !important; } body.day #service-price { color: var(--text-primary) !important; font-weight: 700 !important; } body.day #service-desc { color: var(--text-muted) !important; } /* ── Calendar widget ───────────────────────────────────── */ body.day .cal-header, body.day .cal-head { border-bottom: 1px solid var(--day-border) !important; color: var(--text-primary) !important; } body.day .cal-title, body.day .cal-head .month { color: var(--text-primary) !important; text-transform: none !important; letter-spacing: 0 !important; } body.day .cal-nav { background: var(--day-surface) !important; color: var(--day-violet) !important; border: 1px solid var(--day-border) !important; border-radius: 8px !important; box-shadow: none !important; } body.day .cal-nav:hover { background: var(--day-violet-soft) !important; border-color: var(--day-violet) !important; } body.day .cal-day-name, body.day .cal-dow { color: var(--text-muted) !important; letter-spacing: 0.04em !important; } body.day .cal-cell { color: var(--text-primary) !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; } body.day .cal-cell.available { background: var(--day-surface) !important; border: 1px solid var(--day-border) !important; } body.day .cal-cell.available:hover { background: var(--day-violet-soft) !important; color: var(--text-primary) !important; border-color: var(--day-violet) !important; box-shadow: none !important; } body.day .cal-cell.selected { background: var(--day-violet) !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; border-color: var(--day-violet) !important; } body.day .cal-cell.past, body.day .cal-cell.blackout { color: var(--text-muted) !important; opacity: 0.5 !important; } body.day .cal-cell.today { color: var(--day-violet) !important; font-weight: 600 !important; text-decoration: underline; } body.day .cal-cell.today::after { display: none !important; } /* ── manage.html modal (clean paper dialog) ────────────── */ body.day .modal { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--day-border) !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(26, 19, 48, 0.18) !important; } body.day .modal::before, body.day .modal::after { display: none !important; } body.day .modal h2 { color: #fff !important; background: var(--day-violet) !important; padding: 8px 14px !important; margin: -16px -18px 14px -18px !important; border-radius: 14px 14px 0 0 !important; letter-spacing: 0.02em !important; font-size: 13px !important; } body.day dt, body.day dd { color: var(--text-primary) !important; } body.day dt { letter-spacing: 0; text-transform: none; } /* ── Lore panel (paper dialog) ─────────────────────────── */ body.day .lore-panel { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--day-border) !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(26, 19, 48, 0.18) !important; } body.day .lore-panel h3 { color: var(--day-violet) !important; } body.day .lore-panel p { color: var(--text-secondary) !important; } body.day .lore-panel p.dim { color: var(--text-muted) !important; }