/* ========================================================= Whiskey Company – LCARS theme (easter egg) Activated with data-theme="lcars" on Classic LCARS-inspired panels: black, amber, purple, cyan ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;600;700&display=swap'); [data-theme="lcars"] { --lcars-bg: #000000; --lcars-panel: #101018; --lcars-amber: #ff9900; --lcars-amber-dim: #cc7700; --lcars-peach: #ffcc99; --lcars-purple: #cc99cc; --lcars-lilac: #9999ff; --lcars-cyan: #99ccff; --lcars-blue: #5599ff; --lcars-red: #cc6666; --lcars-text: #ffcc99; --lcars-text-bright: #ffe6cc; --lcars-muted: #997755; --bg-body: var(--lcars-bg); --bg-card: #0a0a12; --bg-sidebar: #000000; --bg-header: #000000; --text-primary: var(--lcars-text-bright); --text-secondary: var(--lcars-muted); --text-on-dark: var(--lcars-peach); --accent: var(--lcars-amber); --accent-hover: var(--lcars-peach); --accent-light: var(--lcars-cyan); --border: #332211; --success: #99cc66; --danger: var(--lcars-red); --warning: var(--lcars-amber); --shadow: none; --radius: 0; } /* Base */ [data-theme="lcars"] body { font-family: "Antonio", "Segoe UI", system-ui, sans-serif; letter-spacing: 0.04em; background: var(--lcars-bg); color: var(--text-primary); } [data-theme="lcars"] a { color: var(--lcars-cyan); } [data-theme="lcars"] a:hover { color: var(--lcars-peach); } /* ----- Sidebar (vertical LCARS rail) ----- */ [data-theme="lcars"] .sidebar { background: #000; border-right: none; padding: 0; overflow-x: hidden; } [data-theme="lcars"] .sidebar-brand { background: var(--lcars-amber); color: #000; border: none; border-radius: 0 0 0 2.5rem; margin: 0 0 0.75rem 0; padding: 1rem 1.25rem 1.25rem 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; user-select: none; } [data-theme="lcars"] .sidebar-brand img { filter: brightness(0); height: 32px; } [data-theme="lcars"] .sidebar-category { color: var(--lcars-purple); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.65rem; padding: 0.85rem 1rem 0.25rem; } [data-theme="lcars"] .sidebar-link { color: var(--lcars-peach); border-radius: 0 1.5rem 1.5rem 0; margin: 0.15rem 0.75rem 0.15rem 0; padding: 0.45rem 1rem; border-left: 4px solid transparent; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.06em; } [data-theme="lcars"] .sidebar-link:hover, [data-theme="lcars"] .sidebar-link.active { background: #1a1008; color: var(--lcars-amber); border-left-color: var(--lcars-amber); } [data-theme="lcars"] .sidebar-user-panel { background: #0d0d14; border: 2px solid var(--lcars-purple); border-radius: 0 1.5rem 1.5rem 0; margin: 0.5rem 0.75rem 0.75rem 0; padding: 0.75rem 1rem; } [data-theme="lcars"] .sidebar-user-label { color: var(--lcars-lilac); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.1em; } [data-theme="lcars"] .sidebar-user-ic { color: var(--lcars-amber); font-weight: 700; text-transform: uppercase; } [data-theme="lcars"] .sidebar-user-name { color: var(--lcars-muted); } [data-theme="lcars"] .sidebar-ic-select { background: #000; color: var(--lcars-peach); border: 1px solid var(--lcars-purple); border-radius: 0; } /* Decorative rail under sidebar brand */ [data-theme="lcars"] .sidebar-brand::after { content: ""; display: block; height: 8px; margin-top: 0.5rem; background: linear-gradient( 90deg, var(--lcars-purple) 0 18%, transparent 18% 22%, var(--lcars-cyan) 22% 40%, transparent 40% 44%, var(--lcars-amber) 44% 100% ); border-radius: 0 0 0 4px; } /* ----- Main header ----- */ [data-theme="lcars"] .top-header { background: #000; border-bottom: none; padding: 0.85rem 1rem 0.75rem; align-items: stretch; position: relative; } [data-theme="lcars"] .top-header::before { content: "WHISKEY COMPANY · LCARS INTERFACE"; position: absolute; left: calc(var(--sidebar-width) + 1rem); top: 0.15rem; font-size: 0.65rem; letter-spacing: 0.16em; color: var(--lcars-purple); text-transform: uppercase; pointer-events: none; } [data-theme="lcars"] .main-content { background: #000; } [data-theme="lcars"] .header-logo { background: var(--lcars-purple); border-radius: 0 0 1.5rem 0; padding: 0.35rem 1rem 0.5rem 0.75rem; margin-right: 0.75rem; } [data-theme="lcars"] .header-logo img { filter: brightness(0); height: 28px; } [data-theme="lcars"] .top-nav a { color: var(--lcars-peach); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: 1rem; } [data-theme="lcars"] .top-nav a:hover { background: #1a1008; color: var(--lcars-amber); } [data-theme="lcars"] .user-chip { background: #0d0d14; border: 2px solid var(--lcars-cyan); border-radius: 1.25rem 0 0 1.25rem; color: var(--lcars-peach); padding: 0.25rem 0.85rem; } [data-theme="lcars"] .user-chip .ic-name { color: var(--lcars-amber); text-transform: uppercase; } [data-theme="lcars"] .user-chip .role-badge { background: var(--lcars-purple); color: #000; border-radius: 0.75rem; padding: 0.1rem 0.5rem; font-size: 0.7rem; text-transform: uppercase; } [data-theme="lcars"] .theme-toggle { background: var(--lcars-amber); color: #000; border: none; border-radius: 1rem 0 0 1rem; font-weight: 700; } [data-theme="lcars"] .theme-toggle:hover { background: var(--lcars-peach); border-color: transparent; } /* ----- Page content ----- */ [data-theme="lcars"] .page-content { background: #000; } [data-theme="lcars"] .page-title { color: var(--lcars-amber); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; border-left: 10px solid var(--lcars-purple); padding-left: 0.75rem; margin-bottom: 1rem; } /* ----- Cards ----- */ [data-theme="lcars"] .card { background: #0a0a10; border: 2px solid var(--lcars-amber-dim); border-radius: 0 1.5rem 0 1.5rem; box-shadow: none; position: relative; } [data-theme="lcars"] .card::before { content: ""; position: absolute; top: -2px; left: 1.5rem; right: 2.5rem; height: 6px; background: var(--lcars-amber); border-radius: 0 0 4px 4px; pointer-events: none; } /* ----- Tables ----- */ [data-theme="lcars"] table.data-table { border-collapse: separate; border-spacing: 0; width: 100%; } [data-theme="lcars"] table.data-table th { background: var(--lcars-amber); color: #000; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; border: none; padding: 0.55rem 0.75rem; } [data-theme="lcars"] table.data-table th:first-child { border-radius: 0 0 0 0.75rem; } [data-theme="lcars"] table.data-table th:last-child { border-radius: 0 0.75rem 0 0; } [data-theme="lcars"] table.data-table td { border-bottom: 1px solid #221800; color: var(--lcars-peach); background: transparent; } [data-theme="lcars"] table.data-table tr:hover td { background: #140e08; color: var(--lcars-text-bright); } /* ----- Buttons ----- */ [data-theme="lcars"] .btn { border-radius: 1.25rem 0.35rem 1.25rem 0.35rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: inherit; border: none; } [data-theme="lcars"] .btn-primary { background: var(--lcars-amber); color: #000; } [data-theme="lcars"] .btn-primary:hover { background: var(--lcars-peach); color: #000; } [data-theme="lcars"] .btn-secondary { background: var(--lcars-purple); color: #000; } [data-theme="lcars"] .btn-secondary:hover { background: var(--lcars-lilac); color: #000; } [data-theme="lcars"] .btn-danger { background: var(--lcars-red); color: #000; } [data-theme="lcars"] .btn-danger:hover { background: #e08888; color: #000; } [data-theme="lcars"] .btn-sm { border-radius: 1rem 0.25rem 1rem 0.25rem; } /* ----- Forms ----- */ [data-theme="lcars"] .form-group label { color: var(--lcars-cyan); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; } [data-theme="lcars"] .form-control { background: #000; color: var(--lcars-peach); border: 2px solid var(--lcars-purple); border-radius: 0; font-family: inherit; } [data-theme="lcars"] .form-control:focus { border-color: var(--lcars-amber); outline: none; box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.25); } [data-theme="lcars"] select.form-control option { background: #000; color: var(--lcars-peach); } /* ----- Alerts ----- */ [data-theme="lcars"] .alert { border-radius: 0 1rem 0 1rem; border-width: 2px; text-transform: none; letter-spacing: 0.03em; } [data-theme="lcars"] .alert-success { background: rgba(153, 204, 102, 0.12); color: #c6e89a; border-color: #99cc66; } [data-theme="lcars"] .alert-error { background: rgba(204, 102, 102, 0.15); color: #f0b0b0; border-color: var(--lcars-red); } [data-theme="lcars"] .alert-info { background: rgba(153, 204, 255, 0.12); color: var(--lcars-cyan); border-color: var(--lcars-cyan); } /* ----- Badges ----- */ [data-theme="lcars"] .badge { border-radius: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } [data-theme="lcars"] .badge-active { background: var(--lcars-amber); color: #000; } [data-theme="lcars"] .badge-inactive { background: #333; color: var(--lcars-muted); } [data-theme="lcars"] .badge-webmaster { background: var(--lcars-purple); color: #000; } [data-theme="lcars"] .badge-officer { background: var(--lcars-cyan); color: #000; } [data-theme="lcars"] .badge-user { background: #444; color: var(--lcars-peach); } /* ----- Login (if theme applied) ----- */ [data-theme="lcars"] .login-page { background: #000; } [data-theme="lcars"] .login-card { background: #0a0a10; border: 3px solid var(--lcars-amber); border-radius: 0 2rem 0 2rem; } [data-theme="lcars"] .login-card h1 { color: var(--lcars-amber); text-transform: uppercase; letter-spacing: 0.14em; } /* ----- Public header ----- */ [data-theme="lcars"] .public-header { background: #000; border-bottom: 4px solid var(--lcars-amber); } [data-theme="lcars"] body.public-page { background: #000; } /* ----- Markdown content ----- */ [data-theme="lcars"] .notice-content h1, [data-theme="lcars"] .notice-content h2, [data-theme="lcars"] .notice-content h3 { color: var(--lcars-amber); text-transform: uppercase; letter-spacing: 0.08em; } [data-theme="lcars"] .notice-content a { color: var(--lcars-cyan); } [data-theme="lcars"] .notice-content code { background: #1a1008; color: var(--lcars-peach); border: 1px solid var(--lcars-amber-dim); } [data-theme="lcars"] .notice-content pre { background: #0a0a10; border-left: 6px solid var(--lcars-purple); } [data-theme="lcars"] .notice-content blockquote, [data-theme="lcars"] .md-blockquote { border-left: 6px solid var(--lcars-cyan); background: #0a0a14; color: var(--lcars-peach); } [data-theme="lcars"] hr { border: none; height: 4px; background: linear-gradient(90deg, var(--lcars-amber), var(--lcars-purple), var(--lcars-cyan)); border-radius: 2px; } /* ----- Misc text helpers ----- */ [data-theme="lcars"] .text-muted { color: var(--lcars-muted) !important; } /* Scrollbars */ [data-theme="lcars"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="lcars"] ::-webkit-scrollbar-track { background: #000; } [data-theme="lcars"] ::-webkit-scrollbar-thumb { background: var(--lcars-amber-dim); border-radius: 4px; } [data-theme="lcars"] ::-webkit-scrollbar-thumb:hover { background: var(--lcars-amber); } /* Unlock toast */ .lcars-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; background: var(--lcars-amber, #ff9900); color: #000; font-family: "Antonio", system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.75rem 1.25rem; border-radius: 0 1rem 0 1rem; box-shadow: 0 0 24px rgba(255, 153, 0, 0.45); animation: lcars-toast-in 0.35s ease-out; } @keyframes lcars-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* LOA rows – red shine fitting LCARS amber/black UI */ [data-theme="lcars"] table.data-table tr.row-loa td { background: linear-gradient( 90deg, rgba(204, 102, 102, 0.35) 0%, rgba(153, 40, 40, 0.18) 40%, rgba(204, 102, 102, 0.28) 100% ) !important; box-shadow: inset 4px 0 0 #cc6666; color: var(--lcars-peach); } [data-theme="lcars"] table.data-table tr.row-loa:hover td { background: linear-gradient( 90deg, rgba(224, 120, 120, 0.45) 0%, rgba(153, 40, 40, 0.25) 40%, rgba(224, 120, 120, 0.35) 100% ) !important; } [data-theme="lcars"] .badge-loa { background: #cc6666; color: #000; }