/* ==========================================================================
THEME: MODERN (opt-in, additive polish layer)
==========================================================================
This file does NOT touch style.css. Every rule here is scoped under
`body.theme-modern`, so none of it applies unless that class is present
on . That gives three levels of instant rollback:
1. Per page: remove `class="theme-modern"` from that page's tag.
style.css alone takes back over immediately - nothing else to undo.
2. Whole app: delete (or comment out) the
line from every
page's . A missing/broken link is harmless - the browser just
ignores it and style.css renders exactly as before.
3. Permanent: delete this file and the tags that reference it.
style.css is never edited or deleted by this file, so there is nothing
to "merge back" if you decide to keep the old look.
========================================================================== */
body.theme-modern {
--color-bg: #f6f7fb;
--color-surface: #ffffff;
--color-text: #1e293b;
--color-text-muted: #64748b;
--color-primary: #2980b9;
--color-primary-hover: #21618c;
--color-danger: #e74c3c;
--color-danger-hover: #c0392b;
--radius-sm: 6px;
--radius-md: 12px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
--shadow-lift: 0 12px 28px rgba(15, 23, 42, 0.18);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* --- Typography & color palette -------------------------------------- */
body.theme-modern {
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
/* A bit more breathing room than style.css's default, since the FABs
and footer both need to clear on every themed page. */
padding-bottom: 7rem;
}
body.theme-modern h1,
body.theme-modern h2 {
letter-spacing: -0.01em;
}
body.theme-modern #message,
body.theme-modern .char-counter,
body.theme-modern .app-footer {
color: var(--color-text-muted);
}
body.theme-modern #welcome-message {
font-size: 0.95rem;
color: var(--color-text-muted);
letter-spacing: 0.01em;
}
/* --- Card UI: elevated, premium look ---------------------------------- */
body.theme-modern .card {
background: var(--color-surface);
border: 1px solid rgba(15, 23, 42, 0.04);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 1.5rem;
}
/* --- Button polish: smooth hover lift ---------------------------------- */
body.theme-modern button,
body.theme-modern .support-fab,
body.theme-modern .feedback-fab,
body.theme-modern .coffee-button {
border-radius: var(--radius-sm);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
body.theme-modern button:hover,
body.theme-modern .support-fab:hover,
body.theme-modern .feedback-fab:hover,
body.theme-modern .coffee-button:hover {
transform: translateY(-2px);
}
body.theme-modern .support-fab,
body.theme-modern .feedback-fab {
border-radius: 999px;
box-shadow: var(--shadow-md);
}
body.theme-modern .support-fab:hover,
body.theme-modern .feedback-fab:hover {
box-shadow: var(--shadow-lift);
}
body.theme-modern .delete-button {
box-shadow: 0 2px 6px rgba(231, 76, 60, 0.35);
}
body.theme-modern .delete-button:hover {
background: var(--color-danger-hover);
box-shadow: 0 8px 18px rgba(231, 76, 60, 0.45);
}
/* --- Spacing: keep fixed FABs/footer clear of scrolled content --------- */
@media (min-width: 500px) {
body.theme-modern {
padding: 2rem 2rem 7rem;
}
}
/* ==========================================================================
Distinction legend: badge/chip redesign (replaces the small colored dots)
==========================================================================
New classes only - .grade-legend-dots/.legend-dot/.legend-swatch in
style.css are untouched. The old dot markup for this legend is kept as an
HTML comment right above the badge markup in subject.html, so reverting
is: delete the .grade-legend-badges block, uncomment the old one.
Each .legend-badge-* modifier reuses the *existing* solid grade-fail /
grade-pass / grade-merit2 / grade-merit1 / grade-distinction classes for
the dot's color (so the palette can't drift between the progress bar and
this legend) and only adds a light tint of that same hue for the chip
background, plus a matching darker shade for legible text.
========================================================================== */
.grade-legend-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-top: 0.75rem;
}
.legend-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
}
.legend-badge-dot {
width: 0.55rem;
height: 0.55rem;
min-width: 0.55rem;
border-radius: 50%;
}
.legend-badge-fail {
background: rgba(231, 76, 60, 0.12);
color: #c0392b;
}
.legend-badge-pass {
background: rgba(243, 156, 18, 0.14);
color: #b9770e;
}
.legend-badge-merit2 {
background: rgba(241, 196, 15, 0.18);
color: #8a6d00;
}
.legend-badge-merit1 {
background: rgba(52, 152, 219, 0.14);
color: #21618c;
}
.legend-badge-distinction {
background: rgba(39, 174, 96, 0.14);
color: #1e8449;
}
/* ==========================================================================
Dashboard user info: vertical card (replaces the single-line welcome text)
==========================================================================
New classes only - the old #welcome-message element and its CSS in
theme-modern.css's "Typography & color palette" section above are both
untouched. The old markup is kept as an HTML comment right above the
.user-info-card block in dashboard.html, so reverting is: delete the
.user-info-card block (and its 3 lines in dashboard.js), uncomment the
old
, and restore its one-line assignment in
dashboard.js.
========================================================================== */
/* Same "body.theme-modern .card" specificity as the base card rule (two
classes + one element each), so this cleanly overrides its background/
shadow/border instead of losing the cascade to it. */
body.theme-modern .card.user-info-card {
/* A light tint of the primary color (rather than plain white, like the
other .card elements) so this one visually stands out as "the user's
own info", not just another content card. */
background: rgba(41, 128, 185, 0.06);
border: 1px solid rgba(41, 128, 185, 0.12);
box-shadow: none;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
body.theme-modern .user-info-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
body.theme-modern .user-info-icon {
width: 2rem;
height: 2rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
line-height: 1;
background: var(--color-surface);
border-radius: 50%;
box-shadow: var(--shadow-sm);
}
body.theme-modern .user-info-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
body.theme-modern .user-info-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
body.theme-modern .user-info-value {
font-size: 1rem;
font-weight: 700;
color: var(--color-text);
}