/* ========================================================================== Be Family Shell v1.0.0 — shared across every Be site. Two jobs: 1. The FAMILY VIEW STANDARD: one set of --be-* tokens (type scale, content width, section rhythm, control sizes) that every theme's own rules consume, so all ten sites sit at the same visual "zoom" on a desktop. 2. The MOBILE APP SHELL: a bottom tab bar, scroll-aware header, safe-area handling and touch polish, so every site behaves like one app family on a phone. Themes never edit this file. Site colours arrive as inline :root overrides printed by be-shell.php from configs/.json. ========================================================================== */ :root{ /* ---- layout ---- */ --be-max:1440px; /* the family content width. 1920 screens centre it. */ --be-max-narrow:1080px; /* long-form prose */ --be-gutter:clamp(20px,3.2vw,48px); /* 20 @phone · 46 @1440 · 48 @1500+ */ --be-sec-y:clamp(40px,3.9vw,64px); /* per side: 40 @phone · 56 @1440 · 64 @1640+ */ --be-sec-y-tight:clamp(28px,2.6vw,40px); --be-header-h:72px; /* desktop main header */ --be-header-h-m:60px; /* phone main header */ --be-bar-h:40px; /* family brand bar */ /* ---- type: solved between 380px and 1800px so the size actually moves ---- 380 1440 1800 */ --be-h1:clamp(36px,calc(26.366px + 2.5352vw),72px); /* 36 · 63 · 72 hero headline */ --be-h1-page:clamp(32px,calc(26.648px + 1.4085vw),52px); /* 32 · 47 · 52 inner page headline */ --be-h2:clamp(28px,calc(23.718px + 1.1268vw),44px); /* 28 · 40 · 44 section heading */ --be-h3:clamp(19px,calc(17.662px + .3521vw),24px); /* 19 · 23 · 24 */ --be-h3-card:clamp(17.5px,calc(16.831px + .1761vw),20px); /* 17.5 · 19.4 · 20 dense card title */ --be-lede-hero:clamp(19px,calc(17.93px + .2817vw),23px); /* 19 · 22 · 23 */ --be-lede:clamp(18px,calc(17.197px + .2113vw),21px); /* 18 · 20 · 21 */ --be-body:17.5px; --be-body-lh:1.6; /* flat: body copy does not scale */ --be-body-card:16.25px; /* denser measure inside cards */ --be-small:14px; /* captions, meta, footer links */ --be-eyebrow:13px; /* mono/uppercase labels */ --be-nav:15px; /* primary nav links */ --be-btn:15.5px; --be-btn-h:48px; --be-btn-h-m:52px; /* buttons */ --be-h1-lh:1.05; --be-h2-lh:1.12; --be-h3-lh:1.25; --be-lede-lh:1.6; /* ---- app shell ---- */ --be-tab-h:64px; --be-safe-b:env(safe-area-inset-bottom,0px); --be-tab-bp:900px; /* tab bar shows below this (see media queries) */ /* ---- colours: overridden per site by be-shell.php ---- */ --be-accent:#1E63B8; /* active tab, hero tab background */ --be-accent-ink:#FFFFFF; /* icon on the hero tab */ --be-tab-bg:rgba(255,255,255,.88); --be-tab-ink:#12203A; --be-tab-mute:#5D6E86; --be-tab-hair:rgba(18,32,58,.12); --be-tab-shadow:0 -8px 30px -18px rgba(18,32,58,.35); } @media (max-width:640px){ :root{ --be-body:17px; } } /* ========================================================================== Touch polish — every site, every width ========================================================================== */ html{ -webkit-text-size-adjust:100%; } a,button,[role="button"],summary{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .be-hidden{ display:none !important; } /* Scroll-aware header: be-shell.js toggles .be-scrolled on the configured header once the page has moved. A hairline plus a soft drop reads as "this bar is floating over content", which is what native apps do. */ .be-scrolled{ box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 30px -18px rgba(0,0,0,.28); } /* ========================================================================== Bottom tab bar ========================================================================== */ .be-tabbar{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:940; margin:0; border-bottom:0; width:auto; max-width:none; min-height:0; /* themes style bare