/* SYNC-FROM-LOOM:sha384-hobVRVipkJ+5cp4SM7y3nyPlp0MkvZ2BrriZklE+z9X6cRW/nBvDWmTLhfPjHWXT — auto-synced by forge render at build */ /* =================================================================== * loom-skin.css — semantic component layer for the Loom design system * =================================================================== * * ARCHITECTURE * ------------ * This file is organized into named CSS @layer blocks. The cascade * order is fixed once at the top — later layers always win over * earlier ones, regardless of source order or specificity. This * gives plugin authors a predictable extension point and removes * specificity-war footguns. * * Cascade (lowest precedence first): * * reset universal box-sizing + zero defaults * tokens surfaces design tokens as CSS custom properties on :root * (also re-exported as component-scoped --comp-* tokens * via inheritance) * primitives layout primitives (.loom-page, .loom-stack, .loom-row) * components composite components (.loom-card-battle, .loom-leader, * .loom-hero, .loom-nav, etc.) * plugins OPEN — downstream apps drop overrides here. Empty * by default. Overrides land via an unwrapped block * in a separate stylesheet imported AFTER this one. * utilities single-purpose helpers (.loom-sr-only) — wins over * components by design (utilities should be the final * override knob) * * COMPOSITION MODEL ("mixins / traits / inheritance" in CSS) * ---------------------------------------------------------- * 1. CSS custom properties as MIXINS — any component declares its own * --comp-* tokens that downstream rules can override. E.g.: * .loom-card { --comp-card-pad: var(--loom-space-5); padding: var(--comp-card-pad); } * .loom-panel.is-roomy { --comp-card-pad: var(--loom-space-8); } * * 2. Attribute-driven VARIANTS — components dispatch on * `data-variant`, `data-tone`, `data-size`, `aria-current`, * `aria-pressed` etc. instead of stacked class names. The * attribute is the schema; the rendered HTML is unambiguous. * * 3. INHERITANCE via custom-property cascade — parent components * can set --comp-* tokens that children inherit automatically * (CSS custom properties inherit by default). * * 4. PLUGIN extension — the @layer plugins block is intentionally * empty here. A site that wants a different brand voice writes * its own unwrapped block (e.g. ".loom-brand { ... }") in a * separate file imported after this one. No specificity war. * * STRICT INVARIANTS (enforced by `loom lint`) * ------------------------------------------- * - No raw color literals (hex / rgb / hsl) outside this file's * tokens layer. Every paint reads through var(--loom-color-*) or * a component-scoped --comp-* alias. * - No raw px / em values for spacing, type, or radii. Every * measurement reads through var(--loom-space-*), var(--loom-font-*), * var(--loom-radius-*). * - All margins / padding / borders compose from the spacing * token scale. * - Every text element gets `overflow-wrap: anywhere` from the * reset layer. Every container gets `min-width: 0` so flex/grid * children don't blow out. * - All animations honor `prefers-reduced-motion`. * - Mobile-first: breakpoints scale up only. * * MOBILE-FIRST + STRICT OVERFLOW * ------------------------------ * Default rules target a 320 px viewport. `@media (min-width: …)` * upgrades layouts as space grows. The page never produces * horizontal scroll: `html { overflow-x: clip; }` and every * potentially-long string has `text-overflow: ellipsis` or * `overflow-wrap: anywhere`. * * WHY THIS LAYERING (vs the old flat sheet) * ----------------------------------------- * Plain CSS resolves rules by source-order + specificity. With * many contributors + plugin extensions, both become unreliable * fast — a deep selector accidentally wins; a later import * silently shadows. `@layer` makes the precedence ladder explicit * and reviewable. A reviewer reads the layer order at the top and * knows the truth without grep'ing the whole sheet. * =================================================================== */ /* @layer cascade dropped for older-browser compat */ /* ============================================================ * * @layer reset * * ============================================================ */ /* unwrapped @layer */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; min-width: 0; } /* Diagnostic: the "CSS NOT LOADING" yellow banner in pages is * styled with `.loom-css-loaded`. If skin.css applies, the banner * disappears. If owner sees the banner, the bug is "browser * didn't apply CSS" — verifiable from a single screenshot. */ .loom-css-loaded { display: none !important; } /* WCAG 2.5.5 + iOS HIG floor for every interactive element on * mobile-friendly layouts. Pages can opt out per-element via * data-tap="compact" for hover-driven desktop UIs (e.g. dense * data tables). Anything that wants to be smaller MUST justify * itself with that attribute. */ @media (pointer: coarse), (max-width: 1024px) { button:not([data-tap="compact"]), a:not([data-tap="compact"]), input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([data-tap="compact"]), select:not([data-tap="compact"]), textarea:not([data-tap="compact"]), [role="button"]:not([data-tap="compact"]), [role="link"]:not([data-tap="compact"]), summary:not([data-tap="compact"]) { min-height: var(--loom-tap-min); min-width: var(--loom-tap-min); } /* Inputs and selects also need width — typing inside a 0-pad * box makes content scroll mid-character. */ input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([data-tap="compact"]), select:not([data-tap="compact"]), textarea:not([data-tap="compact"]) { min-width: var(--loom-tap-min); padding: var(--loom-space-2) var(--loom-space-3); } } html, body { overflow-x: clip; max-width: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html { /* Set bg on html so body's gradient overlays cleanly + the * canvas behind any centered .loom-page max-width still * reads as the themed surface (was rendering white in * crawler screenshots). */ background: var(--loom-color-bg-canvas); color: var(--loom-color-ink); color-scheme: light dark; min-height: 100%; } /* Honor OS preference when no explicit data-theme is set. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; } } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--loom-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif); font-size: var(--loom-font-base); line-height: var(--loom-leading-base, 1.5); color: var(--loom-color-ink); background: /* Subtle ambient gradient — gives flat dark a sense of light source. */ radial-gradient(1200px 600px at 80% -10%, hsl(218 83% 65% / 0.08), transparent 60%), radial-gradient(900px 500px at -10% 20%, hsl(272 84% 65% / 0.06), transparent 60%), var(--loom-color-bg-canvas); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11", "cv02"; } img, video, svg, canvas, picture { max-width: 100%; height: auto; display: block; } /* Universal long-content protections. Every text element wraps. */ p, h1, h2, h3, h4, h5, h6, span, a, button, li, td, th, label, blockquote, dt, dd, figcaption { overflow-wrap: anywhere; hyphens: auto; } pre, code, kbd, samp { overflow-x: auto; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } /* Keyboard focus ring. `:focus-visible` is the modern UA-mediated * selector (only fires for keyboard / programmatic-after-keyboard * focus); `:focus` is the pre-spec compatibility selector that also * fires on programmatic focus calls (which is what crawler runtime * detectors use to verify visible focus indicators). Listing both * means real users on real browsers get the ring on keyboard nav * AND the audit infrastructure detects it during synthetic focus * sweeps. The mouse-click side-effect (briefly showing the ring on * button click) is the standard trade-off for guaranteeing * visibility under all focus-trigger paths. */ :focus, :focus-visible { outline: var(--loom-stroke-strong) solid var(--loom-color-primary); outline-offset: var(--loom-stroke-thin); border-radius: var(--loom-radius-sm); } /* For mouse clicks, suppress the ring when the browser confirms * the focus was NOT keyboard-driven. This restores the * keyboard-only-ring UX when :focus-visible is supported. */ :focus:not(:focus-visible) { outline: none; } /* T70c (closes #659): rich focus + hover indicators. * CSS-only patterns showing what's focused/hovered/active. * All prefers-reduced-motion safe (motion clamps to 0). * * Opt-in via data-loom-rich-focus="lift|glow|magnetic": * * lift: subtle Y-translate + shadow gain on hover/focus. * glow: halo of accent color expands on focus-visible. * magnetic: pointer-pulled translate via JS-set --mouse-x/-y * custom props (works as plain hover w/o JS). * * Pure-CSS by default; magnetic variant gracefully degrades if * no JS is provided to set the mouse-position custom props. */ [data-loom-rich-focus] { transition: transform var(--loom-transition-fast, 120ms) var(--loom-ease-out, ease), box-shadow var(--loom-transition-fast, 120ms) var(--loom-ease-out, ease), filter var(--loom-transition-fast, 120ms) var(--loom-ease-out, ease); } [data-loom-rich-focus="lift"]:hover, [data-loom-rich-focus="lift"]:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in oklab, var(--loom-color-ink) 10%, transparent), 0 2px 6px color-mix(in oklab, var(--loom-color-ink) 6%, transparent); } [data-loom-rich-focus="glow"]:focus-visible { box-shadow: 0 0 0 4px color-mix(in oklab, var(--loom-color-primary) 18%, transparent), 0 0 0 1px var(--loom-color-primary); outline: none; /* the glow replaces the ring */ } [data-loom-rich-focus="glow"]:hover { filter: brightness(1.05); } [data-loom-rich-focus="magnetic"] { /* JS sets --mouse-x / --mouse-y in 0..1 range from element- * relative pointer position. Without JS the var(...) falls * back to 0 (no offset). */ transform: translate( calc((var(--mouse-x, 0.5) - 0.5) * 4px), calc((var(--mouse-y, 0.5) - 0.5) * 4px) ); } [data-loom-rich-focus="magnetic"]:hover { filter: brightness(1.04); } /* Selected/active marker — for tab triggers, picker chips, * active nav. Distinct from :focus so it can co-exist with * the keyboard ring. */ [data-loom-selected="true"] { background: color-mix(in oklab, var(--loom-color-primary) 12%, var(--loom-color-surface)); color: var(--loom-color-primary); box-shadow: inset 0 -2px 0 var(--loom-color-primary); } /* Cursor-tracking spotlight (opt-in via data-loom-spotlight). * JS sets --mouse-x / --mouse-y in CSS pixels; no-JS falls back * to no spotlight. */ [data-loom-spotlight] { position: relative; isolation: isolate; } [data-loom-spotlight]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 280px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), color-mix(in oklab, var(--loom-color-primary) 16%, transparent) 0%, transparent 70% ); opacity: 0; transition: opacity var(--loom-transition-fast, 120ms) var(--loom-ease-out, ease); z-index: -1; } [data-loom-spotlight]:hover::before { opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-loom-rich-focus]:hover, [data-loom-rich-focus]:focus-visible, [data-loom-rich-focus="magnetic"] { transform: none; transition: none; } [data-loom-spotlight]::before { transition: none; } } /* Hide content from sighted users without removing from a11y tree. */ [hidden] { display: none !important; } /* T70b (closes #658): scroll-snap carousels. * Composable, no JS required (touch + trackpad scroll natively). * Opt-in via .loom-carousel wrapper + .loom-carousel__track * inner scroller + .loom-carousel__slide children. * * Direction: * default horizontal * data-axis="y" vertical (rare but works for sidebar mosaics) * * Snap behavior: * default snap to start of each slide (mandatory) * data-snap="proximity" loose snap (most-discoverable, doesn't * fight power-users scrolling fast) * * Slide sizing: * default slide width = 90% of container * data-size="card" 320px slides (compact) * data-size="hero" 100% slides (one-at-a-time) * data-size="auto" intrinsic content width * * Pagination dots: separate component .loom-carousel__dots * with