/* Satoshi (Fontshare) and Source Serif 4 (Google Fonts) — the exact pair
named in the Planit brand style guide — are loaded via wrapping a real in template-generated copy (e.g. dashboard.js's "add your first
class") fell back to the browser default blue. Invisible against the old
purple-heavy palette; a hard miss against this one. */
a {
color: var(--primary-light);
}
a:hover {
color: var(--primary-hover);
}
/* One global focus ring, applied everywhere a more specific component rule
doesn't already define its own (a handful of inputs did — .search-bar,
.hero-command-bar, .nova-input, .settings-avatar-clickable, .text-input,
.select-input). Everything else — every nav link, icon button, and chip
— was silently falling back to the browser default outline, measured at
~1.1-1.2:1 contrast against this app's dark backgrounds (WCAG requires
3:1): technically present, not actually visible to a keyboard user.
Reuses --shadow-focus so it matches the ring the few already-covered
elements use. box-shadow follows whatever border-radius the element
already has on its own, so this doesn't need to redeclare one. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
/* =========================
Page loading veil — the app shell itself stays visible underneath (just
blurred + dimmed) rather than hidden outright, and the veil fades in and
out via opacity/filter transitions instead of snapping on/off with the
.app-ready class — so a page load reads as one continuous soft
transition, not an instant swap. Real data still replaces "Loading…"
placeholders before .app-ready lands (see js/app.js), the blur+dim just
means whatever's under it during that window is illegible anyway rather
than a harsh flash of raw placeholder text. login.html has no .container
and adds .app-ready to synchronously (it never waits on Store),
so it's never meaningfully gated by this even without special-casing it
below.
Redesigned 2026-08-14, direct request ("too much... more minimal,
sleek, smooth") — replaces a heavier combination (a full-viewport dark
scrim + a centered spinning ring, stacked on top of the content's own
blur+dim) with a single slim gold bar sweeping across the very top
edge, the same restrained pattern Linear/GitHub/YouTube use for their
own page transitions. One moving element instead of three simultaneous
ones (scrim fade, spinner fade, spinner spin) is also a real, not just
perceived, saving during the exact moment the page is already busiest
parsing/executing scripts and waiting on auth+Store — one fewer
continuously-animating layer for the compositor to keep up during that
window. The scrim's old job (blocking clicks on stale content while
loading) didn't need its own element: .container below already goes
pointer-events:none for the same duration.
Tightened once already, 2026-08-11 (.4s → .2s, 8px blur → 5px) — this
pass goes further still (.2s → .15s, 5px → 3px blur, brightness .55 →
.82) now that there's no separate dark scrim underneath doing a second
round of dimming on top of the content's own filter; on the fast path
(Store.init()'s own 45s freshness window short-circuits most in-app
navigation to an effectively-instant resolve — see store.js) this veil
is barely on screen long enough to be seen at all, so shaving its own
cost matters more than shaving its duration further. */
/* .header no longer needs its own selector here, 2026-08-14 — it's a
descendant of .container now (inside .content-column), not a sibling
bar above it, so blurring .container already blurs .header along
with everything else in one paint instead of two. */
.container{
transition:filter .15s ease;
}
/* No blur/dim here any more, 2026-08-16 — direct request: sidebar and
header should stay fully visible and normal during a page load,
never blurred, only the actual page content should be hidden-then-
revealed. .container still gates interaction for the whole page
while data isn't ready yet (pointer-events:none/user-select:none) —
that's still correct, a click landing mid-load on the sidebar or
header is exactly as premature as one landing on page content — it
just no longer visually dims those two areas along with it. */
body:not(.app-ready) .container{
pointer-events:none;
user-select:none;
}
/* The actual "blank until ready" treatment, scoped to .content only —
.content's own direct children (each page's top-level sections: the
toolbar, each workspace section, Nova's own chat column) start fully
invisible and pop straight to visible the instant .app-ready lands,
no transition of their own here — Common.revealData()'s existing
fine-grained cascade (.reveal-in, staggered fade+rise on every real
data element within) is what the student actually sees animate in;
this is just the outer switch that keeps all of it hidden until that
cascade is ready to begin, rather than sitting fully rendered (just
blurred) underneath the veil the whole time. */
body:not(.app-ready) .content > *{
opacity:0;
}
body.app-ready .content > *{
opacity:1;
}
/* The slim top-edge sweep — a soft gold bar, one third of the viewport
wide, gliding left to right and fading at both ends rather than a
hard-edged block. Unconditional (like the old scrim/spinner) so the
fade itself is transitioned, not snapped. */
body::before{
content:"";
position:fixed;
top:0;
left:0;
z-index:9000;
width:100%;
height:3px;
background:linear-gradient(90deg, transparent, var(--primary), transparent);
background-size:34% 100%;
background-repeat:no-repeat;
background-position:-34% 0;
opacity:0;
pointer-events:none;
transition:opacity .15s ease;
}
body:not(.app-ready)::before{
opacity:1;
animation:app-veil-sweep 1.1s ease-in-out infinite;
}
@keyframes app-veil-sweep{
0%{ background-position:-34% 0; }
100%{ background-position:134% 0; }
}
/* =========================
Data reveal — 2026-08-16 direct request: the veil above already
handles the page-level transition ("there is a minimal animation/
transition. Good.") but everything *inside* it — stat numbers, cards,
the sidebar streak/profile, list rows — was appearing all at once the
instant the veil cleared, one flat unanimated swap. js/modules/
common.js#revealData applies this class, once per page load, to a
deliberately broad set of real data containers (see that function's
own comment for the exact list) with a small incremental delay per
element so they settle into place in a soft cascade instead of
popping in together. Same motion language everywhere: a short rise +
fade, nothing bouncier — "meaningful and minimalistic," not a flourish.
========================= */
@keyframes data-reveal{
from{ opacity:0; transform:translateY(8px); }
to{ opacity:1; transform:translateY(0); }
}
.reveal-in{
/* .4s -> .56s (~40% slower), 2026-08-16 direct request — the page
now starts genuinely blank (see body:not(.app-ready) .content > *
above) rather than blurred-but-visible, so the cascade itself is
what the student watches happen; a little more time to actually
see it land, per the request. */
animation:data-reveal .56s cubic-bezier(.16,.8,.3,1) both;
}
@media (prefers-reduced-motion: reduce){
.reveal-in{
animation:none;
}
}
/* =========================
Layout
========================= */
.container {
position: relative;
z-index: 1;
display: flex;
/* No longer minus --header-height, 2026-08-14 — the header isn't a
page-wide bar above this row anymore (see .content-column below),
so .sidebar now stretches the full viewport height, direct
request ("the sidebar should reach all the way to the top of the
screen"). */
height: 100vh;
overflow: hidden;
}
/* New wrapper, 2026-08-14, alongside the header's move out of a
page-wide bar and into this column: .header now sits above .content
but only spans the content column's own width, to the right of the
full-height sidebar, rather than the whole page. */
.content-column{
display:flex;
flex-direction:column;
flex:1;
min-width:0;
min-height:0;
height:100%;
}
.content {
flex: 1;
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
min-width: 0;
padding: var(--space-10);
overflow-y: auto;
}
/* =========================
Header
========================= */
/* No longer a page-wide bar, 2026-08-14 direct request ("get rid of the
top bar itself") — this now sits inside .content-column, to the right
of the full-height sidebar, so it only spans the content area's own
width. The brand lockup that used to be its first child moved to
.sidebar-logo below; with two children left (search, header-right),
the same justify-content:space-between now puts search at this bar's
own left edge and the profile/notifications cluster at its own right
edge — still "search bar, user details in top right," just scoped to
the content column instead of the full page. No longer sticky —
nothing above it scrolls (.content-column itself doesn't scroll, only
.content below does), so position:sticky had nothing to stick against
even before this change. */
.header {
/* position:relative + z-index, 2026-08-16 — real bug: the
notifications dropdown (.dropdown-panel, z-index:var(--z-dropdown))
is a child of .header-icon-btn, and that button gets a hover
transform (translateY(-2px), below) — a CSS transform always
creates a new stacking context regardless of z-index, which traps
the dropdown's own z-index *inside* that small context rather than
letting it compete directly against page content. .header itself
had no position/z-index of its own, so with no explicit stacking
context to anchor to, the whole header (dropdown included) fell
back to plain DOM-order stacking against its siblings — and lost
to .dashboard-rail, which at the time was position:sticky (later
in the DOM) and rendered on top of it. Confirmed via screenshot,
not assumed: clicking the bell (which leaves the cursor hovering
it, triggering the transform) showed the dropdown's own bottom
half hidden behind the Nova rail card. Elevating .header itself to
the dropdown tier fixes it regardless of whether that inner
transform is active. Still needed after .dashboard-rail's own
position:sticky was removed the same day (see that rule's own
comment) — the transform-stacking-context problem this also fixes
is unrelated to sticky and applies on every page, not just this
one competing element on the dashboard. */
position: relative;
z-index: var(--z-dropdown);
display: flex;
justify-content: space-between;
align-items: center;
height: var(--header-height);
padding: 0 24px;
background: rgba(43,45,49,.82);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255,255,255,.05);
}
/* The brand lockup, blended into the sidebar's own top rather than
boxed in a separate header bar, 2026-08-14 direct request, replacing
the old header's .logo/.logo-text (both fully removed — no page's
markup references either anymore). Same .logo-mark asset the old
header used, just no tagline: "Focus · Plan · Achieve" is dropped
entirely per the same request, not hidden responsively like the old
.logo-text p used to be. Sized down from the old header's 48px mark /
24px wordmark to fit the sidebar's own 196px width without crowding —
this is the one place in the sidebar that isn't reusing an existing
pattern verbatim, because nothing else in the sidebar previously
needed to fit a two-part brand lockup into this narrow a column. The
hover flourish (halo + mark lift, both quiet until touched per the
Rarity Rule) is carried over from the old .logo/.logo:hover .logo-mark
pair, just rescaled for this smaller mark. */
.sidebar-logo{
position:relative;
z-index:0;
display:flex;
align-items:center;
gap:10px;
margin-bottom:var(--space-2);
color:inherit;
text-decoration:none;
transition:transform var(--transition);
}
/* A tight, true circle centered on just the mark, 2026-08-15 — the
glow used to be `inset` stretched across .sidebar-logo's whole row
(icon + "Planit" wordmark), and a fully-rounded border-radius on a
wide/short box like that renders as a stretched pill, not a glow —
it read as smeared and off-center rather than a deliberate accent.
Sized and positioned off the icon alone (34px mark, this circle 18px
larger all round) so the halo reads as one focused light source
behind the mark, not a vague haze behind mixed content. */
.sidebar-logo::before{
content:"";
position:absolute;
left:-9px;
top:50%;
width:52px;
height:52px;
transform:translateY(-50%);
z-index:-1;
border-radius:50%;
background:radial-gradient(circle, rgba(200, 164, 110,.32), transparent 72%);
opacity:0;
transition:opacity var(--transition);
}
.sidebar-logo:hover::before{
opacity:1;
}
.sidebar-logo:hover{
transform:scale(1.02);
}
.sidebar-logo .logo-mark{
width:34px;
height:34px;
}
.sidebar-logo:hover .logo-mark{
filter:drop-shadow(0 0 10px rgba(200, 164, 110,.35));
}
.sidebar-logo-text{
color:var(--text);
font-family:var(--font-serif);
font-size:var(--text-lg);
font-weight:500;
letter-spacing:-.01em;
}
/* The brand mark — the product owner's own rendered artwork
(assets/logo.png: a "P" crossed by a rotated orbital ellipse with a
filled planet dot), used directly as of 2026-08-12 rather than the
inline-SVG recreation this rule used to describe. That recreation
(geometry solved to match the reference, a themed color-mix to
reproduce the reference's own two-tone rendering) is retired — see
Logo & Nova mark in DESIGN.md for why the raster source was preferred
over keeping the vector one current. object-fit:contain since the
source file isn't a tight crop (real padding around the mark itself);
sized a touch larger than the old SVG's 44px to compensate, so the ink
reads at a comparable visual weight instead of looking smaller for
having more breathing room baked into the file. */
.logo-mark {
width: 48px;
height: 48px;
flex-shrink: 0;
object-fit: contain;
display: block;
transition:
transform var(--transition),
filter var(--transition);
}
.header-nav {
position: relative;
}
.search-bar {
width: 360px;
padding: 12px 18px;
color: var(--text);
background: var(--surface-light);
border: 1px solid transparent;
border-radius: 999px;
font-size: var(--text-sm);
outline: none;
transition:
background-color var(--transition),
border-color var(--transition),
box-shadow var(--transition),
width var(--transition-slow);
}
.search-bar:focus {
width: 420px;
background: var(--surface);
border-color: var(--primary);
box-shadow: var(--shadow-focus);
}
.profile {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* Name + role, the same pairing as .sidebar-profile-info's h4/p a few
hundred lines down — that one already differentiates the two lines
(semibold display face vs. small muted caption); this header twin was
missing its own rules entirely and fell back to inheriting one bold
16px size for both "Guest" and its "Student" caption below it. */
.profile-info strong{
display: block;
font-size: var(--text-base);
font-weight: var(--weight-bold);
}
.profile-info p{
font-size: var(--text-xs);
}
/* Neutral by default — this is every person's avatar initial in the app
(the signed-in user's own, plus every friend/leaderboard/suggestion
avatar via the shared .avatar class), not a signal. Under the Rarity
Rule, brass marks progress/action/AI/achievement/active-state; "this is
a person" isn't one of those, so it used to be the single biggest
source of "gold is everywhere" — every avatar in the app, all the time,
regardless of who. */
.avatar{
width:42px;
height:42px;
display:flex;
justify-content:center;
align-items:center;
background:var(--surface-hover);
border-radius:50%;
overflow:hidden;
font-weight:700;
color:var(--text-secondary);
}
.header-right{
display:flex;
align-items:center;
gap:var(--space-4);
}
.header-icon-btn{
position:relative;
width:42px;
height:42px;
display:flex;
justify-content:center;
align-items:center;
font-size:var(--icon-md);
background:var(--surface);
color:var(--text);
border:1px solid var(--border);
border-radius:50%;
cursor:pointer;
transition:
background-color var(--transition),
transform var(--transition),
border-color var(--transition);
}
.header-icon-btn:hover{
background:var(--surface-hover);
border-color:var(--primary);
transform:translateY(-2px);
}
.xp-chip{
display:flex;
align-items:center;
gap:var(--space-2);
padding:4px var(--space-3) 4px 4px;
background:var(--surface);
border:1px solid var(--border);
border-radius:999px;
color:var(--text);
cursor:pointer;
transition:
background-color var(--transition),
transform var(--transition),
border-color var(--transition);
}
.xp-chip:hover{
background:var(--surface-hover);
border-color:var(--primary);
transform:translateY(-1px);
}
/* Injected next to .xp-chip by js/modules/common.js#ensureStreakChip — see
its comment for why this is JS-injected rather than hand-added to every
header block. Color tiers match friends.js's streakTier() exactly. */
.streak-chip{
display:flex;
align-items:center;
gap:6px;
padding:6px 12px;
background:var(--surface);
border:1px solid var(--border);
border-radius:999px;
color:var(--text-secondary);
font-size:var(--text-sm);
font-weight:var(--weight-semibold);
cursor:pointer;
transition:background-color var(--transition), border-color var(--transition), color var(--transition);
}
.streak-chip:hover{
background:var(--surface-hover);
}
.streak-chip .icon{
font-size:var(--icon-sm);
}
/* Matches .xp-chip-value's size exactly — these two chips sit side by side
in the header as the same "stat chip" role, so their numbers read as one
family. Without this the value here fell through to .streak-chip's own
15px base font-size instead of the chip-value role's 13px, a size
mismatch invisible until you look for it. */
.streak-chip-value{
font-size:var(--text-xs);
}
.streak-chip.streak-warm{
color:var(--warning);
border-color:rgba(200, 164, 110,.4);
}
.streak-chip.streak-hot{
color:var(--danger);
border-color:rgba(224, 104, 90,.4);
}
/* Shared bump used by both .xp-chip and .streak-chip — see
gamification.js#renderHeaderChip / common.js#renderStreakChip, which
only add this when the value actually increased this page visit. */
@keyframes chip-bump{
0%{ transform:scale(1); }
40%{ transform:scale(1.1); }
100%{ transform:scale(1); }
}
.chip-bump{
animation: chip-bump .5s var(--ease-bounce);
}
.xp-chip-ring{
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:28px;
height:28px;
border-radius:50%;
background:conic-gradient(var(--primary) calc(var(--progress) * 1%), var(--surface-hover) 0);
}
.xp-chip-ring::before{
content:"";
position:absolute;
inset:3px;
border-radius:50%;
background:var(--surface);
}
.xp-chip-level{
position:relative;
z-index:1;
font-size:var(--text-xs);
font-weight:var(--weight-bold);
}
.xp-chip-value{
font-size:var(--text-xs);
white-space:nowrap;
}
.notification-dot{
position:absolute;
top:8px;
right:8px;
width:8px;
height:8px;
border-radius:50%;
background:var(--danger);
}
.notification-dot::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:var(--danger);
animation:notificationPing 2s ease-out infinite;
}
/* =========================
Sidebar
========================= */
.sidebar {
display: flex;
flex-direction: column;
width: var(--sidebar-width);
padding: var(--space-5);
/* var(--space-3), 2026-08-16 — was a hardcoded 12px (same value as
--space-3's own comfortable default), so density had no effect on
the one gap between the nav list and the streak/profile footer.
Direct feedback: "compact... makes the sidebar less compact." */
gap: var(--space-3);
background-color: var(--surface-light);
/* First layer (painted on top of the rest) is a darkening toward the
bottom — deepened and started earlier 2026-08-15 (was transparent
through 55% to rgba(0,0,0,.22); now 40% to .34) so the "this is
night sky, not just a dark panel" read is clearer, direct request
("make the minimalism space theme more apparent, especially closer
to the bottom"). Star dots brightened the same day (most were
.07-.12, barely visible against --surface-light) and extended
further down the sidebar — the old set stopped at y:530, leaving
the stretch between the nav list and the streak/profile footer
starless on anything but a short viewport; a few more now reach
past y:700 so the sky reads as continuing all the way down, not
thinning out before the horizon glow actually starts. */
/* Opacity bumped a further notch, 2026-08-16 direct request
("increase the presence slightly") — .12-.18 to .17-.24, still the
same faint dots, just a little more readable against
--surface-light than the previous pass left them. */
/* Base darkening deepened again, and a second, faint warm wash added
near the *top* of the sidebar (behind the logo), same 2026-08-16
request ("make the space gradient and ambient coloring... more
apparent and aesthetic"). Previously all the atmosphere lived at
the bottom (this gradient's own dark end, plus .sidebar-glow's
warm wash below) — the top of the sidebar was flat --surface-light
with nothing but stars. A quiet gold radial behind the logo (same
--primary token as every other warm accent in this file, no new
hue introduced) bookends it, so the whole panel reads as one
continuous atmosphere top to bottom rather than dark-at-the-
bottom-only. */
/* Fixed px size, not a percentage, 2026-08-16 real bug caught from a
live screenshot — a percentage-sized radial-gradient here scales
against .sidebar's own full box, which spans the entire viewport
height edge to edge, not just the logo area. On a genuinely tall
window (a common real one, not an edge case) 40% of that full
height reaches hundreds of pixels down, well into the middle of
the nav list — exactly the "glow in random places" being
reported, a diagonal-looking wash crossing behind nav items far
from the logo it was meant to sit behind. A fixed 220x160px stays
genuinely small and anchored near the top corner regardless of
how tall the sidebar itself ends up being. */
background-image:
radial-gradient(220px 160px at 15% 0%, rgba(200,164,110,.12), transparent 70%),
linear-gradient(to bottom, transparent 32%, rgba(0,0,0,.4) 100%),
radial-gradient(1px 1px at 20px 40px, rgba(255,255,255,.24), transparent),
radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,.2), transparent),
radial-gradient(1.5px 1.5px at 140px 60px, rgba(255,255,255,.22), transparent),
radial-gradient(1px 1px at 40px 200px, rgba(255,255,255,.18), transparent),
radial-gradient(1.5px 1.5px at 180px 260px, rgba(255,255,255,.22), transparent),
radial-gradient(1px 1px at 60px 340px, rgba(255,255,255,.2), transparent),
radial-gradient(1px 1px at 155px 390px, rgba(255,255,255,.18), transparent),
radial-gradient(1.5px 1.5px at 25px 470px, rgba(255,255,255,.2), transparent),
radial-gradient(1px 1px at 170px 530px, rgba(255,255,255,.17), transparent),
radial-gradient(1px 1px at 100px 590px, rgba(255,255,255,.19), transparent),
radial-gradient(1.5px 1.5px at 45px 650px, rgba(255,255,255,.22), transparent),
radial-gradient(1px 1px at 165px 700px, rgba(255,255,255,.18), transparent),
radial-gradient(1px 1px at 90px 750px, rgba(255,255,255,.17), transparent);
background-repeat:no-repeat;
overflow-y: auto;
overflow-x: hidden;
}
.sidebar-top {
display: flex;
flex-direction: column;
/* Tightened from --space-3 (12px) 2026-08-12, direct request — the nav
list read as too airy at the narrower sidebar width below.
var(--sidebar-nav-gap), not hardcoded, 2026-08-16 — same density
fix as .nav-btn's own padding above; see that token's comment at
:root. */
gap: var(--sidebar-nav-gap);
/* flex-grow:0 (not flex:1 as before), 2026-08-15 — this list now
takes only its own natural height when there's room, rather than
stretching its own box to fill the sidebar and leaving a wall of
empty space below the last item. min-height:0 + overflow-y:auto is
the real fix for the bug this was found alongside: on a real, not
especially short, browser window (measured failing at 720px tall
— a completely ordinary laptop viewport, not an edge case), the
9 nav items plus the streak/profile section below genuinely don't
both fit, and the old flex:1-on-top layout had no way to express
"shrink me, not the footer" — the whole .sidebar just overflowed
its own bottom edge with no visible scroll affordance, silently
cutting off Resources and the entire profile/Settings row. Now
*this list* is what scrolls internally (min-height:0 is required
for a flex child to shrink below its content size at all) when
space is truly tight, while .sidebar-bottom below always stays
fully on-screen — direct request ("stop the buttons closer to the
bottom from being cut off"), solved structurally rather than by
trimming pixels until today's specific viewport happens to fit. */
flex: 0 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
/* position:relative + z-index:1, 2026-08-16 — real bug, confirmed
from a live screenshot ("the button underneath Progress gets
hidden behind another element"): .sidebar-bottom below is
position:relative;z-index:0 (an explicit stacking value, even
though it's zero), and .sidebar-glow inside it — the horizon
photo — extends well upward past .sidebar-bottom's own top edge
(bottom:-24px on a 340px-tall element). This list had no
position/z-index of its own, so it painted as plain static
in-flow content — and per CSS stacking rules, *any* explicitly
z-indexed positioned element (even z-index:0) always paints above
ordinary static content, regardless of DOM order. Wherever the
glow's own geometric reach happened to overlap this list's last
item or two, the photo painted directly on top of it, hiding
Resources behind the horizon image rather than the two elements
ever actually competing on equal terms. Elevating this list above
.sidebar-bottom's own z-index guarantees nav items are never
covered, regardless of how far the glow's own bleed reaches. */
position: relative;
z-index: 1;
/* Soft fade at the bottom edge only, 2026-08-16 — on a genuinely
short window (measured down to ~600px tall, an ordinary 1366x768
laptop with browser chrome) this list's own internal scroll above
is what keeps Resources/Settings reachable rather than hidden, but
a plain overflow:auto with no visual cue reads as a layout bug:
the last item was getting sliced clean in half at a hard edge,
immediately adjacent to Focus Streak, with nothing suggesting
"scroll for more." A static mask (not JS/scroll-driven — this
list is short enough that a permanent, always-on bottom fade is
simpler and still correct in both states) turns that hard slice
into a deliberate-looking gradient: clipped, it reads as "more
below, scroll"; full height, it's a barely-visible soft edge into
the gap before Focus Streak rather than a flaw. No top fade to
match — the list always starts scrolled to its own top, where
Home is already flush and complete, so fading that edge too would
introduce a clipped look on the one edge that was never actually
cut off. */
mask-image: linear-gradient(to bottom, black calc(100% - 16px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 16px), transparent 100%);
}
.sidebar-bottom{
margin-top:auto;
/* Never the side that shrinks — see .sidebar-top's comment above for
why the nav list is the one that scrolls when space is short,
never this section. */
flex-shrink:0;
position:relative;
z-index:0;
display:flex;
flex-direction:column;
gap:var(--space-4);
}
/* The reference screenshot's ambient glow behind the streak ring and
profile row — a hand-authored planet-horizon curve (bottom-left
weighted rim + scattered stars), on-brand with Nova's own ringed-
planet motif. First pass (2026-08-12) approximated this with a plain
CSS radial-gradient dome and the owner correctly called it out as not
matching the reference — a soft blob read nothing like an asymmetric
lit horizon line. Rebuilt as a real asset instead: authored in SVG
(gradients + blurred stroke for the rim's glow, same technique as
Nova's own art), then rasterized via a headless-browser screenshot at
2x into `assets/sidebar-horizon.png` — no image-generation tool exists
in this environment, so this is hand-drawn vector art turned into a
static PNG, not a photo. Purely decorative: aria-hidden, no layout
impact (position:absolute, sized off .sidebar-bottom which the
z-index above turns into its own stacking context so this can't paint
over the streak ring or profile text below it). */
.sidebar-glow{
position:absolute;
/* Negative, not 0 — .sidebar-bottom sits inside .sidebar's own
padding, so left/right:0 only reached that inset content width.
Bleeding out by var(--space-5) (the padding itself) reaches the
sidebar's true outer edges instead, and .sidebar's own
overflow-x:hidden clips it there cleanly — direct request
("fit the entire width of the sidebar"). */
left:calc(-1 * var(--space-5));
right:calc(-1 * var(--space-5));
bottom:-24px;
overflow:hidden;
pointer-events:none;
/* "Space gradient" backdrop, 2026-08-14 direct request, painted
behind the (now half-opacity, see below) photo so it reads as one
atmospheric scene rather than a faded photo pasted over a flat
panel. Built from the app's own darkest tokens — --background is
a hair cooler/deeper than the sidebar's own --surface-light —
rather than an off-brand blue/purple "space" color, so the depth
is real but still on-brand. The warm gold wash echoes the photo's
own glow and is centered where the photo's brightest corner sits,
so the two layers read as one continuous source of light instead
of a color mismatch showing through the faded photo. */
/* Warm wash strengthened .18 -> .23 and the base gradient's dark end
pushed to pure #000 at the very bottom edge (was --background,
already the app's deepest token but still a lit charcoal, not
black) 2026-08-15 — same "more apparent, especially closer to the
bottom" request as the star field above. */
/* Faint stars, 2026-08-16 direct request ("near the planet horizon
and focus streak") — .sidebar's own star field (above) never
actually reaches here: this element paints its own opaque
backdrop (the linear-gradient below has no transparent stops) on
top of it, so that lower star field is fully hidden behind this
one the moment it starts, no matter how far down it's extended.
These are new dots local to this element instead, listed ahead of
the opaque base gradient so they show through, scattered through
the upper/left sky away from the photo's own bright corona
(78% 100%) so they read as background sky, not clutter over the
lit horizon itself. Same faint opacity range as .sidebar's set. */
/* Star opacity and warm wash both bumped a further notch, 2026-08-16
— same "increase the presence slightly... more apparent and
aesthetic" request as .sidebar's own field and top wash above. */
background:
radial-gradient(1px 1px at 24px 18px, rgba(255,255,255,.22), transparent),
radial-gradient(1px 1px at 68px 52px, rgba(255,255,255,.19), transparent),
radial-gradient(1.5px 1.5px at 120px 30px, rgba(255,255,255,.21), transparent),
radial-gradient(1px 1px at 150px 78px, rgba(255,255,255,.18), transparent),
radial-gradient(1px 1px at 40px 96px, rgba(255,255,255,.2), transparent),
radial-gradient(1.5px 1.5px at 96px 118px, rgba(255,255,255,.19), transparent),
radial-gradient(1px 1px at 14px 140px, rgba(255,255,255,.18), transparent),
radial-gradient(1px 1px at 165px 150px, rgba(255,255,255,.16), transparent),
/* A second, tighter "shine" right at the horizon's own bright
point, 2026-08-16 direct request ("a very very faint gradient
or shine of gold/yellow near the planet horizon... for light
effect and slight ambience") — the wash below it is already
warm but broad/diffuse across the whole lower-right quadrant;
this is a small, concentrated glint layered on top of it,
roughly where the photo's own sunrise point sits, so there's a
real (if subtle) highlight to catch the eye there instead of
just ambient warmth spread evenly. Deliberately faint (.14) —
"very very faint" was explicit. */
radial-gradient(45% 30% at 76% 88%, rgba(255,214,150,.14), transparent 70%),
radial-gradient(120% 90% at 78% 100%, rgba(200,164,110,.3), transparent 60%),
/* transparent (was var(--surface-light)) 2026-08-16 — real bug,
direct report ("a slight dip/change in color between the top
and bottom half of the sidebar"). .sidebar's own background
(above) already darkens continuously top to bottom via its own
linear-gradient — by the point .sidebar-glow begins (partway
down, wherever the streak/profile footer starts) that gradient
has already progressed well past its lightest value. Starting
this gradient over at a hardcoded var(--surface-light) reset
the color back to its *lightest* shade right at that boundary,
then immediately began darkening again on its own separate
curve — a real, visible jump lighter then darker again, not a
smooth continuation. transparent lets whatever .sidebar's own
gradient is already showing at that point carry through
uninterrupted, so this gradient's own darkening (toward
var(--background), then #000) reads as a continuation of it
rather than a reset. */
linear-gradient(to bottom, transparent 0%, var(--background) 65%, #000 100%);
/* Required for the star dots above — without it each tiny radial-
gradient tiles across the whole element instead of rendering as
one dot, the same reason .sidebar's own star field (above) sets
this. */
background-repeat:no-repeat;
}
.sidebar-glow img{
display:block;
width:100%;
/* Grown 180px -> 340px, 2026-08-14, matching the owner's reference
screenshot directly: the reference's sidebar glow reads as a much
bigger, bolder presence — more of the photo's own bright corona
visible, not just a thin band at the very bottom. Taller height
here also zooms the crop in further (object-fit:cover scales to
the larger of the two fill ratios, and the container's fixed
narrow width means height is normally the binding one), which is
what makes the glow read as large and vivid instead of a thin
distant sliver. */
height:340px;
object-fit:cover;
object-position:center 38%;
/* Half opacity, 2026-08-14 direct request ("prettify") — lets the
space-gradient backdrop above show through and blend with the
photo instead of sitting as an opaque, fairly literal photograph.
The photo's own black is a true #000; blended at 50% over the
gradient backdrop it also reads as far less of a hard rectangle,
so the top-edge mask fade below is now more insurance than the
load-bearing fix it originally was. */
/* Reduced to ~75% of that, 2026-08-16 direct request — .5 * .75
= .375. */
opacity:.375;
/* The photo's own black is a true #000; the sidebar's background is
var(--surface-light), a lighter charcoal — close enough to read as
"the same dark" everywhere except a thin seam right at the image's
own top edge. Fades that one edge into transparency so the glow
reads as emerging from the sidebar itself, not a pasted rectangle. */
-webkit-mask-image:linear-gradient(to bottom, transparent, black 90px);
mask-image:linear-gradient(to bottom, transparent, black 90px);
}
/* ---- Sidebar Focus Streak — replaces the header's old .streak-chip
(still real, still Store.selectStreakDays(), just relocated and made
the sidebar's one persistent piece of gamification instead of a small
header chip). The header keeps .xp-chip; that one's wired into
Gamification's level-up celebration and wasn't worth breaking just to
match a reference screenshot pixel-for-pixel. ---- */
.sidebar-streak{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
padding:var(--space-4) var(--space-3);
border-top:1px solid var(--border);
text-align:center;
}
.sidebar-streak-label{
font-size:var(--text-2xs);
font-weight:var(--weight-semibold);
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:var(--space-3);
}
.study-ring-md{
width:72px;
height:72px;
}
.study-ring-md::before{
inset:8px;
}
.study-ring-md .study-ring-value{
font-size:var(--text-lg);
font-weight:700;
line-height:1.1;
}
.study-ring-md .study-ring-unit{
display:block;
font-size:9px;
font-weight:600;
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:.04em;
}
.sidebar-streak-caption{
display:flex;
/* flex-start, not center, 2026-08-16 — real bug from a live
screenshot: "Keep it going, {name}." is one anonymous flex item
alongside the flame icon, and at the sidebar's narrow width a
longer real name routinely wraps it onto 2-3 lines. align-
items:center centered the icon against that *entire* multi-line
block's height, so it sat oddly mid-paragraph instead of next to
the first line — the standard "icon beside wrapping text" look
needs the icon anchored to the top, matching where its own line
actually is. */
align-items:flex-start;
gap:5px;
margin-top:var(--space-3);
font-size:var(--text-2xs);
color:var(--text-muted);
line-height:1.4;
}
.sidebar-streak-caption i{
flex-shrink:0;
/* Nudged down to sit on the first line's own baseline now that the
row aligns to flex-start instead of center — a bare icon glyph's
vertical metrics don't naturally line up with surrounding text at
the top of its line box without this. */
margin-top:2px;
color:var(--primary);
font-size:12px;
}
.daily-quote{
padding:var(--space-3) var(--space-2);
margin-bottom:var(--space-2);
border-left:2px solid var(--border);
}
.daily-quote p{
font-size:var(--text-xs);
font-style:italic;
line-height:1.5;
color:var(--text-muted);
}
.daily-quote span{
display:block;
margin-top:4px;
font-size:var(--text-2xs);
font-weight:var(--weight-medium);
color:var(--text-secondary);
}
.sidebar.is-collapsed .daily-quote{
display:none;
}
.action-btn{
display:flex;
align-items:center;
gap:var(--space-3);
padding:var(--space-3);
color:var(--text);
background:var(--surface);
border:1px solid transparent;
border-radius:var(--radius-medium);
text-align:left;
cursor:pointer;
transition:
background-color var(--transition),
transform var(--transition),
border-color var(--transition),
box-shadow var(--transition);
}
.action-btn:hover{
background:var(--surface-hover);
border-color:var(--border);
transform:translateX(6px);
box-shadow:var(--shadow-small);
}
.nav-btn::before{
content:"";
position:absolute;
left:0;
top:6px;
width:4px;
height:calc(100% - 12px);
background:var(--primary);
border-radius:999px;
opacity:0;
transition:
opacity var(--transition);
}
.nav-btn.active::before{
opacity:1;
}
.nav-btn {
position: relative;
display:flex;
align-items:center;
gap:var(--space-3);
/* 10px vertical (was 12px), 2026-08-12 — paired with .sidebar-top's
tightened gap above so the whole nav list reads more compact.
var(--nav-btn-padding-y)/var(--space-3), not hardcoded px,
2026-08-16 — the actual density fix; see that token's own comment
at :root. Horizontal already matched --space-3 (12px) exactly, a
risk-free swap on its own; vertical needed a new dedicated token
since 10px never matched an existing --space-N step. */
padding: var(--nav-btn-padding-y) var(--space-3);
color: var(--text);
background: transparent;
font-size: var(--text-base);
text-align: left;
text-decoration: none;
border: none;
border-radius: var(--radius-medium);
cursor: pointer;
overflow: hidden;
transition:
background-color var(--transition),
color var(--transition),
transform var(--dur-nav) var(--ease-spring);
}
.icon{
font-size:var(--icon-md);
flex-shrink:0;
display:inline-block;
}
.nav-btn:hover {
background-color: var(--surface-hover);
transform: translateX(6px);
}
.nav-btn.active{
background:rgba(200, 164, 110,.15);
color:var(--primary);
font-weight:var(--weight-semibold);
}
.nav-section-label{
margin:var(--space-2) 0 2px 12px;
color:var(--text-muted);
font-size:var(--text-2xs);
font-weight:var(--weight-semibold);
letter-spacing:.06em;
text-transform:uppercase;
}
.sidebar-title {
margin-top: 8px;
margin-bottom: 6px;
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 1px;
}
.sidebar-group-header{
display:flex;
justify-content:space-between;
align-items:center;
}
.collapse-btn{
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
font-size:var(--icon-xs);
background:transparent;
border:none;
color:var(--text-muted);
cursor:pointer;
border-radius:50%;
transition:
background-color var(--transition),
color var(--transition);
}
.collapse-btn:hover{
background:var(--surface-hover);
color:var(--text);
}
.sidebar-divider {
height: 1px;
margin: 12px 0;
background-color: var(--border);
}
/* Reused/rebuilt for the reference screenshot's bottom-of-sidebar identity
card (2026-08-12) — this class existed before but was fully dead (no
page's HTML referenced it) and assumed different markup (h4/p instead
of the header's own .avatar/.profile-info pieces, which this now reuses
directly so the two never drift). Sits above .sidebar-glow via z-index
so its text stays crisp over the glow. */
.sidebar-profile{
position:relative;
z-index:1;
display:flex;
align-items:center;
gap:var(--space-3);
padding:var(--space-3);
border-radius:var(--radius-medium);
color:var(--text);
text-decoration:none;
cursor:pointer;
transition:background-color var(--transition);
}
.sidebar-profile:hover{
background:var(--surface-hover);
}
.sidebar-profile.active{
background:rgba(200, 164, 110,.15);
}
.sidebar-profile .profile-info{
min-width:0;
flex:1;
}
/* flex-shrink:0, matching the chevron's own rule below — the avatar has
no explicit basis otherwise, so under any squeeze it could compete
with .profile-info's own flex:1 for space instead of staying a fixed
42px circle, tightening the name's own available width more than it
needs to for what should be a short, comfortable name like "Ethan". */
.sidebar-profile .avatar{
flex-shrink:0;
}
.sidebar-profile .profile-info strong{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.sidebar-profile > .icon{
flex-shrink:0;
font-size:var(--icon-sm);
color:var(--text-muted);
}
/* =========================
Sidebar — Semester & Classes
========================= */
.semester-card{
display:flex;
flex-direction:column;
gap:var(--space-2);
padding:var(--space-4);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-medium);
}
.semester-row{
display:flex;
justify-content:space-between;
align-items:center;
}
.semester-name{
display:flex;
align-items:center;
gap:var(--space-2);
font-size:var(--text-sm);
font-weight:var(--weight-medium);
}
.semester-caption{
color:var(--text-muted);
font-size:var(--text-xs);
}
.pinned-classes{
display:flex;
flex-direction:column;
gap:var(--space-1);
}
.pinned-class{
display:flex;
align-items:center;
gap:var(--space-3);
padding:var(--space-2) var(--space-3);
background:transparent;
border:none;
border-radius:var(--radius-medium);
color:var(--text);
text-align:left;
cursor:pointer;
transition:
background-color var(--transition-fast),
transform var(--transition-fast);
}
.pinned-class:hover{
background:var(--surface);
transform:translateX(4px);
}
.pinned-class h4{
font-size:var(--text-sm);
font-weight:var(--weight-medium);
}
.pinned-class p{
margin-top:1px;
font-size:var(--text-xs);
color:var(--text-muted);
}
.class-dot{
width:8px;
height:8px;
border-radius:50%;
flex-shrink:0;
}
.class-dot-blurple{ background:var(--primary); }
.class-dot-info{ background:var(--info); }
.class-dot-success{ background:var(--success); }
.class-dot-warning{ background:var(--warning); }
.class-dot-danger{ background:var(--danger); }
.class-dot-teal{ background:var(--course-teal); }
.class-dot-olive{ background:var(--course-olive); }
/* =========================
.classes-table — Classes' own card grid (2026-08-15, see DESIGN.md)
replaced the table this styled, but Progress's own grades table
(progress.html) reuses these same base cell/row rules, so the class
name and its generic th/td/tr styling stay — only the classes.html-
specific wrapper/cell classes that had zero remaining references
(the scrollable card shell, the course-name-plus-dot cell, the actions
column) were removed alongside that page's own table markup.
========================= */
.classes-table{
width:100%;
border-collapse:collapse;
}
.classes-table th{
padding:14px var(--space-5);
background:var(--surface-hover);
border-bottom:1px solid var(--border);
color:var(--text-muted);
font-size:var(--text-2xs);
font-weight:var(--weight-bold);
text-align:left;
text-transform:uppercase;
letter-spacing:.5px;
white-space:nowrap;
}
.classes-table td{
padding:14px var(--space-5);
border-bottom:1px solid var(--border);
color:var(--text);
font-size:var(--text-sm);
white-space:nowrap;
vertical-align:middle;
}
.classes-table tbody tr:last-child td{
border-bottom:none;
}
.classes-table tbody tr{
transition:background-color var(--transition-fast);
}
.classes-table tbody tr:hover{
background:var(--surface-hover);
}
/* =========================
Classes — card grid, 2026-08-15 visual overhaul against an owner-
supplied reference (see DESIGN.md's Classes section for the full
rebuild story: what's newly real data vs. reused, and why).
========================= */
/* A plain, non-interactive label — the reference showed a term-switcher
dropdown, but this app only ever tracks one current semester's worth
of courses (no term history to switch between), so this reads as a
real, honest fact (Store's own semester.termName, the same field
Calendar/Dashboard already surface) rather than implying a feature
that isn't there. */
.term-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 16px;
background:var(--surface);
border:1px solid var(--border);
border-radius:999px;
color:var(--text-secondary);
font-size:var(--text-sm);
font-weight:var(--weight-medium);
}
.term-pill i{
color:var(--primary);
font-size:16px;
}
/* The hero — real per-course stats on the left, the same real horizon
photo Calendar/Nova/Friends already use behind Nova on the right,
here with no Nova figure (nothing on this page calls for her
presence, just the ambient "this app lives in one visual world"
glow). Bottom-right-anchored + left-edge-masked, same "bleed past the
card edge, fade the seam" technique those other heroes established. */
.classes-hero{
position:relative;
display:flex;
align-items:center;
min-height:180px;
padding:var(--space-6);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-large);
overflow:hidden;
margin-bottom:var(--space-6);
}
.classes-hero-glow{
position:absolute;
top:0;
right:0;
bottom:0;
width:56%;
height:100%;
object-fit:cover;
object-position:60% 45%;
/* Fades the photo's own left edge into the card rather than a hard
seam — the same job .sidebar-glow img's mask does for its own top
edge. */
-webkit-mask-image:linear-gradient(to right, transparent, black 35%);
mask-image:linear-gradient(to right, transparent, black 35%);
opacity:.9;
pointer-events:none;
}
.classes-hero-stats{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:var(--space-4);
max-width:60%;
}
.classes-hero-label{
color:var(--text-muted);
font-size:var(--text-2xs);
font-weight:var(--weight-bold);
letter-spacing:.06em;
text-transform:uppercase;
}
.classes-hero-tiles{
display:flex;
flex-wrap:wrap;
gap:var(--space-3);
}
.classes-hero-tile{
display:flex;
align-items:center;
gap:10px;
padding:var(--space-3) var(--space-4);
background:var(--surface-light);
border:1px solid var(--border);
border-radius:var(--radius-medium);
}
.classes-hero-tile i{
color:var(--primary);
font-size:18px;
}
.classes-hero-tile strong{
display:block;
color:var(--text);
font-size:var(--text-lg);
font-weight:var(--weight-extrabold);
letter-spacing:-.3px;
}
.classes-hero-tile span{
color:var(--text-muted);
font-size:var(--text-2xs);
}
/* Filter row — real client-side search/status/day/sort (see
js/modules/classes.js#applyFilters), not decorative controls. */
.classes-filter-row{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:var(--space-4);
margin-bottom:var(--space-6);
}
.classes-search{
position:relative;
flex:1;
min-width:220px;
max-width:340px;
}
.classes-search i{
position:absolute;
top:50%;
left:14px;
transform:translateY(-50%);
color:var(--text-muted);
font-size:16px;
pointer-events:none;
}
.classes-search input{
width:100%;
padding:10px 14px 10px 40px;
background:var(--surface);
border:1px solid var(--border);
border-radius:999px;
color:var(--text);
font-size:var(--text-sm);
outline:none;
transition:border-color var(--transition-fast);
}
.classes-search input:focus{
border-color:var(--primary);
}
.classes-filter-controls{
display:flex;
flex-wrap:wrap;
gap:var(--space-3);
}
.classes-filter-controls .select-input{
min-width:140px;
}
/* The grid itself — responsive 3-up, matching the reference's desktop
density without a hardcoded column count (auto-fit reflows to 2 or 1
on narrower viewports the same way .supporting-grid already does
elsewhere in this app). */
.classes-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:var(--space-5);
margin-bottom:var(--space-6);
}
.class-card{
display:flex;
flex-direction:column;
padding:var(--space-5);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-large);
transition:border-color var(--transition-fast);
}
.class-card:hover{
border-color:rgba(200, 164, 110,.3);
}
.class-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-3);
margin-bottom:10px;
}
.class-card-code{
display:flex;
align-items:center;
gap:8px;
color:var(--text-muted);
font-size:var(--text-2xs);
font-weight:var(--weight-bold);
letter-spacing:.06em;
text-transform:uppercase;
}
/* Computed, never hand-set (see js/modules/classes.js#computeCourseStatus)
— four real states derived from actual assignment completion + due
dates, not a status the student has to remember to update. Reuses the
app's existing --success/--danger tokens (the Rarity Rule's own
status-color pair) rather than inventing new ones; 'not-started' and
the "nothing tracked yet" case both stay neutral on purpose — an
empty course isn't a problem, so it doesn't get an alarm color. */
.class-status-pill{
flex-shrink:0;
padding:4px 10px;
border-radius:999px;
font-size:var(--text-2xs);
font-weight:var(--weight-bold);
letter-spacing:.02em;
}
.class-status-pill.status-neutral{
background:var(--surface-hover);
color:var(--text-secondary);
}
.class-status-pill.status-success{
background:rgba(111, 174, 127,.14);
color:var(--success);
}
.class-status-pill.status-danger{
background:rgba(224, 104, 90,.14);
color:var(--danger);
}
.class-status-pill.status-info{
background:rgba(200, 164, 110,.14);
color:var(--primary-light);
}
.class-card-title{
margin-bottom:10px;
color:var(--text);
font-size:var(--text-lg);
font-weight:var(--weight-bold);
letter-spacing:-.2px;
line-height:1.3;
}
.class-card-meta{
display:flex;
flex-wrap:wrap;
gap:var(--space-4);
margin-bottom:4px;
}
.class-card-meta span{
display:flex;
align-items:center;
gap:6px;
color:var(--text-secondary);
font-size:var(--text-xs);
}
.class-card-meta i{
color:var(--text-muted);
font-size:14px;
}
.class-card-location{
display:flex;
align-items:center;
gap:6px;
margin-bottom:var(--space-4);
color:var(--text-secondary);
font-size:var(--text-xs);
}
.class-card-location i{
color:var(--text-muted);
font-size:14px;
}
.class-card-progress{
margin-bottom:var(--space-4);
}
.class-card-progress-label{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
font-size:var(--text-2xs);
font-weight:var(--weight-bold);
letter-spacing:.06em;
text-transform:uppercase;
}
.class-card-progress-label span:first-child{
color:var(--text-muted);
}
.class-card-progress-label span:last-child{
color:var(--text);
}
.class-card-progress .progress-bar{
margin-bottom:6px;
}
.class-card-progress-caption{
color:var(--text-muted);
font-size:var(--text-2xs);
}
.class-card-next{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
margin-top:auto;
margin-bottom:var(--space-4);
background:var(--surface-light);
border-radius:var(--radius-medium);
color:inherit;
text-decoration:none;
transition:background-color var(--transition-fast);
}
a.class-card-next:hover{
background:var(--surface-hover);
}
.class-card-next > i:first-child{
flex-shrink:0;
color:var(--primary);
font-size:16px;
}
.class-card-next-body{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
flex:1;
}
.class-card-next-label{
color:var(--text-muted);
font-size:10px;
font-weight:var(--weight-bold);
letter-spacing:.06em;
text-transform:uppercase;
}
.class-card-next-body strong{
overflow:hidden;
color:var(--text);
font-size:var(--text-sm);
font-weight:var(--weight-semibold);
white-space:nowrap;
text-overflow:ellipsis;
}
.class-card-next-body .text-muted{
font-size:var(--text-2xs);
}
.class-card-next > i:last-child{
flex-shrink:0;
color:var(--text-muted);
font-size:16px;
}
.class-card-next-empty{
color:var(--text-muted);
font-size:var(--text-xs);
}
.class-card-next-empty i{
color:var(--success);
font-size:16px;
}
.class-card-footer{
display:flex;
align-items:center;
justify-content:space-between;
padding-top:var(--space-3);
border-top:1px solid var(--border);
}
/* A real toggle on the same course.pinned field Study's own Subjects
list already reads (see js/modules/classes.js) — not decorative. */
.class-card-pin{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
background:transparent;
border:none;
border-radius:50%;
color:var(--text-muted);
font-size:16px;
cursor:pointer;
transition:
color var(--transition-fast),
background-color var(--transition-fast);
}
.class-card-pin:hover{
background:var(--surface-hover);
color:var(--text-secondary);
}
.class-card-pin.is-pinned{
color:var(--primary);
}
/* Nova Insight — real, computed from the same per-course assignment
progress as the cards (js/modules/classes.js#renderInsight), styled
as its own full-width bar rather than another card in the grid, same
"the AI voice gets a distinct surface" pattern the dashboard/calendar
rail's own Nova Insight cards already use. */
.classes-insight{
display:flex;
align-items:center;
gap:var(--space-4);
padding:var(--space-5);
background:rgba(200, 164, 110,.06);
border:1px solid rgba(200, 164, 110,.2);
border-radius:var(--radius-large);
}
.classes-insight-icon{
flex-shrink:0;
width:40px;
height:40px;
border-radius:50%;
overflow:hidden;
}
.classes-insight-icon img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.classes-insight-body{
flex:1;
min-width:0;
}
.classes-insight-label{
display:flex;
align-items:center;
gap:6px;
margin-bottom:4px;
color:var(--primary-light);
font-size:var(--text-2xs);
font-weight:var(--weight-bold);
letter-spacing:.06em;
text-transform:uppercase;
}
.classes-insight-body p{
color:var(--text);
font-size:var(--text-sm);
}
.classes-insight-link{
flex-shrink:0;
display:flex;
align-items:center;
gap:6px;
color:var(--primary-light);
font-size:var(--text-sm);
font-weight:var(--weight-semibold);
text-decoration:none;
transition:gap var(--transition-fast);
}
.classes-insight-link:hover{
gap:9px;
}
@media (max-width:900px){
.classes-hero{
flex-direction:column;
align-items:stretch;
min-height:0;
}
.classes-hero-glow{
position:relative;
width:100%;
height:120px;
order:-1;
margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
-webkit-mask-image:linear-gradient(to bottom, transparent, black 40%);
mask-image:linear-gradient(to bottom, transparent, black 40%);
}
.classes-hero-stats{
max-width:100%;
}
}
/* =========================
Section Heading
========================= */
.section-heading {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-6);
}
.section-heading-actions{
display:flex;
align-items:center;
gap:var(--space-4);
}
.section-heading h2 {
font-size: var(--text-section);
font-weight: var(--weight-bold);
margin-bottom: var(--space-2);
}
.section-heading p {
color: var(--text-secondary);
font-size: var(--text-base);
}
.section-heading.muted{
margin-bottom: var(--space-4);
}
.section-heading.muted h2{
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--text-secondary);
margin-bottom: 2px;
}
.section-heading.muted p{
font-size: var(--text-sm);
color: var(--text-muted);
}
/* =========================
Hero — .hero-eyebrow/.hero-metric were originally shared between a boxed
.hero panel (index.html) and the plainer .page-toolbar header (every
other page). The Dashboard rebuild moved the greeting out onto the bare
page background (see .dash-greeting-row/.dash-eyebrow below), and no
other page ever used the boxed version, so .hero/.hero-grand/.hero-content
and their hero-rise entrance animation were retired here rather than
re-tuned to the new palette — confirmed dead via a grep sweep across
every .html and .js file before deleting. .hero-eyebrow/.hero-metric
live on, now solely as .page-toolbar's header styling (Calendar, Classes,
Friends, Settings, Study — pending their own rebuilds).
========================= */
/* Tuned for .page-toolbar's fixed-dark gradient background (below), always
dark regardless of the light/dark theme toggle — a deliberate "always
dramatic" banner, not a themed surface — so this is hardcoded to light
colors rather than the theme-flipping var(--text)/var(--text-secondary)
tokens, which would otherwise turn dark-on-dark and unreadable in light
mode. */
.hero-eyebrow{
color:rgba(242,236,224,.7);
font-size:var(--text-xs);
font-weight:var(--weight-semibold);
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:var(--space-2);
}
/* Dashboard's greeting now sits bare on the page background (no boxed
.hero panel — see .dashboard-layout), which is theme-aware, unlike
.page-toolbar's fixed-dark banner that .hero-eyebrow's hardcoded light
color above was tuned for. Same role, theme-aware color instead. */
.dash-eyebrow{
color:var(--text-muted);
font-size:var(--text-xs);
font-weight:var(--weight-semibold);
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:var(--space-2);
}
/* The one place --font-serif appears — see its definition in :root. A
serif at extrabold weight with the old grotesk's -1.5px tracking reads
clenched, not elegant; regular-to-medium weight and near-zero tracking
is where a serif like this actually wants to sit. */
.hero-title{
color:var(--text);
font-family:var(--font-serif);
font-size:var(--text-2xl);
font-weight:500;
letter-spacing:-.01em;
margin-bottom:var(--space-3);
}
/* The greeted user's first name, called out in the accent gold per the
owner-supplied Calendar reference (2026-08-12) — reused on Dashboard's
hero too, since both greetings share the same "Good afternoon, Name."
pattern and the Rarity Rule treats a single named person as a legitimate
emphasis target, not decoration. */
.hero-greeting-name{
color:var(--primary);
}
/* Not shared with .page-toolbar (that uses plain .text-secondary) — only
the dashboard hero uses this, and that hero is no longer a boxed
always-dark panel, so this can safely be theme-aware. */
.hero-subtitle{
max-width:460px;
color:var(--text-secondary);
font-size:17px;
line-height:1.55;
margin-bottom:var(--space-4);
}
/* Quiet presence signal — a slight, slow pulse rather than a dramatic
scale/glow swing. Present, not performing. Now applied to
.rail-nova-avatar (the Dashboard rail's Nova panel) — this used to be
the old boxed hero's Nova insight pill (.hero-nova-note/-avatar/
-message, plus #dashboard-nova-action), all deleted here as confirmed
dead: the Dashboard rebuild moved Nova's presence into the rail and
nothing in any .html file has referenced this pill's classes since. */
@keyframes nova-breathe{
0%, 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(200, 164, 110,.22); }
50%{ transform:scale(1.03); box-shadow:0 0 0 3px rgba(200, 164, 110,.08); }
}
/* The command bar — the hero's one interactive surface, replacing the old
separate "View Today's Plan" button + Nova Capture card with a single
glowing input. See js/modules/dashboard.js#initNovaCapture. */
.hero-command-bar{
display:flex;
align-items:center;
gap:var(--space-2);
max-width:560px;
/* margin-bottom removed, 2026-08-16 — real redundant-spacing bug
found chasing a direct "less spacing... more compact" request:
.dashboard-main (this element's parent) already sets its own
flex `gap` between every direct child, so this margin-bottom was
stacking an *extra* --space-6 (24px) on top of that gap between
the search bar and the stat grid below it — a leftover from
before .dashboard-main had its own gap property, never cleaned
up once it did. Removing it doesn't lose any spacing, just the
doubled-up portion of it. */
padding:6px 6px 6px 8px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
border-radius:999px;
box-shadow:0 8px 30px rgba(0,0,0,.25);
transition:border-color var(--transition), box-shadow var(--transition);
}
.hero-command-bar:focus-within{
border-color:rgba(200, 164, 110,.6);
box-shadow:0 0 0 3px rgba(200, 164, 110,.18), 0 8px 30px rgba(0,0,0,.25);
}
.hero-command-mic,
.hero-command-send{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:38px;
height:38px;
border:none;
border-radius:50%;
cursor:pointer;
transition:transform var(--dur) var(--ease-spring), background-color var(--transition-fast);
}
/* .hero-command-mic's color used to assume the same fixed-dark ground as
.hero-eyebrow (a leftover from when this bar lived inside the old boxed
.hero) — but .hero-command-bar itself is a translucent white overlay
(background/border above, both rgba(255,255,255,..)) sitting directly on
the page's own theme-flipping background, not a fixed-dark box. A
hardcoded near-white icon color there was invisible in light theme; the
translucent white background/border stay as-is since those merely go
*weaker* in light theme rather than disappearing. */
.hero-command-mic{
background:rgba(255,255,255,.08);
color:var(--text-secondary);
}
.hero-command-mic:hover{
background:rgba(255,255,255,.16);
}
.hero-command-mic.recording{
color:#fff;
background:var(--danger);
animation: chip-bump .5s var(--ease-bounce);
}
.hero-command-send{
background:linear-gradient(135deg, var(--primary), var(--accent-cyan));
color:#fff;
box-shadow:0 0 16px rgba(200, 164, 110,.45);
}
.hero-command-send:hover{
transform:scale(1.08);
}
.hero-command-input{
flex:1;
min-width:0;
padding:12px 4px;
background:transparent;
border:none;
color:var(--text);
font-family:inherit;
font-size:var(--text-base);
outline:none;
}
.hero-command-input::placeholder{
color:var(--text-muted);
}
/* .hero-metric (singular, below) is shared with .page-toolbar-stats on
every other page and is very much alive. .hero-metrics (plural — a
wrapper + staggered pop-in entrance + stat-pop keyframes + a font-size
bump, all scoped under it) was the old boxed-hero dashboard's own stat
row; the Dashboard rebuild (see .stat-grid/.stat-card elsewhere in this
file) replaced it and nothing in any .html file references the plural
wrapper anymore — confirmed via a grep sweep before deleting, same as
the earlier .hero cleanup. */
.hero-metric{
display:flex;
flex-direction:column;
gap:2px;
}
.hero-metric strong{
color:var(--text);
font-size:var(--text-stat);
font-weight:var(--weight-extrabold);
letter-spacing:-.5px;
}
.hero-metric span{
color:rgba(242,236,224,.65);
font-size:var(--text-xs);
}
/* =========================
Dashboard — right-rail layout. Scoped to index.html only (the class
only appears there) so no other page's .content is affected. Nova's
insight moves from the hero pill into a persistent rail panel here;
the brain-dump capture bar (a real, documented product differentiator
— PRODUCT.md names it explicitly) stays in the main column rather
than getting dropped just because the reference screenshot's crop
didn't happen to show it.
========================= */
.dashboard-layout{
display:grid;
grid-template-columns:1fr 360px;
/* --space-5 (was --space-6), 2026-08-16 direct request — "less
spacing between elements for a more compact and immediate look." */
gap:var(--space-5);
align-items:start;
}
.dashboard-main{
display:flex;
flex-direction:column;
/* --space-5 (was --space-6), same request as .dashboard-layout's own
gap above — this is the vertical rhythm between the greeting row,
the brain-dump bar, the stat grid, and Today's Plan. */
gap:var(--space-5);
min-width:0;
}
.dash-greeting-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--space-4);
}
.focus-mode-btn{
display:inline-flex;
align-items:center;
gap:var(--space-2);
flex-shrink:0;
padding:9px 18px;
margin-top:4px;
background:transparent;
color:var(--primary);
border:1px solid rgba(200, 164, 110,.4);
border-radius:999px;
font-size:var(--text-sm);
font-weight:var(--weight-semibold);
cursor:pointer;
transition:background-color var(--transition-fast), border-color var(--transition-fast);
}
.focus-mode-btn:hover{
background:rgba(200, 164, 110,.1);
border-color:rgba(200, 164, 110,.6);
}
/* ---- Stat cards — Focus / Classes / Tasks / Streak. Flat: one hairline
border, no gradient, no bevel — this direction's cards don't lean on
tonal depth to read as elevated (see the reference this was built
from). ---- */
.stat-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:var(--space-4);
}
.stat-card{
display:flex;
flex-direction:column;
gap:var(--space-2);
padding:var(--space-5);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-large);
}
.stat-card-head{
display:flex;
align-items:center;
justify-content:space-between;
font-size:var(--text-sm);
color:var(--text-secondary);
}
.stat-card-tag{
font-size:var(--text-2xs);
color:var(--text-muted);
}
.stat-card-value{
font-size:28px;
font-weight:700;
letter-spacing:-.01em;
font-variant-numeric:tabular-nums;
}
.stat-card-caption{
font-size:var(--text-xs);
color:var(--text-muted);
}
.stat-card-progress{
display:flex;
flex-direction:column;
gap:6px;
margin-top:2px;
}
.stat-card-progress span{
font-size:var(--text-2xs);
color:var(--text-muted);
}
/* Reuses .study-ring's conic-gradient (see Study) at a size that fits a
stat card instead of the full focus-timer or a leaderboard row. */
.stat-card-ring-row{
display:flex;
align-items:center;
gap:var(--space-3);
}
.study-ring-sm{
width:52px;
height:52px;
}
.study-ring-sm::before{
inset:6px;
}
.study-ring-sm .study-ring-value{
font-size:var(--text-xs);
font-weight:700;
}
.stat-card-tasks-priority{
display:inline-flex;
align-items:center;
gap:5px;
color:var(--danger);
}
.stat-card-tasks-priority::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:currentColor;
}
/* ---- Today's Plan — replaces the old flat "Today's Schedule" timeline
with a real Day/Week/Agenda switcher. ---- */
.plan-tabs{
display:flex;
gap:2px;
padding:3px;
background:var(--surface-hover);
border-radius:999px;
}
.plan-tab{
padding:6px 14px;
background:transparent;
border:none;
border-radius:999px;
color:var(--text-secondary);
font-size:var(--text-xs);
font-weight:var(--weight-semibold);
cursor:pointer;
transition:background-color var(--transition-fast), color var(--transition-fast);
}
.plan-tab.active{
background:rgba(200, 164, 110,.16);
color:var(--primary);
}
.plan-timeline{
position:relative;
display:flex;
flex-direction:column;
}
.plan-row{
position:relative;
display:flex;
align-items:center;
gap:var(--space-4);
padding:var(--space-3) 0;
}
/* The connecting vertical line running through every dot except the
last row's — a real timeline, not a bare list. */
.plan-row:not(:last-child)::after{
content:"";
position:absolute;
left:73px;
top:calc(50% + 10px);
bottom:calc(-50% + 4px);
width:1px;
background:var(--border);
}
.plan-row-time{
width:58px;
flex-shrink:0;
font-size:var(--text-xs);
color:var(--text-muted);
font-variant-numeric:tabular-nums;
}
.plan-row-dot{
width:9px;
height:9px;
flex-shrink:0;
border-radius:50%;
background:var(--border-light);
z-index:1;
}
.plan-row.is-focus .plan-row-dot{
background:var(--primary);
box-shadow:0 0 0 3px rgba(200, 164, 110,.18);
}
.plan-row-body{
flex:1;
min-width:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-3);
padding:10px 14px;
border-radius:var(--radius-medium);
}
.plan-row.is-focus .plan-row-body{
background:var(--surface-hover);
}
.plan-row-title{
display:flex;
align-items:center;
gap:var(--space-2);
font-size:var(--text-sm);
font-weight:var(--weight-medium);
color:var(--text);
}
.plan-row-title p{
font-size:var(--text-xs);
font-weight:400;
color:var(--text-muted);
margin-top:2px;
}
.plan-row-duration{
flex-shrink:0;
font-size:var(--text-xs);
color:var(--text-muted);
font-variant-numeric:tabular-nums;
}
/* ---- Quote banner — a CSS-approximated night sky (no photo asset
available to source honestly), not the same starfield used for the
optional Settings > Appearance background: darker, horizon-anchored,
built specifically to sit behind a quote instead of an entire page. ---- */
.quote-banner{
position:relative;
overflow:hidden;
padding:36px 40px;
border-radius:var(--radius-large);
border:1px solid var(--border);
background:
radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.5), transparent),
radial-gradient(1px 1px at 24% 55%, rgba(255,255,255,.35), transparent),
radial-gradient(1.5px 1.5px at 38% 15%, rgba(255,255,255,.4), transparent),
radial-gradient(1px 1px at 52% 40%, rgba(255,255,255,.3), transparent),
radial-gradient(1.5px 1.5px at 68% 25%, rgba(255,255,255,.45), transparent),
radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,.3), transparent),
radial-gradient(1.5px 1.5px at 91% 18%, rgba(255,255,255,.4), transparent),
radial-gradient(ellipse 70% 45% at 50% 118%, rgba(200, 164, 110,.35), transparent),
linear-gradient(180deg, #08080a 0%, #0e0e12 55%, #17140f 100%);
}
.quote-text{
position:relative;
z-index:1;
max-width:46ch;
font-family:var(--font-serif);
font-weight:400;
font-size:22px;
line-height:1.4;
font-style:italic;
color:#e7e4db;
}
.quote-text em{
color:var(--primary-light);
font-style:italic;
}
.quote-author{
position:relative;
z-index:1;
margin-top:14px;
font-size:var(--text-xs);
color:rgba(231,228,219,.6);
}
/* Rail-width variant, 2026-08-16 — moved from the bottom of
.dashboard-main into .dashboard-rail (direct request: "there is
negative space that is unused in the bottom right corner... perhaps
the daily quote can go there" — see .dashboard-rail's own comment
above for the related sticky-positioning fix that was also part of
this request). The base .quote-banner rule above was sized for the
wide ~1fr main column (36px/40px padding, 22px serif text) — applied
as-is in the ~360px rail it would read cramped and cause awkward
wrapping, so this tightens both for the narrower context. The
starfield background/border/radius need no adjustment: the radial
gradients are percentage-positioned, so they scale to whatever box
they're in rather than needing new coordinates for a new width. */
.quote-banner.rail-quote{
padding:var(--space-5);
}
.quote-banner.rail-quote .quote-text{
max-width:none;
font-size:17px;
}
/* ---- Right rail ---- */
.dashboard-rail{
display:flex;
flex-direction:column;
gap:var(--space-5);
/* position:sticky removed, 2026-08-16 direct request — "allow for the
whole page to scroll down with it, including the right side
portion, as opposed to just the center portion." Sticky pinned this
column in the viewport once its own top scrolled past var(--space-6),
so scrolling the page moved .dashboard-main underneath it while the
rail itself stayed put — including whatever empty space sat below
its last panel, which read as the same wasted bottom-right gap on
screen the whole time no matter how far down the page you scrolled.
Now it's a plain grid item, same as .dashboard-main, and the two
columns scroll together as one page. */
}
.rail-panel{
padding:var(--space-5);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-large);
}
.rail-panel-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:var(--space-4);
}
.rail-panel-head h3{
font-size:var(--text-base);
font-weight:600;
}
.rail-panel-head a{
font-size:var(--text-xs);
color:var(--text-secondary);
text-decoration:none;
}
.rail-panel-head a:hover{
color:var(--primary);
}
.chip-ai{
padding:3px 9px;
background:rgba(200, 164, 110,.14);
color:var(--primary);
border-radius:999px;
font-size:var(--text-2xs);
font-weight:700;
letter-spacing:.04em;
}
.rail-nova-insight{
display:flex;
align-items:flex-start;
gap:var(--space-3);
margin-bottom:var(--space-4);
}
.rail-nova-avatar{
width:40px;
height:40px;
flex-shrink:0;
border-radius:50%;
overflow:hidden;
box-shadow:0 0 0 1px var(--border);
/* Nova's one sanctioned idle loop (see DESIGN.md's Motion section) —
was on the old boxed hero's Nova avatar, orphaned (animation and all)
when the Dashboard rebuild moved Nova's presence into this rail
panel and nothing carried it over. Restored here rather than left
dead: a slight, slow pulse, present not performing. */
animation: nova-breathe 3.2s ease-in-out infinite;
}
.rail-nova-avatar img{
width:100%;
height:100%;
object-fit:cover;
}
.rail-nova-insight p{
font-size:var(--text-sm);
line-height:1.5;
color:var(--text);
}
.rail-nova-suggestions{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:var(--space-4);
}
.rail-suggestion{
display:flex;
align-items:center;
gap:var(--space-3);
padding:10px 12px;
background:var(--surface-hover);
border-radius:var(--radius-medium);
text-decoration:none;
cursor:pointer;
transition:background-color var(--transition-fast);
}
.rail-suggestion:hover{
background:var(--surface-light);
border-color:var(--border-light);
}
.rail-suggestion-icon{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:28px;
height:28px;
background:var(--surface-light);
border-radius:8px;
color:var(--primary);
}
.rail-suggestion-body{
flex:1;
min-width:0;
}
.rail-suggestion-body strong{
display:block;
font-size:var(--text-xs);
font-weight:600;
color:var(--text);
}
.rail-suggestion-body span{
font-size:var(--text-2xs);
color:var(--text-muted);
}
.rail-suggestion-chevron{
flex-shrink:0;
color:var(--text-muted);
}
.rail-nova-chat-btn{
display:flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
width:100%;
padding:11px;
background:var(--surface-hover);
border-radius:var(--radius-medium);
color:var(--text);
text-decoration:none;
font-size:var(--text-sm);
font-weight:var(--weight-semibold);
transition:background-color var(--transition-fast);
}
.rail-nova-chat-btn:hover{
background:var(--surface-light);
}
.upcoming-list{
display:flex;
flex-direction:column;
gap:var(--space-1);
}
.upcoming-row{
display:flex;
align-items:center;
gap:var(--space-3);
padding:10px 4px;
text-decoration:none;
}
.upcoming-row-when{
width:38px;
flex-shrink:0;
text-align:center;
font-size:var(--text-2xs);
color:var(--text-muted);
text-transform:uppercase;
}
.upcoming-row-when strong{
display:block;
font-family:var(--font-body);
font-size:var(--text-lg);
font-weight:700;
color:var(--text);
}
.upcoming-row-body{
flex:1;
min-width:0;
font-size:var(--text-xs);
font-weight:600;
color:var(--text);
}
.upcoming-row-body span{
display:block;
margin-top:1px;
font-size:var(--text-2xs);
font-weight:400;
color:var(--text-muted);
}
.upcoming-row-dot{
flex-shrink:0;
width:7px;
height:7px;
border-radius:50%;
background:var(--primary);
}
.upcoming-row-dot.is-urgent{
background:var(--danger);
}
.rail-more-link{
display:block;
margin-top:var(--space-2);
font-size:var(--text-xs);
color:var(--text-secondary);
text-decoration:none;
}
.rail-more-link:hover{
color:var(--primary);
}
@media (max-width:1400px){
.dashboard-layout{
grid-template-columns:1fr;
}
.dashboard-rail{
position:static;
flex-direction:row;
}
/* .quote-banner added to this selector, 2026-08-16 — it moved into
.dashboard-rail the same day (see its own comment in index.html)
alongside Nova/Upcoming's existing .rail-panel cards, but isn't
itself .rail-panel-classed (it keeps its own distinct starfield
look, see .rail-quote), so without this it wouldn't share this
row's equal-width split and would sit an inconsistent size next
to the other two. */
.rail-panel,
.quote-banner{
flex:1;
}
}
@media (max-width:900px){
.stat-grid{
grid-template-columns:repeat(2, 1fr);
}
.dashboard-rail{
flex-direction:column;
}
.dash-greeting-row{
flex-direction:column;
}
}
/* =========================
Page Toolbar — compact, non-hero page header
========================= */
.page-toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:var(--space-6);
/* var(--space-6) var(--space-8), 2026-08-16 — was hardcoded to the
exact same values, so every page's own title bar ignored density. */
padding:var(--space-6) var(--space-8);
margin-bottom:var(--space-8);
background:linear-gradient(135deg,#1c1d21 0%,#18191c 55%,var(--background) 100%);
border:1px solid var(--border);
border-radius:var(--radius-large);
box-shadow:var(--shadow-medium);
}
.page-toolbar-title{
font-size:var(--text-xl);
font-weight:var(--weight-extrabold);
letter-spacing:-1px;
/* Matches every other heading-into-subtitle pairing in the system
(.hero-title, .section-heading h2, .settings-section-header h3):
the heading owns the gap, so a subtitle sitting directly under it —
Friends already has one — reads as a pair instead of two elements
jammed together. Collapses harmlessly to nothing when a page's
title has no subtitle below it. */
margin-bottom:var(--space-1);
}
.page-toolbar-stats{
display:flex;
flex-wrap:wrap;
gap:var(--space-6);
}
.page-toolbar-actions{
display:flex;
gap:var(--space-3);
}
/* =========================
Buttons
========================= */
.primary-btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
padding: 12px 20px;
color: var(--background);
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
font-size: var(--text-sm);
font-weight: 600;
border: none;
border-radius: var(--radius-medium);
cursor: pointer;
box-shadow: 0 4px 12px rgba(200, 164, 110,.14);
transition:
background-color var(--transition),
transform var(--dur-slow) var(--ease-spring),
box-shadow var(--transition);
}
/* Solid brass-to-brass, not a two-hue rainbow gradient — the button reads
as one piece of metal catching light, in keeping with "one precise
accent" rather than a decorative color mix. Dark text on the brass
face (not var(--text)'s pale ivory) for real contrast against a
mid-value amber. */
.primary-btn:hover{
background: linear-gradient(135deg, var(--primary-hover), var(--primary-light));
transform:translateY(-1px) scale(1.02);
box-shadow:0 8px 20px rgba(200, 164, 110,.22);
}
.primary-btn:active {
transform: scale(0.96);
transition-duration: var(--transition-fast);
transition-timing-function: var(--ease-bounce);
}
/* :not([hidden]) — #session-back (js/modules/study.js) is toggled via the
hidden attribute; an unconditional `display` here would defeat it the
same way .icon-btn/.verify-control/.study-session already had to guard
against elsewhere in this file. */
.secondary-btn:not([hidden]) {
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
padding: 12px 20px;
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-medium);
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
transition:
background-color var(--transition),
color var(--transition),
border-color var(--transition),
transform var(--dur-slow) var(--ease-spring);
}
.secondary-btn:hover{
background: var(--surface-hover);
color: var(--text);
border-color: var(--primary);
transform: translateY(-1px) scale(1.015);
}
.secondary-btn:active{
transform: scale(0.96);
transition-duration: var(--transition-fast);
transition-timing-function: var(--ease-bounce);
}
.ghost-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
padding:12px 20px;
background:rgba(200, 164, 110,.10);
color:var(--primary-light);
border:1px solid rgba(200, 164, 110,.25);
border-radius:var(--radius-medium);
font-size:var(--text-sm);
font-weight:var(--weight-medium);
cursor:pointer;
transition:
background-color var(--transition),
border-color var(--transition),
transform var(--dur-slow) var(--ease-spring);
}
.ghost-btn:hover{
background:rgba(200, 164, 110,.18);
border-color:var(--primary);
transform:translateY(-1px) scale(1.015);
}
.ghost-btn:active{
transform: scale(0.96);
transition-duration: var(--transition-fast);
transition-timing-function: var(--ease-bounce);
}
.text-btn {
background: transparent;
border: none;
color: var(--primary);
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
transition:
color var(--transition),
transform var(--transition);
}
.text-btn:hover {
color: var(--primary-hover);
transform: translateX(4px);
}
.text-btn.small{
font-size:var(--text-xs);
}
/* =========================
Today's Schedule — the Dashboard's one remaining "workspace" card,
sitting directly in .content now that Workspace/Supporting are gone.
========================= */
.card-hero-primary{
margin-bottom:var(--space-12);
}
/* =========================
Supporting widgets
========================= */
.supporting{
margin-bottom:var(--space-8);
}
.supporting-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--space-5);
max-height:2000px;
opacity:1;
overflow:hidden;
transition:max-height var(--transition-slow), opacity var(--transition), margin var(--transition-slow);
}
.supporting-grid.is-collapsed{
max-height:0;
opacity:0;
margin-top:calc(-1 * var(--space-5));
}
.supporting-toggle{
display:inline-flex;
align-items:center;
gap:4px;
}
/* =========================
Widgets
========================= */
.widget{
display:flex;
flex-direction:column;
gap:var(--space-4);
padding:var(--space-6);
background:rgba(27, 28, 33,.75);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid var(--border);
border-radius:var(--radius-large);
box-shadow:var(--shadow-small);
animation: card-pop-in .35s var(--ease-spring) both;
transition:
transform var(--dur-slow) var(--ease-spring),
box-shadow var(--transition),
border-color var(--transition);
}
.widget-header{
display:flex;
justify-content:space-between;
align-items:center;
}
.widget:hover{
transform:translateY(-4px) scale(1.015);
border-color:rgba(200, 164, 110,.25);
box-shadow:var(--shadow-medium);
}
.widget-quiet{
padding:var(--space-5);
background:var(--surface);
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-radius:var(--radius-medium);
box-shadow:none;
gap:var(--space-3);
}
.widget-quiet:hover{
transform:none;
border-color:var(--border-light);
box-shadow:none;
}
.widget-quiet .widget-header h3{
display:flex;
align-items:center;
gap:var(--space-2);
font-size:var(--text-sm);
font-weight:var(--weight-semibold);
color:var(--text-secondary);
}
.quiet-list{
list-style:none;
display:flex;
flex-direction:column;
gap:var(--space-3);
}
.quiet-list li{
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--space-3);
font-size:var(--text-sm);
color:var(--text-secondary);
}
.quiet-list li span:first-child{
color:var(--text);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.quiet-list li span:last-child{
flex-shrink:0;
font-size:var(--text-xs);
}
/* =========================
Cards
========================= */
@keyframes card-pop-in{
from{ opacity:0; transform:translateY(10px) scale(.96); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
/* Flat surface, one hairline border — the engraved-plate bevel this used
to be (a two-stop diagonal gradient standing in for the bevel highlight,
a warm-brown pair left over from the pre-"Nightfall" palette and never
swept when the actual bevel/--shadow-inset was retired below) is gone;
see DESIGN.md's "Elevation & Depth — Cards" for why flat-plus-border is
the target, not a gradient standing in for depth. */
.card {
min-height: 180px;
/* var(--space-6), 2026-08-16 — was a hardcoded 24px, so this ignored
Settings > Appearance's density setting entirely (the same value
either way). --space-6 already equals 24px comfortable, so this
changes nothing by default; compact now genuinely tightens every
card in the app (18px) instead of only the abstract token doing
so with nothing built on top of it. */
padding: var(--space-6);
background:var(--surface);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border: 1px solid rgba(200, 164, 110,.16);
border-radius: var(--radius-large);
/* One elevation device — the border above, not a shadow. --shadow-inset
is defined as a no-op (0 0 0 transparent, see :root) specifically so
this line degrades harmlessly rather than needing removal everywhere
it's still listed. See DESIGN.md "Elevation & Depth — Cards". */
box-shadow: var(--shadow-inset);
transition:
transform var(--dur-slow) var(--ease-spring),
box-shadow var(--transition),
border-color var(--transition);
}
/* :not(.reveal-in) — 2026-08-16. Every .card already played its own
entrance (card-pop-in, unconditional, no stagger) the instant it was
inserted; js/modules/common.js#revealData's new .reveal-in class now
also matches most cards, for the ordered top-left-to-bottom-right
stagger the previous flat pop-in never had. Both rules set the same
`animation` shorthand property, and without this guard whichever rule
sits later in this file — .card, since it's declared after .reveal-in
— would silently win the cascade and play card-pop-in with no delay
at all, discarding the whole ordered reveal for every card on the
page. Scoped to just this one declaration (not the full .card rule)
so a revealed card still gets .card's own padding/background/border —
those aren't affected by which entrance animation plays. */
.card:not(.reveal-in){
animation: card-pop-in .35s var(--ease-spring) both;
}
.card:hover{
transform:translateY(-2px) scale(1.005);
border-color:rgba(200, 164, 110,.32);
/* Hover feedback comes from the lift + brighter border above, not an
added shadow ring — box-shadow intentionally doesn't change here. */
}
.card-primary{
padding:28px;
/* var(--surface) as the middle stop (not a hardcoded rgba literal) so
this card actually flips light/dark with the theme — a hardcoded
dark stop here previously made light-mode text nearly unreadable. */
background:linear-gradient(160deg, rgba(200, 164, 110,.08), var(--surface) 45%, rgba(200, 164, 110,.04) 100%);
border:1px solid rgba(200, 164, 110,.2);
box-shadow: var(--shadow-inset);
/* No animation override here on purpose — inherits .card's card-pop-in
entrance and nothing else. This class used to also declare an
infinite "primaryGlow" pulse, but a later, unrelated .card{} rule
(removed — see the old Animations section) had been silently
overriding this whole property for months, so it never actually
ran; keeping the card's rest state genuinely inert (not just
accidentally so) is the point now, not a bug to route around. */
}
.card-primary:hover{
border-color:rgba(200, 164, 110,.3);
}
/* =========================
Auth (login / sign up)
========================= */
/* The sign-up form (name/pronouns/school/dob/etc.) is taller than one
viewport on most screens. body{height:100vh;overflow:hidden} (the app
shell's own fixed-sidebar layout) would otherwise clip whatever
overflows equally off the top and bottom with no scrollbar and no way
to reach it — this override lets the login page scroll like a normal
page instead of inheriting that fixed-shell behavior. */
body[data-page="login"]{
height:auto;
min-height:100vh;
overflow-y:auto;
}
.auth-shell{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
padding:var(--space-6);
overflow:hidden;
}
/* Faint stars behind sign-in and create-account both — one shared shell,
one mode toggle within the same card (see login.js), not two separate
pages, so one rule covers both. Static, not the existing (currently
inert — .container's own starfield option points at a hero-twinkle
keyframes that's never actually defined anywhere in this file, a
pre-existing latent bug, not revived here) twinkle animation: the
Motion section's own standard is animation-communicates-state, and a
background star field isn't a state to communicate, so it stays still
rather than adding a second ambient loop to a screen that doesn't need
one. Same radial-gradient-dot technique as the Appearance starfield
option, hand-placed positions, deliberately low opacity (.12-.32) for
"faint" rather than the decorative option's brighter .4-.7 range —
this is atmosphere behind a form, not a feature being shown off. */
.auth-shell::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background-image:
radial-gradient(1px 1px at 6% 12%, rgba(255,255,255,.28), transparent),
radial-gradient(1.5px 1.5px at 14% 38%, rgba(255,255,255,.18), transparent),
radial-gradient(1px 1px at 9% 68%, rgba(255,255,255,.24), transparent),
radial-gradient(1.5px 1.5px at 20% 88%, rgba(255,255,255,.16), transparent),
radial-gradient(1px 1px at 28% 22%, rgba(255,255,255,.22), transparent),
radial-gradient(1.5px 1.5px at 33% 55%, rgba(255,255,255,.14), transparent),
radial-gradient(1px 1px at 41% 8%, rgba(255,255,255,.26), transparent),
radial-gradient(1px 1px at 45% 76%, rgba(255,255,255,.18), transparent),
radial-gradient(1.5px 1.5px at 58% 30%, rgba(255,255,255,.2), transparent),
radial-gradient(1px 1px at 63% 62%, rgba(255,255,255,.15), transparent),
radial-gradient(1.5px 1.5px at 69% 90%, rgba(255,255,255,.22), transparent),
radial-gradient(1px 1px at 74% 18%, rgba(255,255,255,.16), transparent),
radial-gradient(1.5px 1.5px at 80% 48%, rgba(255,255,255,.28), transparent),
radial-gradient(1px 1px at 86% 72%, rgba(255,255,255,.18), transparent),
radial-gradient(1.5px 1.5px at 91% 33%, rgba(255,255,255,.24), transparent),
radial-gradient(1px 1px at 95% 82%, rgba(255,255,255,.14), transparent),
radial-gradient(1px 1px at 52% 6%, rgba(255,255,255,.2), transparent),
radial-gradient(1px 1px at 24% 5%, rgba(255,255,255,.16), transparent);
}
.auth-card{
width:100%;
max-width:380px;
min-height:0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
transition:
opacity .18s ease,
transform .18s ease,
max-width .25s ease;
}
.auth-card:hover{
transform:none;
}
/* Sign-in <-> sign-up transition (login.js#switchMode) — fades/settles the
whole card out, swaps the actual field markup while invisible, then
fades it back in, rather than the instant hidden-attribute snap this
used to be. Kept to a plain settle (no bounce) on purpose: .auth-card's
own --ease-bounce hover-lift is a response to a direct interaction, this
is a content swap, and the Motion section's own standard is animation-
communicates-state — "sleek and minimal" here means composed, not
springy. */
.auth-card.auth-card-switching{
opacity:0;
transform:translateY(6px);
}
/* The brand style guide's "dark-on-gold" treatment — one of the four named
pairings alongside gold-on-dark (.logo-mark in the header) — realized
here as a solid gold badge (not the old primary->accent-cyan gradient,
which diluted the brand pairing into a decorative one) with the mark
itself in ink rather than gold, since gold-on-gold would vanish. */
.auth-badge{
display:flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
margin-bottom:var(--space-4);
border-radius:50%;
background:var(--primary);
box-shadow:0 0 10px rgba(200, 164, 110,.22);
}
/* The one context the plain