/* ============================================================================= ActuallySpeak — as-polish.css ----------------------------------------------------------------------------- ONE stylesheet that lifts every page in the app, instead of 212 hand edits. THE PROBLEM: outside the few screens that were redesigned by hand, pages are flat white cards, grey hairline borders and a plain button. Nothing has an accent, nothing lifts, and under a full-colour photo the content below reads as unfinished. The app looks like several products from different years. THE APPROACH: the app already shares a small vocabulary of class names — .btn (916 uses), .note (421), .card (406), .ghost (350), .pill, .chip, .part, .wk, .mode, .opt, .tcard, .step, .stat. Styling those centrally upgrades everything at once and keeps it consistent forever after. THE RULES I GAVE MYSELF, so this can never break a layout: · VISUAL PROPERTIES ONLY — background, border, radius, shadow, colour, transition. Never display, position, width, float, or grid/flex flow. A page can only look different, never re-flow. · Selectors are prefixed `html[data-theme]` so they carry the same specificity as the existing per-page skin blocks and win purely on source order — which is why this file must be linked LAST in . · Every accent is a TINT of the brand gradient, never a flat fill, so it sits under content rather than competing with it. · Both themes are handled: lumen (light) needs ~8% tint, neon (dark) needs ~20% or it disappears. Same recipe, two strengths. · All motion is behind prefers-reduced-motion. Anything already styled by hand (words-in-context, week, course indexes) keeps its own look — those set their own colours locally and this only fills in what they left at the default. ============================================================================= */ :root{ --pol-1:#8b5cf6; --pol-2:#ec4899; --pol-3:#0ea5e9; --pol-grad:linear-gradient(135deg,#8b5cf6 0%,#a855f7 45%,#ec4899 100%); --pol-tint:linear-gradient(145deg,rgba(139,92,246,.085),rgba(236,72,153,.05)); --pol-edge:rgba(139,92,246,.24); --pol-edge-2:rgba(139,92,246,.42); --pol-soft:rgba(139,92,246,.11); --pol-shadow:0 8px 22px rgba(124,58,237,.11); --pol-shadow-2:0 14px 32px rgba(124,58,237,.18); --pol-r:18px; --pol-r-sm:13px; --pol-ease:cubic-bezier(.34,1.2,.55,1); } html[data-theme="neon"]{ --pol-tint:linear-gradient(145deg,rgba(139,92,246,.19),rgba(236,72,153,.11)); --pol-edge:rgba(139,92,246,.34); --pol-edge-2:rgba(139,92,246,.55); --pol-soft:rgba(139,92,246,.20); --pol-shadow:0 10px 28px rgba(3,7,20,.5); --pol-shadow-2:0 16px 40px rgba(3,7,20,.62); } /* ---------------------------------------------------------------- BUTTONS */ /* The primary button carries the brand. It was flat on most pages. */ html[data-theme] .btn{ border-radius:14px; background:var(--pol-grad); box-shadow:0 8px 22px rgba(139,92,246,.34); transition:transform .14s var(--pol-ease),box-shadow .2s ease,border-color .2s ease; border:none; } html[data-theme] .btn:hover{ transform:translateY(-2px); box-shadow:0 13px 30px rgba(139,92,246,.45); } html[data-theme] .btn:active{ transform:translateY(0) scale(.99); } html[data-theme] .btn:disabled, html[data-theme] .btn[disabled]{ transform:none; box-shadow:none; } /* Ghost/secondary: a tinted outline, not a grey box. */ html[data-theme] .btn.ghost, html[data-theme] .btn.light, html[data-theme] .btn.secondary{ background:var(--pol-tint); border:1.5px solid var(--pol-edge); box-shadow:none; color:var(--pol-1); } html[data-theme="neon"] .btn.ghost, html[data-theme="neon"] .btn.light, html[data-theme="neon"] .btn.secondary{ color:#dcd6ff; } html[data-theme] .btn.ghost:hover, html[data-theme] .btn.light:hover{ border-color:var(--pol-edge-2); transform:translateY(-2px); box-shadow:var(--pol-shadow); } /* ------------------------------------------------------------------ CARDS */ /* .card, and the list-row classes that behave like cards on their pages. */ html[data-theme] .card, html[data-theme] .mode, html[data-theme] .step, html[data-theme] .stat, html[data-theme] .tcard, html[data-theme] .panel{ border-radius:var(--pol-r); border:1.5px solid var(--pol-edge); box-shadow:var(--pol-shadow); transition:border-color .2s ease,box-shadow .2s ease,transform .14s var(--pol-ease); } /* Only rows that are actually clickable get the lift — a static card that jumps under the cursor reads as broken. */ html[data-theme] .tcard:hover, html[data-theme] .step:hover, html[data-theme] a.card:hover, html[data-theme] .card[onclick]:hover{ transform:translateY(-3px); border-color:var(--pol-edge-2); box-shadow:var(--pol-shadow-2); } /* ------------------------------------------------------------------ NOTES */ /* 421 uses. Was small grey text floating on the background. */ html[data-theme] .note{ background:var(--pol-tint); border:1px solid var(--pol-edge); border-left:3px solid var(--pol-1); border-radius:var(--pol-r-sm); padding:11px 13px; } html[data-theme] .note:empty{ display:none; } /* ------------------------------------------------- PILLS, CHIPS AND TAGS */ html[data-theme] .pill{ background:var(--pol-soft); color:var(--pol-1); border:1px solid var(--pol-edge); border-radius:999px; font-weight:800; letter-spacing:.06em; } html[data-theme="neon"] .pill{ color:#c4b5fd; } html[data-theme] .chip, html[data-theme] .tag{ border-radius:999px; border:1px solid var(--pol-edge); background:var(--pol-soft); transition:border-color .18s ease,background .18s ease; } html[data-theme] .chip:hover{ border-color:var(--pol-edge-2); } /* .chip.on / .sel / .active — the chosen state should be unmistakable */ html[data-theme] .chip.on, html[data-theme] .chip.sel, html[data-theme] .chip.active, html[data-theme] .opt.sel{ background:var(--pol-grad); color:#fff; border-color:transparent; box-shadow:0 5px 15px rgba(139,92,246,.4); } /* ------------------------------------------------------- QUIZ / OPTIONS */ /* .opt is the answer button across every quiz, exam and drill in the app. */ html[data-theme] .opt{ border-radius:var(--pol-r-sm); border:1.5px solid var(--pol-edge); transition:border-color .18s ease,background .18s ease,transform .12s var(--pol-ease); } html[data-theme] .opt:hover{ border-color:var(--pol-edge-2); transform:translateY(-1px); } /* correct/wrong states already carry their own colours — leave them alone */ html[data-theme] .opt.correct, html[data-theme] .opt.wrong{ transform:none; } /* ------------------------------------------------------------- HEADINGS */ html[data-theme] h1, html[data-theme] h2{ letter-spacing:-.4px; } /* the .brand wordmark gets the gradient wherever it appears */ html[data-theme] .brand em, html[data-theme] .brand .flow{ background:var(--pol-grad); -webkit-background-clip:text;background-clip:text;color:transparent; } /* --------------------------------------------------------------- INPUTS */ html[data-theme] input[type="text"], html[data-theme] input[type="email"], html[data-theme] input[type="search"], html[data-theme] input[type="number"], html[data-theme] textarea, html[data-theme] select{ border-radius:var(--pol-r-sm); border:1.5px solid var(--pol-edge); transition:border-color .16s ease,box-shadow .16s ease; } html[data-theme] input:focus, html[data-theme] textarea:focus, html[data-theme] select:focus{ outline:none; border-color:var(--pol-1); box-shadow:0 0 0 3px rgba(139,92,246,.18); } /* ------------------------------------------------------- PROGRESS BARS */ /* Anything shaped like a bar gets the brand gradient rather than one flat colour, so progress reads the same everywhere in the app. */ html[data-theme] .bar > i, html[data-theme] .pbar > i, html[data-theme] .prog > i, html[data-theme] .progressInner{ background:linear-gradient(90deg,var(--pol-3),var(--pol-1),var(--pol-2)); } /* --------------------------------------------------------- LIST ROWS */ /* .part and .wk are the week/course rows; they set their own accent via --pc / --pcx on the redesigned pages, and fall back to brand elsewhere. */ html[data-theme] .part, html[data-theme] .wk{ border-radius:var(--pol-r-sm); transition:border-color .2s ease,box-shadow .2s ease,transform .14s var(--pol-ease); } /* ------------------------------------------------------------- MOTION */ @media (prefers-reduced-motion:reduce){ html[data-theme] .btn, html[data-theme] .card, html[data-theme] .tcard, html[data-theme] .step, html[data-theme] .opt, html[data-theme] .chip, html[data-theme] .part, html[data-theme] .wk{ transition:none; } html[data-theme] .btn:hover, html[data-theme] .btn.ghost:hover, html[data-theme] .tcard:hover, html[data-theme] .step:hover, html[data-theme] .opt:hover, html[data-theme] a.card:hover{ transform:none; } }