/* bauhaus-atmosphere.css — the bauhaus skin's page-level geometric backdrop. Modelled on the default skin's hero image, extended to the whole page: a top-pinned, full-width wallpaper that scrolls with the page, centred horizontally (a wider window exposes more left/right), and — because a SPA can get arbitrarily long while widths are bounded — TILES vertically. The tile is SQUARE (2400×2400) with a tight, OVERLAPPING cluster (Bauhaus posters interlock their shapes so the colours play off each other) sitting near the TOP of the tile so the first motif abuts the header; every shape stays inside the tile so a repeat seams cleanly without clipping. Tinting: a tiling image can't read the per-shape --run-bauhaus-* tokens (it's a baked data-URI), so the motif is built from four stacked child LAYERS — one per colour — each masked with its shapes. Shapes that overlap are placed on different layers so their colours contrast (never merge). Colours span mid → accent → dark → ink for contrast against the light page. The mask lives on each child, NOT the parent (a parent mask would clip its children). Re-themes per brand. Served from public/, linked after tokens.css. data-run-skin on . */ /* Anchor to the document (not the viewport) so it scrolls and grows with the page. */ html[data-run-skin="bauhaus"] body { position: relative; } .skin-backdrop { display: none; position: absolute; /* document-flow, scrolls with the page */ inset: 0; /* top→bottom of = full document height */ z-index: -1; /* above the html canvas, behind the app frame */ pointer-events: none; overflow: hidden; } html[data-run-skin="bauhaus"] .skin-backdrop { display: block; opacity: 0.2; } /* Each tinted layer: full document height, SQUARE 2400px tile, top-pinned, centred, repeating only DOWN the page. */ .bh-layer { position: absolute; inset: 0; -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: 2400px 1500px; mask-size: 2400px 1500px; } /* Layer 1 — disc + diamond (mid brand). */ html[data-run-skin="bauhaus"] .bh-layer--disc { background-color: var(--run-bauhaus-disc, #3b82f6); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Ccircle%20cx='104'%20cy='58'%20r='52'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Ccircle%20cx='104'%20cy='58'%20r='52'/%3E%3C/svg%3E"); } /* Layer 2 — triangle (accent hue). */ html[data-run-skin="bauhaus"] .bh-layer--triangle { background-color: var(--run-bauhaus-triangle, #d64933); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Cpolygon%20points='150,14%20214,112%2086,112'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Cpolygon%20points='150,14%20214,112%2086,112'/%3E%3C/svg%3E"); } /* Layer 3 — tall bar (dark brand — replaces the old too-light tint). */ html[data-run-skin="bauhaus"] .bh-layer--bar { background-color: var(--run-color-brand-600, #1d4ed8); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Crect%20x='80'%20y='22'%20width='50'%20height='106'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Crect%20x='80'%20y='22'%20width='50'%20height='106'/%3E%3C/svg%3E"); } /* Layer 4 — small disc accent (ink — the Bauhaus "black", strongest contrast). */ html[data-run-skin="bauhaus"] .bh-layer--ink { background-color: var(--run-color-text-primary, #12151a); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Ccircle%20cx='168'%20cy='90'%20r='30'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Ccircle%20cx='168'%20cy='90'%20r='30'/%3E%3C/svg%3E"); } /* Layer 5 — diamond, painted LAST so it sits ON TOP of the bar (mid brand, contrasts with the dark bar beneath it). */ html[data-run-skin="bauhaus"] .bh-layer--diamond { background-color: var(--run-bauhaus-disc, #3b82f6); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Crect%20x='72'%20y='112'%20width='28'%20height='28'%20transform='rotate(45%2086%20126)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20160'%3E%3Crect%20x='72'%20y='112'%20width='28'%20height='28'%20transform='rotate(45%2086%20126)'/%3E%3C/svg%3E"); } /* Null the opaque content canvas so the backdrop shows behind the routed content (header/footer keep their surface bands). Keep the page base on the soft surface so the exposed margin reads as the page. */ html[data-run-skin="bauhaus"] { --run-app-shell-background: transparent; background: var(--run-color-surface-subtle); }