/* =========================================================================== FLASHMAC — RESPONSIVE TOKENS Breakpoints, fluid type/space, fixed content measures, full-bleed surfaces and touch minimums. Single source of truth for the WordPress theme. Loaded AFTER typography.css and spacing.css: the fluid definitions below deliberately re-declare --text-* and --space-* so the scale stays ONE scale with responsive values. No parallel mobile scale, no new step names, and no original token file is edited. THE TWO RULES, declared separately: 1. SURFACES EXTEND — every section paints a background edge to edge at every width. No section ever lets the page background show at its sides. 2. CONTENT DOES NOT — inside those surfaces the content stays centred and fixed: 1224 on home/catalogue, 1184 on PDP. The PDP grid stays 460+680 at any resolution. Rails are the only exception (see --rail-inset). ⚠ CSS media queries cannot read var(). Every query in the kit repeats the literal below and names the token it mirrors in a comment. These six values are the only place the numbers are authored. =========================================================================== */ :root { /* ---- Breakpoints ------------------------------------------------------- */ /* phone — above the whole phone band (390/393/402/430) with headroom */ /* tablet — iPad portrait exactly; the layout switch (stack ↔ columns) */ /* desktop — laptop entry */ /* wide — FREEZE WIDTH: at and above this, no token changes value */ --bp-phone: 480px; /* @kind other */ --bp-tablet: 768px; /* @kind other */ --bp-desktop: 1024px; /* @kind other */ --bp-wide: 1280px; /* @kind other */ /* Ends of the fluid ramp — type and space interpolate between these two. */ --fluid-min: 390px; /* @kind other */ --fluid-max: var(--bp-wide); /* @kind other */ /* ---- RULE 2 · fixed content measures ---------------------------------- */ /* shell = content + 2×gutter. The shell is what carries max-width; the content measure is what the design was verified at. */ --gutter-shell: 28px; --content-default: 1224px; /* home + catalogue */ --content-pdp: 1184px; /* product detail */ --shell-default: 1280px; /* 1224 + 2×28 */ --shell-pdp: 1240px; /* 1184 + 2×28 */ /* ---- THE ONE EXCEPTION TO RULE 2 -------------------------------------- */ /* Header and utility bar are FLUID: their content spans the viewport with a safety gutter instead of stopping at --shell-default, so logo + search pin to the left edge and account + cart to the right edge at any width. Nothing else in the kit is fluid. Everything else obeys RULE 2. */ --shell-fluid: 100%; /* @kind other */ /* --gutter-fluid: 16px at 390 → 48px at 1920 and beyond */ --gutter-fluid: clamp(1rem, 2.5vw, 3rem); /* @kind spacing */ /* PDP purchase grid — locked, never fluid. 460 + 44 + 680 = 1184. */ --pdp-media: 460px; --pdp-buy: 680px; --pdp-gap: 44px; /* ---- RULE 2 · customer area (WooCommerce my-account) ------------------ */ /* Same shell as home/catalogue (--content-default 1224), split once: 264 + 40 + 920 = 1224. Locked at and above --bp-wide, exactly like the PDP grid. 1024–1279 the nav keeps 264 and the content column absorbs the difference; 768–1023 the nav narrows to --account-nav-tablet; below --bp-tablet there is no side column at all — the dashboard becomes a full-width index and each endpoint is its own screen with a back row. */ --account-nav: 264px; --account-gap: 40px; --account-content: 920px; --account-nav-tablet: 220px; --account-gap-tablet: 32px; --account-nav-item: 48px; /* nav voice height — ≥ --touch-min */ --account-index-item: 56px; /* index row height below --bp-tablet */ --account-card-pad: 28px; /* card interior, desktop */ --account-card-pad-narrow: 20px; --account-block-gap: 24px; /* between stacked cards in the content column */ /* Order detail: a second split inside --account-content. 568 + 32 + 320 = 920. Below --bp-desktop the aside drops under the main. */ --order-main: 568px; --order-aside: 320px; --order-gap: 32px; /* Orders table over --account-content: 140+140+180+140+320 = 920. */ --orders-col-id: 140px; --orders-col-date: 140px; --orders-col-status: 180px; --orders-col-total: 140px; --orders-col-action: 320px; --orders-row-h: 64px; --orders-head-h: 44px; --orders-cell-x: 20px; --order-line-thumb: 56px; /* Login / register / password recovery. A narrower content measure than the rest of the area: 476 + 48 + 476 = 1000, centred inside the 1224 shell. Recovery is the same 476 panel, alone and centred. */ --auth-content: 1000px; --auth-panel: 476px; --auth-gap: 48px; /* WooCommerce system messages (conferma / avviso / errore). */ --notice-pad-y: 14px; --notice-pad-x: 18px; --notice-icon: 20px; --notice-gap: 12px; --notice-border: 1.5px; /* @kind other */ /* ---- RULE 1 · full-bleed section surfaces ----------------------------- */ /* Alternating band pair. One step of surface value apart in BOTH themes: light ink-50 ↔ white dark ink-950 ↔ ink-900 Adjacent sections must never share a band. */ --section-band-a: var(--bg-base); --section-band-b: var(--bg-subtle); --section-band-accent: var(--accent-soft); /* reviews */ --section-band-ink: var(--ink-950); /* utility bar, footer */ /* Rail exception: the track's left inset lands on the content edge, so the heading above it and the first card align, while the track itself runs on past the container. Used as padding on a child of a full-bleed section, where 100% resolves to the viewport width. */ --rail-inset: max(var(--gutter-shell), (100% - var(--content-default)) / 2); /* @kind spacing */ /* ---- Touch --------------------------------------------------------------*/ --touch-min: var(--control-md); /* 44px — minimum hit area, any axis */ --touch-gap: var(--space-2); /* 8px — minimum gap between adjacent hits */ --touch-inset: var(--space-4); /* 16px — page gutter below --bp-phone */ /* Press state is NOT declared here — --press-scale / --press-opacity are interaction primitives and live in tokens/motion.css. */ /* ---- Grid minimums ---------------------------------------------------- */ /* Catalogue card floor. 230 desktop is the verified value; 160 below the tablet threshold is what puts TWO columns on a 390 screen: 390 − 2×16 inset − 16 gap = 342 → 171 per card. */ --card-min: 230px; /* @kind spacing */ --card-min-phone: 160px; /* @kind spacing */ --rail-card-min: 240px; /* @kind spacing */ --rail-card-min-review: 320px; /* @kind spacing */ /* ---- Sticky offsets --------------------------------------------------- */ --header-offset: 90px; /* sticky top for sticky columns @kind spacing — static fallback; Header measures its own real rendered BOTTOM edge (not just height, since it may not start at true viewport y=0 — e.g. a bar above it) via ResizeObserver and overrides this at runtime (documentElement.style), so it never drifts */ --cta-bar-height: 76px; /* anchored PDP buy bar under --bp-tablet @kind spacing */ /* ---- Safe area ---------------------------------------------------------- */ /* iOS home-indicator etc. Requires viewport-fit=cover on the page's viewport meta tag, or this resolves to 0 everywhere and silently does nothing. Always ADDITIVE — summed into the anchored buy bar's height and into the page's compensating bottom padding, never substituted for either. */ --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* @kind other */ /* ---- Section stacking ------------------------------------------------- */ /* Column counts per tier, so the theme reads them as data rather than inferring them from the CSS. */ --cols-trust-desktop: 4; /* @kind other */ --cols-trust-narrow: 2; /* @kind other */ --cols-category-desktop: 4; /* @kind other */ --cols-category-narrow: 2; /* @kind other */ --cols-promo-desktop: 2; /* @kind other */ --cols-promo-narrow: 1; /* @kind other */ --cols-why-desktop: 3; /* @kind other */ --cols-why-narrow: 1; /* @kind other */ --cols-footer-links-desktop: 4; /* @kind other */ --cols-footer-links-narrow: 2; /* @kind other */ --cols-related-desktop: 4; /* @kind other */ --cols-related-narrow: 2; /* @kind other */ /* ======================================================================= FLUID TYPE — one rule for the whole scale: mobile value = 16 + (desktop − 16) / 2 i.e. every step compresses halfway toward the 16px base. Steps at or below 16px do not scale at all. Ramp runs --fluid-min → --fluid-max and is flat outside it, so at ≥1280 every value equals today's desktop value. ======================================================================= */ /* Fixed — at or below the 16px base */ /* --text-3xs 11px · --text-2xs 12px · --text-xs 13px · --text-sm 15px --text-md 16px — inherited unchanged from typography.css */ /* Fluid — 19→17.5, 24→20, 32→24, 44→30, 60→38, 80→48 */ --text-lg: clamp(1.09375rem, 1.0527rem + 0.1685vw, 1.1875rem); /* @kind other */ --text-xl: clamp(1.25rem, 1.1404rem + 0.4494vw, 1.5rem); /* @kind other */ --text-2xl: clamp(1.5rem, 1.2809rem + 0.8989vw, 2rem); /* @kind other */ --text-3xl: clamp(1.875rem, 1.4916rem + 1.5730vw, 2.75rem); /* @kind other */ --text-4xl: clamp(2.375rem, 1.7725rem + 2.4719vw, 3.75rem); /* @kind other */ --text-5xl: clamp(3rem, 2.1236rem + 3.5955vw, 5rem); /* @kind other */ /* ======================================================================= FLUID SPACE — the same rule, the same ramp, the same floor. 128→72, 96→56, 64→40, 48→32, 32→24, 24→20. Every mobile value lands on the 4px grid, so mobile reuses the scale instead of forking it. ======================================================================= */ /* Fixed — --space-0 · 1 (4px) · 2 (8px) · 3 (12px) · 4 (16px) */ --space-5: clamp(1.25rem, 1.1404rem + 0.4494vw, 1.5rem); --space-6: clamp(1.5rem, 1.2809rem + 0.8989vw, 2rem); --space-7: clamp(2rem, 1.5618rem + 1.7978vw, 3rem); --space-8: clamp(2.5rem, 1.8427rem + 2.6966vw, 4rem); --space-9: clamp(3.5rem, 2.4045rem + 4.4944vw, 6rem); --space-10: clamp(4.5rem, 2.9663rem + 6.2921vw, 8rem); } .theme-dark { --section-band-a: var(--ink-950); --section-band-b: var(--ink-900); --section-band-accent: rgba(235, 63, 147, 0.16); --section-band-ink: var(--ink-900); }