/* render-system-window.css — STUDENT sample skin: System Window =========================================================================== DESIGN DIRECTION (owner, 2026-08-23): the LitRPG / isekai "game system" look — "somebody gets reincarnated with a game system or teleported to a new world with a game system that monitors their level up. This is basically the closest to real life we're gonna get to that, because I want that AR ideology over it." That genre has real conventions, and this skin leans on them on purpose: · the panel is an OVERLAY on the world, never a document element · frames are drawn, partial and bracketed — not closed rectangles · system voice is small, wide-tracked, uppercase · nothing is fully opaque Source: six-terminals.html §01 "anime minimalist" — the classic isekai status/notice panel. Pure Render layer — no Primer change (owner ruling R-0823-01: the skeleton is bones only; construction belongs to the skin). Token law (D-S07-NS-02): --theme-* only. Complete assignment (D-TPL-TOK-02). Selector coverage matches render-fight-night.css 1:1 (D-S07-SKIN-02). STATUS: sample, pending owner approval. =========================================================================== */ :root[data-theme="system-window"] { --theme-bg-canvas: #05080E; --theme-bg-surface: rgba(226, 242, 255, 0.05); --theme-bg-frosted: rgba(226, 242, 255, 0.10); --theme-bg-card: rgba(226, 242, 255, 0.10); --theme-x-bg-sunken: rgba(7, 11, 18, 0.6); --theme-border-inactive: rgba(226, 242, 255, 0.68); --theme-border-active: #E6F2FF; --theme-text-main: #FFFFFF; --theme-x-text-secondary: #DCEBFA; --theme-text-muted: rgba(226, 242, 255, 0.62); --theme-x-text-inverse: #070B12; --theme-x-text-disabled: rgba(226, 242, 255, 0.34); --theme-accent-primary: #57D6B0; --theme-accent-secondary: #8FE3CC; --theme-x-accent-hover: #8FE3CC; --theme-x-accent-active: #3FBF9A; --theme-x-accent-disabled: rgba(87, 214, 176, 0.25); --theme-x-accent-text: #070B12; --theme-x-focus-ring: #8FE3CC; --theme-state-healthy: #57D6B0; --theme-state-warning: #F0C674; --theme-state-error: #F08A8A; --theme-x-state-info: #9BC7F0; --theme-x-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3); --theme-x-elevation-2: 0 18px 44px rgba(0, 0, 0, 0.45); --theme-x-elevation-3: 0 0 30px rgba(226, 242, 255, 0.25); --theme-accent-glow: 0 0 16px rgba(87, 214, 176, 0.5); --theme-accent-glow-secondary: 0 0 20px rgba(226, 242, 255, 0.3); --theme-x-glass-tint: rgba(7, 11, 18, 0.55); --theme-backdrop-blur: 16px; --theme-x-font-family-base: "Jost", "Inter", system-ui, sans-serif; --theme-x-font-size-sm: 0.875rem; --theme-x-font-size-base: 1rem; --theme-x-font-size-lg: 1.25rem; --theme-x-font-size-xl: 1.75rem; --theme-x-line-height-base: 1.5; --theme-x-space-unit: 0.5rem; } :root[data-theme="system-window"] body { background-color: var(--theme-bg-canvas); color: var(--theme-text-main); font-family: var(--theme-x-font-family-base); } :root[data-theme="system-window"] a { color: var(--theme-accent-primary); } :root[data-theme="system-window"] p, :root[data-theme="system-window"] li { color: var(--theme-x-text-secondary); } :root[data-theme="system-window"] .bu-brick { color: var(--theme-x-text-secondary); } :root[data-theme="system-window"] .bu-rail { background-color: var(--theme-x-bg-sunken); border-bottom: 1px solid var(--theme-border-inactive); color: var(--theme-text-main); } :root[data-theme="system-window"] .bu-soffit { border-top: 1px solid var(--theme-border-inactive); color: var(--theme-text-muted); } :root[data-theme="system-window"] .bu-soffit a { color: var(--theme-text-muted); } :root[data-theme="system-window"] .bu-soffit a:hover { color: var(--theme-text-main); } :root[data-theme="system-window"] .bu-btn { background: var(--theme-accent-primary); border-color: var(--theme-accent-primary); color: var(--theme-x-accent-text); } :root[data-theme="system-window"] .bu-btn:hover { background: var(--theme-x-accent-hover); border-color: var(--theme-x-accent-hover); box-shadow: var(--theme-accent-glow); } :root[data-theme="system-window"] .bu-btn:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; } :root[data-theme="system-window"] .bu-btn:disabled { background: var(--theme-x-accent-disabled); border-color: var(--theme-x-accent-disabled); color: var(--theme-x-text-disabled); } :root[data-theme="system-window"] .bu-btn-secondary { background: transparent; border-color: var(--theme-border-inactive); color: var(--theme-text-main); } :root[data-theme="system-window"] .bu-btn-secondary:hover { border-color: var(--theme-border-active); color: var(--theme-accent-primary); } :root[data-theme="system-window"] .bu-btn-secondary:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; } :root[data-theme="system-window"] .bu-btn-secondary.is-active { border-color: var(--theme-border-active); background: var(--theme-accent-primary); color: var(--theme-x-accent-text); } :root[data-theme="system-window"] .bu-control { background: var(--theme-bg-card); border-color: var(--theme-border-inactive); color: var(--theme-text-main); } :root[data-theme="system-window"] .bu-control:hover { border-color: var(--theme-border-active); } :root[data-theme="system-window"] .bu-control:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; } :root[data-theme="system-window"] .bu-gate { background: var(--theme-x-glass-tint); } :root[data-theme="system-window"] .bu-gauge svg .bg { stroke: var(--theme-border-inactive); } :root[data-theme="system-window"] .bu-gauge svg .fg { stroke: var(--theme-accent-primary); } :root[data-theme="system-window"] .bu-progress-track { background: var(--theme-x-bg-sunken); } :root[data-theme="system-window"] .bu-status-dot { background: var(--theme-text-muted); } :root[data-theme="system-window"] .bu-status-dot.is-healthy { background: var(--theme-state-healthy); } :root[data-theme="system-window"] .bu-status-dot.is-active { background: var(--theme-state-healthy); } :root[data-theme="system-window"] .bu-status-dot.is-warning { background: var(--theme-state-warning); } :root[data-theme="system-window"] .bu-status-dot.is-alert { background: var(--theme-state-warning); } :root[data-theme="system-window"] .bu-status-dot.is-error { background: var(--theme-state-error); } :root[data-theme="system-window"] .bu-status-dot.is-neutral { background: var(--theme-text-muted); } /* --- THE SYSTEM WINDOW ------------------------------------------------------- The panel every isekai protagonist sees: a thin, cool, translucent pane that is clearly floating in front of the world rather than printed on it. The details that sell it are restraint, not decoration — a hairline border at partial opacity, real blur behind, and a single rule under the header. No glow, no bevel, no grain. Anything heavier stops reading as "projected". */ :root[data-theme="system-window"] .bu-panel { position: relative; background: var(--theme-bg-surface); -webkit-backdrop-filter: blur(var(--theme-backdrop-blur)); backdrop-filter: blur(var(--theme-backdrop-blur)); /* The outline is the whole design. At 0.40 alpha on a dark canvas it read as a grey rectangle rather than a projected pane — the owner's screenshot of the reference shows a clearly BRIGHT frame. Lifted to 0.68 and given a soft outer bloom plus an inner lip so the edge catches light on both sides, which is what makes it look like glass hanging in the air rather than a div with a border. */ border: 1px solid var(--theme-border-inactive); border-radius: 2px; box-shadow: 0 0 0 1px rgba(226, 242, 255, 0.08), 0 0 22px rgba(155, 199, 240, 0.18), inset 0 0 0 1px rgba(226, 242, 255, 0.10), var(--theme-x-elevation-2); color: var(--theme-text-main); } /* Header rule: the reference's centered NOTICE bar. Kept left-aligned here because these panels carry rosters and data rather than one line of notice text — centring real content would read as broken, not as styled. The letter-spacing and the divider are what actually carry the look. */ :root[data-theme="system-window"] h1, :root[data-theme="system-window"] h2, :root[data-theme="system-window"] h3, :root[data-theme="system-window"] h4, :root[data-theme="system-window"] h5, :root[data-theme="system-window"] h6 { color: var(--theme-text-main); font-weight: 400; font-size: var(--theme-x-font-size-base); letter-spacing: 0.34em; text-transform: uppercase; padding-bottom: 0.75rem; margin-bottom: 1rem; /* Reference draws the header as a full-width bar with a rule beneath it, not a heading with an underline — the divider runs edge to edge. */ border-bottom: 1px solid rgba(226, 242, 255, 0.45); color: #EAF4FF; text-shadow: 0 0 10px rgba(226, 242, 255, 0.35); } /* Body copy is deliberately light — 300 weight, generous leading. */ :root[data-theme="system-window"] .bu-panel p { font-weight: 300; line-height: 1.7; } :root[data-theme="system-window"] .bu-badge-tag { background: transparent; border: 1px solid var(--theme-border-inactive); color: var(--theme-text-secondary, var(--theme-x-text-secondary)); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.7rem; font-weight: 400; } /* =========================================================================== DEPTH — the parallaxing atmosphere behind the panels =========================================================================== Owner 2026-08-23: the skins read flat because the panels had nothing to float in front of. The reference (panel-theme-kit.html) always had this: a `.sky` of stacked radial pools, drifting motes, and a mesh behind the panels. The parallax is pure CSS. `background-attachment: fixed` anchors a layer to the viewport so it does NOT move on scroll, while a `scroll` layer travels with the content. Stack both and they separate as the page moves — differential motion is parallax. No JS, no scroll listener, nothing to jank. Far to near: colour pools (fixed) -> fine motes (fixed) -> coarse motes (scroll) -> vignette (fixed). The coarse layer moving against the fixed ones is what the eye actually reads as depth. Mobile note: several mobile browsers ignore `background-attachment: fixed` and will render this static. That degrades to a still backdrop — no parallax, nothing broken — which is the right floor for a scroll effect. =========================================================================== */ :root[data-theme="system-window"] body { background-color: #05080E; background-image: /* 4. vignette — burns the edges so the centre reads deeper */ radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(0,0,0, 0.55) 100%), /* 3. NEAR motes — travel with the content */ url("data:image/svg+xml;utf8,"), /* 2. FAR motes — pinned to the viewport */ url("data:image/svg+xml;utf8,"), /* 1. atmosphere: pools of light at infinity */ radial-gradient(120% 80% at 50% -12%, #12304F 0%, transparent 56%), radial-gradient(80% 60% at 6% 100%, #0A1524 0%, transparent 62%), radial-gradient(70% 55% at 94% 76%, #0A1524 0%, transparent 64%); background-attachment: fixed, scroll, fixed, fixed, fixed, fixed; background-size: cover, 340px 340px, 190px 190px, cover, cover, cover; background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat; animation: bu-atmosphere-drift 90s linear infinite; } /* Only the near mote layer drifts; everything else is anchored. Animating just one layer's position keeps the parallax reading as depth rather than as the whole backdrop sliding. */ @keyframes bu-atmosphere-drift { to { background-position: center, 340px 340px, 0 0, center, center, center; } } @media (prefers-reduced-motion: reduce) { :root[data-theme="system-window"] body { animation: none; } } /* The app's own preference, honoured separately from the OS query. */ :root[data-reduced-motion="true"][data-theme="system-window"] body { animation: none; }