/* ============================================================================ Bombadil LMS — shared styles (v2: unified component system) Identity: calm academic. Forest/moss greens on warm parchment, a serif display face (Fraunces) paired with a clean grotesque (Inter) for UI. No school references anywhere — this is Bombadil. ============================================================================ */ :root { --moss: #4a6438; --moss-deep: #2f4226; --moss-soft: #e7efe2; --moss-tint: #f1f5ec; --gold: #c7a23b; --rust: #9a4a2f; --parchment: #ece4d0; --parchment-2: #e3dac3; --ink: #2a2620; --ink-soft: #6b6256; --line: #d6ccb2; --line-soft: #e6ddc9; --danger: #a8432f; --danger-soft: #f7e6e1; --ok: #3d6630; --warn: #a06912; --card: #fffefa; --radius: 14px; --radius-sm: 10px; --shadow-sm: 0 1px 2px rgba(47,66,38,.06); --shadow: 0 1px 2px rgba(47,66,38,.06), 0 6px 24px rgba(47,66,38,.08); --shadow-lg: 0 12px 40px rgba(47,66,38,.16); --ring: 0 0 0 3px rgba(74,100,56,.28); } /* ── Goldberry (lavender) theme ────────────────────────────────────────────── Applied when (set by portal.js from /api/brand). Re-skins the whole app by overriding the same design tokens Bombadil uses. */ :root[data-theme="lavender"] { --moss: #6d5bb0; --moss-deep: #443079; --moss-soft: #ece7f8; --moss-tint: #f6f3fc; --gold: #b98a3c; --rust: #8a5cab; --parchment: #ece8f6; --parchment-2: #e2dcf0; --ink: #2b2733; --ink-soft: #6c6480; --line: #d9d0ec; --line-soft: #e9e3f6; --danger: #a8432f; --danger-soft: #f7e6e1; --ok: #4a7a52; --warn: #a06912; --card: #fffdff; --shadow-sm: 0 1px 2px rgba(68,48,121,.06); --shadow: 0 1px 2px rgba(68,48,121,.06), 0 6px 24px rgba(68,48,121,.08); --shadow-lg: 0 12px 40px rgba(68,48,121,.16); --ring: 0 0 0 3px rgba(109,91,176,.30); } :root[data-theme="lavender"] body { background: radial-gradient(1100px 460px at 80% -8%, rgba(149,116,204,.10), transparent 60%), linear-gradient(180deg, #efeaf9 0%, var(--parchment) 240px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); background: radial-gradient(1100px 460px at 80% -8%, rgba(199,162,59,.07), transparent 60%), linear-gradient(180deg, #f0e9d8 0%, var(--parchment) 240px); background-attachment: fixed; min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ---- Type scale ---- */ h1, h2, h3, h4, .display { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.012em; color: var(--moss-deep); line-height: 1.18; } h1 { font-size: clamp(1.6rem, 1.28rem + 1.2vw, 2.05rem); margin: 0 0 .35em; } h2 { font-size: 1.34rem; margin: 0 0 .45em; } h3 { font-size: 1.08rem; margin: 0 0 .4em; } h4 { font-size: .95rem; margin: 0 0 .4em; } .eyebrow { font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } p { margin: 0 0 1em; } a { color: var(--moss); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Buttons ---- */ .btn { font: inherit; font-weight: 600; line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 18px; background: var(--moss); color: #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: background .15s, transform .06s, box-shadow .15s, border-color .15s; white-space: nowrap; text-decoration: none; } .btn:hover { background: var(--moss-deep); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(47,66,38,.18); text-decoration: none; } .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn.secondary { background: var(--moss-soft); color: var(--moss-deep); box-shadow: none; } .btn.secondary:hover { background: #d8e6d0; } .btn.ghost { background: transparent; color: var(--moss); box-shadow: none; border-color: transparent; } .btn.ghost:hover { background: var(--moss-soft); } .btn.outline { background: #fff; color: var(--moss-deep); border-color: var(--line); box-shadow: none; } .btn.outline:hover { background: var(--moss-tint); border-color: var(--moss); } .btn.danger { background: var(--danger); } .btn.danger:hover { background: #8a3526; } .btn.small { padding: 7px 13px; font-size: .85rem; border-radius: 8px; gap: 5px; } .btn.block { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* ---- Inputs ---- */ input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%; transition: border-color .15s, box-shadow .15s; } input::placeholder, textarea::placeholder { color: #a79e8c; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--moss); box-shadow: var(--ring); } label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 6px; } .field { margin-bottom: 14px; } .field:last-child { margin-bottom: 0; } .field label { margin-bottom: 5px; } .hint { font-size: .8rem; color: var(--ink-soft); margin-top: 5px; } /* ---- Cards ---- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } .card.pad-sm { padding: 16px; } .card.hover { transition: transform .12s, box-shadow .12s, border-color .12s; } .card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--moss-soft); } /* ---- Section header ---- */ .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; } .section-head .sub { color: var(--ink-soft); font-size: .9rem; margin: 2px 0 0; } .section-head h1, .section-head h2 { margin: 0; } /* ---- Tabs (shared — was previously per-page only) ---- */ .tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 18px 0 18px; border-bottom: 2px solid var(--line); } .tab { background: none; border: none; font: inherit; font-weight: 600; color: var(--ink-soft); padding: 10px 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; transition: color .12s, background .12s, border-color .12s; } .tab:hover { color: var(--moss-deep); background: var(--moss-tint); } .tab.active { color: var(--moss-deep); border-bottom-color: var(--moss); } .tab:focus-visible { outline: none; box-shadow: var(--ring); } /* ---- Persistent sidebar rail (Concept B) ---- */ #appRail { position: fixed; left: 0; top: 58px; bottom: 0; width: 214px; overflow-y: auto; background: var(--card); border-right: 1px solid var(--line); padding: 16px 12px; z-index: 40; } body.has-rail .wrap, body.has-rail > #app { margin-left: 214px; } .sidenav .grp { margin-bottom: 14px; } .sidenav .grp-h { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); font-weight: 700; margin: 0 0 3px; padding: 0 10px; } .sidenav a, .sidenav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink-soft); padding: 8px 10px; border-radius: 9px; cursor: pointer; text-decoration: none; border-left: 3px solid transparent; transition: background .12s, color .12s; } .sidenav a:hover, .sidenav button:hover { background: var(--parchment-2); color: var(--moss-deep); } .sidenav .on { background: var(--moss-soft); color: var(--moss-deep); border-left-color: var(--moss); } .sidenav a:focus-visible, .sidenav button:focus-visible { outline: none; box-shadow: var(--ring); } .sidenav .ic { width: 20px; text-align: center; font-size: 1.02rem; flex: 0 0 20px; } /* The Messenger gets a distinct, prominent treatment at the top of the rail */ .sidenav .rail-msgr { background: var(--moss); color: #fff; font-weight: 600; margin-bottom: 14px; border-left-color: transparent; } .sidenav .rail-msgr:hover { background: var(--moss-deep); color: #fff; } .sidenav .rail-msgr.on { background: var(--moss-deep); color: #fff; border-left-color: var(--gold); } .sidenav .rail-msgr .ic { color: #fff; } .rail-badge { margin-left: auto; background: var(--gold); color: #fff; border-radius: 999px; font-size: .66rem; font-weight: 700; padding: 1px 7px; min-width: 18px; text-align: center; } .rail-badge:empty { display: none; } .railmobile .rail-msgr-m { background: var(--moss); color: #fff; border-radius: 999px; } /* mobile: rail collapses to a sticky horizontal bar under the topbar */ .railmobile { display: none; } @media (max-width: 740px) { #appRail { display: none; } body.has-rail .wrap, body.has-rail > #app { margin-left: 0; } .railmobile { display: flex; gap: 2px; position: sticky; top: 52px; z-index: 39; background: var(--card); border-bottom: 2px solid var(--line); margin: 0 0 12px; padding: 4px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .railmobile::-webkit-scrollbar { display: none; } .railmobile a { white-space: nowrap; flex: 0 0 auto; } } /* pill-style sub-tabs */ .subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .subtab { font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); transition: all .12s; } .subtab:hover { border-color: var(--moss); color: var(--moss-deep); } .subtab.active { background: var(--moss); border-color: var(--moss); color: #fff; } /* ---- Tables ---- */ .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); } table { border-collapse: collapse; } .table { width: 100%; border-collapse: collapse; font-size: .92rem; } th { text-align: left; font-weight: 700; } .table thead th, table.table th { background: var(--moss-tint); color: var(--moss-deep); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } .table td, table.table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr { transition: background .1s; } .table tbody tr:hover { background: var(--moss-tint); } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .linkish { color: var(--moss); cursor: pointer; font-weight: 600; } .linkish:hover { text-decoration: underline; } /* ---- Chips / badges / pills ---- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--moss-soft); color: var(--moss-deep); } .pill { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; } .pill.green { background: var(--moss-soft); color: var(--moss-deep); } .pill.gold { background: #fbf2d8; color: #8a6a13; } .pill.rust { background: var(--danger-soft); color: var(--danger); } .pill.grey { background: var(--parchment-2); color: var(--ink-soft); } .badge-A { background:#e7efe2; color:#2f4226; } .badge-B { background:#eef3e9; color:#3d6630; } .badge-C { background:#fdf6e6; color:#a06912; } .badge-D { background:#f7ece1; color:#a0571f; } .badge-F { background:#f7e6e1; color:#a8432f; } /* ---- Avatar (initials) ---- */ .avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--moss-soft); color: var(--moss-deep); font-weight: 700; font-size: .82rem; letter-spacing: .01em; } .avatar.sm { width: 30px; height: 30px; font-size: .72rem; } .avatar.lg { width: 46px; height: 46px; font-size: .95rem; } .avatar.rust { background: #f1ddd4; color: var(--rust); } .avatar.gold { background: #fbf2d8; color: #8a6a13; } /* ---- Empty states ---- */ .empty { margin: auto; color: var(--ink-soft); text-align: center; padding: 30px; } .empty-state { display: grid; place-items: center; gap: 10px; text-align: center; padding: 44px 24px; color: var(--ink-soft); } .empty-state .ico { width: 46px; height: 46px; color: var(--moss); opacity: .7; } .empty-state h3 { color: var(--moss-deep); margin: 0; } .empty-state p { margin: 0; max-width: 30ch; } /* ---- Stats ---- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .stat .n { font-family: 'Fraunces', serif; font-size: 1.8rem; color: var(--moss-deep); line-height: 1; } .stat .l { font-size: .78rem; color: var(--ink-soft); margin-top: 6px; } /* ---- Layout primitives ---- */ .wrap { max-width: 1100px; margin: 0 auto; padding: 24px; } .muted { color: var(--ink-soft); } .row { display: flex; gap: 12px; align-items: center; } .row.wrap-row { flex-wrap: wrap; } .spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .divider { height: 1px; background: var(--line); border: none; margin: 18px 0; } .stack > * + * { margin-top: 14px; } /* ---- Modal (shared, robust — overlay scrolls so nothing is ever cut off) ---- */ .modal-bg { position: fixed; inset: 0; z-index: 1000; background: rgba(42,38,32,.5); backdrop-filter: blur(2px); display: none; padding: 24px; overflow-y: auto; overscroll-behavior: contain; } .modal-bg.show { display: flex; } .modal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(620px, 100%); margin: auto; /* centers when it fits, scrolls the overlay when it doesn't */ padding: 26px; animation: modal-in .18s ease; } @keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .modal.wide { width: min(880px, 100%); } .modal h2 { margin-top: 0; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; } /* ---- Top bar (portal shell) ---- */ .topbar { background: rgba(236,228,208,.92); color: var(--ink); padding: calc(16px + env(safe-area-inset-top)) 30px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(6px); } .topbar .brand { display: flex; align-items: center; gap: 12px; } .topbar .brand-home { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; transition: opacity .12s ease; } .topbar .brand-home:hover { opacity: .72; } .topbar .brand-home:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; } .topbar .leaf-logo { width: 26px; height: 31px; color: var(--moss); flex: 0 0 26px; } .topbar .wordmark { font-family: 'Fraunces', serif; font-size: 1.22rem; font-weight: 600; color: var(--moss-deep); letter-spacing: .22em; } .topbar .role-label { font-family: Inter, sans-serif; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; border-left: 1px solid var(--line); padding-left: 12px; margin-left: 2px; } .topbar .row { display: flex; align-items: center; gap: 14px; } .topbar .who { font-size: .85rem; color: var(--ink-soft); } .topbar .btn.ghost { color: var(--moss); } .topbar .btn.ghost:hover { background: var(--moss-soft); } @media (max-width: 560px){ .topbar { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; } .topbar .wordmark { letter-spacing:.14em; font-size:1.05rem; } .topbar .role-label{ display:none; } } /* ---- Stage 11: view-as banner ---- */ .viewas-banner{ position:sticky; top:0; z-index:1200; display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--rust); color:#fff; padding:9px 18px; font-size:.9rem; box-shadow:0 2px 8px rgba(0,0,0,.15); } .viewas-banner .vr{ opacity:.85; text-transform:uppercase; font-size:.74rem; letter-spacing:.08em; } .viewas-banner .btn{ background:#fff; color:var(--rust); } .viewas-banner .btn:hover{ background:#f3ece0; } /* ---- Toast ---- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--moss-deep); color: #fff; padding: 12px 20px; border-radius: 10px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.error { background: var(--danger); } /* ---- Scrollbars ---- */ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: #c5b994; background-clip: padding-box; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* AP exam results panel (counselor + admin) */ .ap-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:8px; } .ap-year-h { font-family:'Fraunces',serif; font-weight:600; color:var(--moss-deep); font-size:.95rem; margin-bottom:2px; } .ap-tbl td, .ap-edit td, .ap-edit th { padding:4px 6px; font-size:.86rem; } .ap-score { display:inline-block; min-width:22px; text-align:center; font-weight:700; border-radius:6px; padding:1px 6px; background:var(--parchment-2); } .ap-score.good { background:var(--moss); color:#fff; } .ap-score.ip { background:var(--parchment-2); color:var(--rust); font-weight:600; } .ap-edit input, .ap-edit select { padding:4px 6px; } /* Senior college-application profile (counselor) */ .cp-yes { background:var(--moss); color:#fff; border-radius:6px; padding:1px 8px; font-size:.76rem; font-weight:600; } .cp-no { background:var(--parchment-2); color:var(--ink-soft); border-radius:6px; padding:1px 8px; font-size:.76rem; } .cp-row { display:grid; grid-template-columns:200px 1fr; gap:12px; padding:5px 0; border-bottom:1px solid var(--line); } .cp-row:last-child { border-bottom:none; } .cp-l { color:var(--ink-soft); font-size:.84rem; } .cp-v { white-space:pre-wrap; line-height:1.5; } .cp-act { padding:8px 0; border-bottom:1px solid var(--line); } .cp-act:last-child { border-bottom:none; } .cp-act-h { font-weight:600; color:var(--moss-deep); } .cp-essay { padding:8px 0; border-bottom:1px solid var(--line); } .cp-essay:last-child { border-bottom:none; } .cp-essay-q { font-family:'Fraunces',serif; color:var(--moss-deep); font-size:.95rem; margin-bottom:3px; } .cp-rates { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; } .cp-rate { background:var(--parchment-2); border-radius:8px; padding:3px 10px; font-size:.84rem; } .cp-f { margin-bottom:10px; } .cp-f label { display:block; font-size:.8rem; color:var(--ink-soft); margin-bottom:3px; } .cp-f input, .cp-f textarea, .cp-f select { width:100%; padding:6px 8px; } .cp-2col, .cp-rate-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .cp-rate-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; } @media (max-width:720px){ .cp-2col, .cp-rate-grid { grid-template-columns:1fr; } .cp-row { grid-template-columns:1fr; gap:2px; } } .cp-item { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:var(--parchment); } .cp-item-h { display:flex; justify-content:space-between; align-items:center; font-weight:600; color:var(--moss-deep); margin-bottom:6px; } table.cp-list { width:100%; border-collapse:collapse; } table.cp-list td { padding:3px 4px; } table.cp-list input { padding:5px 7px; } /* College-list fit (senior profile) */ .cp-tier { display:inline-block; color:#fff; border-radius:5px; padding:1px 7px; font-size:.7rem; font-weight:700; letter-spacing:.02em; } .cp-fit-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 4px; } .cp-strength { font-family:'Fraunces',serif; color:var(--moss-deep); font-weight:600; } .cp-balance { display:flex; gap:6px; } .cp-grp { border-radius:6px; padding:2px 9px; font-size:.78rem; font-weight:600; } .cp-grp.reach { background:#f1ddd4; color:#9a4a2f; } .cp-grp.target { background:#e2ecd9; color:#3f6d2f; } .cp-grp.safety { background:#d8efe0; color:#2f7d4f; } .cp-grp.none { background:var(--parchment-2); color:var(--ink-soft); } .cp-warn { margin:6px 0; font-size:.84rem; } .cp-warn div { color:var(--rust); padding:2px 0; } .cp-warn div.ok { color:var(--moss-deep); } /* Admit-rate tuning (admin) */ .ad-in { width:74px; padding:4px 6px; border:1px solid var(--line,#d9d2c5); border-radius:6px; font:inherit; } .ad-in:focus { outline:2px solid var(--moss,#5c7a4a); outline-offset:0; } .ad-badge { display:inline-block; background:var(--moss-deep,#3f5a32); color:#fff; border-radius:5px; padding:1px 7px; font-size:.66rem; font-weight:700; letter-spacing:.03em; vertical-align:middle; } /* Security console (admin) */ .sec-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px; } .sec-card { background:var(--card,#fff); border:1px solid var(--line,#e5ded1); border-radius:12px; padding:14px 16px; } .sec-n { font-family:'Fraunces',serif; font-size:1.8rem; color:var(--moss-deep,#3f5a32); line-height:1; } .sec-l { font-size:.78rem; color:var(--ink-soft,#7a7261); margin-top:6px; } .sec-ev { display:inline-block; color:#fff; border-radius:5px; padding:1px 8px; font-size:.7rem; font-weight:700; white-space:nowrap; } /* ============================================================================ v3 streamline layer — skeletons, quick-link pills, folds, swipeable tabs ============================================================================ */ .skel{position:relative;overflow:hidden;background:var(--parchment-2);border-radius:8px;min-height:13px} .skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:skel 1.1s infinite} @keyframes skel{100%{transform:translateX(100%)}} /* compact quick-link pills (shared across portals) */ .quicklinks{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px} .qcard{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-soft);border:1px solid var(--line);background:var(--card);border-radius:10px;padding:7px 11px;font-size:.84rem;font-weight:600;transition:border-color .12s,color .12s,transform .06s} .qcard:hover{border-color:var(--moss);color:var(--moss-deep);text-decoration:none;transform:translateY(-1px)} /* collapsible secondary content */ details.fold{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:10px} details.fold>summary{cursor:pointer;font-weight:600;color:var(--moss);font-size:.88rem;list-style:none;display:inline-flex;align-items:center;gap:6px} details.fold>summary::-webkit-details-marker{display:none} details.fold>summary::after{content:'▾';font-size:.7rem;transition:transform .15s} details.fold[open]>summary::after{transform:rotate(180deg)} /* tabs become a single swipeable row on small screens; tighter page padding */ @media (max-width:720px){ .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .tab{white-space:nowrap;flex:0 0 auto} .wrap{padding:16px 14px} } /* ============================================================================ v4 layer — Term Journey, Teacher Cockpit, Registration, mobile/tablet ============================================================================ */ /* ---- Term Journey ribbon (student Classroom week selector) ---- */ .journey{position:relative;margin:6px 0 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--card),var(--parchment-2));overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .journey svg{display:block} .jy-path{fill:none;stroke:var(--line);stroke-width:2.5;stroke-dasharray:1 6;stroke-linecap:round} .jy-path-done{fill:none;stroke:var(--moss);stroke-width:3;stroke-linecap:round;opacity:.55} .jy-node{cursor:pointer} .jy-node circle.c{fill:var(--card);stroke:var(--line);stroke-width:2} .jy-node.has circle.c{stroke:var(--moss)} .jy-node.past circle.c{fill:var(--moss);stroke:var(--moss)} .jy-node.cur circle.c{fill:var(--gold);stroke:var(--gold)} .jy-node.sel circle.ring{fill:none;stroke:var(--moss-deep);stroke-width:2;opacity:.9} .jy-node text{font:600 10px Inter,system-ui,sans-serif;fill:var(--ink-soft);text-anchor:middle} .jy-node.cur text,.jy-node.sel text{fill:var(--moss-deep)} .jy-node circle.pulse{fill:none;stroke:var(--gold);stroke-width:2;opacity:0;transform-origin:center;animation:jypulse 2.2s ease-out infinite} @keyframes jypulse{0%{opacity:.8;r:9}70%{opacity:0;r:17}100%{opacity:0;r:17}} .jy-flag text{font:700 9.5px Inter,sans-serif;fill:var(--rust);text-anchor:middle} .jy-legend{display:flex;gap:14px;align-items:center;font-size:.74rem;color:var(--ink-soft);padding:0 12px 8px} .jy-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle} /* ---- Today / Up-next card ---- */ .today{border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;background:var(--card);padding:12px 15px;margin:4px 0 12px} .today .th{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap} .today .tt{font-family:Fraunces,serif;font-weight:600;color:var(--moss-deep)} .today .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .tchip{font-size:.78rem;border:1px solid var(--line);background:var(--parchment-2);border-radius:999px;padding:4px 11px} .tchip b{color:var(--moss-deep)} .tchip.due{border-color:var(--rust);color:var(--rust);font-weight:600} /* ---- Teacher Cockpit ---- */ .cockpit{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:12px;margin-top:10px} .ckcard{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 15px;display:flex;flex-direction:column;gap:9px;transition:transform .08s,border-color .12s} .ckcard:hover{transform:translateY(-2px);border-color:var(--moss)} .ck-name{font-family:Fraunces,serif;font-weight:600;color:var(--moss-deep);font-size:1.03rem;line-height:1.25} .ck-meta{display:flex;gap:6px;flex-wrap:wrap} .mchip{font-size:.72rem;font-weight:600;color:var(--ink-soft);background:var(--parchment-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px} .ck-foot{display:flex;gap:8px;align-items:center;margin-top:auto;flex-wrap:wrap} .alertchip{font-size:.74rem;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--rust);color:#fff} .alertchip.zero{background:var(--parchment-2);color:var(--ink-soft);font-weight:600;border:1px solid var(--line)} .gradestrip{border:1px solid var(--rust);border-radius:12px;background:#fdf3ee;padding:11px 14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px} .gradestrip b{color:var(--rust)} /* ---- Registration & invoice ---- */ .deptblock{margin:12px 0} .depth{font-family:Fraunces,serif;font-weight:600;color:var(--moss-deep);margin:0 0 6px;font-size:.96rem} .cpick{display:flex;gap:7px;flex-wrap:wrap} .cchip{font-size:.82rem;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 13px;cursor:pointer;user-select:none;transition:all .1s} .cchip.on{background:var(--moss);border-color:var(--moss);color:#fff;font-weight:600} .cchip .hh{font-size:.66rem;opacity:.75;margin-left:4px} .regstatus{border-radius:10px;padding:9px 13px;font-size:.86rem;font-weight:600;display:inline-flex;gap:8px;align-items:center;margin-bottom:10px} .regstatus.pending{background:#fbf3df;color:#8a6410;border:1px solid #e3c878} .regstatus.approved{background:var(--moss-soft);color:var(--moss-deep);border:1px solid var(--moss)} .regstatus.declined{background:#fdeeee;color:var(--danger);border:1px solid var(--danger)} table.inv{width:100%;border-collapse:collapse;font-size:.86rem} table.inv th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);padding:7px 9px;border-bottom:2px solid var(--line)} table.inv td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top} table.inv td.r{text-align:right;white-space:nowrap} .bkt{font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap} .bkt.school{background:var(--moss-soft);color:var(--moss-deep)} .bkt.parent{background:#fbf3df;color:#8a6410} .bkt.na{background:var(--parchment-2);color:var(--ink-soft)} .bkt.tba{background:#eee9fa;color:#5b4a96} .invtotal{display:flex;justify-content:flex-end;align-items:baseline;gap:12px;margin-top:10px;font-family:Fraunces,serif} .invtotal .amt{font-size:1.5rem;font-weight:700;color:var(--moss-deep)} /* ---- Bottom navigation (phones; pages opt in with body.bn-on) ---- */ .bottomnav{display:none} @media (max-width:740px){ body.bn-on{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))} body.bn-on .tabs{display:none} .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(47,66,38,.08);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))} .bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;font:inherit;color:var(--ink-soft);text-decoration:none;font-size:.66rem;font-weight:600;padding:4px 2px;cursor:pointer;min-height:48px;justify-content:center} .bn .ic{font-size:1.25rem;line-height:1} .bn.active{color:var(--moss-deep)} .bn.active .ic{transform:translateY(-1px)} } .bnsheet{position:fixed;inset:0;z-index:95;display:none} .bnsheet.show{display:block} .bnsheet .bg{position:absolute;inset:0;background:rgba(35,30,22,.4)} .bnsheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:16px 16px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.25)} .bnsheet .panel a{display:flex;gap:12px;align-items:center;padding:13px 10px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600} .bnsheet .panel a:active{background:var(--parchment-2)} /* ---- tablet & touch refinements ---- */ @media (max-width:980px){ .cockpit{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .agrid{grid-template-columns:1fr 1fr} } @media (max-width:740px){ .wrap{padding:14px 12px} h1{font-size:1.45rem} .quicklinks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px} .quicklinks::-webkit-scrollbar{display:none} .qcard{flex:0 0 auto} .card{padding:14px} .agrid{grid-template-columns:1fr} table.sched th,table.sched td{padding:8px 6px;font-size:.84rem} .gtop{flex-wrap:wrap} .modal{width:min(560px,94vw);max-height:86vh;overflow:auto} } @media (pointer:coarse){ .btn,.tab,.wk,.cchip,.bn{min-height:42px} .tab{padding:10px 14px} input,select,textarea{font-size:16px} /* prevents iOS zoom-on-focus */ } /* ===== Bombadil Buddy — compact, beside the role label in the top bar ===== */ .bb-slot{ display:inline-flex; align-items:center; margin-left:6px; } #bbBuddy{ display:inline-flex; align-items:center; vertical-align:middle; pointer-events:none; } #bbBuddy .bb-fig{ pointer-events:auto; width:30px; height:40px; background:none; border:0; padding:0; cursor:pointer; filter:drop-shadow(0 2px 4px rgba(30,40,30,.22)); animation:bb-sway 3.4s ease-in-out infinite; } #bbBuddy .bb-fig svg{ width:100%; height:100%; overflow:visible; } #bbBuddy .bb-head{ transform-origin:60px 56px; animation:bb-nod 3.4s ease-in-out infinite; } #bbBuddy .bb-arm-r{ transform-origin:80px 82px; animation:bb-wave 2.6s ease-in-out infinite; } #bbBuddy .bb-arm-l{ transform-origin:40px 82px; animation:bb-wave2 3.1s ease-in-out infinite; } #bbBuddy .bb-leg-l{ transform-origin:48px 112px; animation:bb-kick 1.7s ease-in-out infinite; } #bbBuddy .bb-leg-r{ transform-origin:70px 112px; animation:bb-kick 1.7s ease-in-out infinite reverse; } #bbBuddy .bb-feather{ transform-origin:80px 24px; animation:bb-feather 3.4s ease-in-out infinite; } @keyframes bb-sway{ 0%,100%{ transform:translateY(0) rotate(-2.5deg);} 50%{ transform:translateY(-7px) rotate(2.5deg);} } @keyframes bb-nod{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(3deg);} } @keyframes bb-wave{ 0%,100%{ transform:rotate(0);} 50%{ transform:rotate(-16deg);} } @keyframes bb-wave2{ 0%,100%{ transform:rotate(0);} 50%{ transform:rotate(10deg);} } @keyframes bb-kick{ 0%,100%{ transform:rotate(-7deg);} 50%{ transform:rotate(9deg);} } @keyframes bb-feather{ 0%,100%{ transform:rotate(-4deg);} 50%{ transform:rotate(7deg);} } .bb-jig{ animation:bb-sway .55s ease-in-out 3 !important; } #bbBuddy .bb-bubble{ pointer-events:auto; position:fixed; top:60px; left:228px; z-index:60; max-width:min(360px, calc(100vw - 250px)); background:var(--card); border:1.5px solid var(--moss); border-radius:4px 14px 14px 14px; box-shadow:0 6px 18px rgba(30,40,30,.18); padding:9px 12px; font-size:.82rem; line-height:1.45; color:var(--ink); opacity:0; transform:translateY(-6px) scale(.96); transition:opacity .25s, transform .25s; font-style:italic; } #bbBuddy .bb-bubble.show{ opacity:1; transform:none; } @media (max-width:740px), print{ #bbBuddy, .bb-slot{ display:none; } } /* ===== landing: registrar entry ===== */ .regentry{ margin-top:16px; display:flex; align-items:center; gap:12px; justify-content:space-between; padding:13px 16px; border-left:4px solid var(--gold); } .regentry-t{ font-weight:700; color:var(--moss-deep); } .regentry-s{ font-size:.8rem; color:var(--ink-soft); margin-top:2px; } /* ===== faculty lounge chatbar (teacher) ===== */ #flBar{ position:fixed; top:0; right:0; bottom:0; width:300px; max-width:86vw; background:var(--card); border-left:1.5px solid var(--line); box-shadow:-8px 0 24px rgba(30,40,30,.12); z-index:55; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s ease; } #flBar.open{ transform:none; } #flBar .fl-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1.5px solid var(--line); background:var(--moss-soft); } #flBar .fl-head b{ color:var(--moss-deep); } #flBar .fl-msgs{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:9px; } .fl-m{ font-size:.85rem; line-height:1.45; } .fl-m .who{ font-weight:700; color:var(--moss-deep); font-size:.78rem; } .fl-m .when{ color:var(--ink-soft); font-size:.7rem; margin-left:6px; } .fl-m.me .who{ color:var(--gold-deep, #8a6410); } #flBar .fl-input{ display:flex; gap:8px; padding:10px 12px; border-top:1.5px solid var(--line); } #flBar .fl-input input{ flex:1; padding:9px 11px; font:inherit; border:1.5px solid var(--line); border-radius:10px; } #flTab{ position:fixed; right:0; top:38%; z-index:54; background:var(--moss-deep); color:#fff; border:0; border-radius:10px 0 0 10px; padding:12px 9px; cursor:pointer; writing-mode:vertical-rl; letter-spacing:.12em; font-size:.72rem; font-weight:700; box-shadow:-3px 3px 12px rgba(30,40,30,.25); } #flTab .dot{ position:absolute; top:6px; left:6px; width:9px; height:9px; border-radius:50%; background:var(--rust); display:none; } #flTab.unread .dot{ display:block; } @media (max-width:980px){ #flBar, #flTab{ display:none; } } /* ===== calendar v2: airy month grid ===== */ .cal-head{ display:flex; align-items:center; gap:10px; margin:2px 0 14px; } .cal-title{ font-family:Fraunces,serif; color:var(--moss-deep); margin:0; font-size:1.5rem; min-width:200px; } .cal-nav{ border:1.5px solid var(--line); background:var(--card); border-radius:10px; padding:7px 13px; cursor:pointer; font:inherit; font-weight:600; color:var(--moss-deep); transition:background .15s; } .cal-nav:hover{ background:var(--moss-soft); } .cal-add{ border:0; background:var(--moss); color:#fff; border-radius:10px; padding:8px 14px; cursor:pointer; font:inherit; font-weight:600; } .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .cal-dow{ text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--moss-deep); padding:4px 0 6px; text-transform:uppercase; } .cal-dow.wknd{ color:var(--ink-soft); } .cal-cell{ position:relative; min-height:86px; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:26px 6px 6px; transition:box-shadow .15s, transform .15s; } .cal-cell:not(.empty):hover{ box-shadow:0 4px 14px rgba(30,40,30,.12); transform:translateY(-1px); } .cal-cell.empty{ background:transparent; border-color:transparent; } .cal-cell.wkndc{ background:var(--parchment-2); } .cal-cell.today{ border-color:var(--gold); box-shadow:0 0 0 2.5px var(--gold) inset; } .cal-cell.today .cal-dnum{ background:var(--gold); color:#fff; } .cal-dnum{ position:absolute; top:6px; left:6px; font-size:.74rem; font-weight:700; color:var(--moss-deep); width:21px; height:21px; border-radius:50%; display:grid; place-items:center; } .cal-pill{ display:block; font-size:.66rem; color:#fff; border-radius:7px; padding:2.5px 7px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.14); } .cal-pill[data-edit]{ cursor:pointer; } .cal-more{ display:block; font-size:.64rem; color:var(--ink-soft); margin-top:3px; font-weight:700; } .cal-up-h{ font-family:Fraunces,serif; color:var(--moss-deep); margin:20px 0 8px; } .cal-up{ list-style:none; margin:0; padding:0; } .cal-up li{ display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px dashed var(--line); font-size:.88rem; } .cal-up li i{ width:11px; height:11px; border-radius:4px; flex:none; } .cal-up-d{ font-weight:700; color:var(--moss-deep); min-width:86px; } .cal-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:.76rem; color:var(--ink-soft); } .cal-legend i{ width:11px; height:11px; border-radius:4px; display:inline-block; margin-right:5px; vertical-align:-1px; } /* ===== multimodal submission picker ===== */ .subpick{ display:flex; gap:6px; flex-wrap:wrap; } .subpick .btn.small{ padding:5px 9px; font-size:.78rem; } .subx{ width:100%; margin-top:8px; background:var(--parchment-2); border:1.5px solid var(--line); border-radius:10px; padding:10px; } .subx textarea, .subx input[type=url], .subx select{ font:inherit; font-size:.88rem; border:1.5px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; } /* ===== parent attendance grid ===== */ .attgrid{ display:flex; gap:4px; } .attw{ display:flex; flex-direction:column; gap:4px; } .attw i{ width:14px; height:14px; border-radius:4px; display:block; } .attchip{ font-size:.78rem; font-weight:600; } /* ===== poll bars ===== */ .pollbar{ display:flex; align-items:center; gap:8px; margin-top:4px; font-size:.84rem; } .pollbar .lbl{ flex:0 0 38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pollbar .track{ flex:1; height:10px; background:var(--parchment-2); border:1px solid var(--line); border-radius:6px; overflow:hidden; } .pollbar .track i{ display:block; height:100%; background:var(--moss); border-radius:6px; } .btn.small.on{ background:var(--moss); color:#fff; border-color:var(--moss); } /* ===== faculty lounge mentions ===== */ .fl-m.ping{ background:#fbf6e7; border-left:3px solid var(--gold); padding:4px 7px; border-radius:8px; } .fl-m .at{ color:var(--moss-deep); font-weight:700; } .fl-m .at.me{ color:#8a6410; } #flTab.mention .dot{ background:var(--gold); display:block; } .fl-mention{ position:absolute; bottom:54px; left:10px; right:70px; background:var(--card); border:1.5px solid var(--line); border-radius:10px; box-shadow:0 8px 22px rgba(30,40,30,.18); z-index:5; max-height:180px; overflow:auto; } .fl-mention .opt{ padding:8px 12px; cursor:pointer; font-size:.86rem; font-weight:600; color:var(--moss-deep); } .fl-mention .opt:hover{ background:var(--moss-soft); } /* ===== bulk grade ===== */ .bulkbtn{ border:0; background:none; cursor:pointer; font-size:.82rem; opacity:.55; padding:0 2px; } .bulkbtn:hover{ opacity:1; transform:scale(1.15); } /* ===== region chips ===== */ .regionchip.on{ background:var(--moss); color:#fff; border-color:var(--moss); } /* ===== homeroom weekly observation ===== */ .hrnote{ flex:1; font:inherit; font-size:.85rem; border:1.5px solid var(--line); border-radius:9px; padding:6px 10px; } .hrnote:focus{ border-color:var(--moss); outline:none; }