/* assets/theme.css Modern "NEO" theme — app-like, glassy, OS-dark aware ---------------------------------------------------- */ /* ---- Base tokens (global geometry, shadows, focus) ---- */ :root { color-scheme: light dark; /* allow browser UI to adapt to OS */ --radius-sm: .6rem; --radius-md: 1rem; --radius-lg: 1.2rem; --radius-xl: 1.6rem; --shadow-1: 0 6px 18px rgba(17,24,39,.06); --shadow-2: 0 10px 30px rgba(17,24,39,.10); --shadow-3: 0 24px 60px rgba(17,24,39,.14); --focus: 0 0 0 3px rgba(255,138,66,.28); } /* ------------------------------------------------------- NEO (light) — active when ------------------------------------------------------- */ :root[data-theme="neo"]{ /* Palette */ --primary: #ff8a42; --on-primary: #ffffff; --secondary: #ffb742; --on-secondary: #1a1a1a; --bg: #f7f8fb; --surface: #ffffff; /* base cards */ --surface-2: rgba(255,255,255,.75);/* glass layer */ --outline: rgba(19,20,24,.08); --text: #11151a; --text-muted: #5f6b7a; /* Effects */ --accent-grad: linear-gradient(135deg,#ff8a42 0%,#ffb742 100%); --glass-border: 1px solid rgba(255,255,255,.6); --glass-bg: rgba(255,255,255,.72); --glass-blur: blur(16px); } /* ------------------------------------------------------- NEO (dark) — follows OS: prefers-color-scheme: dark ------------------------------------------------------- */ @media (prefers-color-scheme: dark){ :root[data-theme="neo"]{ --primary: #ffb46a; --on-primary: #0f1116; --secondary: #ffd083; --on-secondary: #0f1116; --bg: #0f1116; /* page background */ --surface: #171a20; /* cards/panels */ --surface-2: rgba(23,26,32,.72); --outline: rgba(255,255,255,.10); --text: #e8ecf4; --text-muted: #a6b0c0; --accent-grad: linear-gradient(135deg,#ff9b4f 0%,#ffc36a 100%); --glass-border: 1px solid rgba(255,255,255,.14); --glass-bg: rgba(16,18,24,.65); --glass-blur: blur(16px); --shadow-1: 0 8px 22px rgba(0,0,0,.45); --shadow-2: 0 18px 40px rgba(0,0,0,.55); --shadow-3: 0 36px 80px rgba(0,0,0,.6); } } /* ------------------------------------------------------- Base element styles (inherit NEO tokens) ------------------------------------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"; background: radial-gradient(1200px 900px at 10% -10%, rgba(255,183,66,.12), transparent 60%), radial-gradient(900px 700px at 110% 10%, rgba(255,138,66,.10), transparent 55%), var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } /* Links */ a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Layout helpers */ .container { max-width: 1100px; margin: 0 auto; padding: 16px; } /* Cards / Panels */ .card { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .card.pad { padding: 16px; } /* Optional glass card */ .glass { background: var(--surface-2); backdrop-filter: var(--glass-blur); border: var(--glass-border); box-shadow: var(--shadow-2); } /* Borders / rounding */ .border { border: 1px solid var(--outline); } .rounded-2xl { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-sm); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--outline); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, transform .02s ease, filter .18s ease; box-shadow: var(--shadow-1); } .btn:hover { box-shadow: var(--shadow-2); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--focus); } .btn-primary { background: var(--accent-grad); color: var(--on-primary); border-color: transparent; box-shadow: 0 6px 16px rgba(255,138,66,.35); transition: filter .15s ease, box-shadow .2s ease, background .2s ease; } .btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-3); } .btn-primary:active { filter: brightness(0.95); transform: translateY(1px); } /* Dark mode override — improve visibility */ @media (prefers-color-scheme: dark) { :root[data-theme="neo"] .btn-primary { background: linear-gradient(135deg, #ff9b4f, #ffc36a); color: #111; /* dark text on lightish background */ } :root[data-theme="neo"] .btn-primary:hover { background: linear-gradient(135deg, #ffb366, #ffd699); color: #000; /* better contrast */ } :root[data-theme="neo"] .btn-primary:active { background: linear-gradient(135deg, #ff984f, #ffbe72); color: #000; } } .btn-emerald { background: var(--secondary); color: var(--on-secondary); border-color: transparent; } .btn-danger { background: #d93025; color: #fff; border-color: transparent; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--outline); } /* Badges / Pills */ .badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--outline); } .badge-ok { background: color-mix(in oklab, #86efac 20%, transparent); color: #16a34a; border-color: color-mix(in oklab, #86efac 40%, transparent); } .badge-warn { background: color-mix(in oklab, #fbbf24 20%, transparent); color: #d97706; border-color: color-mix(in oklab, #fbbf24 40%, transparent); } .badge-muted{ color: var(--text-muted); } /* Inputs */ input[type="text"], input[type="number"], input[type="password"], input[type="file"], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--outline); border-radius: .9rem; background: var(--surface); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; } input::placeholder, textarea::placeholder { color: var(--text-muted); } input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--focus), 0 2px 10px rgba(255,138,66,.12); border-color: color-mix(in oklab, var(--primary) 30%, transparent); } /* Tables */ .table { width: 100%; border-collapse: collapse; background: var(--surface); } .table th, .table td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--outline); } .table thead th { font-weight: 600; color: var(--text-muted); border-top: none; } /* Tiles for dashboards */ .tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); } .tile { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-xl); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1); transition: transform .18s ease, box-shadow .18s ease; } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ :root[data-theme="neo"] *, :root[data-theme="neo"] *::before, :root[data-theme="neo"] *::after{ transition: none !important; animation: none !important; } } /* === Neo dark adjustment (fix light buttons/panels in dark mode) === */ @media (prefers-color-scheme: dark) { :root[data-theme="neo"] { --bg: #0d1117; --surface: #1a1f26; --surface-2: #222831; --outline: rgba(255,255,255,0.08); --text: #f1f3f5; --text-muted: #a0a4ab; } /* Button / panel fixes */ :root[data-theme="neo"] .btn, :root[data-theme="neo"] .card, :root[data-theme="neo"] .accordion-header { background: var(--surface); color: var(--text); border-color: var(--outline); } :root[data-theme="neo"] .btn:hover, :root[data-theme="neo"] .card:hover, :root[data-theme="neo"] .accordion-header:hover { background: var(--surface-2); } /* Disabled buttons (e.g., ID Cards) */ :root[data-theme="neo"] .btn[disabled], :root[data-theme="neo"] button[disabled], :root[data-theme="neo"] .disabled { background: var(--surface-2); color: var(--text-muted); border-color: var(--outline); opacity: 0.6; } /* Collapsible headers (Students label) */ :root[data-theme="neo"] summary, :root[data-theme="neo"] .collapsible-header { background: var(--surface); color: var(--text); border-color: var(--outline); } }