/* deploy/_shared/jelly-chrome/materials/materials.css * Per-material DOM touches, keyed on html[data-jc-material] (set by * applyMaterial). Tokens only; every length in --jc-u. * - legibility: on faceted / bright materials every glyph and line of text * gets a soft, feathered halo on the ground token (stacked blurred * shadows, never a box); * - aluminum: glyphs read laser-etched (a light lip below, a dark lip above); * - fallback skins (no WebGL2 / no material hook): each material keeps a * CSS-only character instead of the generic frosted glass. */ /* ---------- type: solid, not wispy (every material, jelly included) ---------- * Inter 5D 500 for UI and body copy (labels and buttons 500-600), solid ink at * ~0.92 instead of grey, placeholder 0.72 (0.6 measured under WCAG AA on metal and glass), -0.01em, ss03 (also on the Inter * fallback). Headlines stay 700 / -0.04em (the backdrop canvas). */ :root[data-jc-material] .jc-root { --jc-soft: color-mix(in srgb, var(--ink) 92%, transparent); --jc-faint: color-mix(in srgb, var(--ink) 72%, transparent); /* 0.6 measured < 4.5:1 on metal / glass */ font-family: var(--jc-font, 'Inter 5D', 'Inter', system-ui, sans-serif); font-feature-settings: 'ss03'; font-weight: 500; letter-spacing: -0.01em; } :root[data-jc-material] .jc-prompt__input, :root[data-jc-material] .jc-palette__input, :root[data-jc-material] .jc-palette__option, :root[data-jc-material] .jc-palette__empty { font-weight: 500; letter-spacing: -0.01em; color: color-mix(in srgb, var(--ink) 92%, transparent); } :root[data-jc-material] .jc-palette__option[aria-selected="true"] { color: var(--ink); font-weight: 600; } :root[data-jc-material] .jc-prompt__input::placeholder, :root[data-jc-material] .jc-palette__input::placeholder { color: color-mix(in srgb, var(--ink) 72%, transparent); font-weight: 500; } :root[data-jc-material] .jc-palette__group { font-weight: 600; letter-spacing: 0.06em; color: color-mix(in srgb, var(--ink) 72%, transparent); } :root[data-jc-material] .jc-palette__hint, :root[data-jc-material] .jc-palette__kbd { font-family: var(--jc-font, 'Inter 5D', 'Inter', system-ui, sans-serif); font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 72%, transparent); } :root[data-jc-material] .jc-dock__label, :root[data-jc-material] .jc-prompt [data-tip]::after { font-weight: 600; letter-spacing: -0.005em; } :root[data-jc-material] .jc-dock__item, :root[data-jc-material] .jc-prompt__tool, :root[data-jc-material] .jc-prompt__toggle, :root[data-jc-material] .jc-palette__orb { color: color-mix(in srgb, var(--ink) 92%, transparent); } :root[data-jc-material] .jc-root svg { stroke-width: 1.9; } :root[data-jc-material^="diamond"] .jc-root svg { stroke-width: 2.1; } /* ---------- palette: rows fade out at the panel's scroll edge ---------- * The panel scrolls; without this the last half-visible row sits on the * bevel (on diamond: on the fire of the crown steps). Mask alpha only; the * opaque stop is a token. */ :root[data-jc-material] .jc-palette__panel[data-more="true"] { -webkit-mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 16 * var(--jc-u)), transparent calc(100% - 4 * var(--jc-u))); mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 16 * var(--jc-u)), transparent calc(100% - 4 * var(--jc-u))); } /* ---------- diamond: feathered dark backing behind glyphs and text ---------- * (with the calm table window in the shader; measured >= 4.5:1, see proof.json) */ :root[data-jc-material^="diamond"] .jc-root { --jc-halo: 0 0 calc(0.8 * var(--jc-u)) color-mix(in srgb, var(--ground) 95%, transparent), 0 0 calc(2 * var(--jc-u)) color-mix(in srgb, var(--ground) 85%, transparent), 0 0 calc(5 * var(--jc-u)) color-mix(in srgb, var(--ground) 70%, transparent), 0 0 calc(12 * var(--jc-u)) color-mix(in srgb, var(--ground) 45%, transparent); } :root[data-jc-material^="diamond"] .jc-root svg { filter: drop-shadow(0 0 calc(0.7 * var(--jc-u)) var(--ground)) drop-shadow(0 0 calc(2.5 * var(--jc-u)) color-mix(in srgb, var(--ground) 85%, transparent)) drop-shadow(0 0 calc(8 * var(--jc-u)) color-mix(in srgb, var(--ground) 55%, transparent)); } :root[data-jc-material^="diamond"] .jc-prompt__tool, :root[data-jc-material^="diamond"] .jc-prompt__toggle { color: color-mix(in srgb, var(--ink) 92%, transparent); } :root[data-jc-material^="diamond"] .jc-dock__item, :root[data-jc-material^="diamond"] .jc-dock__bubble, :root[data-jc-material^="diamond"] .jc-palette__pill, :root[data-jc-material^="diamond"] .jc-palette__option, :root[data-jc-material^="diamond"] .jc-palette__group, :root[data-jc-material^="diamond"] .jc-prompt__input, :root[data-jc-material^="diamond"] .jc-palette__input, :root[data-jc-material^="diamond"] .jc-dock__label { color: var(--ink); text-shadow: var(--jc-halo); } :root[data-jc-material^="diamond"] .jc-prompt__input::placeholder, :root[data-jc-material^="diamond"] .jc-palette__input::placeholder { color: color-mix(in srgb, var(--ink) 72%, transparent); text-shadow: var(--jc-halo); } :root[data-jc-material^="diamond"] .jc-root .jc-dock__item[aria-current] svg { filter: drop-shadow(0 0 calc(1.2 * var(--jc-u)) color-mix(in srgb, var(--ground) 90%, transparent)) drop-shadow(0 0 calc(5 * var(--jc-u)) color-mix(in srgb, var(--ground) 70%, transparent)); } /* no accent glow (no painted effects): the active item keeps its dot */ :root[data-jc-material^="diamond"] .jc-dock__dot { box-shadow: 0 0 calc(4 * var(--jc-u)) var(--ground); } /* r2: the sign-in's Continue label: solid ink and the same feathered halo * (its stone also calms under the text: DIAMOND_POCKET_SELECTOR) */ :root[data-jc-material^="diamond"] .ja-continue { color: var(--ink); font-weight: 600; text-shadow: var(--jc-halo); } /* r2b: the sign-in card gets the palette's treatment. Its facet frame is the same * crown band (~29 units) calming to the table window by ~38 units, and the wells * feather out of the table 29-47 units from the edge. Every glyph (title, Back, * the switch line) sits >= 46 units inside the edge and the wells end >= 48 units * in, so nothing touches the facets; the card grows by the same 24 units the * padding takes, so the fields keep their width (328 units). */ :root[data-jc-material^="diamond"] .ja-panel { width: min(calc(424 * var(--jc-u)), calc(100vw - 32 * var(--jc-u))); padding: calc(46 * var(--jc-u)) calc(48 * var(--jc-u)) calc(46 * var(--jc-u)); } :root[data-jc-material^="diamond"] .ja-back { top: calc(40 * var(--jc-u)); right: calc(40 * var(--jc-u)); } /* r2: the palette panel's facet frame (the crown band, ~29 units, calming to * the table window by ~38) must not run under the group label or the row hints: * the panel's content sits inside the table window on diamond */ :root[data-jc-material^="diamond"] .jc-palette__panel { padding: calc(28 * var(--jc-u)) calc(30 * var(--jc-u)); } /* ...and a row scrolled toward the bottom is gone before it reaches the crown band */ :root[data-jc-material^="diamond"] .jc-palette__panel[data-more="true"] { -webkit-mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 42 * var(--jc-u)), transparent calc(100% - 30 * var(--jc-u))); mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 42 * var(--jc-u)), transparent calc(100% - 30 * var(--jc-u))); } /* ---------- water: clear, so the page shows through; the same feathered dark * backing as diamond behind every glyph (with the calm pockets in the shader) */ :root[data-jc-material="water"] .jc-root { --jc-halo: 0 0 calc(0.8 * var(--jc-u)) color-mix(in srgb, var(--ground) 92%, transparent), 0 0 calc(2 * var(--jc-u)) color-mix(in srgb, var(--ground) 80%, transparent), 0 0 calc(5 * var(--jc-u)) color-mix(in srgb, var(--ground) 62%, transparent), 0 0 calc(12 * var(--jc-u)) color-mix(in srgb, var(--ground) 38%, transparent); } :root[data-jc-material="water"] .jc-root svg { filter: drop-shadow(0 0 calc(0.7 * var(--jc-u)) var(--ground)) drop-shadow(0 0 calc(2.5 * var(--jc-u)) color-mix(in srgb, var(--ground) 80%, transparent)) drop-shadow(0 0 calc(8 * var(--jc-u)) color-mix(in srgb, var(--ground) 50%, transparent)); } :root[data-jc-material="water"] .jc-dock__item, :root[data-jc-material="water"] .jc-dock__bubble, :root[data-jc-material="water"] .jc-palette__pill, :root[data-jc-material="water"] .jc-palette__option, :root[data-jc-material="water"] .jc-palette__group, :root[data-jc-material="water"] .jc-prompt__input, :root[data-jc-material="water"] .jc-palette__input, :root[data-jc-material="water"] .jc-dock__label { text-shadow: var(--jc-halo); } :root[data-jc-material="water"] .jc-prompt__input::placeholder, :root[data-jc-material="water"] .jc-palette__input::placeholder { text-shadow: var(--jc-halo); } :root[data-jc-material="water"] .jc-root .jc-dock__item[aria-current] svg { filter: drop-shadow(0 0 calc(1.2 * var(--jc-u)) color-mix(in srgb, var(--ground) 90%, transparent)) drop-shadow(0 0 calc(5 * var(--jc-u)) color-mix(in srgb, var(--ground) 70%, transparent)); } /* no accent glow (no painted effects): the active item keeps its dot */ /* ---------- glass: glyphs float on a clear pane, a faint halo only ---------- */ :root[data-jc-material="glass"] .jc-root svg { filter: drop-shadow(0 calc(0.5 * var(--jc-u)) calc(4 * var(--jc-u)) color-mix(in srgb, var(--ground) 55%, transparent)); } /* ---------- aluminum: laser-etched glyphs ---------- */ :root[data-jc-material="aluminum"] .jc-root svg { filter: drop-shadow(0 calc(0.6 * var(--jc-u)) 0 color-mix(in srgb, var(--ink) 16%, transparent)) drop-shadow(0 calc(-0.6 * var(--jc-u)) 0 color-mix(in srgb, var(--ground) 55%, transparent)); } :root[data-jc-material="aluminum"] .jc-root .jc-dock__item[aria-current] svg, :root[data-jc-material="aluminum"] .jc-root .jc-prompt__toggle[aria-pressed="true"] svg { filter: drop-shadow(0 0 calc(5 * var(--jc-u)) color-mix(in srgb, var(--accent) 60%, transparent)); } /* the pointer's brushed streak can run right behind the placeholder: a soft * feathered backing on the ground token keeps it >= 4.5:1 (never a box) */ :root[data-jc-material="aluminum"] .jc-root { --jc-halo: 0 0 calc(1 * var(--jc-u)) color-mix(in srgb, var(--ground) 85%, transparent), 0 0 calc(3 * var(--jc-u)) color-mix(in srgb, var(--ground) 65%, transparent), 0 0 calc(9 * var(--jc-u)) color-mix(in srgb, var(--ground) 40%, transparent); } :root[data-jc-material="aluminum"] .jc-prompt__input, :root[data-jc-material="aluminum"] .jc-palette__input, :root[data-jc-material="aluminum"] .jc-prompt__input::placeholder, :root[data-jc-material="aluminum"] .jc-palette__input::placeholder { text-shadow: var(--jc-halo); } /* r2: the typed search sits on bright brushed metal under the pointer light: solid * ink (not the 0.92 mix), so with the backing above it reads >= 4.5:1 wherever the * pointer is (measured on the M5 Metal render; worst case maths in the tests) */ :root[data-jc-material="aluminum"] .jc-palette__input { color: var(--ink); } /* ceramic: the glaze's pointer highlight does the same; same soft backing */ :root[data-jc-material="ceramic"] .jc-root { --jc-halo: 0 0 calc(1 * var(--jc-u)) color-mix(in srgb, var(--ground) 85%, transparent), 0 0 calc(3 * var(--jc-u)) color-mix(in srgb, var(--ground) 65%, transparent), 0 0 calc(9 * var(--jc-u)) color-mix(in srgb, var(--ground) 40%, transparent); } :root[data-jc-material="ceramic"] .jc-prompt__input, :root[data-jc-material="ceramic"] .jc-palette__input, :root[data-jc-material="ceramic"] .jc-prompt__input::placeholder, :root[data-jc-material="ceramic"] .jc-palette__input::placeholder { text-shadow: var(--jc-halo); } :root[data-jc-material="aluminum"] .jc-dock__item, :root[data-jc-material="aluminum"] .jc-palette__option { text-shadow: none; } /* ---------- ceramic: glyphs sit on a glaze, a soft contact shadow ---------- */ :root[data-jc-material="ceramic"] .jc-root svg { filter: drop-shadow(0 calc(0.8 * var(--jc-u)) calc(1.5 * var(--jc-u)) color-mix(in srgb, var(--ground) 50%, transparent)); } /* ---------- fallback skins (html.jc-fallback: no WebGL2 or no hook) ---------- */ html.jc-fallback[data-jc-material="glass"] .jc-surface { background: color-mix(in srgb, var(--ground) 18%, transparent); -webkit-backdrop-filter: blur(calc(2 * var(--jc-u))) saturate(1.2); backdrop-filter: blur(calc(2 * var(--jc-u))) saturate(1.2); box-shadow: inset 0 0 0 var(--jc-u) color-mix(in srgb, var(--ink) 35%, transparent), inset 0 calc(2 * var(--jc-u)) calc(6 * var(--jc-u)) color-mix(in srgb, var(--ink) 12%, transparent); } html.jc-fallback[data-jc-material="aluminum"] .jc-surface { -webkit-backdrop-filter: none; backdrop-filter: none; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 calc(1 * var(--jc-u)), transparent calc(1 * var(--jc-u)) calc(3 * var(--jc-u))), linear-gradient(180deg, color-mix(in srgb, var(--ink) 32%, var(--ground)), color-mix(in srgb, var(--ink) 18%, var(--ground))); box-shadow: inset 0 var(--jc-u) 0 color-mix(in srgb, var(--ink) 40%, transparent), inset 0 calc(-1 * var(--jc-u)) 0 color-mix(in srgb, var(--ground) 60%, transparent); } html.jc-fallback[data-jc-material^="diamond"] .jc-surface { background: conic-gradient(from 20deg, color-mix(in srgb, var(--ink) 30%, transparent), transparent 12%, color-mix(in srgb, var(--ink) 22%, transparent) 25%, transparent 37%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 62%, color-mix(in srgb, var(--ink) 26%, transparent) 75%, transparent 87%, color-mix(in srgb, var(--ink) 30%, transparent)); -webkit-backdrop-filter: blur(calc(3 * var(--jc-u))) brightness(1.15) contrast(1.2); backdrop-filter: blur(calc(3 * var(--jc-u))) brightness(1.15) contrast(1.2); box-shadow: inset 0 0 0 var(--jc-u) color-mix(in srgb, var(--ink) 55%, transparent); } html.jc-fallback[data-jc-material="ceramic"] .jc-surface { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 10%, var(--ground)) 0 45%, var(--ground) 45.5%); box-shadow: inset 0 var(--jc-u) calc(2 * var(--jc-u)) color-mix(in srgb, var(--ink) 25%, transparent), 0 calc(6 * var(--jc-u)) calc(14 * var(--jc-u)) color-mix(in srgb, var(--ground) 70%, transparent); } html.jc-fallback[data-jc-material="water"] .jc-surface { background: color-mix(in srgb, var(--accent) 6%, transparent); -webkit-backdrop-filter: blur(calc(0.6 * var(--jc-u))) saturate(1.15); backdrop-filter: blur(calc(0.6 * var(--jc-u))) saturate(1.15); box-shadow: inset 0 0 0 var(--jc-u) color-mix(in srgb, var(--ink) 42%, transparent), inset 0 calc(2 * var(--jc-u)) calc(5 * var(--jc-u)) color-mix(in srgb, var(--ink) 16%, transparent), 0 calc(2 * var(--jc-u)) calc(6 * var(--jc-u)) color-mix(in srgb, var(--ground) 30%, transparent); } @media (prefers-reduced-motion: reduce) { :root[data-jc-material] .jc-root, :root[data-jc-material] .jc-root * { transition: none !important; } } /* Hairline finish: its ground-token center needs no halos or wide crown inset. * Fallback is explicitly a flat neutral edge, never counterfeit dispersion. */ :root[data-jc-material="diamond-edge"] .jc-root { --jc-halo: none; } :root[data-jc-material="diamond-edge"] .jc-root svg, :root[data-jc-material="diamond-edge"] .jc-root .jc-dock__item[aria-current] svg { filter: none; } :root[data-jc-material="diamond-edge"] .jc-dock__dot { box-shadow: none; } :root[data-jc-material="diamond-edge"] .ja-panel { width: min(calc(400 * var(--jc-u)), calc(100vw - 32 * var(--jc-u))); padding: calc(34 * var(--jc-u)) calc(36 * var(--jc-u)) calc(30 * var(--jc-u)); } :root[data-jc-material="diamond-edge"] .ja-back { top: calc(28 * var(--jc-u)); right: calc(28 * var(--jc-u)); } :root[data-jc-material="diamond-edge"] .jc-palette__panel { padding: calc(12 * var(--jc-u)) calc(14 * var(--jc-u)); } html.jc-fallback[data-jc-material="diamond-edge"] .jc-surface { background: var(--ground); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, var(--ground)); } /* Focus belongs to the shared field; remove the global extra box-shadow. * Text inputs retain their existing owned focus well and caret. */ :root[data-jc-material="diamond-edge"] .jc-root :focus-visible:not(.ja-input) { box-shadow: none; }