/* =========================================================================== Glass — the frosted card look, minus the part that cost frames. Linked LAST in on every page, after the page stylesheet, because it deliberately overrides the flat surface each page declares for its cards. WHAT CHANGED: cards were translucent (color-mix to 82%) over a backdrop-filter: blur(14px) saturate(160%). That was measured as the cause of scroll jank on the teacher and student dashboards — ~10 blurred layers, each re-sampled by the compositor on every scroll frame. Cards are now opaque with no filter, and keep only their hairline border and soft shadow. Do not reintroduce a backdrop-filter on a card selector here; if the frosted look is wanted back, it needs a different technique, not this one. Three rules govern what is left: 1. Colour comes from the page's own --card-background, never a hardcoded white/grey. A teacher recolours every dashboard surface (see dashboard-theme.js); a literal #fff here would snap all of his cards back to platform white the moment this file loaded. 2. Everything stays inside @supports (backdrop-filter). It no longer gates a card's readability — an opaque card reads fine anywhere — but it still gates the one surviving filter, the blur behind a modal, and it keeps the border/shadow tokens scoped to the browsers this file was tuned against. 3. Opt out with .no-glass on the element (or an ancestor). Cards carrying their own artwork — the teacher dashboard's card_image_* covers, video thumbnails — must keep their background. ======================================================================== */ @supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) { :root { --glass-border: rgba(255, 255, 255, 0.34); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.07); } [data-theme="dark"] { --glass-border: rgba(255, 255, 255, 0.07); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.32); } /* Card surfaces are deliberately OPAQUE and carry no filter. ------------------------------------------------------------------ These used to be translucent with blur(14px) saturate(160%). A backdrop-filter is re-sampled by the compositor on every frame the element moves, and a dashboard carries ~10 of these at once, so scrolling meant re-blurring ten separate layers 60 times a second. That was measured as the cause of the scroll jank on the teacher and student dashboards — confirmed by toggling this one declaration off in DevTools. It was already off for touch devices. The reasoning that put it there ("a phone cannot hold 60fps doing this") turned out to apply to desktop too: a compositor is a compositor, and ten stacked blur layers is the most expensive thing this file could possibly ask for. So it is gone everywhere rather than behind a media query. What survives is the part that actually read as "glass" on a card: the light hairline border and the soft shadow. Those cost nothing — they raster once and the compositor just moves the result. The blur on the overlay *behind* a modal also survives (see below); there is one at a time and it sits over a page that is not scrolling. */ .modal-content, .dashboard-card, .playlist-card, .course-card, .stat-card, .dashboard-stat-card, .card, .glass { background: var(--card-background, var(--white, #fff)) !important; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } /* Cards that own their surface keep it. `.has-card-image` is the teacher dashboard's cover-art card; the rest are explicit opt-outs. */ .no-glass, .no-glass .modal-content, .no-glass .card, .has-card-image, .dashboard-card.has-card-image { background: var(--card-background, var(--white, #fff)) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } /* --- The backdrop behind a modal: NO blur --------------------------- This used to blur(6px) the layer behind the dialog, on the reasoning that one full-viewport blur over a page that is not scrolling is cheap. It is not. The backdrop is the whole page, and it is re-sampled on every repaint of anything in front of it — a blinking caret in a modal input, a hovered button, a select opening, the modal's own scroll. On a page with a grid of image cards behind it (teacher-playlists, videos-files) that made typing in an open modal visibly laggy. Note the two other overlay blurs on the platform — `.video-modal` in teacer-video.css and `.confirm-overlay` in modal-motion.css — were already gated to `min-width: 900px` for exactly this reason. This rule was ungated and, because glass.css loads last, it also silently un-gated `.confirm-overlay` on phones. The dim alone separates the dialog from the page: `.modal` is rgba(0,0,0,.7) and `.confirm-overlay` rgba(0,0,0,.55), both darkened when the blurs were first gated. Do not reintroduce a backdrop-filter here — on a card selector or an overlay one. */ } /* There used to be a `(hover: none) and (pointer: coarse)` block here that turned the card blur off for touch devices only. Cards are opaque and filterless on every device now, so it said nothing the rule above does not already say. Deleted rather than left as a no-op. */ /* ---- The overlay blurs the page stylesheets still declare ----------------- The block above argues at length that the backdrop behind a modal must not be blurred, and then never writes the rule — it ends in a comment. So every `.modal` / `.video-modal` / `#reportModal` blur in the page stylesheets was still live, and the only thing that ever switched them off was the `prefers-reduced-transparency` query below, which almost nobody sets. This is that missing rule, and it is here rather than in the ~15 page stylesheets because this file loads last on all of them. The listed selectors are the platform's own overlay names; they are spelled out instead of matched loosely because `.modal` on some pages *is* the dialog box, not the backdrop, and a blanket attribute selector would take the frosting off things that are not overlays at all. */ .modal, .modal-overlay, .modal-backdrop, .overlay, .popup-overlay, .confirm-overlay, .confirm-modal-overlay, .video-modal, .announcement-modal-backdrop, .add-student-overlay, .quiz-modal-overlay, .exam-gate-overlay, .exam-result-overlay, .student-card-overlay, .watermark-modal, .watch-stats-modal, #reportModal { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ---- Blurs that sit in the scroll path ----------------------------------- Everything above is about a blur that is on screen while the page is still. These are the other kind: a sticky bar that is re-blurred on every frame the page moves under it, and small badges/overlays that repeat once per card in a grid. They are the same compositor cost as the card blur this file was written to remove, only harder to see in a screenshot — which is why they survived it. `.page-nav` is the worst of them: blur(20px) saturate(180%) across the full width of a sticky header, re-sampled for the entire length of every scroll. Removed everywhere, not behind `(pointer: coarse)`, for the reason already given further up: a compositor is a compositor. Each of these elements has its own opaque or tinted background underneath the filter, so dropping it costs contrast nowhere. */ .page-nav, .academy-header.scrolled, .sbank-bar, .hero-badge, .news-badge, .forum-post-badge, .integration-icon, .cover-edit-btn, .cover-remove-btn, .profile-name-large-container, .create-exam-btn.secondary, .btn-hero-secondary, .cv-video-thumb.locked .cv-overlay i, #videoWatermark, #youtubeContainer .vjs-watermark, #youtubeContainer #videoWatermark { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Accessibility and battery. Kept even though the two rules above already clear every filter this platform declares: a page added later that brings its own overlay blur is still covered here, and the declaration is what documents the intent for it. */ @media (prefers-reduced-transparency: reduce) { .modal, .modal-overlay, .confirm-overlay, .overlay, .popup-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }