/* ========================================================================== GlutathioneTherapy.com — MASTER site.css (Fully Optimised) Locked palette v1 + premium mobile-first layout polish - Single source of truth for header/nav/logo/mobile + shared spacing - Works across all pages - Home-only tweaks via: ========================================================================== */ /* ----------------------------- Design Tokens (LOCKED) ------------------------------ */ :root{ --authority:#0B2A4A; /* Primary Authority Blue */ --brand:#1E5FA8; /* Brand Science Blue */ --bg:#FFFFFF; /* Background White */ --soft:#F4F7FB; /* Soft Grey Background */ --text:#2A2A2A; /* Text Grey */ --accent:#2FA86F; /* Accent Biological Green */ --radius:18px; --shadow:0 18px 60px rgba(11,42,74,.12); --shadow-soft:0 12px 34px rgba(11,42,74,.08); --line:rgba(11,42,74,.10); --max:1140px; /* Header sizing */ --header-minh:64px; /* sticky header baseline */ --logo-desktop:192px; /* LOCKED desktop logo size */ --logo-mobile:256px; /* LOCKED mobile logo size */ } /* ----------------------------- Global Resets / Base ------------------------------ */ *{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } html,body{height:100%} body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.55; overflow-x:hidden; /* guard against accidental horizontal scroll */ } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} /* Tap targets */ a, button, input, select, textarea{ touch-action:manipulation; } /* Container */ .container{ max-width:var(--max); margin:0 auto; padding:0 20px; } /* Slightly tighter container on mobile */ @media (max-width: 640px){ .container{ padding-left:18px !important; padding-right:18px !important; } } /* ----------------------------- Typography helpers ------------------------------ */ h1{ font-size:clamp(28px, 6.2vw, 40px); letter-spacing:-.6px; } .lead{ font-size:clamp(15px, 3.9vw, 17px); } /* ----------------------------- Shared layout spacing ------------------------------ */ .hero{ padding:44px 0 26px; } .section{ padding:36px 0; } .card{ box-shadow:var(--shadow-soft); } @media (max-width: 980px){ .hero{ padding:34px 0 22px !important; } .section{ padding:28px 0 !important; } } /* ----------------------------- Buttons (shared) ------------------------------ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:700; border:1px solid transparent; cursor:pointer; user-select:none; white-space:nowrap; transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--brand); color:#fff; box-shadow:0 14px 28px rgba(30,95,168,.22); } .btn-primary:hover{ box-shadow:0 18px 36px rgba(30,95,168,.26); } .btn-ghost{ background:transparent; border-color:var(--line); color:var(--authority); } .btn-ghost:hover{ background:var(--soft); } /* Mobile: full-width buttons by default inside CTA rows (prevents half buttons) */ @media (max-width: 640px){ .btn{ min-height:44px; width:100%; } } /* ----------------------------- Grid helpers (safe overrides) ------------------------------ */ @media (max-width: 980px){ .heroGrid, .grid2, .grid3, .teamGrid, .grid{ grid-template-columns:1fr !important; } } /* ========================================================================== HEADER / NAV (GLOBAL) - Desktop: logo left, links center, CTA right - Mobile: logo centered, mobileNav pills, then CTA buttons (two-up) ========================================================================== */ .header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } /* Default desktop display */ .navlinks{ display:flex; } .mobileNav{ display:none; } /* NAV container */ .nav{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-minh); padding:6px 0; gap:12px; } /* BRAND container */ .brand{ display:flex; align-items:center; justify-content:center; padding:0; margin:0; line-height:0; /* remove invisible line box space */ } /* Ensure logo cannot add whitespace */ .brand-logo{ display:block; margin:0; padding:0; height:auto; object-fit:contain; width:144px; /* base fallback */ } /* Desktop logo sizing (LOCKED) */ @media (min-width: 981px){ .brand-logo{ width:var(--logo-desktop); } /* tighter nav spacing so it fits */ .navlinks{ gap:10px !important; } .navlinks a{ padding:5px 6px !important; font-size:13px !important; font-weight:700; border-radius:10px; white-space:nowrap; } .navlinks a:hover{ background:var(--soft); } } /* CTA container */ .navcta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ========================================================================== MOBILE HEADER (<= 980px) ========================================================================== */ @media (max-width: 980px){ .nav{ flex-direction:column; align-items:center; justify-content:center; padding:0 !important; margin:0 !important; gap:8px !important; min-height:auto; } .brand{ width:100% !important; display:flex; justify-content:center; align-items:center; margin:0 !important; padding:0 !important; line-height:0 !important; } .brand-logo{ width:var(--logo-mobile) !important; /* LOCKED */ height:auto !important; display:block; margin:0; padding:0; } .navlinks{ display:none !important; } /* Mobile quick nav pills */ .mobileNav{ display:flex !important; width:100%; gap:10px; flex-wrap:wrap; padding-top:6px !important; margin-top:0 !important; } .mobileNav a{ flex:1 1 calc(50% - 10px); /* ensures 2 columns */ text-align:center; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(244,247,251,.70); font-weight:800; color:rgba(11,42,74,.86); } /* CTA buttons row */ .navcta{ width:100%; display:flex !important; gap:10px !important; flex-wrap:nowrap; margin-top:2px; /* small separation from pills */ } .navcta a.btn{ width:50%; min-height:44px; } /* Home page: allow full-width CTA buttons if desired (optional) */ body.is-home .navcta{ flex-wrap:wrap; } body.is-home .navcta a.btn{ width:100%; } } /* ========================================================================== HOME-ONLY HEADER TWEAKS Activate via: - Adds a clean gap between mobileNav and CTA buttons ========================================================================== */ @media (max-width: 980px){ body.is-home .mobileNav{ margin-bottom:6px; /* the “nice little gap” you asked for */ } body.is-home .navcta{ margin-top:4px; margin-bottom:10px; /* extra breathing room before page content */ } } /* ========================================================================== FORMS (mobile typing safety) ========================================================================== */ @media (max-width: 980px){ .formGrid{ grid-template-columns:1fr !important; } input, select, textarea{ font-size:16px !important; } } /* ========================================================================== FOOTER (GLOBAL) — polish + mobile tidy ========================================================================== */ footer{ background:var(--authority); color:rgba(255,255,255,.90); padding:34px 0; } .footgrid{ display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:18px; align-items:start; } /* Prevent footer brand/logo from creating unwanted vertical space */ .footbrand{ display:flex; align-items:center; gap:12px; font-weight:800; margin-bottom:10px; } /* Links */ .foot p{ margin:0; color:rgba(255,255,255,.72); font-size:13px; } .foot h4{ margin:0 0 10px; font-size:14px; } .foot a{ display:block; padding:6px 0; color:rgba(255,255,255,.78); font-weight:600; font-size:13px; } .foot a:hover{ color:#fff; } .fine{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.62); font-size:12px; display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; } /* MOBILE FOOTER */ @media (max-width: 980px){ .footgrid{ grid-template-columns:1fr !important; } footer{ padding:18px 0 !important; } .footbrand{ margin-bottom:10px !important; padding:0 !important; line-height:0 !important; align-items:center !important; } /* keep footer logo visible and sized properly (DO NOT set height:0) */ .footbrand .brand-logo{ display:block !important; height:auto !important; width:160px !important; margin:0 !important; padding:0 !important; } /* extra breathing room under any footer buttons/links cluster */ .fine{ padding-top:16px !important; margin-top:20px !important; } } /* ========================================================================== SMALL TWEAKS (global) ========================================================================== */ .note{ border-radius:16px !important; } .tags, .meta, .row{ gap:8px !important; } /* ========================= MOBILE HEADER + CTA STABILISER (DROP-IN) Paste at END of site.css ========================= */ /* 1) Make header layout robust across pages (even if markup differs slightly) */ .header .nav{ height:auto; } /* Ensure header children stack cleanly on mobile */ @media (max-width: 980px){ /* Brand row */ .header .brand{ width:100%; display:flex; justify-content:center; align-items:center; margin:0; padding:0; line-height:0; } /* Logo image hygiene */ .header .brand-logo{ display:block; margin:0; padding:0; height:auto; object-fit:contain; } /* Mobile quick links */ .header .mobileNav{ width:100%; display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; /* breathing room under logo */ padding-top:0; } /* Make mobile nav pills consistently sized */ .header .mobileNav a{ flex:1 1 calc(50% - 10px); min-width:140px; } /* 2) FIX: Put the CTA buttons (Explore / Join) below the mobileNav with a clean gap */ .header .navcta{ width:100%; display:flex; gap:10px; margin-top:10px; /* the “nice little gap” you asked for */ padding-top:0; } /* If two buttons: 50/50 */ .header .navcta .btn{ flex:1 1 0; width:auto; } /* If only one CTA exists on some pages, keep it full-width */ .header .navcta .btn:only-child{ width:100%; } } /* 3) CONTENT BUTTONS: full-width on mobile everywhere (Apply / Contact / etc.) */ @media (max-width: 640px){ .btn{ width:100%; justify-content:center; } /* Some pages may use button-like anchors without .btn */ .actions a, .ctaActions a{ width:100%; } } /* 4) Footer spacing tidy-up (links not sitting on the divider line) */ footer .fine{ padding-top:16px; margin-top:20px; line-height:1.5; } footer .fine a{ padding:8px 0; /* bigger tap target + visual breathing room */ display:inline-block; }