/* ============================================================ LCARS TUTOR ASSISTANT — Light Theme intranet-x.app Pair with lcars_theme.css — activated via class .lcars-light on the tag. Toggle with the theme switcher button. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'); body.lcars-light { /* ---- CORE PALETTE ---- */ --lcars-black: #f0f4f8; --lcars-dark: #e8eef5; --lcars-navy: #dce6f0; --lcars-panel: #ffffff; --lcars-card: #ffffff; --lcars-card2: #f4f8fc; /* ---- ACCENT COLOURS ---- */ --lcars-blue: #0070a8; --lcars-blue2: #005a8a; --lcars-blue3: #cce4f2; --lcars-cyan: #005a8a; --lcars-gold: #ff8000; --lcars-gold2: #cc5500; --lcars-gold3: #ffe8cc; --lcars-orange: #cc5500; --lcars-red: #b0002a; --lcars-green: #007a6a; --lcars-green2: #005a4a; --lcars-purple: #6a3a9a; --lcars-lav: #5a2a8a; /* ---- CEFR COLOURS ---- */ --cefr-a1: #cc5500; --cefr-a2: #ff8000; --cefr-b1: #007a6a; --cefr-b2: #0070a8; --cefr-c1: #6a3a9a; --cefr-c2: #b0002a; /* ---- TEXT ---- */ --lcars-text: #0d2137; --lcars-text2: #3a5570; --lcars-muted: #6a85a0; --lcars-border: #c0d0df; --lcars-border2: #d8e6f0; /* ---- TYPOGRAPHY ---- */ --font-display: 'Atkinson Hyperlegible', sans-serif; --font-body: 'Atkinson Hyperlegible', sans-serif; --font-mono: 'Share Tech Mono', 'Atkinson Hyperlegible', monospace; /* ---- GLOW → SHADOW (light mode uses real shadows) ---- */ --glow-blue: 0 2px 8px rgba(0,112,168,.18), 0 1px 3px rgba(0,112,168,.1); --glow-gold: 0 2px 8px rgba(255,128,0,.18), 0 1px 3px rgba(255,128,0,.1); --glow-green: 0 2px 8px rgba(0,122,106,.15), 0 1px 3px rgba(0,122,106,.08); --glow-red: 0 2px 8px rgba(176,0,42,.18), 0 1px 3px rgba(176,0,42,.1); background: var(--lcars-black); color: var(--lcars-text); } /* ---- REMOVE DARK-MODE STAR FIELD & SCANLINES ---- */ body.lcars-light::before, body.lcars-light::after { display: none; } /* ---- LIGHT SURFACE BACKGROUND ---- */ body.lcars-light .lcars-app { background: var(--lcars-black); } /* ---- TOP BAR ---- */ body.lcars-light .lcars-bar { background: var(--lcars-panel); border-bottom: 2px solid var(--lcars-blue); box-shadow: 0 1px 6px rgba(0,80,140,.1); } body.lcars-light .lcars-pill-gold { background: var(--lcars-gold); color: #ffffff; } body.lcars-light .lcars-pill-orange { background: var(--lcars-orange); } body.lcars-light .lcars-logo { color: var(--lcars-blue); text-shadow: none; } body.lcars-light .lcars-logo span { color: var(--lcars-gold); } /* ---- NAV TABS ---- */ body.lcars-light .lcars-nav-tab { color: var(--lcars-muted); } body.lcars-light .lcars-nav-tab:hover { color: var(--lcars-blue); border-bottom-color: var(--lcars-blue2); } body.lcars-light .lcars-nav-tab.active { color: var(--lcars-gold); border-bottom-color: var(--lcars-gold); text-shadow: none; } /* ---- CARDS ---- */ body.lcars-light .lcars-card { background: var(--lcars-panel); border: 1px solid var(--lcars-border2); box-shadow: 0 1px 4px rgba(0,80,140,.07); } body.lcars-light .lcars-card::before { background: linear-gradient(90deg, var(--lcars-blue), transparent); opacity: 0.4; } body.lcars-light .lcars-card-sm { background: var(--lcars-panel); border: 1px solid var(--lcars-border2); } body.lcars-light .lcars-card-glow { border-color: var(--lcars-blue); box-shadow: var(--glow-blue); } body.lcars-light .lcars-card-gold { border-color: var(--lcars-gold); box-shadow: var(--glow-gold); } /* ---- SECTION HEADERS ---- */ body.lcars-light .lcars-title { color: var(--lcars-blue); text-shadow: none; } body.lcars-light .lcars-section-header::before { background: var(--lcars-gold); box-shadow: none; } body.lcars-light .lcars-subtitle { color: var(--lcars-text2); } /* ---- CEFR BADGES ---- */ body.lcars-light .lcars-cefr-a1 { color: #cc5500; border-color: #cc5500; background: #ffe8cc; } body.lcars-light .lcars-cefr-a2 { color: #cc5500; border-color: #ff8000; background: #fff0d8; } body.lcars-light .lcars-cefr-b1 { color: #005a4a; border-color: #007a6a; background: #ccf0ea; } body.lcars-light .lcars-cefr-b2 { color: #005a8a; border-color: #0070a8; background: #cce4f2; } body.lcars-light .lcars-cefr-c1 { color: #4a2a7a; border-color: #6a3a9a; background: #e8d8f8; } body.lcars-light .lcars-cefr-c2 { color: #8a0020; border-color: #b0002a; background: #fce8ee; } /* ---- BUTTONS ---- */ body.lcars-light .lcars-btn-blue { background: var(--lcars-blue); color: #ffffff; } body.lcars-light .lcars-btn-blue:hover { background: var(--lcars-blue2); box-shadow: var(--glow-blue); } body.lcars-light .lcars-btn-gold { background: var(--lcars-gold); color: #ffffff; } body.lcars-light .lcars-btn-gold:hover { background: var(--lcars-gold2); box-shadow: var(--glow-gold); } body.lcars-light .lcars-btn-outline { border-color: var(--lcars-blue); color: var(--lcars-blue); background: transparent; } body.lcars-light .lcars-btn-outline:hover { background: var(--lcars-blue3); box-shadow: none; } body.lcars-light .lcars-btn-outline-gold { border-color: var(--lcars-gold); color: var(--lcars-gold2); background: transparent; } body.lcars-light .lcars-btn-outline-gold:hover { background: var(--lcars-gold3); } body.lcars-light .lcars-btn-green { background: var(--lcars-green); color: #ffffff; } body.lcars-light .lcars-btn-red { background: var(--lcars-red); color: #ffffff; } /* ---- FORM ELEMENTS ---- */ body.lcars-light .lcars-label { color: var(--lcars-blue); } body.lcars-light .lcars-input { background: #f8fbff; border-color: var(--lcars-border); color: var(--lcars-text); } body.lcars-light .lcars-input:focus { border-color: var(--lcars-blue); background: #ffffff; box-shadow: 0 0 0 3px rgba(0,112,168,.08); } body.lcars-light .lcars-input::placeholder { color: var(--lcars-muted); } body.lcars-light select.lcars-input { background: #f8fbff; } /* ---- PROGRESS BARS ---- */ body.lcars-light .lcars-prog-bar { background: var(--lcars-border2); } body.lcars-light .lcars-prog-fill { background: linear-gradient(90deg, var(--lcars-blue), #0090cc); box-shadow: none; } body.lcars-light .lcars-prog-fill-gold { background: linear-gradient(90deg, var(--lcars-gold), #ffaa44); box-shadow: none; } /* ---- INNER TABS ---- */ body.lcars-light .lcars-inner-tabs { background: var(--lcars-dark); border-color: var(--lcars-border2); } body.lcars-light .lcars-inner-tab { color: var(--lcars-muted); } body.lcars-light .lcars-inner-tab:hover { color: var(--lcars-blue); } body.lcars-light .lcars-inner-tab.active { background: var(--lcars-blue); color: #ffffff; box-shadow: none; } /* ---- TABLES ---- */ body.lcars-light .lcars-table th { color: var(--lcars-blue); border-bottom-color: var(--lcars-border2); } body.lcars-light .lcars-table td { border-bottom-color: var(--lcars-border2); color: var(--lcars-text); } body.lcars-light .lcars-table tr:hover td { background: #f0f7ff; } /* ---- MODAL ---- */ body.lcars-light .lcars-modal-bg { background: rgba(13,33,55,.6); } body.lcars-light .lcars-modal { background: var(--lcars-panel); border-color: var(--lcars-blue); box-shadow: 0 8px 32px rgba(0,80,140,.18); } body.lcars-light .lcars-modal-header { border-bottom-color: var(--lcars-border2); } body.lcars-light .lcars-modal-title { color: var(--lcars-gold2); } body.lcars-light .lcars-modal-close { color: var(--lcars-muted); } body.lcars-light .lcars-modal-close:hover { color: var(--lcars-red); } body.lcars-light .lcars-modal-footer { border-top-color: var(--lcars-border2); } /* ---- STAT CARDS ---- */ body.lcars-light .lcars-stat-card { background: var(--lcars-panel); border-color: var(--lcars-border2); } body.lcars-light .lcars-stat-num { color: var(--lcars-blue); text-shadow: none; } body.lcars-light .lcars-stat-lbl { color: var(--lcars-muted); } /* ---- ALERTS ---- */ body.lcars-light .lcars-alert-info { background: #e6f3fa; border-color: var(--lcars-blue); color: var(--lcars-blue2); } body.lcars-light .lcars-alert-gold { background: var(--lcars-gold3); border-color: var(--lcars-gold); color: var(--lcars-gold2); } body.lcars-light .lcars-alert-success { background: #ccf0ea; border-color: var(--lcars-green); color: var(--lcars-green2); } body.lcars-light .lcars-alert-error { background: #fce8ee; border-color: var(--lcars-red); color: #8a0020; } /* ---- FEEDBACK ---- */ body.lcars-light .lcars-feedback.correct { background: #e0f5ee; color: #005a4a; border-color: rgba(0,122,106,.3); } body.lcars-light .lcars-feedback.wrong { background: #fce8ee; color: #8a0020; border-color: rgba(176,0,42,.3); } body.lcars-light .lcars-feedback.hint { background: var(--lcars-gold3); color: var(--lcars-gold2); border-color: rgba(255,128,0,.3); } /* ---- DIALOGUE BUBBLES ---- */ body.lcars-light .lcars-d-bubble { background: var(--lcars-panel); border-color: var(--lcars-border2); color: var(--lcars-text); box-shadow: 0 1px 3px rgba(0,80,140,.06); } body.lcars-light .lcars-dialogue.right .lcars-d-bubble { background: var(--lcars-blue3); border-color: var(--lcars-blue); } body.lcars-light .lcars-d-avatar { border-color: var(--lcars-blue); background: var(--lcars-blue3); color: var(--lcars-blue2); } /* ---- GAME AREA ---- */ body.lcars-light .lcars-game-area { background: var(--lcars-dark); border-color: var(--lcars-blue); box-shadow: none; } body.lcars-light .lcars-game-word { color: var(--lcars-gold); text-shadow: none; } body.lcars-light .lcars-game-opt { background: var(--lcars-panel); border-color: var(--lcars-border2); color: var(--lcars-text); } body.lcars-light .lcars-game-opt:hover { border-color: var(--lcars-blue); background: var(--lcars-blue3); color: var(--lcars-blue2); } body.lcars-light .lcars-game-opt.correct { border-color: var(--lcars-green); background: #ccf0ea; color: var(--lcars-green2); } body.lcars-light .lcars-game-opt.wrong { border-color: var(--lcars-red); background: #fce8ee; color: #8a0020; } /* ---- WORD CHIPS ---- */ body.lcars-light .lcars-chip { background: var(--lcars-blue3); border-color: var(--lcars-blue); color: var(--lcars-blue2); } body.lcars-light .lcars-chip:hover { background: var(--lcars-blue); color: #ffffff; box-shadow: none; } /* ---- BLANKS ---- */ body.lcars-light .lcars-blank { border-bottom-color: var(--lcars-gold); color: var(--lcars-gold2); } body.lcars-light .lcars-blank.filled { color: var(--lcars-blue2); border-bottom-color: var(--lcars-blue); } /* ---- SOCIAL POSTS ---- */ body.lcars-light .lcars-post-card { background: var(--lcars-panel); border-color: var(--lcars-border2); } body.lcars-light .lcars-post-card:hover { border-color: var(--lcars-blue); box-shadow: 0 2px 10px rgba(0,80,140,.08); } body.lcars-light .lcars-post-av { background: var(--lcars-blue3); border-color: var(--lcars-blue); color: var(--lcars-blue2); } /* ---- NETWORK CARDS ---- */ body.lcars-light .lcars-network-card { background: var(--lcars-panel); border-color: var(--lcars-border2); } body.lcars-light .lcars-network-card:hover { border-color: var(--lcars-blue); box-shadow: 0 3px 12px rgba(0,80,140,.1); transform: translateY(-2px); } /* ---- JOB CARDS ---- */ body.lcars-light .lcars-job-card { background: var(--lcars-panel); border-color: var(--lcars-border2); } body.lcars-light .lcars-job-card:hover { border-color: var(--lcars-blue); box-shadow: 0 2px 10px rgba(0,80,140,.08); } body.lcars-light .lcars-job-title { color: var(--lcars-gold2); } body.lcars-light .lcars-job-company { color: var(--lcars-text2); } body.lcars-light .lcars-job-loc { color: var(--lcars-muted); } /* ---- PROFILE COVER ---- */ body.lcars-light .lcars-profile-cover { background: linear-gradient(135deg, var(--lcars-blue3) 0%, var(--lcars-gold3) 100%); } body.lcars-light .lcars-profile-av-lg { border-color: var(--lcars-gold); background: var(--lcars-gold3); color: var(--lcars-gold2); box-shadow: 0 2px 10px rgba(255,128,0,.2); } /* ---- SIDE ORNAMENT ---- */ body.lcars-light .lcars-side-ornament { background: linear-gradient(180deg, var(--lcars-gold) 0%, var(--lcars-gold) 20%, var(--lcars-orange) 20%, var(--lcars-orange) 23%, var(--lcars-blue) 23%, var(--lcars-blue) 80%, transparent 80% ); } /* ---- CORNER DECORATIONS ---- */ body.lcars-light .lcars-corner-tl { border-top-color: var(--lcars-gold); border-left-color: var(--lcars-gold); } body.lcars-light .lcars-corner-tr { border-top-color: var(--lcars-blue); border-right-color: var(--lcars-blue); } /* ---- SELECT ---- */ body.lcars-light .lcars-select { background: #f8fbff; border-color: var(--lcars-blue); color: var(--lcars-blue2); } /* ---- SCROLLBAR ---- */ body.lcars-light ::-webkit-scrollbar-track { background: var(--lcars-dark); } body.lcars-light ::-webkit-scrollbar-thumb { background: var(--lcars-border); } /* ---- THEME TOGGLE BUTTON ---- */ .lcars-theme-toggle { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--lcars-border2); border-radius: var(--r-pill); padding: 5px 12px; font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; color: var(--lcars-text2); transition: .2s; } .lcars-theme-toggle:hover { border-color: var(--lcars-gold); color: var(--lcars-gold); } .lcars-theme-toggle .toggle-icon { font-size: 14px; line-height: 1; }