/* css/tokens.css */ /* Nexus design tokens (ADR-011/013). Themes override these custom properties in @layer theme; components only ever read tokens. */ @layer reset, tokens, core, components, app, theme, overrides; @font-face { font-family: "Inter"; src: url("/vendor/inter-5.3.0.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* The themes' fonts (ADR-074), vendored: each downloads only on a page whose look uses it. */ @font-face { font-family: "Instrument Serif"; src: url("/vendor/instrument-serif-5.3.0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("/vendor/space-grotesk-5.3.0.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/vendor/jetbrains-mono-5.3.0.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } @layer tokens { :root { color-scheme: light dark; /* Typography */ --nx-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nx-font-serif: ui-serif, Georgia, "Times New Roman", serif; --nx-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --nx-font-heading: var(--nx-font-sans); --nx-text-xs: .75rem; --nx-text-sm: .875rem; --nx-text-md: 1rem; --nx-text-lg: 1.125rem; --nx-text-xl: 1.375rem; --nx-text-2xl: 1.75rem; --nx-text-3xl: clamp(2rem, 1.5rem + 2vw, 2.75rem); --nx-leading: 1.55; --nx-leading-tight: 1.2; --nx-weight-regular: 400; --nx-weight-medium: 500; --nx-weight-bold: 650; --nx-tracking-caps: .06em; /* Headings' weight and tracking: a theme's type scale sets them with the heading steps (ADR-074). */ --nx-heading-weight: var(--nx-weight-bold); --nx-heading-tracking: normal; /* Small headings (h3, h4, card titles): the heading font unless a type scale says otherwise (editorial: the body font, bold). */ --nx-font-subheading: var(--nx-font-heading); --nx-subheading-weight: var(--nx-heading-weight); /* Type roles: what a piece of text is, not its size. A field's name, the help under it, a section's heading. */ --nx-type-label-size: var(--nx-text-sm); --nx-type-label-weight: var(--nx-weight-medium); --nx-type-help-size: var(--nx-text-xs); --nx-type-help-weight: var(--nx-weight-regular); --nx-type-section-size: var(--nx-text-xs); --nx-type-section-weight: var(--nx-weight-medium); --nx-type-section-tracking: var(--nx-tracking-caps); /* Space (4px grid) */ --nx-space-1: .25rem; --nx-space-2: .5rem; --nx-space-3: .75rem; --nx-space-4: 1rem; --nx-space-5: 1.25rem; --nx-space-6: 1.5rem; --nx-space-8: 2rem; --nx-space-10: 2.5rem; --nx-space-12: 3rem; --nx-space-16: 4rem; /* Shape and depth */ --nx-radius-sm: 6px; --nx-radius: 10px; --nx-radius-lg: 16px; --nx-radius-pill: 999px; --nx-border-width: 1px; --nx-shadow-sm: 0 1px 2px rgb(0 0 0 / .06); --nx-shadow: 0 2px 8px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .06); --nx-shadow-lg: 0 16px 48px rgb(0 0 0 / .18); /* A control's own shadow: none, but a hard-edged theme gives buttons one (ADR-074). */ --nx-shadow-control: none; /* A status badge's outline: none, but an outlined theme draws one in the status colour, so meaning isn't carried by a tint alone. */ --nx-status-outline: transparent; /* A theme's texture under the page (ADR-074): gradients only. */ --nx-texture: none; /* The focus ring (a theme may thicken it, ADR-074). */ --nx-focus-width: 3px; --nx-focus-offset: 2px; /* Motion (DS12, ADR-068). Durations are scaled by the person's speed (and zero with motion off); curves follow the animation principles. Stylesheets use these, never their own times or curves. */ --nx-motion-scale: 1; /* A theme's personality (ADR-074): tempo and travel only ever reduce (0 to 1); the person's speed and level still apply on top. */ --nx-motion-tempo: 1; --nx-motion-travel: 1; --nx-duration-instant: calc(60ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration-fast: calc(120ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration: calc(200ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration-slow: calc(320ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration-slower: calc(480ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration-linger: calc(1600ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); /* a live change's wash */ /* Arrives fast and settles (the default). */ --nx-ease: cubic-bezier(.2, .7, .2, 1); --nx-ease-enter: cubic-bezier(.16, 1, .3, 1); /* Leaves: gathers speed as it goes. */ --nx-ease-exit: cubic-bezier(.7, 0, .84, 0); /* Place to place: slow in, fast middle, slow out. */ --nx-ease-in-out: cubic-bezier(.65, 0, .35, 1); /* Anticipation: draws back a little before it goes. */ --nx-ease-anticipate: cubic-bezier(.36, 0, .66, -.56); /* Follow-through: carries a little past, then settles. */ --nx-ease-follow: cubic-bezier(.34, 1.56, .64, 1); /* How far things travel, and how small they start. */ --nx-motion-shift: calc(12px * var(--nx-motion-travel)); --nx-motion-grow: calc(1 - .04 * var(--nx-motion-travel)); /* Layout */ --nx-content-width: 72rem; --nx-sidebar-width: 15rem; --nx-header-height: 3.5rem; --nx-tap-target: 44px; /* One height for every control (text, number, money, date, select, link picker, read-only value), so fields in a row line up (07 A1). Compact density shrinks it with the tap target. */ --nx-control-h: var(--nx-tap-target); --nx-z-sticky: 10; --nx-z-overlay: 50; --nx-z-toast: 60; /* Colour (light) — all text pairs meet WCAG 2.2 AA (4.5:1). */ --nx-color-bg: #f7f7f5; --nx-color-surface: #ffffff; --nx-color-surface-2: #f0f0ed; /* Surface roles: inputs sit in the page, menus above it, dialogs over it. Derived from the surface, so a theme's surface carries through. */ --nx-color-surface-sunken: var(--nx-color-surface); --nx-color-surface-raised: var(--nx-color-surface); --nx-color-surface-overlay: var(--nx-color-surface); --nx-color-text: #1b1b19; --nx-color-text-muted: #55554f; --nx-color-border: #dcdcd6; --nx-color-border-strong: #8a8a82; --nx-color-accent: #2d4bb8; --nx-color-accent-hover: #233c96; --nx-color-accent-contrast: #ffffff; --nx-color-accent-soft: #e6ebfa; --nx-color-focus: #2d4bb8; --nx-color-danger: #a4221f; --nx-color-danger-contrast: #ffffff; --nx-color-danger-soft: #fbe9e8; --nx-color-success: #1d6b37; --nx-color-success-soft: #e5f4ea; --nx-color-warning: #8a5300; --nx-color-warning-soft: #fdf1dc; --nx-color-info: #1f5a94; --nx-color-info-soft: #e5eff9; /* An agent's work (07 §5.5): violet, beside people's accent blue. */ --nx-color-agent: #6b3fc4; --nx-color-agent-soft: #efe8fb; --nx-color-agent-contrast: #ffffff; --nx-color-sold: #a4221f; --nx-color-overlay: rgb(20 20 18 / .45); /* Placeholders: a step from the second surface toward the text, so a theme's surfaces carry through (ADR-074). */ --nx-color-skeleton: color-mix(in srgb, var(--nx-color-text) 9%, var(--nx-color-surface-2)); } /* Dark palette: automatic, or forced with data-theme="dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nx-color-bg: #121211; --nx-color-surface: #1b1b19; --nx-color-surface-2: #242421; --nx-color-surface-sunken: color-mix(in srgb, var(--nx-color-surface) 50%, var(--nx-color-bg)); --nx-color-surface-raised: var(--nx-color-surface-2); --nx-color-surface-overlay: color-mix(in srgb, var(--nx-color-surface-2) 94%, #ffffff); --nx-color-text: #f2f2ee; --nx-color-text-muted: #b3b3aa; --nx-color-border: #34342f; --nx-color-border-strong: #727269; --nx-color-accent: #8ea6ff; --nx-color-accent-hover: #adc0ff; --nx-color-accent-contrast: #0e1433; --nx-color-accent-soft: #1f2748; --nx-color-focus: #8ea6ff; --nx-color-danger: #ff8f88; --nx-color-danger-contrast: #2b0a08; --nx-color-danger-soft: #3a1a18; --nx-color-success: #7fd49a; --nx-color-success-soft: #16301f; --nx-color-warning: #f0bd6a; --nx-color-warning-soft: #33250f; --nx-color-info: #8cc0f5; --nx-color-info-soft: #152a40; --nx-color-agent: #c3a6ff; --nx-color-agent-soft: #2a2044; --nx-color-agent-contrast: #1d1235; --nx-color-sold: #ff8f88; --nx-color-overlay: rgb(0 0 0 / .6); --nx-color-skeleton: color-mix(in srgb, var(--nx-color-text) 12%, var(--nx-color-surface-2)); --nx-shadow: 0 2px 8px rgb(0 0 0 / .4); --nx-shadow-lg: 0 16px 48px rgb(0 0 0 / .55); } } :root[data-theme="dark"] { color-scheme: dark; --nx-color-bg: #121211; --nx-color-surface: #1b1b19; --nx-color-surface-2: #242421; --nx-color-surface-sunken: color-mix(in srgb, var(--nx-color-surface) 50%, var(--nx-color-bg)); --nx-color-surface-raised: var(--nx-color-surface-2); --nx-color-surface-overlay: color-mix(in srgb, var(--nx-color-surface-2) 94%, #ffffff); --nx-color-text: #f2f2ee; --nx-color-text-muted: #b3b3aa; --nx-color-border: #34342f; --nx-color-border-strong: #727269; --nx-color-accent: #8ea6ff; --nx-color-accent-hover: #adc0ff; --nx-color-accent-contrast: #0e1433; --nx-color-accent-soft: #1f2748; --nx-color-focus: #8ea6ff; --nx-color-danger: #ff8f88; --nx-color-danger-contrast: #2b0a08; --nx-color-danger-soft: #3a1a18; --nx-color-success: #7fd49a; --nx-color-success-soft: #16301f; --nx-color-warning: #f0bd6a; --nx-color-warning-soft: #33250f; --nx-color-info: #8cc0f5; --nx-color-info-soft: #152a40; --nx-color-agent: #c3a6ff; --nx-color-agent-soft: #2a2044; --nx-color-agent-contrast: #1d1235; --nx-color-sold: #ff8f88; --nx-color-overlay: rgb(0 0 0 / .6); --nx-color-skeleton: color-mix(in srgb, var(--nx-color-text) 12%, var(--nx-color-surface-2)); } :root[data-theme="light"] { color-scheme: light; } } /* Motion settings (DS12, ADR-068), written on : the speed scales every duration; Gentle keeps fades and drops movement; None (and the device's Reduce motion, in base.css) changes at once. */ @layer tokens { :root[data-nx-speed="relaxed"] { --nx-motion-scale: 1.4; } :root[data-nx-speed="brisk"] { --nx-motion-scale: .65; } :root[data-nx-motion="gentle"] { --nx-motion-shift: 0px; --nx-motion-grow: 1; --nx-ease-follow: var(--nx-ease); --nx-ease-anticipate: var(--nx-ease-exit); } :root[data-nx-motion="off"] { --nx-motion-scale: 0; --nx-motion-shift: 0px; --nx-motion-grow: 1; } @media (prefers-reduced-motion: reduce) { :root, :root[data-nx-speed], :root[data-nx-motion] { --nx-motion-scale: 0; --nx-motion-shift: 0px; --nx-motion-grow: 1; } } } /* css/base.css */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } img, picture, svg, video { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } :where([hidden]) { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* motion-lint: keep */ } /* Motion set to None (DS12) is the same as the device's Reduce motion. */ :root[data-nx-motion="off"] *, :root[data-nx-motion="off"] *::before, :root[data-nx-motion="off"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* motion-lint: keep */ } @layer core { /* No rubber-band bounce, pull-to-refresh or swipe-back from the page itself (08 §4); strips that scroll sideways contain their own. */ html { scroll-padding-top: calc(var(--nx-header-height) + var(--nx-space-4)); overscroll-behavior: none; } body { overflow-x: clip; } body { min-height: 100dvh; font-family: var(--nx-font-sans); font-size: var(--nx-text-md); line-height: var(--nx-leading); background: var(--nx-texture), var(--nx-color-bg); color: var(--nx-color-text); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--nx-font-heading); line-height: var(--nx-leading-tight); font-weight: var(--nx-heading-weight); letter-spacing: var(--nx-heading-tracking); text-wrap: balance; } h1 { font-size: var(--nx-text-2xl); } h2 { font-size: var(--nx-text-xl); } h3 { font-size: var(--nx-text-lg); } h3, h4 { font-family: var(--nx-font-subheading); font-weight: var(--nx-subheading-weight); letter-spacing: normal; } /* Controls a browser draws (sliders, checkboxes) in the theme's accent. */ :root { accent-color: var(--nx-color-accent); } p { text-wrap: pretty; } a { color: var(--nx-color-accent); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--nx-color-accent-hover); } code, kbd, pre { font-family: var(--nx-font-mono); font-size: .92em; } pre { overflow: auto; padding: var(--nx-space-3); background: var(--nx-color-surface-2); border-radius: var(--nx-radius-sm); } kbd { padding: 0 .35em; border: 1px solid var(--nx-color-border-strong); border-bottom-width: 2px; border-radius: 4px; font-size: .8em; } hr { border: 0; border-top: 1px solid var(--nx-color-border); margin: var(--nx-space-6) 0; } :focus-visible { outline: var(--nx-focus-width) solid var(--nx-color-focus); outline-offset: var(--nx-focus-offset); border-radius: 2px; } ::selection { background: var(--nx-color-accent-soft); } .nx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nx-skip-link { position: absolute; left: var(--nx-space-2); top: -4rem; z-index: 100; padding: var(--nx-space-2) var(--nx-space-4); background: var(--nx-color-surface); border-radius: var(--nx-radius-sm); box-shadow: var(--nx-shadow); } .nx-skip-link:focus { top: var(--nx-space-2); } .nx-muted { color: var(--nx-color-text-muted); } .nx-stack > * + * { margin-top: var(--nx-space-4); } .nx-stack-sm > * + * { margin-top: var(--nx-space-2); } .nx-stack-lg > * + * { margin-top: var(--nx-space-8); } .nx-row { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); align-items: center; } .nx-row-between { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); align-items: center; justify-content: space-between; } .nx-grid { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .nx-container { width: min(100% - 2 * var(--nx-space-4), var(--nx-content-width)); margin-inline: auto; } .nx-num { font-variant-numeric: tabular-nums; } .nx-ok { color: var(--nx-color-success); } .nx-bad { color: var(--nx-color-danger); } .nx-status { display: grid; grid-template-columns: max-content 1fr; gap: var(--nx-space-2) var(--nx-space-4); } .nx-status dt { color: var(--nx-color-text-muted); } } /* css/components.css */ @layer components { /* Button ---------------------------------------------------------- */ .nx-btn { --_bg: var(--nx-color-surface); --_fg: var(--nx-color-text); --_bd: var(--nx-color-border-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--nx-space-2); min-height: var(--nx-tap-target); padding: 0 var(--nx-space-4); border: var(--nx-border-width) solid var(--_bd); border-radius: var(--nx-radius-sm); background: var(--_bg); color: var(--_fg); font-weight: var(--nx-weight-medium); font-size: var(--nx-text-sm); text-decoration: none; white-space: nowrap; line-height: 1; transition: background var(--nx-duration-fast) var(--nx-ease), border-color var(--nx-duration-fast) var(--nx-ease), transform var(--nx-duration-fast) var(--nx-ease); box-shadow: var(--nx-shadow-control); /* a theme's hard edge (ADR-074) */ } .nx-btn:hover { background: var(--nx-color-surface-2); color: var(--_fg); } .nx-btn:active { transform: translateY(1px); } .nx-btn[disabled], .nx-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } .nx-btn--primary { --_bg: var(--nx-color-accent); --_fg: var(--nx-color-accent-contrast); --_bd: var(--nx-color-accent); } .nx-btn--primary:hover { background: var(--nx-color-accent-hover); border-color: var(--nx-color-accent-hover); } .nx-btn--danger { --_bg: var(--nx-color-danger); --_fg: var(--nx-color-danger-contrast); --_bd: var(--nx-color-danger); } .nx-btn--danger:hover { background: var(--nx-color-danger); filter: brightness(.92); } .nx-btn--ghost { --_bg: transparent; --_bd: transparent; box-shadow: none; } .nx-btn--sm { min-height: 2rem; padding: 0 var(--nx-space-3); } .nx-btn--lg { min-height: 3.25rem; padding: 0 var(--nx-space-6); font-size: var(--nx-text-md); } .nx-btn--block { width: 100%; } .nx-btn--icon { padding: 0; width: var(--nx-tap-target); } .nx-btn .htmx-indicator { display: none; } .htmx-request .nx-btn .htmx-indicator, .nx-btn.htmx-request .htmx-indicator, form.htmx-request .nx-btn[type=submit] .htmx-indicator { display: inline-block; } .nx-btn .htmx-indicator { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nx-spin .7s linear infinite; } /* motion-lint: keep: a spinner turns at its own speed */ @keyframes nx-spin { to { transform: rotate(360deg); } } /* Fields (07 D8, A1) ------------------------------------------------ One structure for every field (components.FieldFrame): a label row, a control row and a help row. Every control is --nx-control-h tall. In a grid of fields (.nx-form-grid, a record section) each field shares the grid's three rows (subgrid), so controls in a row line up however long their labels or help are. */ .nx-field { position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; min-width: 0; } .nx-field + .nx-field { margin-top: var(--nx-space-4); } .nx-field > .nx-f__label { grid-row: 1; align-self: end; padding-bottom: var(--nx-space-1); } .nx-field > .nx-f__label:empty { padding: 0; } .nx-field > .nx-f__control { grid-row: 2; position: relative; display: grid; min-width: 0; } .nx-field > .nx-f__help { grid-row: 3; min-width: 0; padding-top: var(--nx-space-1); } .nx-label, .nx-f__label { font-size: var(--nx-type-label-size); font-weight: var(--nx-type-label-weight); } .nx-label .nx-req, .nx-check .nx-req { color: var(--nx-color-danger); margin-left: .15em; } .nx-help, .nx-f__help { font-size: var(--nx-type-help-size); font-weight: var(--nx-type-help-weight); color: var(--nx-color-text-muted); } .nx-f__help > p { margin: 0; overflow-wrap: anywhere; } .nx-error { font-size: var(--nx-type-label-size); color: var(--nx-color-danger); font-weight: var(--nx-weight-medium); } .nx-need { display: inline-block; width: .45rem; height: .45rem; margin-left: .35em; border-radius: 50%; background: var(--nx-color-warning); vertical-align: middle; } .nx-f__needed { color: var(--nx-color-warning); } .nx-section-title { font-size: var(--nx-type-section-size); font-weight: var(--nx-type-section-weight); letter-spacing: var(--nx-type-section-tracking); text-transform: uppercase; color: var(--nx-color-text-muted); } /* Controls: one height for text, number, date, select, affixed and read-only values (selects drawn without the platform's own box, which sizes itself). */ .nx-input, .nx-select, .nx-textarea { width: 100%; min-width: 0; padding: var(--nx-space-2) var(--nx-space-3); border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background-color: var(--nx-color-surface-sunken); color: var(--nx-color-text); } .nx-input:not(textarea), .nx-select:not([multiple], [size]) { height: var(--nx-control-h); padding-block: 0; } .nx-input[type="file"] { height: auto; min-height: var(--nx-control-h); padding-block: calc((var(--nx-control-h) - 2px - 1.75rem) / 2); } .nx-input[type="file"]::file-selector-button { height: 1.75rem; margin-right: var(--nx-space-3); padding: 0 var(--nx-space-3); border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-2); color: var(--nx-color-text); font: inherit; font-size: var(--nx-text-sm); } .nx-select:not([multiple], [size]) { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1rem) 52%, calc(100% - .7rem) 52%; background-size: .3rem .3rem; background-repeat: no-repeat; } .nx-textarea, textarea.nx-input { min-height: 6rem; resize: vertical; } .nx-field .nx-textarea { min-height: 5.5rem; } .nx-input:focus-visible, .nx-select:focus-visible, .nx-textarea:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 0; border-color: var(--nx-color-focus); } .nx-input[aria-invalid="true"], .nx-select[aria-invalid="true"], .nx-textarea[aria-invalid="true"] { border-color: var(--nx-color-danger); } .nx-check { display: flex; align-items: center; gap: var(--nx-space-2); min-height: var(--nx-control-h); } .nx-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--nx-color-accent); } .nx-toggle { display: flex; align-items: center; gap: var(--nx-space-2); height: var(--nx-control-h); } .nx-toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--nx-color-accent); } .nx-affix { display: flex; align-items: center; height: var(--nx-control-h); min-width: 0; border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-sunken); } .nx-affix:focus-within { outline: 3px solid var(--nx-color-focus); border-color: var(--nx-color-focus); } .nx-affix .nx-input { flex: 1; height: 100%; border: 0; background: transparent; outline: none; } .nx-affix__p { padding-left: var(--nx-space-3); color: var(--nx-color-text-muted); } .nx-affix__s { padding-right: var(--nx-space-3); color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); } /* A value that can't be changed here: the control's size, a dashed edge, and long values (emails, addresses, ids) wrap inside it. */ .nx-f__ro { display: flex; align-items: center; gap: var(--nx-space-2); min-width: 0; min-height: var(--nx-control-h); margin: 0; padding: var(--nx-space-1) var(--nx-space-3); border: 1px dashed var(--nx-color-border); border-radius: var(--nx-radius-sm); color: var(--nx-color-text-muted); overflow-wrap: anywhere; } /* On a form a read-only value keeps the control's height: one line, cut short with an ellipsis. */ .nx-f__ro { white-space: nowrap; overflow: hidden; } output.nx-f__ro { display: block; line-height: calc(var(--nx-control-h) - 2px - 2 * var(--nx-space-1)); text-overflow: ellipsis; } output.nx-f__ro > * { line-height: var(--nx-leading); vertical-align: middle; } .nx-f__ro > span:not(.nx-link-btn) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nx-f__ro .nx-link-btn { flex: none; margin-left: auto; overflow-wrap: normal; } /* A panel's fact (Value): the whole value, wrapped inside its box. */ .nx-f--value .nx-f__ro { display: block; padding-block: calc((var(--nx-control-h) - 2px - 1lh) / 2); color: var(--nx-color-text); white-space: normal; overflow: visible; } .nx-f--value .nx-f__ro > * { white-space: normal; } .nx-f--value address { font-style: normal; } .nx-f--total .nx-f__ro { font-weight: var(--nx-weight-bold); } .nx-values { margin: 0; } /* A link to another record (a record's link field): the linked record as a chip, and a search to change it. The control's height too. */ .nx-link { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1); min-height: var(--nx-control-h); padding: var(--nx-space-1); border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-sunken); } .nx-link:focus-within { outline: 3px solid var(--nx-color-focus); border-color: var(--nx-color-focus); } .nx-link__chip { display: inline-flex; align-items: center; gap: var(--nx-space-1); max-width: 100%; min-width: 0; padding: 0 var(--nx-space-1) 0 var(--nx-space-2); min-height: calc(var(--nx-control-h) - .6rem); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-2); } .nx-link__chip .nx-thumb { width: 1.6rem; height: 2rem; } .nx-link__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; } .nx-icon-btn { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--nx-radius-sm); background: none; color: var(--nx-color-text-muted); cursor: pointer; } .nx-icon-btn:hover { background: var(--nx-color-border); color: var(--nx-color-text); } .nx-link__q { flex: 1; min-width: 7rem; height: calc(var(--nx-control-h) - .6rem); padding: 0 var(--nx-space-2); border: 0; background: transparent; outline: none; color: inherit; } .nx-link__chip ~ .nx-link__q:not(:focus)::placeholder { color: transparent; } .nx-f.is-missing :is(.nx-input, .nx-select, .nx-textarea, .nx-affix, .nx-link__q) { border-color: var(--nx-color-warning); background-color: color-mix(in srgb, var(--nx-color-warning-soft) 65%, var(--nx-color-surface)); } /* Autosave's status sits at the end of the label row (live.js). */ .nx-f > .nx-save { grid-row: 1; grid-column: 1 / -1; justify-self: end; align-self: end; margin: 0; padding-bottom: var(--nx-space-1); } .nx-f > .nx-conflict { grid-column: 1 / -1; } /* A grid of fields: they share its rows, so controls line up. */ .nx-form-grid { display: grid; column-gap: var(--nx-space-4); row-gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); } .nx-form-grid--measure { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); } .nx-form-grid > .nx-field { grid-row: span 3; grid-template-rows: subgrid; margin-top: 0; padding-bottom: var(--nx-space-3); } .nx-form-grid > :not(.nx-field) { align-self: start; } .nx-span-all { grid-column: 1 / -1; } /* Field styles, per person (07 D8): the container says which. Inline: the field's name inside the box, at the end. */ .nx-fields--inline .nx-f--boxed { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c l" "h h"; grid-template-rows: auto auto; } .nx-fields--inline .nx-f--boxed::before { content: ""; grid-row: 1; grid-column: 1 / -1; border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-sunken); } .nx-fields--inline .nx-f--boxed > .nx-f__control { grid-area: c; z-index: 1; min-width: 0; } .nx-fields--inline .nx-f--boxed > .nx-f__label { grid-area: l; z-index: 1; align-self: center; padding: 0 var(--nx-space-3) 0 var(--nx-space-1); font-size: var(--nx-type-help-size); font-weight: var(--nx-weight-regular); color: var(--nx-color-text-muted); white-space: nowrap; } .nx-fields--inline .nx-f--boxed > .nx-f__help { grid-area: h; } .nx-fields--inline .nx-f--boxed > .nx-save { grid-area: h; justify-self: end; align-self: start; padding: var(--nx-space-1) 0 0; } .nx-fields--inline .nx-f--boxed > .nx-f__control :is(.nx-input, .nx-select, .nx-affix, .nx-link, .nx-f__ro) { border-color: transparent; background-color: transparent; outline: none; } .nx-fields--inline .nx-f--boxed:focus-within::before { border-color: var(--nx-color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-color-focus) 30%, transparent); } .nx-fields--inline .nx-f--boxed:focus-within > .nx-f__label { color: var(--nx-color-accent); } .nx-fields--inline .nx-f--boxed.is-missing::before { border-color: var(--nx-color-warning); background: color-mix(in srgb, var(--nx-color-warning-soft) 65%, var(--nx-color-surface)); } .nx-fields--inline .nx-f--boxed.is-ro::before { border-style: dashed; border-color: var(--nx-color-border); background: transparent; } /* Stacked: the name above; name, control and help rows are shared. */ .nx-fields--stacked .nx-f > .nx-f__help { min-height: 1.25rem; } /* Sheet: name left, value right, borders only when touched. */ .nx-fields--sheet .nx-f { grid-column: 1 / -1; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; padding: var(--nx-space-1) 0; border-bottom: 1px solid var(--nx-color-border); } .nx-fields--sheet .nx-f > .nx-f__label { grid-row: 1; grid-column: 1; align-self: start; padding: calc((var(--nx-control-h) - 1.4em) / 2) 0 0; font-weight: var(--nx-weight-regular); color: var(--nx-color-text-muted); } .nx-fields--sheet .nx-f > .nx-f__control { grid-row: 1; grid-column: 2; } .nx-fields--sheet .nx-f > .nx-f__help { grid-row: 2; grid-column: 2; min-height: 0; padding-left: var(--nx-space-3); } .nx-fields--sheet .nx-f > .nx-f__help:empty, .nx-fields--sheet .nx-f > .nx-f__help:not(:has(:not(:empty))) { display: none; } .nx-fields--sheet .nx-f :is(.nx-input, .nx-select, .nx-textarea, .nx-affix, .nx-link, .nx-f__ro) { border-color: transparent; background-color: transparent; } .nx-fields--sheet .nx-f:hover :is(.nx-input, .nx-select, .nx-textarea, .nx-affix, .nx-link) { background-color: var(--nx-color-surface-2); } .nx-fields--sheet .nx-f :is(.nx-input, .nx-select, .nx-textarea):focus, .nx-fields--sheet .nx-f :is(.nx-affix, .nx-link):focus-within { border-color: var(--nx-color-focus); background-color: var(--nx-color-surface); } .nx-fields--sheet .nx-f:not(:hover) .nx-select:not(:focus) { background-image: none; } .nx-form-actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); margin-top: var(--nx-space-6); } fieldset.nx-fieldset { border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-4); } fieldset.nx-fieldset legend { padding: 0 var(--nx-space-2); font-weight: var(--nx-weight-bold); } /* Card ------------------------------------------------------------ */ .nx-card { background: var(--nx-color-surface); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-5); box-shadow: var(--nx-shadow-sm); } .nx-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-space-3); margin-bottom: var(--nx-space-4); } .nx-card__title { font-size: var(--nx-text-lg); } /* Badge ----------------------------------------------------------- */ .nx-badge { display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em; border-radius: var(--nx-radius-pill); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); background: var(--nx-color-surface-2); color: var(--nx-color-text); border: var(--nx-border-width) solid var(--nx-color-border); white-space: nowrap; } .nx-badge--success { background: var(--nx-color-success-soft); color: var(--nx-color-success); border-color: var(--nx-status-outline); } .nx-badge--warning { background: var(--nx-color-warning-soft); color: var(--nx-color-warning); border-color: var(--nx-status-outline); } .nx-badge--danger { background: var(--nx-color-danger-soft); color: var(--nx-color-danger); border-color: var(--nx-status-outline); } .nx-badge--info { background: var(--nx-color-info-soft); color: var(--nx-color-info); border-color: var(--nx-status-outline); } .nx-badge--accent { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); border-color: var(--nx-status-outline); } /* Table ----------------------------------------------------------- */ .nx-table-wrap { overflow-x: auto; border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-table { width: 100%; border-collapse: collapse; font-size: var(--nx-text-sm); } .nx-table caption { text-align: left; padding: var(--nx-space-3) var(--nx-space-4); font-weight: var(--nx-weight-bold); } .nx-table th, .nx-table td { padding: var(--nx-space-3) var(--nx-space-4); text-align: left; border-bottom: 1px solid var(--nx-color-border); vertical-align: middle; } .nx-table th { font-weight: var(--nx-weight-medium); color: var(--nx-color-text-muted); background: var(--nx-color-surface-2); position: sticky; top: 0; } .nx-table tbody tr:last-child td { border-bottom: 0; } .nx-table tbody tr:hover { background: color-mix(in srgb, var(--nx-color-surface-2) 60%, transparent); } .nx-table td.nx-num, .nx-table th.nx-num { text-align: right; } /* Tabs ------------------------------------------------------------ */ .nx-tabs [role="tablist"] { display: flex; gap: var(--nx-space-1); border-bottom: 1px solid var(--nx-color-border); overflow-x: auto; } .nx-tabs [role="tab"] { min-height: var(--nx-tap-target); padding: 0 var(--nx-space-4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--nx-color-text-muted); font-weight: var(--nx-weight-medium); white-space: nowrap; } .nx-tabs [role="tab"][aria-selected="true"] { color: var(--nx-color-text); border-bottom-color: var(--nx-color-accent); } .nx-tabs [role="tabpanel"] { padding-top: var(--nx-space-4); } /* Empty state ----------------------------------------------------- */ .nx-empty { display: grid; justify-items: center; gap: var(--nx-space-3); padding: var(--nx-space-12) var(--nx-space-4); text-align: center; border: 1px dashed var(--nx-color-border-strong); border-radius: var(--nx-radius); color: var(--nx-color-text-muted); } .nx-empty__title { color: var(--nx-color-text); font-size: var(--nx-text-lg); font-weight: var(--nx-weight-bold); } /* Skeleton -------------------------------------------------------- */ .nx-skeleton { display: block; border-radius: var(--nx-radius-sm); background: var(--nx-color-skeleton); min-height: 1em; animation: nx-pulse calc(var(--nx-duration-linger) * .875) var(--nx-ease-in-out) infinite; } .nx-skeleton--text { height: 1em; margin: .35em 0; } .nx-skeleton--block { height: 8rem; } .nx-w0 { width: 100%; } .nx-w1 { width: 92%; } .nx-w2 { width: 78%; } .nx-w3 { width: 85%; } .nx-w4 { width: 60%; } @keyframes nx-pulse { 50% { opacity: .5; } } /* Alerts ---------------------------------------------------------- */ .nx-alert { padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius-sm); border-left: 4px solid var(--nx-color-info); background: var(--nx-color-info-soft); } .nx-alert--danger { border-color: var(--nx-color-danger); background: var(--nx-color-danger-soft); } .nx-alert--warning { border-color: var(--nx-color-warning); background: var(--nx-color-warning-soft); } /* Dialog & sheet (native ) -------------------------------- */ .nx-dialog { width: min(100% - 2 * var(--nx-space-4), 32rem); max-height: calc(100dvh - 2 * var(--nx-space-8)); padding: 0; border: 0; border-radius: var(--nx-radius-lg); background: var(--nx-color-surface); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-dialog::backdrop { background: var(--nx-color-overlay); } .nx-dialog[open] { animation: nx-pop var(--nx-duration) var(--nx-ease-follow); } .nx-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-3); padding: var(--nx-space-4) var(--nx-space-5); border-bottom: 1px solid var(--nx-color-border); } .nx-dialog__title { font-size: var(--nx-text-lg); } .nx-dialog__body { padding: var(--nx-space-5); overflow: auto; } .nx-dialog__footer { display: flex; justify-content: flex-end; gap: var(--nx-space-3); padding: var(--nx-space-4) var(--nx-space-5); border-top: 1px solid var(--nx-color-border); } @keyframes nx-pop { from { opacity: 0; transform: translateY(calc(var(--nx-motion-shift) * .66)) scale(calc(1 - (1 - var(--nx-motion-grow)) / 2)); } } .nx-sheet { margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; inset: auto 0 0 0; border-radius: var(--nx-radius-lg) var(--nx-radius-lg) 0 0; padding: 0; border: 0; background: var(--nx-color-surface); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-sheet[open] { display: flex; flex-direction: column; animation: nx-slide-up var(--nx-duration-slow) var(--nx-ease-enter); } .nx-sheet::backdrop { background: var(--nx-color-overlay); } .nx-sheet__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-color-surface); border-bottom: 1px solid var(--nx-color-border); } .nx-sheet__body { flex: 1; overflow: auto; overscroll-behavior: contain; } @keyframes nx-slide-up { from { transform: translateY(calc(var(--nx-motion-shift) * 2)); opacity: .6; } } @media (min-width: 48rem) { .nx-sheet { inset: 0 0 0 auto; width: min(64rem, 92vw); height: 100dvh; border-radius: 0; } @keyframes nx-slide-up { from { transform: translateX(calc(var(--nx-motion-shift) * 2.66)); opacity: .6; } } } /* Toast ----------------------------------------------------------- */ .nx-toasts { position: fixed; z-index: var(--nx-z-toast); inset: auto var(--nx-space-4) var(--nx-space-4) auto; display: grid; gap: var(--nx-space-2); max-width: min(24rem, calc(100vw - 2 * var(--nx-space-4))); } .nx-toast { display: flex; gap: var(--nx-space-3); align-items: start; padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius); background: var(--nx-color-text); color: var(--nx-color-bg); box-shadow: var(--nx-shadow-lg); animation: nx-pop var(--nx-duration) var(--nx-ease-follow); } .nx-toast__close { margin-left: auto; background: none; border: 0; color: inherit; min-width: 2rem; min-height: 2rem; } .nx-toast--danger { background: var(--nx-color-danger); color: var(--nx-color-danger-contrast); } /* Command palette ------------------------------------------------- */ .nx-palette { width: min(100% - 2 * var(--nx-space-4), 40rem); margin-top: 12vh; padding: 0; border: 0; border-radius: var(--nx-radius-lg); background: var(--nx-color-surface); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-palette::backdrop { background: var(--nx-color-overlay); } .nx-palette__input { width: 100%; border: 0; border-bottom: 1px solid var(--nx-color-border); padding: var(--nx-space-4) var(--nx-space-5); font-size: var(--nx-text-lg); background: transparent; } .nx-palette__input:focus-visible { outline: none; } .nx-palette__list { list-style: none; margin: 0; padding: var(--nx-space-2); max-height: 50vh; overflow: auto; } .nx-palette__item { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-sm); cursor: pointer; min-height: var(--nx-tap-target); } .nx-palette__item[aria-selected="true"] { background: var(--nx-color-accent-soft); } a.nx-palette__item { color: inherit; text-decoration: none; } .nx-palette__meta { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); font-family: var(--nx-font-mono); } .nx-palette__hint { padding: var(--nx-space-2) var(--nx-space-5); border-top: 1px solid var(--nx-color-border); font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-slash-menu { position: absolute; z-index: var(--nx-z-overlay); min-width: 16rem; max-width: 24rem; margin: var(--nx-space-1) 0 0; padding: var(--nx-space-1); list-style: none; background: var(--nx-color-surface); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); box-shadow: var(--nx-shadow); } /* Description list ------------------------------------------------ */ .nx-dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--nx-space-2) var(--nx-space-4); } .nx-dl dt { color: var(--nx-color-text-muted); } /* Timeline (history inspector) ------------------------------------ */ .nx-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--nx-color-border); } .nx-timeline li { position: relative; padding: 0 0 var(--nx-space-4) var(--nx-space-4); } .nx-timeline li::before { content: ""; position: absolute; left: -7px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--nx-color-surface); border: 2px solid var(--nx-color-accent); } } @layer components { /* Pattern library helpers */ .nx-swatches { display: grid; gap: var(--nx-space-3); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } .nx-swatch { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-swatch__chip { width: 2rem; height: 2rem; border-radius: var(--nx-radius-sm); border: var(--nx-border-width) solid var(--nx-color-border-strong); } .nx-swatch--bg { background: var(--nx-color-bg); } .nx-swatch--surface { background: var(--nx-color-surface); } .nx-swatch--surface-2 { background: var(--nx-color-surface-2); } .nx-swatch--text { background: var(--nx-color-text); } .nx-swatch--text-muted { background: var(--nx-color-text-muted); } .nx-swatch--border { background: var(--nx-color-border); } .nx-swatch--accent { background: var(--nx-color-accent); } .nx-swatch--danger { background: var(--nx-color-danger); } .nx-swatch--success { background: var(--nx-color-success); } .nx-swatch--warning { background: var(--nx-color-warning); } .nx-swatch--info { background: var(--nx-color-info); } .nx-swatch--agent { background: var(--nx-color-agent); } .nx-demo-toasts { display: grid; gap: var(--nx-space-2); max-width: 24rem; } } /* Chips: filter links and saved views. */ @layer components { .nx-chips { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); list-style: none; margin: 0; padding: 0; } .nx-chip { display: inline-flex; align-items: center; min-height: var(--nx-tap-target); padding: 0 var(--nx-space-4); border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); color: var(--nx-color-text); background: var(--nx-color-surface); text-decoration: none; font-size: var(--nx-text-sm); white-space: nowrap; } .nx-chip:hover { border-color: var(--nx-color-text); color: var(--nx-color-text); } .nx-chip[aria-current="true"], .nx-chip[aria-current="page"] { background: var(--nx-color-text); border-color: var(--nx-color-text); color: var(--nx-color-bg); } .nx-details > summary { cursor: pointer; min-height: var(--nx-tap-target); display: flex; align-items: center; color: var(--nx-color-accent); } .nx-details[open] > summary { margin-bottom: var(--nx-space-3); } .nx-narrow { max-width: 36rem; } .nx-code { font-family: var(--nx-font-mono); font-size: var(--nx-text-xs); letter-spacing: .02em; } } /* Conversations: message bubbles (staff thread and the shopper's chat). Theirs on the left, ours on the right. */ @layer components { .nx-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nx-space-4); } .nx-msg { display: flex; flex-direction: column; gap: var(--nx-space-1); max-width: min(36rem, 88%); } .nx-msg--in { align-self: flex-start; } .nx-msg--out { align-self: flex-end; align-items: flex-end; } .nx-msg__bubble { padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius-lg); background: var(--nx-color-surface-2); overflow-wrap: anywhere; } .nx-msg__bubble p { margin: 0; } .nx-msg__bubble p + p { margin-top: var(--nx-space-2); } .nx-msg--in .nx-msg__bubble { border-bottom-left-radius: var(--nx-radius-sm); } .nx-msg--out .nx-msg__bubble { background: var(--nx-color-accent-soft); border-bottom-right-radius: var(--nx-radius-sm); } .nx-msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } } /* Breadcrumbs: a wrapping trail, separators drawn by CSS (not read out). */ @layer components { .nx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1) var(--nx-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-crumbs li { display: inline-flex; align-items: center; gap: var(--nx-space-2); min-width: 0; } .nx-crumbs li + li::before { content: "/"; color: var(--nx-color-border-strong); } .nx-crumbs a { display: inline-flex; align-items: center; min-height: var(--nx-tap-target); color: inherit; text-underline-offset: .2em; } .nx-crumbs a:hover { color: var(--nx-color-text); } .nx-crumbs [aria-current="page"] { color: var(--nx-color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } } /* Sign-in pages (AuthShell): a top bar like the shop's header (the brand centred, a plain "← Back" in the top-left corner) over one centred card, in every portal, so these live here rather than in a portal's stylesheet. */ @layer components { .nx-auth { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; } .nx-auth__top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--nx-space-3); min-height: var(--nx-header-height); padding: var(--nx-space-2) var(--nx-space-4); } .nx-auth__nav { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; } .nx-auth__main { display: grid; place-items: center; padding: var(--nx-space-6) var(--nx-space-4) var(--nx-space-12); } .nx-auth__card { width: min(100%, 26rem); } .nx-auth__or { display: flex; align-items: center; gap: var(--nx-space-3); color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); } .nx-auth__or::before, .nx-auth__or::after { content: ""; flex: 1; border-top: 1px solid var(--nx-color-border); } /* The way back: an arrow and plain text (no box, no underline), a full tap target (WCAG 2.5.8); the global :focus-visible ring shows focus. */ .nx-auth__back { display: inline-flex; align-items: center; gap: .35em; min-height: var(--nx-tap-target); min-width: var(--nx-tap-target); padding: 0; border: 0; background: none; color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); text-decoration: none; } .nx-auth__back:hover { color: var(--nx-color-text); } .nx-auth__brand { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; text-align: center; font-family: var(--nx-font-heading); font-size: var(--nx-text-xl); letter-spacing: .02em; } .nx-auth__brand a { color: var(--nx-color-text); text-decoration: none; } .nx-auth__brand a:hover { text-decoration: underline; text-underline-offset: .25em; } /* A phone: the way back keeps the corner, the brand centres under it. */ @media (max-width: 30rem) { .nx-auth__top { grid-template-columns: minmax(0, 1fr); gap: 0; } .nx-auth__brand { grid-column: 1; grid-row: 2; } } } /* A count beside a navigation link (bag, inbox, to pack). */ @layer components { .nx-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; margin-left: var(--nx-space-1); padding: 0 .35rem; border-radius: var(--nx-radius-pill); background: var(--nx-color-text); color: var(--nx-color-bg); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-bold); font-variant-numeric: tabular-nums; } .nx-nav .nx-nav-count { margin-left: auto; } } /* The row or piece you came back to (workspace.js, 08 §5.1). */ @layer components { .nx-returned { outline: 2px solid var(--nx-color-accent); outline-offset: 4px; border-radius: var(--nx-radius-sm); transition: outline-color calc(var(--nx-duration-linger) * .625) var(--nx-ease) calc(var(--nx-duration-linger) * .9375); } } /* Live views and autosave (live.js; ADR-028, ADR-032). */ @layer components { /* A value someone else just changed: a brief wash of the accent. */ .nx-live-changed { animation: nx-live-wash var(--nx-duration-linger) var(--nx-ease); } @keyframes nx-live-wash { from { background-color: var(--nx-color-accent-soft); } to { background-color: transparent; } } tr.nx-live-new > td, .nx-live-new { animation: nx-live-wash calc(var(--nx-duration-linger) * 1.5) var(--nx-ease); } @media (prefers-reduced-motion: reduce) { .nx-live-changed, tr.nx-live-new > td, .nx-live-new { animation: none; outline: 2px solid var(--nx-color-accent); outline-offset: 2px; } } /* "Changed by Sam: … Keep yours / Use theirs" under a field. */ .nx-conflict { margin-top: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3); border: 1px solid var(--nx-color-warning); border-radius: var(--nx-radius-sm); background: var(--nx-color-warning-soft); color: var(--nx-color-text); font-size: var(--nx-text-sm); display: grid; gap: var(--nx-space-2); } .nx-conflict p { margin: 0; overflow-wrap: anywhere; } /* A field's save state: saving, saved (with Undo), couldn't save (with Retry). */ .nx-save { margin: var(--nx-space-1) 0 0; min-height: 1.25em; font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-save[data-state="error"] { color: var(--nx-color-danger); } .nx-link-btn { appearance: none; border: 0; padding: 0; background: none; color: var(--nx-color-accent); font: inherit; text-decoration: underline; cursor: pointer; min-height: 24px; } .nx-link-btn:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: 2px; } .nx-autosave-note { margin: 0; font-size: var(--nx-text-sm); } /* Rows added above what you're reading. */ .nx-new-above { position: sticky; top: var(--nx-space-2); z-index: var(--nx-z-sticky); display: flex; justify-content: center; height: 0; overflow: visible; } .nx-new-above > .nx-btn { box-shadow: var(--nx-shadow); border-radius: var(--nx-radius-pill); } } /* ========================================================================== DS1 feedback (components/feedback.templ): toasts with Undo, and the confirmation dialog for irreversible Actions. Kept together at the end. ========================================================================== */ @layer components { .nx-toast { align-items: center; } .nx-toast[hidden] { display: none; } .nx-toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; } .nx-notice-nojs { margin: 0; padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius); border: 1px solid var(--nx-color-border); background: var(--nx-color-surface); } .nx-toast__action { appearance: none; flex: none; min-height: 2rem; padding: 0 var(--nx-space-2); border: 0; border-radius: var(--nx-radius-sm); background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .nx-toast__action:hover { text-decoration-thickness: 2px; } .nx-toast__close { flex: none; margin-left: 0; border-radius: var(--nx-radius-sm); cursor: pointer; } .nx-toast__action:focus-visible, .nx-toast__close:focus-visible { outline: 3px solid currentColor; outline-offset: 1px; } .nx-confirm .nx-dialog__body > * + * { margin-top: var(--nx-space-3); } .nx-confirm__final { font-weight: 600; } .nx-confirm .nx-dialog__footer { flex-wrap: wrap; } } /* css/motion.css */ /* Motion between states (DS12, ADR-068). motion.js names the record's box (nx-rec) and its title (nx-rec-title) in the state it leaves and the one it arrives at, and says on what the change is (data-nx-vt: open | step) and which way it went (data-nx-vt-dir: forward | back). How it moves follows data-nx-transition and data-nx-motion; durations and curves are tokens, so the speed and None apply here too. */ @layer components { /* A look changing in place (the light/dark switch without View Transitions, trying a theme): a quick cross-fade. */ html.nx-theme-fade, html.nx-theme-fade * { transition: background-color var(--nx-duration) var(--nx-ease), color var(--nx-duration) var(--nx-ease), border-color var(--nx-duration) var(--nx-ease), fill var(--nx-duration) var(--nx-ease), stroke var(--nx-duration) var(--nx-ease) !important; } ::view-transition-group(*) { animation-duration: var(--nx-duration-slow); animation-timing-function: var(--nx-ease-in-out); } /* Around the record, the page changes at once. */ :root[data-nx-vt]::view-transition-old(root) { animation: none; opacity: 0; } :root[data-nx-vt]::view-transition-new(root) { animation: none; } ::view-transition-old(nx-rec), ::view-transition-new(nx-rec) { height: 100%; overflow: clip; object-fit: none; object-position: top left; } /* Morph: the row's box grows into the record's (the group's own move, slow in, fast middle, slow out), the row fading as the record shows; the title flies from its cell to the heading. */ :root[data-nx-transition="morph"]::view-transition-old(nx-rec) { animation: nx-vt-fade-out var(--nx-duration-fast) var(--nx-ease-exit) both; } :root[data-nx-transition="morph"]::view-transition-new(nx-rec) { animation: nx-vt-fade-in var(--nx-duration-slow) var(--nx-ease-enter) both; } ::view-transition-group(nx-rec-title) { animation-duration: var(--nx-duration-slow); animation-timing-function: var(--nx-ease-in-out); } /* Slide: the record comes in from the side it's going to (next from the right, previous from the left), drawing back a touch first (anticipation) and settling past its place (follow-through). */ :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-group(nx-rec), :root[data-nx-vt="step"]:not([data-nx-transition="fade"])::view-transition-group(nx-rec) { animation: none; } :root[data-nx-vt="step"]:not([data-nx-transition="fade"])::view-transition-old(nx-rec) { animation: nx-vt-slide-out var(--nx-duration) var(--nx-ease-anticipate) both; } /* Opening, the row's image (not the record's) is what leaves: it fades. */ :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-old(nx-rec) { animation: nx-vt-fade-out var(--nx-duration-fast) var(--nx-ease-exit) both; } :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-new(nx-rec), :root[data-nx-vt="step"]:not([data-nx-transition="fade"])::view-transition-new(nx-rec) { animation: nx-vt-slide-in var(--nx-duration-slow) var(--nx-ease-follow) both; } :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-group(nx-rec-title), :root[data-nx-vt="step"]::view-transition-group(nx-rec-title) { animation: none; } :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-old(nx-rec-title), :root[data-nx-vt="step"]::view-transition-old(nx-rec-title) { animation: none; opacity: 0; } /* Fade: the record cross-fades in place. */ :root[data-nx-transition="fade"]::view-transition-group(nx-rec), :root[data-nx-transition="fade"]::view-transition-group(nx-rec-title) { animation: none; } :root[data-nx-transition="fade"]::view-transition-old(nx-rec) { animation: nx-vt-fade-out var(--nx-duration-fast) var(--nx-ease-exit) both; } :root[data-nx-transition="fade"]::view-transition-new(nx-rec) { animation: nx-vt-fade-in var(--nx-duration) var(--nx-ease-enter) both; } @keyframes nx-vt-fade-out { to { opacity: 0; } } @keyframes nx-vt-fade-in { from { opacity: 0; } } /* Which way: forward goes left (the next comes from the right). */ :root { --nx-vt-way: 1; } :root[data-nx-vt-dir="back"] { --nx-vt-way: -1; } @keyframes nx-vt-slide-out { to { opacity: 0; transform: translateX(calc(var(--nx-motion-shift) * -4 * var(--nx-vt-way))); } } @keyframes nx-vt-slide-in { from { opacity: 0; transform: translateX(calc(var(--nx-motion-shift) * 4 * var(--nx-vt-way))); } } /* Content put in place without a View Transition (a record loaded beside its list as you skim with j/k): a quick fade, and a small rise with Full. */ .nx-enter { animation: nx-enter var(--nx-duration) var(--nx-ease-enter) both; } @keyframes nx-enter { from { opacity: 0; transform: translateY(calc(var(--nx-motion-shift) * .5)); } } } /* The Behaviour page's motion preview (DS12). */ @layer app { .nx-motion-demo { display: grid; gap: var(--nx-space-3); } .nx-motion-demo__bar { flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .nx-motion-demo__said { flex: 1 1 16rem; margin: 0; } .nx-motion-demo__stage { min-block-size: 9.5rem; padding: var(--nx-space-3); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface-sunken); overflow: hidden; } .nx-motion-demo__list { display: grid; gap: var(--nx-space-1); margin: 0; } .nx-motion-demo__row { display: flex; gap: var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); } .nx-motion-demo__row[aria-current="true"] { box-shadow: inset 3px 0 0 var(--nx-color-accent); } .nx-motion-demo__code { font-variant-numeric: tabular-nums; color: var(--nx-color-text-muted); } .nx-motion-demo__record { display: grid; gap: var(--nx-space-1); padding: var(--nx-space-4); border-radius: var(--nx-radius); background: var(--nx-color-surface); box-shadow: var(--nx-shadow-sm); } .nx-motion-demo__title { margin: 0; font-size: var(--nx-text-xl, 1.25rem); } } /* Gentle and None win over any transition's own rules. */ @layer overrides { /* Gentle: fades only; nothing travels or grows. */ :root[data-nx-motion="gentle"]::view-transition-group(*) { animation: none; } :root[data-nx-motion="gentle"]::view-transition-old(*) { animation: nx-vt-fade-out var(--nx-duration-fast) var(--nx-ease-exit) both; } :root[data-nx-motion="gentle"]::view-transition-new(*) { animation: nx-vt-fade-in var(--nx-duration) var(--nx-ease-enter) both; } /* None, or the device's Reduce motion: changes at once. */ :root[data-nx-motion="off"]::view-transition-group(*), :root[data-nx-motion="off"]::view-transition-old(*), :root[data-nx-motion="off"]::view-transition-new(*) { animation: none !important; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } } /* css/ui.css */ /* Page components (web/components/ui.templ; 09 §19.1, ADR-041). Tokens only. Props render as classes: layout primitives carry .nx-ui-l, and nx-u-- / nx-u--- set --nx-u-[-bp], which resolve into --_ for the current width (md 768px, lg 1440px). The generated block at the end comes from utilityCSS() in web/components/ui.go (TestUICSSGenerated). */ @layer components { .nx-ui-slot { display: contents; } .nx-ui-l { min-inline-size: 0; } .nx-ui-l > * { min-inline-size: 0; } /* A long unbroken word (a URL, a pasted code) wraps instead of pushing the page sideways at 320px: every component's text inherits it. */ :where(.nx-ui-l, .nx-ui-wrap, .nx-ui-heading, .nx-ui-text, .nx-ui-link, .nx-ui-price, .nx-ui-product-card, .nx-ui-product-grid, .nx-ui-hero, .nx-ui-overlay, .nx-ui-footer, [data-nx-css]) { overflow-wrap: anywhere; } :where(.nx-ui-hero, .nx-ui-overlay, .nx-ui-footer) > * { min-inline-size: 0; } /* Section ---------------------------------------------------------- */ .nx-ui-section { padding-block: var(--_pad, var(--nx-space-8)); } .nx-ui-section__inner { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-space-8); max-inline-size: var(--nx-content-width); margin-inline: auto; padding-inline: var(--nx-space-4); } .nx-ui-section--narrow > .nx-ui-section__inner { max-inline-size: calc(var(--nx-content-width) * .6); } .nx-ui-section--wide > .nx-ui-section__inner { max-inline-size: calc(var(--nx-content-width) * 1.25); } .nx-ui-section--full > .nx-ui-section__inner { max-inline-size: none; padding-inline: 0; } /* Tones ------------------------------------------------------------ */ .nx-ui-tone--muted { background: var(--nx-color-surface-2); } .nx-ui-tone--accent { background: var(--nx-color-accent); color: var(--nx-color-accent-contrast); } .nx-ui-tone--inverse { background: var(--nx-color-text); color: var(--nx-color-bg); } :where(.nx-ui-tone--accent, .nx-ui-tone--inverse) :where(a:not(.nx-btn), .nx-muted, .nx-ui-text--muted) { color: inherit; } /* Stack, grid, columns --------------------------------------------- */ .nx-ui-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--nx-space-4)); align-items: var(--_align, stretch); } .nx-ui-grid { display: grid; grid-template-columns: repeat(var(--_cols, 2), minmax(0, 1fr)); gap: var(--_gap, var(--nx-space-4)); } .nx-ui-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--_gap, var(--nx-space-6)); align-items: var(--_align, stretch); } @media (min-width: 768px) { .nx-ui-columns { grid-template-columns: var(--_ratio, minmax(0, 1fr) minmax(0, 1fr)); } } /* Box, cluster ----------------------------------------------------- */ .nx-ui-box { padding: var(--_pad, var(--nx-space-4)); border-radius: var(--nx-radius); } .nx-ui-box--border { border: var(--nx-border-width) solid var(--nx-color-border); } .nx-ui-cluster { display: flex; flex-wrap: wrap; gap: var(--_gap, var(--nx-space-2)); justify-content: var(--_justify, flex-start); align-items: var(--_align, center); } /* Switcher: side by side above the threshold, all stacked below ---- */ .nx-ui-switcher { --_threshold: calc(var(--nx-content-width) * .42); display: flex; flex-wrap: wrap; gap: var(--_gap, var(--nx-space-4)); } .nx-ui-switcher--narrow { --_threshold: calc(var(--nx-content-width) * .28); } .nx-ui-switcher--wide { --_threshold: calc(var(--nx-content-width) * .56); } .nx-ui-switcher > * { flex-grow: 1; flex-basis: calc((var(--_threshold) - 100%) * 999); } /* Sidebar: stacks when the main column would drop under half -------- */ .nx-ui-sidebar { --_side: calc(var(--nx-space-16) * 4); display: flex; flex-wrap: wrap; gap: var(--_gap, var(--nx-space-6)); } .nx-ui-sidebar--narrow { --_side: calc(var(--nx-space-16) * 3); } .nx-ui-sidebar--wide { --_side: calc(var(--nx-space-16) * 5); } .nx-ui-sidebar__side { flex-basis: var(--_side); flex-grow: 1; min-inline-size: 0; } .nx-ui-sidebar__main { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; } .nx-ui-sidebar--end > .nx-ui-sidebar__side { order: 1; } /* Heading, text, link ---------------------------------------------- */ .nx-ui-heading { margin: 0; overflow-wrap: anywhere; } .nx-ui-heading--s { font-size: var(--nx-text-lg); } .nx-ui-heading--m { font-size: var(--nx-text-xl); } .nx-ui-heading--l { font-size: var(--nx-text-2xl); } .nx-ui-heading--xl { font-size: var(--nx-text-3xl); } .nx-ui-heading--2xl { font-size: calc(var(--nx-text-3xl) * 1.3); } .nx-ui-heading--3xl { font-size: calc(var(--nx-text-3xl) * 1.7); } .nx-ui-text { margin: 0; max-inline-size: 70ch; white-space: pre-line; overflow-wrap: anywhere; } .nx-ui-text--s { font-size: var(--nx-text-sm); } .nx-ui-text--l { font-size: var(--nx-text-lg); } .nx-ui-text--muted { color: var(--nx-color-text-muted); } .nx-ui-align--center { text-align: center; margin-inline: auto; } .nx-ui-align--end { text-align: end; margin-inline-start: auto; } .nx-ui-link { color: var(--nx-color-accent); text-decoration: underline; text-underline-offset: .2em; } .nx-ui-link--muted { color: var(--nx-color-text-muted); } .nx-ui-link--default { color: inherit; } /* Image ------------------------------------------------------------ */ .nx-ui-image { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; object-fit: cover; } .nx-ui-image--contain { object-fit: contain; } .nx-ui-ratio--1-1 { aspect-ratio: 1; } .nx-ui-ratio--4-5 { aspect-ratio: 4 / 5; } .nx-ui-ratio--3-4 { aspect-ratio: 3 / 4; } .nx-ui-ratio--4-3 { aspect-ratio: 4 / 3; } .nx-ui-ratio--16-9 { aspect-ratio: 16 / 9; } .nx-ui-ratio--3-2 { aspect-ratio: 3 / 2; } .nx-ui-image--dim { opacity: .6; } /* Icon ------------------------------------------------------------- */ .nx-ui-icon { display: inline-block; flex: none; inline-size: 1.25rem; block-size: 1.25rem; vertical-align: middle; } .nx-ui-icon--s { inline-size: 1rem; block-size: 1rem; } .nx-ui-icon--l { inline-size: 1.75rem; block-size: 1.75rem; } /* Builder components (internal/pages compdoc): a wrapper that carries the contract's role, behaviour, variant and state. */ .nx-comp { min-inline-size: 0; } /* Price ------------------------------------------------------------ */ .nx-ui-price { margin: 0; font-weight: var(--nx-weight-bold); font-variant-numeric: tabular-nums; } .nx-ui-price--s { font-size: var(--nx-text-sm); } .nx-ui-price--l { font-size: var(--nx-text-xl); } .nx-ui-price__was { margin-inline-start: var(--nx-space-2); color: var(--nx-color-text-muted); font-weight: var(--nx-weight-regular); } /* Product card and grid -------------------------------------------- */ .nx-ui-product-card { position: relative; display: flex; flex-direction: column; gap: var(--nx-space-2); min-inline-size: 0; } .nx-ui-product-card__photo { border-radius: var(--nx-radius); background: var(--nx-color-surface-2); } .nx-ui-product-card__title { margin: 0; font-size: var(--nx-text-md); font-weight: var(--nx-weight-medium); overflow-wrap: anywhere; } .nx-ui-product-card__title a { color: inherit; text-decoration: none; } .nx-ui-product-card__title a::after { content: ""; position: absolute; inset: 0; } .nx-ui-product-card__title a:focus-visible { outline: none; } .nx-ui-product-card:has(a:focus-visible) { outline: 2px solid var(--nx-color-focus); outline-offset: var(--nx-space-1); border-radius: var(--nx-radius-sm); } .nx-ui-product-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nx-space-2); margin: 0; font-variant-numeric: tabular-nums; } .nx-ui-product-card__status { color: var(--nx-color-sold); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; } .nx-ui-product-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--nx-space-2); } .nx-ui-product-card--sold .nx-ui-product-card__photo { opacity: .72; } .nx-ui-product-card--sold .nx-ui-product-card__price { color: var(--nx-color-text-muted); text-decoration: line-through; } .nx-ui-product-grid { gap: var(--_gap, var(--nx-space-6)); } .nx-ui-product-grid__empty { margin: 0; padding-block: var(--nx-space-8); text-align: center; } /* Hero ------------------------------------------------------------- */ .nx-ui-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-space-6); align-items: center; padding-block: var(--nx-space-12); } .nx-ui-hero:is(.nx-ui-tone--muted, .nx-ui-tone--accent, .nx-ui-tone--inverse) { padding-inline: var(--nx-space-6); border-radius: var(--nx-radius-lg); } .nx-ui-hero__text { display: flex; flex-direction: column; gap: var(--nx-space-4); min-inline-size: 0; } .nx-ui-hero__eyebrow { margin: 0; font-size: var(--nx-text-sm); font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; } .nx-ui-hero__title { margin: 0; font-size: var(--nx-text-3xl); overflow-wrap: anywhere; } .nx-ui-hero__lede { margin: 0; max-inline-size: 60ch; font-size: var(--nx-text-lg); white-space: pre-line; } .nx-ui-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); } .nx-ui-hero__photo { border-radius: var(--nx-radius-lg); aspect-ratio: 4 / 5; } .nx-ui-hero--center { justify-items: center; text-align: center; } .nx-ui-hero--center .nx-ui-hero__text { align-items: center; } .nx-ui-hero--center .nx-ui-hero__actions { justify-content: center; } @media (min-width: 768px) { .nx-ui-hero--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nx-ui-hero__photo { aspect-ratio: 4 / 3; } } /* Overlay: text on a photo over a backing that keeps it readable ---- */ .nx-ui-overlay { position: relative; display: grid; align-content: end; min-block-size: calc(var(--nx-space-16) * 6); overflow: hidden; border-radius: var(--nx-radius-lg); } .nx-ui-overlay-h--s { min-block-size: calc(var(--nx-space-16) * 4); } .nx-ui-overlay-h--l { min-block-size: calc(var(--nx-space-16) * 9); } .nx-ui-overlay--start { align-content: start; } .nx-ui-overlay--center { align-content: center; } .nx-ui-overlay__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } .nx-ui-overlay__body { position: relative; display: flex; flex-direction: column; gap: var(--nx-space-3); padding: var(--nx-space-6); color: var(--nx-color-bg); } .nx-ui-overlay--shade .nx-ui-overlay__body { background: color-mix(in srgb, var(--nx-color-text) 82%, transparent); } .nx-ui-overlay--panel .nx-ui-overlay__body { margin: var(--nx-space-4); border-radius: var(--nx-radius); background: color-mix(in srgb, var(--nx-color-text) 90%, transparent); } .nx-ui-overlay__body :where(a:not(.nx-btn), .nx-muted, .nx-ui-text--muted) { color: inherit; } /* Footer ----------------------------------------------------------- */ .nx-ui-footer { display: flex; flex-direction: column; gap: var(--nx-space-4); padding-block: var(--nx-space-8); border-top: var(--nx-border-width) solid var(--nx-color-border); } .nx-ui-footer__note { margin: 0; color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); white-space: pre-line; } /* BEGIN generated utilities */ .nx-ui-l { --nx-u-gap: initial; --nx-u-gap-md: initial; --nx-u-gap-lg: initial; --_gap: var(--nx-u-gap); --nx-u-pad: initial; --nx-u-pad-md: initial; --nx-u-pad-lg: initial; --_pad: var(--nx-u-pad); --nx-u-cols: initial; --nx-u-cols-md: initial; --nx-u-cols-lg: initial; --_cols: var(--nx-u-cols); --nx-u-ratio: initial; --nx-u-ratio-md: initial; --nx-u-ratio-lg: initial; --_ratio: var(--nx-u-ratio); --nx-u-align: initial; --nx-u-align-md: initial; --nx-u-align-lg: initial; --_align: var(--nx-u-align); --nx-u-justify: initial; --nx-u-justify-md: initial; --nx-u-justify-lg: initial; --_justify: var(--nx-u-justify); } @media (min-width: 768px) { .nx-ui-l { --_gap: var(--nx-u-gap-md, var(--nx-u-gap)); --_pad: var(--nx-u-pad-md, var(--nx-u-pad)); --_cols: var(--nx-u-cols-md, var(--nx-u-cols)); --_ratio: var(--nx-u-ratio-md, var(--nx-u-ratio)); --_align: var(--nx-u-align-md, var(--nx-u-align)); --_justify: var(--nx-u-justify-md, var(--nx-u-justify)); } } @media (min-width: 1440px) { .nx-ui-l { --_gap: var(--nx-u-gap-lg, var(--nx-u-gap-md, var(--nx-u-gap))); --_pad: var(--nx-u-pad-lg, var(--nx-u-pad-md, var(--nx-u-pad))); --_cols: var(--nx-u-cols-lg, var(--nx-u-cols-md, var(--nx-u-cols))); --_ratio: var(--nx-u-ratio-lg, var(--nx-u-ratio-md, var(--nx-u-ratio))); --_align: var(--nx-u-align-lg, var(--nx-u-align-md, var(--nx-u-align))); --_justify: var(--nx-u-justify-lg, var(--nx-u-justify-md, var(--nx-u-justify))); } } .nx-u-gap-none { --nx-u-gap: 0; } .nx-u-md-gap-none { --nx-u-gap-md: 0; } .nx-u-lg-gap-none { --nx-u-gap-lg: 0; } .nx-u-gap-xs { --nx-u-gap: var(--nx-space-1); } .nx-u-md-gap-xs { --nx-u-gap-md: var(--nx-space-1); } .nx-u-lg-gap-xs { --nx-u-gap-lg: var(--nx-space-1); } .nx-u-gap-s { --nx-u-gap: var(--nx-space-2); } .nx-u-md-gap-s { --nx-u-gap-md: var(--nx-space-2); } .nx-u-lg-gap-s { --nx-u-gap-lg: var(--nx-space-2); } .nx-u-gap-m { --nx-u-gap: var(--nx-space-4); } .nx-u-md-gap-m { --nx-u-gap-md: var(--nx-space-4); } .nx-u-lg-gap-m { --nx-u-gap-lg: var(--nx-space-4); } .nx-u-gap-l { --nx-u-gap: var(--nx-space-6); } .nx-u-md-gap-l { --nx-u-gap-md: var(--nx-space-6); } .nx-u-lg-gap-l { --nx-u-gap-lg: var(--nx-space-6); } .nx-u-gap-xl { --nx-u-gap: var(--nx-space-8); } .nx-u-md-gap-xl { --nx-u-gap-md: var(--nx-space-8); } .nx-u-lg-gap-xl { --nx-u-gap-lg: var(--nx-space-8); } .nx-u-gap-2xl { --nx-u-gap: var(--nx-space-12); } .nx-u-md-gap-2xl { --nx-u-gap-md: var(--nx-space-12); } .nx-u-lg-gap-2xl { --nx-u-gap-lg: var(--nx-space-12); } .nx-u-gap-3xl { --nx-u-gap: var(--nx-space-16); } .nx-u-md-gap-3xl { --nx-u-gap-md: var(--nx-space-16); } .nx-u-lg-gap-3xl { --nx-u-gap-lg: var(--nx-space-16); } .nx-u-pad-none { --nx-u-pad: 0; } .nx-u-md-pad-none { --nx-u-pad-md: 0; } .nx-u-lg-pad-none { --nx-u-pad-lg: 0; } .nx-u-pad-xs { --nx-u-pad: var(--nx-space-1); } .nx-u-md-pad-xs { --nx-u-pad-md: var(--nx-space-1); } .nx-u-lg-pad-xs { --nx-u-pad-lg: var(--nx-space-1); } .nx-u-pad-s { --nx-u-pad: var(--nx-space-2); } .nx-u-md-pad-s { --nx-u-pad-md: var(--nx-space-2); } .nx-u-lg-pad-s { --nx-u-pad-lg: var(--nx-space-2); } .nx-u-pad-m { --nx-u-pad: var(--nx-space-4); } .nx-u-md-pad-m { --nx-u-pad-md: var(--nx-space-4); } .nx-u-lg-pad-m { --nx-u-pad-lg: var(--nx-space-4); } .nx-u-pad-l { --nx-u-pad: var(--nx-space-6); } .nx-u-md-pad-l { --nx-u-pad-md: var(--nx-space-6); } .nx-u-lg-pad-l { --nx-u-pad-lg: var(--nx-space-6); } .nx-u-pad-xl { --nx-u-pad: var(--nx-space-8); } .nx-u-md-pad-xl { --nx-u-pad-md: var(--nx-space-8); } .nx-u-lg-pad-xl { --nx-u-pad-lg: var(--nx-space-8); } .nx-u-pad-2xl { --nx-u-pad: var(--nx-space-12); } .nx-u-md-pad-2xl { --nx-u-pad-md: var(--nx-space-12); } .nx-u-lg-pad-2xl { --nx-u-pad-lg: var(--nx-space-12); } .nx-u-pad-3xl { --nx-u-pad: var(--nx-space-16); } .nx-u-md-pad-3xl { --nx-u-pad-md: var(--nx-space-16); } .nx-u-lg-pad-3xl { --nx-u-pad-lg: var(--nx-space-16); } .nx-u-cols-1 { --nx-u-cols: 1; } .nx-u-md-cols-1 { --nx-u-cols-md: 1; } .nx-u-lg-cols-1 { --nx-u-cols-lg: 1; } .nx-u-cols-2 { --nx-u-cols: 2; } .nx-u-md-cols-2 { --nx-u-cols-md: 2; } .nx-u-lg-cols-2 { --nx-u-cols-lg: 2; } .nx-u-cols-3 { --nx-u-cols: 3; } .nx-u-md-cols-3 { --nx-u-cols-md: 3; } .nx-u-lg-cols-3 { --nx-u-cols-lg: 3; } .nx-u-cols-4 { --nx-u-cols: 4; } .nx-u-md-cols-4 { --nx-u-cols-md: 4; } .nx-u-lg-cols-4 { --nx-u-cols-lg: 4; } .nx-u-cols-5 { --nx-u-cols: 5; } .nx-u-md-cols-5 { --nx-u-cols-md: 5; } .nx-u-lg-cols-5 { --nx-u-cols-lg: 5; } .nx-u-cols-6 { --nx-u-cols: 6; } .nx-u-md-cols-6 { --nx-u-cols-md: 6; } .nx-u-lg-cols-6 { --nx-u-cols-lg: 6; } .nx-u-cols-7 { --nx-u-cols: 7; } .nx-u-md-cols-7 { --nx-u-cols-md: 7; } .nx-u-lg-cols-7 { --nx-u-cols-lg: 7; } .nx-u-cols-8 { --nx-u-cols: 8; } .nx-u-md-cols-8 { --nx-u-cols-md: 8; } .nx-u-lg-cols-8 { --nx-u-cols-lg: 8; } .nx-u-cols-9 { --nx-u-cols: 9; } .nx-u-md-cols-9 { --nx-u-cols-md: 9; } .nx-u-lg-cols-9 { --nx-u-cols-lg: 9; } .nx-u-cols-10 { --nx-u-cols: 10; } .nx-u-md-cols-10 { --nx-u-cols-md: 10; } .nx-u-lg-cols-10 { --nx-u-cols-lg: 10; } .nx-u-cols-11 { --nx-u-cols: 11; } .nx-u-md-cols-11 { --nx-u-cols-md: 11; } .nx-u-lg-cols-11 { --nx-u-cols-lg: 11; } .nx-u-cols-12 { --nx-u-cols: 12; } .nx-u-md-cols-12 { --nx-u-cols-md: 12; } .nx-u-lg-cols-12 { --nx-u-cols-lg: 12; } .nx-u-ratio-1-1 { --nx-u-ratio: minmax(0, 1fr) minmax(0, 1fr); } .nx-u-md-ratio-1-1 { --nx-u-ratio-md: minmax(0, 1fr) minmax(0, 1fr); } .nx-u-lg-ratio-1-1 { --nx-u-ratio-lg: minmax(0, 1fr) minmax(0, 1fr); } .nx-u-ratio-1-2 { --nx-u-ratio: minmax(0, 1fr) minmax(0, 2fr); } .nx-u-md-ratio-1-2 { --nx-u-ratio-md: minmax(0, 1fr) minmax(0, 2fr); } .nx-u-lg-ratio-1-2 { --nx-u-ratio-lg: minmax(0, 1fr) minmax(0, 2fr); } .nx-u-ratio-2-1 { --nx-u-ratio: minmax(0, 2fr) minmax(0, 1fr); } .nx-u-md-ratio-2-1 { --nx-u-ratio-md: minmax(0, 2fr) minmax(0, 1fr); } .nx-u-lg-ratio-2-1 { --nx-u-ratio-lg: minmax(0, 2fr) minmax(0, 1fr); } .nx-u-ratio-1-3 { --nx-u-ratio: minmax(0, 1fr) minmax(0, 3fr); } .nx-u-md-ratio-1-3 { --nx-u-ratio-md: minmax(0, 1fr) minmax(0, 3fr); } .nx-u-lg-ratio-1-3 { --nx-u-ratio-lg: minmax(0, 1fr) minmax(0, 3fr); } .nx-u-ratio-3-1 { --nx-u-ratio: minmax(0, 3fr) minmax(0, 1fr); } .nx-u-md-ratio-3-1 { --nx-u-ratio-md: minmax(0, 3fr) minmax(0, 1fr); } .nx-u-lg-ratio-3-1 { --nx-u-ratio-lg: minmax(0, 3fr) minmax(0, 1fr); } .nx-u-ratio-2-3 { --nx-u-ratio: minmax(0, 2fr) minmax(0, 3fr); } .nx-u-md-ratio-2-3 { --nx-u-ratio-md: minmax(0, 2fr) minmax(0, 3fr); } .nx-u-lg-ratio-2-3 { --nx-u-ratio-lg: minmax(0, 2fr) minmax(0, 3fr); } .nx-u-ratio-3-2 { --nx-u-ratio: minmax(0, 3fr) minmax(0, 2fr); } .nx-u-md-ratio-3-2 { --nx-u-ratio-md: minmax(0, 3fr) minmax(0, 2fr); } .nx-u-lg-ratio-3-2 { --nx-u-ratio-lg: minmax(0, 3fr) minmax(0, 2fr); } .nx-u-ratio-1-1-1 { --nx-u-ratio: repeat(3, minmax(0, 1fr)); } .nx-u-md-ratio-1-1-1 { --nx-u-ratio-md: repeat(3, minmax(0, 1fr)); } .nx-u-lg-ratio-1-1-1 { --nx-u-ratio-lg: repeat(3, minmax(0, 1fr)); } .nx-u-align-start { --nx-u-align: flex-start; } .nx-u-md-align-start { --nx-u-align-md: flex-start; } .nx-u-lg-align-start { --nx-u-align-lg: flex-start; } .nx-u-align-center { --nx-u-align: center; } .nx-u-md-align-center { --nx-u-align-md: center; } .nx-u-lg-align-center { --nx-u-align-lg: center; } .nx-u-align-end { --nx-u-align: flex-end; } .nx-u-md-align-end { --nx-u-align-md: flex-end; } .nx-u-lg-align-end { --nx-u-align-lg: flex-end; } .nx-u-align-stretch { --nx-u-align: stretch; } .nx-u-md-align-stretch { --nx-u-align-md: stretch; } .nx-u-lg-align-stretch { --nx-u-align-lg: stretch; } .nx-u-justify-start { --nx-u-justify: flex-start; } .nx-u-md-justify-start { --nx-u-justify-md: flex-start; } .nx-u-lg-justify-start { --nx-u-justify-lg: flex-start; } .nx-u-justify-center { --nx-u-justify: center; } .nx-u-md-justify-center { --nx-u-justify-md: center; } .nx-u-lg-justify-center { --nx-u-justify-lg: center; } .nx-u-justify-end { --nx-u-justify: flex-end; } .nx-u-md-justify-end { --nx-u-justify-md: flex-end; } .nx-u-lg-justify-end { --nx-u-justify-lg: flex-end; } .nx-u-justify-between { --nx-u-justify: space-between; } .nx-u-md-justify-between { --nx-u-justify-md: space-between; } .nx-u-lg-justify-between { --nx-u-justify-lg: space-between; } .nx-u-radius-none { border-radius: 0; } .nx-u-radius-s { border-radius: var(--nx-radius-sm); } .nx-u-radius-m { border-radius: var(--nx-radius); } .nx-u-radius-l { border-radius: var(--nx-radius-lg); } .nx-u-radius-pill { border-radius: var(--nx-radius-pill); } /* END generated utilities */ } /* css/storefront.css */ /* Storefront portal shell: calm header, content, footer. */ @layer components { /* The shop keeps its larger help text (its forms are its brand). */ .nx-store { display: flex; flex-direction: column; min-height: 100dvh; --nx-type-help-size: var(--nx-text-sm); } /* One set of page widths (FB-VS0-22): grids (board, drops, search) use the container; a form or a short page (size, pieces, the bank step) is a narrow centred column, a list of lines (bag, account, drop alerts) a reading one, and checkout's two columns a wide one. */ .nx-store { --nx-page-narrow: 36rem; --nx-page-reading: 44rem; --nx-page-wide: 72rem; } .nx-store__main .nx-narrow { max-width: var(--nx-page-narrow); margin-inline: auto; } .nx-store__announce { background: var(--nx-color-text); color: var(--nx-color-bg); font-size: var(--nx-text-sm); text-align: center; padding: var(--nx-space-2) var(--nx-space-4); } .nx-store__announce a { color: inherit; } .nx-store__header { position: sticky; top: 0; z-index: var(--nx-z-sticky); background: color-mix(in srgb, var(--nx-color-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--nx-color-border); } .nx-store__bar { display: flex; align-items: center; gap: var(--nx-space-4); min-height: var(--nx-header-height); } .nx-store__wordmark { flex: none; font-family: var(--nx-font-heading); font-size: var(--nx-text-xl); letter-spacing: .02em; color: var(--nx-color-text); text-decoration: none; margin-right: auto; } /* On a narrow phone the menu scrolls inside itself, never the page. */ .nx-store__bar > nav { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .nx-store__nav { display: flex; gap: var(--nx-space-1); list-style: none; margin: 0; padding: 0; white-space: nowrap; } .nx-store__nav a { display: inline-flex; align-items: center; min-height: var(--nx-tap-target); padding: 0 var(--nx-space-3); color: var(--nx-color-text); text-decoration: none; font-size: var(--nx-text-sm); } .nx-store__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; } /* Staff only: the way into the back office, quieter than the menu. */ .nx-store__nav .nx-store__manage { color: var(--nx-color-text-muted); } .nx-store__nav .nx-store__manage:hover { color: var(--nx-color-text); } /* The Menu (phones): the bag stays in the bar; the other links drop from the Menu button in a panel over the page, so nothing moves. */ .nx-store__menu { display: none; } .nx-store__more { position: relative; } .nx-store__more-btn { display: inline-flex; align-items: center; gap: var(--nx-space-2); min-height: var(--nx-tap-target); padding: 0 var(--nx-space-3); cursor: pointer; list-style: none; color: var(--nx-color-text); font-size: var(--nx-text-sm); } .nx-store__more-btn::-webkit-details-marker { display: none; } .nx-store__more-btn::after { content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-25%); } .nx-store__more[open] > .nx-store__more-btn::after { transform: rotate(-135deg) translateY(-25%); } .nx-store__more-list { position: absolute; z-index: 2; top: 100%; right: 0; min-width: 12rem; max-width: calc(100vw - 2rem); display: grid; gap: var(--nx-space-1); list-style: none; margin: 0; padding: var(--nx-space-2); background: var(--nx-color-bg); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); box-shadow: 0 12px 32px -12px rgb(0 0 0 / .35); } .nx-store__more-list a, .nx-store__more-list button { width: 100%; justify-content: flex-start; } @media (max-width: 39.99rem) { .nx-store__menu { display: block; } .nx-store__nav > li:not(.nx-store__pin):not(.nx-store__menu) { display: none; } .nx-store__bar > nav { overflow: visible; flex: none; } .nx-store__wordmark { flex: 0 1 auto; min-width: 0; } .nx-store__nav { justify-content: space-between; align-items: center; } } .nx-store__main { flex: 1; padding: var(--nx-space-8) 0 var(--nx-space-16); } .nx-store__footer { border-top: 1px solid var(--nx-color-border); padding: var(--nx-space-10) 0; font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-store__footer a { color: inherit; } .nx-countdown { font-variant-numeric: tabular-nums; } .nx-hero { padding: var(--nx-space-12) 0; text-align: center; } .nx-hero__title { font-size: var(--nx-text-3xl); margin-bottom: var(--nx-space-3); } } /* Board, piece cards and the item sheet (commerce storefront). */ @layer components { .nx-board-intro { padding: var(--nx-space-6) 0 var(--nx-space-8); text-align: center; } .nx-board-intro__title { font-size: var(--nx-text-3xl); letter-spacing: .01em; } .nx-board__filters { position: sticky; top: var(--nx-header-height); z-index: 1; margin: 0 calc(-1 * var(--nx-space-4)); padding: var(--nx-space-2) var(--nx-space-4); background: var(--nx-color-bg); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .nx-board__filters .nx-chips { flex-wrap: nowrap; } .nx-board__count { margin: var(--nx-space-3) 0 var(--nx-space-4); font-size: var(--nx-text-sm); } .nx-pieces { display: grid; gap: var(--nx-space-6) var(--nx-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } @media (min-width: 48rem) { .nx-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-space-8) var(--nx-space-5); } } /* Wide and ultrawide screens get more pieces per row, not bigger ones (08 §5.2): cards stay between 14 and about 21 rem. */ @media (min-width: 72rem) { .nx-pieces { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } } .nx-piece__link { display: grid; gap: var(--nx-space-1); color: var(--nx-color-text); text-decoration: none; } .nx-piece__link:hover .nx-piece__title { text-decoration: underline; text-underline-offset: .2em; } .nx-piece__media { position: relative; display: block; margin-bottom: var(--nx-space-2); } .nx-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nx-color-skeleton); border-radius: var(--nx-radius-sm); } .nx-pic { position: relative; } .nx-pic picture { display: block; width: 100%; height: 100%; } .nx-pic img { width: 100%; height: 100%; object-fit: cover; } /* The placeholder sits under the photo: blurred LQIP or flat colour. */ .nx-pic__ph { position: absolute; inset: 0; } .nx-pic__ph--blur { filter: blur(14px); transform: scale(1.12); } .nx-pic__img { position: relative; transition: opacity var(--nx-duration-slow) var(--nx-ease); } .nx-pic__img.is-loading { opacity: 0; } /* reduced motion: base.css stops the fade */ .nx-piece__status { position: absolute; top: var(--nx-space-2); left: var(--nx-space-2); } .nx-piece__status:empty { display: none; } .nx-sold { display: inline-block; padding: 2px var(--nx-space-2); background: var(--nx-color-surface); color: var(--nx-color-sold); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; border-radius: var(--nx-radius-sm); } .nx-piece:has(.nx-sold) .nx-pic img { opacity: .72; } .nx-piece__title { font-family: var(--nx-font-heading); font-size: var(--nx-text-md); line-height: var(--nx-leading-tight); } .nx-piece__meta { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-piece__price { font-variant-numeric: tabular-nums; font-weight: var(--nx-weight-medium); } .nx-piece__price s, .nx-item__price s { margin-right: var(--nx-space-2); font-weight: var(--nx-weight-regular); } .nx-store .nx-list-foot { display: flex; justify-content: center; margin-top: var(--nx-space-10); font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-store .nx-list-foot a { color: inherit; text-decoration: none; } .nx-pieces > .nx-piece { content-visibility: auto; contain-intrinsic-size: auto 24rem; } .nx-item { display: grid; gap: var(--nx-space-6); } .nx-item-page .nx-item { margin-top: calc(-1 * var(--nx-space-4)); } @media (min-width: 60rem) { .nx-item { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--nx-space-10); align-items: start; } .nx-item__info { position: sticky; top: calc(var(--nx-header-height) + var(--nx-space-4)); } .nx-sheet .nx-item { padding: var(--nx-space-6); } .nx-sheet .nx-item__info { top: var(--nx-space-12); } } .nx-sheet .nx-item__info { padding: 0 var(--nx-space-4) var(--nx-space-10); } /* A piece's photos: one at a time in a reel (08 §5.3). On phones the reel runs across (swipe; tap the left or right half); on wide screens it runs down beside its thumbnails (tap the top or bottom half), the photo sized to the window's height so the whole garment shows. */ .nx-photos { position: relative; display: grid; gap: var(--nx-space-2); min-width: 0; } .nx-photos__view { position: relative; overflow: hidden; border-radius: var(--nx-radius-sm); } .nx-reel { height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .nx-reel::-webkit-scrollbar { display: none; } .nx-reel:focus-visible { outline-offset: -3px; } .nx-gallery { display: flex; height: 100%; list-style: none; margin: 0; padding: 0; } .nx-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; } .nx-photos__zone { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: none; color: #fff; } .nx-photos__zone--prev { inset: 0 50% 0 0; cursor: w-resize; } .nx-photos__zone--next { inset: 0 0 0 50%; cursor: e-resize; } .nx-photos__zone:focus-visible { outline-offset: -4px; } @media (pointer: coarse) { .nx-photos__zone { pointer-events: none; } } /* touches reach the reel (swipe); nexus.js reads the tap */ .nx-photos__chev { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgb(0 0 0 / .35); opacity: 0; transition: opacity var(--nx-duration) var(--nx-ease); } .nx-photos__chev::before { content: ""; display: block; width: .6rem; height: .6rem; margin: .8rem auto; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); } .nx-photos__zone--next .nx-photos__chev::before { transform: rotate(-135deg); } .nx-photos__zone:hover .nx-photos__chev, .nx-photos__zone:focus-visible .nx-photos__chev { opacity: 1; } .nx-photos__zoom { position: absolute; z-index: 2; right: var(--nx-space-3); bottom: var(--nx-space-3); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--nx-color-border); border-radius: 50%; background: color-mix(in srgb, var(--nx-color-bg) 85%, transparent); color: var(--nx-color-text); } .nx-photos__zoom[aria-pressed="true"] { background: var(--nx-color-text); color: var(--nx-color-bg); } .nx-photos.is-zoomed .nx-gallery__slide .nx-pic__img { transform: scale(2.2); transform-origin: var(--nx-zoom-x, 50%) var(--nx-zoom-y, 50%); cursor: zoom-out; } .nx-photos.is-zoomed .nx-photos__zone { cursor: zoom-out; } .nx-photos__thumbs { display: flex; gap: var(--nx-space-2); list-style: none; margin: 0; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .nx-photos__thumbs li { flex: 0 0 3rem; } .nx-photos__thumbs button { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--nx-radius-sm); background: var(--nx-color-skeleton); opacity: .7; } .nx-photos__thumbs img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--nx-radius-sm); } .nx-photos__thumbs button[aria-current="true"] { opacity: 1; outline: 2px solid var(--nx-color-text); outline-offset: 1px; } @media (min-width: 60rem) { .nx-photos:has(.nx-photos__thumbs) { grid-template-columns: 3.5rem minmax(0, 1fr); align-items: start; } .nx-photos__thumbs { order: -1; flex-direction: column; max-height: var(--nx-photo-h, 80dvh); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; } .nx-photos__thumbs li { flex: none; } .nx-photos__view { width: min(100%, calc(var(--nx-photo-h, 80dvh) * .8)); margin-inline: auto; aspect-ratio: 4 / 5; } .nx-reel { overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; } .nx-gallery { flex-direction: column; } .nx-gallery__slide { flex: 0 0 100%; height: 100%; } .nx-gallery__slide .nx-pic { height: 100%; aspect-ratio: auto; } .nx-photos__zone--prev { inset: 0 0 50% 0; cursor: n-resize; } .nx-photos__zone--next { inset: 50% 0 0 0; cursor: s-resize; } .nx-photos__zone--next .nx-photos__chev::before { transform: rotate(-45deg); margin-top: .6rem; } .nx-photos__zone--prev .nx-photos__chev::before { transform: rotate(135deg); margin-top: 1rem; } } /* The carousel (item_page.photo_layout = carousel, AE4): the reel runs across on every screen, as on phones (left and right halves, swipe, ← →), and its thumbnails are a row below it, the same width as the photo, that scrolls to follow it. On wide screens the photo gives up the thumbnail row's height (--nx-thumb-row) so both fit the window. */ .nx-photos--carousel { --nx-thumb-row: 5.5rem; --nx-carousel-w: min(100%, calc((var(--nx-photo-h, 80dvh) - var(--nx-thumb-row)) * .8)); } .nx-photos--carousel .nx-photos__thumbs { padding: 4px; } /* room for the current one's outline */ @media (min-width: 60rem) { .nx-item__gallery.nx-photos.nx-photos--carousel:has(.nx-photos__thumbs) { grid-template-columns: minmax(0, 1fr); } .nx-photos--carousel .nx-photos__view { width: var(--nx-carousel-w); } .nx-photos--carousel .nx-photos__thumbs { order: 0; flex-direction: row; width: var(--nx-carousel-w); max-height: none; margin-inline: auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior: auto; overscroll-behavior-x: contain; } .nx-photos--carousel .nx-photos__thumbs li { flex: 0 0 3.5rem; } .nx-photos--carousel .nx-reel { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: auto; overscroll-behavior-x: contain; } .nx-photos--carousel .nx-gallery { flex-direction: row; } .nx-photos--carousel .nx-photos__zone--prev { inset: 0 50% 0 0; cursor: w-resize; } .nx-photos--carousel .nx-photos__zone--next { inset: 0 0 0 50%; cursor: e-resize; } .nx-photos--carousel .nx-photos__zone--prev .nx-photos__chev::before { transform: rotate(45deg); margin: .8rem auto; } .nx-photos--carousel .nx-photos__zone--next .nx-photos__chev::before { transform: rotate(-135deg); margin: .8rem auto; } } /* Every photo at once (item_page.photo_layout = stack, 08 §5.3). Phones: a swipe row, each photo 85% wide so the next peeks in, with "2 / 5". Wide screens: the photos one under another at the column's width, the page scrolling through them; the thumbnails are sticky jump links. */ .nx-photos--stack .nx-gallery { height: auto; gap: var(--nx-space-2); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .nx-photos--stack .nx-gallery::-webkit-scrollbar { display: none; } .nx-photos--stack .nx-gallery__slide { position: relative; flex: 0 0 85%; scroll-snap-align: start; scroll-snap-stop: normal; scroll-margin-top: calc(var(--nx-header-height) + var(--nx-space-4)); } .nx-photos--stack .nx-gallery__slide:only-child { flex-basis: 100%; } .nx-photos--stack .nx-gallery__slide.is-zoomed .nx-pic__img { transform: scale(2.2); transform-origin: var(--nx-zoom-x, 50%) var(--nx-zoom-y, 50%); } .nx-photos__count { position: absolute; z-index: 2; top: var(--nx-space-3); left: var(--nx-space-3); margin: 0; padding: 2px var(--nx-space-2); border-radius: var(--nx-radius-pill); background: color-mix(in srgb, var(--nx-color-bg) 85%, transparent); color: var(--nx-color-text); font-size: var(--nx-text-xs); font-variant-numeric: tabular-nums; pointer-events: none; } .nx-photos--stack .nx-photos__thumbs a { display: block; border-radius: var(--nx-radius-sm); background: var(--nx-color-skeleton); opacity: .7; } .nx-photos--stack .nx-photos__thumbs a:hover { opacity: 1; } .nx-photos--stack .nx-photos__thumbs a[aria-current="true"] { opacity: 1; outline: 2px solid var(--nx-color-text); outline-offset: 1px; } .nx-photos--stack .nx-photos__thumbs a:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 2px; } @media (max-width: 59.99rem) { .nx-photos--stack .nx-photos__thumbs { display: none; } } @media (min-width: 60rem) { .nx-photos--stack .nx-gallery { flex-direction: column; gap: var(--nx-space-3); overflow: visible; scroll-snap-type: none; } .nx-photos--stack .nx-gallery__slide { flex: none; height: auto; } .nx-photos--stack .nx-gallery__slide .nx-pic { height: auto; aspect-ratio: 4 / 5; } .nx-photos--stack .nx-photos__thumbs { position: sticky; top: calc(var(--nx-header-height) + var(--nx-space-4)); max-height: calc(100dvh - var(--nx-header-height) - 2 * var(--nx-space-4)); } .nx-photos__count { display: none; } /* The photos run far past the window, so the sticky details scroll within themselves: none of them waits for the last photo. */ .nx-item-page .nx-item:has(> .nx-photos--stack) > .nx-item__info { max-height: calc(100dvh - var(--nx-header-height) - 2 * var(--nx-space-4)); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; padding: 4px; margin: -4px; } } .nx-item__eyebrow { font-size: var(--nx-text-sm); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; color: var(--nx-color-text-muted); } .nx-item__eyebrow a { color: inherit; } .nx-item__title { font-size: var(--nx-text-2xl); } .nx-item__price { font-size: var(--nx-text-xl); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-2); } .nx-item__code { font-size: var(--nx-text-xs); margin-left: auto; font-family: var(--nx-font-mono); } .nx-avail { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-avail__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--nx-color-success); } .nx-item__story p + p { margin-top: var(--nx-space-3); } .nx-item__story, .nx-item__notes, .nx-item__note, .nx-drop__story { max-width: 65ch; } .nx-item__section { padding-top: var(--nx-space-4); border-top: 1px solid var(--nx-color-border); } .nx-item__h { font-family: var(--nx-font-sans); font-size: var(--nx-text-sm); font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; margin-bottom: var(--nx-space-3); } .nx-measure, .nx-item__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-space-2) var(--nx-space-4); margin: 0; } .nx-measure dt, .nx-item__facts dt { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-measure dd, .nx-item__facts dd { margin: 0; font-variant-numeric: tabular-nums; } .nx-units .u-in { display: none; } .nx-units:has(input[value="in"]:checked) .u-in { display: inline; } .nx-units:has(input[value="in"]:checked) .u-cm { display: none; } .nx-toggle { display: inline-flex; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); padding: 2px; margin: 0; } .nx-toggle label { position: relative; } .nx-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .nx-toggle span { display: inline-flex; align-items: center; min-height: 2rem; min-width: 2.75rem; justify-content: center; padding: 0 var(--nx-space-3); border-radius: var(--nx-radius-pill); font-size: var(--nx-text-sm); } .nx-toggle input:checked + span { background: var(--nx-color-text); color: var(--nx-color-bg); } .nx-toggle input:focus-visible + span { outline: 3px solid var(--nx-color-focus); outline-offset: 2px; } .nx-flaws { margin: var(--nx-space-2) 0 var(--nx-space-3); padding-left: 1.1em; } .nx-flaws a { margin-left: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-item__notes, .nx-item__note { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-item__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nx-space-3); padding-top: var(--nx-space-4); border-top: 1px solid var(--nx-color-border); font-size: var(--nx-text-sm); } .nx-item__nav a { min-height: var(--nx-tap-target); display: inline-flex; align-items: center; } .nx-related { margin-top: var(--nx-space-12); padding-top: var(--nx-space-8); border-top: 1px solid var(--nx-color-border); } .nx-related__h { font-size: var(--nx-text-xl); } @media (min-width: 48rem) { .nx-pieces--related { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .nx-search { max-width: 40rem; } .nx-input--lg { font-size: var(--nx-text-lg); min-height: 3.25rem; } } @layer components { .nx-units .nx-help { margin-top: var(--nx-space-3); } .nx-item__facts { margin-top: var(--nx-space-3); } } /* Drops (05 §5, §12.1): the countdown bar, the board's drop rail, the drop page, "Want this" and the price reveal. */ @layer components { .nx-store__announce:has(> [hidden]) { display: none; } .nx-dropbar__text { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-3); margin: 0; } .nx-dropbar a { text-underline-offset: .2em; } .nx-eyebrow { font-size: var(--nx-text-xs); font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; color: var(--nx-color-text-muted); } .nx-droprail { display: grid; justify-items: center; gap: var(--nx-space-2); text-align: center; padding: var(--nx-space-8) var(--nx-space-4); margin-bottom: var(--nx-space-6); border-block: 1px solid var(--nx-color-border); } .nx-droprail__title { font-size: var(--nx-text-2xl); } .nx-droprail__title a { color: inherit; text-decoration: none; } .nx-droprail__title a:hover { text-decoration: underline; text-underline-offset: .15em; } .nx-droprail__count, .nx-drop__count { font-size: var(--nx-text-2xl); font-variant-numeric: tabular-nums; letter-spacing: .04em; margin: 0; } .nx-drop__when { color: var(--nx-color-text-muted); margin: 0; } .nx-drop__when [data-nx-localtime-mine] { display: block; font-size: var(--nx-text-sm); } .nx-drop__head { text-align: center; padding: var(--nx-space-4) 0 var(--nx-space-2); } .nx-drop__title { font-size: var(--nx-text-3xl); } .nx-drop__story { max-width: 38rem; margin-inline: auto; text-align: center; } .nx-drop__story p + p { margin-top: var(--nx-space-3); } .nx-drop__how { max-width: 38rem; margin-inline: auto; padding-top: var(--nx-space-6); border-top: 1px solid var(--nx-color-border); font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); text-align: center; } .nx-drop__body[aria-busy="true"] { min-height: 12rem; } .nx-want { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-3); } .nx-want form { margin: 0; } .nx-want--card { margin-top: var(--nx-space-2); } .nx-want__on { background: var(--nx-color-text); color: var(--nx-color-bg); border-color: var(--nx-color-text); } .nx-want__count { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-want .nx-help { flex-basis: 100%; margin: 0; } .nx-item__reveal { font-size: var(--nx-text-md); color: var(--nx-color-text-muted); } .nx-item__drop { font-size: var(--nx-text-sm); margin: 0; } .nx-item__buy:empty { display: none; } @media (max-width: 59.99rem) { /* Price and Buy stay in reach on phones (05 §12.2). */ .nx-item__buy:not(:empty) { position: sticky; bottom: 0; z-index: 1; padding: var(--nx-space-3) var(--nx-space-4); margin: 0 calc(-1 * var(--nx-space-4)); background: var(--nx-color-bg); border-top: 1px solid var(--nx-color-border); } } @media (prefers-reduced-motion: no-preference) { .nx-piece__price, .nx-item__price { transition: opacity var(--nx-duration-slow) var(--nx-ease); } .htmx-added.nx-piece__price, .htmx-added.nx-item__price { opacity: 0; } } } /* Bag, checkout and orders (05 §7). */ @layer components { .nx-narrow-lg { max-width: var(--nx-page-reading, 44rem); margin-inline: auto; } .nx-buy__note { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); margin: 0 0 var(--nx-space-2); } .nx-baglines { display: grid; gap: var(--nx-space-4); list-style: none; margin: 0; padding: 0; } .nx-bagline { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--nx-space-3); align-items: start; padding-bottom: var(--nx-space-4); border-bottom: 1px solid var(--nx-color-border); } .nx-bagline__media img { display: block; width: 4.5rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--nx-radius-sm); background: var(--nx-color-skeleton); } .nx-bagline__body { display: grid; gap: var(--nx-space-1); } .nx-bagline__title { font-family: var(--nx-font-heading); color: var(--nx-color-text); text-decoration: none; } .nx-bagline__title:hover { text-decoration: underline; } .nx-bagline__meta, .nx-bagline__status { font-size: var(--nx-text-sm); } .nx-bagline__status:empty { display: none; } .nx-bagline__end { display: grid; justify-items: end; gap: var(--nx-space-1); } .nx-bagline__price { font-variant-numeric: tabular-nums; font-weight: var(--nx-weight-medium); } .nx-bagline--gone .nx-bagline__media img, .nx-bagline:has(.nx-sold) .nx-bagline__media img { opacity: .55; } .nx-bagline--gone .nx-bagline__price, .nx-bagline:has(.nx-sold) .nx-bagline__price { text-decoration: line-through; color: var(--nx-color-text-muted); } .nx-totals { display: grid; gap: var(--nx-space-2); margin: var(--nx-space-4) 0; } .nx-totals > div { display: flex; justify-content: space-between; gap: var(--nx-space-4); } .nx-totals dt { color: var(--nx-color-text-muted); } .nx-totals dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; } .nx-totals__total { padding-top: var(--nx-space-2); border-top: 1px solid var(--nx-color-border); font-size: var(--nx-text-lg); font-weight: var(--nx-weight-bold); } .nx-totals__total dt { color: var(--nx-color-text); } .nx-totals__gst { font-size: var(--nx-text-sm); } .nx-checkout { display: grid; gap: var(--nx-space-6); max-width: var(--nx-page-wide); margin-inline: auto; } .nx-checkout__grid { display: grid; gap: var(--nx-space-8); } @media (min-width: 60rem) { .nx-checkout__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .nx-checkout__summary { order: 2; position: sticky; top: calc(var(--nx-header-height) + var(--nx-space-4)); } } .nx-form-grid--address { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); } .nx-radios { display: grid; gap: var(--nx-space-2); } .nx-radio { display: flex; align-items: center; gap: var(--nx-space-3); min-height: var(--nx-tap-target); padding: 0 var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); } .nx-radio:has(input:checked) { border-color: var(--nx-color-text); } .nx-radio input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--nx-color-accent); } .nx-radio--split { padding-block: var(--nx-space-2); } .nx-radio--split .nx-muted { display: block; font-size: var(--nx-text-sm); } .nx-radio__end { margin-inline-start: auto; font-variant-numeric: tabular-nums; } .nx-final-sale { padding: var(--nx-space-4); border-radius: var(--nx-radius); background: var(--nx-color-surface); border: 1px solid var(--nx-color-border); } .nx-final-sale--error { border-color: var(--nx-color-danger); } .nx-final-sale .nx-help { margin-top: var(--nx-space-2); } .nx-address { font-style: normal; line-height: var(--nx-leading-normal, 1.5); } /* Address lookup: matches open under the street field. */ .nx-combobox__list { list-style: none; margin: var(--nx-space-2) 0 0; padding: var(--nx-space-1); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius); background: var(--nx-color-surface); box-shadow: var(--nx-shadow-lg); } .nx-combobox__option { display: flex; align-items: center; min-height: var(--nx-tap-target); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-sm); cursor: pointer; overflow-wrap: anywhere; } .nx-combobox__option:hover, .nx-combobox__option[aria-selected="true"] { background: var(--nx-color-accent-soft); } } /* Widths (08 §5.2): the shop is 90 rem wide (the extra width goes to the photo); the board runs the full width with more pieces per row. */ @layer components { .nx-store__header > .nx-container, .nx-store__main > .nx-container, .nx-store__footer > .nx-container { width: min(100% - 2 * var(--nx-space-4), 90rem); } .nx-store__main > .nx-container:has(> #shop > .nx-board) { width: min(100% - 2 * clamp(var(--nx-space-4), 2vw, var(--nx-space-12)), 100%); } } /* The board's piece view: the header, filters and a trail stay; the board's pieces run down the left as a strip of photos beside the piece (across the top on phones, mobile first). */ @layer components { .nx-backlink { margin: var(--nx-space-1) 0 var(--nx-space-3); font-size: var(--nx-text-sm); } .nx-backlink a { display: inline-flex; align-items: center; min-height: var(--nx-tap-target); color: var(--nx-color-text-muted); text-underline-offset: .2em; } .nx-backlink a:hover { color: var(--nx-color-text); } .nx-browse { display: grid; gap: var(--nx-space-4); } .nx-browse__piece { min-width: 0; } .nx-strip { margin: 0 calc(-1 * var(--nx-space-4)); padding: 0 var(--nx-space-4); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .nx-strip__list { display: flex; gap: var(--nx-space-2); list-style: none; margin: 0; padding: 3px 0; } .nx-strip__list > li { flex: 0 0 3.5rem; } .nx-strip__link { position: relative; display: block; border-radius: var(--nx-radius-sm); color: var(--nx-color-text); text-decoration: none; } .nx-strip__link img, .nx-strip__none { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--nx-radius-sm); background: var(--nx-color-skeleton); } .nx-strip__none { display: flex; align-items: center; padding: 2px; overflow: hidden; font-size: 9px; line-height: 1.1; } .nx-strip__link:hover img { opacity: .85; } .nx-strip__link[aria-current="page"] { outline: 2px solid var(--nx-color-text); outline-offset: 2px; } .nx-strip__link:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 2px; } .nx-strip__sold { position: absolute; inset: auto 0 0; padding: 1px 0; background: color-mix(in srgb, var(--nx-color-surface) 88%, transparent); color: var(--nx-color-sold); font-size: 9px; font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-align: center; text-transform: uppercase; border-radius: 0 0 var(--nx-radius-sm) var(--nx-radius-sm); } .nx-strip__link:has(.nx-strip__sold) img { opacity: .6; } .nx-browse .nx-item { margin-top: 0; } @media (min-width: 60rem) { .nx-browse { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--nx-space-8); align-items: start; } .nx-strip { position: sticky; top: calc(var(--nx-header-height) + 4.5rem); max-height: calc(100dvh - var(--nx-header-height) - 5.5rem); margin: 0; padding: 3px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; } .nx-strip__list { flex-direction: column; gap: var(--nx-space-3); padding: 0; } .nx-strip__list > li { flex: none; } .nx-browse .nx-item__info { top: calc(var(--nx-header-height) + 4.5rem); } /* The photo column takes the extra width; details stay 26–30 rem so lines stay readable; the photo fits the window's height. */ .nx-browse .nx-item { --nx-photo-h: calc(100dvh - var(--nx-header-height) - 13rem); grid-template-columns: minmax(0, 1fr) clamp(26rem, 30%, 30rem); } .nx-browse .nx-photos { position: sticky; top: calc(var(--nx-header-height) + 4.5rem); } /* Stacked photos scroll with the page; only their thumbnails stick. */ .nx-browse .nx-photos.nx-photos--stack { position: static; } .nx-browse .nx-photos--stack .nx-photos__thumbs { top: calc(var(--nx-header-height) + 4.5rem); max-height: calc(100dvh - var(--nx-header-height) - 5.5rem); } .nx-browse .nx-photos--stack .nx-gallery__slide { scroll-margin-top: calc(var(--nx-header-height) + 4.5rem); } .nx-browse .nx-item:has(> .nx-photos--stack) > .nx-item__info { max-height: calc(100dvh - var(--nx-header-height) - 5.5rem); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; padding: 4px; margin: -4px; } } /* Ultrawide (≥ 1,800 px): the page gains a third column ("Similar pieces" as a strip like the one on the left) instead of stretching. */ @media (min-width: 112.5rem) { .nx-store__main > .nx-container:has(> .nx-shop--piece) { width: min(100% - 2 * var(--nx-space-8), 104rem); } .nx-browse__piece:has(> .nx-related) { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: var(--nx-space-8); align-items: start; } .nx-browse__piece > .nx-related { position: sticky; top: calc(var(--nx-header-height) + 4.5rem); max-height: calc(100dvh - var(--nx-header-height) - 5.5rem); overflow-y: auto; overscroll-behavior-y: contain; margin: 0; padding: 0; border: 0; } .nx-browse__piece > .nx-related .nx-related__h { font-size: var(--nx-text-sm); font-family: var(--nx-font-sans); font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; } .nx-browse__piece > .nx-related .nx-pieces { grid-template-columns: minmax(0, 1fr); gap: var(--nx-space-4); } .nx-browse__piece > .nx-related .nx-piece__meta, .nx-browse__piece > .nx-related .nx-piece__price { font-size: var(--nx-text-xs); } } } /* The item view: a full-screen overlay. Photos take the left half at full height (one per screen, snapping), details scroll in the right half; on phones, photos first (swipe), then details. The tapped card's photo morphs into the first photo (View Transitions, nexus.js). */ @layer components { .nx-sheet.nx-sheet--full { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; background: var(--nx-color-bg); } .nx-sheet--full[open] { animation: nx-fade-in var(--nx-duration) var(--nx-ease); } .nx-sheet--full::backdrop { background: var(--nx-color-bg); } .nx-sheet--full .nx-sheet__bar { position: fixed; top: 0; right: 0; left: auto; z-index: 3; padding: var(--nx-space-3); background: none; border: 0; } .nx-sheet--full .nx-sheet__bar > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nx-sheet--full .nx-sheet__bar .nx-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--nx-color-bg) 85%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--nx-color-border); font-size: var(--nx-text-lg); } .nx-sheet--full .nx-sheet__body { overflow: auto; } @keyframes nx-fade-in { from { opacity: 0; } } /* Split layout (overlay and the direct-link page share it). */ .nx-sheet--full .nx-item { gap: 0; margin: 0; padding: 0; } .nx-sheet--full .nx-item__gallery { background: var(--nx-color-skeleton); } .nx-sheet--full .nx-photos__view { border-radius: 0; } .nx-sheet--full .nx-gallery__slide { flex-basis: 100%; } .nx-sheet--full .nx-gallery__slide .nx-pic { aspect-ratio: 4 / 5; border-radius: 0; } .nx-sheet--full .nx-item__info { padding: var(--nx-space-6) var(--nx-space-5) var(--nx-space-12); } @media (min-width: 60rem) { .nx-sheet--full .nx-sheet__body { overflow: hidden; } .nx-sheet--full .nx-item { display: grid; grid-template-columns: 50% 50%; height: 100dvh; align-items: stretch; } .nx-sheet--full .nx-item__gallery { --nx-photo-h: 100dvh; height: 100dvh; gap: 0; } .nx-sheet--full .nx-photos__view { width: 100%; height: 100dvh; aspect-ratio: auto; } .nx-sheet--full .nx-photos__thumbs { padding: var(--nx-space-3) 0 var(--nx-space-3) var(--nx-space-2); } .nx-sheet--full .nx-gallery__slide .nx-pic { aspect-ratio: auto; height: 100%; } .nx-sheet--full .nx-item__info { position: static; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--nx-space-16) clamp(var(--nx-space-6), 6vw, var(--nx-space-16)) var(--nx-space-16); } .nx-sheet--full .nx-item__info > * { max-width: 34rem; } /* Stacked photos: the photo half scrolls through them by itself. */ .nx-sheet--full .nx-photos--stack { overflow-y: auto; overscroll-behavior: contain; } .nx-sheet--full .nx-photos--stack .nx-photos__thumbs { top: 0; max-height: 100dvh; } .nx-sheet--full .nx-photos--stack .nx-gallery__slide { flex: none; scroll-margin-top: 0; } .nx-sheet--full .nx-photos--stack .nx-gallery__slide .nx-pic { aspect-ratio: 4 / 5; height: auto; } /* The carousel: the photo above, its thumbnail row below. */ .nx-sheet--full .nx-photos--carousel .nx-photos__view { width: 100%; height: calc(100dvh - var(--nx-thumb-row) - 2 * var(--nx-space-3)); } .nx-sheet--full .nx-photos--carousel .nx-photos__thumbs { width: 100%; padding: var(--nx-space-3); } } @media (max-width: 59.99rem) { .nx-sheet--full .nx-gallery__slide { flex: 0 0 100%; } .nx-sheet--full .nx-gallery__slide .nx-pic { aspect-ratio: 4 / 5; max-height: 72dvh; } .nx-sheet--full .nx-photos__thumbs { padding: 0 var(--nx-space-3); } .nx-sheet--full .nx-photos--stack .nx-gallery__slide { flex: 0 0 85%; } .nx-sheet--full .nx-photos--stack .nx-gallery__slide:only-child { flex-basis: 100%; } } /* The morph: the hero photo carries the shared name while it animates. */ .nx-browse__piece .nx-gallery__slide:first-child .nx-pic__img { view-transition-name: nx-hero; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } ::view-transition-group(nx-hero) { animation-duration: var(--nx-duration-slow); animation-timing-function: var(--nx-ease); } ::view-transition-old(nx-hero), ::view-transition-new(nx-hero) { height: 100%; object-fit: cover; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--nx-duration); } } /* Header controls (05 §12.1, ADR-023): search in place and the light/dark switch. Hooks for themes: .nx-store-search (the bar under the header), .nx-store-search__input, .nx-store-search__close, .nx-store-results (the layer over the page), [data-nx-search-open][aria-expanded="true"] (the Search link while open), .nx-theme-switch and its .nx-theme-switch__moon / __sun icons, html.nx-theme-reveal (during the switch's circular reveal). */ @layer components { /* The bar hangs under the header, over the page: nothing moves. */ .nx-store-search { position: absolute; inset: 100% 0 auto; background: var(--nx-color-bg); border-bottom: 1px solid var(--nx-color-border); } .nx-store-search[hidden], .nx-store-results[hidden] { display: none; } .nx-store-search > .nx-container, .nx-store-results > .nx-container { width: min(100% - 2 * var(--nx-space-4), 90rem); } .nx-store-search__form { display: flex; align-items: center; gap: var(--nx-space-2); min-height: calc(var(--nx-tap-target) + var(--nx-space-3)); } .nx-store-search__icon { display: flex; flex: none; color: var(--nx-color-text-muted); } .nx-store-search__input { flex: 1; min-width: 0; min-height: var(--nx-tap-target); padding: 0 var(--nx-space-1); border: 0; border-radius: var(--nx-radius-sm); background: transparent; color: var(--nx-color-text); font: inherit; font-size: var(--nx-text-lg); } .nx-store-search__input::placeholder { color: var(--nx-color-text-muted); } .nx-store-search__input::-webkit-search-cancel-button { appearance: none; } /* the ✕ is ours */ .nx-store-search__close { display: grid; flex: none; place-items: center; width: var(--nx-tap-target); height: var(--nx-tap-target); margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--nx-color-text); cursor: pointer; } .nx-store-search__close:hover { background: color-mix(in srgb, var(--nx-color-text) 8%, transparent); } .nx-store__nav a[data-nx-search-open][aria-expanded="true"] { text-decoration: underline; text-underline-offset: .35em; } /* The results cover the page below the bar and scroll on their own; the page underneath keeps its place. */ .nx-store-results { position: fixed; inset: var(--nx-store-results-top, var(--nx-header-height)) 0 0; z-index: calc(var(--nx-z-sticky) - 1); overflow-y: auto; overscroll-behavior: contain; padding: var(--nx-space-4) 0 var(--nx-space-16); background: var(--nx-color-bg); } .nx-store-results__count { margin-top: 0; } .nx-store-results .nx-related { margin-top: var(--nx-space-12); } @media (prefers-reduced-motion: no-preference) { .nx-store-search:not([hidden]) { animation: nx-search-in var(--nx-duration) var(--nx-ease); } .nx-store-results:not([hidden]) { animation: nx-results-in var(--nx-duration) var(--nx-ease); } } @keyframes nx-search-in { from { opacity: 0; transform: translateY(calc(var(--nx-motion-shift) * -.66)); } } @keyframes nx-results-in { from { opacity: 0; } } /* The switch shows what it changes to: the moon in light, the sun in dark. */ .nx-theme-switch { display: grid; flex: none; place-items: center; width: var(--nx-tap-target); height: var(--nx-tap-target); margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--nx-color-text); cursor: pointer; } .nx-theme-switch:hover { background: color-mix(in srgb, var(--nx-color-text) 8%, transparent); } .nx-theme-switch__icon { display: flex; } .nx-theme-switch__sun { display: none; } :root[data-theme="dark"] .nx-theme-switch__sun { display: flex; } :root[data-theme="dark"] .nx-theme-switch__moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nx-theme-switch__sun { display: flex; } :root:not([data-theme="light"]) .nx-theme-switch__moon { display: none; } } /* The new palette spreads from the button in a circle (the origin and radius come from nexus.js through custom properties on ). */ html.nx-theme-reveal * { view-transition-name: none !important; } html.nx-theme-reveal::view-transition-old(root), html.nx-theme-reveal::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.nx-theme-reveal::view-transition-new(root) { animation: nx-theme-reveal var(--nx-duration-slower) var(--nx-ease-in-out) both; } @keyframes nx-theme-reveal { from { clip-path: circle(0 at var(--nx-theme-x, 50%) var(--nx-theme-y, 0)); } to { clip-path: circle(var(--nx-theme-r, 150vmax) at var(--nx-theme-x, 50%) var(--nx-theme-y, 0)); } } /* Without View Transitions: a quick cross-fade (motion.css, nx-theme-fade). */ } /* Storefront display settings (05 §12.1, §12.2; ADR-023). Each is a data attribute; the defaults (small, left, no prices) are the rules above. Hooks for themes: [data-nx-thumbs] on a piece's photos (item_page.thumb_size), [data-nx-strip] on the piece view's strip (storefront.strip.thumb_size), .nx-strip__price (the band storefront.strip.show_price puts over a strip photo) and [data-nx-labels="center"] on a list of cards (storefront.board.label_align). */ @layer components { /* A piece's thumbnails: the column beside the photos on wide screens (phones keep their small row). small 3.5 rem, medium 4.5, large 6. */ @media (min-width: 60rem) { .nx-photos[data-nx-thumbs="medium"]:has(.nx-photos__thumbs) { grid-template-columns: 4.5rem minmax(0, 1fr); } .nx-photos[data-nx-thumbs="large"]:has(.nx-photos__thumbs) { grid-template-columns: 6rem minmax(0, 1fr); } } /* The carousel's row below the photo: the same sizes on wide screens; on phones medium and large thumbnails grow a little (3.5 and 4.5 rem). */ .nx-photos--carousel[data-nx-thumbs="medium"] { --nx-thumb-row: 6.75rem; } .nx-photos--carousel[data-nx-thumbs="large"] { --nx-thumb-row: 8.75rem; } @media (max-width: 59.99rem) { .nx-photos--carousel[data-nx-thumbs="medium"] .nx-photos__thumbs li { flex-basis: 3.5rem; } .nx-photos--carousel[data-nx-thumbs="large"] .nx-photos__thumbs li { flex-basis: 4.5rem; } } @media (min-width: 60rem) { .nx-photos--carousel[data-nx-thumbs="medium"] .nx-photos__thumbs li { flex-basis: 4.5rem; } .nx-photos--carousel[data-nx-thumbs="large"] .nx-photos__thumbs li { flex-basis: 6rem; } } /* The piece view's strip: photos 3.5, 5 or 7 rem wide across the top on phones; down the left, a column of 5.5, 7 or 9 rem. */ @media (max-width: 59.99rem) { .nx-strip[data-nx-strip="medium"] .nx-strip__list > li { flex-basis: 5rem; } .nx-strip[data-nx-strip="large"] .nx-strip__list > li { flex-basis: 7rem; } } @media (min-width: 60rem) { .nx-browse:has(> .nx-strip[data-nx-strip="medium"]) { grid-template-columns: 7rem minmax(0, 1fr); } .nx-browse:has(> .nx-strip[data-nx-strip="large"]) { grid-template-columns: 9rem minmax(0, 1fr); } } /* A price over the bottom of the photo, like SOLD. */ .nx-strip__price { position: absolute; inset: auto 0 0; overflow: hidden; padding: 1px 2px; background: color-mix(in srgb, var(--nx-color-surface) 92%, transparent); color: var(--nx-color-text); font-size: 10px; font-weight: var(--nx-weight-medium); font-variant-numeric: tabular-nums; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: nowrap; border-radius: 0 0 var(--nx-radius-sm) var(--nx-radius-sm); } .nx-strip__price:empty { display: none; } .nx-strip[data-nx-strip="medium"] :is(.nx-strip__price, .nx-strip__sold) { padding-block: 2px; font-size: 11px; } .nx-strip[data-nx-strip="large"] :is(.nx-strip__price, .nx-strip__sold) { padding-block: 3px; font-size: 12px; } /* The text under card photos, centred. */ .nx-pieces[data-nx-labels="center"] > .nx-piece { text-align: center; } .nx-pieces[data-nx-labels="center"] .nx-want { justify-content: center; } } /* Stacked photos (08 §5.3): a click on a photo steps to the one before or after it (nexus.js marks the half under the pointer: n/s down the page, w/e across), and each photo's zoom button stays on screen while any of its photo does (sticky at the bottom of the slide). */ @layer components { .nx-photos--stack .nx-gallery__slide { display: grid; } .nx-photos--stack .nx-gallery__slide > * { grid-area: 1 / 1; } .nx-photos--stack .nx-gallery__slide > .nx-photos__zoom { position: sticky; inset: auto auto var(--nx-space-3) auto; align-self: end; justify-self: end; margin: var(--nx-space-3); } .nx-photos--stack .nx-gallery__slide[data-nx-half="n"] { cursor: n-resize; } .nx-photos--stack .nx-gallery__slide[data-nx-half="s"] { cursor: s-resize; } .nx-photos--stack .nx-gallery__slide[data-nx-half="w"] { cursor: w-resize; } .nx-photos--stack .nx-gallery__slide[data-nx-half="e"] { cursor: e-resize; } .nx-photos--stack .nx-gallery__slide.is-zoomed, .nx-photos--stack .nx-gallery__slide.is-zoomed[data-nx-half] { cursor: zoom-out; } .nx-photos__stack:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 2px; } } /* === Size chip ("My size" panel, 05 §12.1) =============================== The chip opens a panel under the filter chips: the fits as toggle pills, the size on the label, "Match my measurements". It sits in the sticky filter bar (which scrolls sideways on phones), so it stays put while the chips scroll. Theme hooks: .nx-chip--size, .nx-chip--clear, .nx-size-panel, .nx-size-option, .nx-size-count, .nx-size-tagged, .nx-size-fit, .nx-size-panel__foot. */ @layer components { .nx-chip--size { gap: var(--nx-space-2); cursor: pointer; font: inherit; font-size: var(--nx-text-sm); } .nx-chip__caret { width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform var(--nx-duration-fast) var(--nx-ease); } .nx-chip--size[aria-expanded="true"] .nx-chip__caret { transform: translateY(.1em) rotate(225deg); } .nx-chip--clear { justify-content: center; min-width: var(--nx-tap-target); padding: 0; font-size: var(--nx-text-base); } .nx-size-panel { position: sticky; left: 0; width: min(100%, 34rem); margin-top: var(--nx-space-3); padding: var(--nx-space-4); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); box-shadow: var(--nx-shadow); } .nx-size-form { display: grid; gap: var(--nx-space-4); } .nx-size-fits { margin: 0; padding: 0; border: 0; min-width: 0; } .nx-size-panel__title { padding: 0; margin-bottom: var(--nx-space-2); font-size: var(--nx-text-sm); font-weight: 600; } .nx-size-options { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); list-style: none; margin: 0; padding: 0; } .nx-size-option { position: relative; } .nx-size-option input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; } .nx-size-option label { display: inline-flex; align-items: center; gap: var(--nx-space-2); min-height: var(--nx-tap-target); min-width: 3rem; justify-content: center; padding: 0 var(--nx-space-3); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); font-size: var(--nx-text-sm); cursor: pointer; } .nx-size-option:hover label { border-color: var(--nx-color-text); } .nx-size-option input:checked + label { background: var(--nx-color-text); border-color: var(--nx-color-text); color: var(--nx-color-bg); } .nx-size-option input:focus-visible + label { outline: 2px solid var(--nx-color-focus, var(--nx-color-accent)); outline-offset: 2px; } .nx-size-count { color: var(--nx-color-text-muted); font-size: var(--nx-text-xs, .75rem); font-variant-numeric: tabular-nums; } .nx-size-option input:checked + label .nx-size-count { color: inherit; opacity: .8; } .nx-size-tagged { display: grid; gap: var(--nx-space-1); font-size: var(--nx-text-sm); } .nx-size-tagged label { font-weight: 600; } .nx-size-tagged input { width: min(100%, 10rem); min-height: var(--nx-tap-target); padding: 0 var(--nx-space-3); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-bg); color: var(--nx-color-text); font: inherit; } .nx-size-tagged p { margin: 0; font-size: var(--nx-text-xs, .75rem); } .nx-size-fit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-size-fit input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--nx-color-accent); } .nx-size-panel__foot { display: flex; justify-content: flex-end; gap: var(--nx-space-2); } @media (prefers-reduced-motion: no-preference) { .nx-size-panel:not([hidden]) { animation: nx-search-in var(--nx-duration) var(--nx-ease); } } } /* === end Size chip ====================================================== */ /* === Board order, groups and the strip's title (05 §12.1) ================ The filter bar is one row: the filter chips, then at the far end the Sort menu, "Group by …" and, set apart, Hide sold. The Sort menu is a popover (top layer, so the sideways-scrolling bar can't clip it), anchored under its chip where the browser can, else centred. A grouped board heads each drop's pieces with its name across the grid. Theme hooks: .nx-board__tools, .nx-chip--menu, .nx-menu, .nx-menu__item, .nx-chip--sold, .nx-pieces__group, .nx-strip__title. */ @layer components { .nx-board__bar { display: flex; align-items: center; gap: var(--nx-space-2); min-width: max-content; } .nx-board__bar > .nx-chips { flex: none; } .nx-board__tools { display: flex; align-items: center; gap: var(--nx-space-2); margin-left: auto; padding-left: var(--nx-space-4); } .nx-chip--menu { gap: var(--nx-space-2); cursor: pointer; font: inherit; font-size: var(--nx-text-sm); anchor-name: --nx-sort; } .nx-chip--menu:has(+ .nx-menu:popover-open) .nx-chip__caret { transform: translateY(.1em) rotate(225deg); } .nx-chip--sold { position: relative; margin-left: var(--nx-space-3); } .nx-chip--sold::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: calc(-1 * (var(--nx-space-2) + var(--nx-space-3)) / 2 - 1px); border-left: 1px solid var(--nx-color-border); } .nx-menu { margin: 0; padding: var(--nx-space-2); min-width: 13rem; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); color: var(--nx-color-text); box-shadow: var(--nx-shadow); } @supports (position-anchor: --nx-sort) { .nx-menu { position-anchor: --nx-sort; inset: auto; top: anchor(bottom); right: anchor(right); margin-top: var(--nx-space-2); position-try-fallbacks: flip-inline; } } .nx-menu__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .nx-menu__item { display: flex; align-items: center; min-height: var(--nx-tap-target); padding: 0 var(--nx-space-3); border-radius: var(--nx-radius-sm); color: inherit; font-size: var(--nx-text-sm); text-decoration: none; } .nx-menu__item:hover { background: var(--nx-color-bg); } .nx-menu__item[aria-current="true"] { font-weight: var(--nx-weight-bold); } .nx-menu__item[aria-current="true"]::after { content: "✓"; margin-left: auto; padding-left: var(--nx-space-4); } .nx-menu__item:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: 1px; } .nx-pieces > .nx-pieces__group { grid-column: 1 / -1; margin-top: var(--nx-space-6); } .nx-pieces > .nx-pieces__group:first-child { margin-top: 0; } .nx-pieces__group-title { margin: 0; font-family: var(--nx-font-heading); font-size: var(--nx-text-xl); font-weight: var(--nx-weight-regular); } .nx-strip__title { margin: 0 0 var(--nx-space-2); color: var(--nx-color-text-muted); font-size: var(--nx-text-xs, .75rem); font-weight: var(--nx-weight-medium); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; } @media (max-width: 59.99rem) { .nx-strip__title { position: sticky; left: 0; } } @media (min-width: 60rem) { .nx-strip__title { position: sticky; top: -3px; z-index: 1; padding: 3px 0 var(--nx-space-2); margin: -3px 0 0; background: var(--nx-color-bg); text-align: center; } } /* Board → piece view: the cards on screen fly to their places in the strip (nexus.js names them nx-fly-N, class nx-fly), the tapped one to the piece's photo (nx-hero). */ ::view-transition-group(.nx-fly) { animation-duration: var(--nx-duration-slower); animation-timing-function: var(--nx-ease); } ::view-transition-old(.nx-fly), ::view-transition-new(.nx-fly) { height: 100%; object-fit: cover; } } /* === end Board order ==================================================== */ /* === The photo inspector (05 §12.2) ====================================== A piece's photo popped out to fill the screen on a dark ground (the photo's colours read true against it), at the largest size the shop has. The page shell renders it (dialog.nx-inspect); nexus.js sizes the photo; zoom and pan are a transform on it. Theme hooks: .nx-inspect, .nx-inspect__bar, .nx-inspect__btn, .nx-inspect__nav, .nx-inspect__hint. */ @layer components { html.nx-inspecting { overflow: hidden; } .nx-inspect { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0f0d0c; color: #f4f1ec; overflow: hidden; } .nx-inspect::backdrop { background: #0f0d0c; } .nx-inspect__bar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-3) var(--nx-space-4); pointer-events: none; } .nx-inspect__bar > * { pointer-events: auto; } .nx-inspect__count { margin: 0; min-width: 3.5rem; padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-pill); background: #0f0d0cb3; text-align: center; font-size: var(--nx-text-sm); font-variant-numeric: tabular-nums; letter-spacing: .04em; } .nx-inspect__tools { display: flex; align-items: center; gap: var(--nx-space-1); margin: 0 auto; padding: 3px; border-radius: var(--nx-radius-pill); background: #0f0d0cb3; } .nx-inspect__level { min-width: 3.5rem; font-size: var(--nx-text-sm); font-variant-numeric: tabular-nums; text-align: center; } .nx-inspect__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--nx-radius-pill); background: transparent; color: inherit; font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; } .nx-inspect__btn--text { padding: 0 var(--nx-space-3); font-size: var(--nx-text-sm); letter-spacing: .06em; text-transform: uppercase; } .nx-inspect__btn:hover:not(:disabled) { background: #f4f1ec26; } .nx-inspect__btn:disabled { color: #f4f1ec73; cursor: default; } .nx-inspect__close { background: #0f0d0cb3; } .nx-inspect :focus-visible { outline: 2px solid #f4f1ec; outline-offset: 2px; } .nx-inspect__stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: zoom-in; } .nx-inspect.is-zoomed .nx-inspect__stage { cursor: grab; } .nx-inspect.is-zoomed .nx-inspect__stage:active { cursor: grabbing; } .nx-inspect__img { position: absolute; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; image-rendering: auto; } .nx-inspect__nav { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; background: #0f0d0c99; color: #f4f1ec; font: inherit; font-size: 2rem; line-height: 1; cursor: pointer; } .nx-inspect__nav:hover { background: #0f0d0ccc; } .nx-inspect__nav--prev { left: var(--nx-space-4); } .nx-inspect__nav--next { right: var(--nx-space-4); } .nx-inspect.is-single .nx-inspect__nav, .nx-inspect.is-single .nx-inspect__count { visibility: hidden; } .nx-inspect__hint { position: absolute; inset: auto 0 var(--nx-space-4); z-index: 2; width: max-content; max-width: calc(100% - 2 * var(--nx-space-4)); margin: 0 auto; padding: var(--nx-space-1) var(--nx-space-3); border-radius: var(--nx-radius-pill); background: #0f0d0cb3; color: #f4f1ec; font-size: var(--nx-text-xs, .75rem); letter-spacing: .04em; text-align: center; pointer-events: none; transition: opacity var(--nx-duration-slow) var(--nx-ease); } .nx-inspect.is-zoomed .nx-inspect__hint { opacity: 0; } @media (max-width: 47.99rem) { .nx-inspect__nav { top: auto; bottom: var(--nx-space-4); margin-top: 0; } .nx-inspect__hint { bottom: calc(var(--nx-space-4) + 60px); } } @media (prefers-reduced-motion: no-preference) { .nx-inspect[open] { animation: nx-inspect-in var(--nx-duration) var(--nx-ease); } @keyframes nx-inspect-in { from { opacity: 0; } } } ::view-transition-group(nx-inspect) { animation-duration: var(--nx-duration-slow); animation-timing-function: var(--nx-ease); } ::view-transition-old(nx-inspect), ::view-transition-new(nx-inspect) { height: 100%; object-fit: contain; } } /* === end Photo inspector ================================================ */ /* Display currency (05 §12.1): the Currency menu, in the footer or, compact, in the header beside the light/dark switch. Prices in the shopper's currency are plain amounts (what they're charged). Hooks: .nx-currency (--compact), .nx-currency__label, .nx-currency__select. */ @layer components { .nx-currency { display: flex; align-items: center; gap: var(--nx-space-2); margin-top: var(--nx-space-4); } .nx-currency__select { min-height: var(--nx-tap-target); padding: 0 var(--nx-space-2); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-bg); color: var(--nx-color-text); font: inherit; } .nx-currency__select:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 0; } .nx-currency--compact { flex: none; margin: 0; } .nx-currency--compact .nx-currency__select { border-color: transparent; font-size: var(--nx-text-sm); } .nx-currency--compact .nx-currency__select:hover { border-color: var(--nx-color-border); } } /* Edit mode (ADR-042): the ribbon on a page rendered from a draft, and on the site itself the panel docked beside the page (a bottom sheet on phones). The page makes room for the dock rather than sitting under it. */ @layer components { .nx-edit-ribbon { position: sticky; top: 0; z-index: calc(var(--nx-z-sticky) + 1); display: flex; gap: var(--nx-space-3); justify-content: center; align-items: center; padding: var(--nx-space-1) var(--nx-space-4); background: var(--nx-color-accent); color: var(--nx-color-accent-contrast); font-size: var(--nx-text-sm); } .nx-edit-ribbon__note { opacity: .85; } .nx-edit-dock { position: fixed; z-index: var(--nx-z-overlay); inset: 0 0 0 auto; width: min(24rem, 100vw); border-left: 1px solid var(--nx-color-border-strong); background: var(--nx-color-surface); box-shadow: var(--nx-shadow-lg); } .nx-edit-dock__frame { display: block; width: 100%; height: 100%; border: 0; } body:has(.nx-edit-dock) .nx-store { margin-right: min(24rem, 100vw); } body:has(.nx-edit-dock) .nx-edit-ribbon { margin-right: min(24rem, 100vw); } @media (max-width: 47.99rem) { .nx-edit-dock { inset: auto 0 0 0; width: 100%; height: 45dvh; border-left: 0; border-top: 1px solid var(--nx-color-border-strong); } body:has(.nx-edit-dock) .nx-store, body:has(.nx-edit-dock) .nx-edit-ribbon { margin-right: 0; } body:has(.nx-edit-dock) .nx-store { padding-bottom: 45dvh; } } } @layer components { /* Edit mode: text that can be changed shows where it is. */ .nx-site-edit [data-nx-edit] { cursor: pointer; border-radius: 2px; } .nx-site-edit [data-nx-edit]:hover { outline: 1px dashed var(--nx-color-accent); outline-offset: 2px; } .nx-site-edit [data-nx-edit-selected] { outline: 2px solid var(--nx-color-accent); outline-offset: 2px; } .nx-site-edit [contenteditable] { cursor: text; outline: 2px solid var(--nx-color-accent); background: var(--nx-color-accent-soft); } } /* Arranged blocks (10 §3.4.1): the piece page's "below" section runs full width in up to three columns; a block's width is data-nx-width. */ @layer components { .nx-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-space-6); margin-block: var(--nx-space-8); } .nx-blocks > [data-nx-width="2"] { grid-column: span 2; } .nx-blocks > [data-nx-width="3"] { grid-column: 1 / -1; } @media (max-width: 47.99rem) { .nx-blocks { grid-template-columns: 1fr; } .nx-blocks > [data-nx-width] { grid-column: auto; } } .nx-item__info > .nx-block:empty, .nx-item__notes > .nx-block:empty { display: none; } } @layer components { /* Edit mode's Arrange (10 §3.4.1). */ .nx-site-arranging [data-nx-block][draggable] { position: relative; outline: 1px dashed var(--nx-color-border-strong); outline-offset: 4px; border-radius: var(--nx-radius-sm); cursor: grab; } .nx-site-arranging [data-nx-block][draggable]:focus-visible { outline: 2px solid var(--nx-color-accent); } .nx-arrange__tools { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); align-items: center; margin-bottom: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-arrange__name { font-weight: 600; margin-right: auto; } .nx-arrange__btn { min-height: 2rem; min-width: 2rem; padding: 0 var(--nx-space-2); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); color: var(--nx-color-text); font: inherit; cursor: pointer; } .nx-arrange__btn:focus-visible { outline: 2px solid var(--nx-color-accent); outline-offset: 1px; } .nx-arrange__bar { position: fixed; z-index: calc(var(--nx-z-overlay) - 1); inset: auto 0 0 0; display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; padding: var(--nx-space-2) var(--nx-space-4); background: var(--nx-color-surface); border-top: 1px solid var(--nx-color-border-strong); box-shadow: var(--nx-shadow); font-size: var(--nx-text-sm); } body:has(.nx-edit-dock) .nx-arrange__bar { right: min(24rem, 100vw); } .nx-site-arranging .nx-store { padding-bottom: 4rem; } @media (max-width: 47.99rem) { body:has(.nx-edit-dock) .nx-arrange__bar { right: 0; bottom: 45dvh; } } } @layer components { /* The piece's photos' width (Arrange, 10 §3.4.1): 2 is as designed. */ @media (min-width: 60rem) { .nx-item-page .nx-item[data-nx-photos-width="1"] { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); } .nx-item-page .nx-item[data-nx-photos-width="3"] { grid-template-columns: minmax(0, 14fr) minmax(0, 7fr); } .nx-browse .nx-item[data-nx-photos-width="1"] { grid-template-columns: minmax(0, 1fr) clamp(30rem, 38%, 36rem); } .nx-browse .nx-item[data-nx-photos-width="3"] { grid-template-columns: minmax(0, 1fr) clamp(22rem, 24%, 26rem); } } /* Notes moved below the photos keep their quieter look. */ .nx-item__below [data-nx-block="final_sale"], .nx-item__below [data-nx-block="shipping"] { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-stack > .nx-block:empty:first-child + *, .nx-stack-sm > .nx-block:empty:first-child + * { margin-top: 0; } } @layer components { .nx-site-arranging .nx-item__gallery { position: relative; outline: 1px dashed var(--nx-color-border-strong); outline-offset: 4px; } .nx-arrange__tools--over { position: absolute; z-index: 2; inset: var(--nx-space-2) var(--nx-space-2) auto var(--nx-space-2); padding: var(--nx-space-1) var(--nx-space-2); background: var(--nx-color-surface); border-radius: var(--nx-radius-sm); box-shadow: var(--nx-shadow-sm); } } /* Custom pages (ADR-061, 10 §6): blocks in a three-column grid, each 1–3 columns wide (data-nx-width), one column on phones. */ @layer components { .nx-cpage__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-space-10) var(--nx-space-8); align-items: start; } .nx-cpage__grid > [data-nx-width="1"] { grid-column: span 1; } .nx-cpage__grid > [data-nx-width="2"] { grid-column: span 2; } .nx-cpage__grid > [data-nx-width="3"], .nx-cpage__grid > :not([data-nx-width]) { grid-column: 1 / -1; } @media (max-width: 47.99rem) { .nx-cpage__grid { grid-template-columns: 1fr; gap: var(--nx-space-8); } .nx-cpage__grid > [data-nx-width] { grid-column: auto; } } .nx-cpage__grid > .nx-block:empty { display: none; } .nx-pblock h2 { font-family: var(--nx-font-heading); font-size: var(--nx-text-2xl); margin: 0 0 var(--nx-space-3); } .nx-pblock > * + * { margin-top: var(--nx-space-3); } .nx-pblock--hero { display: grid; gap: var(--nx-space-6); align-items: center; } @media (min-width: 48rem) { [data-nx-width="3"] > .nx-pblock--hero:has(.nx-pblock__hero-img) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .nx-pblock__hero-heading { font-size: clamp(var(--nx-text-2xl), 5vw, var(--nx-text-4xl, 2.75rem)) !important; line-height: 1.1; } .nx-pblock--hero > * + * { margin-top: 0; } /* The photo's box is known before it loads (no layout shift, AE3). */ .nx-pblock__hero-img { width: 100%; height: auto; aspect-ratio: 3 / 4; max-height: 70vh; object-fit: cover; border-radius: var(--nx-radius); } .nx-pblock__lead { font-size: var(--nx-text-lg); color: var(--nx-color-text-muted); max-width: 40rem; } .nx-pblock--hero-photo { position: relative; color: #fff; } .nx-pblock--hero-photo .nx-pblock__hero-img { grid-area: 1 / 1; aspect-ratio: auto; height: 100%; min-height: 22rem; filter: brightness(.62); } .nx-pblock--hero-photo .nx-pblock__hero-text { grid-area: 1 / 1; padding: var(--nx-space-8); z-index: 1; } .nx-pblock--hero-photo .nx-pblock__lead { color: inherit; } @media (min-width: 48rem) { [data-nx-width="3"] > .nx-pblock--hero-photo { grid-template-columns: 1fr !important; } } .nx-pblock--text { max-width: 44rem; } .nx-pblock__body > * + * { margin-top: var(--nx-space-3); } .nx-pblock--image img { width: 100%; height: auto; border-radius: var(--nx-radius); } .nx-pblock--image figcaption, .nx-pblock--quote figcaption { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); margin-top: var(--nx-space-2); } .nx-pblock--placeholder { display: grid; place-items: center; min-height: 10rem; border: 1px dashed var(--nx-color-border-strong); border-radius: var(--nx-radius); color: var(--nx-color-text-muted); } .nx-pblock__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-space-3); list-style: none; margin: 0; padding: 0; } .nx-pblock__gallery[data-nx-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-pblock__gallery[data-nx-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 47.99rem) { .nx-pblock__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } .nx-pblock__gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--nx-radius-sm); } .nx-pblock--quote blockquote { margin: 0; font-family: var(--nx-font-heading); font-size: var(--nx-text-xl); line-height: 1.4; border-left: 3px solid var(--nx-color-accent); padding-left: var(--nx-space-4); } .nx-pblock__faq { border-top: 1px solid var(--nx-color-border); } .nx-pblock__qa { border-bottom: 1px solid var(--nx-color-border); padding: var(--nx-space-3) 0; } .nx-pblock__qa summary { cursor: pointer; font-weight: 600; min-height: var(--nx-tap-target); display: flex; align-items: center; } .nx-pblock__qa > div { padding-top: var(--nx-space-2); color: var(--nx-color-text-muted); } .nx-pblock--cta { text-align: center; padding: var(--nx-space-10) var(--nx-space-6); background: var(--nx-color-surface); border-radius: var(--nx-radius); } .nx-pblock--contact { max-width: 36rem; } .nx-pblock__form textarea { resize: vertical; } .nx-pblock__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .nx-pblock__sent { padding: var(--nx-space-4); background: var(--nx-color-success-soft, var(--nx-color-surface)); border-radius: var(--nx-radius); } .nx-pblock__error { color: var(--nx-color-danger); } .nx-cpage__empty { grid-column: 1 / -1; } .nx-store__footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--nx-space-2) var(--nx-space-5); list-style: none; margin: 0 0 var(--nx-space-5); padding: 0; } .nx-store__footer-nav a { display: inline-flex; min-height: var(--nx-tap-target); align-items: center; } } /* The analytics question and the cookie note (ADR-043): a small card stuck to the bottom of the window, inside the safe area. It is the body's last child and sticky, not fixed: at the end of the page it sits below the footer, so it never covers the page's last content. */ @layer components { .nx-consent { position: relative; z-index: calc(var(--nx-z-sticky) + 1); padding: var(--nx-space-2) max(var(--nx-space-3), env(safe-area-inset-right)) max(var(--nx-space-3), env(safe-area-inset-bottom)) max(var(--nx-space-3), env(safe-area-inset-left)); pointer-events: none; } .nx-consent__form { pointer-events: auto; box-sizing: border-box; display: grid; gap: var(--nx-space-2) var(--nx-space-4); max-width: 44rem; margin: 0 auto; padding: var(--nx-space-3) var(--nx-space-4); background: var(--nx-color-surface); color: var(--nx-color-text); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-lg); box-shadow: var(--nx-shadow-lg); font-size: var(--nx-text-sm); line-height: var(--nx-leading); } .nx-consent__title { margin: 0; font-family: inherit; font-size: var(--nx-text-md); font-weight: var(--nx-weight-bold); letter-spacing: normal; } .nx-consent__text { margin: 0; color: var(--nx-color-text); } .nx-consent__actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); } .nx-consent__actions .nx-btn { min-height: var(--nx-tap-target); } .nx-consent .nx-btn:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 2px; } @media (min-width: 40rem) { .nx-consent__form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .nx-consent__title, .nx-consent__text { grid-column: 1; } .nx-consent__actions { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; } } .nx-consent[data-nx-consent="ask"] { position: sticky; bottom: 0; } @media print { .nx-consent { display: none; } } } /* Pieces a contributor offers (/account/pieces, ADR-080). */ @layer components { .nx-pieces { display: grid; gap: var(--nx-space-2); margin: 0; padding: 0; list-style: none; } .nx-pieces__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nx-space-1) var(--nx-space-3); align-items: baseline; padding: var(--nx-space-3) 0; border-bottom: 1px solid var(--nx-color-border); } .nx-pieces__item a { color: var(--nx-color-text); font-weight: var(--nx-weight-bold); overflow-wrap: anywhere; } .nx-pieces__meta { grid-column: 1 / -1; margin: 0; font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-pieces__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--nx-space-1) var(--nx-space-4); margin: 0; } .nx-pieces__facts dt { color: var(--nx-color-text-muted); } .nx-pieces__facts dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; } .nx-pieces__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--nx-space-2); margin: 0; padding: 0; list-style: none; } .nx-pieces__photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); } .nx-pieces__photos label { display: flex; gap: var(--nx-space-1); align-items: center; min-height: var(--nx-tap-target); font-size: var(--nx-text-sm); } .nx-pieces__actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .nx-pieces__actions form { margin: 0; } } /* css/design.css */ /* Look and feel (DS10, ADR-066): the page that edits a shop's look, its preview (drawn by the draft's scoped stylesheet, never inline styles), and the bar a browser previewing a draft in place shows. */ @layer app { /* ── The bar while previewing a draft in place ── */ .nx-look-bar { position: sticky; top: 0; z-index: var(--nx-z-toast); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--nx-space-2) var(--nx-space-4); padding: var(--nx-space-2) var(--nx-space-4); background: var(--nx-color-agent); color: var(--nx-color-agent-contrast); font-size: var(--nx-text-sm); } .nx-look-bar__msg { margin: 0; } .nx-look-bar .nx-btn { background: var(--nx-color-agent-contrast); color: var(--nx-color-agent); border-color: transparent; } /* ── The page ── */ .nx-design__targets { display: inline-flex; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); overflow: hidden; } .nx-design__targets a { display: inline-flex; align-items: center; min-height: var(--nx-control-h); padding: 0 var(--nx-space-4); color: var(--nx-color-text-muted); text-decoration: none; } .nx-design__targets a + a { border-left: 1px solid var(--nx-color-border-strong); } .nx-design__targets a[aria-current="page"] { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-design__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-3); } .nx-design__status { margin: 0; color: var(--nx-color-text-muted); } .nx-design__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); } .nx-design__preset { flex-direction: column; align-items: flex-start !important; gap: 2px; padding-block: var(--nx-space-2) !important; } .nx-design__preset-name { font-weight: var(--nx-weight-medium); } .nx-design__preset-note { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-design__grid { display: grid; gap: var(--nx-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 70rem) { .nx-design__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .nx-design__preview { position: sticky; top: calc(var(--nx-header-height) + var(--nx-space-4)); } } .nx-design__group .nx-form-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); } .nx-design__colour { display: flex; gap: var(--nx-space-2); align-items: center; } .nx-design__swatch { flex: none; inline-size: var(--nx-control-h); block-size: var(--nx-control-h); padding: 2px; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); cursor: pointer; } .nx-design__hex { min-inline-size: 0; flex: 1; font-family: var(--nx-font-mono); } .nx-design__preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-2); margin-bottom: var(--nx-space-3); } .nx-design__panes { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .nx-design__pane { margin: 0; min-inline-size: 0; } .nx-design__pane-title { margin-bottom: var(--nx-space-2); font-size: var(--nx-type-label-size); font-weight: var(--nx-type-label-weight); } /* ── The preview: the draft's scoped stylesheet sets the tokens on .nx-look-preview[data-scheme]; everything inside only reads them. ── */ .nx-look-preview { overflow: hidden; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-texture), var(--nx-color-bg); color: var(--nx-color-text); font-family: var(--nx-font-sans); font-size: var(--nx-text-sm); line-height: var(--nx-leading); } .nx-look-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-3); padding: var(--nx-space-3) var(--nx-space-4); border-bottom: 1px solid var(--nx-color-border); background: var(--nx-color-surface); } .nx-look-preview__brand { font-family: var(--nx-font-heading); font-size: var(--nx-text-lg); } .nx-look-preview__nav { display: flex; gap: var(--nx-space-3); } .nx-look-preview a { color: var(--nx-color-accent); } .nx-look-preview__body { padding: var(--nx-space-4); } .nx-look-preview__body > * { margin-block: 0; } .nx-look-preview__h { font-family: var(--nx-font-heading); font-size: var(--nx-text-xl); line-height: var(--nx-leading-tight); } .nx-look-preview .nx-field { margin: 0; } .nx-look-preview__table { border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); } .nx-look-preview__table td { padding: var(--nx-space-2) var(--nx-space-3); border-top: 1px solid var(--nx-color-border); } .nx-look-preview__table tr:first-child td { border-top: 0; } .nx-look-preview__toast .nx-toast { animation: none; inline-size: fit-content; } .nx-look-preview__toast .nx-toast__action { font-weight: var(--nx-weight-medium); text-decoration: underline; } .nx-look-card { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--nx-space-3); align-items: center; padding: var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-look-card__img { aspect-ratio: 4 / 5; border-radius: var(--nx-radius-sm); background: linear-gradient(160deg, var(--nx-color-surface-2), var(--nx-color-accent-soft)); } .nx-look-card__text > p { margin: 0; } .nx-look-card__title { font-weight: var(--nx-weight-medium); } .nx-look-card__price { font-variant-numeric: tabular-nums; } /* Behaviour (DS11, ADR-067) */ .nx-mech__setting { display: grid; gap: var(--nx-space-2); } .nx-mech__help { margin: 0; } .nx-mech__nav-bar { flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); } .nx-mech__nav-bar > p { margin: 0; flex: 1 1 16rem; } .nx-segmented { display: inline-flex; gap: 0; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); overflow: hidden; } .nx-segmented > .nx-btn { border: 0; border-radius: 0; } .nx-segmented > [aria-current="true"] { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-mech__sections, .nx-mech__pages { list-style: none; margin: 0; padding: 0; } .nx-mech__sections { display: grid; gap: var(--nx-space-3); max-width: 36rem; } .nx-mech__section { border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-color-surface); } .nx-mech__pages { padding-left: var(--nx-space-4); } .nx-mech__row { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-2); min-height: var(--nx-control-h); } .nx-mech__name { min-width: 0; overflow-wrap: anywhere; } .nx-mech__name--section { font-weight: var(--nx-weight-medium); } .nx-mech__move { display: inline-flex; gap: var(--nx-space-1); flex: none; } .nx-mech__keys-bar { align-items: center; gap: var(--nx-space-3); } .nx-mech__keys-bar > p { margin: 0; } .nx-mech__keycell kbd { white-space: nowrap; } .nx-mech__keyacts { white-space: nowrap; text-align: end; } .nx-mech__capture { color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-mech__clash { color: var(--nx-color-text-muted); } .nx-mech__err { display: block; } /* ── The gallery (VS1, ADR-073). The stage takes the chosen look's tokens from its scoped stylesheet (.nx-showcase__stage[data-scheme]); the page around it keeps the shop's look. ── */ .nx-showcase { display: grid; gap: var(--nx-space-4); } .nx-showcase__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); } .nx-showcase .nx-seg { flex-wrap: wrap; } .nx-showcase .nx-seg a { display: inline-flex; align-items: center; gap: var(--nx-space-1); min-height: 2rem; padding: 0 var(--nx-space-3); color: var(--nx-color-text-muted); text-decoration: none; } .nx-showcase .nx-seg a + a { border-inline-start: 1px solid var(--nx-color-border); } .nx-showcase .nx-seg a:is([aria-pressed="true"], [aria-current="true"], [aria-current="page"]) { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-showcase__toc { display: flex; flex-wrap: wrap; gap: var(--nx-space-2) var(--nx-space-4); font-size: var(--nx-text-sm); } .nx-showcase__toc ul { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-3); margin: 0; padding: 0; list-style: none; } .nx-showcase__toc-group { color: var(--nx-color-text-muted); font-size: var(--nx-type-section-size); font-weight: var(--nx-type-section-weight); letter-spacing: var(--nx-type-section-tracking); text-transform: uppercase; } .nx-showcase__stage { display: grid; gap: var(--nx-space-6); padding: var(--nx-space-4); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-lg); background: var(--nx-texture), var(--nx-color-bg); color: var(--nx-color-text); font-family: var(--nx-font-sans); } .nx-showcase__group { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; } .nx-showcase__group-title { grid-column: 1 / -1; font-size: var(--nx-text-xl); } .nx-showcase__item { display: grid; gap: var(--nx-space-2); min-inline-size: 0; padding: var(--nx-space-4); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-showcase__item:is(#g-many-items, #g-list, #g-field-kinds, #g-field-states, #g-form-fields, #g-action-form, #g-icons, #g-long-text, #g-type) { grid-column: 1 / -1; } .nx-showcase__title { font-size: var(--nx-text-md); } .nx-showcase__note { color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); } .nx-showcase__body { min-inline-size: 0; padding-block-start: var(--nx-space-2); } .nx-showcase__h1, .nx-showcase__h2, .nx-showcase__h3 { font-family: var(--nx-font-heading); line-height: var(--nx-leading-tight); font-weight: var(--nx-heading-weight); letter-spacing: var(--nx-heading-tracking); } .nx-showcase__h3 { font-family: var(--nx-font-subheading); font-weight: var(--nx-subheading-weight); letter-spacing: normal; } .nx-showcase__stage { accent-color: var(--nx-color-accent); } .nx-showcase__focus { gap: var(--nx-space-5); padding: var(--nx-space-2); } .nx-showcase__focus :is(.nx-btn, .nx-input, a) { outline: var(--nx-focus-width) solid var(--nx-color-focus); outline-offset: var(--nx-focus-offset); } .nx-showcase__focus .nx-input { width: 12rem; } .nx-showcase__h1 { font-size: var(--nx-text-2xl); } .nx-showcase__h2 { font-size: var(--nx-text-xl); } .nx-showcase__h3 { font-size: var(--nx-text-lg); } .nx-showcase__icons { display: grid; gap: var(--nx-space-3); grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); margin: 0; padding: 0; list-style: none; } .nx-showcase__icons li { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-showcase__frame { padding: var(--nx-space-3); border: 1px dashed var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-bg); overflow: clip; } .nx-showcase__split { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .nx-showcase__cards { display: grid; gap: var(--nx-space-2); } .nx-showcase__card { padding: var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-bg); } /* The key-hint bar, in place rather than fixed to the window. */ .nx-keyhints.nx-showcase__keyhints { position: static; display: grid; justify-items: start; inset: auto; width: auto; max-width: 100%; transform: none; } /* Trying a theme (VS2, ADR-074): a bar at the foot of the page. */ .nx-try-bar { position: fixed; z-index: var(--nx-z-toast); inset-inline: 0; bottom: var(--nx-space-4); margin-inline: auto; width: fit-content; max-width: calc(100% - 2 * var(--nx-space-4)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-2) var(--nx-space-2) var(--nx-space-4); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius); background: var(--nx-color-surface-overlay); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); font-size: var(--nx-text-sm); animation: nx-pop var(--nx-duration) var(--nx-ease-follow) both; } } /* tenants/aelia-vintage/theme.css */ @font-face { font-family: "Cormorant Garamond"; src: url("/vendor/cormorant-garamond-500-5.3.0.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("/vendor/cormorant-garamond-500i-5.3.0.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } /* Aelia Vintage: "Vernissage", a gallery at night (design/README.md). By day a near-white wall and espresso ink; the garments carry the colour. At night (dark mode, and the drop's opening window after T-0) the room goes dark: espresso-black, champagne type, the photos lit like works on a wall. Cormorant Garamond for the name and headings, Inter for prices, measurements and labels. Every text pair meets WCAG 2.2 AA; control borders (border-strong) meet 3:1. */ @layer theme { :root { --nx-font-heading: "Cormorant Garamond", "Cormorant", ui-serif, Georgia, "Times New Roman", serif; --nx-font-serif: var(--nx-font-heading); --nx-radius-sm: 2px; --nx-radius: 2px; --nx-radius-lg: 4px; --nx-radius-pill: 2px; --nx-tracking-caps: .12em; --nx-ease-evening: var(--nx-ease-in-out); /* the engine's place-to-place curve (ADR-068) */ --nx-color-bg: #fbfaf7; --nx-color-surface: #ffffff; --nx-color-surface-2: #f3efe8; --nx-color-text: #1f1712; --nx-color-text-muted: #6b6058; --nx-color-border: #e7e1d9; --nx-color-border-strong: #8c8076; --nx-color-accent: #1f1712; --nx-color-accent-hover: #3a2e26; --nx-color-accent-contrast: #fbfaf7; --nx-color-accent-soft: #efe9e1; --nx-color-focus: #1f1712; --nx-color-sold: #7a3326; --nx-color-skeleton: #eee8e0; --aelia-bar-bg: #1f1712; --aelia-bar-fg: #efe6d6; } /* Evening: the same values for dark mode (automatic or forced) and for the first hour after a drop opens (data-drop-phase="opening"). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nx-color-bg: #14100d; --nx-color-surface: #1c1713; --nx-color-surface-2: #251f1a; --nx-color-text: #efe6d6; --nx-color-text-muted: #b2a594; --nx-color-border: #2f2721; --nx-color-border-strong: #75685b; --nx-color-accent: #efe6d6; --nx-color-accent-hover: #f8f2e7; --nx-color-accent-contrast: #14100d; --nx-color-accent-soft: #2a221c; --nx-color-focus: #efe6d6; --nx-color-sold: #e9b2a4; --nx-color-skeleton: #231c17; --aelia-bar-bg: #0b0907; } } :root[data-theme="dark"], :root:not([data-theme="light"]):has(.nx-store[data-drop-phase="opening"]) { color-scheme: dark; --nx-color-bg: #14100d; --nx-color-surface: #1c1713; --nx-color-surface-2: #251f1a; --nx-color-text: #efe6d6; --nx-color-text-muted: #b2a594; --nx-color-border: #2f2721; --nx-color-border-strong: #75685b; --nx-color-accent: #efe6d6; --nx-color-accent-hover: #f8f2e7; --nx-color-accent-contrast: #14100d; --nx-color-accent-soft: #2a221c; --nx-color-focus: #efe6d6; --nx-color-sold: #e9b2a4; --nx-color-skeleton: #231c17; /* status colours from the core dark palette (a light-mode shopper in the opening window still needs them readable on the dark wall) */ --nx-color-danger: #ff8f88; --nx-color-danger-contrast: #2b0a08; --nx-color-danger-soft: #3a1a18; --nx-color-success: #7fd49a; --nx-color-success-soft: #16301f; --nx-color-warning: #f0bd6a; --nx-color-warning-soft: #33250f; --nx-color-info: #8cc0f5; --nx-color-info-soft: #152a40; --nx-color-overlay: rgb(0 0 0 / .6); --aelia-bar-bg: #0b0907; } /* The lights go down slowly at T-0 (and come back up after the hour). */ @media (prefers-reduced-motion: no-preference) { body, .nx-store__header, .nx-board__filters, .nx-sheet--full { transition: background-color calc(var(--nx-duration-linger) * .75) var(--nx-ease-evening), color calc(var(--nx-duration-linger) * .75) var(--nx-ease-evening), border-color calc(var(--nx-duration-linger) * .75) var(--nx-ease-evening); } } /* Type */ h1, h2, h3 { font-weight: 500; letter-spacing: .005em; } h1 { font-size: var(--nx-text-3xl); } .nx-eyebrow, .nx-item__eyebrow { font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); letter-spacing: .14em; } .nx-btn { letter-spacing: .12em; text-transform: uppercase; font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); } .nx-btn--lg { font-size: var(--nx-text-sm); } /* The wordmark: "Aelia" in Cormorant italic over VINTAGE in small spaced capitals. The brand name stays live text ("Aelia Vintage", the link's accessible name); a fixed width breaks it after the first word (the same in every browser, so it centres exactly), and ::first-line sets the name. padding-left balances VINTAGE's trailing letter-spacing. */ .nx-store__wordmark, .nx-auth__brand { box-sizing: border-box; width: 6.75rem; flex: none; color: var(--nx-color-text); padding-left: .5em; text-align: center; line-height: 1.35; text-decoration: none; font: 500 .75rem/1.35 var(--nx-font-sans); font-variant-caps: all-small-caps; letter-spacing: .5em; } .nx-store__wordmark::first-line, .nx-auth__brand::first-line { font-family: var(--nx-font-heading); font-style: italic; font-size: 2.125rem; line-height: 1; font-variant-caps: normal; letter-spacing: .005em; } @media (min-width: 60rem) { /* Centred like a gallery's name over the door; the menu stays right. */ :root { --nx-header-height: 4.5rem; } /* sticky offsets follow the taller header */ .nx-store__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: var(--nx-header-height); } .nx-store__wordmark { grid-column: 2; justify-self: center; margin: 0; } .nx-store__bar > nav { grid-column: 3; grid-row: 1; justify-self: end; margin-right: calc(var(--nx-tap-target) + var(--nx-space-2)); } .nx-store__bar > .nx-theme-switch { grid-column: 3; grid-row: 1; justify-self: end; } } .nx-store__nav a { font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; } @media (max-width: 59.99rem) { /* Phones and tablets: the wordmark and the theme switch on one row, the menu on its own row below, spread across, so no link is cut off or scrolled out of sight (F-HEADER-PHONE). */ :root { --nx-header-height: 6.5rem; } .nx-store__bar { flex-wrap: wrap; justify-content: space-between; row-gap: 0; column-gap: var(--nx-space-2); padding-top: var(--nx-space-2); } .nx-store__bar > nav { order: 3; flex: 1 0 100%; overflow: visible; } .nx-store__nav { justify-content: space-between; } .nx-store__nav a { padding-inline: var(--nx-space-2); letter-spacing: .08em; } } /* The drop bar: a dark band by day and by night. */ .nx-store__announce { background: var(--aelia-bar-bg); color: var(--aelia-bar-fg); font-size: var(--nx-text-xs); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; padding-block: .6rem; } .nx-store__announce strong { font-weight: var(--nx-weight-medium); } /* The drop rail and drop page: announced like an opening. */ .nx-droprail { gap: var(--nx-space-3); padding-block: clamp(var(--nx-space-10), 7vw, var(--nx-space-16)); border: 0; } .nx-droprail > p:last-child { margin-top: var(--nx-space-6); } .nx-droprail__title a:hover, .nx-droprail__title a:focus-visible { text-decoration: none; } .nx-droprail__title, .nx-drop__title, .nx-board-intro__title { font-style: italic; font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem); line-height: 1.02; } /* Inter's tabular figures: the vendored Cormorant has old-style, proportional digits, which would shift every second. */ .nx-droprail__count, .nx-drop__count { font-family: var(--nx-font-sans); font-weight: 200; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .nx-drop__when { margin-top: var(--nx-space-3); } .nx-drop .nx-push { max-width: 38rem; margin-inline: auto; text-align: center; } .nx-drop__story { font-family: var(--nx-font-heading); font-size: 1.375rem; line-height: 1.5; } :root:not([data-theme="light"]):has(.nx-store[data-drop-phase="opening"]) .nx-droprail, :root:not([data-theme="light"]):has(.nx-store[data-drop-phase="opening"]) .nx-drop__head { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgb(239 230 214 / .08), transparent 70%); } /* Filters: squared, quiet */ .nx-chip { border-color: var(--nx-color-border); background: transparent; color: var(--nx-color-text); } .nx-chip:hover { border-color: var(--nx-color-border-strong); } .nx-chip[aria-current="true"], .nx-chip[aria-current="page"] { background: var(--nx-color-text); border-color: var(--nx-color-text); color: var(--nx-color-bg); } /* Piece cards read like wall labels: name, then era and size, then the price, all in Inter so the details read easily. */ .nx-pieces { row-gap: var(--nx-space-10); } .nx-piece__title { font-family: var(--nx-font-sans); font-size: var(--nx-text-sm); font-weight: var(--nx-weight-medium); letter-spacing: .01em; } .nx-piece__meta { font-size: var(--nx-text-sm); line-height: 1.4; letter-spacing: .01em; } .nx-piece__price { font-size: var(--nx-text-sm); } .nx-sold { background: var(--nx-color-bg); font-weight: var(--nx-weight-medium); letter-spacing: .14em; } .nx-piece:has(.nx-sold) .nx-pic img { opacity: .5; filter: grayscale(.3); } :root:not([data-theme="light"]):has(.nx-store[data-drop-phase="opening"]) .nx-piece__media, :root[data-theme="dark"] .nx-piece__media { box-shadow: 0 30px 60px -32px rgb(0 0 0 / .9); } .nx-bagline__title { font-family: var(--nx-font-sans); font-size: var(--nx-text-sm); font-weight: var(--nx-weight-medium); } /* The piece */ .nx-item__title { font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); line-height: 1.08; } .nx-item__h { font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); letter-spacing: .14em; } /* No underlines (Anna): standalone links are small boxes, like quiet buttons; links inside a sentence get a soft box so they're still distinguishable without colour alone (WCAG 1.4.1). */ .nx-store a { text-decoration: none; } .nx-item__nav a, .nx-store__announce a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--nx-space-3); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); color: inherit; text-decoration: none; transition: background-color var(--nx-duration), color var(--nx-duration); } .nx-item__nav a:hover { background: var(--nx-color-text); color: var(--nx-color-bg); border-color: var(--nx-color-text); } .nx-store__announce a { min-height: 1.75rem; margin-left: var(--nx-space-2); border-color: color-mix(in srgb, var(--aelia-bar-fg) 55%, transparent); } .nx-store__announce a:hover { background: var(--aelia-bar-fg); color: var(--aelia-bar-bg); } .nx-store__nav a, .nx-store__more-btn { border: 1px solid transparent; border-radius: var(--nx-radius-sm); } .nx-store__more-btn { font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; } .nx-store__more[open] > .nx-store__more-btn { border-color: var(--nx-color-border-strong); } .nx-store__more-list a, .nx-store__more-list .nx-btn { min-height: var(--nx-tap-target); } .nx-store__nav a[aria-current="page"] { text-decoration: none; border-color: var(--nx-color-border-strong); } .nx-store__nav a:hover { border-color: var(--nx-color-border-strong); } .nx-theme-switch { border: 1px solid transparent; border-radius: var(--nx-radius-sm); } .nx-theme-switch:hover { background: none; border-color: var(--nx-color-border-strong); } .nx-store__main p:not(.nx-item__eyebrow, .nx-backlink) a:not([class]), .nx-store__footer a:not([class]) { padding: .05em .3em; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); } /* Sign-in pages: core puts the wordmark centred in a top bar and the way back, plain, in the top-left corner; here only the wordmark's link keeps the wordmark's colour and no underline. */ .nx-auth__back { gap: var(--nx-space-2); } .nx-auth__brand a, .nx-auth__brand a:hover { color: inherit; text-decoration: none; } .nx-item__nav { gap: var(--nx-space-2); padding-top: var(--nx-space-6); } /* Breadcrumbs (the way back, the era and category trail): plain text, no box and no underline; muted until hovered. */ .nx-backlink a, .nx-item__eyebrow a { text-decoration: none; color: var(--nx-color-text-muted); transition: color var(--nx-duration); } .nx-backlink a { gap: var(--nx-space-2); } .nx-backlink a:hover, .nx-item__eyebrow a:hover { color: var(--nx-color-text); } /* The piece page: room to breathe, and the board's strip set apart from the piece's own photos. On the piece page the filters scroll away; the way back stays with you. */ .nx-shop--piece .nx-board__filters { position: static; } .nx-shop--piece .nx-backlink { position: sticky; top: var(--nx-header-height); z-index: 2; margin: 0; padding: var(--nx-space-3) 0; background: var(--nx-color-bg); } .nx-related { margin-top: var(--nx-space-16); padding-top: var(--nx-space-10); } .nx-related__h { margin-bottom: var(--nx-space-6); } .nx-item__info { gap: var(--nx-space-6); } .nx-item__section { padding-top: var(--nx-space-6); } @media (min-width: 60rem) { .nx-browse { column-gap: var(--nx-space-12); } /* the strip's width follows storefront.strip.thumb_size */ .nx-strip { top: calc(var(--nx-header-height) + 4rem); padding-right: var(--nx-space-5); border-right: 1px solid var(--nx-color-border); } .nx-browse .nx-photos, .nx-browse .nx-item__info { top: calc(var(--nx-header-height) + 4rem); } .nx-browse .nx-item { column-gap: var(--nx-space-12); } } }