/* ============================================================================ * mobile-base.css — shared MOBILE LAYOUT STANDARD for all generated sites * ============================================================================ * * Every site the builder generates links to THIS one file (from its ). * That means the global phone-view standard lives in a single place: edit this * file, push it, and every live site picks up the change within a few minutes — * no per-site regeneration or redeploy required. * * WHAT BELONGS HERE * Only rules that should be IDENTICAL across every site — the global mobile * standard (e.g. how much headings shrink and spacing tightens on phones). * Per-site things (colours, fonts, content, per-site overrides) stay baked * into each site's own HTML, NOT here. * * HOW IT WORKS * Rules go inside the @media block below so they only affect phones; the * desktop view is never touched. Because the sites set many sizes as inline * styles, rules here will generally need `!important` to take effect. * * FAILURE MODE * If this file ever fails to load, sites simply fall back to their baked-in * styles — i.e. exactly how they look today. Nothing breaks. * * version: 2026-07-06-fluid * ========================================================================== */ @media (max-width: 600px) { /* --- Space between stacked cards --------------------------------------- * Some card layouts place an invisible spacer element BETWEEN cards to set * the horizontal gap on desktop. When the cards stack on a phone, that * spacer collapses to nothing and the cards end up touching. So: drop the * empty spacers when stacked, and apply a clean vertical gap instead. */ .pg-cards { gap: 1rem !important; } .pg-cards > div:empty { display: none !important; } /* --- Text sizing is now FLUID ----------------------------------------- * Font sizes are emitted as clamp() in each site's HTML, so all text * (hero name/title/sub, section headings, section & card text) auto-shrinks * on phone widths and is full-size on desktop. No fixed size caps needed * here any more — only structural spacing + a little line-height tightening. */ /* Section vertical rhythm: trim padding a touch now everything is stacked. */ section { padding-top: 1rem !important; padding-bottom: 1.1rem !important; } /* Tighten heading line-height on phones (sizing is handled by the clamp()). */ section h2 { line-height: 1.25 !important; margin-bottom: .5rem !important; } .t-name { line-height: 1.2 !important; } }