/* ============================================================================ BINERET — Hero section Built on the BINERET Liquid Glass tokens (PURE MONOCHROME, v3.3.0-mono). PRODUCTION NOTE: the :root block below is a SELF-CONTAINED SUBSET of the emitted token custom properties so this file runs standalone. In the real app, delete :root and let bineret-glass.css supply every --lav-* variable; keep ONLY the component CSS (everything under "HERO COMPONENT"). Components reference --lav-* semantics only — no hard-coded values. ============================================================================ */ /* Tokens moved to assets/css/sections/global.root.css (single source of truth). */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; min-height:100dvh; font-family:var(--lav-font-text); color:var(--lav-text-primary); background:var(--lav-ink-1); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ============================================================================ TIER-0 CANVAS — fixed neutral field + dark scrim + grain. Swap --hero-photo for a real glassmorphism photo in production (the photo is the ONLY place colour is allowed to appear). ============================================================================ */ .hero{ position:relative; isolation:isolate; min-height:100dvh; display:grid; place-items:center; padding-inline:var(--lav-fluid-s); padding-block:var(--lav-fluid-xl); overflow:hidden; } .hero__bg{ position:absolute; inset:0; z-index:-2; background: radial-gradient(120% 90% at 18% 8%, #2b2b2b 0%, rgba(43,43,43,0) 46%), radial-gradient(95% 80% at 88% 22%, #242424 0%, rgba(36,36,36,0) 50%), radial-gradient(140% 120% at 50% 120%, #0d0d0d 0%, rgba(13,13,13,0) 55%), linear-gradient(180deg, #1a1a1a 0%, #121212 60%, #0d0d0d 100%); } /* dark scrim so hero text never relies on bare glass for contrast (legibility law) */ /* This scrim is a plain `inset:0` layer painted on `.hero__bg`, which is itself a plain `inset:0` layer painted on `.hero` — neither of the two carries its own `overflow:hidden`, because the section as a whole relies on `.hero`'s overflow for that job. That is fine as long as every layer in the stack is either unrounded or explicitly told to match whatever radius its parent ends up with. `.hero__bg` was told (see the `.app .hero__bg{ border-radius:inherit }` rule below, which is what actually gives it corners once the framed shell rounds `.hero`) — this scrim never was, so it kept painting a perfect square all the way into the corners while the layer under it curved away beneath it. In light mode that square is a near-opaque near-white wash, and it is exactly the "opaque rectangle poking out past the rounded corner" bug: `.hero__bg`'s own curve reveals the page's pale-blue canvas at the corner, and this unrounded layer immediately paints over that reveal with its square corner. In dark mode the same unrounded square is near-black, sitting on a `.hero__bg` corner that is *also* fading toward near-black and a page canvas that is near-black too — so instead of a visible seam you get no visible curve at all, which is the "dark mode has no border-radius" report: the radius was always being applied one layer down, just permanently masked by this one. `border-radius: inherit` is the same fix used by every `::before`/`::after` glass layer in bineret-glass.css, and it is correct here for the same reason: since this element is sized identically to its parent (`inset:0`, no border, no padding), matching the radius makes the two shapes coincide exactly, so there is nothing left to clip. */ .hero__bg::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(75% 55% at 50% 46%, rgba(0,0,0,0) 0%, rgba(8,8,8,0.34) 78%), linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.42) 100%); } /* mandatory anti-banding grain (most visible in a pure-grey system) */ .hero__grain{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--lav-noise-opacity); mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================================ HERO COMPONENT (the only part to keep in production) ============================================================================ */ .hero__inner{ position:relative; z-index:1; width:100%; max-width:1040px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--lav-fluid-m); } /* — copy block — */ .hero__copy{ display:flex; flex-direction:column; align-items:center; gap:var(--lav-space-4); max-width:22ch; } .hero__eyebrow{ margin:0; font-size:var(--lav-type-label); font-weight:500; letter-spacing:var(--lav-track-wide); text-transform:uppercase; color:var(--lav-text-tertiary); } .hero__title{ margin:0; font-family:var(--lav-font-display); font-weight:600; font-size:var(--lav-type-display); line-height:var(--lav-leading-tight); letter-spacing:var(--lav-track-tight); color:var(--lav-text-primary); text-wrap:balance; } .hero__sub{ margin:0; max-width:46ch; font-size:var(--lav-type-lg); line-height:var(--lav-leading-normal); color:var(--lav-text-secondary); text-wrap:pretty; } /* — search (the hero action) — single real glass surface + one solid white CTA — */ .hero__search{ position:relative; display:flex; align-items:center; width:min(100%, 720px); padding-block:var(--lav-space-2); padding-inline:var(--lav-space-5) var(--lav-space-2); gap:var(--lav-space-3); border-radius:var(--lav-radius-pill); border:1px solid var(--lav-glass-edge); background:linear-gradient(135deg, rgb(255 255 255 / calc(var(--lav-glass-tint-strong-alpha) * var(--_i))), rgb(255 255 255 / calc(var(--lav-glass-tint-alpha) * var(--_i)))); backdrop-filter:blur(calc(var(--lav-blur-surface) * var(--_i))) saturate(var(--lav-glass-saturate)) brightness(var(--lav-glass-brightness)); -webkit-backdrop-filter:blur(calc(var(--lav-blur-surface) * var(--_i))) saturate(var(--lav-glass-saturate)); box-shadow:var(--lav-glass-shadow), inset 0 1px 0 var(--lav-glass-highlight); transform:translate3d(0,0,0); /* promote heavy glass + baseline for the focus lift */ transition:transform var(--lav-dur-base) var(--lav-ease-spring), border-color var(--lav-dur-base) var(--lav-ease-standard); } /* focus: subtle lift + brighter rim + white halo (only transform/opacity animate) */ .hero__search:focus-within{ transform:translate3d(0,-2px,0); border-color:var(--lav-glass-edge-bright); } .hero__search::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 3px var(--surf-inset), 0 0 30px var(--surf-inset); opacity:0; transition:opacity var(--lav-dur-base) var(--lav-ease-standard); } .hero__search:focus-within::after{ opacity:1; } /* faint refraction sheen — static, not animated */ .hero__search::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg, var(--lav-glass-refract-1) 0%, transparent 32%); } .hero__input{ flex:1 1 auto; min-inline-size:0; border:0; outline:0; background:transparent; font-family:inherit; font-size:1.0625rem; /* >=17px: iOS never auto-zooms */ color:var(--lav-text-primary); line-height:var(--lav-leading-normal); padding-block:var(--lav-space-3); padding-inline-start:var(--lav-space-2); } .hero__input::placeholder{ color:var(--lav-text-tertiary); } /* the ONE opaque white element in the view */ .hero__submit{ flex:none; display:grid; place-items:center; inline-size:48px; block-size:48px; border:0; border-radius:var(--lav-radius-pill); background:var(--lav-cta); color:var(--lav-cta-ink); cursor:pointer; transition:transform var(--lav-dur-fast) var(--lav-ease-spring), background-color var(--lav-dur-fast) var(--lav-ease-standard); } .hero__submit:hover{ transform:scale(1.06); } .hero__submit:active{ transform:scale(0.96); background:var(--lav-cta-press); } .hero__submit svg{ inline-size:20px; block-size:20px; transition:transform var(--lav-dur-fast) var(--lav-ease-standard); } .hero__submit:hover svg{ transform:translateX(2px); } /* — category marquee — dense right->left slider; the TRACK animates (not each chip) per perf rule — */ .hero__cats{ inline-size:100%; width:100vw; margin-inline:calc(50% - 50vw); } .marquee{ display:flex; flex-direction:column; gap:var(--lav-space-4); /* fade chips in/out at the screen edges (mask, not animated) */ -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee__row{ overflow:hidden; } .marquee__track{ display:flex; inline-size:max-content; will-change:transform; transform:translateZ(0); animation:marquee var(--_speed,42s) linear infinite; } .marquee__row--alt .marquee__track{ --_speed:58s; } .marquee__row--slow .marquee__track{ --_speed:74s; } .marquee__group{ display:flex; align-items:center; } /* pause: explicit toggle, pointer hover, or keyboard focus inside the strip */ .marquee[data-paused="true"] .marquee__track, .marquee:hover .marquee__track, .marquee:focus-within .marquee__track{ animation-play-state:paused; } /* two identical halves -> translate one half (-50%) loops seamlessly. R->L = negative translate. */ @keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } } /* Rows one and three run left-to-right, row two right-to-left. Reversing the same keyframes keeps the seam exact in both directions. The durations above are only the no-script fallback: assets/js/home.js sets each row's `--_speed` from its real width so every row keeps its original pixel speed. */ .marquee__row:not(.marquee__row--alt) .marquee__track{ animation-direction:reverse; } .hero__chip{ display:inline-flex; align-items:center; gap:var(--lav-space-2); margin-inline-end:var(--lav-space-4); /* spacing on the item -> exact -50% seam */ text-decoration:none; white-space:nowrap; color:var(--lav-text-secondary); font-weight:500; font-size:var(--lav-type-label); padding-block:var(--lav-space-2); padding-inline:var(--lav-space-5); border-radius:var(--lav-radius-pill); border:1px solid var(--lav-glass-edge); background:var(--surf-2); box-shadow:inset 0 1px 0 var(--surf-inset); transition:transform var(--lav-dur-base) var(--lav-ease-spring), color var(--lav-dur-base) var(--lav-ease-standard), border-color var(--lav-dur-base) var(--lav-ease-standard); } .hero__chip::before{ content:""; inline-size:5px; block-size:5px; border-radius:50%; background:var(--lav-glass-edge-bright); opacity:0.55; transition:opacity var(--lav-dur-base) var(--lav-ease-standard); } .hero__chip:hover,.hero__chip:focus-visible{ color:var(--lav-text-primary); border-color:var(--lav-line-strong); transform:scale(1.05); } .hero__chip:hover::before,.hero__chip:focus-visible::before{ opacity:1; } /* size tiers — the "blended" varied look; five, so no two neighbours match */ .hero__chip.is--xl{ font-size:1.375rem; padding-block:var(--lav-space-3); padding-inline:var(--lav-space-6); } .hero__chip.is--lg{ font-size:var(--lav-type-lg); padding-inline:var(--lav-space-6); } .hero__chip.is--md{ font-size:1rem; } .hero__chip.is--sm{ font-size:var(--lav-type-caption); color:var(--lav-text-tertiary); padding-inline:var(--lav-space-4); } .hero__chip.is--xs{ font-size:0.75rem; color:var(--lav-text-tertiary); padding-inline:var(--lav-space-3); padding-block:6px; } /* — pause/play toggle (satisfies WCAG 2.2.2: a control to stop auto-motion) — */ .marquee__toggle{ align-self:center; margin-block-start:var(--lav-space-1, 0.25rem); display:inline-flex; align-items:center; gap:var(--lav-space-2); block-size:32px; padding-inline:var(--lav-space-4); border-radius:var(--lav-radius-pill); cursor:pointer; color:var(--lav-text-tertiary); font-family:inherit; font-size:var(--lav-type-caption); background:var(--surf-1); border:1px solid var(--lav-glass-edge); transition:color var(--lav-dur-base) var(--lav-ease-standard), border-color var(--lav-dur-base) var(--lav-ease-standard); } .marquee__toggle:hover{ color:var(--lav-text-secondary); border-color:var(--lav-line-strong); } .marquee__toggle svg{ inline-size:13px; block-size:13px; } .marquee__toggle .icon-play,.marquee__toggle .label-play{ display:none; } .marquee[data-paused="true"] .marquee__toggle .icon-pause, .marquee[data-paused="true"] .marquee__toggle .label-pause{ display:none; } .marquee[data-paused="true"] .marquee__toggle .icon-play{ display:inline; } .marquee[data-paused="true"] .marquee__toggle .label-play{ display:inline; } /* — entrance: staggered rise, transform/opacity only — */ @keyframes hero-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } .hero__eyebrow,.hero__title,.hero__sub,.hero__search,.hero__cats{ animation:hero-rise var(--lav-dur-slow) var(--lav-ease-standard) both; } .hero__eyebrow{ animation-delay:.02s; } .hero__title{ animation-delay:.10s; } .hero__sub{ animation-delay:.18s; } .hero__search{ animation-delay:.26s; } .hero__cats{ animation-delay:.36s; } /* — sr-only utility — */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* — "/" keyboard hint badge (pro affordance; hides while typing/focused, and on touch) — */ .hero__kbd{ flex:none; display:grid; place-items:center; pointer-events:none; min-inline-size:24px; block-size:24px; padding-inline:var(--lav-space-2); border-radius:8px; border:1px solid var(--lav-glass-edge); background:var(--surf-2); color:var(--lav-text-tertiary); font-family:var(--lav-font-text); font-size:var(--lav-type-caption); line-height:1; transition:opacity var(--lav-dur-fast) var(--lav-ease-standard); } .hero__search:focus-within .hero__kbd, .hero__input:not(:placeholder-shown) ~ .hero__kbd{ opacity:0; } @media (hover:none) and (pointer:coarse){ .hero__kbd{ display:none; } } /* — focus ring: white, no hue — */ :where(a,button,input):focus-visible{ outline:2px solid var(--lav-focus); outline-offset:3px; border-radius:var(--lav-radius-pill); } /* — app-feel: no grey tap flash on touch — */ a,button{ -webkit-tap-highlight-color:transparent; } /* — line-break control: forced headline breaks ON for tablet + desktop, natural wrap on phones — */ .brk-md{ display:none; } @media (min-width:768px){ .brk-md{ display:inline; } } /* — responsive — */ /* — phones (<768): compact rhythm, app-like spacing, safe areas — */ @media (max-width:767.98px){ :root{ --lav-glass-intensity:0.85; } .hero{ padding-block:var(--lav-fluid-l); padding-block-end:max(var(--lav-fluid-l), env(safe-area-inset-bottom)); } .hero__inner{ gap:var(--lav-fluid-s); } .hero__copy{ gap:var(--lav-space-3); max-width:20ch; } .hero__title{ font-size:clamp(2.1rem, 1.55rem + 4vw, 3rem); } .hero__sub{ font-size:var(--lav-type-lg); max-width:30ch; } .hero__search{ inline-size:100%; } .hero__submit{ inline-size:44px; block-size:44px; } } @media (max-width:380px){ .hero__title{ font-size:2rem; } } /* — tablets (768-1024): SAME forced headline breaks as desktop, roomier than phone — */ @media (min-width:768px) and (max-width:1024px){ .hero__inner{ gap:var(--lav-fluid-m); max-width:760px; } .hero__copy{ max-width:26ch; } .hero__search{ inline-size:min(100%, 640px); } } @media (prefers-reduced-data:reduce){ :root{ --lav-glass-intensity:0.8; } } /* — TOUCH (phones + tablets): swap the auto-marquee for a native, tap-friendly swipe rail — */ @media (hover:none) and (pointer:coarse){ /* one real, swipeable row; drop decorative rows, clone half and the pause toggle */ .marquee{ gap:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .marquee__row--alt,.marquee__row--slow,.marquee__toggle{ display:none; } .marquee__row .marquee__group[aria-hidden="true"]{ display:none; } .marquee__row{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scroll-padding-inline:var(--lav-fluid-s); padding-block:var(--lav-space-2); scrollbar-width:none; overscroll-behavior-x:contain; } .marquee__row::-webkit-scrollbar{ display:none; } .marquee__track{ animation:none; transform:none; inline-size:max-content; padding-inline:var(--lav-fluid-s); } /* uniform, tappable chips (size variance is a desktop flourish) + tactile press */ .hero__chip, .hero__chip.is--xl,.hero__chip.is--lg,.hero__chip.is--md,.hero__chip.is--sm,.hero__chip.is--xs{ font-size:1rem; color:var(--lav-text-secondary); padding-block:var(--lav-space-3); padding-inline:var(--lav-space-5); margin-inline-end:var(--lav-space-3); scroll-snap-align:start; } .hero__chip:active{ transform:scale(0.96); } } /* — reduced motion: kill float + entrance, keep everything legible — */ @media (prefers-reduced-motion:reduce){ .hero__eyebrow,.hero__title,.hero__sub,.hero__search,.hero__cats{ animation:none; } .hero__submit,.hero__chip{ transition:none; } /* freeze + collapse the slider to one tidy, centered, wrapping row of the real links */ .marquee{ -webkit-mask-image:none; mask-image:none; gap:var(--lav-space-3); } .marquee__row--alt,.marquee__row--slow,.marquee__toggle{ display:none; } .marquee__row{ overflow:visible; } .marquee__track{ animation:none; transform:none; inline-size:auto; } .marquee__group[aria-hidden="true"]{ display:none; } .marquee__group{ flex-wrap:wrap; justify-content:center; gap:var(--lav-space-3); } .hero__chip{ margin-inline-end:0; } /* Row one now carries the departments and then ~14 categories; wrapped and frozen, the departments alone are the tidy version. */ .marquee__group > .hero__chip:nth-child(n+11){ display:none; } } /* ============================================================================ HOMEPAGE, BELOW THE HERO — THE STYLE CONTRACT ---------------------------------------------------------------------------- The hero is untouched. Everything under it obeys the eleven rules below, and nothing under it is allowed an exception. The previous version had no such list, and that is the whole reason it looked like several designs stacked on top of each other: a 130px bento row here, a 200px collection card there, a fixed 276px hero tile holding two words. 1 SIZE IS EARNED. No card, tile or panel declares a height, a min-height or a fixed grid row. `grid-auto-rows` is `auto`, always. If a block looks too small, the fix is to give it something to say — never to pad it out. 2 RADIUS. 14px on a card or tile, 22px on a panel, pill on an action. Three values, no fourth. 3 SPACE. 4 · 8 · 12 · 16 · 24 · 32 · 48. Nothing between them. 4 SECTION RHYTHM. 56px top and bottom on desktop, 40px on a phone. One value for every section, so the gaps between blocks are invisible and the eye only reads the blocks. 5 HEADING. Every section head is left-aligned: title, one line of sub, and an optional link on the right. Centred heads were doing the work that the section order should do. 6 MEASURE. Body copy never exceeds 62 characters; a card's own copy never exceeds 42. Long lines are what made the cards look empty at the ends. 7 ICONS. 22px inside a card, 26px inside a panel. A glyph is a label, not an illustration; the old 80px watermark was the reason a tile had to be 276px tall to contain it. 8 DEPTH. Cards carry a 1px border at rest and nothing else — the raised surface comes from the brand layer (bineret-brand.css §6) so there is one recipe, not one per component. Hover: brighter rim, 2px lift. Nothing scales, nothing re-tints. 9 ACTIONS. One height (40px), one shape (pill), and at most one solid button per section. 10 GRID. 5 / 4 / 3 / 2 / 1 columns as the viewport narrows, on a single set of breakpoints: 1160 · 940 · 700 · 560. No component invents its own. 11 COLOUR. Tokens only. `assets/css/home.css` is not in the light-mode generator's source list, so a literal colour written here would have to be hand-written twice and would rot the first time it wasn't. ========================================================================== */ /* — page shell — */ .skip{ position:fixed; left:var(--lav-space-4); top:var(--lav-space-4); z-index:60; padding:var(--lav-space-2) var(--lav-space-4); border-radius:var(--lav-radius-pill); background:var(--lav-cta); color:var(--lav-cta-ink); font-weight:600; text-decoration:none; transform:translateY(-160%); transition:transform var(--lav-dur-base) var(--lav-ease-spring); } .skip:focus-visible{ transform:translateY(0); } /* The measure of the page. This was 1800px. At 1440 that is a content column two hundred pixels wider than the widest line anyone reads comfortably, and it is the second half of the "too much empty space" problem: with the column that wide, a four-up grid makes every cell 420px, and a card with three words in it has to sit inside 420px of box. Capping the column fixes the cards without touching the cards. */ :root{ --home-measure:1240px; } .wrap{ width:100%; max-width:var(--home-measure); margin-inline:auto; padding-inline:var(--lav-fluid-s); } /* Rule 4. Every section, one rhythm. */ .sec{ padding-block:56px; } .sec--tight{ padding-block:24px; } /* — top bar (top-level surface) — */ .topbar{ position:sticky; top:0; z-index:50; background:var(--surf-plate); -webkit-backdrop-filter:saturate(var(--lav-glass-saturate)) blur(var(--lav-blur-surface)); backdrop-filter:saturate(var(--lav-glass-saturate)) blur(var(--lav-blur-surface)); border-block-end:1px solid var(--lav-line); } .topbar__inner{ display:flex; align-items:center; gap:var(--lav-space-4); block-size:60px; } .brand{ font-family:var(--lav-font-display); font-weight:700; letter-spacing:var(--lav-track-wide); font-size:1.05rem; color:var(--lav-text-primary); text-decoration:none; } .topbar__nav{ margin-inline-start:auto; display:flex; align-items:center; gap:var(--lav-space-3); } .topbar__link{ color:var(--lav-text-secondary); text-decoration:none; font-size:var(--lav-type-label); padding:var(--lav-space-2) var(--lav-space-3); border-radius:var(--lav-radius-pill); transition:color var(--lav-dur-base) var(--lav-ease-standard); } .topbar__link:hover{ color:var(--lav-text-primary); } .icon-btn{ display:grid; place-items:center; inline-size:38px; block-size:38px; border-radius:50%; color:var(--lav-text-secondary); border:1px solid var(--lav-glass-edge); background:var(--surf-1); transition:color var(--lav-dur-base) var(--lav-ease-standard), border-color var(--lav-dur-base) var(--lav-ease-standard); } .icon-btn:hover{ color:var(--lav-text-primary); border-color:var(--lav-line-strong); } .icon-btn svg{ inline-size:18px; block-size:18px; } /* — section heading (rule 5) — Title and sub on the left, one optional link on the right, baseline-aligned, and a single 24px gap down to whatever the section contains. */ .head{ display:flex; flex-direction:column; gap:4px; } .head--row{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:var(--lav-space-4); margin-block-end:24px; } .head--row .head__text{ display:flex; flex-direction:column; gap:4px; min-inline-size:0; } .head--center{ align-items:center; text-align:center; margin-block-end:24px; } .head__title{ font-family:var(--lav-font-display); font-weight:600; letter-spacing:var(--lav-track-tight); font-size:clamp(1.35rem,1.15rem + 0.8vw,1.8rem); line-height:1.15; margin:0; } .head__sub{ margin:0; color:var(--lav-text-tertiary); font-size:var(--lav-type-label); max-inline-size:62ch; line-height:1.5; } .head__link{ color:var(--lav-text-secondary); text-decoration:none; font-size:var(--lav-type-label); white-space:nowrap; flex:none; padding-block-end:2px; transition:color var(--lav-dur-base) var(--lav-ease-standard); } .head__link:hover{ color:var(--lav-text-primary); } .head__link span{ display:inline-block; margin-inline-start:5px; transition:transform var(--lav-dur-fast) var(--lav-ease-spring); } .head__link:hover span{ transform:translateX(3px); } /* — rail / carousel — Rails only render when a query returns products, so today they are absent. They keep their own inline padding aligned to `.wrap` so the first card in a rail starts on the same vertical line as the section title above it. */ .rail__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--lav-space-4); margin-block-end:24px; } .rail__nav{ display:flex; align-items:center; gap:var(--lav-space-3); flex:none; } .rail__btn{ display:grid; place-items:center; inline-size:40px; block-size:40px; border-radius:50%; color:var(--lav-text-secondary); cursor:pointer; border:1px solid var(--lav-glass-edge); background:var(--surf-1); transition:transform var(--lav-dur-fast) var(--lav-ease-spring), color var(--lav-dur-base) var(--lav-ease-standard), border-color var(--lav-dur-base) var(--lav-ease-standard); } .rail__btn:hover{ color:var(--lav-text-primary); border-color:var(--lav-line-strong); transform:scale(1.06); } .rail__btn:active{ transform:scale(0.94); } .rail__btn:disabled{ opacity:0.3; cursor:default; transform:none; } .rail__btn svg{ inline-size:18px; block-size:18px; } .rail__viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-mask-image:linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); mask-image:linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); } .rail__viewport::-webkit-scrollbar{ display:none; } .rail__track{ list-style:none; margin:0; padding-block:6px 24px; padding-inline:max(var(--lav-fluid-s), calc((100% - var(--home-measure)) / 2)); display:flex; gap:var(--lav-space-4); inline-size:max-content; } /* — product card (secondary surface: the fill comes from the brand layer) — */ .card{ position:relative; flex:0 0 clamp(248px, 74vw, 272px); scroll-snap-align:start; border-radius:14px; border:1px solid var(--lav-line); background:var(--surf-1); transition:transform var(--lav-dur-base) var(--lav-ease-spring), border-color var(--lav-dur-base) var(--lav-ease-standard); } .card:hover{ transform:translateY(-2px); border-color:var(--lav-line-strong); } .card__media{ position:relative; aspect-ratio:16/10; border-radius:13px 13px 0 0; overflow:hidden; display:grid; place-items:center; } .card__media::after{ content:attr(data-glyph); font-size:2.6rem; color:var(--surf-glyph); font-family:var(--lav-font-display); } .card__rank{ position:absolute; inset-block-start:var(--lav-space-3); inset-inline-start:var(--lav-space-3); z-index:2; padding:3px 10px; border-radius:var(--lav-radius-pill); background:var(--lav-glass-text-plate); border:1px solid var(--lav-glass-edge); color:var(--lav-text-primary); font-size:var(--lav-type-caption); font-weight:600; } .card__save{ position:absolute; inset-block-start:var(--lav-space-3); inset-inline-end:var(--lav-space-3); z-index:3; inline-size:36px; block-size:36px; display:grid; place-items:center; cursor:pointer; border-radius:50%; color:var(--lav-text-primary); background:var(--lav-glass-text-plate); border:1px solid var(--lav-glass-edge); transition:transform var(--lav-dur-fast) var(--lav-ease-spring); } .card__save:hover{ transform:scale(1.1); } .card__save:active{ transform:scale(0.9); } .card__save svg{ inline-size:18px; block-size:18px; fill:none; stroke:currentColor; stroke-width:1.6; } .card__save[aria-pressed="true"] svg{ fill:var(--lav-text-primary); stroke:var(--lav-text-primary); } .card__body{ padding:16px; display:flex; flex-direction:column; gap:6px; } .card__meta{ display:flex; align-items:center; gap:var(--lav-space-2); margin:0; } .card__dept{ font-size:var(--lav-type-caption); color:var(--lav-text-tertiary); text-transform:uppercase; letter-spacing:var(--lav-track-wide); } .card__verif{ margin-inline-start:auto; font-size:var(--lav-type-caption); color:var(--lav-text-secondary); } .card__title{ margin:0; font-size:1.05rem; font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card__title a{ color:var(--lav-text-primary); text-decoration:none; } .card__title a::after{ content:""; position:absolute; inset:0; border-radius:14px; } /* stretched link */ .card__by{ margin:0; font-size:var(--lav-type-caption); color:var(--lav-text-tertiary); } .card__rate{ color:var(--lav-text-secondary); } .card__chips{ display:flex; gap:6px; margin:2px 0 0; flex-wrap:wrap; } .cchip{ font-size:var(--lav-type-caption); color:var(--lav-text-secondary); padding:2px 9px; border-radius:var(--lav-radius-pill); border:1px solid var(--lav-line); } .card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--lav-space-3); margin-block-start:var(--lav-space-3); } .card__price{ font-weight:700; font-size:1.05rem; } .card__free{ font-weight:700; font-size:1.05rem; color:var(--lav-text-secondary); } .card__get{ position:relative; z-index:2; cursor:pointer; font:inherit; font-weight:600; font-size:var(--lav-type-label); block-size:40px; display:inline-flex; align-items:center; padding-inline:var(--lav-space-5); border-radius:var(--lav-radius-pill); color:var(--lav-text-primary); background:transparent; border:1px solid var(--lav-line-strong); transition:transform var(--lav-dur-fast) var(--lav-ease-spring), background var(--lav-dur-base) var(--lav-ease-standard), color var(--lav-dur-base) var(--lav-ease-standard); } .card__get:hover,.card__get:focus-visible{ background:var(--lav-cta); color:var(--lav-cta-ink); border-color:var(--lav-cta); } .card__get:active{ transform:scale(0.95); } /* ============================================================================ THE ONE TILE ---------------------------------------------------------------------------- Departments, collections and the studio's three service groups are the same object: a glyph, a name, a sentence, and one line of metadata under it. They were three different objects before — a 130px bento cell, a 380x200 rail card and nothing at all — and that is what made the page read as three designs. One rule set, three grids. ========================================================================== */ .bento,.ccards,.studio__grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--lav-space-4); grid-auto-rows:auto; } .bento{ grid-template-columns:repeat(5,1fr); } .ccards{ grid-template-columns:repeat(4,1fr); } .studio__grid{ grid-template-columns:repeat(3,1fr); } .bento__link,.ccard,.b-card{ position:relative; block-size:100%; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px; text-decoration:none; border-radius:14px; border:1px solid var(--lav-line); background:var(--surf-1); transition:transform var(--lav-dur-base) var(--lav-ease-spring), border-color var(--lav-dur-base) var(--lav-ease-standard); } .bento__link:hover,.ccard:hover,.b-card:hover{ transform:translateY(-2px); border-color:var(--lav-line-strong); } /* Rule 7: the glyph is a label. It used to be an 80px watermark pinned to the corner, which is what forced the tile to be tall enough to contain it. */ .bento__glyph,.ccard__glyph,.b-card__glyph{ font-family:var(--lav-font-display); font-size:22px; line-height:1; color:var(--surf-glyph-strong); margin-block-end:2px; transition:color var(--lav-dur-base) var(--lav-ease-standard); } .bento__name,.ccard__title,.b-card__title{ margin:0; font-family:var(--lav-font-display); font-weight:600; font-size:1.05rem; line-height:1.25; color:var(--lav-text-primary); } .ccard__title a,.b-card__title a{ color:inherit; text-decoration:none; } .ccard__title a::after,.b-card__title a::after{ content:""; position:absolute; inset:0; border-radius:14px; } .bento__desc,.ccard__desc,.b-card__desc{ margin:0; color:var(--lav-text-tertiary); font-size:0.875rem; line-height:1.5; max-inline-size:42ch; } .bento__count,.ccard__meta,.b-card__price{ margin:auto 0 0; padding-block-start:8px; font-size:var(--lav-type-caption); color:var(--lav-text-secondary); } .b-card__price{ font-weight:700; font-size:0.95rem; color:var(--lav-text-primary); } /* The arrow that used to appear on hover in the corner of an empty tile is gone: with a sentence in the tile there is no empty corner to fill, and a control that only exists on hover is invisible to a touch device anyway. */ /* — trust strip — */ .trust__row{ list-style:none; margin:0; padding-block:0; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--lav-space-3) var(--lav-space-6); } .trust__item{ display:inline-flex; align-items:center; gap:8px; color:var(--lav-text-secondary); font-size:var(--lav-type-label); } .trust__item span{ color:var(--lav-text-primary); } /* — social proof (renders only when there is something true to put in it) — */ .stats{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--lav-space-4); text-align:center; } .stat{ padding:16px; border-radius:14px; border:1px solid var(--lav-line); background:var(--surf-1); display:flex; flex-direction:column; gap:4px; } .stat__n{ font-family:var(--lav-font-display); font-weight:700; font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); } .stat__star{ font-size:0.7em; color:var(--lav-text-secondary); margin-inline-start:2px; } .stat__l{ font-size:var(--lav-type-caption); color:var(--lav-text-tertiary); } .quotes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--lav-space-4); } .quote{ padding:16px; border-radius:14px; border:1px solid var(--lav-line); background:var(--surf-1); } .quote p{ margin:0; color:var(--lav-text-secondary); font-size:var(--lav-type-label); line-height:1.5; } .quote__by{ margin-block-start:var(--lav-space-3) !important; color:var(--lav-text-tertiary) !important; font-size:var(--lav-type-caption) !important; } /* ============================================================================ THE BUY / BUILD FORK ---------------------------------------------------------------------------- Two panels, deliberately identical in weight. The moment one of them is bigger or brighter it stops being a fork and becomes a recommendation, and the whole point is that the visitor already knows which side they are on. ============================================================================ */ .paths{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--lav-space-4); align-items:stretch; } .path{ padding:24px; gap:8px; } .path__kicker{ margin:0; font-size:var(--lav-type-caption); font-weight:600; text-transform:uppercase; letter-spacing:var(--lav-track-wide); color:var(--lav-cta); } .path__title{ margin:2px 0 0; font-family:var(--lav-font-display); font-weight:600; font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem); line-height:1.2; } .path__title a{ color:var(--lav-text-primary); text-decoration:none; } .path__title a::after{ content:""; position:absolute; inset:0; border-radius:14px; } .path__desc{ margin:6px 0 0; color:var(--lav-text-secondary); font-size:0.9rem; line-height:1.55; max-inline-size:48ch; } .path__list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; } .path__list li{ position:relative; padding-inline-start:16px; color:var(--lav-text-tertiary); font-size:0.875rem; line-height:1.5; } .path__list li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:8px; inline-size:6px; block-size:6px; border-radius:50%; background:var(--lav-line-strong); } .path__foot{ margin:auto 0 0; padding-block-start:16px; } .path__go{ font-size:var(--lav-type-label); font-weight:600; color:var(--lav-cta); } /* ============================================================================ STUDIO — the named services inside each discipline card ============================================================================ */ .studio__svcs{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; } .studio__svcs a{ position:relative; z-index:2; display:inline-flex; align-items:center; min-block-size:26px; color:var(--lav-text-secondary); text-decoration:none; font-size:0.85rem; line-height:1.35; transition:color var(--lav-dur-base) var(--lav-ease-standard); } .studio__svcs a:hover{ color:var(--lav-cta); } /* The card title keeps its own link, but the card can no longer be one big stretched target now that it contains four more. */ .studio__card-title a::after{ display:none; } /* ============================================================================ THE DIRECTORY ---------------------------------------------------------------------------- Sixty category links. `columns` rather than `grid`, because the groups are wildly different lengths (three children under Learning, eight under Apps) and a grid would leave a ragged block of holes; a multi-column flow packs them. `break-inside:avoid` keeps a department from being split across a column boundary, which is the one thing that would make it unreadable. ============================================================================ */ .directory{ columns:4; column-gap:var(--lav-space-6); } .dir-col{ break-inside:avoid; margin-block-end:24px; } .dir-col__h{ list-style:none; display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:var(--lav-type-label); font-weight:700; letter-spacing:var(--lav-track-wide); text-transform:uppercase; } /* The department heading is a link like any other, so it takes the same 24px floor. Without it the audit measured it at 21px — a real finding, not a quirk: these ten are the largest targets in the directory and the ones a thumb aims for first. */ .dir-col__h a{ display:inline-flex; align-items:center; min-block-size:26px; color:var(--lav-text-primary); text-decoration:none; } .dir-col__h a:hover{ color:var(--lav-cta); } .dir-col__glyph{ font-family:var(--lav-font-display); font-size:15px; line-height:1; color:var(--lav-cta); } .dir-col__h::-webkit-details-marker{ display:none; } .dir-col__list{ list-style:none; margin:0; padding:0; } .dir-col__list a{ display:block; min-block-size:26px; padding-block:3px; color:var(--lav-text-tertiary); text-decoration:none; font-size:0.84rem; line-height:1.4; transition:color var(--lav-dur-base) var(--lav-ease-standard); } .dir-col__list a:hover{ color:var(--lav-text-primary); } /* ============================================================================ FAQ ---------------------------------------------------------------------------- Native `
`, so it is keyboard-operable and announced correctly with no script and no aria bookkeeping. Two columns on desktop: seven questions in one column is a wall, and the answers are short enough that splitting them does not break the reading order in any way that matters. ============================================================================ */ .faq{ columns:2; column-gap:var(--lav-space-4); } .faq__item{ break-inside:avoid; margin-block-end:var(--lav-space-3); border-radius:14px; border:1px solid var(--glass-line); background-color:var(--glass-fill); background-image:var(--glass-sheen); box-shadow:var(--glass-rim); overflow:clip; } .faq__q{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--lav-space-4); padding:16px; min-block-size:48px; font-family:var(--lav-font-display); font-weight:600; font-size:1rem; line-height:1.35; color:var(--lav-text-primary); } .faq__q::-webkit-details-marker{ display:none; } .faq__q::after{ content:""; inline-size:9px; block-size:9px; flex:0 0 auto; border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor; color:var(--lav-text-tertiary); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--lav-dur-base) var(--lav-ease-standard); } .faq__item[open] .faq__q::after{ transform:rotate(225deg) translate(-2px,-2px); } .faq__a{ margin:0; padding:0 16px 16px; color:var(--lav-text-secondary); font-size:0.9rem; line-height:1.6; } /* ============================================================================ THE TWO PANELS ---------------------------------------------------------------------------- A panel is the only thing on the page allowed a backdrop filter and a cast shadow, and there are exactly two: the studio band and the seller band. They are what stops the lower half of the page from being an unbroken field of equal cards, and they are 22px radius so the difference is legible without a second colour. ========================================================================== */ .studio,.sell{ position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--lav-glass-edge); background:var(--surf-2); -webkit-backdrop-filter:saturate(var(--lav-glass-saturate)) blur(var(--lav-blur-surface)); backdrop-filter:saturate(var(--lav-glass-saturate)) blur(var(--lav-blur-surface)); box-shadow:var(--lav-glass-shadow); padding:32px; } /* — studio band — */ .studio{ display:flex; flex-direction:column; gap:24px; } .studio__head{ display:flex; flex-direction:column; gap:8px; } .studio__kicker,.sell__kicker{ margin:0; font-size:var(--lav-type-caption); text-transform:uppercase; letter-spacing:var(--lav-track-wide); color:var(--lav-text-tertiary); } .studio__title,.sell__title{ margin:0; font-family:var(--lav-font-display); font-weight:600; font-size:clamp(1.5rem,1.25rem + 1.1vw,2.05rem); line-height:1.12; } .studio__sub,.sell__sub{ margin:0; max-inline-size:62ch; color:var(--lav-text-secondary); font-size:var(--lav-type-lg); line-height:1.5; } .studio__card .b-card__glyph{ font-size:26px; } .studio__foot{ display:flex; align-items:center; gap:var(--lav-space-4) var(--lav-space-6); flex-wrap:wrap; } .studio__note{ margin:0; max-inline-size:52ch; color:var(--lav-text-tertiary); font-size:var(--lav-type-caption); line-height:1.5; } /* — seller band — */ .sell{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .sell__sub{ margin-block-start:12px; } .sell__steps{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--lav-space-3) var(--lav-space-6); color:var(--lav-text-secondary); font-size:var(--lav-type-label); } .sell__steps li{ display:flex; align-items:center; gap:8px; } .sell__steps span{ display:grid; place-items:center; inline-size:22px; block-size:22px; border-radius:50%; border:1px solid var(--lav-glass-edge); color:var(--lav-text-primary); font-size:var(--lav-type-caption); } /* — the single solid action (rule 9) — */ .btn-solid{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit; font-size:var(--fs-body); font-weight:600; text-decoration:none; white-space:nowrap; block-size:40px; padding-inline:24px; border-radius:var(--lav-radius-pill); background:var(--lav-cta); color:var(--lav-cta-ink); border:1px solid var(--lav-cta); transition:transform var(--lav-dur-fast) var(--lav-ease-spring), background var(--lav-dur-base) var(--lav-ease-standard); } .btn-solid:hover{ transform:scale(1.03); } .btn-solid:active{ transform:scale(0.97); background:var(--lav-cta-press); } /* — value pillars — */ .pillars{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--lav-space-4); } .pillar{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px; border-radius:14px; border:1px solid var(--lav-line); background:var(--surf-1); } .pillar__i{ font-size:22px; line-height:1; color:var(--lav-text-primary); margin-block-end:2px; } .pillar__t{ margin:0; font-size:1.05rem; font-weight:600; line-height:1.25; } .pillar__d{ margin:0; color:var(--lav-text-tertiary); font-size:0.875rem; line-height:1.5; max-inline-size:42ch; } /* ============================================================================ FOOTER — a panel, not a background ---------------------------------------------------------------------------- The footer used to be a tinted strip carrying five equal columns of links, which is what a footer looks like when nobody has decided what it is for. It is a surface now, in the same glass family as every other panel on the page, and the columns are weighted by what somebody at the bottom of the page is actually looking for: who you are and how to reach a person first, then where to go next, then the sign-up, then the legal line on its own. 🔴 ON PHONES IT COLLAPSES. Expanded, the three link columns run to 1,255px on a 390px screen — a quarter of the whole document spent on a sitemap somebody has already scrolled past everything to reach. Each column is a `
` that ships `open` and is closed by `home.js` below 640px, so: no JavaScript means no collapse rather than no footer, keyboard and screen readers get the disclosure semantics for free, and the desktop layout never runs the script. ============================================================================ */ .footer{ border:0; background:none; margin-block-start:48px; /* `padding-inline` is stated, not omitted. The Code Studio stylesheet in the database sets `.footer{padding:48px}` at wp_head priority 100, and this file is enqueued earlier, so leaving the inline axis unset left 24px of padding OUTSIDE the panel — on a 390px phone that plus the .wrap gutter squeezed the panel to 275px. The reset that actually wins lives in bineret-brand.css (priority 101); this is the readable half of the pair. */ padding-block:0 48px; padding-inline:0; } /* 🔴 `.foot-panel` used to be a glass surface — the same four-token recipe as every card above it (fill, sheen, rim, cast) plus a 22px radius to shape it — sitting on top of `.app`/`.main`, which are forced transparent in chrome.css, which in turn sits on top of `body`'s own page wash. The footer is the last thing on the page and it does not need its own lit pane to read as a surface; it reads as one already, because everything above it (the last content section, the rails, the hero) is doing that job on the way down. A glass panel here was decoration repeating a cue the page had already made, not a panel earning its keep — hence removing it rather than re-tuning it. `padding` stays: it is layout (it keeps the brand block, the columns and the bottom bar off the `.wrap` edge), not decoration, and none of the footer's content depended on the panel for position or spacing. See also `assets/js/liquid.js`, where `.foot-panel` is dropped from the pointer-glass list so the JS-driven rim/specular stops being added back on hover. */ .foot-panel{ padding:40px; } .foot-top{ display:grid; gap:32px; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)) minmax(0,1.3fr); } /* — brand block — */ .foot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .foot-brand__mark{ display:inline-flex; color:var(--lav-text-primary); } .foot-brand__mark svg{ inline-size:150px; block-size:auto; } .foot-brand__tag{ margin:0; max-inline-size:34ch; color:var(--lav-text-secondary); font-size:0.9rem; line-height:1.6; } .foot-mail{ display:inline-flex; align-items:center; gap:8px; min-block-size:24px; color:var(--lav-text-primary); text-decoration:none; font-weight:600; font-size:0.95rem; } .foot-mail svg{ inline-size:17px; block-size:17px; color:var(--lav-cta); flex:0 0 auto; } .foot-mail span{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--lav-line-strong); } .foot-mail:hover span{ text-decoration-color:var(--lav-cta); } .foot-brand__meta{ margin:0; color:var(--lav-text-tertiary); font-size:var(--lav-type-caption,0.78rem); } /* — link columns — */ .foot-col{ min-inline-size:0; } /* A `` is focusable and clickable at every width, not only where it is styled as a control, so the 24px floor applies on desktop too. */ .foot-col > summary{ list-style:none; display:flex; align-items:center; min-block-size:26px; } .foot-col > summary::-webkit-details-marker{ display:none; } .foot-col__h{ margin:0 0 12px; font-size:var(--lav-type-caption,0.78rem); font-weight:700; text-transform:uppercase; letter-spacing:var(--lav-track-wide); color:var(--lav-text-tertiary); } .foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .foot-col a{ display:inline-flex; align-items:center; min-block-size:28px; color:var(--lav-text-secondary); text-decoration:none; font-size:0.9rem; transition:color var(--lav-dur-base,.26s) var(--lav-ease-standard,ease); } .foot-col a:hover{ color:var(--lav-text-primary); } .foot-col__all{ font-weight:600; } .foot-col__all span{ display:inline-block; margin-inline-start:4px; transition:transform var(--lav-dur-fast,.16s) var(--lav-ease-spring,ease); } .foot-col__all:hover span{ transform:translateX(3px); } /* — sign-up — */ /* The sign-up column is ~240px wide, too narrow for an input and a button side by side: the button used to wrap under the input at its own width, flush left, with nothing lining it up. Stacked and full-width instead — one 44px field, one 44px button, 8px apart, 16px under the note. */ .foot-news .foot-col__h{ margin-block-end:8px; } .foot-news__note{ margin:0 0 16px; color:var(--lav-text-tertiary); font-size:0.85rem; line-height:1.55; max-inline-size:36ch; } .news{ display:flex; flex-direction:column; align-items:stretch; gap:8px; max-width:none; } .news__input{ inline-size:100%; min-inline-size:0; font:inherit; font-size:0.9rem; color:var(--lav-text-primary); block-size:44px; padding-inline:16px; border-radius:var(--lav-radius-pill); background:var(--surf-1); border:1px solid var(--glass-line); } .news__input::placeholder{ color:var(--lav-text-tertiary); } .news__input:focus-visible{ outline:2px solid var(--lav-focus); outline-offset:2px; } .news__btn{ inline-size:100%; block-size:44px; padding-inline:20px; } .foot-news .news__ok,.foot-news .news__err{ margin:8px 0 0; font-size:var(--fs-caption,0.8125rem); line-height:1.5; } /* — bottom bar — */ .foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-block-start:32px; padding-block-start:24px; border-block-start:1px solid var(--glass-line); } .foot-bottom__copy{ margin:0; color:var(--lav-text-tertiary); font-size:var(--lav-type-caption,0.78rem); letter-spacing:var(--lav-track-wide); } .foot-bottom__legal{ display:flex; flex-wrap:wrap; gap:8px 20px; } .foot-bottom__legal a{ display:inline-flex; align-items:center; min-block-size:24px; color:var(--lav-text-tertiary); text-decoration:none; font-size:var(--lav-type-caption,0.78rem); } .foot-bottom__legal a:hover{ color:var(--lav-text-primary); } @media (max-width:1100px){ .foot-top{ grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr)); } .foot-news{ grid-column:2 / -1; } } /* --------------------------------------------------------------------------- Phones. One column, and the three link lists become real disclosures. --------------------------------------------------------------------------- */ @media (max-width:640px){ /* Give the panel the width back. Three nested gutters (app 10 + footer 24 + wrap 16) were taking 100px off a 390px screen before the panel's own padding started. */ .footer .wrap{ padding-inline:10px; } .foot-panel{ padding:20px 16px; } /* `grid-column:2 / -1` from the 1100 block has to be undone by name: in a one-column grid it does not collapse, it invents a second column and drags the sign-up out of the panel. */ .foot-top{ grid-template-columns:1fr; gap:4px; } .foot-news{ grid-column:auto; } .foot-brand{ gap:10px; margin-block-end:16px; } .foot-brand__mark svg{ inline-size:128px; } /* Each column is a row you tap. The whole summary is the target, it is at least 48px tall, and the chevron turns when it opens. */ .foot-col{ border-block-start:1px solid var(--glass-line); } .foot-col > summary{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; min-block-size:48px; -webkit-tap-highlight-color:transparent; } .foot-col > summary::after{ content:""; inline-size:9px; block-size:9px; flex:0 0 auto; border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor; color:var(--lav-text-tertiary); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--lav-dur-base,.26s) var(--lav-ease-standard,ease); } .foot-col[open] > summary::after{ transform:rotate(225deg) translate(-2px,-2px); } .foot-col__h{ margin:0; font-size:0.82rem; color:var(--lav-text-primary); } .foot-col ul{ padding-block:0 12px; gap:0; } .foot-col a{ min-block-size:38px; font-size:0.92rem; } /* The sign-up sits under the accordions, above the line, and keeps its own breathing room — it is the only thing down here anybody acts on. */ .foot-news{ margin-block-start:20px; padding-block-start:20px; border-block-start:1px solid var(--glass-line); } .foot-news__note{ max-inline-size:none; } .foot-bottom{ margin-block-start:20px; padding-block-start:16px; flex-direction:column; align-items:flex-start; gap:8px; } } @media (prefers-reduced-motion:reduce){ .foot-col a,.foot-col__all span,.foot-col > summary::after{ transition:none; } } /* — mobile tab bar — moved out — This used to be where `.tabbar` lived, because this bundle only ever loaded on the front page, and the front page was the only place the bar existed. That stopped being true: the bar was pulled out of the footer into a nav that now renders on every template, so a rule that only fires when `inc/home.php` decides to enqueue this file is a rule that goes silently missing everywhere else. The bar's structure and its glass — fixed position, the floating-pill inset, the fill, the blur, the active-tab marker, the icon/label sizing, the body clearance it needs — now live in css/bineret-liquid.css section 11 (with the icon and label type sizes specifically in css/bineret-brand.css §17), because those are the files that load on every page the bar can appear on. This one no longer does. Do not put a `.tabbar` rule back here. It would not error, and it would not even do anything today — it would just sit here matching an element this bundle has no special claim to, waiting for the day somebody changes this file's enqueue priority, or its dependency array, or adds an `!important` three lines away without thinking about a bar it cannot see. On that day this dead rule wakes up, wins the cascade tie by document order alone, and the front page's tab bar quietly reverts to the old flush-to-edge, opaque, 58px-clearance bar while every other template keeps the floating glass pill — and because the two look identical everywhere except the front page, nobody notices until someone asks why the home page's tab bar looks wrong. */ /* ============================================================================ DESIGN POLISH — measured, not guessed ---------------------------------------------------------------------------- Everything below fixes something a measurement pass found on the live page. The numbers in the comments are the ones that were actually on screen. ============================================================================ */ /* ── 1 · ONE TYPE SCALE ────────────────────────────────────────────────── The page was rendering SEVENTEEN distinct font sizes: 13 · 13.4 · 13.6 · 14 · 14.4 · 15 · 15.2 · 16 · 16.8 · 17 · 22 · 23.2 · 24 · 26 · 28.8 · 32.8 · 67.2 Five of those sit inside 1.4px of each other. Nobody can see the difference between 13px and 13.6px — which is the problem: they do not read as a hierarchy, they read as a mistake, and every one of them is another value somebody has to match the next time they add a component. The stray decimals are rem values (0.84rem, 0.85rem, 0.9rem, 0.95rem, 1.05rem, 1.45rem …) chosen one component at a time. Six steps, and every rule on the page is routed through them. */ :root{ --fs-caption:0.8125rem; /* 13 — meta, kickers, counts */ --fs-label:0.875rem; /* 14 — card copy, links, list */ --fs-body:1rem; /* 16 — body, card titles */ --fs-lead:1.125rem; /* 18 — panel lede */ --fs-title:1.375rem; /* 22 — panel titles */ --fs-h2:clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); /* 24 → 30 — section heads */ } .head__title{ font-size:var(--fs-h2); } .head__sub, .bento__desc,.ccard__desc,.b-card__desc,.pillar__d,.path__desc, .faq__a,.foot-brand__tag,.foot-news__note{ font-size:var(--fs-label); } .bento__name,.ccard__title,.b-card__title,.pillar__t,.svc-card__title, .faq__q{ font-size:var(--fs-body); } .bento__count,.ccard__meta,.b-card__price,.path__kicker,.path__go, .dir-col__h,.foot-col__h,.foot-bottom__copy,.foot-bottom__legal a, .trust__item,.head__link,.studio__kicker,.sell__kicker, .foot-brand__meta{ font-size:var(--fs-caption); } .dir-col__list a,.studio__svcs a,.foot-col a,.path__list li, .sell__steps li,.svc-card__desc,.foot-mail{ font-size:var(--fs-label); } .studio__title,.sell__title{ font-size:var(--fs-h2); } .studio__sub,.sell__sub{ font-size:var(--fs-lead); } .path__title{ font-size:var(--fs-title); } .b-card__price{ font-size:var(--fs-label); } .svc-card__price{ font-size:var(--fs-label); } .studio__note{ font-size:var(--fs-caption); } /* ── 2 · THE ICON SET ──────────────────────────────────────────────────── Nineteen Unicode characters from six different Unicode blocks became one drawn set (see inc/icons.php). What is left here is the box they sit in: a fixed square so a 22px icon and a 22px line of text share a baseline, and `flex:0 0 auto` so an icon never squashes when its label wraps. */ .ico{ display:block; flex:0 0 auto; } .bento__glyph,.ccard__glyph,.b-card__glyph,.pillar__i,.svc-card__glyph{ display:flex; align-items:center; justify-content:flex-start; inline-size:22px; block-size:22px; margin:0 0 4px; color:var(--lav-cta); } .dir-col__glyph{ display:flex; inline-size:16px; block-size:16px; color:var(--lav-cta); } .trust__item .ico{ color:var(--lav-cta); } .path__kicker{ display:flex; align-items:center; gap:8px; } .path__kicker .ico{ color:inherit; } .tab__i{ display:flex; align-items:center; justify-content:center; inline-size:20px; block-size:20px; font-size:0; } /* ── 3 · 🔴 THE TRUST STRIP WAS 131px OUT ──────────────────────────────── Every section centres its 1240px column inside the 1502px page: left edge 168. The trust strip sat at 37 — flush left, a third of the way out of alignment with everything above and below it, on the first row under the hero. `.trust__row` is the `.wrap` element itself, and it opens with `margin:0` to kill the browser's default list margin. That `margin:0` also killed `.wrap { margin-inline:auto }`. Resetting one axis is the whole fix, and it is the kind of thing that is invisible in code review and obvious the moment anything is measured. */ .trust__row{ margin-inline:auto; } /* ── 4 · SPACING BACK ON THE GRID ──────────────────────────────────────── The contract is 4 · 8 · 12 · 16 · 24 · 32 · 48. The page had 120 elements at 3px, 68 at 6px and 10 at 14px. None of those are visible on their own; all of them together are why a layout stops feeling deliberate. */ .bento__link,.ccard,.b-card,.pillar,.svc-card{ gap:8px; } .path__list{ gap:8px; } .trust__item{ padding:8px 16px; } .dir-col__list a{ padding-block:4px; } .head__link{ padding-block-end:0; border-radius:6px; } /* ── 5 · CURSOR ────────────────────────────────────────────────────────── `.ccard`, `.b-card`, `.path` and the directory heads are clickable — they carry a stretched link or a summary — but they are `
  • ` and `` elements, so the pointer stayed an arrow. A card that responds to a click and does not say so is a card people do not click. */ .ccard,.b-card,.path,.svc-card,.faq__q,.dir-col__h,.foot-col > summary{ cursor:pointer; } /* ── 6 · OPTICAL DETAIL ────────────────────────────────────────────────── The card title sits tight under its icon and the description needs the gap, not the title. Two values instead of one uniform stack. */ .bento__name,.ccard__title,.b-card__title,.pillar__t,.svc-card__title{ line-height:1.3; } .bento__desc,.ccard__desc,.b-card__desc,.pillar__d{ margin-block-start:-2px; } /* ============================================================================ RESPONSIVE — rule 10. One ladder, every grid on it. ============================================================================ */ /* The five-column grid needs about 1060px of CONTENT. The `.app` shell takes roughly 200px off the viewport (the framed page plus the right icon rail), so a breakpoint at 1160 was promising five columns at a width where four fit. */ @media (max-width:1280px){ .bento{ grid-template-columns:repeat(4,1fr); } } @media (max-width:940px){ .bento{ grid-template-columns:repeat(3,1fr); } .directory{ columns:3; } .studio__sub,.sell__sub{ font-size:var(--lav-type-label); } .ccards{ grid-template-columns:repeat(2,1fr); } .studio__grid{ grid-template-columns:repeat(3,1fr); } .pillars{ grid-template-columns:repeat(2,1fr); } .quotes{ grid-template-columns:1fr; } } @media (max-width:767.98px){ .topbar__link{ display:none; } /* nav lives in the tab bar */ .paths{ grid-template-columns:1fr; } .directory{ columns:2; } .faq{ columns:1; } .sec{ padding-block:40px; } .studio,.sell{ padding:24px; } .stats{ grid-template-columns:repeat(2,1fr); } .studio__grid{ grid-template-columns:1fr; } .sell{ flex-direction:column; align-items:flex-start; } .sell__cta{ align-self:stretch; } /* The head keeps its two halves side by side for as long as the link fits, then stacks rather than letting "See everything" squeeze the title. */ .head--row{ flex-direction:column; align-items:flex-start; gap:8px; } /* native swipe rails: hide arrows, let the thumb do the work */ .rail__nav [data-prev],.rail__nav [data-next]{ display:none; } .rail__track{ scroll-snap-type:x mandatory; } /* app-like bottom tab bar — this used to fix `.tabbar` to the viewport here and give `body` the matching bottom clearance. Both rules, and the `body` padding, now live in css/bineret-liquid.css section 11 — see the long note where `.tabbar` used to be defined above this media query for why it has to stay there instead of coming back to this file. */ } @media (max-width:700px){ .bento{ grid-template-columns:repeat(2,1fr); } } /* Below 560 the tiles turn on their side: the glyph moves beside the name instead of above it, which is the difference between a two-line card and a four-line one on a 375px screen. */ @media (max-width:640px){ /* Collapsed groups: the head is the control, so it gets the height and the chevron, and the 24px gap under it goes away when there is nothing under it to separate. */ .directory{ columns:1; } .dir-col{ margin-block-end:0; border-block-start:1px solid var(--glass-line); } .dir-col__h{ cursor:pointer; min-block-size:48px; margin:0; justify-content:flex-start; -webkit-tap-highlight-color:transparent; } .dir-col__h::after{ content:""; inline-size:9px; block-size:9px; flex:0 0 auto; margin-inline-start:auto; border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor; color:var(--lav-text-tertiary); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--lav-dur-base) var(--lav-ease-standard); } .dir-col[open] .dir-col__h::after{ transform:rotate(225deg) translate(-2px,-2px); } .dir-col__list{ padding-block:0 12px; } .dir-col__list a{ min-block-size:36px; display:flex; align-items:center; } } @media (max-width:560px){ .bento,.ccards,.pillars{ grid-template-columns:1fr; } .path{ padding:16px; } .bento__link,.ccard,.b-card,.pillar{ display:grid; grid-template-columns:26px 1fr; column-gap:12px; row-gap:4px; align-items:start; } .bento__glyph,.ccard__glyph,.b-card__glyph,.pillar__i{ grid-column:1; grid-row:1; margin:0; justify-self:center; padding-block-start:2px; } .bento__name,.ccard__title,.b-card__title,.pillar__t{ grid-column:2; grid-row:1; } .bento__desc,.ccard__desc,.b-card__desc,.pillar__d{ grid-column:2; grid-row:2; max-inline-size:none; } .bento__count,.ccard__meta,.b-card__price{ grid-column:2; grid-row:3; margin:0; padding-block-start:4px; } } @media (max-width:380px){ .stat{ padding:12px; } .card{ flex-basis:clamp(230px, 80vw, 260px); } } /* reduced motion: no smooth scroll, no lift/scale transitions */ @media (prefers-reduced-motion:reduce){ .rail__viewport{ scroll-behavior:auto; } .card,.ccard,.b-card,.bento__link,.rail__btn,.card__save,.card__get,.btn-solid,.icon-btn,.skip{ transition:none; } .faq__q::after,.dir-col__list a,.studio__svcs a,.dir-col__h::after{ transition:none; } .card:hover,.ccard:hover,.b-card:hover,.bento__link:hover{ transform:none; } } /* ============================================================================ HOME HERO — responsive fit inside the framed shell. IMPORTANT: media queries add NO specificity, so a plain `.app .hero__title` override would beat the design's `@media(max-width:767.98px){.hero__title}` mobile rules and break responsiveness. So the desktop-frame tweaks below are themselves scoped to >=769px, and a matching-specificity mobile block keeps the hero fully fluid. `100vw`/`100dvh` are avoided on phones (iOS Safari). ============================================================================ */ .app .hero{ border-radius:var(--lav-radius-2xl); border:1px solid var(--lav-line); overflow:visible; /* CRITICAL: the hero is a grid with place-items:center and an implicit column. The category marquee track is inline-size:max-content (~1300px), so the auto column would size to THAT, blowing the inner past the screen on phones. minmax(0,1fr) forces the column to the container width instead. */ grid-template-columns:minmax(0,1fr); } .app .hero__inner{ min-width:0; max-width:100%; } /* This is the radius arriving at the two square-cornered fill layers — the third one, `.hero__bg::before` (the legibility scrim), no longer needs a matching entry here because it now inherits from `.hero__bg` directly, up in the TIER-0 CANVAS block above. Chasing radius down a chain of `inherit` like that is why this line only has to name the elements that sit ON `.hero`, not every layer painted inside them. */ .app .hero__bg,.app .hero__grain{ border-radius:inherit; } /* never let the marquee full-bleed (width:100vw) push the page wider than the screen */ .app .hero__cats{ inline-size:100%; width:100%; margin-inline:0; } /* the staggered entrance can otherwise leave items stuck in their hidden state */ .app .hero__eyebrow,.app .hero__title,.app .hero__sub,.app .hero__search,.app .hero__cats{ animation:none; opacity:1; transform:none; } /* desktop / tablet: cap the height and tune the display title to the column */ @media (min-width:769px){ .app .hero{ min-height:clamp(440px,60vh,660px); } .app .hero__copy{ max-width:min(94%,720px); } .app .hero__title{ font-size:clamp(2.2rem,1.4rem + 3vw,4.2rem); } } /* phones: fully fluid, fits the viewport, no horizontal overflow */ @media (max-width:768px){ .app .hero{ min-height:auto; padding-block:clamp(1.75rem,8vw,2.75rem); padding-inline:clamp(0.9rem,4vw,1.25rem); } .app .hero__inner{ gap:clamp(1rem,5vw,1.5rem); max-width:100%; } .app .hero__copy{ max-width:100%; gap:0.7rem; } .app .hero__title{ font-size:clamp(1.85rem,8vw,2.55rem); line-height:1.1; } .app .hero__sub{ font-size:1rem; max-width:34ch; } .app .hero__search{ inline-size:100%; } .app .hero__kbd{ display:none; } } @media (max-width:360px){ .app .hero__title{ font-size:1.7rem; } } /* ============================================================================ DESIGN PASS — 2026-09-13 ---------------------------------------------------------------------------- Each block below answers one defect measured on the live page. They sit at the end of the file so they win ties against the rules they correct without reshuffling the contract above. ========================================================================== */ /* 1 · (superseded by §8 — rails now live inside their box) */ /* 2 · Product card: cover image, and a footer pinned to the bottom. A one-line title left price and "Get" 21px higher than on its neighbours. */ .card{ display:flex; flex-direction:column; } .card__body{ flex:1 1 auto; } .card__foot{ margin-block-start:auto; padding-block-start:var(--lav-space-3); } .card__get{ text-decoration:none; } .card__media img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; } .card__media.has-img::after{ content:none; } /* 3 · Journal carousel (template-parts/section-journal.php). */ .card--post .card__excerpt{ margin:0; color:var(--lav-text-tertiary); font-size:var(--fs-label, 0.875rem); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .card--post .card__foot{ justify-content:flex-start; gap:6px; margin:auto 0 0; font-size:var(--fs-caption, 0.8125rem); color:var(--lav-text-tertiary); } /* 4 · Stats: no empty grid cells when fewer than four figures exist. */ .stats{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); } /* 5 · FAQ: heading beside the questions, one column of answers. CSS columns with the first item open put two questions on the left and five on the right, and opening any one reflowed the whole block across columns. */ @media (min-width:941px){ .faq-sec .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); column-gap:48px; align-items:start; } .faq-sec .head--row{ grid-column:1; grid-row:1 / span 2; flex-direction:column; align-items:flex-start; gap:16px; margin:0; position:sticky; top:112px; } .faq-sec .head--row > .head__link{ margin-inline-start:-8px; } .faq-sec .faq__tools{ grid-column:2; grid-row:1; } .faq-sec .faq{ grid-column:2; grid-row:2; columns:1; } } /* 6 · Phones: a stacked head link sits on the title's left edge, not 8px in. */ @media (max-width:767.98px){ .head--row > .head__link{ margin-inline-start:-8px; } } /* 7 · Phones: the sideways tile is for glyph + name + sentence + meta ONLY. The buy/build panels and the studio cards are also `.b-card`, and the 26px + 1fr grid auto-placed their extra children (kicker, list, service links) into the 26px icon column: one word per line, and text printed over text. */ @media (max-width:560px){ .b-card.path,.b-card.studio__card{ display:flex; } } /* ============================================================================ 8 · ONE BOX, EVERY SECTION ---------------------------------------------------------------------------- Below the hero, every section is a panel of the same width as the studio and seller bands — same radius, same surface, same inner padding. Before this the page alternated between open, edge-to-edge sections (the bento, the rails, the catalogue) and boxed ones (studio, sell), so the column the eye was following kept changing width. The box is the section's `.wrap` itself: it is narrowed by exactly the gutter the studio panel sits inside, so `.studio`/`.sell` and every boxed `.wrap` share one outer edge at every viewport. Those two sections keep their own inner panel and are excluded; the trust strip belongs to the hero. `--box-pad` is the one inner padding, and the rails read it to let their scroller run into the padding so cards are not cut at the content edge. ========================================================================== */ .sec{ padding-block:16px; } .sec--tight{ padding-block:24px 16px; } .sec:not(.sec--tight):not(.studio-sec):not(#sell) > .wrap{ --box-pad:32px; inline-size:calc(100% - 2 * var(--lav-fluid-s)); max-inline-size:calc(var(--home-measure) - 2 * var(--lav-fluid-s)); margin-inline:auto; padding:var(--box-pad); border-radius:22px; border:1px solid var(--glass-line); background-color:var(--glass-fill-strong); background-image:var(--glass-sheen); box-shadow:var(--glass-rim), var(--glass-cast); } /* Rails, inside the box. The viewport borrows the box padding on both sides so the fade happens in the padding, not across the first and last card. Cards are sized from the viewport's own width: four, three, two, or one with a peek of the next — the same for products and for articles. */ .rail__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--lav-space-4); margin-block-end:24px; } .rail__viewport{ container-type:inline-size; margin-inline:calc(-1 * var(--box-pad, 32px)); scroll-padding-inline:var(--box-pad, 32px); -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--box-pad, 32px), #000 calc(100% - var(--box-pad, 32px)), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 var(--box-pad, 32px), #000 calc(100% - var(--box-pad, 32px)), transparent 100%); } .rail__track{ --rail-n:4; padding-inline:var(--box-pad, 32px); padding-block:6px 8px; } .rail__track > .card{ flex:0 0 calc((100cqi - 2 * var(--box-pad, 32px) - (var(--rail-n) - 1) * 16px) / var(--rail-n)); } @container (max-width:1000px){ .rail__track{ --rail-n:3; } } @container (max-width:760px) { .rail__track{ --rail-n:2; } } @container (max-width:520px) { .rail__track{ --rail-n:1.15; } } /* The FAQ head sticks under the topbar inside its box. */ @media (min-width:941px){ .faq-sec .head--row{ top:112px; } } @media (max-width:767.98px){ .sec{ padding-block:12px; } .sec--tight{ padding-block:16px 12px; } .sec:not(.sec--tight):not(.studio-sec):not(#sell) > .wrap{ --box-pad:20px; } .studio,.sell{ padding:20px; } } /* ============================================================================ 9 · THE CATALOGUE AS TABS (template-parts/section-directory.php) ---------------------------------------------------------------------------- Departments on the left, the selected department's categories on the right as real targets. Without the script, `.is-tabs` never arrives: the tab list stays hidden and the panels stack — every link still on the page. ========================================================================== */ .cat__filter.lq-filter{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px 16px; } .cat__filter:not(:has(.has-q)) .lq-filter__count{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* Tabs run along the top rather than down the side: a side column of ten is ~480px tall and the shortest department has three categories, so the panel beside it was mostly empty box. Along the top, the box is as tall as the department the reader picked. */ .cat__body{ display:flex; flex-direction:column; gap:24px; } .cat__tabs{ display:flex; flex-wrap:wrap; gap:8px; } .cat__tab{ display:flex; align-items:center; gap:8px; min-block-size:44px; padding:0 8px 0 14px; border-radius:var(--lav-radius-pill, 999px); border:1px solid var(--glass-line); background:none; cursor:pointer; font:inherit; font-size:var(--fs-label, 0.875rem); font-weight:600; text-align:start; color:var(--lav-text-secondary); transition:color var(--lav-dur-base) var(--lav-ease-standard), background-color var(--lav-dur-base) var(--lav-ease-standard), opacity var(--lav-dur-base) var(--lav-ease-standard); } .cat__tab .ico{ flex:none; color:var(--lav-cta); } .cat__tab-name{ white-space:nowrap; } .cat__n{ flex:none; min-inline-size:24px; padding:1px 8px; border-radius:var(--lav-radius-pill, 999px); font-size:var(--fs-caption, 0.8125rem); font-weight:500; text-align:center; color:var(--lav-text-secondary); border:1px solid var(--glass-line); } .cat__tab:hover{ color:var(--lav-text-primary); background-color:var(--glass-fill); } .cat__tab[aria-selected="true"]{ color:var(--lav-text-primary); background-color:var(--glass-fill); background-image:var(--glass-sheen); border-color:var(--glass-line); box-shadow:var(--glass-rim); } .cat__tab[aria-selected="true"] .cat__n{ color:var(--lav-cta-ink); background:var(--lav-cta); border-color:var(--lav-cta); } .cat__tab:not([aria-selected="true"]){ border-color:var(--lav-line); } .cat__tab.is-empty{ opacity:.45; } .cat__tab:focus-visible{ outline:2px solid var(--lav-cta); outline-offset:2px; } .cat__panels{ display:flex; flex-direction:column; gap:32px; min-inline-size:0; } .cat__panel[hidden]{ display:none; } .cat__ph{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-block-end:16px; } .cat__dept{ display:inline-flex; align-items:center; gap:10px; min-block-size:32px; font-family:var(--lav-font-display); font-weight:600; font-size:var(--fs-title, 1.375rem); line-height:1.2; color:var(--lav-text-primary); text-decoration:none; } .cat__dept .ico{ color:var(--lav-cta); } .cat__dept:hover{ color:var(--lav-cta); } .cat__meta{ font-size:var(--fs-caption, 0.8125rem); color:var(--lav-text-tertiary); } .cat__all{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; min-block-size:32px; font-size:var(--fs-label, 0.875rem); font-weight:600; color:var(--lav-cta); text-decoration:none; } .cat__all span{ transition:transform var(--lav-dur-fast) var(--lav-ease-spring); } .cat__all:hover span{ transform:translateX(3px); } .cat__chips{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; } .cat__chip{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-block-size:48px; padding:8px 16px; border-radius:14px; border:1px solid var(--glass-line); background-color:var(--glass-fill); font-size:var(--fs-label, 0.875rem); line-height:1.35; color:var(--lav-text-primary); text-decoration:none; transition:border-color var(--lav-dur-base) var(--lav-ease-standard), transform var(--lav-dur-base) var(--lav-ease-spring); } .cat__chip::after{ content:"\2192"; flex:none; color:var(--lav-text-tertiary); transition:transform var(--lav-dur-fast) var(--lav-ease-spring), color var(--lav-dur-base) var(--lav-ease-standard); } .cat__chip:hover{ border-color:var(--lav-line-strong); transform:translateY(-1px); } .cat__chip:hover::after{ color:var(--lav-cta); transform:translateX(3px); } @media (max-width:767.98px){ .cat__body{ gap:16px; } .cat__tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--box-pad, 20px)); padding-inline:var(--box-pad, 20px); padding-block:2px; } .cat__tabs::-webkit-scrollbar{ display:none; } .cat__tab{ flex:none; } .cat__chips{ grid-template-columns:1fr; } .cat__all{ margin-inline-start:0; } } @media (prefers-reduced-motion:reduce){ .cat__tab,.cat__chip,.cat__chip::after,.cat__all span{ transition:none; } .cat__chip:hover{ transform:none; } }