/* Blue theme — glossy white + frosted glass over a fixed blue wave. Loaded after style.css; scoped entirely under :root[data-theme="blue"]. */ /* ---- Blue: glossy, white + frosted glass over a gentle blue wave ---- */ :root[data-theme="blue"] { --bg: #eaf1fb; --bg-soft: #dde8f7; --surface: rgba(255, 255, 255, .92); --ink: #1a2942; --ink-soft: #3c4f6b; --muted: #52678a; --line: #dce7f5; --line-strong: #c6d7ed; --rose: #5b8fd6; --rose-deep: #35618f; --rose-tint: #e7f0fc; --plum: #15335e; /* Blue theme recolours the warm status palette so nothing clashes with the calm glossy blue: the amber/orange "warning / pending" family becomes soft blue, the red "alert / not-sent / debt" family becomes soft green. Paid stays a distinct teal so it doesn't read the same as the new green. */ --sage: #2f9d8b; --sage-bg: #dbf1ec; /* paid — teal */ --amber: #4a7fb5; --amber-bg: #e5effb; /* was orange → soft blue */ --alert: #4c9e5f; --alert-bg: #e6f4e6; /* was red → soft green */ --shadow: 0 1px 2px rgba(40, 80, 140, .06), 0 8px 24px rgba(40, 80, 140, .12); --shadow-soft: 0 1px 2px rgba(40, 80, 140, .05); --ring: rgba(63, 111, 181, .24); --glow: 0 2px 12px rgba(63, 111, 181, .32); --shadow-hover: 0 6px 18px rgba(40, 80, 140, .16), 0 14px 34px rgba(40, 80, 140, .12); --shadow-pop: 0 16px 34px rgba(40, 80, 140, .22); --ok: #2a8a79; --ok-line: #c9e8e0; /* paid text — teal */ --warn: #39619a; --warn-line: #caddf3; /* warning text — blue */ --danger: #3a8248; --danger-line: #d0e9cf; /* alert / debt text — green */ } /* Blue theme backdrop: the rotated wave — soft blue silk columns down the left and right edges with a clean white centre for the content. A fixed full-viewport ::before (not background-attachment: fixed, which janks on mobile Safari): it stays put while the page slides over it. `cover` fills any viewport with no seam; the frosted cards blur it through themselves (that's the glass). */ :root[data-theme="blue"] body { background-color: #dce7f7; } :root[data-theme="blue"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)), url("/static/theme-blue-tile.jpg?v=5") center center / cover no-repeat; } /* Doodles belong only to the classic theme — the image/gradient backdrops carry the blue and bloom themes on their own. */ :root[data-theme="blue"] .deco, :root[data-theme="bloom"] .deco { display: none; } /* Frosted-glass surfaces: translucent, blurred, with a light top edge and an inner sheen so they read as real glass rather than flat tinted cards. */ :root[data-theme="blue"] .card, :root[data-theme="blue"] .student-card, :root[data-theme="blue"] .note-link, :root[data-theme="blue"] .panel, :root[data-theme="blue"] table.list { /* An internal top-to-bottom sheen makes the card read as glass even where the backdrop behind it is flat (e.g. lower on the billing page). */ background: linear-gradient(160deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .5) 100%); border-color: rgba(255, 255, 255, .7); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), var(--shadow); } /* Dropdown popovers and their triggers stay crisp/opaque so options read clearly (a translucent menu over the glass backdrop was hard to read). */ :root[data-theme="blue"] .cs-menu { background: #fff; } :root[data-theme="blue"] .cs-trigger.cs-box, :root[data-theme="blue"] .cs-trigger.cs-pill:not(.cs-hw) { background: #fff; } /* Everything glossy: in the blue theme the whole chrome — buttons, banners, inputs, chips — is frosted glass too, so nothing reads as a flat opaque control against the glass cards. */ :root[data-theme="blue"] .btn { background: linear-gradient(160deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .52)); border-color: rgba(255, 255, 255, .75); color: var(--plum); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), var(--shadow-soft); } :root[data-theme="blue"] .btn:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .68)); border-color: rgba(255, 255, 255, .9); color: var(--rose-deep); } /* Primary keeps its blue gradient; a light top edge gives it the wet gloss. */ :root[data-theme="blue"] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), var(--glow); } :root[data-theme="blue"] .btn-danger { color: var(--danger); border-color: rgba(255, 255, 255, .75); } /* Flash banners (warnings, errors, confirmations) become frosted coloured glass. */ :root[data-theme="blue"] .flash { -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--shadow); } :root[data-theme="blue"] .flash-ok { background: linear-gradient(160deg, rgba(219, 241, 236, .76), rgba(219, 241, 236, .52)); } :root[data-theme="blue"] .flash-err { background: linear-gradient(160deg, rgba(230, 244, 230, .76), rgba(230, 244, 230, .52)); } :root[data-theme="blue"] .flash-warn { background: linear-gradient(160deg, rgba(229, 239, 251, .76), rgba(229, 239, 251, .52)); } /* Status chips and homework pills get a glassy sheen + top highlight so the recoloured blue/green states read as glossy glass, not flat tints. */ :root[data-theme="blue"] .chip, :root[data-theme="blue"] .cs-trigger.cs-hw { background-image: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); } /* Text inputs frost too (native