/* BEHAVIOR LAYER — state only.
Allowed: transform, opacity, visibility, pointer-events, display toggles.
FORBIDDEN: any value taken from the design. Measurements belong in the
geometry layer, which is regenerated wholesale from Figma.
ONE DELIBERATE EXCEPTION, below: a stuck element needs `position` and a
viewport offset. That offset is not a Figma measurement — it does not
exist anywhere in the design, because the design has no scrolled state.
It is behaviour-owned, declared once here as a token, and never read back
into geometry. */
:root{
/* The gap between the nav pill's bottom edge and the bottom of the hero,
read off the design — 38px of 1920 on desktop, 27px of 390 on mobile.
The pill floats that far above the fold, so it floats that far above the
viewport. Not invented: measured. */
--brave-nav-bottom:1.979167vw;
--brave-nav-bottom-mobile:6.923077vw;
--brave-ease:cubic-bezier(.22,.61,.36,1);
}
/* ── pinned furniture: logo top, nav pill bottom ────────────────────────
The class lands on whichever element can actually BE fixed — the overlay
on desktop, the node itself on mobile (see `pin` in behavior.js: a
transformed ancestor would otherwise capture the fixed element and it
would scroll away with the page).
`html:not(.brave-capturing)` — the pixel gate compares against the Figma
frame, which is a flat 6390px-tall artboard with no viewport and no
scrolled state. Leaving these fixed during a full-page capture put the
mobile bar at y5926 against Figma's y825. The capture flag returns them to
their designed places so the gate measures the design; the pinned
behaviour is verified separately, at real viewport sizes, with probe.py. */
html:not(.brave-capturing) .brave-pinned{
position:fixed;
z-index:60}
/* Let pinned chrome layers participate in the page stacking context instead
of being capped by .brave-chrome at 50. The top logo must stay above sticky
search/filter UI (55) and modal-adjacent furniture, while the bottom nav
deliberately remains on the shared pinned layer at 60. */
html:not(.brave-capturing) .brave-chrome{z-index:auto}
html:not(.brave-capturing) .brave-pinned--top{z-index:100}
/* The logo needs NO offset: `top:1.25vw` (desktop) / `1.538462vw` (mobile),
`left:50%` and `translateX(-50%)` are already on it in the geometry layer,
and `fixed` inherits all three unchanged. Nothing to restate here — which
is the point: no design number gets copied into the behaviour layer. */
.brave-overlay--logo > a{display:block}
html:not(.brave-capturing) .brave-pinned--bottom{
top:auto;
bottom:var(--brave-nav-bottom);
/* The footer is intentionally a lower sticky layer. The global nav must
remain in front of it while the footer is revealed beneath site content. */
z-index:100}
@media (max-width:767px){
html:not(.brave-capturing) .brave-pinned--bottom{
bottom:var(--brave-nav-bottom-mobile)}
}
/* ── global mobile navigation + menu ────────────────────────────────────
Measured from Figma nodes 19247:4888 (floating navbar) and 19360:266
(open menu). Both are site chrome and therefore rendered once globally. */
.brave-global-mobile-nav{display:none}
@media (max-width:767px){
.brave-global-mobile-nav{
position:fixed;left:50%;bottom:5.128205vw;z-index:60;
display:flex;direction:ltr;align-items:center;justify-content:space-between;
width:68.717949vw;height:17.435897vw;padding:2.564103vw;
transform:translateX(-50%);
border:.256410vw solid rgba(255,255,255,.15);border-radius:128.205128vw;
background:#140702}
.brave-global-mobile-nav__item,
.brave-global-mobile-nav__menu{
position:relative;display:grid;place-items:center;
width:11.794872vw;height:11.794872vw;flex:0 0 11.794872vw;
margin:0;padding:0;border-radius:50%;cursor:pointer}
.brave-global-mobile-nav__item{
border:.256410vw solid rgba(243,243,243,.1);background:#1c1c1c}
.brave-global-mobile-nav__menu{border:0;background:transparent}
.brave-global-mobile-nav__item--whatsapp{
border-color:rgba(254,249,253,.2);background:#4ecb5c}
.brave-global-mobile-nav img{display:block;max-width:none;object-fit:contain}
.brave-global-mobile-nav__item img{width:7.435897vw;height:7.179487vw}
.brave-global-mobile-nav__item--whatsapp img{
width:7.522436vw;height:7.532154vw}
.brave-global-mobile-nav__menu img{width:100%;height:100%}
}
.brave-mobile-menu{
position:fixed;inset:0;z-index:2000;display:none;overflow:hidden;
background:transparent;visibility:hidden;pointer-events:none;
transform:translateX(100%);
transition:transform .38s var(--brave-ease),visibility 0s linear .38s}
.brave-mobile-menu.is-open{
visibility:visible;pointer-events:auto;transform:translateX(0);
transition:transform .38s var(--brave-ease),visibility 0s linear 0s}
@media (max-width:767px){
.brave-mobile-menu{display:block}
.brave-mobile-menu__surface{
position:absolute;left:4.871795vw;top:5.641026vw;z-index:0;
width:95.128205vw;height:auto;bottom:0;background:#140702;
-webkit-mask-image:url("../../svg/mobile-menu-mask-19367-474-vertical.svg");
mask-image:url("../../svg/mobile-menu-mask-19367-474-vertical.svg");
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:160.327692vw 898.831538vw;
mask-size:160.327692vw 898.831538vw;
-webkit-mask-position:2.307692vw -354.448974vw;
mask-position:2.307692vw -354.448974vw}
.brave-mobile-menu__seal{
position:absolute;left:-21.794872vw;top:138.717949vw;z-index:1;
width:93.902564vw;height:94.647949vw;
-webkit-mask-image:url("../../svg/mobile-menu-mask-19367-474-vertical.svg");
mask-image:url("../../svg/mobile-menu-mask-19367-474-vertical.svg");
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:160.327692vw 898.831538vw;
mask-size:160.327692vw 898.831538vw;
-webkit-mask-position:28.974359vw -487.525897vw;
mask-position:28.974359vw -487.525897vw}
.brave-mobile-menu__seal img{
display:block;width:100%;height:100%;transform-origin:50% 50%}
.brave-mobile-menu.is-open .brave-mobile-menu__seal img{
animation:brave-seal-spin 12s linear infinite}
.brave-mobile-menu__close{
position:absolute;left:12.307692vw;top:26.923077vw;z-index:3;
display:grid;place-items:center;width:12.307692vw;height:12.307692vw;
margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.brave-mobile-menu__close img{
display:block;width:6.153846vw;height:6.153846vw;max-width:none}
.brave-mobile-menu__links{
position:absolute;left:18.461538vw;top:50.256410vw;z-index:2;
display:flex;flex-direction:column;align-items:flex-end;direction:ltr;
width:50.256410vw;gap:1.794872vw}
.brave-mobile-menu__links a{
display:flex;align-items:center;justify-content:flex-end;direction:ltr;
width:100%;height:11.794872vw;margin:0;padding:0;border:0;
font-family:'Polin',sans-serif;font-size:5.128205vw;
font-weight:500;line-height:1;color:#fff;text-align:right;
transform:translateX(1em);opacity:0;
transition:transform .36s var(--brave-ease),opacity .36s var(--brave-ease)}
.brave-mobile-menu__label{
display:block;direction:rtl;text-align:right;white-space:nowrap}
.brave-mobile-menu__links a:nth-of-type(1) .brave-mobile-menu__label{width:8.717949vw}
.brave-mobile-menu__links a:nth-of-type(2) .brave-mobile-menu__label{width:14.871795vw}
.brave-mobile-menu__links a:nth-of-type(3) .brave-mobile-menu__label{width:14.358974vw}
.brave-mobile-menu__links a:nth-of-type(4) .brave-mobile-menu__label{width:27.948718vw}
.brave-mobile-menu__links a:nth-of-type(5) .brave-mobile-menu__label{width:38.974359vw}
.brave-mobile-menu__links a:nth-of-type(6) .brave-mobile-menu__label{width:19.487179vw}
.brave-mobile-menu.is-open .brave-mobile-menu__links a{
transform:translateX(0);opacity:1}
.brave-mobile-menu.is-open .brave-mobile-menu__links a:nth-of-type(2){transition-delay:.04s}
.brave-mobile-menu.is-open .brave-mobile-menu__links a:nth-of-type(3){transition-delay:.08s}
.brave-mobile-menu.is-open .brave-mobile-menu__links a:nth-of-type(4){transition-delay:.12s}
.brave-mobile-menu.is-open .brave-mobile-menu__links a:nth-of-type(5){transition-delay:.16s}
.brave-mobile-menu.is-open .brave-mobile-menu__links a:nth-of-type(6){transition-delay:.20s}
.brave-mobile-menu__divider{
position:relative;width:48.717949vw;height:0;flex:none}
.brave-mobile-menu__divider img{
position:absolute;left:50%;top:0;width:.256410vw;height:48.717949vw;
max-width:none;transform:translate(-50%,-50%) rotate(90deg);
transform-origin:center}
.brave-mobile-menu__product{
position:absolute;left:75.897436vw;top:33.846154vw;z-index:1;
display:flex;align-items:center;justify-content:center;
width:20.769231vw;height:117.179487vw;overflow:visible}
.brave-mobile-menu__product-inner{
position:relative;width:117.179487vw;height:20.769231vw;flex:none;
transform:rotate(90deg)}
.brave-mobile-menu__product-crop{position:absolute;inset:0;overflow:hidden}
.brave-mobile-menu__product-crop img{
position:absolute;left:-6.31%;top:-78.6%;
width:199.46%;height:754.27%;max-width:none;mix-blend-mode:normal}
}
body.brave-menu-open{overflow:hidden}
/* the hamburger is a control, so it must look and behave like one */
[data-behavior~="menu-toggle"]{cursor:pointer}
[data-behavior~="menu-toggle"]:focus-visible{
outline:2px solid var(--brave-accent);outline-offset:.4em}
/* ── filter popup ──────────────────────────────────────────────────────
Mobile catalogue filter (19247:5245). Geometry positions the card
itself (assets/css/geometry/filter-popup.css); this is only the
backdrop + show/hide state, same shape as .brave-mobile-menu above. */
.brave-filter-popup{
position:fixed;inset:0;z-index:85;
display:flex;align-items:center;justify-content:center;
background:rgba(20,7,2,.72);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .28s var(--brave-ease),visibility 0s linear .28s}
.brave-filter-popup.is-open{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity .28s var(--brave-ease),visibility 0s linear 0s}
.brave-filter-popup__close{
position:absolute;top:6vw;inset-inline-end:6vw;z-index:1;
background:none;border:0;cursor:pointer;padding:2vw;
font-family:'Polin',sans-serif;font-size:5vw;color:var(--brave-light)}
body.brave-filter-open{overflow:hidden}
[data-behavior~="filter-toggle"]{cursor:pointer}
[data-behavior~="filter-toggle"]:focus-visible{
outline:2px solid var(--brave-accent);outline-offset:.4em}
/* ── mobile footer accordions ───────────────────────────────────────────
Every content group in the global mobile footer uses the same disclosure
pattern. The panels contain the live navigation, taxonomy, legal and
contact links used elsewhere on the site. */
.brave-footer__mobile [data-behavior~="accordion"]{cursor:pointer}
.brave-footer__mobile [data-behavior~="accordion"]:focus-visible{
outline:2px solid var(--brave-accent);outline-offset:.4em}
.brave-accordion__panel{
width:100%;height:0;overflow:hidden;
transition:height .3s var(--brave-ease)}
.brave-accordion__panel ul{
display:flex;flex-direction:column;align-items:flex-end;gap:2.051282vw;
width:100%;margin:0;padding:3.076923vw 5.128205vw 4.102564vw;
list-style:none}
.brave-accordion__panel a{
display:block;width:100%;font-family:'Polin',sans-serif;
font-size:4.102564vw;line-height:1.35;color:#fff;text-align:right}
.brave-footer__mobile [data-behavior~="accordion"] [data-name="angle-left"]{
transition:transform .3s var(--brave-ease)}
.brave-footer__mobile [data-behavior~="accordion"].is-open [data-name="angle-left"]{
transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
.brave-mobile-menu,.brave-mobile-menu a,.brave-accordion__panel,
.brave-filter-popup,
.brave-home [data-behavior~="sticky-nav"]{transition:none}
.brave-mobile-menu__seal img{animation:none;transform:none}
}
/* ── accordion-faq ─────────────────────────────────────────────────────
Figma supplies one open state. These state-only rules reuse it for every
question without changing the generated placement layer. */
.brave-faq [data-faq-list]{z-index:10;pointer-events:auto}
.brave-faq [data-name="GRID"],
.brave-faq [data-node-id="19247:4006"],
.brave-faq [data-node-id="19247:4012"],
.brave-faq [data-node-id="19247:4013"],
.brave-faq [data-node-id="19247:4014"],
.brave-faq [data-node-id="19247:4015"],
.brave-faq [data-node-id="19247:5413"],
.brave-faq [data-node-id="19247:5420"],
.brave-faq [data-node-id="19247:5421"]{pointer-events:none}
.brave-faq [data-behavior~="accordion-faq"]{box-sizing:border-box;cursor:pointer}
.brave-faq [data-behavior~="accordion-faq"]:focus-visible{
outline:2px solid var(--brave-accent);outline-offset:.4em}
.brave-faq [data-behavior~="accordion-faq"].is-collapsed .brave-faq__answer{display:none}
.brave-faq .brave-faq__chevron{transition:transform .3s var(--brave-ease)}
.brave-faq [data-node-id="19247:4018"].is-collapsed .brave-faq__chevron,
.brave-faq [data-node-id="19247:5429"].is-collapsed .brave-faq__chevron{
transform:rotate(-90deg)}
.brave-faq [data-behavior~="accordion-faq"]:not([data-faq-open]).is-open .brave-faq__chevron{
transform:rotate(90deg)}
@media(min-width:768px){
.brave-faq [data-behavior~="accordion-faq"].is-collapsed{
height:2.291667vw!important;padding:0 1.666667vw 0 0!important;
align-items:flex-end!important;justify-content:flex-start!important;
gap:0!important;background:transparent!important;border-color:transparent!important;
border-radius:0!important}
.brave-faq [data-behavior~="accordion-faq"].is-collapsed .brave-faq__question{
width:100%!important;min-width:100%;margin:0!important;color:#fff!important;
font-weight:400!important}
.brave-faq [data-behavior~="accordion-faq"].is-open{
min-height:7.552083vw;height:auto!important;padding:1.041667vw!important;
align-items:center!important;justify-content:center!important;gap:.520833vw!important;
background:#381b11!important;border:.052083vw solid rgba(243,243,243,.1)!important;
border-radius:1.041667vw!important}
.brave-faq [data-behavior~="accordion-faq"].is-open .brave-faq__question{
width:32.05vw!important;min-width:0;margin-inline:-.009375vw!important;
color:#fb4b19!important;font-weight:700!important;letter-spacing:.01875vw}
.brave-faq .brave-faq__answer{
width:32.05vw;margin:0;font-size:.9375vw;line-height:1.3;
letter-spacing:.01875vw;text-align:right}
}
@media(max-width:767px){
.brave-faq [data-behavior~="accordion-faq"]{
display:flex!important;flex-direction:column!important;align-items:stretch!important}
.brave-faq [data-behavior~="accordion-faq"].is-collapsed{
height:13.076923vw!important;padding:0 5.128205vw!important;
justify-content:center!important;gap:0!important;background:transparent!important;
border-color:transparent!important;border-radius:0!important}
.brave-faq [data-behavior~="accordion-faq"].is-open{
min-height:50.25641vw;height:auto!important;padding:5.128205vw!important;
justify-content:center!important;gap:2.564103vw!important;background:#381b11!important;
border:.25641vw solid rgba(243,243,243,.1)!important;border-radius:5.128205vw!important}
.brave-faq .brave-faq__mobile-question{
display:flex;align-items:center;justify-content:space-between;width:100%}
.brave-faq .brave-faq__question{
width:64.102564vw!important;margin:0!important;font-size:4.615385vw;
line-height:1.3;text-align:right}
.brave-faq .is-collapsed .brave-faq__question{color:#fff!important;font-weight:400!important}
.brave-faq .is-open .brave-faq__question{
width:56.246154vw!important;color:#fb4b19!important;font-weight:700!important;
letter-spacing:.092308vw}
.brave-faq .brave-faq__answer{
width:100%;margin:0;color:#fff;font-size:4.102564vw;line-height:1.35;
letter-spacing:.082051vw;text-align:right}
/* The exported FAQ nav is decorative markup for now. Its Figma box rests
across question 5, so it must never intercept accordion taps. */
.brave-faq [data-node-id="19247:5515"]{pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
.brave-faq .brave-faq__chevron{transition:none}
}
/* ── catalogue card link ────────────────────────────────────────────────
The whole card is a target, not just its label. Absolutely positioned so
it contributes no box and cannot move a pixel of the design; the card
wrapper is already `relative` in the geometry layer. */
.brave-overlay--grid,
.brave-home [data-node-id="19247:4790"]{pointer-events:none}
/* The following catalog-section ellipses are decorative siblings rendered
after the CTA. Without this rule their oversized SVG boxes sit above the
CTA at mobile widths and swallow its taps. Keep the parent interactive:
it also owns the linked category cards below. */
.brave-home [data-node-id="19247:4752"],
.brave-home [data-node-id="19247:4753"]{pointer-events:none}
/* The desktop Hero is an oversized absolute layer. The sticky footer can
visually overlap its decorative seal, so the layer must not consume footer
taps. Restore pointer events only to the real catalog CTA inside it. */
.brave-home [data-node-id="19247:3024"]{pointer-events:none}
.brave-home [data-node-id="19247:3038"]{pointer-events:auto}
/* The next two sections also use oversized decorative art. Their visible
geometry may overlap the footer while they are released from the scroll
sequence, but none of these layers has an interaction of its own. */
.brave-home [data-node-id="19247:3050"],
.brave-home [data-node-id="19248:6293"],
.brave-home [data-node-id="19247:3057"],
.brave-home [data-node-id="19247:3058"],
.brave-home [data-node-id="19247:3059"],
.brave-home [data-node-id="19247:3061"],
.brave-home [data-node-id="19247:3062"],
.brave-home [data-node-id="19247:3072"],
.brave-home [data-node-id="19247:3073"],
.brave-home [data-node-id="19247:3074"]{pointer-events:none}
/* These oversized article CTA-section ellipses are decorative siblings
rendered after the CTA. Let clicks reach the CTA underneath them. */
.brave-article [data-node-id="19247:4205"],
.brave-article [data-node-id="19247:4206"]{pointer-events:none}
.brave-card-link{position:absolute;inset:0;z-index:2;
border-radius:inherit;display:block}
.brave-card-link:focus-visible{outline:2px solid var(--brave-accent);
outline-offset:.25em}
.brave-overlay--navbar a{
color:inherit;text-decoration:none;cursor:pointer}
.brave-overlay--navbar a:focus-visible{
outline:2px solid var(--brave-accent);outline-offset:2px}
/* Live taxonomy options keep the generated filter-row geometry while making
the full text lane a real category link. */
.brave-filter-option{
display:block;width:100%;color:inherit;text-decoration:none;white-space:nowrap}
.brave-filter-option:focus-visible{
outline:2px solid var(--brave-accent);outline-offset:2px;border-radius:3px}
/* Live catalogue options. Values are read from the imported product table;
the row measurements reuse the desktop filter rows from nodes 3548/3581. */
.brave-runtime-filter-list{
display:flex;flex-direction:column;align-items:flex-end;gap:0.208333vw;width:15.729167vw}
.brave-runtime-filter-option{
display:flex;align-items:center;justify-content:flex-end;gap:0.833333vw;
box-sizing:border-box;width:15.520833vw;height:1.5625vw;padding-block:0.520833vw;
color:#fff;text-decoration:none;white-space:nowrap}
.brave-runtime-filter-label{
overflow:hidden;width:13.4375vw;font-family:'Polin',sans-serif;font-weight:400;
font-size:0.9375vw;line-height:1.3;letter-spacing:0.028125vw;text-align:right;text-overflow:ellipsis}
.brave-runtime-filter-check{
box-sizing:border-box;flex:none;width:1.25vw;height:1.25vw;border:0.052083vw solid #fff;
border-radius:0.3125vw}
.brave-runtime-filter-option.is-selected .brave-runtime-filter-check{
background:#fb4b19;box-shadow:inset 0 0 0 0.208333vw #140702}
.brave-runtime-filter-option:focus-visible,
.brave-runtime-filter-more:focus-visible{outline:2px solid #fb4b19;outline-offset:2px}
.brave-runtime-filter-list .is-extra{display:none}
.brave-runtime-filter-list.is-expanded .is-extra{display:flex}
.brave-runtime-filter-more{
border:0;background:none;padding:0;color:#fb4b19;font-family:'Polin',sans-serif;
font-size:0.9375vw;line-height:1.3;cursor:pointer}
.brave-runtime-filter-detail{
display:none;max-height:min(22rem,55vh);margin-top:0.520833vw;overflow-x:hidden;overflow-y:auto;
overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#fb4b19 rgba(255,255,255,.12)}
.is-filter-open > .brave-runtime-filter-detail{display:flex}
/* Category toggle stays outside the bounded list so it cannot scroll away. */
[data-catalog-filter-group="category"] > .brave-runtime-filter-detail{
max-height:none;overflow:visible}
.brave-runtime-category-options{
display:flex;flex-direction:column;align-items:flex-end;gap:0.208333vw;
box-sizing:border-box;width:100%;max-height:min(14.166667vw,40vh);
direction:rtl;padding-inline-end:0.416667vw;overflow-x:hidden;overflow-y:auto;
overscroll-behavior:contain;scrollbar-width:thin;
scrollbar-color:transparent transparent}
.brave-runtime-category-options.is-scroll-active{
scrollbar-color:rgba(255,255,255,.32) transparent}
.brave-runtime-category-options::-webkit-scrollbar{width:3px}
.brave-runtime-category-options::-webkit-scrollbar-track{background:transparent}
.brave-runtime-category-options::-webkit-scrollbar-thumb{
background:transparent;border-radius:999px}
.brave-runtime-category-options.is-scroll-active::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.32)}
.brave-runtime-category-options > .brave-runtime-filter-option{flex:none;width:100%}
.brave-runtime-category-options .brave-runtime-filter-label{flex:1;min-width:0;width:auto}
.brave-product-filter-panel{
position:sticky!important;top:calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem)!important;
align-self:flex-start;justify-content:flex-start!important;max-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 3rem)}
.brave-filter-reset{
align-self:flex-end;margin:-.75vw 0 0;padding:.25rem .65rem;border:1px solid rgba(255,255,255,.55);
border-radius:999px;background:transparent;color:#fff;font-family:'Polin',sans-serif;font-size:.75rem;
line-height:1.2;cursor:pointer;transition:border-color .2s var(--brave-ease),color .2s var(--brave-ease),opacity .2s var(--brave-ease)}
.brave-filter-reset:hover,.brave-filter-reset:focus-visible{border-color:#fb4b19;color:#fb4b19}
.brave-filter-reset:focus-visible{outline:2px solid #fb4b19;outline-offset:2px}
.brave-filter-reset:disabled{opacity:.4;cursor:default}
.brave-catalog [data-catalog-filter-group] > div:first-child{cursor:pointer}
.brave-catalog [data-catalog-filter-group] > div:first-child > p{
color:#fff;transition:color .2s var(--brave-ease)}
.brave-catalog [data-catalog-filter-group].is-filter-open > div:first-child > p{color:#fb4b19}
.brave-catalog [data-catalog-filter-group] > div:first-child > div:first-child{
transform:rotate(0deg);transition:transform .2s var(--brave-ease)}
.brave-catalog [data-catalog-filter-group].is-filter-open > div:first-child > div:first-child{
transform:rotate(180deg)}
.brave-catalog [data-catalog-filter-group] > div:first-child img{
filter:brightness(0) invert(1);transition:filter .2s var(--brave-ease)}
.brave-catalog [data-catalog-filter-group].is-filter-open > div:first-child img{
filter:brightness(0) saturate(100%) invert(37%) sepia(96%) saturate(3293%) hue-rotate(353deg) brightness(102%) contrast(97%)}
.brave-catalog [data-catalog-filter-group] [style*="transform:rotate(180deg)"]{
transform:none!important}
.brave-catalog.is-filtering [data-node-id="19247:3408"] > a,
.brave-catalog.is-filtering [data-node-id="19247:5137"] > a{
opacity:.55;transition:opacity .18s var(--brave-ease)}
/* Native lead controls occupy the Figma-drawn field boxes. Their containing
nodes keep every measurement; this layer only supplies interaction state
and native-control appearance. */
.brave-live-form{display:contents}
.brave-lead-form{z-index:2}
.brave-live-control{
z-index:2;box-sizing:border-box;margin:0;padding:0;border:0;outline:0;
color:transparent;caret-color:var(--brave-accent);
background:transparent;appearance:none}
.brave-live-control::placeholder{color:transparent;opacity:1}
.brave-live-field:focus-within>p,
.brave-live-field.is-filled>p{visibility:hidden}
.brave-live-field:focus-within .brave-live-control,
.brave-live-field.is-filled .brave-live-control{color:inherit}
.brave-live-field:focus-within .brave-live-control::placeholder{color:inherit}
.brave-live-control option{color:#140702;background:#fff}
.brave-live-control--select{cursor:pointer}
.brave-live-select-icon{pointer-events:none}
.brave-live-field--select>.brave-live-select-icon{
position:absolute;
top:50%;
left:0.520833vw;
z-index:3;
transform:translateY(-50%)}
.brave-live-consent-box{cursor:pointer}
.brave-live-consent{
z-index:2;margin:0;cursor:pointer;appearance:none;border-radius:inherit;
background:transparent}
/* A later mobile contact glow extends over the form visually; it is purely
decorative and must never intercept the shared form controls. */
.brave-contact__mobile [data-node-id="19247:5641"]{pointer-events:none}
.brave-live-consent:checked{background:var(--brave-accent)}
.brave-live-consent:focus-visible{
outline:2px solid var(--brave-accent);outline-offset:2px}
.brave-live-submit{cursor:pointer}
.brave-live-submit-hit{
z-index:3;margin:0;padding:0;cursor:pointer;border:0;
background:transparent;opacity:0}
.brave-live-submit:focus-within{
outline:2px solid var(--brave-accent);outline-offset:2px}
.brave-live-form-status{
position:absolute;z-index:4;bottom:calc(100% + .5rem);left:50%;
width:max-content;max-width:min(90vw,20rem);margin:0;
color:#fff;font:400 1rem/1.3 'Polin',Arial,sans-serif;text-align:center;
transform:translateX(-50%);pointer-events:none}
.brave-live-form a{color:inherit}
/* ── homepage logo slide ────────────────────────────────────────────────
Amiel: on the long homepage the logo starts at 24 and slides to 0 as you
scroll; on every other page it simply sits at 0. So 24 is not a per-page
geometry value — it is the start of an animation that belongs to one page,
which is why the geometry layer carries the RESTING value (0) and this
carries the offset. */
:root{
--brave-logo-top:0px;
--brave-logo-start:1.25vw; /* 24px of 1920 — the homepage's starting inset */
--brave-logo-travel:300px; /* scroll distance over which it closes */
}
/* NOT suppressed during capture, unlike the pinning. The capture is taken at
scroll 0, and at scroll 0 this animation's value IS the designed value —
Figma's homepage frame draws the logo at 24. Suppressing it dropped the logo
to its resting 0 and cost the hero 1.06% -> 1.41%. Every other page has no
`home` class, so it keeps the resting 0 the geometry layer gives it. */
body.home .brave-pinned--top{top:var(--brave-logo-top)}
/* ── nav active state ───────────────────────────────────────────────────
Figma bakes "בית" as the active pill on EVERY frame, which is wrong on any
page but the homepage. Active is a state, not geometry, so it moves here and
overrides the generated rule for the two pills involved. Colours are the
design's own tokens, not new values. */
.brave-chrome a:has(> p[data-nav-state="on"]){
background-color:var(--brave-accent)!important;border-width:0!important}
.brave-chrome p[data-nav-state="on"]{color:var(--brave-white)!important}
.brave-chrome a:has(> p[data-nav-state="off"]){
background-color:var(--brave-nav-item)!important;
border:0.052083vw solid rgba(243,243,243,0.1)!important}
.brave-chrome p[data-nav-state="off"]{color:var(--brave-white)!important}
.brave-overlay--navbar a:hover{
outline:0.104167vw solid var(--brave-accent);outline-offset:-0.104167vw}
.brave-chrome a:focus-visible{outline:2px solid var(--brave-accent);
outline-offset:.3em}
/* ── placeholder pages ──────────────────────────────────────────────────
Routes that exist but are not designed yet. Tokens only, no Figma values —
this whole block goes away as each page's real frame is built. */
.brave-placeholder{min-height:100vh;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:1.5rem;padding:8rem 2rem}
.brave-placeholder h1{font-family:'Polin',sans-serif;font-weight:700;
font-size:clamp(2rem,5vw,4.5rem);color:var(--brave-light);text-align:center}
.brave-placeholder__note{font-family:'Polin',sans-serif;color:var(--brave-grey);
opacity:.6}
.brave-placeholder__content{max-width:60ch;color:var(--brave-light)}
/* ---------------------------------------------------------------------------
search-empty — the catalogue's "no product matched your search" block.
It is a search RESULT, not page furniture (Amiel, 2026-08-13): it appears
only when a search returned nothing. Figma draws it on the resting frame,
the same way it bakes the "home" nav pill as active on every frame. Both are
STATES, so the geometry layer keeps the designed value and this layer
decides -- geometry is never edited to express a runtime state.
This rule only ever ADDS display:none. When the block should be visible no
rule applies at all, so its generated display (flex column) is untouched.
The .brave-capturing exemption is deliberate and matches the pinned
furniture: the gate compares against Figma's render, which DOES draw this
block, so suppressing it during capture would report a defect that the
design does not contain.
--------------------------------------------------------------------------- */
html:not(.brave-capturing) .brave-catalog:not([data-search-state="empty"]) [data-behavior~="search-empty"]{
display:none;
}
/* When a filter/search has no matches, the Figma empty-state artwork replaces
the product grid rather than remaining at the bottom of the full catalogue
frame. Keep its generated geometry intact and move both sibling layers by
the same measured delta so their internal alignment is preserved. The
shortened result area also lets the following enquiry section move up
instead of leaving several screens of empty space. */
html:not(.brave-capturing) .brave-catalog[data-search-state="empty"] .brave-section--cat-hero{
height:72vw;
}
html:not(.brave-capturing) .brave-catalog[data-search-state="empty"] [data-node-id="19247:3540"]{
position:relative;
z-index:10;
}
html:not(.brave-capturing) .brave-catalog[data-search-state="empty"] [data-node-id="19247:3613"]{
transform:translateY(-70.939375vw);
}
html:not(.brave-capturing) .brave-catalog[data-search-state="empty"] [data-node-id="19247:3620"]{
transform:translateY(-20.634375vw);
}
@media (max-width:767px){
html:not(.brave-capturing) .brave-catalog[data-search-state="empty"] [data-node-id="19247:5118"]{
height:210vw;
}
html:not(.brave-capturing) .brave-catalog[data-search-state="empty"] [data-node-id="19247:5164"]{
transform:translateY(-65.158718vw);
}
html:not(.brave-capturing) .brave-catalog[data-search-state="empty"] [data-node-id="19247:5167"]{
transform:translateY(-498.205128vw);
}
}
/* ---------------------------------------------------------------------------
catalog search — made functional (Amiel, 2026-08-16). Figma drew this pill
as a static placeholder; it is now a real