/* Generated by scripts/css-bundle.mjs — do not edit by hand. */ /* /public/css/routes/surfaces/about.css */ @layer routes { /* ========================================================================== about-surface.css -------------------------------------------------------------------------- Purpose - Route-scoped identity for /about - Shift the page toward practical clarity, durable structure, and tangible conversion of attention into tools, surfaces, services, and hospitality - Reduce ornamental drift and support a more direct, less flowery tone - Keep compatibility with shared shell/components/systems layers Design stance - About should feel grounded, useful, and directional - The page should read like an operating memo with enough warmth to feel human, but not vague - Priority should go to structure, decision-making, and next actions - Symbolic/ecological material should still be present, but organized as supporting context rather than the main voice ========================================================================== */ [data-spw-surface="about"] { --about-bg: hsl(42 34% 95%); --about-bg-deep: hsl(38 24% 89%); --about-bg-field: hsl(44 28% 97%); --about-surface: rgba(255, 252, 248, 0.86); --about-surface-strong: rgba(255, 253, 250, 0.95); --about-surface-soft: rgba(247, 242, 235, 0.74); --about-surface-matte: rgba(248, 245, 239, 0.96); --about-ink: rgba(24, 22, 20, 0.96); --about-ink-soft: rgba(24, 22, 20, 0.72); --about-ink-mid: rgba(24, 22, 20, 0.56); --about-ink-faint: rgba(24, 22, 20, 0.34); --about-line: rgba(56, 43, 35, 0.14); --about-line-strong: rgba(98, 76, 64, 0.24); --about-line-accent: rgba(24, 123, 135, 0.20); --about-accent: var(--semantic-accent, hsl(186 34% 34%)); --about-accent-2: hsl(28 46% 40%); --about-accent-3: hsl(334 22% 40%); --about-accent-soft: hsla(186, 34%, 34%, 0.08); --about-accent-2-soft: hsla(28, 46%, 40%, 0.08); --about-accent-3-soft: hsla(334, 22%, 40%, 0.06); --measure-reading: 72ch; --measure-panel: 58ch; --about-frame-shadow: 0 1px 3px rgba(39, 24, 15, 0.04), 0 10px 22px rgba(39, 24, 15, 0.05); --about-frame-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--about-accent) 10%, transparent), 0 14px 28px rgba(39, 24, 15, 0.08); --about-panel-radius: 12px; --about-panel-radius-loose: 16px; --grain-panel-fill-local: color-mix(in srgb, var(--about-surface-strong) 96%, #f3eadf 4%); --grain-panel-shadow-local: 0 2px 4px rgba(49, 34, 24, 0.04), 0 14px 28px rgba(49, 34, 24, 0.06); --grain-panel-glow-local: 0 0 0 1px rgba(98, 76, 64, 0.08), 0 0 18px rgba(98, 76, 64, 0.04); --active-op-color: var(--about-accent); --active-op-border: color-mix(in srgb, var(--about-accent) 30%, transparent); --active-op-bg-soft: color-mix(in srgb, var(--about-accent) 8%, transparent); --objective-brace-color: color-mix(in srgb, var(--about-accent) 84%, black 6%); --subjective-brace-color: color-mix(in srgb, var(--about-accent-3) 82%, black 6%); --objective-brace-wash: color-mix(in srgb, var(--about-accent) 10%, transparent); --subjective-brace-wash: color-mix(in srgb, var(--about-accent-3) 8%, transparent); --spw-prompt-block-bg: var(--about-surface-strong); --spw-prompt-block-line: color-mix(in srgb, var(--about-accent) 22%, var(--about-line)); --spw-prompt-block-ink: var(--about-ink); color: var(--about-ink); } html[data-spw-color-mode="dark"] [data-spw-surface="about"] { --about-bg: hsl(18 10% 11%); --about-bg-deep: hsl(18 12% 8%); --about-bg-field: hsl(24 10% 13%); --about-surface: rgba(255, 248, 239, 0.08); --about-surface-strong: rgba(255, 248, 239, 0.12); --about-surface-soft: rgba(255, 248, 239, 0.06); --about-surface-matte: rgba(255, 248, 239, 0.08); --about-ink: hsl(32 22% 91%); --about-ink-soft: hsl(30 12% 72%); --about-ink-mid: hsla(30, 12%, 72%, 0.72); --about-ink-faint: hsla(30, 12%, 72%, 0.40); --about-line: rgba(255, 240, 225, 0.12); --about-line-strong: rgba(209, 164, 134, 0.22); --about-line-accent: rgba(132, 204, 212, 0.18); --about-accent: var(--semantic-accent, hsl(184 34% 66%)); --about-accent-2: hsl(32 54% 68%); --about-accent-3: hsl(336 28% 68%); --about-accent-soft: color-mix(in srgb, var(--about-accent) 11%, transparent); --about-accent-2-soft: color-mix(in srgb, var(--about-accent-2) 11%, transparent); --about-accent-3-soft: color-mix(in srgb, var(--about-accent-3) 9%, transparent); --active-op-color: var(--about-accent); --active-op-border: color-mix(in srgb, var(--about-accent) 32%, transparent); --active-op-bg-soft: color-mix(in srgb, var(--about-accent) 10%, transparent); --grain-panel-fill-local: color-mix(in srgb, rgba(255,255,255,0.10) 88%, transparent); --grain-panel-shadow-local: 0 2px 8px rgba(0, 0, 0, 0.22), 0 18px 36px rgba(0, 0, 0, 0.28); --grain-panel-glow-local: 0 0 0 1px rgba(209, 164, 134, 0.10), 0 0 24px rgba(209, 164, 134, 0.08); } @media (prefers-color-scheme: dark) { html[data-spw-color-mode="auto"] [data-spw-surface="about"] { --about-bg: hsl(18 10% 11%); --about-bg-deep: hsl(18 12% 8%); --about-bg-field: hsl(24 10% 13%); --about-surface: rgba(255, 248, 239, 0.08); --about-surface-strong: rgba(255, 248, 239, 0.12); --about-surface-soft: rgba(255, 248, 239, 0.06); --about-surface-matte: rgba(255, 248, 239, 0.08); --about-ink: hsl(32 22% 91%); --about-ink-soft: hsl(30 12% 72%); --about-ink-mid: hsla(30, 12%, 72%, 0.72); --about-ink-faint: hsla(30, 12%, 72%, 0.40); --about-line: rgba(255, 240, 225, 0.12); --about-line-strong: rgba(209, 164, 134, 0.22); --about-line-accent: rgba(132, 204, 212, 0.18); --about-accent: var(--semantic-accent, hsl(184 34% 66%)); --about-accent-2: hsl(32 54% 68%); --about-accent-3: hsl(336 28% 68%); --about-accent-soft: color-mix(in srgb, var(--about-accent) 11%, transparent); --about-accent-2-soft: color-mix(in srgb, var(--about-accent-2) 11%, transparent); --about-accent-3-soft: color-mix(in srgb, var(--about-accent-3) 9%, transparent); } } /* ========================================================================== 1. Route background and shell bias ========================================================================== */ body[data-spw-surface="about"] { --grain-body-opacity: calc(var(--grain-opacity, 0.028) * 0.46); --grain-atmosphere-bias: -0.035; --grain-resonance-bias: 0; background: radial-gradient(circle at top center, color-mix(in srgb, var(--about-accent-2) 4%, transparent), transparent 24%), linear-gradient(180deg, var(--about-bg-field), var(--about-bg)); color: var(--about-ink); } [data-spw-surface="about"] main { gap: clamp(1.05rem, 2.3vw, 1.55rem); /* Essay-weighted route: newspaper frame cap; spent width still mins with layout tuner. Gutter lives in padding only. */ --spw-shell-frame-cap: var(--page-width-newspaper); margin-block-start: clamp(0.8rem, 1.5vw, 1.25rem); } [data-spw-surface="about"] main > section + section, [data-spw-surface="about"] main > nav + section, [data-spw-surface="about"] main > section + nav { margin-top: clamp(0.1rem, 0.5vw, 0.35rem); } /* The shell owns the outer gutter. At broadsheet width, about owns the internal topology: a wide identity band, a register matrix, then two parallel operating columns. This keeps the memo-like route distinct while allowing the hero's existing wide composition to open honestly. */ @media (min-width: 61.25rem) { [data-spw-surface="about"] main { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; column-gap: clamp(1rem, 2vw, 1.6rem); row-gap: clamp(1.25rem, 2.4vw, 1.8rem); } [data-spw-surface="about"] main > [data-spw-cluster] { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(1rem, 2vw, 1.6rem); min-inline-size: 0; margin-block-start: 0; } [data-spw-surface="about"] main > [data-spw-cluster] + [data-spw-cluster] { padding-block-start: clamp(0.9rem, 1.8vw, 1.3rem); border-block-start: 1px solid color-mix(in srgb, var(--about-line-accent) 72%, var(--about-line)); } [data-spw-surface="about"] [data-spw-cluster] > .spw-frame { min-inline-size: 0; inline-size: 100%; max-inline-size: none; margin-block-start: 0; } [data-spw-surface="about"] [data-spw-cluster="kernel-identity"] > #about-frame { grid-column: 1 / -1; } [data-spw-surface="about"] main > [data-spw-cluster="systems-architecture"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-spw-surface="about"] main > [data-spw-cluster="creative-domains"] { grid-column: 1 / 7; grid-template-columns: minmax(0, 1fr); } [data-spw-surface="about"] main > [data-spw-cluster="kernel-mechanics"] { grid-column: 7 / -1; grid-template-columns: minmax(0, 1fr); } /* At the newspaper measure the hero topline is tighter; let the spec strip claim enough row to keep pills at two-per-line instead of a tall tower. */ [data-spw-surface="about"] .frame-topline > .spec-strip { flex: 2 1 26rem; } } /* ========================================================================== 2. Generic frame tuning ========================================================================== */ [data-spw-surface="about"] :is(.spw-frame, .spw-frame) { border-color: color-mix(in srgb, var(--about-line) 96%, transparent); border-radius: var(--about-panel-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--about-accent-soft) 56%, transparent), transparent 18%), var(--about-surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), var(--about-frame-shadow); color: var(--about-ink); } [data-spw-surface="about"] :is(.spw-frame, .spw-frame):is(:hover, :focus-within) { border-color: color-mix(in srgb, var(--about-accent) 18%, var(--about-line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), var(--about-frame-shadow-hover); } [data-spw-surface="about"] .frame-sigil { color: color-mix(in srgb, var(--about-ink-soft) 90%, var(--about-accent)); } [data-spw-surface="about"] [data-spw-textual-role="note"], [data-spw-surface="about"] .inline-note { color: var(--about-ink-soft); } [data-spw-surface="about"] p, [data-spw-surface="about"] li { color: var(--about-ink); } /* ========================================================================== 3. Hero ========================================================================== */ [data-spw-surface="about"] #about-frame { position: relative; overflow: hidden; padding: clamp(1.05rem, 2vw, 1.6rem); border-radius: var(--about-panel-radius-loose); background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--about-accent-2) 6%, transparent), transparent 28%), radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--about-accent-3) 4%, transparent), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--about-accent-soft) 54%, transparent), transparent 18%), var(--about-surface-strong); } [data-spw-surface="about"] #about-frame > * { position: relative; z-index: 1; } [data-spw-surface="about"] #about-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 90deg, color-mix(in srgb, var(--about-accent) 7%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--about-accent-3) 6%, transparent) ); opacity: 0.9; } [data-spw-surface="about"] #about-title { max-width: 14ch; color: color-mix(in srgb, var(--about-ink) 90%, var(--about-accent-2)); font-family: var(--craft-display, var(--site-display-font)); font-size: clamp(2.35rem, 4.6vw, 3.8rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; } [data-spw-surface="about"] #about-orientation-note[data-spw-textual-role="lede"], [data-spw-surface="about"] #about-frame [data-spw-textual-role="lede"] { max-width: 60ch; color: color-mix(in srgb, var(--about-ink-soft) 92%, var(--about-accent)); font-size: clamp(1.02rem, 1.1rem + 0.2vw, 1.14rem); line-height: 1.72; } [data-spw-surface="about"] #about-frame strong { color: color-mix(in srgb, var(--about-ink) 92%, var(--about-accent-2)); } [data-spw-surface="about"] .about-story-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: 0.65rem; margin-block: 1.15rem 1.25rem; } [data-spw-surface="about"] .about-story-map__item { display: grid; align-content: start; gap: 0.36rem; min-inline-size: 0; padding: 0.75rem; border: 1px solid color-mix(in srgb, var(--about-line) 88%, transparent); border-radius: 8px; background: linear-gradient(150deg, color-mix(in srgb, var(--about-accent-soft) 74%, transparent), transparent 58%), color-mix(in srgb, var(--about-surface-strong) 96%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 26%, transparent); transition: border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease), box-shadow var(--duration-fast, 140ms) var(--ease-mechanical, ease), transform var(--duration-fast, 140ms) var(--ease-mechanical, ease); } [data-spw-surface="about"] .about-story-map__item:is(:hover, :focus-within) { border-color: color-mix(in srgb, var(--about-accent) 22%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 8px 18px color-mix(in srgb, var(--about-accent) 8%, rgba(34, 22, 14, 0.06)); transform: translateY(-1px); } [data-spw-surface="about"] .about-story-map__cue { width: fit-content; padding: 0.12rem 0.42rem; border-radius: 999px; background: color-mix(in srgb, var(--about-accent) 9%, transparent); color: color-mix(in srgb, var(--about-accent) 84%, var(--about-ink)); font-family: var(--grammar-mono-font, var(--site-mono-font, monospace)); font-size: 0.68rem; font-weight: 750; letter-spacing: 0; } [data-spw-surface="about"] .about-story-map__item strong { color: color-mix(in srgb, var(--about-ink) 92%, var(--about-accent-2)); font-size: 0.95rem; } [data-spw-surface="about"] .about-story-map__item p { margin: 0; color: var(--about-ink-soft); font-size: 0.9rem; line-height: 1.5; } @supports (container-type: inline-size) { @container (min-width: 860px) { [data-spw-surface="about"] #about-frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.25rem); row-gap: clamp(0.75rem, 1.4vw, 1rem); align-items: start; } [data-spw-surface="about"] #about-frame > .frame-topline { grid-column: 1 / -1; margin-bottom: clamp(0.35rem, 1vw, 0.7rem); } [data-spw-surface="about"] #about-frame > .frame-body { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(18rem, 0.78fr) minmax(26rem, 1.22fr); grid-auto-flow: dense; inline-size: 100%; max-inline-size: none; column-gap: clamp(2rem, 5vw, 4.25rem); row-gap: clamp(0.75rem, 1.4vw, 1rem); align-items: start; } [data-spw-surface="about"] #about-frame > .frame-body > #about-hook, [data-spw-surface="about"] #about-frame > .frame-body > .about-story-map, [data-spw-surface="about"] #about-frame > .frame-body > #about-origin-question, [data-spw-surface="about"] #about-frame > .frame-body > .image-study { grid-column: 1 / -1; } [data-spw-surface="about"] #about-frame > .frame-body > :is(.about-story-map, #about-origin-question) { inline-size: 100%; max-inline-size: none; } [data-spw-surface="about"] #about-frame > .frame-body > [data-spw-textual-role="kicker"], [data-spw-surface="about"] #about-frame > .frame-body > #about-title, [data-spw-surface="about"] #about-frame > .frame-body > [data-spw-textual-role="lede"] { grid-column: 1; } [data-spw-surface="about"] #about-frame > .frame-body > p:not([data-spw-textual-role="kicker"]):not([data-spw-textual-role="lede"]):has(~ .about-story-map) { grid-column: 2; max-inline-size: var(--measure-panel); margin-block: 0; } [data-spw-surface="about"] #about-frame > .frame-body > .about-story-map ~ p:not(#about-origin-question) { grid-column: auto; max-inline-size: var(--measure-panel); margin-block: 0; } [data-spw-surface="about"] #about-frame > .image-study { grid-column: 2; grid-row: 3; inline-size: min(100%, 34rem); justify-self: end; margin: 0; } [data-spw-surface="about"] #about-frame > .frame-actions { grid-column: 1; grid-row: 3; align-self: start; margin-block-start: 0; } [data-spw-surface="about"] #about-frame > .spw-brace-actions { grid-column: 1 / -1; } } } [data-spw-surface="about"] #about-frame a:not(.spw-chip):not(.frame-sigil) { color: color-mix(in srgb, var(--about-accent) 84%, var(--about-ink)); } [data-spw-surface="about"] #typography-register { background: radial-gradient(circle at top left, color-mix(in srgb, var(--about-accent-2) 10%, transparent), transparent 28%), radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--about-accent) 7%, transparent), transparent 24%), var(--about-surface-strong); } [data-spw-surface="about"] #typography-register .demo-control-group, [data-spw-surface="about"] #typography-register .trope-box { border-color: color-mix(in srgb, var(--about-accent) 18%, var(--about-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--about-accent-soft) 76%, transparent), transparent 28%), var(--about-surface); } [data-spw-surface="about"] #typography-register .context-readout > div { border-color: color-mix(in srgb, var(--about-accent) 16%, var(--about-line)); background: color-mix(in srgb, var(--about-surface-strong) 96%, transparent); } /* ========================================================================== 4. About index ========================================================================== */ [data-spw-surface="about"] #about-index { background: linear-gradient(180deg, color-mix(in srgb, var(--about-surface-matte) 96%, transparent), transparent), var(--about-surface); } /* ========================================================================== 5. Panels and grids ========================================================================== */ [data-spw-surface="about"] .frame-grid:not([data-spw-layout="media-prose"]):not(.frame-grid--media-prose) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.95rem; } [data-spw-surface="about"] .frame-panel { min-width: 0; border-color: color-mix(in srgb, var(--about-line) 96%, transparent); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.20), transparent 62%), color-mix(in srgb, var(--about-surface-strong) 95%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 16px rgba(34, 22, 14, 0.04); transition: border-color var(--duration-base, 220ms) var(--ease-mechanical, ease), box-shadow var(--duration-base, 220ms) var(--ease-mechanical, ease), transform var(--duration-fast, 140ms) var(--ease-mechanical, ease); } [data-spw-surface="about"] .frame-panel:is(:hover, :focus-within) { border-color: color-mix(in srgb, var(--about-accent) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--about-accent) 8%, transparent), 0 12px 22px rgba(34, 22, 14, 0.06); transform: translateY(-1px); } [data-spw-surface="about"] .frame-panel h3 { color: color-mix(in srgb, var(--about-ink) 90%, var(--about-accent-2)); font-family: var(--site-sans-font, Inter, sans-serif); font-size: 1rem; font-weight: 650; letter-spacing: 0.004em; } [data-spw-surface="about"] .frame-panel p, [data-spw-surface="about"] .frame-panel li { color: var(--about-ink-soft); } [data-spw-surface="about"] .frame-panel strong { color: color-mix(in srgb, var(--about-ink) 92%, var(--about-accent)); } /* ========================================================================== 6. Links and operator chips ========================================================================== */ [data-spw-surface="about"] a:not(.frame-card):not(.spw-chip):not(.frame-sigil):not(.syntax-token) { color: color-mix(in srgb, var(--about-accent) 86%, var(--about-ink)); text-decoration-color: color-mix(in srgb, var(--about-accent) 28%, transparent); text-underline-offset: 0.16em; } [data-spw-surface="about"] a:not(.frame-card):not(.spw-chip):not(.frame-sigil):not(.syntax-token):hover, [data-spw-surface="about"] a:not(.frame-card):not(.spw-chip):not(.frame-sigil):not(.syntax-token):focus-visible { color: color-mix(in srgb, var(--about-accent-2) 82%, var(--about-accent)); text-decoration-color: currentColor; outline: none; } [data-spw-surface="about"] .frame-operators { gap: 0.5rem 0.6rem; } [data-spw-surface="about"] .spw-chip { border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 62%), color-mix(in srgb, var(--about-accent) 7%, transparent); border-color: color-mix(in srgb, var(--about-accent) 18%, transparent); color: color-mix(in srgb, var(--about-accent) 86%, var(--about-ink)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 1px 3px rgba(35, 22, 16, 0.04); } [data-spw-surface="about"] .spw-chip:hover, [data-spw-surface="about"] .spw-chip:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 62%), color-mix(in srgb, var(--about-accent) 11%, transparent); border-color: color-mix(in srgb, var(--about-accent) 28%, transparent); color: var(--about-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--about-accent) 8%, transparent), 0 6px 14px rgba(35, 22, 16, 0.06); } /* ========================================================================== 7. Documentation and website sections ========================================================================== */ [data-spw-surface="about"] #documentation-register, [data-spw-surface="about"] #website-register { background: linear-gradient(180deg, color-mix(in srgb, var(--about-accent-soft) 52%, transparent), transparent 18%), var(--about-surface); } [data-spw-surface="about"] #documentation-register .frame-panel, [data-spw-surface="about"] #website-register .frame-panel { background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 62%), color-mix(in srgb, var(--about-surface-matte) 94%, transparent); } /* ========================================================================== 8. Boonhonk and symbolic context -------------------------------------------------------------------------- Keep it present, but calmer and more disciplined than before. ========================================================================== */ [data-spw-surface="about"] #boonhonk-register { background: radial-gradient(circle at top left, color-mix(in srgb, var(--about-accent-3-soft) 88%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--about-accent-soft) 42%, transparent), transparent 18%), var(--about-surface); } [data-spw-surface="about"] #boonhonk-register .boonhonk-mixer-panel { margin-block-start: 1rem; border-color: color-mix(in srgb, var(--boon-border) 44%, var(--about-line)); background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent 52%), color-mix(in srgb, var(--about-surface-strong) 92%, var(--boon-bg-soft) 8%); } [data-spw-surface="about"] .syntax-list { display: grid; gap: 0.55rem; padding-left: 0; list-style: none; } [data-spw-surface="about"] .syntax-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 0.9rem; align-items: start; padding: 0.7rem 0.85rem; border: 1px solid color-mix(in srgb, var(--about-line) 92%, transparent); border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 62%), color-mix(in srgb, var(--about-surface-strong) 94%, transparent); } [data-spw-surface="about"] .syntax-list .syntax-token { color: color-mix(in srgb, var(--about-accent) 84%, var(--about-ink)); text-decoration: none; font-family: var(--site-mono-font, "JetBrains Mono", monospace); } [data-spw-surface="about"] .syntax-list span:last-child { color: var(--about-ink-soft); } /* ========================================================================== 9. SVG figures ========================================================================== */ [data-spw-surface="about"] .spw-svg-figure { display: grid; gap: 0.7rem; } [data-spw-surface="about"] .spw-svg-surface { width: 100%; height: auto; border: 1px solid color-mix(in srgb, var(--about-line) 94%, transparent); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 62%), color-mix(in srgb, var(--about-surface-strong) 94%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 8px 18px rgba(34, 22, 14, 0.05); } [data-spw-surface="about"] .spw-svg-figure figcaption { color: var(--about-ink-soft); max-inline-size: var(--measure-panel); } [data-spw-surface="about"] #boonhonk-disposition-diagram { margin-block: 1rem 1.15rem; } [data-spw-surface="about"] #boonhonk-disposition-diagram .spw-svg-surface { background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 44%), color-mix(in srgb, var(--about-surface-strong) 92%, var(--about-accent-soft)); } [data-spw-surface="about"] #boonhonk-disposition-diagram .spw-svg-rail { max-inline-size: 100%; } [data-spw-surface="about"] #boonhonk-disposition-diagram .spw-svg-rail .spec-pill { max-inline-size: 100%; } [data-spw-surface="about"] #boonhonk-disposition-diagram .boonhonk-node { color: var(--about-ink); } [data-spw-surface="about"] #boonhonk-disposition-diagram .boonhonk-node--bone { color: var(--bone-color); } [data-spw-surface="about"] #boonhonk-disposition-diagram .boonhonk-node--boon { color: var(--boon-color); } [data-spw-surface="about"] #boonhonk-disposition-diagram .boonhonk-node--bane { color: var(--bane-color); } [data-spw-surface="about"] #boonhonk-disposition-diagram .boonhonk-node--bonk { color: var(--bonk-color); } [data-spw-surface="about"] #boonhonk-disposition-diagram .boonhonk-node--honk { color: var(--honk-color); } @media (max-width: 45rem) { [data-spw-surface="about"] #boonhonk-disposition-diagram .spw-svg-rail { display: flex; flex-wrap: wrap; overflow: visible; padding-bottom: 0; mask-image: none; scroll-snap-type: none; } [data-spw-surface="about"] #boonhonk-disposition-diagram .spw-svg-rail .spec-pill { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; } } /* ========================================================================== 10. World creatures / images ========================================================================== */ [data-spw-surface="about"] #world-creatures { background: radial-gradient(circle at top left, color-mix(in srgb, var(--about-accent-2-soft) 86%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--about-accent-soft) 38%, transparent), transparent 16%), var(--about-surface); } [data-spw-surface="about"] [data-spw-image-surface] { display: grid; gap: 0.65rem; padding: 0.8rem; border: 1px solid color-mix(in srgb, var(--about-line) 94%, transparent); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 62%), color-mix(in srgb, var(--about-surface-strong) 94%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 8px 18px rgba(34, 22, 14, 0.05); } [data-spw-surface="about"] [data-spw-image-surface] img { display: block; width: 100%; height: auto; border-radius: 10px; } [data-spw-surface="about"] [data-spw-image-surface] figcaption { color: var(--about-ink-soft); } /* ========================================================================== 11. Nutrition / hospitality emphasis ========================================================================== */ [data-spw-surface="about"] #nutrition-register { background: radial-gradient(circle at top left, color-mix(in srgb, var(--about-accent-2-soft) 96%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--about-accent-2-soft) 62%, transparent), transparent 16%), var(--about-surface-strong); } [data-spw-surface="about"] #nutrition-register .frame-panel { background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 62%), linear-gradient(135deg, color-mix(in srgb, var(--about-accent-2) 7%, transparent), transparent 42%), color-mix(in srgb, var(--about-surface-matte) 95%, transparent); } [data-spw-surface="about"] #nutrition-register h3 { color: color-mix(in srgb, var(--about-ink) 88%, var(--about-accent-2)); } /* ========================================================================== 12. Current direction ========================================================================== */ [data-spw-surface="about"] #current-direction { background: radial-gradient(circle at top right, color-mix(in srgb, var(--about-accent-soft) 82%, transparent), transparent 32%), linear-gradient(180deg, color-mix(in srgb, var(--about-accent-soft) 54%, transparent), transparent 16%), var(--about-surface-strong); } [data-spw-surface="about"] #current-direction p { max-inline-size: var(--measure-reading); } [data-spw-surface="about"] #current-direction strong { color: color-mix(in srgb, var(--about-ink) 92%, var(--about-accent-2)); } /* ========================================================================== 13. Text hierarchy ========================================================================== */ [data-spw-surface="about"] h2 { color: color-mix(in srgb, var(--about-ink) 90%, var(--about-accent-2)); font-family: var(--craft-display, var(--site-display-font)); font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; } [data-spw-surface="about"] h3 { color: color-mix(in srgb, var(--about-ink) 88%, var(--about-accent)); font-family: var(--site-sans-font, Inter, sans-serif); font-size: 1rem; font-weight: 650; letter-spacing: 0.004em; } /* ========================================================================== 14. Responsive ========================================================================== */ @media (max-width: 48rem) { [data-spw-surface="about"] #about-title { max-width: none; font-size: 2rem; } [data-spw-surface="about"] #about-frame > .frame-topline { align-items: stretch; } [data-spw-surface="about"] #about-frame .mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; } [data-spw-surface="about"] #about-frame .mode-switch::before { white-space: normal; overflow-wrap: anywhere; } [data-spw-surface="about"] #about-frame .mode-switch > .frame-sigil { min-inline-size: 0; max-inline-size: 100%; } [data-spw-surface="about"] #about-frame > .frame-topline > .spec-strip { flex: 0 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); inline-size: 100%; min-inline-size: 0; } [data-spw-surface="about"] #about-frame .spec-pill { min-inline-size: 0; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; } [data-spw-surface="about"] .frame-grid { grid-template-columns: 1fr; } [data-spw-surface="about"] .syntax-list li { grid-template-columns: 1fr; gap: 0.35rem; } } @media (max-width: 32rem) { [data-spw-surface="about"] .frame-panel { min-height: 0; } } /* ========================================================================== 15. Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { [data-spw-surface="about"] .spw-frame, [data-spw-surface="about"] .frame-panel, [data-spw-surface="about"] .about-story-map__item, [data-spw-surface="about"] .spw-chip { transition: none !important; animation: none !important; transform: none !important; } } } /* /public/css/routes/widgets/boonhonk-mixer.css */ @layer routes { /* ========================================================================== routes/widgets/boonhonk-mixer.css -------------------------------------------------------------------------- Visual mixer for the five boonhonk operators. The field should feel less like a flat polygon and more like a living, weighted vessel with room for subtle preference tuning later. Design goals - prepare for nuanced taste adjustments rather than binary states - expose richer variables for JS, SVG, and audience-facing handles - make combinatorics feel dimensional, not merely geometric - support later additions like softness, bias, skew, bloom, orbit, resonance, and local taste correction Suggested JS-facing attributes / classes - [data-bhm-state="bone|mixing|settled|resonant|projecting"] - [data-bhm-disposition="bone|boon|bane|bonk|honk"] - [data-bhm-focus="boon|bane|bone|bonk|honk|center"] - [data-bhm-depth="flat|lifted|dimensional"] - [data-bhm-texture="quiet|paper|glow|glass"] - [data-bhm-utility="base|biased|magnified"] - [data-bhm-price-shift="none|subtle|strong"] - [data-bhm-preference-mode="gentle|precise|playful"] - [data-state~="hovering-node"] / [data-state~="comparing"] / [data-state~="projecting"] / [data-state~="settled"] ========================================================================== */ /* ========================================================================== 1. Wrapper + root variables ========================================================================== */ .bhm-wrapper { --bhm-accent: var(--active-op-color, #1a9999); --bhm-bg: var(--card-bg, rgba(255, 255, 255, 0.84)); --bhm-line: var(--line, rgba(18, 52, 50, 0.12)); --bhm-text: var(--ink, hsl(178 18% 14%)); --bhm-text-soft: var(--ink-soft, hsl(178 10% 42%)); --bhm-boon-color: var(--boon-color); --bhm-bane-color: var(--bane-color); --bhm-bone-color: var(--bone-color); --bhm-bonk-color: var(--bonk-color); --bhm-honk-color: var(--honk-color); --bhm-charge: 0; --bhm-depth-lift: 0px; --bhm-center-scale: 1; --bhm-polygon-opacity: calc(0.18 + (var(--bhm-charge) * 0.16)); --bhm-field-glow: 0 0 0 1px color-mix(in oklab, var(--bhm-accent) 10%, transparent), 0 10px 24px rgba(0, 0, 0, 0.07); --bhm-surface-tint: color-mix(in oklab, var(--bhm-accent) 6%, transparent); --bhm-surface-rim: color-mix(in oklab, var(--bhm-accent) 16%, transparent); --bhm-center-glow: drop-shadow(0 0 6px color-mix(in oklab, currentColor 30%, transparent)); --bhm-node-glow: drop-shadow(0 0 4px currentColor); --bhm-radius: 1rem; --bhm-pad: 1rem; --bhm-gap-y: 0.75rem; --bhm-gap-x: 1.25rem; --bhm-duration-fast: var(--duration-fast, 120ms); --bhm-duration-base: var(--duration-base, 180ms); --bhm-duration-deliberate: var(--duration-deliberate, 280ms); --bhm-ease: var(--ease-mechanical, ease); --bhm-settle-ease: var(--brace-settle-ease, cubic-bezier(0.22, 0, 0.15, 1)); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: var(--bhm-gap-y) var(--bhm-gap-x); align-items: start; max-width: 36rem; padding: var(--bhm-pad); background: var(--bhm-bg); border: 1px solid var(--bhm-line); border-radius: var(--bhm-radius); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: border-color var(--bhm-duration-base) var(--bhm-ease), box-shadow var(--bhm-duration-deliberate) var(--bhm-settle-ease), transform var(--bhm-duration-fast) var(--bhm-settle-ease), background var(--bhm-duration-base) var(--bhm-ease); &:is(:hover, :focus-within) { border-color: color-mix(in oklab, var(--bhm-accent) 24%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--bhm-accent) 10%, transparent), 0 10px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5); } &[data-bhm-state="mixing"] { --bhm-charge: 0.24; } &[data-bhm-state="bone"] { --bhm-charge: 0.08; } &[data-bhm-state="settled"], & .bhm-svg[data-state~="settled"] { --bhm-charge: 0.44; --bhm-depth-lift: 1px; } &[data-bhm-state="resonant"], & .bhm-svg[data-state~="resonant"] { --bhm-charge: 0.62; --bhm-depth-lift: 2px; --bhm-center-scale: 1.03; } &[data-bhm-state="projecting"], & .bhm-svg[data-state~="projecting"] { --bhm-charge: 0.78; --bhm-depth-lift: 3px; --bhm-center-scale: 1.05; } &[data-bhm-disposition="boon"] { --bhm-accent: var(--boon-color); } &[data-bhm-disposition="bone"] { --bhm-accent: var(--bone-color); } &[data-bhm-disposition="bonk"] { --bhm-accent: var(--bonk-color); } &[data-bhm-disposition="bane"] { --bhm-accent: var(--bane-color); } &[data-bhm-disposition="honk"] { --bhm-accent: var(--honk-color); } &[data-bhm-depth="flat"] { --bhm-depth-lift: 0px; } &[data-bhm-depth="lifted"] { --bhm-depth-lift: 2px; } &[data-bhm-depth="dimensional"] { --bhm-depth-lift: 4px; --bhm-polygon-opacity: calc(0.2 + (var(--bhm-charge) * 0.2)); & .bhm-polygon { filter: drop-shadow(0 calc(1px + var(--bhm-depth-lift)) 8px rgba(0, 0, 0, 0.08)) drop-shadow(0 0 10px color-mix(in oklab, currentColor 10%, transparent)); } } &[data-bhm-texture="paper"] { --bhm-bg: color-mix(in oklab, rgba(255, 248, 238, 0.94) 92%, var(--bhm-accent) 8%); } &[data-bhm-texture="glow"] { --bhm-field-glow: 0 0 0 1px color-mix(in oklab, var(--bhm-accent) 14%, transparent), 0 0 18px color-mix(in oklab, var(--bhm-accent) 12%, transparent); } &[data-bhm-texture="glass"] { background: linear-gradient( 180deg, color-mix(in oklab, rgba(255,255,255,0.42) 78%, transparent), transparent 40% ), var(--bhm-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* ========================================================================== 2.5. Operator palette ========================================================================== */ :where(.bhm-node[data-bhm-operator="boon"], .bhm-op-chip[data-bhm-operator="boon"]) { --bhm-operator-color: var(--boon-color); --bhm-operator-border: var(--boon-border); --bhm-operator-soft: var(--boon-bg-soft); } :where(.bhm-node[data-bhm-operator="bane"], .bhm-op-chip[data-bhm-operator="bane"]) { --bhm-operator-color: var(--bane-color); --bhm-operator-border: var(--bane-border); --bhm-operator-soft: var(--bane-bg-soft); } :where(.bhm-node[data-bhm-operator="bone"], .bhm-op-chip[data-bhm-operator="bone"]) { --bhm-operator-color: var(--bone-color); --bhm-operator-border: var(--bone-border); --bhm-operator-soft: var(--bone-bg-soft); } :where(.bhm-node[data-bhm-operator="bonk"], .bhm-op-chip[data-bhm-operator="bonk"]) { --bhm-operator-color: var(--bonk-color); --bhm-operator-border: var(--bonk-border); --bhm-operator-soft: var(--bonk-bg-soft); } :where(.bhm-node[data-bhm-operator="honk"], .bhm-op-chip[data-bhm-operator="honk"]) { --bhm-operator-color: var(--honk-color); --bhm-operator-border: var(--honk-border); --bhm-operator-soft: var(--honk-bg-soft); } /* ========================================================================== 2. SVG surface ========================================================================== */ .bhm-svg { grid-row: 1 / 3; width: min(240px, 100%); height: auto; overflow: visible; cursor: default; &[data-state~="resonant"] .bhm-field { filter: drop-shadow(0 0 8px color-mix(in oklab, var(--bhm-accent) 8%, transparent)); } &[data-state~="comparing"] .bhm-polygon { opacity: calc(var(--bhm-polygon-opacity) + 0.08); } &[data-bhm-utility="magnified"] .bhm-spoke { stroke-width: 1.35; opacity: 0.9; } &[data-state~="projecting"] { & :is(.bhm-secondary-polygon, .bhm-taste-envelope) { opacity: 0.72; } & .bhm-center { filter: drop-shadow(0 0 8px color-mix(in oklab, currentColor 32%, transparent)) drop-shadow(0 0 18px color-mix(in oklab, currentColor 12%, transparent)); } & :is(.bhm-center-subtitle, .bhm-center-utility) { opacity: 0.88; } } &[data-bhm-preference-mode="gentle"] :is(.bhm-secondary-polygon, .bhm-taste-envelope) { opacity: 0.72; } &[data-bhm-utility="magnified"] { & .bhm-bias-ring { opacity: 0.72; } & :is(.bhm-center-utility, .bhm-center-bias) { opacity: 0.88; } } } /* ── SVG internals ──────────────────────────────────────────────────────── */ .bhm-field { fill: color-mix(in oklab, var(--bhm-accent) 4%, var(--page-bg, #f8f7f5)); stroke: color-mix(in oklab, var(--bhm-accent) 14%, transparent); stroke-width: 1; transition: fill var(--bhm-duration-deliberate) var(--bhm-ease), stroke var(--bhm-duration-base) var(--bhm-ease), opacity var(--bhm-duration-base) var(--bhm-ease), filter var(--bhm-duration-deliberate) var(--bhm-settle-ease); } .bhm-polygon { opacity: var(--bhm-polygon-opacity); transition: fill 220ms ease, opacity 180ms ease, filter var(--bhm-duration-base) var(--bhm-settle-ease), transform var(--bhm-duration-deliberate) var(--bhm-settle-ease); } .bhm-spoke { transition: stroke-width 220ms ease, opacity 180ms ease, stroke var(--bhm-duration-base) var(--bhm-ease), filter var(--bhm-duration-base) var(--bhm-settle-ease); } .bhm-secondary-polygon, .bhm-taste-envelope, .bhm-bias-ring { opacity: 0; pointer-events: none; transition: opacity var(--bhm-duration-base) var(--bhm-ease), transform var(--bhm-duration-deliberate) var(--bhm-settle-ease); } /* ========================================================================== 3. Center ========================================================================== */ .bhm-center { transform-origin: center; transform: translateY(calc(var(--bhm-depth-lift) * -0.2)) scale(var(--bhm-center-scale)); transition: fill 220ms ease, transform var(--bhm-duration-deliberate) var(--bhm-settle-ease), filter var(--bhm-duration-deliberate) var(--bhm-settle-ease), opacity var(--bhm-duration-base) var(--bhm-ease); filter: var(--bhm-center-glow); } .bhm-center-hit { fill: transparent; cursor: pointer; } .bhm-center-label { fill: rgba(255, 255, 255, 0.8); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 14px; font-weight: 700; pointer-events: none; user-select: none; transition: fill var(--bhm-duration-fast) var(--bhm-ease), letter-spacing var(--bhm-duration-base) var(--bhm-ease); .bhm-svg[data-state~="resonant"] & { letter-spacing: 0.03em; } } .bhm-center-subtitle, .bhm-center-utility, .bhm-center-bias { fill: rgba(255, 255, 255, 0.72); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 8px; font-weight: 500; pointer-events: none; user-select: none; opacity: 0; transition: opacity var(--bhm-duration-base) var(--bhm-ease), transform var(--bhm-duration-deliberate) var(--bhm-settle-ease); } /* ========================================================================== 4. Nodes ========================================================================== */ .bhm-node { cursor: pointer; outline: none; &:focus-visible, &[data-spw-selection="focused"] { z-index: 2; } &:focus-visible .bhm-node-dot { stroke: color-mix(in oklab, var(--bhm-operator-color, var(--bhm-accent)) 52%, white); stroke-width: 3; } &:hover .bhm-node-dot { filter: brightness(1.15); } &[data-state~="active"] { & .bhm-node-dot { filter: var(--bhm-node-glow); } & .bhm-node-label { opacity: 1; } & :is(.bhm-node-weight, .bhm-node-bias) { opacity: 0.86; } } &[data-spw-selection="focused"] .bhm-node-dot { transform: scale(1.09); stroke: color-mix(in oklab, var(--bhm-operator-color, var(--bhm-accent)) 44%, white); stroke-width: 2.6; filter: drop-shadow(0 0 5px color-mix(in oklab, var(--bhm-operator-color, var(--bhm-accent)) 26%, transparent)) var(--bhm-node-glow); } &[data-spw-selection="selected"] .bhm-node-dot { stroke: color-mix(in oklab, var(--bhm-operator-color, var(--bhm-accent)) 38%, white); stroke-width: 2; } &[data-spw-selection="selected"] .bhm-node-dot { transform: scale(1.03); } &[data-spw-selection="focused"] .bhm-node-label, &[data-spw-selection="selected"] .bhm-node-label { opacity: 1; fill: var(--bhm-operator-color, var(--bhm-text)); } &[data-bhm-axis-state="locked"] .bhm-node-dot { stroke-width: 2.2; } &[data-bhm-adjustability="fine"] .bhm-node-dot { stroke-dasharray: 0; } &[data-bhm-adjustability="soft"] .bhm-node-dot { stroke-dasharray: 2 2; } } .bhm-node-hit { fill: transparent; } .bhm-node-dot { fill: var(--bhm-operator-color, var(--bhm-accent)); stroke: color-mix(in oklab, var(--bhm-operator-border, var(--bhm-accent)) 56%, white); stroke-width: 1.5; transition: opacity 180ms ease, r 160ms ease, stroke var(--bhm-duration-base) var(--bhm-ease), filter var(--bhm-duration-base) var(--bhm-settle-ease), transform var(--bhm-duration-fast) var(--bhm-settle-ease); } .bhm-node-label { fill: var(--bhm-text); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 10px; font-weight: 600; pointer-events: none; user-select: none; opacity: 0.72; transition: opacity var(--bhm-duration-fast) var(--bhm-ease), letter-spacing var(--bhm-duration-base) var(--bhm-ease), fill var(--bhm-duration-fast) var(--bhm-ease); } .bhm-node-sigil { fill: rgba(255, 255, 255, 0.85); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 11px; font-weight: 700; pointer-events: none; user-select: none; } .bhm-node-weight, .bhm-node-bias, .bhm-node-note { fill: color-mix(in oklab, var(--bhm-text-soft) 92%, transparent); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 7px; pointer-events: none; user-select: none; opacity: 0; transition: opacity var(--bhm-duration-base) var(--bhm-ease); .bhm-svg[data-bhm-preference-mode="precise"] .bhm-node & { &.bhm-node-weight { opacity: 0.86; } } .bhm-svg[data-bhm-utility="magnified"] .bhm-node & { &.bhm-node-bias { opacity: 0.86; } } } /* ========================================================================== 5. Readout ========================================================================== */ .bhm-readout { display: flex; flex-direction: column; gap: 0.65rem; } .bhm-color-preview { width: 100%; height: 2.5rem; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.6rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.06); transition: background 220ms ease, box-shadow var(--bhm-duration-deliberate) var(--bhm-settle-ease), transform var(--bhm-duration-fast) var(--bhm-settle-ease); .bhm-wrapper[data-bhm-state="projecting"] &, .bhm-wrapper[data-bhm-utility="magnified"] & { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0 0 1px color-mix(in oklab, var(--bhm-accent) 10%, transparent), 0 0 18px color-mix(in oklab, var(--bhm-accent) 12%, transparent); } } .bhm-state-pill { display: inline-flex; align-items: center; width: fit-content; padding: 0.18rem 0.5rem; border: 1px solid color-mix(in oklab, var(--bhm-accent) 18%, var(--bhm-line)); border-radius: 999px; background: color-mix(in oklab, var(--bhm-bg) 78%, transparent); color: var(--bhm-text-soft); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: lowercase; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; &[data-state="bone"] { border-style: dashed; opacity: 0.9; } &[data-bhm-disposition="boon"] { color: color-mix(in oklab, var(--boon-color) 62%, var(--bhm-text)); } &[data-bhm-disposition="bone"] { color: color-mix(in oklab, var(--bone-color) 58%, var(--bhm-text)); } &[data-bhm-disposition="bonk"] { color: color-mix(in oklab, var(--bonk-color) 60%, var(--bhm-text)); } &[data-bhm-disposition="bane"] { color: color-mix(in oklab, var(--bane-color) 60%, var(--bhm-text)); } &[data-bhm-disposition="honk"] { color: color-mix(in oklab, var(--honk-color) 62%, var(--bhm-text)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--honk-color) 14%, transparent); } } .bhm-formula { display: flex; flex-wrap: wrap; gap: 0.65rem; } .bhm-formula-line { display: flex; align-items: center; gap: 0.25rem; color: var(--bhm-text-soft); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 0.72rem; &[data-bhm-utility="magnified"] .bhm-val { text-shadow: 0 0 8px color-mix(in oklab, currentColor 10%, transparent); } } .bhm-val { min-width: 2.5ch; color: var(--bhm-text); font-weight: 600; transition: color 180ms ease, text-shadow var(--bhm-duration-base) var(--bhm-settle-ease); } .bhm-operator-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .bhm-op-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.5rem; border: 1px solid color-mix(in oklab, var(--bhm-operator-border, var(--bhm-line)) 86%, var(--bhm-line)); border-radius: 0.35rem; background: rgba(255, 255, 255, 0.5); color: var(--bhm-text-soft); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 0.72rem; transition: background 140ms, border-color 140ms, color 140ms, transform var(--bhm-duration-fast) var(--bhm-settle-ease), box-shadow var(--bhm-duration-base) var(--bhm-settle-ease); &[data-state~="active"] { color: var(--bhm-text); border-color: var(--bhm-operator-border, var(--bhm-accent)); background: color-mix(in oklab, var(--bhm-operator-soft, var(--bhm-accent)) 82%, transparent); transform: translateY(-1px); } &[data-spw-selection="focused"] { box-shadow: 0 0 0 2px color-mix(in oklab, var(--bhm-operator-color, var(--bhm-accent)) 14%, transparent), 0 6px 14px rgba(0, 0, 0, 0.06); } &[data-spw-selection="selected"] { box-shadow: 0 0 0 1px color-mix(in oklab, var(--bhm-operator-border, var(--bhm-accent)) 16%, transparent), 0 4px 10px rgba(0, 0, 0, 0.04); } &[data-bhm-adjustability="gentle"] { border-style: dashed; } &[data-bhm-adjustability="precise"] { border-style: solid; } &[data-bhm-adjustability="soft"] { opacity: 0.86; } } .bhm-op-val { opacity: 0.7; font-weight: 500; } /* future taste handle strip */ .bhm-taste-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .bhm-taste-chip { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 1.55rem; padding: 0.14rem 0.44rem; border: 1px solid color-mix(in oklab, var(--bhm-accent) 16%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--page-bg, #f8f7f5) 92%, transparent); color: var(--bhm-text-soft); font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 0.62rem; transition: border-color var(--bhm-duration-fast) var(--bhm-ease), color var(--bhm-duration-fast) var(--bhm-ease), background var(--bhm-duration-fast) var(--bhm-ease); &[data-bhm-active="true"] { color: var(--bhm-text); border-color: color-mix(in oklab, var(--bhm-accent) 30%, transparent); background: color-mix(in oklab, var(--bhm-accent) 8%, transparent); } } /* ========================================================================== 6. Note ========================================================================== */ .bhm-note { grid-column: 1 / -1; margin: 0; color: var(--bhm-text-soft); opacity: 0.65; font-family: var(--site-mono-font, var(--font-mono, monospace)); font-size: 0.72rem; } /* ========================================================================== 7. Responsive ========================================================================== */ @media (max-width: 32rem) { .bhm-wrapper { grid-template-columns: 1fr; grid-template-rows: auto; } .bhm-svg { grid-row: auto; width: min(200px, 80vw); margin: 0 auto; } .bhm-readout { grid-column: 1; } } /* ========================================================================== 8. Reduced motion -------------------------------------------------------------------------- The static-glyph contract for .bhm-* parts lives once, in effects/material.css ("Static Glyph Contract"), merged with the equivalent rules for seed-card and services-configurator. ========================================================================== */ }