/* SitePattern: the site-wide multi-layer wallpaper (Telegram-style, imported from the chat.rudmal.ru visual language). Ownership contract: - This file is the ONLY owner of the [data-ui-pattern] attribute contract. The attribute lives on (templates/main/base.html), is chosen via the rewards shop (rewards.pattern_service) and switched live by js/ui_theme_runtime.js. - Two fixed, pointer-transparent layers render behind all chrome: body::before — the "wash": a full-bleed gradient over the theme canvas; body::after — the "doodle": a 1440px math-chalkboard SVG tile (images/patterns/doodle-math.svg) used as an alpha MASK over the "paint", so the formula strokes themselves glow. - Colors/opacities come from the --ui-pattern-* semantic tokens (ui/tokens/semantic.css). Theme packs own that palette. Pattern packs swap ONLY the drawing tile, so choosing a pattern never changes theme colors or the branded "formulas" wallpaper gradient. - "clean" (and any page that never sets the attribute) renders no layers and keeps the pre-wallpaper body backgrounds untouched. - With a wallpaper active, shared chrome roles become graded glass: header/sidebar/tabs are the clearest, panels are denser, cards and tables keep the strongest reading plate. "clean" keeps normal opaque surfaces. - Cabinet chrome reveal (below): with a pattern active the cabinet shell canvas and the module panel go transparent and one frosted veil on .content::before frosts the wallpaper under every module page. - Lesson shell reveal (below): LP3/guest-preview viewport paints become transparent while dense glass content cards preserve reading contrast. Layering model: paints the opaque theme canvas, body goes transparent, and both pseudo-layers sit at --ui-z-underlay (-1) in the root stacking context — above the canvas, below every stacking context of the page content. Screen-only by design: print and forced-colors render none of it. */ @media screen { html[data-ui-pattern]:not([data-ui-pattern="clean"]) { /* One graded-glass matrix for every surface family. The alpha grows with information density: chrome 60% -> panels 72% -> cards 84% -> tables 92%. Semantic components inherit these roles across all sections; the pattern component stays the only [data-ui-pattern] selector owner. */ --ui-pattern-chrome-bg: color-mix(in srgb, var(--ui-surface-base) 60%, transparent); --ui-pattern-panel-bg: color-mix(in srgb, var(--ui-surface-raised) 72%, transparent); --ui-pattern-card-bg: color-mix(in srgb, var(--ui-surface-raised) 84%, transparent); --ui-pattern-card-hover-bg: color-mix(in srgb, var(--ui-surface-raised) 89%, transparent); --ui-pattern-table-bg: color-mix(in srgb, var(--ui-surface-raised) 92%, transparent); --ui-surface-header: var(--ui-pattern-chrome-bg); --ui-surface-header-solid: var(--ui-pattern-panel-bg); --ui-surface-glass: var(--ui-pattern-chrome-bg); --ui-surface-glass-strong: var(--ui-pattern-panel-bg); --ui-surface-panel: var(--ui-pattern-panel-bg); --ui-surface-card: var(--ui-pattern-card-bg); --ui-surface-card-hover: var(--ui-pattern-card-hover-bg); --ui-surface-toolbar: var(--ui-pattern-chrome-bg); --ui-surface-empty: var(--ui-pattern-card-bg); --ui-surface-modal: color-mix(in srgb, var(--ui-surface-raised) 94%, transparent); --ui-list-row-bg: var(--ui-pattern-card-bg); --ui-table-bg: var(--ui-pattern-table-bg); --ui-table-head-bg: var(--ui-pattern-card-bg); --ui-tabs-active-bg: var(--ui-pattern-panel-bg); background: var(--ui-surface-muted); } /* Beats every product `body { background }` (cabinet, auth, bootstrap) without !important thanks to the html[...] prefix. */ html[data-ui-pattern]:not([data-ui-pattern="clean"]) body { background: transparent; } html[data-ui-pattern]:not([data-ui-pattern="clean"]) body::before, html[data-ui-pattern]:not([data-ui-pattern="clean"]) body::after { content: ""; position: fixed; inset: 0; z-index: var(--ui-z-underlay); pointer-events: none; } html[data-ui-pattern]:not([data-ui-pattern="clean"]) body::before { background: var(--ui-pattern-wash); opacity: var(--ui-pattern-wash-opacity); } html[data-ui-pattern]:not([data-ui-pattern="clean"]) body::after { background: var(--ui-pattern-paint); -webkit-mask-image: var(--ui-pattern-tile); mask-image: var(--ui-pattern-tile); -webkit-mask-size: 1440px; mask-size: 1440px; -webkit-mask-repeat: repeat; mask-repeat: repeat; opacity: var(--ui-pattern-paint-opacity); } /* --- Cabinet chrome reveal --------------------------------------------- The cabinet wraps every module page in two opaque paints — the .apple-cabinet canvas (surface-muted) and the .module-container solid panel (surface-header-solid) — which would bury the wallpaper. With a pattern active both go transparent and a single frosted veil renders behind the module area on .content::before (chat.rudmal.ru panel look: shared 72% panel surface over blur+saturate). The veil is a PSEUDO-element on purpose: backdrop-filter on the module container itself would make it the containing block for fixed-position descendants (gd/rating dropdowns) and shift them. The veil sits in the underlay slot of the root stacking context — painted after the body wallpaper layers (tree order), below all cabinet content — and its backdrop is exactly the wallpaper it frosts. .content already clips it (overflow: hidden). Sidebar, header and the tabs strip keep their own glass and now sample the real wallpaper. Without backdrop-filter support the 72% panel frost alone keeps text contrast. */ html[data-ui-pattern]:not([data-ui-pattern="clean"]) .apple-cabinet { background: transparent; } html[data-ui-pattern]:not([data-ui-pattern="clean"]) .apple-cabinet .module-container.glass-bg { background: transparent; box-shadow: none; } /* .content is already position:relative + overflow:hidden (cabinet.css), so it clips the veil to the module area next to the sidebar. */ html[data-ui-pattern]:not([data-ui-pattern="clean"]) .apple-cabinet .content::before { content: ""; position: absolute; inset: 0; z-index: var(--ui-z-underlay); pointer-events: none; background: var(--ui-pattern-panel-bg); -webkit-backdrop-filter: blur(var(--ui-backdrop-blur-md)) var(--ui-backdrop-saturate); backdrop-filter: blur(var(--ui-backdrop-blur-md)) var(--ui-backdrop-saturate); } /* Bootstrap cards and lesson content predate .ui-card, so bridge those two canonical legacy surfaces into the same card role. No wildcard class-name matching: semantic warning/success panels retain their color. */ html[data-ui-pattern]:not([data-ui-pattern="clean"]) .card { --bs-card-bg: var(--ui-pattern-card-bg); background-color: var(--ui-pattern-card-bg); } html[data-ui-pattern]:not([data-ui-pattern="clean"]) .content-block-wrapper { background-color: var(--ui-pattern-card-bg); } /* --- Lesson shell reveal ------------------------------------------------ The canonical LP3 shell paints a viewport-sized --bg-light canvas. It used to cover the wallpaper completely even though the surrounding cabinet chrome was transparent. Keep content blocks on the dense 84% reading plate, but reveal the wallpaper in the page gutters and through softly translucent navigation chrome. Guest preview has additional opaque ancestors, so they participate in the same contract. No backdrop-filter is applied to shell elements: lesson controls can host fixed overlays, and a filter would change their containing block. The cabinet's existing .content::before remains the single blur owner. */ html[data-ui-pattern]:not([data-ui-pattern="clean"]) .lesson-editor-wrapper, html[data-ui-pattern]:not([data-ui-pattern="clean"]) .guest-preview-page, html[data-ui-pattern]:not([data-ui-pattern="clean"]) .main-content:has(.guest-preview-page) { background: transparent; } html[data-ui-pattern]:not([data-ui-pattern="clean"]) :is( .lesson-editor-sidebar, .lesson-editor-pages-nav, .lesson-editor-rightbar, .lesson-editor-blockbar ) { background-color: var(--ui-pattern-card-bg); } /* A lesson already has dense content cards, so its surrounding cabinet veil can be lighter than ordinary data-heavy modules. This makes formula strokes and the gradient perceptible without reducing text contrast. */ html[data-ui-pattern]:not([data-ui-pattern="clean"]) .apple-cabinet .content:has(.lesson-editor-wrapper)::before { background: color-mix(in srgb, var(--ui-surface-raised) 66%, transparent); } /* High-contrast modes: backgrounds are backplated anyway; state it. */ @media (forced-colors: active) { html[data-ui-pattern] body::before, html[data-ui-pattern] body::after, html[data-ui-pattern] .apple-cabinet .content::before { content: none; } } } /* --- Purchasable pattern packs ------------------------------------------ A pack changes exactly one thing: --ui-pattern-tile. Wash, paint and opacity remain owned by the selected UI theme and therefore stay identical to "formulas". This hard separation prevents patterns from behaving like a second theme/palette selector. The semantic token layer owns the default math tile; these attribute selectors only replace it. */ html[data-ui-pattern="dusk"] { --ui-pattern-tile: url("../../../images/patterns/doodle-dusk.1ed77bbe68c2.svg"); } html[data-ui-pattern="forest"] { --ui-pattern-tile: url("../../../images/patterns/doodle-forest.e5ff3539c863.svg"); } html[data-ui-pattern="ocean"] { --ui-pattern-tile: url("../../../images/patterns/doodle-ocean.0214f4db1962.svg"); } html[data-ui-pattern="sand"] { --ui-pattern-tile: url("../../../images/patterns/doodle-sand.5f3f8c5b7bc2.svg"); } html[data-ui-pattern="berry"] { --ui-pattern-tile: url("../../../images/patterns/doodle-berry.6ad6dced14f7.svg"); }