/* --------------------------------------------------------------------------- Shared public-site chrome: language toggle + host variants. Loaded by every page in HoldingPage/src, which is the ONE source deployed to both mifamilias.com (Cloudflare Pages) and www.ph.mifamilias.com (Amplify). --------------------------------------------------------------------------- */ /* --- Host variants -------------------------------------------------------- The same artifact is deployed to both hosts; what differs is framing. The corporate site raises investment, the PH pilot recruits families. Elements opt in to one audience with data-only="corporate|pilot". These rules must be able to hide before first paint, which is why the variant is stamped onto by an inline head script rather than by js/site.js - a deferred script would let the wrong audience's content flash. -------------------------------------------------------------------------- */ [data-variant="corporate"] [data-only="pilot"], [data-variant="pilot"] [data-only="corporate"] { display: none !important; } /* --- Language toggle ------------------------------------------------------ Sits in the nav bar and stays visible when the links collapse to the burger: changing language is a global control, not a navigation item, so burying it in a closed menu would hide it from exactly the readers who need it. -------------------------------------------------------------------------- */ /* The nav distributes its children with space-between. Giving the toggle margin-left:auto would swallow all the free space and pack the logo against the links, so it takes part in the normal distribution instead. */ .nav-container { gap: 1rem; } /* Tagalog CTAs ("Sumali sa Pilot") are long enough to wrap the pill onto two lines at desktop widths. */ .nav-cta { white-space: nowrap; } .lang-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border-color, rgba(180, 255, 57, 0.15)); border-radius: 100px; background: rgba(255, 255, 255, 0.03); flex: 0 0 auto; } .lang-btn { appearance: none; border: none; background: none; cursor: pointer; padding: 0.32rem 0.72rem; border-radius: 100px; font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1; color: var(--text-muted, rgba(255, 255, 255, 0.4)); transition: color 0.2s, background 0.2s; } .lang-btn:hover { color: var(--acid-green, #b4ff39); } .lang-btn.is-active { background: var(--acid-green, #b4ff39); color: var(--bg-dark, #000); } .lang-btn:focus-visible { outline: 2px solid var(--acid-green, #b4ff39); outline-offset: 2px; } /* The nav uses space-between; margin-left:auto on the toggle would fight the burger button for the same slack. Once the links collapse, pin the toggle next to the burger instead. */ /* Once the links collapse to the burger the nav is just logo | toggle | burger, so push the toggle over to sit beside the burger. */ @media (max-width: 1120px) { .lang-toggle { margin-left: auto; } } /* At the narrowest phones the bar carries logo + toggle + burger. Measured at roughly 350px of content, which overflows a 320px screen, so claw back the horizontal padding and tighten the wordmark rather than let the nav scroll. */ @media (max-width: 420px) { .lang-btn { padding: 0.3rem 0.55rem; font-size: 0.72rem; } .nav-container { padding-left: 1rem; padding-right: 1rem; gap: 0.5rem; } .nav-logo span { font-size: 0.95rem; letter-spacing: 0.1em; } } /* privacy.html predates the shared chrome and its header is a plain block, so the toggle would stack under the back link. */ header.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* --- Tagalog-only notice -------------------------------------------------- The long-form articles and the privacy policy stay in English. A reader who chose Tagalog and then hits a wall of English deserves to be told why, so these notes carry their Tagalog wording in the markup and surface only when Tagalog is active - they are never shown to an English reader. -------------------------------------------------------------------------- */ .tl-note { display: none; } [data-lang="tl"] .tl-note { display: block; margin: 0 0 1.6rem; padding: 0.7rem 1rem; border-left: 3px solid var(--acid-green, #b4ff39); background: rgba(180, 255, 57, 0.06); border-radius: 0 8px 8px 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary, rgba(255, 255, 255, 0.75)); } /* Tagalog renders longer than English almost everywhere - roughly 15-25% more characters for the same sentence. Headline sizes are tuned to the English copy, so give the translated page slightly tighter display type rather than let two-word headlines wrap into four lines. */ [data-lang="tl"] .hero h1 { font-size: clamp(2.1rem, 5.4vw, 4.1rem); } [data-lang="tl"] .nav-links { gap: 1.05rem; } [data-lang="tl"] .nav-links a, [data-lang="tl"] .nav-cta { font-size: 0.85rem; }