/* ============================================================ smartig — Design System · SMP Harapan 3 "Kartu Kredensial" identity One shared stylesheet for the whole product family. Link once: Set the portal accent on or : data-role="siswa|guru|ortu|admin" ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap'); /* ------------------------------------------------------------ 1. TOKENS ------------------------------------------------------------ */ :root { /* Brand blue (sky) — matches manifest theme-color #0284C7 */ --brand-50:#F0F9FF; --brand-100:#E0F2FE; --brand-200:#BAE6FD; --brand-300:#7DD3FC; --brand-400:#38BDF8; --brand-500:#0EA5E9; --brand-600:#0284C7; --brand-700:#0369A1; --brand-800:#075985; --brand-900:#0C4A6E; /* Gold — achievement, StarTrack, the foil accent */ --gold-300:#FDE68A; --gold-400:#FCD34D; --gold-500:#F59E0B; --gold-600:#D97706; --foil: linear-gradient(105deg,#FDE68A 0%,#FCD34D 18%,#F59E0B 38%,#67E8F9 60%,#A78BFA 82%,#FDE68A 100%); /* Neutral slate ramp */ --ink-900:#0F172A; --ink-800:#1E293B; --ink-700:#334155; --ink-600:#475569; --ink-500:#64748B; --ink-400:#94A3B8; --ink-300:#CBD5E1; --ink-200:#E2E8F0; --ink-100:#F1F5F9; --ink-50:#F8FAFC; /* Semantic surfaces */ --paper:#FFFFFF; --bg:#F4F6FB; --line:var(--ink-200); --text:var(--ink-900); --text-muted:var(--ink-500); /* Status */ --success:#059669; --success-bg:#ECFDF5; --success-ink:#065F46; --warning:#D97706; --warning-bg:#FFFBEB; --warning-ink:#92400E; --danger:#DC2626; --danger-bg:#FEF2F2; --danger-ink:#991B1B; --info:#0284C7; --info-bg:#EFF8FF; /* Typography */ --font-display:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif; --font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; --font-mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace; --fs-eyebrow:.6875rem; --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.3125rem; --fs-2xl:1.5rem; --fs-3xl:1.875rem; --fs-4xl:2.25rem; --fs-display:clamp(2.1rem,6.2vw,3.4rem); /* Spacing (4px base) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; /* Radius */ --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-full:999px; /* Shadows — soft, single light source */ --sh-xs:0 1px 2px rgba(15,23,42,.06); --sh-sm:0 2px 6px rgba(15,23,42,.07); --sh-md:0 6px 16px rgba(15,23,42,.09); --sh-lg:0 14px 34px rgba(15,23,42,.12); --sh-xl:0 28px 60px rgba(15,23,42,.16); /* Motion */ --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:140ms; --dur-2:220ms; --dur-3:400ms; /* Layout */ --app-max:520px; --content-max:1120px; --appbar-h:60px; --bottomnav-h:78px; /* Z-index */ --z-nav:100; --z-appbar:90; --z-fab:95; --z-overlay:1000; --z-modal:1100; --z-toast:1200; /* Role accent (default = siswa) */ --role:var(--brand-600); --role-dark:var(--brand-700); --role-50:var(--brand-50); --role-100:var(--brand-100); --role-200:var(--brand-200); --role-contrast:#FFFFFF; --role-shadow:0 10px 24px rgba(2,132,199,.30); --role-grad:linear-gradient(135deg,var(--brand-600),var(--brand-700)); } /* ---- Per-role accent themes ---- */ [data-role="siswa"]{ --role:#0284C7; --role-dark:#0369A1; --role-50:#F0F9FF; --role-100:#E0F2FE; --role-200:#BAE6FD; --role-shadow:0 10px 24px rgba(2,132,199,.30); --role-grad:linear-gradient(135deg,#0284C7,#0369A1); } [data-role="guru"]{ --role:#0D9488; --role-dark:#0F766E; --role-50:#F0FDFA; --role-100:#CCFBF1; --role-200:#99F6E4; --role-shadow:0 10px 24px rgba(13,148,136,.30); --role-grad:linear-gradient(135deg,#0D9488,#0F766E); } [data-role="ortu"]{ --role:#7C3AED; --role-dark:#6D28D9; --role-50:#F5F3FF; --role-100:#EDE9FE; --role-200:#DDD6FE; --role-shadow:0 10px 24px rgba(124,58,237,.30); --role-grad:linear-gradient(135deg,#7C3AED,#6D28D9); } [data-role="admin"]{ --role:#1E3A8A; --role-dark:#172554; --role-50:#EFF6FF; --role-100:#DBEAFE; --role-200:#BFDBFE; --role-shadow:0 10px 24px rgba(30,58,138,.30); --role-grad:linear-gradient(135deg,#1E3A8A,#172554); } /* ------------------------------------------------------------ 2. RESET & BASE ------------------------------------------------------------ */ *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ font-family:var(--font-body); font-size:var(--fs-base); line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent; } img,svg,video{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } button{ background:none; border:none; cursor:pointer; } ul,ol{ list-style:none; } :where(h1,h2,h3,h4,h5){ font-family:var(--font-display); font-weight:700; line-height:1.2; letter-spacing:-.01em; color:var(--ink-900); } /* Keyboard focus — visible everywhere */ :focus-visible{ outline:2.5px solid var(--role); outline-offset:2px; border-radius:4px; } ::selection{ background:var(--role-100); color:var(--role-dark); } /* ------------------------------------------------------------ 3. TYPOGRAPHY HELPERS ------------------------------------------------------------ */ .eyebrow{ font-family:var(--font-mono); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--role); } .display{ font-family:var(--font-display); font-size:var(--fs-display); font-weight:700; line-height:1.08; letter-spacing:-.025em; } .mono{ font-family:var(--font-mono); letter-spacing:.02em; } .muted{ color:var(--text-muted); } .text-role{ color:var(--role); } .lead{ font-size:var(--fs-lg); color:var(--ink-600); line-height:1.6; } /* ------------------------------------------------------------ 4. LAYOUT ------------------------------------------------------------ */ .container{ width:100%; max-width:var(--content-max); margin-inline:auto; padding-inline:var(--sp-6); } .container-app{ width:100%; max-width:var(--app-max); margin-inline:auto; padding-inline:var(--sp-4); } .section{ padding-block:var(--sp-20); } .stack{ display:flex; flex-direction:column; } .row{ display:flex; align-items:center; } .between{ justify-content:space-between; } .wrap{ flex-wrap:wrap; } .grid{ display:grid; gap:var(--sp-6); } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } /* ------------------------------------------------------------ 5. SECTION HEADINGS ------------------------------------------------------------ */ .section-head{ max-width:640px; margin-bottom:var(--sp-10); } .section-head.center{ margin-inline:auto; text-align:center; } .section-head .eyebrow{ display:inline-block; margin-bottom:var(--sp-3); } .section-head h2{ font-size:var(--fs-3xl); margin-bottom:var(--sp-3); } .section-head p{ color:var(--text-muted); font-size:var(--fs-md); } /* ------------------------------------------------------------ 6. BUTTONS ------------------------------------------------------------ */ .btn{ --_bg:var(--role); --_fg:var(--role-contrast); --_bd:transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); padding:13px 22px; border-radius:var(--r-md); font-family:var(--font-body); font-size:var(--fs-sm); font-weight:700; background:var(--_bg); color:var(--_fg); border:1.5px solid var(--_bd); cursor:pointer; white-space:nowrap; user-select:none; transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .btn:active{ transform:translateY(1px) scale(.99); } .btn:disabled{ opacity:.55; cursor:not-allowed; } .btn i{ font-size:1em; } .btn-primary{ --_bg:var(--role); --_fg:var(--role-contrast); box-shadow:var(--role-shadow); } .btn-primary:hover{ background:var(--role-dark); } .btn-dark{ --_bg:var(--ink-900); --_fg:#fff; box-shadow:var(--sh-md); } .btn-dark:hover{ --_bg:var(--ink-800); } .btn-gold{ --_bg:var(--gold-500); --_fg:#3d2c00; box-shadow:0 10px 24px rgba(245,158,11,.3); } .btn-gold:hover{ --_bg:var(--gold-600); } .btn-outline{ --_bg:transparent; --_fg:var(--ink-800); --_bd:var(--ink-200); } .btn-outline:hover{ --_bd:var(--role); --_fg:var(--role); background:var(--role-50); } .btn-ghost{ --_bg:var(--ink-100); --_fg:var(--ink-700); } .btn-ghost:hover{ --_bg:var(--ink-200); } .btn-soft{ --_bg:var(--role-100); --_fg:var(--role-dark); } .btn-soft:hover{ filter:brightness(.97); } .btn-danger{ --_bg:var(--danger); --_fg:#fff; box-shadow:0 10px 24px rgba(220,38,38,.25); } .btn-lg{ padding:16px 28px; font-size:var(--fs-base); border-radius:var(--r-lg); } .btn-sm{ padding:9px 15px; font-size:var(--fs-xs); border-radius:var(--r-sm); } .btn-icon{ padding:0; width:44px; height:44px; border-radius:var(--r-md); } .btn-block{ width:100%; } /* ------------------------------------------------------------ 7. CHIPS & BADGES ------------------------------------------------------------ */ .chip{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:5px 12px; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:700; line-height:1; background:var(--ink-100); color:var(--ink-600); } .chip i{ font-size:.9em; } .chip-role{ background:var(--role-100); color:var(--role-dark); } .chip-gold{ background:var(--gold-300); color:var(--gold-600); } .chip-success{ background:var(--success-bg); color:var(--success-ink); } .chip-warning{ background:var(--warning-bg); color:var(--warning-ink); } .chip-danger{ background:var(--danger-bg); color:var(--danger-ink); } .chip-outline{ background:transparent; border:1.5px solid var(--line); color:var(--ink-600); } .badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-full); font-family:var(--font-mono); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.04em; background:var(--role-100); color:var(--role-dark); } .badge-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; } .badge-live .badge-dot{ background:var(--success); animation:pulse-ring 2s infinite; } /* ------------------------------------------------------------ 8. CARDS ------------------------------------------------------------ */ .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-sm); } .card-pad-lg{ padding:var(--sp-8); } .card-hover{ transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .card-hover:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--role-200); } .card-role-top{ border-top:4px solid var(--role); } /* Icon tile used inside feature cards */ .tile-icon{ width:52px; height:52px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:1.35rem; background:var(--role-100); color:var(--role); } /* ------------------------------------------------------------ 9. ID CARD · the signature ------------------------------------------------------------ */ .id-card{ position:relative; overflow:hidden; background: linear-gradient(180deg,var(--paper),var(--ink-50)); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-xl); padding:0; isolation:isolate; } /* faint security guilloché watermark */ .id-card::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background-image: repeating-radial-gradient(circle at 115% -10%, rgba(2,132,199,.05) 0 1.5px, transparent 1.5px 16px), repeating-radial-gradient(circle at -15% 120%, rgba(15,23,42,.035) 0 1.5px, transparent 1.5px 15px); } .id-card__band{ position:relative; padding:var(--sp-5) var(--sp-6) var(--sp-4); background:var(--role-grad); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); } .id-card__school{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); letter-spacing:.02em; text-transform:uppercase; opacity:.95; } .id-card__role-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.18); padding:4px 10px; border-radius:var(--r-full); } /* the one aesthetic risk: gold security foil hairline */ .id-card__foil{ height:4px; background:var(--foil); background-size:220% 100%; animation:foil-shift 6s linear infinite; } .id-card__body{ display:flex; gap:var(--sp-5); padding:var(--sp-6); align-items:center; } .id-card__photo{ width:74px; height:88px; flex:none; border-radius:var(--r-sm); background:var(--ink-100); border:2px solid var(--paper); box-shadow:0 4px 12px rgba(15,23,42,.12); display:flex; align-items:center; justify-content:center; color:var(--ink-300); font-size:2rem; overflow:hidden; } .id-card__photo img{ width:100%; height:100%; object-fit:cover; } .id-card__name{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; color:var(--ink-900); line-height:1.15; } .id-card__nis{ font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-500); margin-top:4px; } .id-card__meta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); } .id-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-4) var(--sp-6) var(--sp-6); } /* QR frame */ .qr{ width:76px; height:76px; flex:none; padding:6px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line); box-shadow:var(--sh-xs); } .qr svg,.qr img{ width:100%; height:100%; } /* Star pill — StarTrack achievement, wears the foil edge */ .star-pill{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:8px 14px; border-radius:var(--r-full); font-family:var(--font-mono); font-weight:700; font-size:var(--fs-sm); color:var(--gold-600); background:#FffBEB; border:1.5px solid transparent; background-image:linear-gradient(#FffBEB,#FffBEB),var(--foil); background-origin:border-box; background-clip:padding-box,border-box; } .star-pill i{ color:var(--gold-500); } /* ------------------------------------------------------------ 10. FORM FIELDS ------------------------------------------------------------ */ .field{ margin-bottom:var(--sp-4); text-align:left; } .label{ display:block; font-size:var(--fs-sm); font-weight:600; color:var(--ink-700); margin-bottom:6px; } .label i{ color:var(--ink-400); margin-right:4px; } .input,.select,.textarea{ width:100%; padding:13px 15px; border:1.5px solid var(--ink-200); border-radius:var(--r-md); background:var(--ink-50); color:var(--ink-900); font-size:var(--fs-base); transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .input::placeholder,.textarea::placeholder{ color:var(--ink-400); } .input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--role); background:var(--paper); box-shadow:0 0 0 4px var(--role-100); } .textarea{ resize:vertical; min-height:96px; } .field-row{ display:flex; gap:var(--sp-3); } .field-row .field{ flex:1; } /* segmented tab switcher */ .seg{ display:flex; gap:6px; padding:5px; background:var(--ink-100); border-radius:var(--r-md); } .seg button{ flex:1; padding:11px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600; color:var(--ink-500); transition:all var(--dur-1) var(--ease); } .seg button.active{ background:var(--paper); color:var(--role); box-shadow:var(--sh-xs); } /* ------------------------------------------------------------ 11. STATS ------------------------------------------------------------ */ .stat-num{ font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700; color:var(--role); line-height:1.05; letter-spacing:-.02em; } .stat-label{ font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); margin-top:2px; } /* ------------------------------------------------------------ 12. LIST ITEM ------------------------------------------------------------ */ .list-item{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4); border-radius:var(--r-md); background:var(--paper); border:1px solid var(--line); transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .list-item + .list-item{ margin-top:var(--sp-2); } .list-item:hover{ border-color:var(--role-200); box-shadow:var(--sh-sm); } .list-item__lead{ width:44px; height:44px; flex:none; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:var(--role-100); color:var(--role); font-size:1.1rem; } .list-item__body{ flex:1; min-width:0; } .list-item__title{ font-weight:700; font-size:var(--fs-base); color:var(--ink-900); } .list-item__sub{ font-size:var(--fs-sm); color:var(--text-muted); } /* ------------------------------------------------------------ 13. AVATAR ------------------------------------------------------------ */ .avatar{ width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--role); background:var(--role-100); overflow:hidden; } .avatar img{ width:100%; height:100%; object-fit:cover; } .avatar-ring{ border:2.5px solid var(--paper); box-shadow:0 0 0 2px var(--role); } .avatar-lg{ width:64px; height:64px; font-size:1.4rem; } /* ------------------------------------------------------------ 14. APP BAR (phone shells — Phase 2 ready) ------------------------------------------------------------ */ .app-bar{ position:sticky; top:0; z-index:var(--z-appbar); display:flex; align-items:center; gap:var(--sp-3); height:var(--appbar-h); padding:0 var(--sp-4); padding-top:env(safe-area-inset-top,0); background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .app-bar__title{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--ink-900); } .app-bar__spacer{ flex:1; } /* ------------------------------------------------------------ 15. BOTTOM NAV (phone shells — Phase 2 ready) ------------------------------------------------------------ */ .bottom-nav{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:var(--z-nav); width:calc(100% - 32px); max-width:calc(var(--app-max) - 24px); display:flex; align-items:center; justify-content:space-around; padding:8px; margin-bottom:env(safe-area-inset-bottom,0); background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-lg); } .bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 12px; border-radius:var(--r-sm); font-size:var(--fs-eyebrow); font-weight:700; color:var(--ink-400); transition:color var(--dur-1) var(--ease); } .bottom-nav a i{ font-size:1.15rem; } .bottom-nav a.active{ color:var(--role); } .bottom-nav__fab{ width:56px; height:56px; margin-top:-26px; border-radius:50%; background:var(--role-grad); color:#fff; font-size:1.4rem; box-shadow:var(--role-shadow); border:4px solid var(--paper); } /* ------------------------------------------------------------ 16. OVERLAY · MODAL · SHEET ------------------------------------------------------------ */ .overlay{ position:fixed; inset:0; z-index:var(--z-overlay); display:none; align-items:center; justify-content:center; padding:var(--sp-5); background:rgba(15,23,42,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .overlay.show{ display:flex; animation:fade-in var(--dur-2) var(--ease); } .modal{ width:100%; max-width:440px; background:var(--paper); border-radius:var(--r-xl); box-shadow:var(--sh-xl); padding:var(--sp-7); animation:pop-in var(--dur-2) var(--ease-out); } .modal__icon{ width:60px; height:60px; border-radius:var(--r-lg); margin:0 auto var(--sp-4); display:flex; align-items:center; justify-content:center; font-size:1.6rem; background:var(--role-grad); color:#fff; } .modal__title{ font-size:var(--fs-xl); text-align:center; margin-bottom:6px; } .modal__sub{ text-align:center; color:var(--text-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-5); } /* bottom sheet variant */ .overlay.sheet-mode{ align-items:flex-end; padding:0; } .sheet{ width:100%; max-width:var(--app-max); margin-inline:auto; background:var(--paper); border-radius:var(--r-2xl) var(--r-2xl) 0 0; padding:var(--sp-6) var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom,0)); box-shadow:var(--sh-xl); animation:slide-up var(--dur-3) var(--ease-out); } .sheet__grip{ width:40px; height:4px; border-radius:var(--r-full); background:var(--ink-200); margin:0 auto var(--sp-5); } /* ------------------------------------------------------------ 17. TOAST ------------------------------------------------------------ */ .toast{ position:fixed; left:50%; bottom:calc(30px + env(safe-area-inset-bottom,0)); transform:translateX(-50%) translateY(12px); z-index:var(--z-toast); display:flex; align-items:center; gap:var(--sp-2); max-width:88vw; padding:12px 20px; border-radius:var(--r-full); background:var(--ink-900); color:#fff; font-size:var(--fs-sm); font-weight:600; box-shadow:var(--sh-lg); opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .toast.success{ background:var(--success); } .toast.error{ background:var(--danger); } /* ------------------------------------------------------------ 18. EMPTY STATE ------------------------------------------------------------ */ .empty{ text-align:center; padding:var(--sp-12) var(--sp-6); color:var(--text-muted); } .empty__icon{ width:72px; height:72px; margin:0 auto var(--sp-4); border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; font-size:1.8rem; background:var(--ink-100); color:var(--ink-400); } .empty h3{ font-size:var(--fs-lg); color:var(--ink-700); margin-bottom:6px; } .empty p{ font-size:var(--fs-sm); max-width:280px; margin:0 auto; } /* ------------------------------------------------------------ 19. KIPI — floating study assistant ------------------------------------------------------------ */ .kipi-fab{ position:fixed; right:16px; bottom:calc(var(--bottomnav-h) + 20px + env(safe-area-inset-bottom,0)); z-index:var(--z-fab); width:58px; height:58px; border-radius:50%; background:var(--role-grad); box-shadow:var(--role-shadow); display:flex; align-items:center; justify-content:center; border:3px solid var(--paper); overflow:hidden; } .kipi-fab img{ width:70%; height:70%; object-fit:contain; } .kipi-fab i{ color:#fff; font-size:1.5rem; } /* ------------------------------------------------------------ 20. SKELETON ------------------------------------------------------------ */ .skeleton{ background:linear-gradient(90deg,var(--ink-100) 25%,var(--ink-200) 37%,var(--ink-100) 63%); background-size:400% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r-sm); } /* ------------------------------------------------------------ 21. DIVIDER ------------------------------------------------------------ */ .divider{ height:1px; background:var(--line); border:none; margin-block:var(--sp-5); } .divider-text{ display:flex; align-items:center; gap:var(--sp-3); color:var(--ink-400); font-size:var(--fs-xs); font-weight:600; margin-block:var(--sp-4); } .divider-text::before,.divider-text::after{ content:""; flex:1; height:1px; background:var(--line); } /* ------------------------------------------------------------ 22. UTILITIES ------------------------------------------------------------ */ .hidden{ display:none !important; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .text-center{ text-align:center; } .gap-1{ gap:var(--sp-1);} .gap-2{ gap:var(--sp-2);} .gap-3{ gap:var(--sp-3);} .gap-4{ gap:var(--sp-4);} .gap-6{ gap:var(--sp-6);} .mt-2{ margin-top:var(--sp-2);} .mt-3{ margin-top:var(--sp-3);} .mt-4{ margin-top:var(--sp-4);} .mt-6{ margin-top:var(--sp-6);} .mb-2{ margin-bottom:var(--sp-2);} .mb-4{ margin-bottom:var(--sp-4);} .mb-6{ margin-bottom:var(--sp-6);} .flex-1{ flex:1; } .full{ width:100%; } /* ------------------------------------------------------------ 23. ANIMATIONS ------------------------------------------------------------ */ @keyframes fade-in{ from{opacity:0} to{opacity:1} } @keyframes pop-in{ from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} } @keyframes slide-up{ from{transform:translateY(100%)} to{transform:none} } @keyframes shimmer{ to{ background-position:-200% 0 } } @keyframes foil-shift{ to{ background-position:220% 0 } } @keyframes pulse-ring{ 0%{ box-shadow:0 0 0 0 rgba(5,150,105,.5)} 70%{ box-shadow:0 0 0 7px rgba(5,150,105,0)} 100%{ box-shadow:0 0 0 0 rgba(5,150,105,0)} } @keyframes float-y{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-9px)} } /* ------------------------------------------------------------ 24. REDUCED MOTION ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }