/* ============================================================ The Bardo Foundation · Lead-Magnet Landing Page System (WEB) Responsive companion to bardo-brand.css (which is print/Letter). Static, no build step · deploy to Cloudflare Pages as-is. Link this ONE stylesheet from all six landing pages; edit it once and every page updates. Poppins is loaded from Google Fonts in the of each page. ============================================================ */ :root { /* Canonical in-market palette · do not add colors */ --bardo-blue: #0f2b52; --bardo-red: #d80124; --bardo-gold: #b8963e; --bardo-gold-hover: #a3823410; /* used via rgba below; see .btn:hover */ --bardo-light-blue: #e7edf1; --white: #ffffff; --black: #000000; --near-black: #212121; --light-gray: #f0f0f0; --muted: #6b7280; --maxw: 1080px; --radius: 6px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; color: var(--near-black); background: var(--white); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--bardo-blue); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---- Two-tone headline pattern (weight 300 + 700) ------------------ */ .tt { font-weight: 700; } .tt .light { font-weight: 300; } /* ---- Skip link (accessibility) ------------------------------------ */ .skip { position: absolute; left: -9999px; top: 0; background: var(--bardo-blue); color: var(--white); padding: 10px 16px; z-index: 100; } .skip:focus { left: 8px; top: 8px; } /* ---- Header / nav -------------------------------------------------- */ .site-header { background: var(--white); color: var(--near-black); /* was var(--bardo-blue) navy / white text, changed to white bg for the new logo image */ border-bottom: 4px solid var(--bardo-gold); /* was 8px, shrunk back down as header height shrinks; logo itself untouched */ } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 80px; /* was 136px, now sized to just fit the 80px logo with no extra padding */ } .brand { display: inline-flex; align-items: center; } .brand img { height: 80px; width: auto; display: block; } /* unchanged — logo stays at its current size per request */ .site-header nav { display: flex; align-items: center; /* ADDED [this session]: nav previously had a single child (the language selector) so its own layout never mattered. Now that the gift-matching info icon sits alongside it, nav needs an explicit flex row or its two
children (both block-level by default) stack vertically instead of sitting side by side. */ } .site-header nav a { color: var(--near-black); text-decoration: none; font-weight: 400; /* was #dfe6ee, meant for a dark background */ font-size: 15px; margin-left: 22px; /* was 30px, shrunk back down alongside the smaller header; logo excluded */ } .site-header nav a:hover { color: var(--bardo-gold); } /* ---- Language selector (header) ------------------------------------ ADDED [this session]: replaces the old Guides/About/Donate nav links. Built as a native
/ disclosure (no JS required). CONFIDENCE NOTE: modeled on thebardofoundation.org's own language switcher based on a successful content read (label "Language", current language shown, English/Español list) — but thebardofoundation.org was rate-limiting raw HTML/CSS fetches when this was built, so exact markup/class names/pixel values from the live site could not be verified. This is a faithful, from-scratch equivalent using this site's own brand variables, not a confirmed byte-for-byte copy. */ .lang-select { position: relative; margin-left: 22px; } .lang-select summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; color: var(--near-black); font-size: 15px; font-weight: 400; } .lang-select summary::-webkit-details-marker { display: none; } .lang-select summary:hover { color: var(--bardo-gold); } .lang-select-label { text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; color: #8b97a5; } .lang-select summary::after { content: "▾"; font-size: 10px; margin-left: 2px; color: #8b97a5; } .lang-select[open] summary::after { content: "▴"; } .lang-select-list { position: absolute; right: 0; top: calc(100% + 10px); background: var(--white); border: 1px solid var(--bardo-light-blue); border-radius: 4px; box-shadow: 0 10px 26px rgba(15,43,82,0.14); list-style: none; margin: 0; padding: 6px 0; min-width: 140px; z-index: 20; } .lang-select-list li a { display: block; padding: 8px 16px; font-size: 14px; color: var(--near-black); text-decoration: none; } .lang-select-list li a:hover { background: var(--bardo-light-blue); color: var(--bardo-blue); } .lang-select-list li a[aria-current="true"] { color: var(--bardo-gold); font-weight: 700; } /* ---- Header info icon + gift-matching tooltip (ADDED this session) ---- CHANGED [this session]: was
with the panel nested INSIDE it (relying on a click to set [open], which is what makes a
's non-summary children render at all). Adding hover-to-reveal on top of that ran into a real Chromium quirk: modern Chromium hides a closed
's children via an internal mechanism that a plain author `display` override does not fully defeat — hover would reveal the panel, but un-hovering silently failed to hide it again (verified via direct DOM/computed-style testing, not assumed). FIX: the panel now lives as a plain sibling
next to a content- free
(kept only for its native click/tap/keyboard toggle), inside one wrapping
. The panel's own visibility is 100% author-controlled opacity/visibility CSS with no competing browser behavior — hover reveals it via a normal descendant selector, and clicking pins it via a sibling selector keyed to the details' [open] state, with no fight against native
hiding left to lose. Interaction: hover opens it on devices with a real mouse (media query below); touch devices (no hover) and keyboard both still open/close it via the details' native toggle, which also PINS it open on desktop — moving the mouse away after a click does not close it, only hovering- then-leaving does (WCAG 1.4.13: hoverable + dismissible + persistent- when-clicked). CHANGED [earlier this session]: was a bare 26px icon-only circle (option A in the rendered proposal); now a labeled chip (option D) for more visual prominence — icon "dot" plus a short text label. Collapses back to icon-only under 480px (see the existing @media (max-width: 480px) block below) since the text label doesn't have room next to the language selector on narrow phone widths. */ .info-tooltip { position: relative; margin-left: 14px; } .info-tooltip summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 10px; border-radius: 20px; border: 1.5px solid var(--bardo-gold); color: var(--bardo-blue); background: #fff8ec; font-weight: 600; font-size: 13.5px; white-space: nowrap; } .info-tooltip summary::-webkit-details-marker { display: none; } .info-tooltip .dot { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; background: var(--bardo-gold); color: var(--white); font-weight: 700; font-size: 12px; font-family: Georgia, serif; } .info-tooltip details[open] summary, .info-tooltip summary:hover { background: var(--bardo-gold); color: var(--white); } .info-tooltip details[open] summary .dot, .info-tooltip summary:hover .dot { background: var(--white); color: var(--bardo-gold); } .info-tooltip-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 260px; background: var(--white); color: var(--near-black); border: 1.5px solid var(--bardo-gold); border-radius: 8px; box-shadow: 0 10px 30px rgba(15,43,82,0.18); padding: 14px 16px; font-size: 13.5px; line-height: 1.5; z-index: 30; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease; } /* Reveal on hover — only on devices with a real mouse/trackpad, so touch devices (no hover state to speak of) are unaffected and keep relying on tap-to-open via the native details toggle below. */ @media (hover: hover) and (pointer: fine) { .info-tooltip:hover .info-tooltip-panel { opacity: 1; visibility: visible; pointer-events: auto; } } /* Clicking/tapping the chip toggles the (now content-free)
next to this panel; this sibling selector mirrors that state onto the panel — the only way in on touch devices, and on desktop it pins the panel open even after the mouse leaves. */ .info-tooltip details[open] ~ .info-tooltip-panel { opacity: 1; visibility: visible; pointer-events: auto; } .info-tooltip-panel::before { content: ''; position: absolute; top: -7px; right: 9px; width: 12px; height: 12px; background: var(--white); border-left: 1.5px solid var(--bardo-gold); border-top: 1.5px solid var(--bardo-gold); transform: rotate(45deg); } .info-tooltip-panel .eyebrow { margin-bottom: 6px; } .info-tooltip-panel p:not(.eyebrow) { margin: 0; } /* FIXED [this session]: this panel physically sits inside