wrappers */ /* Normalize embed output just in case */ #ws-news-list .list-group-item { padding:.6rem 1rem; } #ws-news-list a.list-group-item:hover { text-decoration: underline; } /* --- Normalize News card header to match .card-title.h4 --- */ #home-news-title.card-header { font-size: clamp(1.125rem, 1.2vw + .5rem, 1.5rem); font-weight: 600; line-height: 1.3; padding-top: .75rem; padding-bottom: .75rem; border-bottom: 0; padding-top: 32px; padding-bottom: 32px; padding-left: 32px; padding-right: 32px; background-color: #fff !important; border-bottom: 0 !important; } /* About page: heading + images centered */ .about-title { text-align: center !important; margin: 2rem auto 1rem !important; color: #13294B !important; font-size: 2.25rem !important; /* ≈36px */ line-height: 1.2 !important; font-weight: 700 !important; display: block !important; } .about-content { text-align: center !important; /* fallback centering for inline content */ } .about-content img { display: block !important; margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; height: auto !important; float: none !important; } .about-img { margin-bottom: 2rem !important; } .separator { margin: 2rem auto !important; } /* About page content block (replaces the inline style) */ .about-body { /* readable line length + centered */ max-width: min(90ch, 80%); margin: 0 auto 2rem; /* fluid type that scales sensibly from mobile → desktop */ font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem); line-height: 1.6; /* responsive side padding */ padding-left: clamp(1rem, 4vw, 5rem); padding-right: clamp(1rem, 4vw, 5rem); } /* Keep the visible page title responsive too */ .about-title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem) !important; /* ~24 → 36px */ line-height: 1.2 !important; margin: 2rem auto 1rem !important; text-align: left !important; color: #13294B !important; font-weight: 700 !important; } /* Optional: tighten on very small screens */ @media (max-width: 430px) { .about-body { line-height: 1.55; } } /* Optional: a bit roomier on desktops */ @media (min-width: 992px) { .about-body { line-height: 1.65; } } /* --- Larger viewport adjustments --- */ @media (min-width: 1200px) { .about-body { max-width: 75ch; /* was 65ch; now allows about 10 extra characters per line */ padding-left: clamp(2rem, 6vw, 6rem); padding-right: clamp(2rem, 6vw, 6rem); } } /* On true widescreens (≈1600px and up), allow even more breathing room */ @media (min-width: 1600px) { .about-body { max-width: 85ch; } } /* Remove extra outer constraints on wide viewports */ @media (min-width: 1400px) { #MainContent, #ContentBand .content, .about-content, .about-body { max-width: 1600px !important; } } /* Strategic Comms — scope Bootstrap's "white" to gray for the menubar */ nav.navbar.navbar-expand-lg.bg-white.border-bottom { /* 1) Override the Bootstrap token this utility uses */ --bs-white-rgb: 232, 233, 235 !important; /* #e8e9eb */ --bs-bg-opacity: 1 !important; /* 2) Override the computed background directly */ background-color: #e8e9eb !important; background: #e8e9eb !important; /* nuke any background shorthand */ /* 3) Keep the border you verified */ border-bottom-color: rgba(0,0,0,.08) !important; } #WebStoreBanner .ws-banner-container { /* Tiny horizontal nudge if needed */ padding-left: 1.75rem; /* was px-3 ≈ 1rem */ padding-right: 1.75rem; } @media (min-width: 930px) { #WebStoreBanner .ws-banner-container { padding-left: 4rem; padding-right: 4rem; } } .ws-banner-title-group { display: flex; flex-direction: row; align-items: baseline; /* keeps text lined up nicely */ gap: 0.75rem; /* spacing between “WebStore” and tagline */ flex-wrap: wrap; /* allows wrapping on small screens */ flex: 1 1 auto; } .ws-banner-tagline { font-size: 1rem; opacity: 0.85; /* optional—softens it slightly */ white-space: normal; /* ensure normal wrapping */ } .ws-banner-title { font-size: 1.75rem; /*or use your existing WebStore heading size */ font-weight: 700; } .ws-banner-tagline { font-size: 0.95rem; font-weight: 400; } .ws-banner-title a { color: inherit; text-decoration: none; } .ws-banner-title a:hover { text-decoration: underline; } .ws-nav { display: flex; justify-content: center; gap: 1.25rem; padding: 0.5rem 0; } .ws-nav { list-style: none; margin: 0; padding-left: 0; } /* Hide auto-inserted About Cookies button from ilw-footer */ ilw-footer [slot="cookies-button"] { display: none !important; } /* Keep the long Menu 1 heading on a single line on larger screens */ @media (min-width: 992px) { ilw-footer h2.footer-menu-heading-long { white-space: nowrap !important; } } /* Align Home nav directly under the 'WebStore' brand text */ #MenubarRegion .navbar { padding-left: 6.5rem !important; } /* Hide WebStore grey navbar on mobile; use Stratcom header menu instead */ @media (max-width: 991.98px) { #MenubarRegion { display: none !important; } } /* Remove the old grey navbar on Home (all breakpoints) */ #MenubarRegion { display: none !important; } /* Make the search controls actually line up and be visible */ .ws-header-search { display: inline-flex; align-items: stretch; gap: 0; /* ILW already handles the join between input + button */ } /* Give both input and button a definite height so they can't collapse */ .ws-header-search input[type="search"], .ws-header-search button { height: 2.25rem; } /* Optional: keep the input from stretching too wide */ .ws-header-search input[type="search"] { max-width: 16rem; } /* --- WebStore brand title sizing (Home + Shop) --- */ :root { /* Mobile-first size */ --ws-brand-size: clamp(1.9rem, 6vw, 2.4rem); } @media (min-width: 992px) { /* Desktop bump */ :root { --ws-brand-size: clamp(2.2rem, 2.2vw, 3.0rem); } } /* Apply to BOTH possible brand elements */ .ws-banner-title, .ws-logo, .ws-banner .navbar-brand { font-size: var(--ws-brand-size) !important; line-height: .7; /* reduces the “air” under WebStore */ margin-bottom: 0; /* kill default heading spacing if any */ } /* Optional: tighten the brand row padding if it’s contributing */ .ws-banner .navbar-brand { padding-top: 0; padding-bottom: 0; } /* WebStore brand title: always Montserrat, regardless of legacy inheritance */ .ws-banner-title, .ws-logo, .ws-banner .navbar-brand { font-family: "Montserrat", var(--ws-font-sans), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; font-weight: 600; letter-spacing: .1px; } /* Match Shop banner height: equivalent of Bootstrap py-3 */ .ws-banner .container, .ws-banner .container-fluid { padding-top: 1rem !important; padding-bottom: 1rem !important; } /* Shared shop button styling */ .ws-shop-btn{ position: relative; outline: none; } /* Outer orange ring */ .ws-shop-btn::after{ content: ""; position: absolute; inset: -4px; /* distance from button edge */ border: 2px solid var(--il-orange, #E84A27); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .15s ease; } /* Show outer ring on hover and keyboard focus */ .ws-shop-btn:hover::after, .ws-shop-btn:focus-visible::after{ opacity: 1; } .ws-shop-btn:hover{ background-color: rgba(255,255,255,.08); } /* Prevent visited orange on StratCom header site name */ a[slot="site-name"]:visited{ color: #13294B !important; } /* --------------------------- About page – readable typography & spacing Put this near the end of your overrides file (keeps it last in