/* ═══════════════════════════════════════════════════════════════ PAGE BAR — the Fan Zone landing top bar, on the module pages ═══════════════════════════════════════════════════════════════ Lifted from css/landingb.css (TOP BAR) so schedule.html and the other reference pages carry the same header the landing shows: client logo on the left, language flags and the light/dark toggle on the right. js/page-bar.js fills it from the same `intro` block. These pages load main.min.css, whose `header` rules assume the old absolutely-positioned logo — every rule here is scoped to header.bar and overrides that geometry rather than editing the shared sheet. THEME TOKENS --ink / --muted / --accent come from sports-panel.css (fallback) and are set on by sports-panel.js applyTheme(). --fs / --fs2 mirror the landing's clamped type scale so a client font_size drives the bar the way it drives the landing, without a 3rem hero value landing on a club name. ═══════════════════════════════════════════════════════════════ */ :root{ /* pre-render fallbacks, overwritten on by js/page-bar.js applyTheme(). css/sports-panel.css declares the same pair, but fanwall.html and any other page that takes the bar without the panel would otherwise have neither. */ --ink : #f4f7fc; --muted : rgba(244,247,252,.58); --fs : clamp(15px, var(--font-size, 19px), 24px); --fs2: clamp(11px, var(--secondary-font-size, 13px), 16px); /* NOT a rem: main.css sets html{font-size:3vh} (~26-32px) on the module pages while aicam.html and the landing keep the browser's 16px, so one rem value came out at two very different sizes — the bar looked half-height on aicam. Pinned to the viewport with a px ceiling so every page that takes the bar gets the same logo. intro.header_logo_size still overrides it, in rem, because that is what the back office writes. */ --header-logo-size:clamp(48px, 11.6vh, 100px); } header.bar{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:16px 18px 12px; width:100%;min-height:0;position:relative; background:none !important; } /* PageLang.renderSwitcher leaves #switcher empty below two languages — with nothing on the right there is nothing to space against, so the logo centres rather than hanging off the left edge. */ header.bar:has(.bar-tools:empty){justify-content:center} header.bar:has(#switcher:empty):not(:has(.theme-btn)){justify-content:center} /* main.css pins `header a` absolute for the legacy centred logo */ header.bar a{position:static;margin:0;height:auto;flex:none} .bar-logo{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto;overflow:hidden} /* height comes from intro.header_logo_size (rem), the same way the QR takes intro.qr_font_size; 3.875rem is the previous fixed 62px. */ .bar-logo .logo-img{height:var(--header-logo-size,3.875rem);width:auto;max-width:100%; object-fit:contain;display:none;padding:0;margin:0; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))} /* Pages that keep their own logo element in the bar (aicam's #headerLogo, fxcam's #header_logo, fanwall's #lgimg, swipe-bet's #partner_logo, and the *_remote pages' bare `.logo`) are sized by id selectors in their own sheets — e.g. aicam.css's `#headerLogo{max-height:30vh}`, which no class chain outranks. Named here so the bar geometry wins wherever the bar is used. padding:0 is part of that: main.css pads the legacy header logo by 50px, which inside an 86px bar is the whole row. */ /* !important on the caps, not decoration: main.css sizes #header_logo.logo with `max-width/max-height: var(--header-logo-size, 300px) !important` for the legacy headers. The bar sizes by HEIGHT, so letting a rem width cap through would squash a wide mark the moment a game set the field. */ header.bar .bar-logo #headerLogo, header.bar .bar-logo #header_logo, header.bar .bar-logo #partner_logo, header.bar .bar-logo #lgimg, header.bar .bar-logo .logo{ position:static;height:var(--header-logo-size,3.875rem);width:auto; max-height:none !important;max-width:100% !important; padding:0 !important;margin:0 !important;object-fit:contain} /* The legacy header hid the logo until its JS set a src (main.css `#header_logo.logo{display:none}`); those pages still flip it to display:block inline, so nothing is forced visible here — an unbranded game keeps an empty left side rather than a broken-image icon. */ /* A wide logo used to run under the flags: `header.bar a{flex:none}` above froze the anchor at its intrinsic width, so .bar-logo's min-width:0 had nothing to shrink. Made shrinkable, the logo yields width to .bar-tools (flex:0 0 auto, so the flags keep full size) and object-fit:contain scales the mark down inside the bar height instead of overlapping. */ header.bar .bar-logo a{display:block;line-height:0;min-width:0;flex:0 1 auto;overflow:hidden} /* the club name is already in the logo — the text duplicate is dropped */ .bar-logo .club{display:none;font-family:var(--font-family);font-weight:800;font-size:calc(var(--fs) * 0.842); letter-spacing:.02em;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bar-logo .club small{display:block;font-family:var(--secondary-font-family); font-weight:500;font-size:calc(var(--fs2) * 0.808);letter-spacing:.14em;color:var(--muted);margin-top:3px;text-transform:uppercase} .bar-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto} /* language switcher — same markup + /assets/img/{lang}.png flags as the landing, rendered by PageLang.renderSwitcher() */ /* Every selector below is written through #switcher as well as the class: css/lang-switcher.css sizes the flags with `#switcher li img`, an id selector no class chain can outrank, and it loads after this sheet. */ header.bar #switcher, header.bar .lang-switcher{list-style:none;margin:0;padding:0;width:auto; display:flex;align-items:center;justify-content:center;gap:6px} header.bar #switcher li, header.bar .lang-switcher li{margin:0} /* corner-shape only reshapes a corner a radius already rounds, and on a replaced element it needs the box to actually clip. Browsers without corner-shape fall back to the plain 50% circle. */ header.bar #switcher li a, header.bar .lang-switcher li a{display:block;line-height:0;overflow:hidden; border-radius:50%;corner-shape:squircle} header.bar #switcher li img, header.bar .lang-switcher li img{width:36px;height:36px;display:block;object-fit:cover; border-radius:50%;corner-shape:squircle;overflow:hidden; transition:opacity .2s,transform .2s;cursor:pointer; border:5px solid color-mix(in srgb,var(--primary-color) 55%,transparent);opacity:.55} /* In light mode primary_color is #ffffff on most configs — an invisible ring on a near-white page. The secondary is the colour that still reads there. */ :root[data-theme="light"] header.bar #switcher li img, :root[data-theme="light"] header.bar .lang-switcher li img{ border-color:color-mix(in srgb,var(--secondary-color) 60%,transparent)} :root[data-theme="light"] header.bar #switcher li a.active img, :root[data-theme="light"] header.bar .lang-switcher li a.active img{border-color:var(--secondary-color)} header.bar #switcher li a.active img, header.bar .lang-switcher li a.active img{border-color:var(--primary-color);opacity:1; transform:none;box-shadow:none} header.bar #switcher li img:hover, header.bar .lang-switcher li img:hover{opacity:1;transform:scale(1.12)} /* light / dark toggle — the icon shows the mode you would switch TO */ /* Every value here that css/selfiecam.css also sets carries !important. That sheet (loaded by fxcam.html and the selfie pages) styles EVERY