/* Pull in the shared token :root and the self-hosted @font-face declarations so
this file is self-sufficient: even if a stale compiled view hasn't picked up
the new tags yet, linking axiom-tokens.css alone still loads the tokens
and fonts. (@import must stay at the very top. Browsers dedupe by URL, so this
does not double-download when the layout also links them.) */
@import url('/assets/css/axiom-vars.css');
@import url('/assets/css/axiom-fonts.css');
/* ============================================================
AXIOM — Design Tokens (C2 color · C24 spacing · C3 container)
Single source of truth. Loaded AFTER the theme CSS so it can
extend the theme's :root (--container-width, --color-dark-1)
without fighting the established look.
Foundation pass only: this file DEFINES the system and applies
the accent to the single primary action. Broad component
re-skinning (C1/C4/C5) is the later coherence milestone.
============================================================ */
/* NOTE: the design tokens (:root) now live in the shared single-source file
public/assets/css/axiom-vars.css, loaded immediately BEFORE this file in
layouts/web. This file is the Blade STOREFRONT SKIN only — it consumes those
tokens (via the --ax-* aliases) and never redefines them. The redesign pages
load the same axiom-vars.css, so both worlds share one token source. */
/* ============================================================
TYPOGRAPHY FAMILIES — swap the theme's Poppins/Cormorant for the
redesign fonts (Satoshi / Clash Display / Space Grotesk) across the
storefront. FAMILY ONLY — sizes & line-heights are unchanged, so the
token swap adds no layout/DOM change (Bucket B stays skin-only).
Loaded after the theme, so these win. axiom-tokens.css is only
included by layouts/web, so admin is untouched.
============================================================ */
body,
.page,
button, input, select, textarea, optgroup {
font-family: var(--sans);
}
h1, h2, h3, h4, h5, h6,
.hs-title-1, .hs-title-2, .hs-title-3, .hs-title-4,
.section-title, .section-title-small, .ax-serif-title,
.ax-story__title, .ax-story__signature, .ax-empty__title,
.ax-acct__title {
font-family: var(--display);
}
/* Mono for the redesign's eyebrow/label/tabular voice */
.eyebrow,
.ax-story__eyebrow, .ax-acct__eyebrow, .ax-empty__eyebrow,
.ax-trust__item, .ax-catnav__link,
.ax-card-variants, .ax-price-from, .ax-status, .ax-acct__panel-title {
font-family: var(--mono);
}
/* Base canvas → true black, diamond-white text (aligns storefront to the redesign). */
body,
.page {
background-color: var(--bg);
color: var(--text);
}
/* ------------------------------------------------------------
Sitewide surface remap. The theme paints most backgrounds via the
.bg-dark-* utilities and dozens of internal rules that read the theme's
own --color-dark-* variables (with !important), which is why the storefront
still showed the theme's charcoal (#0e0e10) instead of the redesign black.
Re-point those variables at the redesign tokens here (loaded AFTER the
theme's :root) so every dark surface across the site flips to the redesign
palette in one place — no per-page overrides needed.
------------------------------------------------------------ */
:root,
.dark-mode {
/* NB: demo-elegant.css re-declares these on .dark-mode (which carries),
so a :root-only override is shadowed for everything inside . Repeat the
remap on .dark-mode — loaded after demo-elegant, equal specificity → this wins. */
--color-dark-1: #050506; /* was #0e0e10 — redesign true-black canvas (var(--bg)) */
--color-dark-2: #16161a; /* was #2c2c2c — redesign elevated surface (var(--surface)) */
--color-dark-3: #0b0b0d; /* was #272727 — redesign secondary surface (var(--bg-2)) */
}
/* Opt-in content container (C3). Apply during the coherence pass so inner
pages share the home grid; defined here as the single width source. */
.ax-container {
width: 100%;
max-width: var(--ax-container);
margin-inline: auto;
padding-inline: var(--ax-gutter);
}
/* ------------------------------------------------------------
Primary action accent (C2) — silver, kept scarce.
Scoped to the product Add-to-Cart and an opt-in .ax-btn-accent
so the accent reads as THE high-intent action on a page.
------------------------------------------------------------ */
#js-add-to-cart.btn,
.ax-btn-accent {
background-color: var(--ax-accent);
border-color: var(--ax-accent);
color: var(--ax-accent-ink);
}
/* ------------------------------------------------------------
Global accent CTA — the exact home `.btn-accent` look (luminous silver +
rotating platinum glow + shine sweep), but usable OUTSIDE the .ax-rd editorial
scope. Add `ax-cta` to any primary button on the shop / auth / cart / checkout /
account pages so every high-intent CTA reads identically to the home page.
------------------------------------------------------------ */
/* `.axp-submit` (auth) and `.ax-pill` (cart / checkout / confirmation) are the
primary pills the storefront already uses — give them the home glow automatically,
no per-button markup change. (NB: deliberately NOT named `.ax-cta` — that class is
already a flex button-row container in the .ax-rd editorial pages.) */
.axp-submit, .ax-pill {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(176deg, rgba(255,255,255,0.96) 0%, rgba(223,230,237,0.78) 46%, rgba(198,206,215,0.9) 100%);
color: #16140f;
border: 1px solid rgba(255,255,255,0.85);
box-shadow: inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -3px 7px rgba(110,126,144,0.28), inset 16px 0 20px -16px rgba(150,205,255,0.65), inset -16px 0 20px -16px rgba(255,170,205,0.6), 0 16px 36px -16px rgba(218,230,244,0.5), 0 2px 6px rgba(0,0,0,0.32);
}
.axp-submit::before, .ax-pill::before {
content: ''; position: absolute; inset: -40%; border-radius: 50%; z-index: -1; pointer-events: none;
background: conic-gradient(from 0deg, rgba(120,180,255,0) 0%, rgba(120,180,255,0.5) 12%, rgba(255,255,255,0) 25%, rgba(255,210,130,0.45) 42%, rgba(255,255,255,0) 55%, rgba(255,150,200,0.5) 72%, rgba(255,255,255,0) 85%, rgba(120,180,255,0) 100%);
opacity: 0.5; filter: blur(4px); animation: axCtaFire 11s linear infinite; transition: opacity .6s ease;
}
.axp-submit:hover::before, .ax-pill:hover::before { opacity: 0.8; animation-duration: 4.5s; }
@keyframes axCtaFire { to { transform: rotate(360deg); } }
.axp-submit::after, .ax-pill::after {
content: ''; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; pointer-events: none;
background: linear-gradient(110deg, transparent, rgba(255,255,255,0.95), transparent); transform: skewX(-18deg); transition: transform 1.1s ease;
}
.axp-submit:hover::after, .ax-pill:hover::after { transform: translateX(430%) skewX(-18deg); }
.axp-submit:hover, .ax-pill:hover { background: linear-gradient(176deg, #ffffff 0%, #eef3f7 46%, #d4dce4 100%); color: #16140f; }
@media (prefers-reduced-motion: reduce) { .axp-submit::before, .axp-submit::after, .ax-pill::before, .ax-pill::after { animation: none; } }
/* ------------------------------------------------------------
Cursor-following platinum glow for page header banners (about / collections /
categories / detail heros), matching the home hero's glint. The banner section
must be position:relative; drop a in it and the
layout's banner-glow script sets --mx/--my on hover.
------------------------------------------------------------ */
.ax-banner-glow {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0;
transition: opacity .5s ease;
background: radial-gradient(460px 460px at var(--mx, 50%) var(--my, 42%), rgba(var(--glow), 0.14), transparent 62%);
}
.ax-banner-glow.on { opacity: 1; }
@media (pointer: coarse) { .ax-banner-glow { display: none; } }
#js-add-to-cart.btn:hover,
#js-add-to-cart.btn:focus,
#js-add-to-cart.btn:active,
.ax-btn-accent:hover,
.ax-btn-accent:focus,
.ax-btn-accent:active {
background-color: var(--ax-accent-strong);
border-color: var(--ax-accent-strong);
color: var(--ax-accent-ink);
}
#js-add-to-cart.btn[disabled],
#js-add-to-cart.btn:disabled {
opacity: .6;
}
/* ------------------------------------------------------------
Trust-signal bar (C12) — "At Your Service"-style row of small
icon + short-label pairs. Restrained, monochrome, on dark.
- .ax-trust--block : under Add-to-Cart on the product page
- .ax-trust--strip : thin full-width strip atop collection pages
------------------------------------------------------------ */
.ax-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ax-space-4) var(--ax-space-5);
border-top: 1px solid var(--ax-line);
border-bottom: 1px solid var(--ax-line);
color: var(--ax-text-muted);
}
.ax-trust--block {
margin-top: var(--ax-space-4);
padding: var(--ax-space-4) 0;
}
.ax-trust--strip {
justify-content: center;
gap: var(--ax-space-4) var(--ax-space-6);
padding: var(--ax-space-3) var(--ax-gutter);
border-top: none;
}
.ax-trust__item {
display: inline-flex;
align-items: center;
gap: var(--ax-space-2);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
}
.ax-trust__icon {
display: inline-flex;
width: 18px;
height: 18px;
color: var(--ax-accent); /* the one place the accent appears at rest, kept subtle */
flex: 0 0 auto;
}
.ax-trust__icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
}
.ax-trust__label {
color: var(--ax-text-muted);
}
@media (max-width: 575px) {
.ax-trust {
gap: var(--ax-space-3) var(--ax-space-4);
}
.ax-trust__item {
font-size: 11px;
}
}
/* ------------------------------------------------------------
Product card micro-details (C36) — rendered from existing data
only, restrained and monochrome. Badge uses the accent sparingly.
------------------------------------------------------------ */
.ax-card-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
padding: 3px 9px;
color: var(--ax-accent);
background: rgba(14, 14, 16, .72);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 2px;
backdrop-filter: blur(2px);
}
.ax-card-variants {
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ax-text-muted);
margin-top: 3px;
}
.ax-price-from {
font-size: .78em;
color: var(--ax-text-muted);
text-transform: uppercase;
letter-spacing: .06em;
}
/* ------------------------------------------------------------
Form controls (brand) — replace the browser/Bootstrap default
blue on focus, checked state, and native control UI with the
silver accent, site-wide. Covers auth (remember-me), search,
account, and filter checkboxes/selects. The filter