/* litespeed-cache-dummy */
/* To be replaced in `head` to control optm data location */
/* hello-elementor */
html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-end:.9rem;margin-block-start:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;color:#c36;text-decoration:none}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;border:1px solid #ccc;break-inside:avoid}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;width:auto}[type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}[type=button]:focus:not(:focus-visible),[type=submit]:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%}table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)}@media(max-width:767px){table table{font-size:.8em}table table td,table table th{line-height:1.3;padding:7px}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline}
/* hello-elementor-theme-style */
.comments-area a,.page-content a{text-decoration:underline}.alignright{float:right;margin-left:1rem}.alignleft{float:left;margin-right:1rem}.aligncenter{clear:both;display:block;margin-inline:auto}.alignwide{margin-inline:-80px}.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw}.alignfull,.alignfull img{width:100vw}.wp-caption{margin-block-end:1.25rem;max-width:100%}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{display:block;margin-inline:auto}.wp-caption-text{margin:0}.gallery-caption{display:block;font-size:.8125rem;line-height:1.5;margin:0;padding:.75rem}.pagination{display:flex;justify-content:space-between;margin:20px auto}.sticky{display:block;position:relative}.bypostauthor{font-size:inherit}.hide{display:none!important}.post-password-form{margin:50px auto;max-width:500px}.post-password-form p{align-items:flex-end;display:flex;width:100%}.post-password-form [type=submit]{margin-inline-start:3px}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#eee;clip:auto!important;clip-path:none;color:#333;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:12px 24px;text-decoration:none;top:5px;width:auto;z-index:100000}.post .entry-title a{text-decoration:none}.post .wp-post-image{max-height:500px;-o-object-fit:cover;object-fit:cover;width:100%}@media(max-width:991px){.post .wp-post-image{max-height:400px}}@media(max-width:575px){.post .wp-post-image{max-height:300px}}#comments .comment-list{font-size:.9em;list-style:none;margin:0;padding:0}#comments .comment,#comments .pingback{position:relative}#comments .comment .comment-body,#comments .pingback .comment-body{border-block-end:1px solid #ccc;display:flex;flex-direction:column;padding-block-end:30px;padding-block-start:30px;padding-inline-end:0;padding-inline-start:60px}#comments .comment .avatar,#comments .pingback .avatar{border-radius:50%;left:0;margin-inline-end:10px;position:absolute}body.rtl #comments .comment .avatar,body.rtl #comments .pingback .avatar,html[dir=rtl] #comments .comment .avatar,html[dir=rtl] #comments .pingback .avatar{left:auto;right:0}#comments .comment-meta{display:flex;justify-content:space-between;margin-block-end:.9rem}#comments .comment-metadata,#comments .reply{font-size:11px;line-height:1}#comments .children{list-style:none;margin:0;padding-inline-start:30px;position:relative}#comments .children li:last-child{padding-block-end:0}#comments ol.comment-list .children:before{content:"↪";display:inline-block;font-size:1em;font-weight:400;left:0;line-height:100%;position:absolute;top:45px;width:auto}body.rtl #comments ol.comment-list .children:before,html[dir=rtl] #comments ol.comment-list .children:before{content:"↩";left:auto;right:0}@media(min-width:768px){#comments .comment-author,#comments .comment-metadata{line-height:1}}@media(max-width:767px){#comments .comment .comment-body{padding:30px 0}#comments .children{padding-inline-start:20px}#comments .comment .avatar{float:left;position:inherit}body.rtl #comments .comment .avatar,html[dir=rtl] #comments .comment .avatar{float:right}}.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{margin-inline-end:auto;margin-inline-start:auto;width:100%}@media(max-width:575px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{padding-inline-end:10px;padding-inline-start:10px}}@media(min-width:576px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:500px}.site-footer.footer-full-width .footer-inner,.site-header.header-full-width .header-inner{max-width:100%}}@media(min-width:768px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:600px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media(min-width:992px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:800px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media(min-width:1200px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:1140px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}.site-header+.elementor{min-height:calc(100vh - 320px)}
/* bcc-tokens */
/**
* Barranco Comptoir Péruvien — brand design tokens.
*
* Source: Brand Book V6 (Sept 2026) + the official Kit de Marque V6 asset
* export's own BC_Tokens.css (docs/brand-assets/), which is what's used
* for --bcc-ink below -- V4 had no confirmed ink value, so this file
* aliased it to Pacífico as a placeholder. V6's asset kit ships a
* distinct, real ink value (#1B1726) that was never Pacífico; corrected.
* Everything else (5-color palette, 3 type families) matched exactly
* between V4 and V6 -- no other change needed.
*
* The legacy names (--bcc-purple-900, --bcc-gold-400, --bcc-cream,
* --bcc-ink, --bcc-lime, etc.) below are kept from the original
* placeholder token set on purpose —
* PRs 5, 7, 8, 9, 11, 12 already reference them in shipped CSS. Renaming
* would silently break every one of those (undefined custom properties
* fail silent in CSS, not a build error). They now alias the confirmed
* brand-book colors instead of guesses.
*
* Fonts are self-hosted below (assets/fonts/*.woff2, fetched from Google
* Fonts — same open-license files, just served from our own domain).
* The brand book's true display face is "Brothers", not yet licensed;
* it names "Big Shoulders Display" as the explicit interim substitute
* (page 20: "* Big Shoulders Display en attendant la licence Brothers.
* Le wordmark n'est jamais retapé." — the logo artwork itself is never
* reset in a font, only surrounding headline/UI text uses this face).
*/
:root {
/* Confirmed brand-book palette (source of truth) — proportion guide
45 / 20 / 25 / 7 / 3, in this same order. */
--bcc-chicha: #48396F; /* Maïs mauve — primary, 45% */
--bcc-choclo: #EEDB76; /* Maïs géant — secondary, 20% */
--bcc-quinoa: #F6F1E4; /* La graine — light/background, 25% */
--bcc-pacifico: #143232; /* La mer — dark accent, 7% */
--bcc-lucuma: #EBAF82; /* Le fruit — accent, 3% */
--bcc-ink-text: #1B1726; /* Confirmed body-text ink from the V6 asset kit's own tokens -- distinct from Pacífico, not part of the 5-color brand palette itself */
/* design/reference/index.html's own :root has two tokens the brand
book's 5-color list doesn't name on its own: a brighter "paper"
white for cards/tabs/panels (its --card/--paper, both #FFFDF8) that
sits on top of the tan --bg/Quinoa page background, and a darkened
Chicha for :hover states (its --chicha-dk). Without --bcc-paper,
--bcc-cream below aliased straight to Quinoa -- the exact same
color as the page background it sits on -- so every dish card, menu
tab, sticky panel and mini-bar rendered flush with the page instead
of lifting off it. */
--bcc-paper: #FFFDF8;
--bcc-chicha-dk: #382B5A;
/* Legacy names (PRs 5/7/8/9/11/12 reference these) -> brand-book colors */
--bcc-purple-900: var(--bcc-chicha); /* deep background, footer */
--bcc-purple-700: var(--bcc-chicha); /* primary brand */
--bcc-purple-500: var(--bcc-chicha); /* hover/active — brand book has one confirmed purple, no tint */
--bcc-gold-400: var(--bcc-choclo); /* brand yellow background */
--bcc-gold-600: var(--bcc-lucuma); /* accents, borders — distinct from the gold-400 fill */
--bcc-cream: var(--bcc-paper); /* cards/tabs/panels sitting on the page -- was aliased to Quinoa (see comment above) */
--bcc-ink: var(--bcc-ink-text); /* body text on light — real confirmed ink, not Pacífico */
/* TODO(Fidel): no red/orange or green exists in the brand book's 5-color
palette. --bcc-chili and --bcc-lime are functional UI colors (spicy
tag, open-now dot), not brand colors — flagging that these are
outside the confirmed palette rather than guessing brand intent. */
--bcc-chili: var(--bcc-lucuma);
--bcc-lime: var(--bcc-pacifico);
/* design/BRIEF.md §2's own :root also names these two -- muted body
text and hairline rules/dividers. Confirmed 2026-09-20: hero.css's
.bcc-how__step p already referenced --bcc-muted since step 2 of the
mockup port, but this file never defined it, so that rule was
silently falling back to inherited text colour. Defining both here
fixes that and unblocks menu.css's step-3 usage. */
--bcc-muted: #5A5170;
--bcc-rule: #CFC6B4;
--bcc-font-display: "Big Shoulders Display", impact, sans-serif; /* TODO: swap to "Brothers" once licensed — never re-set the logo artwork itself in this font */
--bcc-font-body: "Roboto Condensed", system-ui, sans-serif;
--bcc-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* labels, prices, addresses, hours, codes (brand book 02.8) */
/* Shared H2 scale for full-width, single-column section headings
(menu/nutrition/coach/comptoirs/faq/ingredients + b2b's page h1) --
P2 audit found these 7 hardcoding the identical clamp() value
independently. Two-column split-layout headings (club/story/matin/
traiteur) keep their own smaller, layout-tuned
values -- those aren't drift, a half-width column genuinely needs
a smaller cap, so they're deliberately left alone here. */
--bcc-h2: clamp(3.375rem, 7.2vw, 7rem);
/* Type scale (UI/UX audit 2026-10-05, §4): fluid 360 -> 1440px, nine
sizes. New and touched rules use these; nothing visible goes below
--fs-data (13px) except legal fine print (.legal, --fs-legal 12px).
Roles: --bcc-font-display for H2-H4, nav, buttons, tabs, chips;
--bcc-font-body for reading and form text; --bcc-font-mono for data
only (prices, kcal/protein, codes), never for sentences. */
--fs-display: clamp(2.75rem, 1.6rem + 5vw, 6rem);
--fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
--fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
--fs-h4: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
--fs-lead: clamp(1.125rem, 1rem + .4vw, 1.25rem);
--fs-body: 1rem;
--fs-small: .875rem;
--fs-data: .8125rem;
--fs-legal: .75rem;
--lh-tight: 1;
--lh-heading: 1.1;
--lh-body: 1.55;
--measure: 62ch;
/* Sharp, bordered, "poster" language (2026-09-20, matching the
reference mockup Fidel picked) -- flat corners everywhere, no
blurred shadows. Cards/buttons/chips get a solid 2px border plus a
hard offset shadow on hover instead. Kept as tokens rather than 0
hardcoded per file so a future direction change is one edit. */
--bcc-radius-sm: 0;
--bcc-radius-md: 0;
--bcc-radius-lg: 0;
--bcc-radius-pill: 0;
--bcc-shadow-card: none;
--bcc-shadow-lift: 0 16px 40px rgb(72 57 111 / .28);
--bcc-border-width: 2px;
--bcc-space: clamp(16px, 2.5vw, 32px);
/* Film grain overlay for coloured sections (design/BRIEF.md §2),
ported verbatim from design/reference/index.html's --grain SVG
data URI -- a generated noise texture, not a fetched image. */
--bcc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/%23n)'/%3E%3C/svg%3E");
}
/**
* Neither html nor body carry overflow-x:hidden any more (both removed
* 2026-09-21) -- full history below, since this took two rounds to get
* right and the reasoning matters if anyone touches horizontal overflow
* again.
*
* Originally added to fix an iOS Safari horizontal rubber-band bug
* (Fidel: "when scrolling it's moving sideways everything", confirmed
* on a real iPhone) blamed on the hero's infinite marquee track
* (motion.css), which is legitimately much wider than the viewport by
* design. Round 1 removed body's copy: setting overflow-x alone on an
* element forces its overflow-y to compute as `auto` instead of
* `visible` (a real CSS spec rule), which makes that element its own
* independent scroll container -- confirmed via an isolated
* reproduction that this was silently breaking position:sticky for
* every descendant sitewide (found via the bowl builder's totals panel
* never actually sticking while scrolling). Kept html's copy, reasoning
* the iOS fix needed it.
*
* Round 2, after re-verifying live post-deploy: the panel *still*
* didn't stick. html's own overflow-x:hidden turned out to independently
* cause the exact same breakage, confirmed by live A/B testing (toggling
* only html's overflow-x on a live page while everything else stayed
* fixed: present -> panel locked in lockstep with scroll, i.e. not
* sticking at all; removed -> panel correctly held at top:104px while
* scrolling through the section). Tried `overflow-x: clip` as a
* spec-cleaner alternative to `hidden` (doesn't force the other axis to
* `auto`) -- still broke sticky the same way, so this isn't specific to
* the auto-promotion, just to setting non-visible overflow-x on the
* scrolling root at all.
*
* Before removing it outright, checked whether it's even still needed:
* measured document.documentElement.scrollWidth vs clientWidth (the
* direct, engine-agnostic signal for "is this document horizontally
* scrollable") on `/`, `/menu/`, `/arma-tu-bowl/` and `/emplacements/`
* at a 390px mobile viewport, with html's overflow-x removed -- equal
* on every page, no horizontal overflow anywhere. .bcc-marquee's own
* overflow:hidden (motion.css) already fully contains the wide track on
* its own today; whatever this rule was compensating for no longer
* exists in the current markup/CSS. Safe to remove entirely.
*/
/**
* Global radius reset (AUDIT_DESIGN_FUNNEL_Comptoir.md A2): the brand's
* "poster" language is flat corners everywhere (--bcc-radius-*: 0
* above), but live measurement across every page found pill-shaped
* buttons, rounded inputs and a rounded logo image -- 12px/16px/9px
* radii that exist nowhere in this plugin's own CSS (grepped for
* hardcoded border-radius: only 50% circles, all intentional dots/
* avatars). They're Hello Elementor's/Elementor's own default button,
* input and image styling leaking through wherever this plugin doesn't
* explicitly override it.
*
* !important, corrected 2026-09-20: a universal selector has *zero*
* specificity -- lower than even a bare element selector -- so without
* !important this reset never actually beat Elementor's own
* `button`/`img`/`input` rules (re-verified live post-deploy: radius
* offenders were unchanged). !important makes it win unconditionally,
* which is why every intentional `border-radius: 50%` circle rule in
* this plugin (dots, avatars) now also carries !important below --
* !important always wins over non-!important regardless of
* specificity, so those circles would otherwise have been flattened
* by this same reset.
*
* A handful of buttons (.bcc-hero__arrow, .bcc-hero__dots button,
* .bcc-opt) still measured a small 3px radius live even after this --
* Elementor's kit CSS scopes some of its own button defaults with a
* higher-specificity compound selector that keeps winning over this
* bare `*` rule despite !important (specificity is compared before
* source order, even between two !important declarations). Gave those
* three their own `border-radius: 0 !important` directly, which does
* have enough specificity to win.
*/
* {
border-radius: 0 !important;
}
/**
* Base page look (design/reference/index.html's own `body` rule, ported
* verbatim). Nothing set this before, so every front-end page fell back
* to the theme's default white background and font instead of the
* brand's warm tan canvas -- the single biggest reason the site read as
* off-brand next to the mockup. --bcc-cream-filled cards (see above)
* only read as "lifted paper" against this tan backdrop; without it
* they had nothing to contrast against.
*
* background/color: !important, corrected 2026-09-20 -- this was the
* single biggest miss of the whole night. Live-measured
* document.body's own computed backgroundColor as #FFF5C7 (a pale
* lemon yellow, Elementor's kit default), not --bcc-quinoa, despite
* this rule -- exactly AUDIT_DESIGN_FUNNEL_Comptoir.md A3's complaint
* ("page background is a light lemon yellow"). Every #fff5c7
* "background" reading in this session's own contrast/palette audits
* was this real bug, not a sandbox/proxy artifact as earlier passes
* assumed -- it's what any section without its own opaque background
* (gaps, margins, any section whose own background rule is also
* losing this same fight) was actually showing through to. Same
* missing-!important collision as everywhere else tonight, just never
* caught here because no automated check was written to inspect the
* page's own base background specifically, only per-element text
* contrast and known component classes.
*
* font-family: !important (UI/UX audit 2026-10-05, §4) -- Hello
* Elementor's reset printed after this file and its own
* `body{font-family:-apple-system,...}` won the tie, so every paragraph
* without its own font rule rendered in the system face instead of the
* brand's text face (BRAND.md: Roboto Condensed). includes/assets.php now
* prints the theme first; !important keeps it true if that ever changes.
*/
body {
background: var(--bcc-quinoa) !important;
color: var(--bcc-ink) !important;
font-family: var(--bcc-font-body) !important;
font-size: var(--fs-body); /* 16px: what visitors saw while the theme's reset won (QA 2026-10-06) */
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/**
* Visible focus ring on every interactive element, ported verbatim from
* design/reference/index.html's own `:focus-visible{outline:3px solid
* var(--choclo);outline-offset:3px}` -- present in the reference from
* day one but never actually carried over into this plugin. Grepped the
* whole plugin for any :focus/:focus-visible rule and found none at all
* (confirmed real gap, not a leak this time -- nothing here or in
* Elementor's kit CSS suppresses the browser default either, it's just
* that an unstyled default varies by browser and doesn't read as
* "branded"). Gold reads well against every section background except
* the few elements that are themselves gold (the primary CTA, and the
* selected/pressed state of chips and ingredient options) -- those get
* a purple override right after their own rule, same targeted-override
* pattern already used for border-radius/box-shadow collisions.
*/
:focus-visible {
outline: 3px solid var(--bcc-gold-400);
outline-offset: 3px;
}
/**
* Sitewide mid-fetch button state -- audit found 6 of 8 async form
* submits (popup, opening countdown, nutrition/coach "send me this"
* modals, b2b/office-lunch) set `button.disabled` in JS but had no
* matching CSS anywhere, so the button looked identical while a
* request was in flight, inviting double-submits. One global rule
* instead of patching each button class individually.
*/
button:disabled {
opacity: .6;
cursor: default;
pointer-events: none;
}
/**
* Apply .grain to any coloured section to lay this noise texture over
* it (design/BRIEF.md §2). .grain > * lifts real content above the
* overlay without needing to know that section's own class names.
*/
.grain {
position: relative;
isolation: isolate;
}
.grain::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--bcc-grain);
opacity: .13;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 0;
}
.grain > * {
position: relative;
z-index: 1;
}
/**
* Hides Hello Elementor's own generic page title (2026-09-22, Fidel:
* "better design of each page basically, use the branding typographie
* also do not forget!!") -- live-checked /faq: the theme's default
* single-page template prints
...
above our own [bcc_*] shortcode
* content on every plain WP page (/menu, /arma-tu-bowl, /bureau,
* /emplacements, /faq, /nos-ingredients, the location and dish pages --
* anywhere that isn't the homepage's own custom front-page.php
* template). Never touched by this plugin's CSS until now, so it
* rendered in the theme's default font -- not the brand's Big Shoulders
* Display -- right above each page's own properly-branded heading
* (e.g. [bcc_faq]'s own "Questions", [bcc_menu]'s own "La carte"),
* reading as two different-looking headings stacked on top of each
* other. Visually hidden (not display: none) rather than restyled to
* match, since every page already has its own real, branded heading
* immediately below it -- a second heading here would just be a
* duplicate. Keeps the real
in the DOM for SEO/accessibility.
*/
.page-header {
margin: 0;
padding: 0;
}
/**
* !important on every property -- live-verified on /faq and
* /nos-ingredients that the plain rule above didn't actually hide
* anything (h1 still full-width, visible). Same Elementor global-kit
* specificity collision documented throughout this plugin's own CSS
* history (header.css's .bcc-announce, popup.css's .bcc-popup__offer,
* etc.) -- Elementor's own kit styles for a generic heading element win
* without it.
*/
.page-header .entry-title {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@font-face {
font-family: "Big Shoulders Display";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/../fonts/big-shoulders-display-400.woff2") format("woff2");
}
@font-face {
font-family: "Big Shoulders Display";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/../fonts/big-shoulders-display-700.woff2") format("woff2");
}
@font-face {
font-family: "Big Shoulders Display";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/../fonts/big-shoulders-display-900.woff2") format("woff2");
}
@font-face {
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/../fonts/roboto-condensed-400.woff2") format("woff2");
}
@font-face {
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/../fonts/roboto-condensed-700.woff2") format("woff2");
}
@font-face {
font-family: "Roboto Condensed";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/../fonts/roboto-condensed-400-italic.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/../fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://barrancocomptoir.com/wp-content/plugins/barranco-comptoir-core/assets/css/../fonts/ibm-plex-mono-600.woff2") format("woff2");
}
/* bcc-header */
/**
* Sticky header, full-screen mobile drawer, announcement bar. Reference:
* design mockup Fidel shared 2026-09-19 (purple/gold, bold uppercase
* nav). Order bar (components.css) owns the bottom of the viewport on
* mobile, so this owns the top instead -- no z-index collision.
*
* Hiding the old header (2026-09-20): staging showed the theme's own
* default header (logo/CTA stacked, its own hamburger opening a
* completely different menu -- "À propos / Contact / Franchise", pages
* this plugin knows nothing about) rendering alongside this one, because
* nobody had gone into Elementor to hide it yet. Rather than leave that
* as a manual step someone has to remember, this CSS rule hides it
* automatically -- purely visual (display:none), nothing in the theme
* or Elementor is touched or edited. Targets Hello Elementor's default
* header markup (#masthead, .site-header) and an Elementor Pro header
* template (data-elementor-type="header"), covering both possibilities
* without knowing which one this site actually uses.
*/
body > header#masthead,
body > .site-header,
[data-elementor-type="header"] {
display: none !important;
}
/**
* color: !important -- AUDIT_DESIGN_FUNNEL_Comptoir.md flagged a
* non-palette magenta (#cc3366) on this element; live measurement
* confirmed it, computed instead of the purple set below. Same
* Elementor-collision pattern already fixed elsewhere in this file
* (.bcc-menu-toggle) and across the plugin -- this anchor's color was
* simply never audited for it since it isn't a heading/button/select.
*/
.bcc-announce {
display: block;
background: var(--bcc-gold-400);
color: var(--bcc-purple-900) !important;
font-family: var(--bcc-font-mono);
font-size: 13px;
letter-spacing: .02em;
text-align: center;
text-decoration: none;
padding: 9px 16px;
}
a.bcc-announce:hover {
text-decoration: underline;
}
.bcc-drawer {
position: fixed;
inset: 0;
z-index: 200;
background: var(--bcc-purple-900);
color: var(--bcc-cream);
padding: calc(env(safe-area-inset-top, 0px) + 90px) 28px 40px;
display: flex;
flex-direction: column;
gap: 18px;
overflow-y: auto;
overscroll-behavior: contain;
}
/* Page behind the open phone menu stays put (audit 2026-10-05, #18). */
html.bcc-drawer-open,
html.bcc-drawer-open body {
overflow: hidden;
}
.bcc-drawer[hidden] {
display: none;
}
.bcc-drawer.is-open {
animation: bcc-drawer-in .25s ease;
}
@keyframes bcc-drawer-in {
from { opacity: 0; }
}
.bcc-drawer__nav {
display: flex;
flex-direction: column;
gap: 14px;
}
.bcc-drawer__nav a {
font-family: var(--bcc-font-display);
font-weight: 900;
font-size: 46px;
line-height: 1;
text-transform: uppercase;
color: var(--bcc-cream);
text-decoration: none;
}
.bcc-drawer__lang {
display: flex;
align-items: center;
gap: 10px;
margin-top: 24px;
padding-top: 20px;
border-top: var(--bcc-border-width) solid rgb(246 241 228 / .25);
font-family: var(--bcc-font-mono);
font-size: 15px;
font-weight: 700;
letter-spacing: .03em;
}
.bcc-drawer__lang a,
.bcc-drawer__lang span {
color: var(--bcc-cream);
text-decoration: none;
}
.bcc-drawer__lang .is-active {
color: var(--bcc-gold-400);
}
.bcc-drawer__close {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 18px);
right: 20px;
width: 46px;
height: 46px;
background: none !important;
border: var(--bcc-border-width) solid var(--bcc-cream);
border-radius: var(--bcc-radius-sm);
color: var(--bcc-cream) !important;
font-size: 22px;
cursor: pointer;
}
.bcc-drawer__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
margin-top: 10px;
padding: 0 26px;
background: var(--bcc-gold-400) !important;
color: var(--bcc-purple-900) !important;
font-family: var(--bcc-font-display);
font-weight: 800;
font-size: 26px;
letter-spacing: .05em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--bcc-radius-pill);
box-shadow: 0 6px 0 -1px rgb(0 0 0 / .18);
align-self: flex-start;
}
@media (prefers-reduced-motion: reduce) {
.bcc-drawer.is-open {
animation: none;
}
}
.bcc-top {
position: sticky;
top: env(safe-area-inset-top, 0);
z-index: 120;
background: var(--bcc-purple-900);
color: var(--bcc-cream);
box-shadow: none;
transition: box-shadow .3s, transform .3s ease;
}
.bcc-top.bcc-top--scrolled {
box-shadow: 0 10px 30px rgb(21 18 29 / .25);
}
/**
* Hide-on-scroll-down / reveal-on-scroll-up, per the reference mockup
* ("the top ... are sticky pretty much or disappear from time to time").
* header.js toggles this class; disabled outright for reduced-motion so
* the header just stays put rather than snapping.
*/
.bcc-top.bcc-top--hidden {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.bcc-top {
transition: box-shadow .3s;
}
.bcc-top.bcc-top--hidden {
transform: none;
}
}
.bcc-top__wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: min(1280px, 100% - 40px);
margin-inline: auto;
height: 74px;
}
/**
* color: !important -- the logo is image-only (no visible text), so
* this never affected rendering, but live measurement still found
* Elementor's default link magenta computed here. Fixed anyway per
* AUDIT_DESIGN_FUNNEL_Comptoir.md A1's "delete every non-palette
* colour" -- zero tolerance, not just the visible ones.
*/
.bcc-top__logo {
color: var(--bcc-cream) !important;
}
.bcc-top__logo img {
height: 44px;
width: auto;
display: block;
}
.bcc-top__nav {
display: flex;
gap: 24px;
}
/**
* FR/EN toggle (Fidel: "why the website theres no toggle FR or EN"),
* both here (desktop) and .bcc-drawer__lang below (mobile drawer).
* Current language is a plain span, not a link -- no reason to link a
* page to itself -- the other language is the only clickable one.
* The :hover rule is grouped with .bcc-top__nav's own :hover/::after
* block further below, not here next to this rule -- same specificity
* tier, kept together so stylelint's no-descending-specificity (which
* compares raw specificity values file-wide, not by component) stays
* satisfied without disabling the rule.
*/
.bcc-top__lang {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--bcc-font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: .03em;
}
.bcc-top__lang a,
.bcc-top__lang span {
color: var(--bcc-cream);
text-decoration: none;
/* Tap target >= 44px on phones (audit 2026-10-05, #20). */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
.bcc-top__lang .is-active {
color: var(--bcc-gold-400);
}
/**
* font-family: was --bcc-font-mono (ported verbatim from the reference
* mockup) -- Fidel flagged it live as "not matching the fonts used in
* the mobile nav menu... pretty thin and not very lisable." Brand
* book 02.8 also scopes mono to labels/prices/addresses/codes, not
* primary navigation, so this brings desktop in line with the mobile
* drawer's own bold display treatment (bcc-drawer__nav a above)
* instead of the mockup's thinner label style.
*/
.bcc-top__nav a {
font-family: var(--bcc-font-display);
font-weight: 900;
font-size: 17px;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--bcc-cream);
text-decoration: none;
opacity: .88;
position: relative;
padding: 6px 0;
transition: opacity .2s;
}
.bcc-top__nav a:hover {
opacity: 1;
}
/**
* Animated underline (design/BRIEF.md §4.2): grows in from the left on
* hover, stays filled for the current page (.act, set server-side in
* bcc_print_nav_links()) or a real WP menu's own "current page" class.
*/
.bcc-top__nav a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
height: 2px;
background: var(--bcc-gold-400);
transition: right .25s;
}
.bcc-top__nav a:hover::after,
.bcc-top__nav a.act::after,
.bcc-top__nav .current-menu-item > a::after {
right: 0;
}
.bcc-top__nav a.act,
.bcc-top__nav .current-menu-item > a {
opacity: 1;
}
.bcc-top__lang a:hover {
text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
.bcc-top__nav a::after {
transition: none;
}
}
.bcc-top__actions {
display: flex;
align-items: center;
gap: 14px;
}
.bcc-top__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 26px;
background: var(--bcc-gold-400) !important;
color: var(--bcc-purple-900) !important;
font-family: var(--bcc-font-display);
font-weight: 800;
font-size: 20px;
letter-spacing: .05em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--bcc-radius-pill);
box-shadow: 0 6px 0 -1px rgb(0 0 0 / .18);
transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.bcc-top__cta:hover {
transform: translateY(-2px);
}
/* tokens.css's global focus ring is gold -- invisible on this CTA's own gold fill */
.bcc-top__cta:focus-visible,
.bcc-drawer__cta:focus-visible {
outline-color: var(--bcc-purple-900);
}
/**
* !important throughout: staging showed this button picking up an
* unidentified fill color from somewhere outside this plugin (not
* reproducible from any rule in this codebase -- grepped for it,
* nothing here sets it). Forcing our own values wins regardless of
* whatever else on the page might be targeting a bare