/* ============================================================ Barça Energy Drink · responsive add-on (phones & tablets) Port of the owner's `responsive.css` (pack 18.08.2026). Purely additive: no rule fires above 1024px, so the desktop rendering stays pixel-identical. Served as a plain file from /public and linked as the LAST stylesheet of the document (end of in index.html) — it wins on cascade order, and carries his deliberate `!important`s for compound selectors. `AdminLayout` disables the sheet while the admin is mounted: the admin is out of scope by his call. Selectors follow his instruction "if a class was renamed in the port, rename it in the layer too". Every divergence from his file is marked `port:`. ============================================================ */ /* ---------- Header · every page ---------- */ @media (max-width: 920px) { .hdr .in { flex-wrap: wrap; padding: 8px 14px; } .hdr .brand { order: 1; min-height: 44px; display: inline-flex; align-items: center; } /* the brand name next to the crest is part of the identity */ .hdr .brand b { display: inline !important; } .hdr .sp { display: none; } .hdr .demopill { display: none; } .hdr .mode-toggle { order: 2; margin-left: auto; width: 42px; height: 42px; } .hdr nav { order: 4; width: 100%; margin: 2px 0 0; padding: 2px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; /* every item visible — nothing hidden behind a scroll */ } /* the funnel entry stays in sight — gold pill */ .hdr nav a[href*='distributor'] { background: var(--gold); color: #1d1d1f; font-weight: 700; } .hdr nav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 13.5px; border-radius: 999px; } /* cabinet demo: its own right-hand block */ .hdr .back { margin-left: auto; min-height: 42px; display: inline-flex; align-items: center; padding: 0 10px; } /* port: his `.iconbtn` is our notification bell's

*/ .hdr .nbell summary { min-width: 42px; min-height: 42px; } } @media (max-width: 640px) { /* the header scrolls away — phone screen is expensive; on a country page the reader navigates with the fly-in header instead */ .hdr { position: static; } .hdr .brand b { font-size: 14px; } } /* ---------- Country pages (the generated template) ---------- */ @media (max-width: 920px) { /* port: `html .market .secnav` — page CSS pins `top` at that specificity */ html .market .secnav { top: 0; } .secnav .in { padding: 8px 14px; } .secnav .in a { min-height: 40px; display: inline-flex; align-items: center; font-size: 12.5px; } } @media (max-width: 640px) { /* on a phone the 01–06 strip does not stick — it scrolls away (owner, 18.08) */ html .market .secnav { position: static; } } /* ---------- Micro-typography: phones AND tablets ---------- */ @media (max-width: 920px) { /* 10–10.5px caps labels are unreadable at arm's length */ .k { font-size: 11.5px !important; } .k3 { font-size: 11.5px !important; } .tag { font-size: 11px !important; line-height: 1.5; } .chips span { font-size: 12px !important; padding-top: 6px; padding-bottom: 6px; } .dk { font-size: 11.5px !important; } /* distributor: group labels */ .cap { font-size: 11.5px !important; } /* cabinet: file captions */ .donut-center span { font-size: 11.5px !important; } /* countries: channel donut sub-label */ } /* ---------- Forms (distributor and any input/select) ---------- */ @media (max-width: 920px) { /* 16px in a field = iOS Safari stops zooming the page on focus */ input[type='text'], input[type='email'], input[type='tel'], input[type='url'], input:not([type]), select, textarea { font-size: 16px; } button[type='submit'] { min-height: 48px; } } /* ---------- Home: hero on a phone ---------- port: `.home.hx` prefix — the page stylesheet sizes the cans at that specificity and hides them outright below 900px. */ @media (max-width: 640px) { /* Three-can fan: Original in front, Red Grape and Watermelon angled behind. The cans are square 900×900 PNGs with the can centred, so they are positioned from the centre of the box, never from its edges. */ .home.hx .hcans { position: relative !important; display: block !important; height: 296px; margin-top: 18px; pointer-events: none; } .home.hx .hcans img { position: absolute !important; left: 50% !important; right: auto !important; bottom: 0 !important; top: auto !important; } .home.hx .hcans .hc2 { height: 262px !important; transform: translateX(-50%) rotate(4deg) !important; z-index: 3; } .home.hx .hcans .hc1 { height: 208px !important; bottom: 6px; transform: translateX(calc(-50% - 76px)) rotate(-16deg) !important; z-index: 2; filter: drop-shadow(0 18px 24px rgba(1, 4, 16, 0.5)) brightness(0.9); } .home.hx .hcans .hc3 { height: 208px !important; bottom: 6px; transform: translateX(calc(-50% + 76px)) rotate(16deg) !important; z-index: 2; filter: drop-shadow(0 18px 24px rgba(1, 4, 16, 0.5)) brightness(0.9); } } /* ---------- Markets: air in the hero on a phone ---------- port: `.markets` prefix, as the page stylesheet uses it. */ @media (max-width: 640px) { .markets .searchbox { width: 100%; padding: 0 22px; box-sizing: border-box; } .markets .searchbox .kick { letter-spacing: 0.18em; margin-bottom: 8px; } .markets .searchbox h1 { font-size: clamp(46px, 13.5vw, 60px); line-height: 0.95; margin: 10px 0 0; } .markets .searchbox .lead { font-size: 15.5px; line-height: 1.65; margin: 16px auto 24px; max-width: 32ch; } .markets .sfield .box { min-height: 56px; } } /* ---------- Events: the Fine Food intro card ---------- */ @media (max-width: 640px) { .events .intro .ik { flex-wrap: wrap; justify-content: center; row-gap: 2px; line-height: 1.45; max-width: 86vw; } } /* ---------- Events: photo mosaic → full-width rhythm ---------- port: `.events` prefix, as the page stylesheet uses it. */ @media (max-width: 640px) { /* wide frame → two squares → wide frame … large crops throughout */ .events .mosaic { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: auto; grid-auto-flow: dense; } .events .mosaic .tile { height: auto; min-height: 0; grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; } .events .mosaic .tile:nth-child(3n + 2), .events .mosaic .tile:nth-child(3n + 3) { grid-column: span 1; aspect-ratio: 1 / 1; } .events .mosaic .tile img, .events .mosaic .tile video { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; } } /* ---------- Home: company names never break mid-name ---------- */ @media (max-width: 640px) { .home.hx .about p b { white-space: nowrap; } .home.hx .chips2 { display: flex; flex-wrap: wrap; gap: 8px; } .home.hx .chips2 span, .home.hx .chips2 a { white-space: nowrap; } } /* ---------- Home: the Fine Food pill ---------- */ @media (max-width: 640px) { .ffa-cans { display: none; } /* decorative can strip above the pill — bulk we do not need */ .ffa-pill { right: 12px; bottom: 12px; width: min(300px, calc(100vw - 24px)); } .ffa-head { padding: 11px 40px 11px 13px; } /* room for the dismiss cross */ } /* the dismiss cross ships at every width, but only shows on a phone */ .ffa-x { display: none; position: absolute; top: 6px; right: 6px; z-index: 3; width: 30px; height: 30px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: none; border-radius: 50%; color: #c7d0ea; font-size: 16px; line-height: 1; cursor: pointer; } @media (max-width: 640px) { .ffa-x { display: flex; } } /* ---------- Countries · block 01: the "what 2–5% looks like" jar, compact ---------- port: `html .market` prefix, matching the page stylesheet. */ @media (max-width: 640px) { html .market .jar { width: 92px; height: 118px; border-radius: 14px 14px 11px 11px; } html .market .jarwrap { margin: 2px auto 0; } html .market .mcard.target .jarwrap { margin-top: 6px; } } /* ---------- Countries · block 04: share chart — label above, bar full width ---------- port: his `#playersChart` is our `.brows` bar chart. */ @media (max-width: 640px) { .market .brows .brow { display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: 'name val' 'track track'; align-items: center; column-gap: 10px; row-gap: 5px; padding: 7px 0; } .market .brows .bname { grid-area: name; width: auto; max-width: none; font-size: 13px; white-space: normal; } .market .brows .bval { grid-area: val; font-size: 12.5px; } .market .brows .btrack { grid-area: track; width: 100%; } } /* ---------- Countries · block 04: price table → cards ---------- His layer maps the cells by CLASS (`td.can`, `td.pr`). Our table is built by `playersTable()` and carries `td.b` for the brand, an unclassed cell for the distributor and three `td.num` cells — can, shelf price, share — so the port maps the three numeric cells from the END of the row, which holds whether or not the distributor column is present. There is no second (on-the-go) price column in our table, so his `pr2` rules have nothing to render and are gone. */ @media (max-width: 640px) { #sec4 .tbl-scroll { overflow: visible; } #sec4 .tbl-scroll table { display: block; width: 100%; } #sec4 .tbl-scroll thead { display: block; padding: 0 2px 9px; } #sec4 .tbl-scroll thead tr { display: block; } #sec4 .tbl-scroll tbody { display: block; } #sec4 .tbl-scroll th { display: none; } /* the price column's heading stays, as the legend above the cards */ #sec4 .tbl-scroll thead th:nth-last-child(2) { display: block; text-align: left; font-size: 11px; letter-spacing: 0.1em; border: 0; padding: 0; } #sec4 .tbl-scroll tbody tr { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: 'b b pr' 'dist can sh'; column-gap: 12px; row-gap: 3px; align-items: baseline; padding: 11px 13px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); } #sec4 .tbl-scroll td { display: block; padding: 0; border: 0; background: transparent !important; } #sec4 .tbl-scroll td:empty { display: none; } #sec4 .tbl-scroll tr.barca { background: color-mix(in srgb, var(--gold) 16%, var(--card)); border-color: var(--gold); } #sec4 .tbl-scroll td.b { grid-area: b; font-weight: 700; font-size: 14.5px; } #sec4 .tbl-scroll td:not(.b):not(.num) { grid-area: dist; color: var(--ink-2); font-size: 12.5px; align-self: start; } #sec4 .tbl-scroll td.num:nth-last-child(3) { grid-area: can; color: var(--ink-2); font-size: 12.5px; text-align: right; align-self: start; } #sec4 .tbl-scroll td.num:nth-last-child(2) { grid-area: pr; font-size: 17px; font-weight: 800; text-align: right; } #sec4 .tbl-scroll td.num:last-child { grid-area: sh; font-weight: 700; text-align: right; align-self: end; } } /* ---------- Countries · block 06: "How these targets are set" → year cards ---------- port: his `.rtable` is the explainer's `DataTable` inside `#sec6`. The column order is the same five he built, so the `nth-child` mapping is his, verbatim. */ @media (max-width: 640px) { #sec6 details .tbl-scroll { overflow: visible; } #sec6 details .tbl-scroll table { display: block; border: 0; } #sec6 details .tbl-scroll thead { display: none; } /* no header needed — the labels are in the cells */ #sec6 details .tbl-scroll tbody { display: block; } #sec6 details .tbl-scroll tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'y y m' 'pos speed goal'; row-gap: 7px; column-gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); } #sec6 details .tbl-scroll td { display: block; padding: 0; border: 0; font-size: 14px; } #sec6 details .tbl-scroll td:nth-child(1) { grid-area: y; font-weight: 800; font-size: 13px; } #sec6 details .tbl-scroll td:nth-child(2) { grid-area: pos; } #sec6 details .tbl-scroll td:nth-child(3) { grid-area: speed; } #sec6 details .tbl-scroll td:nth-child(4) { grid-area: goal; } #sec6 details .tbl-scroll td:nth-child(5) { grid-area: m; text-align: right; font-size: 12.5px; color: var(--ink-2); align-self: center; } #sec6 details .tbl-scroll td:nth-child(2)::before, #sec6 details .tbl-scroll td:nth-child(3)::before, #sec6 details .tbl-scroll td:nth-child(4)::before { display: flex; align-items: flex-end; min-height: 24px; /* two lines — all three values sit on one baseline */ font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; } #sec6 details .tbl-scroll td:nth-child(2)::before { content: 'Points of sale'; } #sec6 details .tbl-scroll td:nth-child(3)::before { content: 'Speed'; } #sec6 details .tbl-scroll td:nth-child(4)::before { content: 'Of the goal'; } } /* ---------- Countries · block 05: air around the channel donut ---------- */ @media (max-width: 640px) { #sec5 .donutwrap { width: 262px; margin-left: auto; margin-right: auto; } #sec5 details { padding-right: 6px; } } /* ---------- Countries · block 06: the year plan — squeezed columns → a list ---------- port: `.ramp` prefix on the children — charts.css sizes them at that specificity. */ @media (max-width: 640px) { .ramp.ramp { display: flex !important; flex-direction: column; gap: 9px; } .ramp .ryear { display: grid !important; grid-template-columns: 30px auto 1fr; grid-template-areas: 'bar y share' 'bar cans share' 'bar sub sub'; column-gap: 13px; row-gap: 1px; align-items: center; padding: 10px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .ramp .rbarwrap { grid-area: bar; width: 24px; height: 52px; align-self: center; display: flex; align-items: flex-end; background: var(--chip); border-radius: 7px; overflow: hidden; } .ramp .rbar { width: 100%; border-radius: 0; } .ramp .ry { grid-area: y; text-align: left; font-size: 10.5px; margin: 0; } .ramp .rcans { grid-area: cans; font-size: 19px; line-height: 1.15; text-align: left; white-space: nowrap; } .ramp .rsub { grid-area: sub; font-size: 12px; color: var(--ink-2); text-align: left; margin: 0; } .ramp .rshare { grid-area: share; justify-self: end; font-size: 12.5px; font-weight: 700; } } /* ---------- The header flies in on scroll-up (phone · useHeaderFlyIn) ---------- */ @media (max-width: 640px) { .hdr.hdr-fly { position: fixed; top: 0; left: 0; right: 0; z-index: 70; transform: translateY(-102%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 28px rgba(6, 10, 30, 0.22); } .hdr.hdr-fly.hdr-show { transform: translateY(0); } } @media (display-mode: standalone) and (max-width: 640px) { .hdr.hdr-fly { padding-top: env(safe-area-inset-top); } } /* ---------- PWA / standalone (the site added to a home screen) ---------- */ @media (display-mode: standalone) { body { padding-bottom: env(safe-area-inset-bottom); } .hdr { padding-top: env(safe-area-inset-top); } .ffa-pill { bottom: calc(12px + env(safe-area-inset-bottom)); } html .market .secnav { top: env(safe-area-inset-top); } /* no address bar in standalone — spend the vertical space on content */ .events .intro { padding-top: env(safe-area-inset-top); } } /* ---------- Tap targets and link rows ---------- */ @media (max-width: 920px) { .foot a, footer a { display: inline-block; padding: 8px 0; } a[href^='mailto:'] { display: inline-block; padding: 8px 0; } .ffa-pill .flink { display: inline-flex; align-items: center; min-height: 40px; } /* home: "Our events →" */ .ffa-pill .fhide { min-height: 36px; padding: 6px 14px; } /* home: the pill's Hide button */ }