/* ============================================================ HelT Design System — Lavender theme (연보라) ------------------------------------------------------------ Loaded AFTER app.css / theme.css — this file is the single source of truth for tokens, component polish, and the responsive layout scopes. Layout scopes (set on via the base.html body_class block): - .scope-student : student/parent shared pages. Locked to the mobile width (480px) at every viewport. - .scope-teacher : teacher console. Mobile-first, widens to a tablet container (744px) at >=768px. Desktop stays capped at the tablet width by design. ============================================================ */ /* ---------- 1. Tokens (canonical values) ---------- */ :root { /* Brand — lavender scale */ --ds-primary: #7c5cf0; --ds-primary-hover: #6d4ee0; --ds-primary-active: #5f43cc; --ds-primary-soft: #efeaff; /* chips, soft fills */ --ds-primary-softer: #f7f4ff; /* hovers, subtle tints */ --ds-primary-100: #e5dcff; --ds-primary-300: #b9a5ff; /* Neutrals (lavender-tinted grays) */ --ds-bg: #f4f1fb; --ds-surface: #ffffff; --ds-text: #17142b; --ds-text-secondary: #3d3956; --ds-text-tertiary: #6f6a8a; --ds-border: #e9e4f7; /* Status */ --ds-success: #16a34a; --ds-success-soft: #e9f7ef; --ds-danger: #dc2626; --ds-danger-soft: #fef2f2; --ds-warning: #d97706; --ds-warning-soft: #fffbeb; /* Shape & elevation (violet-tinted shadows) */ --ds-radius: 18px; --ds-radius-small: 14px; --ds-shadow: 0 2px 10px rgba(92, 62, 190, 0.06); --ds-shadow-hover: 0 6px 18px rgba(92, 62, 190, 0.10); --ds-focus-ring: 0 0 0 3px rgba(124, 92, 240, 0.22); /* Layout */ --container-mobile: 480px; --container-tablet: 744px; /* Bridge legacy token names to the canonical set so app.css / theme.css consumers all resolve to one palette. */ --toss-blue: var(--ds-primary); --toss-blue-light: var(--ds-primary-soft); --toss-bg: var(--ds-bg); --toss-surface: var(--ds-surface); --toss-text: var(--ds-text); --toss-text-secondary: var(--ds-text-secondary); --toss-text-tertiary: var(--ds-text-tertiary); --toss-border: var(--ds-border); --toss-radius: var(--ds-radius); --toss-radius-small: var(--ds-radius-small); --toss-shadow: var(--ds-shadow); --toss-shadow-hover: var(--ds-shadow-hover); --ui-blue-hover: var(--ds-primary-hover); --ui-blue-active: var(--ds-primary-active); --ui-focus-ring: var(--ds-focus-ring); /* Bootstrap primary sync (spinners, text-primary, links) */ --bs-primary: #7c5cf0; --bs-primary-rgb: 124, 92, 240; --bs-link-color: #6d4ee0; --bs-link-hover-color: #5f43cc; } /* ---------- 2. Layout scopes / responsive ---------- */ /* Student pages: always the mobile app width. */ body.scope-student { --max-width: var(--container-mobile); } /* Teacher pages: mobile by default, tablet container from 768px. --max-width drives .app-container, .app-header-inner and .bottom-nav-inner together (they all read the same variable). */ body.scope-teacher { --max-width: var(--container-mobile); } @media (min-width: 768px) { body.scope-teacher { --max-width: var(--container-tablet); } /* Content lists breathe as two columns on tablet. */ body.scope-teacher .nav-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* Keep tap targets from ballooning: cards align to the top. */ body.scope-teacher .nav-card-list .nav-card-item { align-self: start; } } /* ---------- 3. App frame ---------- */ /* Page canvas: faint lavender outside the app column. */ body { background: var(--ds-bg); } .app-container { background: var(--ds-surface); } /* Header: frosted, hairline, stays visible while scrolling. */ .app-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ds-border); } /* Bottom nav: native-app tab bar. Every tab has an identical fixed-size pill slot, so nothing shifts when the active state moves — only the pill background animates in (Material 3 style indicator via ::before, icon glyph unaffected). */ .bottom-nav .nav-item, .student-footer .nav-item { gap: 3px; padding: 7px 0 6px; -webkit-tap-highlight-color: transparent; user-select: none; } .bottom-nav .nav-icon, .student-footer .nav-icon { position: relative; width: 58px; height: 30px; padding: 0; font-size: 22px; display: flex; align-items: center; justify-content: center; border-radius: 999px; transition: color 200ms ease; } .bottom-nav .nav-icon > i, .student-footer .nav-icon > i { position: relative; z-index: 1; } .bottom-nav .nav-icon::before, .student-footer .nav-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ds-primary-soft); opacity: 0; transform: scaleX(0.55); transition: opacity 160ms ease, transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1.25); } .bottom-nav .nav-item.active .nav-icon::before, .student-footer .nav-item.active .nav-icon::before { opacity: 1; transform: scaleX(1); } .bottom-nav .nav-item.active, .student-footer .nav-item.active, .bottom-nav .nav-item.active .nav-icon, .student-footer .nav-item.active .nav-icon, .bottom-nav .nav-item.active .nav-label, .student-footer .nav-item.active .nav-label { color: var(--ds-primary); } /* Label metrics never change between states — no layout jump. */ .bottom-nav .nav-label, .student-footer .nav-label { font-size: 11px; font-weight: 600; line-height: 1; } @media (prefers-reduced-motion: reduce) { .bottom-nav .nav-icon::before, .student-footer .nav-icon::before { transition: none; } } /* ---------- 4. Component polish (consistency layer) ---------- */ /* Buttons: uniform heights, focus ring, variants. */ .btn { border-radius: var(--ds-radius-small); } .btn:focus-visible, .nav-card-item:focus-visible, .hero-menu-card:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); } .btn-primary { background: var(--ds-primary); box-shadow: 0 8px 20px rgba(124, 92, 240, 0.28); color: #ffffff; } .btn-primary:hover { background: var(--ds-primary-hover); color: #ffffff; } .btn-primary:active { background: var(--ds-primary-active); box-shadow: 0 4px 12px rgba(124, 92, 240, 0.2); color: #ffffff; } .btn-ghost:hover { background: var(--ds-primary-softer); } .btn-danger { background: var(--ds-danger); color: #ffffff; } .btn-danger:hover { background: #b91c1c; color: #ffffff; } /* Cards: one radius/border/elevation language, lavender on hover. */ .toss-card, .ui-card, .nav-card-item, .hero-menu-card { border-radius: var(--ds-radius); } .toss-card:hover, .ui-card:hover { border-color: rgba(124, 92, 240, 0.22); box-shadow: var(--ds-shadow-hover); } .nav-card-item { border-color: rgba(124, 92, 240, 0.16); } .nav-card-item:hover { border-color: rgba(124, 92, 240, 0.32); box-shadow: var(--ds-shadow-hover); } /* Icon accents inside menu/list cards. */ .hero-menu-icon { color: var(--ds-primary); } /* Form controls: identical focus behaviour everywhere. */ .input:focus, .textarea:focus, select.input:focus { border-color: var(--ds-primary); box-shadow: var(--ds-focus-ring); } /* Badges & chips: shared pill shape, lavender fills. */ .score-badge, .slot-chip, .hero-chip { border-radius: 9999px; } .score-badge { background: var(--ds-primary-soft); color: var(--ds-primary-active); box-shadow: inset 0 0 0 1px rgba(124, 92, 240, 0.22); } .hero-chip { background: var(--ds-primary-soft); color: var(--ds-primary-active); } .hero-chip.role-chip { background: transparent; border-color: rgba(124, 92, 240, 0.35); color: var(--ds-text-secondary); } /* Progress bars follow the lavender gradient. */ .progress-fill { background: linear-gradient(120deg, #7c5cf0, #b9a5ff); box-shadow: 0 4px 14px rgba(124, 92, 240, 0.25); } /* Landing hero: unify the gradient into the lavender family. */ .landing-hero-surface { background: linear-gradient(120deg, #f1ecff, #ece5ff, #f5eeff, #e9e9ff, #f3efff); background-size: 350% 350%; border-color: rgba(124, 92, 240, 0.18); box-shadow: 0 6px 24px rgba(124, 92, 240, 0.16); } /* Empty states: consistent tone. */ .empty-state { color: var(--ds-text-tertiary); } /* ---------- 5. Student footer (was inline-styled) ---------- */ .student-footer { position: fixed; left: 0; right: 0; bottom: 0; background: var(--ds-surface); border-top: 1px solid var(--ds-border); z-index: 1000; padding-bottom: env(safe-area-inset-bottom); } .student-footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-around; padding: 8px 0; } .student-footer .nav-item { text-decoration: none; text-align: center; }