/* ============================================================================ CEJOSE Parents Portal — Design System Premium & modern, brand-anchored (CEJOSE blue/green). Light + dark. Fonts: Bricolage Grotesque (display) + Hanken Grotesk (body/UI). ========================================================================== */ /* ---------- Tokens ---------- */ :root { /* Brand */ --brand-700: #003F7D; --brand-600: #0057A6; --brand-500: #1A6FBE; --brand-300: #7FB0DC; --brand-100: #DCEAF6; --brand-50: #EDF4FB; /* second stop of accent gradients (greeting, active indicators) */ --grad-2: #00A676; /* Positive / green */ --green-600: #008B62; --green-500: #00A676; --green-100: #D6F2E8; /* Attention / due */ --amber-600: #C77E0A; --amber-500: #F59E0B; --amber-100: #FCEDCF; /* Danger / overdue */ --red-600: #C8372D; --red-500: #EF4444; --red-100: #FBDEDB; /* Achievement gold (results, awards) */ --gold-600: #A9812C; --gold-500: #C8A04A; --gold-100: #F2E8CF; /* Neutral ink scale (premium navy-tinted) */ --ink-900: #0E1A2B; --ink-700: #2A3A4F; --ink-500: #5B6675; --ink-400: #8893A3; /* Light theme surfaces */ --bg: #EEF2F9; --bg-mesh-1: rgba(0, 87, 166, 0.10); --bg-mesh-2: rgba(0, 166, 118, 0.10); --surface: #FFFFFF; --surface-2: #F7F9FC; --surface-3: #EFF3F9; --border: #E2E8F2; --border-strong: #CBD5E6; --text: #0E1A2B; --text-soft: #3C4A5E; --text-mut: #6A788C; --on-brand: #FFFFFF; /* Elevation — layered soft shadows for premium depth */ --sh-sm: 0 1px 2px rgba(14,26,43,.05), 0 1px 1px rgba(14,26,43,.04); --sh-md: 0 2px 4px rgba(14,26,43,.05), 0 8px 18px -6px rgba(14,26,43,.12); --sh-lg: 0 4px 8px rgba(14,26,43,.06), 0 24px 48px -12px rgba(14,26,43,.20); --sh-brand: 0 10px 26px -8px rgba(0,87,166,.45); --sh-green: 0 10px 26px -8px rgba(0,166,118,.40); /* Radii */ --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* Type */ --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --num: "Hanken Grotesk", system-ui, sans-serif; /* Layout */ --sidebar-w: 264px; --content-max: 1180px; --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); } :root[data-theme="dark"] { --bg: #070C16; --bg-mesh-1: rgba(26, 111, 190, 0.18); --bg-mesh-2: rgba(0, 166, 118, 0.14); --surface: #0F1726; --surface-2: #131E31; --surface-3: #1B2940; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16); --text: #EAF1FB; --text-soft: #C3CEDF; --text-mut: #8A98AE; --brand-100: #16314F; --brand-50: #11243B; --green-100: #0E3A2C; --amber-100: #3A2E12; --red-100: #3A1E1C; --gold-100: #332A14; --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh-md: 0 2px 6px rgba(0,0,0,.45), 0 10px 24px -8px rgba(0,0,0,.6); --sh-lg: 0 8px 18px rgba(0,0,0,.5), 0 28px 56px -16px rgba(0,0,0,.7); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } /* Root font-size drives every rem-based text size; the Settings "Text size" control switches data-fontsize on to scale the whole app. */ html { font-size: 16px; } :root[data-fontsize="large"] { font-size: 17.5px; } :root[data-fontsize="xlarge"] { font-size: 19.5px; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; } /* Tabular figures for all numeric/money so columns never jitter */ .num, .stat-value, .money, .tt, td.num, .table td { font-variant-numeric: tabular-nums; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.12; } /* ============================================================================ APP SHELL ========================================================================== */ .app { display: none; min-height: 100dvh; } .app.active { display: block; } .app-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; } /* Sidebar (desktop only) */ .sidebar { display: none; } /* Top bar */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--border); } .topbar .brand { display: flex; align-items: center; gap: 10px; } .topbar .brand img { width: 34px; height: 34px; border-radius: 9px; } .topbar .brand .b-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1; } .topbar .brand .b-sub { font-size: .68rem; color: var(--text-mut); letter-spacing: .04em; text-transform: uppercase; } .topbar .spacer { flex: 1; } .icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--text-soft); border: 1px solid transparent; transition: background .18s, color .18s, transform .12s; } .icon-btn:hover { background: var(--surface-3); color: var(--text); } .icon-btn:active { transform: scale(.92); } .icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-500); border: 2px solid var(--surface); } .icon-btn { position: relative; } /* Content */ .content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 18px 16px 120px; } .view { animation: fadeUp .4s var(--ease-out) both; } /* Bottom nav (mobile) */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px); background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--border); } .navitem { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: var(--r-sm); color: var(--text-mut); font-size: .66rem; font-weight: 600; letter-spacing: .01em; transition: color .18s; position: relative; min-height: 48px; justify-content: center; } .navitem svg { width: 23px; height: 23px; } .navitem.active { color: var(--brand-600); } :root[data-theme="dark"] .navitem.active { color: var(--brand-300); } .navitem.active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-600), var(--grad-2)); } .navitem .badge-mini { position: absolute; top: 2px; right: calc(50% - 18px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--red-500); color: #fff; font-size: .6rem; font-weight: 700; display: grid; place-items: center; } /* ============================================================================ PRIMITIVES ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); } .card-pad { padding: 18px; } .section-title { display: flex; align-items: center; justify-content: space-between; margin: 26px 4px 12px; } .section-title h2 { font-size: 1.12rem; } .section-title .link { font-size: .82rem; font-weight: 600; color: var(--brand-600); display: inline-flex; align-items: center; gap: 3px; } :root[data-theme="dark"] .section-title .link { color: var(--brand-300); } .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mut); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; letter-spacing: .005em; transition: transform .14s var(--ease-spring), box-shadow .2s, background .2s, border-color .2s; border: 1px solid transparent; white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); color: #fff; box-shadow: var(--sh-brand); } .btn-primary:hover { box-shadow: 0 14px 34px -8px rgba(0,87,166,.55); transform: translateY(-1px); } .btn-green { background: linear-gradient(135deg, var(--green-500), var(--green-600)); color: #fff; box-shadow: var(--sh-green); } .btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .btn-ghost:hover { background: var(--surface-3); } .btn-soft { background: var(--brand-50); color: var(--brand-700); } :root[data-theme="dark"] .btn-soft { color: var(--brand-300); } .btn-block { width: 100%; } .btn-sm { height: 38px; padding: 0 14px; font-size: .84rem; } /* Pills / badges */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; letter-spacing: .01em; } .pill svg { width: 13px; height: 13px; } .pill-green { background: var(--green-100); color: var(--green-600); } .pill-amber { background: var(--amber-100); color: var(--amber-600); } .pill-red { background: var(--red-100); color: var(--red-600); } .pill-blue { background: var(--brand-100); color: var(--brand-700); } .pill-gold { background: var(--gold-100); color: var(--gold-600); } .pill-mut { background: var(--surface-3); color: var(--text-mut); } :root[data-theme="dark"] .pill-blue { color: var(--brand-300); } /* Avatars */ .avatar { border-radius: var(--r-pill); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; flex: none; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); } .avatar.av-g { background: linear-gradient(135deg, var(--green-500), var(--green-600)); } .avatar.av-gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); } .av-28 { width: 28px; height: 28px; font-size: .72rem; } .av-40 { width: 40px; height: 40px; font-size: .9rem; } .av-48 { width: 48px; height: 48px; font-size: 1rem; } .av-64 { width: 64px; height: 64px; font-size: 1.3rem; } /* Divider */ .hr { height: 1px; background: var(--border); border: 0; margin: 14px 0; } /* ============================================================================ DASHBOARD HERO + CHILD SWITCHER ========================================================================== */ .hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 22px 20px 20px; background: radial-gradient(120% 90% at 0% 0%, var(--bg-mesh-1), transparent 60%), radial-gradient(120% 110% at 100% 10%, var(--bg-mesh-2), transparent 55%), var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-md); } .hero::after { content: ""; position: absolute; right: -40px; top: -50px; width: 180px; height: 180px; background: radial-gradient(circle, var(--brand-300), transparent 70%); opacity: .25; filter: blur(6px); animation: drift 9s ease-in-out infinite alternate; } .hero .greet-eyebrow { font-size: .76rem; color: var(--text-mut); font-weight: 600; } .hero .greet { font-size: 1.55rem; margin-top: 2px; } .hero .greet b { background: linear-gradient(120deg, var(--brand-600), var(--grad-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .switcher { display: flex; gap: 10px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .switcher::-webkit-scrollbar { display: none; } .child-chip { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--border); flex: none; transition: border-color .18s, box-shadow .18s, transform .14s; position: relative; } .child-chip:active { transform: scale(.97); } .child-chip.active { border-color: var(--brand-500); box-shadow: var(--sh-sm), 0 0 0 3px var(--brand-100); } .child-chip .c-name { font-weight: 700; font-size: .86rem; line-height: 1.05; } .child-chip .c-class { font-size: .7rem; color: var(--text-mut); } .child-chip.add { padding: 7px 16px; color: var(--text-mut); font-weight: 600; font-size: .84rem; } /* Stat grid */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; } .stat-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px; box-shadow: var(--sh-md); transition: transform .16s var(--ease-out), box-shadow .2s; min-height: 124px; display: flex; flex-direction: column; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); } .stat-card .s-top { display: flex; align-items: center; justify-content: space-between; } .stat-card .s-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; } .stat-card .s-ico svg { width: 19px; height: 19px; } .s-ico.blue { background: var(--brand-100); color: var(--brand-700); } .s-ico.green { background: var(--green-100); color: var(--green-600); } .s-ico.gold { background: var(--gold-100); color: var(--gold-600); } .s-ico.amber { background: var(--amber-100); color: var(--amber-600); } :root[data-theme="dark"] .s-ico.blue { color: var(--brand-300); } .stat-card .s-label { font-size: .76rem; color: var(--text-mut); font-weight: 600; margin-top: auto; } .stat-card .stat-value { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1; } .stat-card .s-sub { font-size: .72rem; color: var(--text-mut); margin-top: 1px; } .stat-card.tap { cursor: pointer; } /* Progress ring */ .ring { --p: 0; width: 52px; height: 52px; flex: none; } .ring circle { fill: none; stroke-width: 6; } .ring .track { stroke: var(--surface-3); } .ring .bar { stroke: var(--green-500); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 - 138.2 * var(--p)); transition: stroke-dashoffset 1s var(--ease-out); } .ring text { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: var(--text); } /* ============================================================================ LIST ROWS / TABLES ========================================================================== */ .list { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .row:last-child { border-bottom: 0; } .row .r-main { flex: 1; min-width: 0; } .row .r-title { font-weight: 600; font-size: .92rem; } .row .r-sub { font-size: .78rem; color: var(--text-mut); margin-top: 1px; } .row .r-end { text-align: right; } .row .r-amt { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; } .row.tap { transition: background .15s; cursor: pointer; } .row.tap:hover { background: var(--surface-2); } .r-thumb { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; } .table { width: 100%; border-collapse: collapse; font-size: .88rem; } .table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); } .table td { padding: 12px; border-bottom: 1px solid var(--border); } .table tr:last-child td { border-bottom: 0; } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table tfoot td { font-weight: 700; } /* Amount summary block */ .amount-hero { text-align: center; padding: 22px 16px 18px; } .amount-hero .ah-label { font-size: .8rem; color: var(--text-mut); font-weight: 600; } .amount-hero .ah-value { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 4px 0; } .amount-hero .ah-value.owe { color: var(--amber-600); } .amount-hero .ah-value.clear { color: var(--green-600); } /* Progress bar */ .pbar { height: 9px; border-radius: 9px; background: var(--surface-3); overflow: hidden; } .pbar > i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--green-500), var(--green-600)); transition: width .9s var(--ease-out); } .pbar.brand > i { background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); } /* ============================================================================ SEGMENTED TABS ========================================================================== */ .segment { display: flex; gap: 4px; padding: 4px; background: var(--surface-3); border-radius: var(--r-pill); margin: 4px 0 16px; } .segment button { flex: 1; height: 36px; border-radius: var(--r-pill); font-weight: 600; font-size: .84rem; color: var(--text-mut); transition: color .18s; position: relative; z-index: 1; } .segment button.active { color: var(--text); background: var(--surface); box-shadow: var(--sh-sm); } /* Subtabs (text underline) */ .subtabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; } .subtabs::-webkit-scrollbar { display: none; } .subtabs button { padding: 10px 2px; font-weight: 600; font-size: .9rem; color: var(--text-mut); border-bottom: 2.5px solid transparent; white-space: nowrap; } .subtabs button.active { color: var(--brand-600); border-bottom-color: var(--brand-600); } :root[data-theme="dark"] .subtabs button.active { color: var(--brand-300); border-bottom-color: var(--brand-300); } /* ============================================================================ REPORT CARD / RESULTS ========================================================================== */ .grade-badge { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .95rem; } .g-A { background: var(--green-100); color: var(--green-600); } .g-B { background: var(--brand-100); color: var(--brand-700); } .g-C { background: var(--amber-100); color: var(--amber-600); } .g-D, .g-F { background: var(--red-100); color: var(--red-600); } :root[data-theme="dark"] .g-B { color: var(--brand-300); } .position-medal { display: inline-flex; align-items: center; gap: 6px; } .conduct-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); } .conduct-row:last-child { border-bottom: 0; } .dots { display: inline-flex; gap: 4px; } .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); } .dots i.on { background: var(--green-500); } /* ============================================================================ CALENDAR + TIMETABLE ========================================================================== */ .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cal-head h3 { font-size: 1.1rem; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-dow { text-align: center; font-size: .68rem; font-weight: 700; color: var(--text-mut); padding: 4px 0; text-transform: uppercase; letter-spacing: .03em; } .cal-cell { aspect-ratio: 1; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7px; font-size: .82rem; font-weight: 600; position: relative; color: var(--text-soft); border: 1px solid transparent; transition: background .15s; } .cal-cell.muted { color: var(--text-mut); opacity: .45; } .cal-cell.today { background: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); } .cal-cell.has:not(.today) { background: var(--surface-2); } .cal-cell.range { background: var(--amber-100); color: var(--amber-600); border-radius: 0; } .cal-cell .evdots { display: flex; gap: 2px; position: absolute; bottom: 6px; } .cal-cell .evdots i { width: 5px; height: 5px; border-radius: 50%; } .ev-blue { background: var(--brand-500); } .ev-green { background: var(--green-500); } .ev-amber { background: var(--amber-500); } .ev-red { background: var(--red-500); } .ev-gold { background: var(--gold-500); } .cal-cell.today .evdots i { background: rgba(255,255,255,.9); } .legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: .76rem; color: var(--text-mut); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 9px; height: 9px; border-radius: 50%; } .event-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .event-row:last-child { border-bottom: 0; } .event-date { width: 46px; text-align: center; flex: none; } .event-date .ed-day { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; } .event-date .ed-mon { font-size: .66rem; text-transform: uppercase; color: var(--text-mut); font-weight: 700; } .event-bar { width: 4px; border-radius: 4px; flex: none; } /* Timetable */ .tt-day-pick { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; } .tt-day-pick::-webkit-scrollbar { display: none; } .tt-day-pick button { flex: none; padding: 7px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: .82rem; background: var(--surface-3); color: var(--text-mut); } .tt-day-pick button.active { background: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); } .tt-slot { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); } .tt-slot:last-child { border-bottom: 0; } .tt-time { width: 64px; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .8rem; color: var(--text-mut); } .tt-subj { font-weight: 600; font-size: .92rem; } .tt-teacher { font-size: .76rem; color: var(--text-mut); } .tt-slot.break-slot .tt-subj { color: var(--text-mut); font-style: italic; } /* ============================================================================ MESSAGES / CHAT ========================================================================== */ .thread-list .row .r-thumb { background: var(--brand-100); color: var(--brand-700); } .chat-wrap { display: flex; flex-direction: column; height: calc(100dvh - 220px); min-height: 380px; } .chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 4px 14px; border-bottom: 1px solid var(--border); } .chat-scroll { flex: 1; overflow-y: auto; padding: 16px 2px; display: flex; flex-direction: column; gap: 10px; } .bubble { max-width: 78%; padding: 11px 14px; border-radius: 18px; font-size: .9rem; line-height: 1.4; box-shadow: var(--sh-sm); } .bubble .b-time { font-size: .66rem; opacity: .7; margin-top: 4px; display: block; } .bubble.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; } .bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); color: #fff; border-bottom-right-radius: 6px; } .bubble.me .b-time { color: rgba(255,255,255,.8); } .day-sep { text-align: center; font-size: .72rem; color: var(--text-mut); margin: 6px 0; } .composer { display: flex; gap: 8px; align-items: center; padding: 12px 0 4px; border-top: 1px solid var(--border); } .composer input { flex: 1; height: 46px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); padding: 0 18px; font: inherit; color: var(--text); } .composer input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); } .send-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-brand); transition: transform .14s; } .send-btn:active { transform: scale(.9); } /* ============================================================================ LOGIN / ONBOARDING ========================================================================== */ .auth { min-height: 100dvh; display: none; grid-template-rows: auto 1fr; position: relative; overflow: hidden; } .auth.active { display: grid; } .auth-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(80% 60% at 20% 0%, rgba(0,87,166,.5), transparent 60%), radial-gradient(70% 60% at 100% 10%, rgba(0,166,118,.45), transparent 55%), linear-gradient(180deg, var(--brand-700), #04101F 75%); } .auth-bg .blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; } .auth-bg .b1 { width: 260px; height: 260px; background: var(--brand-500); top: -60px; left: -40px; animation: drift 11s ease-in-out infinite alternate; } .auth-bg .b2 { width: 220px; height: 220px; background: var(--green-500); bottom: 40px; right: -50px; animation: drift 13s ease-in-out infinite alternate-reverse; } .auth-top { position: relative; z-index: 2; padding: calc(env(safe-area-inset-top) + 26px) 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; } .auth-top img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.5); } .auth-top h1 { font-size: 1.7rem; margin-top: 18px; color: #fff; } .auth-top p { color: rgba(255,255,255,.78); margin-top: 6px; font-size: .92rem; max-width: 320px; } .auth-sheet { position: relative; z-index: 2; margin-top: 26px; background: var(--surface); border-radius: 30px 30px 0 0; padding: 28px 22px calc(env(safe-area-inset-bottom) + 28px); box-shadow: 0 -10px 40px -10px rgba(0,0,0,.3); align-self: end; width: 100%; max-width: 480px; margin-inline: auto; animation: sheetUp .5s var(--ease-out) both; } .field { margin-bottom: 16px; } .field label { display: block; font-weight: 600; font-size: .84rem; margin-bottom: 7px; } .input-wrap { display: flex; align-items: center; gap: 10px; height: 54px; border-radius: var(--r); border: 1.5px solid var(--border-strong); background: var(--surface-2); padding: 0 14px; transition: border-color .18s, box-shadow .18s; } .input-wrap:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); background: var(--surface); } .input-wrap .prefix { font-weight: 600; color: var(--text-mut); display: flex; align-items: center; gap: 6px; } .input-wrap input { flex: 1; border: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--text); outline: none; letter-spacing: .02em; } .help-text { font-size: .78rem; color: var(--text-mut); margin-top: -6px; margin-bottom: 16px; } .muted-link { color: var(--brand-600); font-weight: 600; } :root[data-theme="dark"] .muted-link { color: var(--brand-300); } /* OTP boxes */ .otp-row { display: flex; gap: 10px; justify-content: center; margin: 8px 0 4px; } .otp-box { width: 50px; height: 60px; border-radius: 14px; border: 1.5px solid var(--border-strong); background: var(--surface-2); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text); } .otp-box:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); background: var(--surface); } .otp-box.filled { border-color: var(--brand-500); } .resend { text-align: center; font-size: .84rem; color: var(--text-mut); margin-top: 16px; } /* ============================================================================ EMPTY STATE / SKELETON / TOAST / MODAL ========================================================================== */ .empty { text-align: center; padding: 40px 20px; color: var(--text-mut); } .empty .e-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--surface-3); display: grid; place-items: center; margin: 0 auto 14px; color: var(--text-mut); } .empty .e-ico svg { width: 30px; height: 30px; } .empty h3 { font-size: 1.05rem; color: var(--text); margin-bottom: 4px; } .toast-wrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 92px); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-radius: var(--r); background: var(--ink-900); color: #fff; box-shadow: var(--sh-lg); font-size: .88rem; font-weight: 500; animation: toastIn .3s var(--ease-spring) both; } .toast .t-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.14); } .toast .t-ico.ok { background: var(--green-500); } .scrim { position: fixed; inset: 0; z-index: 150; background: rgba(8,14,25,.55); backdrop-filter: blur(3px); display: none; animation: fade .2s ease both; } .scrim.show { display: block; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; max-width: 480px; margin-inline: auto; background: var(--surface); border-radius: 26px 26px 0 0; padding: 8px 20px calc(env(safe-area-inset-bottom) + 24px); transform: translateY(100%); transition: transform .34s var(--ease-out); max-height: 86dvh; overflow-y: auto; } .sheet.show { transform: translateY(0); } .sheet .grab { width: 42px; height: 5px; border-radius: 5px; background: var(--border-strong); margin: 8px auto 16px; } .sheet h3 { font-size: 1.2rem; margin-bottom: 4px; } /* Notification banner row */ .notif-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); } .notif-row:last-child { border-bottom: 0; } .notif-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; } /* Announcement card */ .ann-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-bottom: 1px solid var(--border); } .ann-card:last-child { border-bottom: 0; } .ann-card .ann-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .ann-card .ann-body { font-size: .86rem; color: var(--text-soft); } .ann-card .ann-meta { font-size: .74rem; color: var(--text-mut); } /* ============================================================================ ANIMATIONS ========================================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } } @keyframes toastIn { from { opacity: 0; transform: translate(-0%, 14px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes drift { from { transform: translate(0,0); } to { transform: translate(18px, 22px); } } @keyframes shimmer { to { background-position: 200% 0; } } @keyframes pop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .stagger > * { animation: fadeUp .5s var(--ease-out) both; } .stagger > *:nth-child(1) { animation-delay: .04s; } .stagger > *:nth-child(2) { animation-delay: .10s; } .stagger > *:nth-child(3) { animation-delay: .16s; } .stagger > *:nth-child(4) { animation-delay: .22s; } .stagger > *:nth-child(5) { animation-delay: .28s; } .stagger > *:nth-child(6) { animation-delay: .34s; } .stagger > *:nth-child(7) { animation-delay: .40s; } /* ============================================================================ DESKTOP (>= 1024px) — sidebar layout ========================================================================== */ @media (min-width: 1024px) { .app-grid { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .bottomnav { display: none; } .sidebar { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100dvh; padding: 22px 16px; background: var(--surface); border-right: 1px solid var(--border); } .sidebar .s-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; } .sidebar .s-brand img { width: 42px; height: 42px; border-radius: 12px; } .sidebar .s-brand .b-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; } .sidebar .s-brand .b-sub { font-size: .68rem; color: var(--text-mut); text-transform: uppercase; letter-spacing: .05em; } .side-link { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 14px; font-weight: 600; font-size: .92rem; color: var(--text-soft); transition: background .16s, color .16s; position: relative; } .side-link svg { width: 21px; height: 21px; } .side-link:hover { background: var(--surface-2); } .side-link.active { background: var(--brand-50); color: var(--brand-700); } :root[data-theme="dark"] .side-link.active { color: var(--brand-300); } .side-link.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3.5px; border-radius: 3px; background: linear-gradient(var(--brand-600), var(--grad-2)); } .side-link .badge-mini { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red-500); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; } .side-foot { margin-top: auto; } .topbar .brand { display: none; } .content { padding: 26px 32px 60px; } .stat-grid { grid-template-columns: repeat(4, 1fr); } .two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; } .hero .greet { font-size: 1.9rem; } .auth-sheet { border-radius: 30px; align-self: center; margin-bottom: 40px; } .auth { grid-template-rows: 1fr; place-items: center; } .auth-inner { display: flex; gap: 0; align-items: stretch; } } @media (min-width: 1024px) { .desktop-hide { display: none !important; } } @media (max-width: 1023px) { .mobile-hide { display: none !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .ring .bar { transition: none; } } /* ============================================================================ COLOUR PALETTES — override the brand ramp + accent gradient + hero mesh. data-palette on . "cejose" is the default (no attribute needed). Semantic colours (green=paid/present, amber=due, red, gold=achievement) stay constant for clarity across palettes. ========================================================================== */ /* Emerald — growth / education, green-led with a gold accent gradient */ :root[data-palette="emerald"] { --brand-700: #0B6B4F; --brand-600: #0E8C63; --brand-500: #18A878; --brand-300: #86D9BD; --brand-100: #D4F2E6; --brand-50: #E9F8F1; --grad-2: #C8A04A; --bg-mesh-1: rgba(14,140,99,.10); } :root[data-theme="dark"][data-palette="emerald"] { --brand-100: #103528; --brand-50: #0C2A20; --bg-mesh-1: rgba(24,168,120,.16); } /* Indigo — premium / modern, violet-indigo with a teal accent */ :root[data-palette="indigo"] { --brand-700: #3A2E8C; --brand-600: #4F46C9; --brand-500: #6D63E0; --brand-300: #B3ADF0; --brand-100: #E4E1FA; --brand-50: #EFEDFC; --grad-2: #22B8A6; --bg-mesh-1: rgba(79,70,201,.10); } :root[data-theme="dark"][data-palette="indigo"] { --brand-100: #241F52; --brand-50: #1B1740; --bg-mesh-1: rgba(109,99,224,.18); } /* Teal — calm / ocean, teal with a blue accent */ :root[data-palette="teal"] { --brand-700: #0A6E73; --brand-600: #0E8F92; --brand-500: #18A9A6; --brand-300: #84D6D2; --brand-100: #D2F1EF; --brand-50: #E9F8F6; --grad-2: #2E7DD1; --bg-mesh-1: rgba(14,143,146,.10); } :root[data-theme="dark"][data-palette="teal"] { --brand-100: #0E3536; --brand-50: #0A2A2B; --bg-mesh-1: rgba(24,169,166,.16); } /* Sunset — warm / friendly, terracotta-orange with a teal accent */ :root[data-palette="sunset"] { --brand-700: #B5471A; --brand-600: #E06A22; --brand-500: #F0863F; --brand-300: #F6BE94; --brand-100: #FCE6D6; --brand-50: #FDF2EA; --grad-2: #1FA6A0; --bg-mesh-1: rgba(224,106,34,.12); } :root[data-theme="dark"][data-palette="sunset"] { --brand-100: #3A2415; --brand-50: #2E1C10; --bg-mesh-1: rgba(240,134,63,.16); } /* Plum — sophisticated / editorial, deep magenta with an amber-gold accent */ :root[data-palette="plum"] { --brand-700: #7A1F52; --brand-600: #A82C72; --brand-500: #C0488C; --brand-300: #E5A6CC; --brand-100: #F7DBEC; --brand-50: #FCEEF6; --grad-2: #E0A422; --bg-mesh-1: rgba(168,44,114,.11); } :root[data-theme="dark"][data-palette="plum"] { --brand-100: #3A1730; --brand-50: #2C1124; --bg-mesh-1: rgba(192,72,140,.18); } /* Royal Purple — St. Paul's brand (deep purple + gold) */ :root[data-palette="stpauls"] { --brand-700: #2A0870; --brand-600: #3C0B9F; --brand-500: #5A2BCB; --brand-300: #B49AEC; --brand-100: #E9E0FF; --brand-50: #F4F0FF; --grad-2: #F5B301; --bg-mesh-1: rgba(60,11,159,.10); } :root[data-theme="dark"][data-palette="stpauls"] { --brand-100: #2A0F52; --brand-50: #1E0A40; --bg-mesh-1: rgba(109,61,214,.18); } /* ============================================================================ STAFF PORTAL — additional components (attendance register, gradebook, conduct dots, form selects) ========================================================================== */ /* segmented Present / Absent / Sick control */ .seg-group { display: flex; gap: 6px; flex: none; } .seg-btn { width: 34px; height: 34px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-mut); font-weight: 700; font-size: .82rem; cursor: pointer; transition: all .15s; font-family: var(--font-body); } .seg-btn:hover { border-color: var(--brand-300); } .seg-btn.active.present { background: var(--green-500); border-color: var(--green-500); color: #fff; } .seg-btn.active.absent { background: var(--amber-600); border-color: var(--amber-600); color: #fff; } .seg-btn.active.sick { background: var(--red-600); border-color: var(--red-600); color: #fff; } /* gradebook table */ .gb-table { width: 100%; border-collapse: collapse; font-size: .84rem; } .gb-table th { text-align: center; font-size: .72rem; color: var(--text-mut); font-weight: 600; padding: 4px 6px; } .gb-table td { text-align: center; padding: 6px 5px; border-top: 1px solid var(--border); vertical-align: middle; } .gb-name { font-weight: 600; font-size: .86rem; white-space: nowrap; } .gb-grade { font-size: .72rem; color: var(--brand-600); font-weight: 600; } .gb-input { width: 52px; height: 34px; text-align: center; border-radius: 9px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: .9rem; font-family: var(--font-body); } .gb-input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); } .gb-total { font-weight: 700; color: var(--text); font-size: .95rem; } /* tappable conduct dots */ .dots-tap i { cursor: pointer; } /* form selects + textareas (reuse input-wrap look) */ .input-wrap select, .field textarea { width: 100%; border: none; background: transparent; font-family: var(--font-body); font-size: .95rem; color: var(--text); outline: none; } .field textarea { border: 1.5px solid var(--border); border-radius: var(--r); background: var(--surface-2); padding: 11px 13px; resize: vertical; line-height: 1.5; } .field textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); } .input-wrap select { padding: 2px 0; } /* attendance date picker + quick-date chips */ .att-date { flex: none; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 11px; padding: 7px 10px; font-family: var(--font-body); font-size: .85rem; } .att-date:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); } .att-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; } .att-quickdates { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .att-quickdates button { border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-mut); border-radius: 99px; padding: 6px 14px; font-weight: 600; font-size: .82rem; cursor: pointer; font-family: var(--font-body); transition: all .15s; } .att-quickdates button:hover { border-color: var(--brand-300); } .att-quickdates button.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } /* themed dashboard cards — fill with the selected palette colour (re-skins live) */ .stat-card.brand-card { background: radial-gradient(120% 130% at 100% 0%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(145deg, var(--brand-500) 0%, var(--brand-700) 100%); border-color: transparent; color: #fff; } .stat-card.brand-card .s-label, .stat-card.brand-card .s-sub { color: rgba(255, 255, 255, .82); } .stat-card.brand-card .stat-value { color: #fff; } .stat-card.brand-card .s-ico { background: rgba(255, 255, 255, .20); color: #fff; } .stat-card.brand-card .pill { background: rgba(255, 255, 255, .22); color: #fff; } .stat-card.brand-card:hover { box-shadow: var(--sh-lg); } /* Requisition sign-off chain (vertical stepper) */ .req-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--border-strong); background: var(--surface); color: #fff; } .req-dot.done { background: var(--green-500); border-color: var(--green-500); } .req-vline { width: 2px; flex: 1; min-height: 16px; background: var(--border-strong); margin: 2px 0; } .req-vline.done { background: var(--green-500); } .req-line { padding: 8px 0; border-top: 1px solid var(--border); } .req-line:first-child { border-top: none; padding-top: 0; } /* Biometric lock screen — the round fingerprint target */ .lock-fp { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; margin: 4px auto 0; color: var(--brand-600); background: var(--brand-100); cursor: pointer; box-shadow: 0 0 0 0 var(--brand-100); animation: fpPulse 2s var(--ease-out) infinite; } .lock-fp:active { transform: scale(.96); } @keyframes fpPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 87, 166, .28); } 70% { box-shadow: 0 0 0 16px rgba(0, 87, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 87, 166, 0); } } /* Settings footer credits — centred (flex so it can't be overridden) */ .credits { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 18px auto 0; line-height: 1.55; } .credits .cr-by { font-size: .68rem; color: var(--text-mut); letter-spacing: .14em; text-transform: uppercase; } .credits .cr-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--text-soft); margin-top: 3px; } .credits .cr-link { font-size: .82rem; color: var(--brand-600); text-decoration: none; font-weight: 600; margin-top: 3px; } .credits .cr-link:hover { text-decoration: underline; }