/* ===================================================================== Land EMI — Theme extensions Layered on top of app.css. All dimensions controlled by HTML attrs: data-theme-preset="default|ocean|forest|sunset|midnight|rose" data-theme-density="compact|cozy|spacious" data-theme-size="sm|md|lg" data-motion="full|reduced" All preferences are cookie-persisted by theme.js. ===================================================================== */ /* ── Colour presets (override brand palette) ───────────────────── */ /* Ocean — teal/cyan */ [data-theme-preset="ocean"] { --brand: #0ea5e9; --brand-600: #0284c7; --brand-700: #0369a1; --brand-50: #f0f9ff; --sidebar-bg: #0c4a6e; --sidebar-active: #075985; } [data-theme="dark"][data-theme-preset="ocean"] { --sidebar-bg: #061e2d; --sidebar-active: #0c2a3e; } /* Forest — emerald/green */ [data-theme-preset="forest"] { --brand: #10b981; --brand-600: #059669; --brand-700: #047857; --brand-50: #ecfdf5; --sidebar-bg: #064e3b; --sidebar-active: #065f46; } [data-theme="dark"][data-theme-preset="forest"] { --sidebar-bg: #022c22; --sidebar-active: #03362a; } /* Sunset — warm orange */ [data-theme-preset="sunset"] { --brand: #f97316; --brand-600: #ea580c; --brand-700: #c2410c; --brand-50: #fff7ed; --sidebar-bg: #431407; --sidebar-active: #5c1a08; } [data-theme="dark"][data-theme-preset="sunset"] { --sidebar-bg: #2a0c05; --sidebar-active: #3b1108; } /* Midnight — deep indigo */ [data-theme-preset="midnight"] { --brand: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --brand-50: #eef2ff; --sidebar-bg: #1e1b4b; --sidebar-active: #312e81; } [data-theme="dark"][data-theme-preset="midnight"] { --sidebar-bg: #0a0722; --sidebar-active: #1a1542; } /* Rose — vibrant pink/red */ [data-theme-preset="rose"] { --brand: #e11d48; --brand-600: #be123c; --brand-700: #9f1239; --brand-50: #fff1f2; --sidebar-bg: #4c0519; --sidebar-active: #6b0e2b; } [data-theme="dark"][data-theme-preset="rose"] { --sidebar-bg: #300311; --sidebar-active: #450820; } /* Platinum — sophisticated silver/slate */ [data-theme-preset="platinum"] { --brand: #64748b; --brand-600: #475569; --brand-700: #334155; --brand-50: #f8fafc; --brand-rgb: 100,116,139; --grad-brand: linear-gradient(135deg, #64748b 0%, #475569 100%); --grad-sidebar: linear-gradient(180deg, #1a1f2e 0%, #0f1219 100%); --sidebar-active: #2a3040; --shadow-brand: 0 4px 18px rgba(100,116,139,.3); } [data-theme="dark"][data-theme-preset="platinum"] { --grad-sidebar: linear-gradient(180deg, #0d1019 0%, #060a10 100%); --sidebar-active: #1a202e; } /* Aurora — violet/cyan gradient */ [data-theme-preset="aurora"] { --brand: #8b5cf6; --brand-600: #7c3aed; --brand-700: #6d28d9; --brand-50: #f5f3ff; --brand-rgb: 139,92,246; --grad-brand: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%); --grad-sidebar: linear-gradient(180deg, #1a0a3d 0%, #0a0520 100%); --sidebar-active: #2d1260; --shadow-brand: 0 4px 18px rgba(139,92,246,.35); } [data-theme="dark"][data-theme-preset="aurora"] { --grad-sidebar: linear-gradient(180deg, #0e0520 0%, #04020f 100%); --sidebar-active: #1e0a40; } /* Gradient sidebar overrides for existing presets */ [data-theme-preset="ocean"] { --grad-sidebar: linear-gradient(180deg, #0c4a6e 0%, #061424 100%); --brand-rgb: 14,165,233; --shadow-brand: 0 4px 18px rgba(14,165,233,.32); } [data-theme="dark"][data-theme-preset="ocean"] { --grad-sidebar: linear-gradient(180deg, #061e2d 0%, #020c16 100%); } [data-theme-preset="forest"] { --grad-sidebar: linear-gradient(180deg, #064e3b 0%, #011f18 100%); --brand-rgb: 16,185,129; --shadow-brand: 0 4px 18px rgba(16,185,129,.3); } [data-theme="dark"][data-theme-preset="forest"] { --grad-sidebar: linear-gradient(180deg, #022c22 0%, #010e0c 100%); } [data-theme-preset="sunset"] { --grad-sidebar: linear-gradient(180deg, #431407 0%, #180702 100%); --brand-rgb: 249,115,22; --shadow-brand: 0 4px 18px rgba(249,115,22,.3); } [data-theme="dark"][data-theme-preset="sunset"] { --grad-sidebar: linear-gradient(180deg, #2a0c05 0%, #100402 100%); } [data-theme-preset="midnight"] { --grad-sidebar: linear-gradient(180deg, #1e1b4b 0%, #07060f 100%); --brand-rgb: 99,102,241; --shadow-brand: 0 4px 18px rgba(99,102,241,.32); } [data-theme="dark"][data-theme-preset="midnight"] { --grad-sidebar: linear-gradient(180deg, #0a0722 0%, #030209 100%); } [data-theme-preset="rose"] { --grad-sidebar: linear-gradient(180deg, #4c0519 0%, #1a0208 100%); --brand-rgb: 225,29,72; --shadow-brand: 0 4px 18px rgba(225,29,72,.3); } [data-theme="dark"][data-theme-preset="rose"] { --grad-sidebar: linear-gradient(180deg, #300311 0%, #120105 100%); } /* Default preset does not override anything (uses blue from app.css) */ /* ── Density ────────────────────────────────────────────────────── */ [data-theme-density="compact"] { --topbar-h: 52px; --radius: 8px; --radius-sm: 5px; --radius-lg: 11px; } [data-theme-density="compact"] body { font-size: 13px; line-height: 1.45; } [data-theme-density="compact"] .card__header, [data-theme-density="compact"] .card__body { padding: .6rem .85rem; } [data-theme-density="compact"] .btn { padding: .38rem .7rem; font-size: .82rem; } [data-theme-density="compact"] .btn-sm { padding: .28rem .55rem; font-size: .75rem; } [data-theme-density="compact"] .sidebar__link { padding: .42rem .65rem; } [data-theme-density="compact"] .sidebar__group > summary { padding: .5rem .65rem; } [data-theme-density="compact"] .form-control, [data-theme-density="compact"] .form-select { padding: .4rem .6rem; font-size: .85rem; } [data-theme-density="spacious"] { --topbar-h: 68px; --radius: 14px; --radius-sm:10px; --radius-lg:18px; } [data-theme-density="spacious"] body { font-size: 15px; line-height: 1.65; } [data-theme-density="spacious"] .card__header, [data-theme-density="spacious"] .card__body { padding: 1.25rem 1.5rem; } [data-theme-density="spacious"] .btn { padding: .7rem 1.25rem; } [data-theme-density="spacious"] .btn-sm { padding: .5rem .9rem; font-size: .9rem; } [data-theme-density="spacious"] .sidebar__link { padding: .7rem 1rem; } [data-theme-density="spacious"] .sidebar__group > summary { padding: .85rem 1rem; } [data-theme-density="spacious"] .form-control, [data-theme-density="spacious"] .form-select { padding: .7rem .9rem; } /* "cozy" is default — no overrides */ /* ── Font size ──────────────────────────────────────────────────── */ [data-theme-size="sm"] body { font-size: 13px !important; } [data-theme-size="md"] body { font-size: 14px !important; } /* default */ [data-theme-size="lg"] body { font-size: 16px !important; line-height: 1.6; } [data-theme-size="xl"] body { font-size: 18px !important; line-height: 1.65; } /* ── Reduced motion ─────────────────────────────────────────────── */ [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { :root { --trans: 0ms; } } /* ── Theme drawer (right slide-out) ────────────────────────────── */ .theme-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 90vw; background: var(--bg-elev); box-shadow: -10px 0 40px rgba(0,0,0,.2); z-index: 9998; transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; border-left: 1px solid var(--border); } .theme-drawer.is-open { transform: translateX(0); } .theme-drawer__overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 9997; opacity: 0; pointer-events: none; transition: opacity .2s; } .theme-drawer__overlay.is-open { opacity: 1; pointer-events: auto; } .theme-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .theme-drawer__title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; } .theme-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; } .theme-drawer__section { padding: .75rem 0 1rem; border-bottom: 1px solid var(--border); } .theme-drawer__section:last-child { border-bottom: none; } .theme-drawer__section-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .6rem; } /* Segmented button group (used for mode, density, size) */ .td-segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: .4rem; } .td-segment { padding: .5rem .35rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; text-align: center; font-size: .8rem; font-weight: 500; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: .25rem; transition: border-color .15s, background .15s, transform .1s; } .td-segment:hover { border-color: var(--brand); } .td-segment:active { transform: scale(.97); } .td-segment.is-active { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); font-weight: 600; } [data-theme="dark"] .td-segment.is-active { background: rgba(37,99,235,.15); color: #fff; } .td-segment__icon { font-size: 1.15rem; } /* Color preset swatches */ .td-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; } .td-preset { padding: .7rem .5rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; text-align: center; font-size: .75rem; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: .4rem; transition: all .15s; } .td-preset__swatch { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.2); } [data-theme="dark"] .td-preset__swatch { box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.4); } .td-preset:hover { transform: translateY(-2px); border-color: var(--text-faint); } .td-preset.is-active { border-color: currentColor; background: var(--bg-elev); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } /* Preset-specific swatch colors */ .td-preset--default { color: #2563eb; } .td-preset--default .td-preset__swatch { background: linear-gradient(135deg,#2563eb,#6366f1); } .td-preset--ocean { color: #0ea5e9; } .td-preset--ocean .td-preset__swatch { background: linear-gradient(135deg,#0ea5e9,#06b6d4); } .td-preset--forest { color: #10b981; } .td-preset--forest .td-preset__swatch { background: linear-gradient(135deg,#10b981,#059669); } .td-preset--sunset { color: #f97316; } .td-preset--sunset .td-preset__swatch { background: linear-gradient(135deg,#f97316,#ef4444); } .td-preset--midnight { color: #6366f1; } .td-preset--midnight .td-preset__swatch { background: linear-gradient(135deg,#6366f1,#312e81); } .td-preset--rose { color: #e11d48; } .td-preset--rose .td-preset__swatch { background: linear-gradient(135deg,#e11d48,#be123c); } .td-preset--platinum { color: #64748b; } .td-preset--platinum .td-preset__swatch { background: linear-gradient(135deg,#94a3b8,#475569); } .td-preset--aurora { color: #8b5cf6; } .td-preset--aurora .td-preset__swatch { background: linear-gradient(135deg,#8b5cf6,#06b6d4); } /* Toggle switch */ .td-toggle { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; } .td-toggle__label { font-size: .88rem; color: var(--text); } .td-toggle__hint { font-size: .72rem; color: var(--text-muted); } .td-switch { position: relative; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; } .td-switch input { opacity: 0; width: 0; height: 0; } .td-switch__slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 22px; transition: background .15s; } .td-switch__slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .td-switch input:checked + .td-switch__slider { background: var(--brand); } .td-switch input:checked + .td-switch__slider::before { transform: translateX(18px); } .td-drawer__footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; } .td-drawer__footer .btn { flex: 1; justify-content: center; } /* Topbar theme trigger */ .theme-trigger-btn { position: relative; } /* ── Glassmorphism theme drawer (dark mode) ─────────────────────── */ [data-theme="dark"] .theme-drawer { background: rgba(15,23,42,.85); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ── Premium preset active ring variants ────────────────────────── */ .td-preset--platinum.is-active { box-shadow: 0 0 0 3px rgba(100,116,139,.3); border-color: #64748b; } .td-preset--aurora.is-active { box-shadow: 0 0 0 3px rgba(139,92,246,.3); border-color: #8b5cf6; } /* ── Preset label inside swatch ─────────────────────────────────── */ .td-preset .td-preset__name { font-size: .68rem; font-weight: 600; color: var(--text-muted); line-height: 1.2; } .td-preset.is-active .td-preset__name { color: inherit; }