/* =========================================================================
PRAXIS NOTEBOOK - the "Notebook" skin for layouts/praxis-app.blade.php.
Loads AFTER praxis.css + praxis-components.css and only acts under
body.px-notebook (the layout adds the class unless UI_SKIN=classic), so
leaving this file out gives back plain Praxis. Behaviour: dist/js/praxis-notebook.js.
The metaphor: the app is a spiral-bound exercise book on a desk. The stage
is the PAGE (dotted paper); every portal page has a sticky flag on the edge;
cards are white sheets; tables are ruled; KPI tiles are sticky notes; titles
carry a highlighter swipe; Caveat (--font-hand) is for annotations only.
Mascot: Jot the sticky note (partials/jot.blade.php).
Contents
1. KIT - components any page can use (.px-*): hero, rings, count-ups,
up-next, mastery rows, badges, mascot slot, toast, ripple.
2. JOT + INK - the Notebook look of those components, marking effects.
3. SKIN - Praxis components re-skinned (cards, tables, forms, modals...).
4. SHELL - desk, page, coils, flags, page turn, phone bar.
5. PAGES - calendar, popups (SweetAlert), inline alerts, auth pages, chat
and other page-level pieces.
Teacher "Quiet mode" = body.px-quiet (no mascot, motion, texture or sound).
Maths: codecogs ![]()
glyphs and inline-styled .vle-frac spans are never
resized or re-coloured here - keep it that way.
========================================================================= */
/* ######################################################################
1. KIT
###################################################################### */
:root{
/* motion tokens - themes override these */
--px-ease:cubic-bezier(.2,.7,.2,1);
--px-spring:cubic-bezier(.34,1.45,.64,1);
--px-fast:160ms;
--px-med:340ms;
--px-slow:700ms;
/* colour hooks */
--px-ring:var(--accent);
--px-hero-bg:var(--surface);
--px-hero-border:var(--line);
--px-bar:var(--accent);
}
/* ---- the pill group in the top bar: Quiet / Sound / compact flags ---- */
.px-switch{ display:inline-flex; align-items:center; gap:3px; padding:4px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.px-switch a,.px-switch button{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink-muted); text-decoration:none; white-space:nowrap; transition:background var(--px-fast),color var(--px-fast); }
.px-switch a:hover,.px-switch button:hover{ background:var(--surface-2); color:var(--ink); }
.px-switch .is-active{ background:var(--ink); color:var(--paper); }
.px-switch-home{ width:34px; padding:0 !important; justify-content:center; }
.px-switch-quiet{ border-left:1px solid var(--line); border-radius:0 999px 999px 0 !important; margin-left:2px; }
.px-switch-quiet.is-active{ background:var(--blue-tint); color:#2C6F8E; }
.px-switch .short{ display:none; }
@media(max-width:1180px){ .px-switch .full{ display:none; } .px-switch .short{ display:inline; } .px-switch a,.px-switch button{ padding:0 11px; } }
/* ---- staggered entrance ---- */
.px-reveal{ opacity:0; transform:translateY(14px); }
.px-reveal.in{ opacity:1; transform:none; transition:opacity var(--px-med) var(--px-ease),transform var(--px-med) var(--px-ease); }
/* ---- hover lift / press (only on things you can click) ---- */
.px-lift{ transition:transform var(--px-fast) var(--px-ease),box-shadow var(--px-fast) var(--px-ease),border-color var(--px-fast); }
.px-lift:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.px-lift:active{ transform:translateY(0) scale(.99); }
body[class*="px-"] .btn:active{ transform:scale(.97); }
body[class*="px-"] .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,87,52,.36); }
.px-cta-meta{ opacity:.78; font-weight:500; font-size:12px; margin-left:2px; }
/* ---- small uppercase tag for "proposed / needs data" notes ---- */
.px-tag{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-strong); background:var(--accent-tint); border-radius:999px; padding:3px 9px; vertical-align:middle; }
.px-tag.muted{ color:var(--ink-muted); background:var(--surface-inset); }
.px-note{ font-size:12.5px; color:var(--ink-faint); text-align:center; padding:14px 20px 22px; line-height:1.6; }
/* =========================================================================
HERO - "what do I do now" strip: mascot + greeting + 2 CTAs + streak/goal
========================================================================= */
.px-hero{ position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:24px 28px; margin:6px 0 20px; border-radius:var(--r-xl); background:var(--px-hero-bg); border:1px solid var(--px-hero-border); min-height:172px; }
.px-hero > *{ position:relative; z-index:1; }
/* the art layer is a backdrop, never a grid cell - the selector must out-rank `.px-hero > *` above */
.px-hero > .px-hero-art{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.px-hero-art svg{ width:100%; height:100%; }
.px-hero-mascot{ width:132px; flex:none; }
.px-hero-eyebrow{ margin-bottom:6px; }
.px-hero-title{ font-size:28px; letter-spacing:-.02em; }
.px-hero-sub{ color:var(--ink-2); font-size:15px; margin-top:6px; max-width:560px; line-height:1.55; }
.px-hero-sub b{ color:var(--ink); }
.px-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.px-hero-side{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.px-streak{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); min-width:150px; }
.px-streak .px-flame{ font-size:26px; color:var(--accent); line-height:1; }
.px-streak b{ display:block; font-size:26px; line-height:1; letter-spacing:-.02em; }
.px-streak span{ display:block; font-size:12px; color:var(--ink-muted); margin-top:3px; }
.px-goal{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.px-goal .px-goal-txt b{ display:block; font-size:14px; }
.px-goal .px-goal-txt span{ font-size:12px; color:var(--ink-muted); }
/* =========================================================================
PROGRESS RING
========================================================================= */
.px-ring{ position:relative; width:var(--size,84px); height:var(--size,84px); flex:none; }
.px-ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.px-ring circle{ fill:none; }
.px-ring .track{ stroke:var(--surface-inset); }
.px-ring .bar{ stroke:var(--px-ring); stroke-linecap:round; transition:stroke-dashoffset var(--px-slow) var(--px-ease); }
.px-ring .val{ position:absolute; inset:0; display:grid; place-items:center; font-weight:700; font-size:15px; letter-spacing:-.01em; }
.px-ring.lg .val{ font-size:30px; }
.px-ring.lg .val small{ font-size:14px; color:var(--ink-muted); font-weight:600; margin-left:1px; }
.px-ring-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 20px 20px; text-align:center; }
.px-ring-wrap p{ font-size:12.5px; color:var(--ink-muted); line-height:1.5; }
/* =========================================================================
KPI tiles - reuse praxis .kpi, add a faded background glyph + count-up
========================================================================= */
.px-kpis .kpi{ position:relative; overflow:hidden; }
.px-kpis .kpi-bg{ position:absolute; right:-8px; bottom:-14px; font-size:88px; opacity:.11; transform:rotate(-12deg); pointer-events:none; }
.px-kpis .kpi-delta{ display:inline-flex; align-items:center; gap:4px; }
/* =========================================================================
UP NEXT list
========================================================================= */
.px-next{ display:flex; flex-direction:column; }
.px-next-row{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; border-radius:10px; transition:background var(--px-fast); }
.px-next-row:last-child{ border-bottom:0; }
.px-next-row:hover{ background:var(--surface-2); }
.px-next-row:hover .px-next-go{ transform:translateX(3px); color:var(--accent); }
.px-next-ico{ width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center; font-size:17px; }
.px-next-main{ flex:1; min-width:0; }
.px-next-title{ display:block; font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.px-next-meta{ display:block; font-size:12px; color:var(--ink-muted); margin-top:2px; }
.px-mini{ display:block; height:6px; border-radius:999px; background:var(--surface-inset); overflow:hidden; margin-top:8px; max-width:260px; }
.px-mini i{ display:block; height:100%; width:0; border-radius:999px; background:var(--px-bar); transition:width var(--px-slow) var(--px-ease); }
.px-due{ flex:none; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap; }
.px-due.soon{ background:var(--accent-tint); color:var(--accent-strong); }
.px-due.ok{ background:var(--blue-tint); color:#2C6F8E; }
.px-due.late{ background:var(--bad-tint); color:var(--bad-ink); }
.px-due.done{ background:var(--good-tint); color:var(--good-ink); }
.px-next-go{ color:var(--ink-faint); font-size:13px; transition:transform var(--px-fast) var(--px-ease),color var(--px-fast); }
/* =========================================================================
TOPIC MASTERY rows render their visual via the theme (PX.theme.renderMastery)
========================================================================= */
.px-mastery{ display:flex; flex-direction:column; }
.px-mastery-row{ display:grid; grid-template-columns:minmax(100px,170px) 1fr auto; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.px-mastery-row:last-child{ border-bottom:0; }
.px-mastery-name{ font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.px-mastery-name small{ display:block; font-weight:500; font-size:11.5px; color:var(--ink-faint); }
.px-mastery-vis{ display:flex; align-items:center; min-height:26px; min-width:0; }
.px-mastery-pct{ font-weight:700; font-size:13.5px; min-width:42px; text-align:right; }
.px-bar{ flex:1; height:10px; border-radius:999px; background:var(--surface-inset); overflow:hidden; }
.px-bar i{ display:block; height:100%; width:0; border-radius:999px; background:var(--px-bar); transition:width var(--px-slow) var(--px-ease); }
/* =========================================================================
ACHIEVEMENTS / BADGES
========================================================================= */
.px-badges{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:14px 10px; padding:4px 0 6px; }
.px-badge{ text-align:center; }
.px-badge-ico{ width:62px; height:62px; border-radius:20px; display:grid; place-items:center; margin:0 auto 8px; font-size:24px; position:relative; transition:transform var(--px-fast) var(--px-spring); }
.px-badge:hover .px-badge-ico{ transform:translateY(-3px) rotate(-4deg); }
.px-badge-name{ font-weight:700; font-size:12.5px; line-height:1.3; }
.px-badge-sub{ font-size:11px; color:var(--ink-faint); margin-top:2px; }
.px-badge.locked .px-badge-ico{ background:var(--surface-inset) !important; color:var(--ink-faint) !important; }
.px-badge.locked .px-badge-name{ color:var(--ink-muted); }
.px-badge.new .px-badge-ico::after{ content:"NEW"; position:absolute; top:-7px; right:-9px; font-size:9px; font-weight:800; letter-spacing:.04em; background:var(--accent); color:#fff; border-radius:999px; padding:2px 6px; box-shadow:0 0 0 2px var(--surface); }
/* =========================================================================
ILLUSTRATED EMPTY STATE
========================================================================= */
.px-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:18px 16px 10px; }
.px-empty strong{ font-size:15px; margin-top:6px; }
.px-empty p{ font-size:13px; color:var(--ink-muted); line-height:1.55; max-width:300px; }
.px-empty .btn{ margin-top:8px; }
/* =========================================================================
MASCOT - one inline SVG, four moods toggled by data-mood on the