/* ============================================================================ HEY VEYRA — brand skin (v2) The final brand layer for the teacher dashboard. Implements the "Veyra brand guideline" v1.0 and mirrors the marketing site's design system: cream is the room (#F7EABF), white is the furniture, Veyra purple (#8452B5) is punctuation. Nunito carries display/UI, Jost carries body, Playfair Display italic is reserved for editorial subtitles. Loaded LAST in (after skin-unify*/responsive) — keep it there. This file is styling only: no selectors here may depend on new JS. ========================================================================== */ /* ---- 1. Type & base ----------------------------------------------------- */ body { font-family: 'Jost', system-ui, sans-serif !important; background: var(--cream, #F7EABF) !important; color: var(--ink, #1B2139); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .charts-header h3, .section-card h3, .sx-title, .metric-card-number { font-family: 'Nunito', sans-serif !important; font-weight: 800; letter-spacing: -0.015em; color: var(--ink, #1B2139); } :focus-visible { outline: 3px solid var(--purple, #8452B5) !important; outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--primary-lt, #EFE6F7); } a { color: var(--primary-dk, #6E3F9C); } /* Warm scrollbars (site: quiet, never chrome-grey) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #DCCFA8; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #C9B98A; } ::-webkit-scrollbar-track { background: transparent; } * { scrollbar-width: thin; scrollbar-color: #DCCFA8 transparent; } /* ---- 2. The wordmark lockup --------------------------------------------- */ /* Stacked lockup per guideline §04: letterspaced purple HEY over Nunito-900 "Veyra" in ink — exact metrics from the marketing site header. */ .v-lockup { display: flex; flex-direction: column; line-height: .9; text-decoration: none !important; flex: none; gap: 1px; } .v-lockup-hey { display: block; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .66rem; letter-spacing: .32em; color: var(--purple, #8452B5); } .v-lockup-name { display: block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink, #1B2139); } .v-lockup-sm .v-lockup-hey { font-size: .55rem; } .v-lockup-sm .v-lockup-name { font-size: 1.15rem; } /* Tabbar variant: kill any legacy logo filters/sizing aimed at the old */ .pebble-tabbar-logo.v-lockup, .pebble-tabbar-logo.v-lockup * { filter: none !important; } .pebble-tabbar-logo.v-lockup { height: auto !important; width: auto !important; } /* The brand never disappears: below 1080px skin-unify-v2 hid the logo — show a compact lockup instead (guideline §05: use the inline/small form when space is tight, never remove the mark). */ @media (max-width: 1080px) { .pebble-tabbar-logo.v-lockup { display: flex !important; } .pebble-tabbar-logo .v-lockup-hey { font-size: .55rem; } .pebble-tabbar-logo .v-lockup-name { font-size: 1.1rem; } } /* ≤900px the hamburger appears in-flow at the left where dashboard.css pins the logo absolutely — put the lockup back in flow beside it. */ @media (max-width: 900px) { .pebble-tabbar-logo.v-lockup { position: static !important; transform: none !important; margin-left: .35rem; } } /* Watermark V — the site's page-hero motif, quiet and behind everything. */ .veyra-watermark { position: fixed; right: -5rem; bottom: -9rem; z-index: 0; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 30rem; line-height: 1; color: rgba(255, 255, 255, .5); pointer-events: none; user-select: none; } /* App chrome paints above the watermark */ .app .topbar, .app .pebble-tabbar, .app .pebble-subband, .app .tabs-container, .app-footer { position: relative; z-index: 1; } /* ---- 3. Auth screen — the brand moment ---------------------------------- */ /* Reversed lockup on Veyra purple: equal preference to the light version. */ .auth-screen { background: var(--cream, #F7EABF); } .auth-left { position: relative; overflow: hidden; background: var(--purple, #8452B5) !important; } .auth-left::after { content: "V"; position: absolute; right: -4rem; bottom: -8rem; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 30rem; line-height: 1; color: rgba(255, 255, 255, .08); pointer-events: none; user-select: none; } .auth-brand { display: flex; flex-direction: column; line-height: .92; margin-bottom: 2.2rem; } .auth-brand .v-lockup-hey { font-size: 1rem; letter-spacing: .4em; color: rgba(255, 255, 255, .9); } .auth-brand .v-lockup-name { font-size: 3.4rem; color: #fff; } .auth-strap { font-family: 'Nunito', sans-serif !important; font-weight: 800; font-size: 1.35rem !important; line-height: 1.3; color: #fff; opacity: 1 !important; margin-bottom: 1.2rem; } .auth-strap em { font-style: normal; color: var(--cream, #F7EABF); } .auth-left p, .auth-left li { position: relative; z-index: 1; } .auth-left li:before { color: var(--cream, #F7EABF); } .auth-right { background: var(--white, #fff) !important; } .auth-right h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.6rem; } /* Sign-in buttons: white cards, ink type — tokens.css paints every .auth-form button purple, which left white text on light hovers. Higher specificity here wins without !important wars. */ .auth-form .sso-btn { background: var(--white, #fff); color: var(--ink, #1B2139); border: 1.5px solid var(--mist, #EEE9F5); border-radius: 999px; font-family: 'Nunito', sans-serif; font-weight: 700; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .auth-form .sso-btn:hover { background: var(--primary-lt, #EFE6F7); color: var(--ink, #1B2139); border-color: var(--purple, #8452B5); transform: translateY(-1px); } .auth-form .demo-btn { background: var(--white, #fff); color: var(--ink, #1B2139); border: 1.5px solid var(--mist, #EEE9F5); border-radius: 14px; transition: border-color .15s ease, background .15s ease; } .auth-form .demo-btn:hover { background: var(--primary-lt, #EFE6F7); border-color: var(--primary-md, #B491D6); color: var(--ink, #1B2139); } .auth-form .demo-btn .demo-scope { font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--ink, #1B2139); } .auth-form .demo-btn .demo-role { color: var(--mid, #4B5268); } /* ---- 4. Header / tab bar ------------------------------------------------- */ /* Translucent cream glass bar with a warm hairline, like the site header. */ .pebble-tabbar, .topbar { background: rgba(247, 234, 191, .92) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--line, #E9DCAE) !important; box-shadow: none !important; } .pebble-tab, .topbar-nav button, .tab-button { font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; } .pebble-tab, .tab-button { color: var(--ink, #1B2139) !important; } .pebble-tab:hover, .tab-button:hover { color: var(--primary-dk, #6E3F9C) !important; } .pebble-tab.active, .tab-button.active { color: var(--primary-dk, #6E3F9C) !important; background: transparent !important; border-bottom: 3px solid var(--purple, #8452B5) !important; } .school-chip { background: var(--cream-soft, #FBF3D9) !important; border: 1px solid var(--line, #E9DCAE) !important; border-radius: 999px !important; font-family: 'Nunito', sans-serif; font-weight: 700; color: var(--ink, #1B2139) !important; } .avatar { background: var(--purple, #8452B5) !important; font-family: 'Nunito', sans-serif; font-weight: 800; } /* Sign out: the site's ghost button, scaled down */ .pebble-signout, .topbar-right button { background: transparent !important; border: 2px solid var(--ink, #1B2139) !important; color: var(--ink, #1B2139) !important; border-radius: 999px !important; font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; transition: background .15s ease, color .15s ease; } .pebble-signout:hover, .topbar-right button:hover { background: var(--ink, #1B2139) !important; color: var(--cream, #F7EABF) !important; } .pebble-hamburger-bar { background: var(--ink, #1B2139) !important; } /* Subtitle band: the one Playfair-italic editorial moment on each page */ .pebble-subband-pill { font-family: 'Playfair Display', serif !important; font-style: italic; color: var(--mid, #4B5268) !important; background: transparent !important; border: none !important; } /* ---- 5. Buttons & pills -------------------------------------------------- */ /* Primary = purple pill (site .btn). Secondary = ink ghost (site .btn-ghost). */ .generate-report-btn, .em-send, .sx-drawer-apply, .pp-actions button, .snv-scope-btn, .sx-empty button, .snv-empty button, .veyra-input-area button { font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; border-radius: 999px !important; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .generate-report-btn { background: var(--purple, #8452B5) !important; color: #fff !important; } .generate-report-btn:hover { background: var(--primary-dk, #6E3F9C) !important; } .generate-report-btn:hover, .em-send:hover, .sx-drawer-apply:hover, .veyra-input-area button:hover { transform: translateY(-1px); } /* No sparkles: the wordmark is the decoration (voice: never showy). */ .generate-report-btn::before { content: none !important; } /* Ghost buttons — secondary actions (Excel export, cancels) */ .btn-ghost-ink, .snv-scope-btn-alt { background: transparent !important; border: 2px solid var(--ink, #1B2139) !important; color: var(--ink, #1B2139) !important; } .btn-ghost-ink:hover, .snv-scope-btn-alt:hover { background: var(--ink, #1B2139) !important; color: var(--cream, #F7EABF) !important; transform: translateY(-1px); } .em-cancel, .sx-drawer-reset, .sx-filter-btn, .sx-actions-btn { font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; border-radius: 999px !important; } /* Chips: filter chips, segment pills, refinement chips (site .chip) */ .sx-chip, .rec-chip, .domain-pill, .list-col-tab, .sx-segment { font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; border-radius: 999px !important; } .sx-chip, .rec-chip { background: var(--cream-soft, #FBF3D9); border: 1px solid var(--line, #E9DCAE); color: var(--ink, #1B2139); } .sx-chip.active, .domain-pill.active, .list-col-tab.active, .rec-chip.active { background: var(--purple, #8452B5) !important; border-color: var(--purple, #8452B5) !important; color: #fff !important; } /* Inputs and selects: white, 12px, purple focus (site form.veyra) */ input[type="text"], input[type="email"], input[type="search"], textarea, select { border-radius: 12px !important; font-family: 'Jost', sans-serif; } input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border-color: var(--purple, #8452B5) !important; } /* ---- 6. Cards & sections ------------------------------------------------- */ .metric-card, .charts-section, .section-card, .student-table, .widget { border-radius: 22px !important; } /* The row's width must come from layout, not from the cards' content: it's a flex item, and with contained cards (below) its content width is zero — without this the whole row pancakes. Full width is what it already resolves to today. */ .metrics-row { width: 100%; } .metric-card { border: 1px solid var(--mist, #EEE9F5) !important; box-shadow: 0 1px 2px rgba(27, 33, 57, .05), 0 6px 18px -12px rgba(27, 33, 57, .12) !important; container-type: inline-size; /* lets the number size track the card, not the viewport */ } .metric-card:hover { box-shadow: 0 22px 44px -26px rgba(27, 33, 57, .4) !important; transform: translateY(-3px); } .metric-card-label { font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; letter-spacing: .12em !important; } /* Big numbers hold one line — Nunito 900, sized from the card itself. The card is a 1fr grid fifth, so viewport units overflow it on mid widths ("208 / 258" spilling the box). cqi tracks the card; the vw clamp is the fallback where container queries aren't supported. */ .metric-card-number { font-weight: 900 !important; font-size: clamp(1.1rem, .6rem + 1.1vw, 2.2rem) !important; /* 22cqi - 10px ≈ (card width - body padding) / "XXX / XXX"-in-ems */ font-size: clamp(1.1rem, 22cqi - 10px, 2.2rem) !important; white-space: nowrap; } /* The Progress pair (Pupils assessed / Free slots) reads as brand cards: solid Veyra purple with white type, like the site's reversed panels. The attention trio stays white so the two groups scan differently. */ .metric-card-brand { background: var(--purple, #8452B5) !important; border-color: transparent !important; } .metric-card-brand:hover { background: var(--primary-dk, #6E3F9C) !important; } .metric-card-brand .metric-card-label { color: rgba(255, 255, 255, .85) !important; } .metric-card-brand .metric-card-number { color: #fff !important; } .metric-card-brand .metric-card-desc { color: rgba(255, 255, 255, .82) !important; } .metric-card-brand .metric-card-hint { color: rgba(255, 255, 255, .75) !important; } .metric-card-brand .metric-card-arrow { color: rgba(255, 255, 255, .85) !important; } .metric-card-brand .metric-card-bar { background: rgba(255, 255, 255, .3) !important; } /* Section eyebrows — Nunito 800, letterspaced, purple (site's .eyebrow) */ .metrics-row-label { font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; font-size: .76rem !important; letter-spacing: .2em !important; color: var(--purple, #8452B5) !important; } .metrics-row-label::after { background: var(--line, #E9DCAE) !important; } .insight-box { background: var(--primary-lt, #EFE6F7) !important; border-left: 4px solid var(--purple, #8452B5) !important; border-radius: 0 14px 14px 0 !important; } /* Table voice: cream-soft header band, Nunito-800 uppercase th (site table.compare group rows), warm hover. */ .student-table thead, .snv-thead { background: var(--cream-soft, #FBF3D9) !important; } .student-table th { font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; font-size: .72rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--mid, #4B5268) !important; } .student-table tbody tr:hover { background: var(--cream-soft, #FBF3D9); } /* Progress bars: purple on purple-tint, pill-shaped (site .bar) */ .skill-progress, .bar-track, progress { background: var(--primary-lt, #EFE6F7) !important; border-radius: 999px !important; } /* ---- 7. Veyra launcher & chat (guideline §12: always a tap away) --------- */ .veyra-btn { width: 52px !important; height: 52px !important; border-radius: 14px !important; background: var(--purple, #8452B5) !important; color: #fff !important; display: flex !important; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif !important; font-weight: 900 !important; font-size: 1.5rem !important; line-height: 1; box-shadow: 0 8px 20px -6px rgba(27, 33, 57, .5) !important; transition: background .15s ease, transform .15s ease; cursor: pointer; } .veyra-btn:hover { background: var(--primary-dk, #6E3F9C) !important; transform: translateY(-2px); } /* As a floating tile the launcher is just the V monogram — the "Chat with Veyra" label + chevron in the markup only show in the rail. */ .veyra-btn .veyra-btn-label, .veyra-btn .veyra-btn-chev { display: none; } /* Clear the ink footer (hidden ≤720px, so drop back down there) */ .veyra-btn { bottom: 4.4rem !important; } .veyra-panel { bottom: 8.2rem !important; } @media (max-width: 720px) { .veyra-btn { bottom: 1.5rem !important; } .veyra-panel { bottom: 5rem !important; } } /* The coach greets you inside, not at the door: hidden while the auth screen is showing (app.js sets display:none on it after sign-in). */ body:has(#authScreen:not([style*="none"])) .veyra-btn, body:has(#authScreen:not([style*="none"])) .veyra-panel { display: none !important; } .veyra-panel { border-radius: 22px !important; border: 1px solid var(--mist, #EEE9F5); box-shadow: 0 22px 55px -28px rgba(27, 33, 57, .4) !important; overflow: hidden; } .veyra-panel-header { display: flex !important; align-items: center; gap: .6rem; background: var(--white, #fff) !important; color: var(--ink, #1B2139) !important; border-bottom: 1px solid var(--mist, #EEE9F5); font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; padding: .9rem 1.1rem !important; } .veyra-badge { width: 34px; height: 34px; border-radius: 10px; background: var(--purple, #8452B5); color: #fff; display: grid; place-items: center; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.15rem; flex: none; } .veyra-panel-title { display: flex; flex-direction: column; line-height: 1.15; } /* ---------- Expand to a centred, focused window ---------- */ .veyra-expand-btn { margin-left: auto; /* pin to the right of the header */ flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--mist, #EEE9F5); border-radius: 9px; background: var(--white, #fff); color: var(--mid, #4B5268); cursor: pointer; transition: background .15s ease, color .15s ease; } .veyra-expand-btn:hover { background: var(--pale, #F6F3FB); color: var(--purple, #8452B5); } .veyra-expand-btn:focus-visible { outline: 2px solid var(--purple, #8452B5); outline-offset: 2px; } /* Dimmed backdrop behind the expanded chat (click to shrink). */ .veyra-backdrop { position: fixed; inset: 0; background: rgba(27, 33, 57, .45); z-index: 200; animation: veyraFadeIn .15s ease-out; } @keyframes veyraFadeIn { from { opacity: 0 } to { opacity: 1 } } /* Centred window. Overrides the rail/floating anchoring, including the !important bottom offsets set for the small panel above. */ .veyra-panel.veyra-expanded { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); width: min(880px, 92vw) !important; height: min(760px, 86vh) !important; max-height: 86vh !important; z-index: 210; /* above the backdrop */ box-shadow: 0 40px 90px -30px rgba(27, 33, 57, .55) !important; } .veyra-panel.veyra-expanded .veyra-panel-content { flex: 1; max-height: none; } /* Roomier reading in the big window. */ .veyra-panel.veyra-expanded .veyra-response, .veyra-panel.veyra-expanded .veyra-msg { font-size: .95rem; line-height: 1.6; } .veyra-panel.veyra-expanded .veyra-input-area input { font-size: .95rem; } /* Stop the page scrolling behind the focused window. */ body.veyra-expanded-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .veyra-backdrop { animation: none; } } .veyra-panel-title small { font-family: 'Jost', sans-serif; font-weight: 500; font-size: .72rem; color: var(--green, #2A6565); } .veyra-input-area input { border-radius: 999px !important; } /* One-shot attention pulse when "Ask Veyra" hands over from the intervention drawer: the drawer closes on the right, the chat opens on the left — this ring walks the eye across. Outline, not box-shadow: the in-rail panel pins box-shadow with !important. */ @keyframes veyraAttnPulse { 0%, 100% { outline-color: rgba(132, 82, 181, 0); } 45% { outline-color: rgba(132, 82, 181, .85); } } .veyra-panel.veyra-attn { outline: 3px solid rgba(132, 82, 181, 0); outline-offset: 3px; animation: veyraAttnPulse 1s ease-in-out 2; } @media (prefers-reduced-motion: reduce) { .veyra-panel.veyra-attn { animation: none; outline-color: rgba(132, 82, 181, .85); /* still marked, just still */ } } /* Prompt chips read as chips, not buttons */ .veyra-prompt { background: var(--cream-soft, #FBF3D9) !important; border: 1px solid var(--line, #E9DCAE) !important; border-radius: 999px !important; font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; color: var(--ink, #1B2139) !important; } .veyra-prompt:hover { border-color: var(--purple, #8452B5) !important; color: var(--primary-dk, #6E3F9C) !important; } /* Chat bubbles — the site's .bubble with the cut corner. Veyra speaks in purple; the user replies on white. app.js marks the user's line with an inline style, which is the only hook we have without touching JS. */ .veyra-response { max-width: 85%; margin: .35rem 0; padding: .6rem .9rem; font-size: .9rem; line-height: 1.45; background: var(--purple, #8452B5); color: #fff; border-radius: 16px 16px 16px 4px; box-shadow: 0 10px 22px -12px rgba(110, 63, 156, .55); } .veyra-response strong { display: block; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: .15rem; } .veyra-response[style] { margin-left: auto; background: var(--white, #fff); color: var(--ink, #1B2139) !important; border: 1px solid var(--mist, #EEE9F5); border-radius: 16px 16px 4px 16px; box-shadow: none; } .veyra-response[style] strong { color: var(--purple, #8452B5); } /* ---- 8. Modals, panels, toasts ------------------------------------------ */ .report-modal, .email-modal, .config-modal { border-radius: 22px !important; } .profile-panel { border-radius: 22px 0 0 22px; } .toast { border-radius: 999px !important; font-family: 'Nunito', sans-serif; font-weight: 700 !important; box-shadow: 0 14px 30px -14px rgba(27, 33, 57, .45) !important; } /* The students-view toast hides by sliding off-canvas via transform; an ancestor transform can neutralise that and leave an empty ink pill on screen. Belt-and-braces: it is only visible while .show is present. */ .snv-toast { opacity: 0; visibility: hidden; transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility 0s linear .22s; border-radius: 999px !important; font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; } .snv-toast.show { opacity: 1; visibility: visible; transition-delay: 0s; } /* ---- 9. Students list — compact stacked rows under 1200px ---------------- */ /* students-view.css collapses each row into a tall single-column grid; flow the cells instead so a pupil stays a readable two-line row. */ @media (max-width: 1200px) { .snv-row { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: .55rem; row-gap: .45rem; } .snv-cell[data-col="pupil"] { flex: 0 1 auto; min-width: 140px; } .snv-cell[data-col="yearform"] { flex: 1 1 auto; order: 0; } .snv-action-cell { flex: 0 0 auto; margin-left: auto; order: 1; } /* Pseudo flex item = full-width line break: chips get their own row */ .snv-row::after { content: ""; flex-basis: 100%; height: 0; order: 2; } .snv-cell[data-col="recby"], .snv-cell[data-col="thinking"], .snv-cell[data-col="wellbeing"], .snv-cell[data-col="engagement"] { flex: 0 0 auto; order: 3; } } /* Phones: chart canvases keep their desktop intrinsic width and grid/flex min-width:auto propagates it up, pushing the page into sideways scroll. Contain them — min-width:0 stops the propagation, the canvas scales. */ @media (max-width: 768px) { .dashboard-content div { min-width: 0 !important; } .dashboard-content canvas { max-width: 100% !important; height: auto !important; } } /* ---- 10. App footer — the site's ink close-band, slimmed ----------------- */ .app-footer { flex: none; display: flex; align-items: center; gap: 1rem; padding: .55rem 1.5rem; background: var(--ink, #1B2139); color: #C9CEDE; font-size: .78rem; } .app-footer .v-lockup-inline { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .9rem; color: #fff; letter-spacing: -.01em; flex: none; } .app-footer .app-footer-motto { font-family: 'Playfair Display', serif; font-style: italic; color: #C9CEDE; } .app-footer .app-footer-legal { margin-left: auto; color: #8B92A8; } @media (max-width: 720px) { .app-footer { display: none; } } /* ---- 11. Motion — quiet reveal, honest with reduced-motion --------------- */ @keyframes veyraRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .metric-card, .charts-section, .section-card { animation: veyraRise .35s ease-out both; } @media (prefers-reduced-motion: reduce) { .metric-card, .charts-section, .section-card { animation: none !important; } .veyra-btn, .metric-card, .sso-btn, .generate-report-btn, .em-send, .sx-drawer-apply, .veyra-input-area button { transition: none !important; transform: none !important; } } /* ---- 12. Sidebar layout (html[data-nav="sidebar"], desktop only) --------- */ /* The teacher app's nav moves to a white left rail: lockup on top, the canonical .tab-button nav vertically (count badges intact), account cluster pinned to the rail's foot. Gated to >1100px — below that the pebble tabbar + hamburger drawer (responsive.css) take back over. Print keeps hiding the topbar via the tokens.css print block. It deliberately reuses the ORIGINAL .topbar markup — every id the JS writes to (#userName, #userAvatar, #userRole, #pendingBadge, #recsBadge) keeps working and .tab-button clicks stay the canonical tab switch. The stale pebble-skin.css sidebar block (fixed 230px rail, hidden subband, margin-left content hack) is overridden here wholesale. */ @media screen and (min-width: 1101px) { /* Shell: rail | (page header / content), ink footer full-bleed below. :not(.app-hidden) is load-bearing — without it display:grid would override .app-hidden's display:none and unhide the app at login. */ html[data-nav="sidebar"] #appContainer.app:not(.app-hidden) { display: grid !important; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "side subband" "side tabs" "footer footer"; height: 100vh; } html[data-nav="sidebar"] #appContainer > .pebble-tabbar { display: none !important; } html[data-nav="sidebar"] #appContainer .pebble-sidenav { display: none !important; } html[data-nav="sidebar"] #appContainer > .app-footer { grid-area: footer; } /* The rail itself (un-hides the topbar that dashboard.css suppresses). position:relative + z-index keep it above the fixed watermark. */ html[data-nav="sidebar"] #appContainer > .topbar { display: flex !important; position: relative !important; inset: auto !important; grid-area: side; width: auto !important; min-width: 0; /* grid item: never inflate past the 248px track */ height: 100%; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; background: var(--white, #fff) !important; border-right: 1px solid var(--mist, #EEE9F5) !important; border-bottom: none !important; box-shadow: none !important; backdrop-filter: none; padding: 1.4rem 1rem 1.15rem !important; overflow-y: auto; overflow-x: hidden; z-index: 2; } html[data-nav="sidebar"] #appContainer .topbar-left { flex-direction: column; align-items: stretch; gap: 1.5rem; width: 100%; } html[data-nav="sidebar"] #appContainer .topbar-left > .v-lockup { margin: 0 !important; padding: .15rem .55rem 0; } html[data-nav="sidebar"] #appContainer .topbar-left .v-lockup-hey { font-size: .72rem; } html[data-nav="sidebar"] #appContainer .topbar-left .v-lockup-name { font-size: 1.65rem; } /* Vertical nav — the canonical .tab-button set (pebble-skin.css hides it inside the topbar; re-shown here) */ html[data-nav="sidebar"] #appContainer .topbar .topbar-nav { display: flex !important; flex-direction: column; gap: .3rem; width: 100%; } html[data-nav="sidebar"] #appContainer .topbar-nav .tab-button { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .68rem .85rem !important; border: none !important; border-radius: 12px !important; background: transparent !important; color: var(--ink, #1B2139) !important; font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; font-size: .95rem; line-height: 1.25; cursor: pointer; transition: background .15s ease, color .15s ease; } html[data-nav="sidebar"] #appContainer .topbar-nav .tab-button:hover { background: var(--cream-soft, #FBF3D9) !important; color: var(--primary-dk, #6E3F9C) !important; } html[data-nav="sidebar"] #appContainer .topbar-nav .tab-button.active { background: var(--primary-lt, #EFE6F7) !important; color: var(--primary-dk, #6E3F9C) !important; box-shadow: inset 3px 0 0 0 var(--purple, #8452B5); } /* Count badges (#pendingBadge / #recsBadge): from floating corner dots to inline chips at the row end. display stays JS-controlled. */ html[data-nav="sidebar"] #appContainer .topbar-nav .tab-button > span[id] { position: static !important; top: auto !important; right: auto !important; margin-left: auto !important; } /* Account cluster sits at the rail's foot — the Ask Veyra row above it carries the margin-top:auto push, so no auto margin here (two auto margins would split the blank space and strand the button mid-rail). */ html[data-nav="sidebar"] #appContainer .topbar-right { margin-top: 0; flex-direction: column; align-items: stretch; gap: .85rem; width: 100%; padding-top: 1.15rem; border-top: 1px solid var(--mist, #EEE9F5); } html[data-nav="sidebar"] #appContainer .topbar-right .school-chip { text-align: center; white-space: normal !important; line-height: 1.3; } html[data-nav="sidebar"] #appContainer .avatar-section { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .65rem; margin: 0; } html[data-nav="sidebar"] #appContainer .avatar-section #userName { display: block !important; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .92rem; color: var(--ink, #1B2139); line-height: 1.2; } html[data-nav="sidebar"] #appContainer .avatar-section > button[data-click="app.logout"] { flex-basis: 100%; margin-left: 0 !important; padding: .5rem .8rem !important; text-align: center; background: transparent !important; border: 1.5px solid var(--mist, #EEE9F5) !important; color: var(--mid, #4B5268) !important; cursor: pointer; transition: border-color .15s ease, color .15s ease; } html[data-nav="sidebar"] #appContainer .avatar-section > button[data-click="app.logout"]:hover { border-color: var(--ink, #1B2139) !important; color: var(--ink, #1B2139) !important; } /* Page-header band: pebble-skin kills the subband in sidebar mode; it comes back as the main column's header — the Playfair-italic moment, left-aligned to the content gutter, hairline under (site header). */ html[data-nav="sidebar"] #appContainer > .pebble-subband { display: flex !important; grid-area: subband; justify-content: flex-start; align-items: center; min-height: 58px; margin: 0; padding: .8rem 2rem .65rem; border-bottom: 1px solid var(--line, #E9DCAE); background: transparent; } html[data-nav="sidebar"] #appContainer .pebble-subband-pill { padding: 0 !important; font-size: 1.02rem; } /* Content region scrolls; the stale margin-left rail hack dies here */ html[data-nav="sidebar"] #appContainer > .tabs-container { grid-area: tabs; margin-left: 0 !important; min-height: 0; min-width: 0; } /* Veyra lives in the rail: the launcher becomes a full-width row pinned just above the account cluster, and the open chat panel fills the blank space between the nav and that row (markup order: panel, then button, so flex:1 on the open panel claims the gap). */ /* The FAB's decorative dashed ring (pebble-skin .veyra-btn::after, position:absolute) re-anchors to the rail once the button is static and covered the whole sidebar as an invisible rotating click target. It belongs to the floating tile only — remove it here entirely. */ html[data-nav="sidebar"] #appContainer .topbar .veyra-btn::after { content: none !important; } html[data-nav="sidebar"] #appContainer .topbar .veyra-btn { /* relative, NOT static: any absolutely-positioned pseudo/child then anchors to the button itself, never to the rail. inset:auto is load-bearing — the floating-tile rules set bottom:4.4rem, which on a RELATIVE box becomes an upward offset that hoisted the row ~72px off its slot. */ position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; flex: 0 0 auto; /* hit area = the visible row, whatever future rules do */ margin-top: auto; margin-bottom: .95rem; border-radius: 12px !important; justify-content: flex-start !important; gap: .6rem; padding: .6rem .9rem !important; font-size: 1.15rem !important; box-shadow: none !important; z-index: auto; } html[data-nav="sidebar"] #appContainer .topbar .veyra-btn .veyra-btn-label { display: inline; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: 0; } /* Chevron affordance: points right when closed, swings down when the chat is open (the panel is the button's previous sibling). */ html[data-nav="sidebar"] #appContainer .topbar .veyra-btn .veyra-btn-chev { display: inline-block; margin-left: auto; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem; line-height: 1; transition: transform .15s ease; } html[data-nav="sidebar"] #appContainer .topbar .veyra-panel.open + .veyra-btn .veyra-btn-chev { transform: rotate(90deg); } html[data-nav="sidebar"] #appContainer .topbar .veyra-btn:hover { transform: none; /* it's a row here, not a floating tile */ } html[data-nav="sidebar"] #appContainer .topbar .veyra-panel { position: static !important; /* width:0 + min-width:100% sizes the panel purely from the rail's definite content box — its own min-content (the chat input row) would otherwise inflate the rail's scrollable width. */ width: 0 !important; min-width: 100%; max-height: none !important; flex: 1 1 auto; min-height: 320px; margin-top: .9rem; border-radius: 16px !important; border: 1px solid var(--mist, #EEE9F5) !important; box-shadow: none !important; z-index: auto; } html[data-nav="sidebar"] #appContainer .topbar .veyra-panel .veyra-panel-content { min-height: 0; } /* Chat input must be allowed to shrink to the rail's width */ html[data-nav="sidebar"] #appContainer .topbar .veyra-input-area { min-width: 0; } html[data-nav="sidebar"] #appContainer .topbar .veyra-input-area input { min-width: 0; flex: 1 1 0; } } /* Below the sidebar breakpoint the pebble-skin sidebar block would hide the tabbar AND subband at every width while dashboard.css hides the topbar — i.e. no navigation at all on small screens. Hand the chrome back to the tabbar + hamburger drawer. */ @media screen and (max-width: 1100px) { /* pebble-skin's ungated .app{flex-direction:row} would lay the tabbar, subband and content side-by-side — force the stacked column back. */ html[data-nav="sidebar"] #appContainer.app:not(.app-hidden) { display: flex !important; flex-direction: column !important; } html[data-nav="sidebar"] #appContainer > .pebble-tabbar { display: flex !important; } html[data-nav="sidebar"] #appContainer > .pebble-subband { display: flex !important; } /* The rail's box disappears but the Veyra launcher/panel markup now lives inside it — display:contents keeps them alive so they fall back to their fixed bottom-right float (base styles in tokens.css). */ html[data-nav="sidebar"] #appContainer > .topbar { display: contents !important; } html[data-nav="sidebar"] #appContainer > .topbar > .topbar-left, html[data-nav="sidebar"] #appContainer > .topbar > .topbar-right { display: none !important; } } /* ---- 13. (Parent portal removed — rule retired) ------------------------- */ /* ---- 14. Expanded chat window — LAST WORD on positioning --------------- The desktop rail rules above (html[data-nav="sidebar"] #appContainer .topbar .veyra-panel) pin the panel with position:static !important and width:0 !important at a specificity the plain .veyra-panel.veyra-expanded selector cannot beat. These selectors match that specificity (and come later), so the centred window wins in every nav mode. Kept outside any media query on purpose — expanding is a deliberate user action at any viewport. */ html[data-nav="sidebar"] #appContainer .topbar .veyra-panel.veyra-expanded, html #appContainer .topbar .veyra-panel.veyra-expanded, body .veyra-panel.veyra-expanded { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: min(880px, 92vw) !important; min-width: 0 !important; height: min(760px, 86vh) !important; max-height: 86vh !important; min-height: 0 !important; margin: 0 !important; flex: none !important; z-index: 210 !important; border-radius: 22px !important; box-shadow: 0 40px 90px -30px rgba(27, 33, 57, .55) !important; display: flex !important; flex-direction: column !important; } html #appContainer .topbar .veyra-panel.veyra-expanded .veyra-panel-content, body .veyra-panel.veyra-expanded .veyra-panel-content { flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important; }