/* render-crystal-form.css — STUDENT sample skin: Crystal Form =========================================================================== Ported from the owner's ar-crystal-forms.html. An earlier audit called this one impossible as a skin, because its panels are bespoke SVG silhouettes rather than rectangles. The owner corrected that: "they're vector graphics, so they should be able to stretch." He is right, and the fix is how the silhouette is expressed. A raw SVG shape scaled to a panel would shear — the crystal facets would smear as the panel got wider. So the outline here is a clip-path polygon that mixes UNITS: · vertical stops in % -> the body stretches to any panel height · edge insets in px -> the facet depth stays constant, never smears That is what makes one shape work at every panel size, from a narrow phone card to a full-width dashboard slab, with no per-size art and no SVG markup. A clip-path cannot be given a border, so the lit edge comes from a second clipped layer behind the panel (::before, inset by 1px), and the bloom from filter: drop-shadow(), which follows the clipped silhouette where box-shadow would be clipped away. Pure Render layer — no Primer change (R-0823-01). Direction: R-0823-02. Token law (D-S07-NS-02), 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="crystal-form"] { --theme-bg-canvas: #04060D; --theme-bg-surface: rgba(120, 200, 255, 0.06); --theme-bg-frosted: rgba(120, 200, 255, 0.09); --theme-bg-card: rgba(120, 200, 255, 0.10); --theme-x-bg-sunken: rgba(4, 6, 13, 0.7); --theme-border-inactive: rgba(150, 220, 255, 0.35); --theme-border-active: #8FE0FF; --theme-text-main: #EAF7FF; --theme-x-text-secondary: #BFE2F5; --theme-text-muted: rgba(191, 226, 245, 0.62); --theme-x-text-inverse: #04060D; --theme-x-text-disabled: rgba(191, 226, 245, 0.32); --theme-accent-primary: #8FE0FF; --theme-accent-secondary: #5AA8E0; --theme-x-accent-hover: #C6F0FF; --theme-x-accent-active: #5AA8E0; --theme-x-accent-disabled: rgba(143, 224, 255, 0.25); --theme-x-accent-text: #04060D; --theme-x-focus-ring: #C6F0FF; --theme-state-healthy: #7FE3B0; --theme-state-warning: #F0C674; --theme-state-error: #FF8A8A; --theme-x-state-info: #8FE0FF; --theme-x-elevation-1: 0 0 10px rgba(143, 224, 255, 0.16); --theme-x-elevation-2: 0 18px 50px rgba(0, 0, 0, 0.55); --theme-x-elevation-3: 0 0 44px rgba(143, 224, 255, 0.4); --theme-accent-glow: 0 0 18px rgba(143, 224, 255, 0.6); --theme-accent-glow-secondary: 0 0 26px rgba(90, 168, 224, 0.45); --theme-x-glass-tint: rgba(4, 6, 13, 0.65); --theme-backdrop-blur: 10px; --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; /* The silhouette, defined once. Facet depth is px so it never smears; the stops between them are % so the form stretches. */ --crystal-shape: polygon( 14px 0, calc(100% - 14px) 0, 100% 21%, calc(100% - 12px) 34%, 100% 49%, calc(100% - 12px) 64%, 100% 80%, calc(100% - 14px) 100%, 14px 100%, 0 80%, 12px 64%, 0 49%, 12px 34%, 0 21% ); } :root[data-theme="crystal-form"] body { background-color: var(--theme-bg-canvas); color: var(--theme-text-main); font-family: var(--theme-x-font-family-base); } :root[data-theme="crystal-form"] a { color: var(--theme-accent-primary); } :root[data-theme="crystal-form"] p, :root[data-theme="crystal-form"] li { color: var(--theme-x-text-secondary); } :root[data-theme="crystal-form"] .bu-brick { color: var(--theme-x-text-secondary); } :root[data-theme="crystal-form"] .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="crystal-form"] .bu-soffit { border-top: 1px solid var(--theme-border-inactive); color: var(--theme-text-muted); } :root[data-theme="crystal-form"] .bu-soffit a { color: var(--theme-text-muted); } :root[data-theme="crystal-form"] .bu-soffit a:hover { color: var(--theme-text-main); } :root[data-theme="crystal-form"] .bu-btn { background: var(--theme-accent-primary); border-color: var(--theme-accent-primary); color: var(--theme-x-accent-text); } :root[data-theme="crystal-form"] .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="crystal-form"] .bu-btn:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; } :root[data-theme="crystal-form"] .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="crystal-form"] .bu-btn-secondary { background: transparent; border-color: var(--theme-border-inactive); color: var(--theme-text-main); } :root[data-theme="crystal-form"] .bu-btn-secondary:hover { border-color: var(--theme-border-active); color: var(--theme-accent-primary); } :root[data-theme="crystal-form"] .bu-btn-secondary:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; } :root[data-theme="crystal-form"] .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="crystal-form"] .bu-control { background: var(--theme-bg-card); border-color: var(--theme-border-inactive); color: var(--theme-text-main); } :root[data-theme="crystal-form"] .bu-control:hover { border-color: var(--theme-border-active); } :root[data-theme="crystal-form"] .bu-control:focus-visible { outline: 2px solid var(--theme-x-focus-ring); outline-offset: 2px; } :root[data-theme="crystal-form"] .bu-gate { background: var(--theme-x-glass-tint); } :root[data-theme="crystal-form"] .bu-gauge svg .bg { stroke: var(--theme-border-inactive); } :root[data-theme="crystal-form"] .bu-gauge svg .fg { stroke: var(--theme-accent-primary); } :root[data-theme="crystal-form"] .bu-progress-track { background: var(--theme-x-bg-sunken); } :root[data-theme="crystal-form"] .bu-status-dot { background: var(--theme-text-muted); } :root[data-theme="crystal-form"] .bu-status-dot.is-healthy { background: var(--theme-state-healthy); } :root[data-theme="crystal-form"] .bu-status-dot.is-active { background: var(--theme-state-healthy); } :root[data-theme="crystal-form"] .bu-status-dot.is-warning { background: var(--theme-state-warning); } :root[data-theme="crystal-form"] .bu-status-dot.is-alert { background: var(--theme-state-warning); } :root[data-theme="crystal-form"] .bu-status-dot.is-error { background: var(--theme-state-error); } :root[data-theme="crystal-form"] .bu-status-dot.is-neutral { background: var(--theme-text-muted); } /* --- THE FORM --------------------------------------------------------------- The panel is not a rectangle. It is a faceted crystal whose edges step in and out, and it holds that identity at any size because of the unit mix above. */ :root[data-theme="crystal-form"] .bu-panel { position: relative; clip-path: var(--crystal-shape); border: none; border-radius: 0; /* Dark faceted body. Kept opaque so the crystal reads as solid glass with a lit rim, not as a pale slab. */ background: linear-gradient(150deg, rgba(143, 224, 255, 0.10), rgba(143, 224, 255, 0) 55%), linear-gradient(170deg, #0A1626, #04060D); box-shadow: none; /* THE LIT EDGE — two stacked drop-shadows, no extra layer. Earlier attempts drew the rim on a ::before sitting behind the panel at z-index:-1. That cannot work here: `clip-path` creates a STACKING CONTEXT (so does `filter`), which traps a negative-z-index child inside the panel instead of letting it paint behind the panel's background — so the bright rim layer painted OVER the fill and washed the whole crystal pale blue. Twice, on QA, 2026-08-23. drop-shadow follows the clipped silhouette, so a tight 1px pass draws a crisp rim along every facet and a wider pass adds the bloom. No second element, no stacking-context fight. */ filter: drop-shadow(0 0 1px var(--theme-border-active)) drop-shadow(0 0 3px rgba(143, 224, 255, 0.55)) drop-shadow(0 0 18px rgba(143, 224, 255, 0.28)); color: var(--theme-text-main); padding: var(--structure-gap-lg) calc(var(--structure-gap-lg) + 14px); } :root[data-theme="crystal-form"] h1, :root[data-theme="crystal-form"] h2, :root[data-theme="crystal-form"] h3, :root[data-theme="crystal-form"] h4, :root[data-theme="crystal-form"] h5, :root[data-theme="crystal-form"] h6 { color: var(--theme-text-main); font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; font-size: var(--theme-x-font-size-base); text-shadow: 0 0 14px rgba(143, 224, 255, 0.55); } :root[data-theme="crystal-form"] .bu-badge-tag { background: transparent; border: 1px solid var(--theme-border-inactive); color: var(--theme-accent-primary); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.7rem; } /* =========================================================================== 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="crystal-form"] body { background-color: #04060D; 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%, #123A55 0%, transparent 56%), radial-gradient(80% 60% at 6% 100%, #0A1626 0%, transparent 62%), radial-gradient(70% 55% at 94% 76%, #0A1626 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="crystal-form"] body { animation: none; } } /* The app's own preference, honoured separately from the OS query. */ :root[data-reduced-motion="true"][data-theme="crystal-form"] body { animation: none; }