/* ════════════════════════════════════════════════════════════════ HOME / MARKETING SITE — palette, typography & layout overrides Loaded only on public marketing pages (noSchool, homeFeatures, homeBlog, homeAboutUs). Re-points the shared design-token variables from css/main.css to the AthenaStar marketing palette. ════════════════════════════════════════════════════════════════ */ /* ── Colour palette (strict) ──────────────────────────────────── */ :root { --navy: #1e4d92; /* Primary Dark (GIS-style navy blue) */ --navy-2: #173b70; --navy-3: #122d57; --navy-4: #2a5aa8; --navy-5: #3568bb; --navy-6: #4a82d4; --gold: #c9940a; /* Primary Vibrant (GIS-style gold) */ --gold-lt: #e0ad2e; --gold-dim: rgba(201,148,10,0.10); --gold-glow: rgba(201,148,10,0.28); --page-bg: #F0F0FC; /* Background Soft */ --surface: #FFFFFF; /* Card Background */ --surface-2: #F0F0FC; --surface-3: #E8E8F8; --txt: #1A1A2E; /* Text Dark */ --txt-2: #1A1A2E; --txt-muted: #4A4A6A; /* Text Muted */ --chr-txt: #FFFFFF; /* Text Light (on dark/vibrant bg) */ --chr-2: #EAF1FC; --border: #E2E2F0; /* Border / Divider */ --border-strong: #CFCBEC; --shadow-sm: 0 1px 4px rgba(30,77,146,0.06); --shadow: 0 4px 12px rgba(30,77,146,0.06); --shadow-lg: 0 8px 24px rgba(30,77,146,0.10); --radius: 6px; --radius-lg: 14px; } /* ── Page background, on too — not just ────────── Every public template sets `body.home { background: var(--page-bg) }` inline, but was never covered, so it kept the browser's default white. That white showed through as a line/flash under the fixed navy topnav: on overscroll/rubber-band bounce past the top (trackpads, and momentum-scroll on some browsers) the area revealed is 's own background, not 's — and on a hard refresh there's a brief instant before layout settles where the same gap is visible. Setting it here, once, for every public page (this stylesheet is shared by all of them), fixes it at every viewport width from 260px up — this is not a per-page layout quirk, it's the root element's background. ── */ html { background: var(--page-bg); } /* ── Base typography ──────────────────────────────────────────── */ /* Contrast verified - #1A1A2E on #F0F0FC = 14.9:1 (AAA) */ body.home { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--txt); line-height: 1.6; background: var(--page-bg); /* base font-size is set fluidly by the "Fluid typography" rule further down (clamp()) */ } /* Contrast verified - #1e4d92 on #F0F0FC = ~7.45:1 / on #FFFFFF = ~7.9:1 (AAA) */ body.home h1, body.home h2, body.home h3 { color: var(--navy); font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; } /* Sizes are set once, fluidly, by the "Fluid typography" rules further down this file (clamp()-based) — not repeated here as fixed px. */ /* Headings on dark (navy/vibrant) backgrounds need light text — without this they would inherit navy-on-navy (invisible) from the rule above */ /* Contrast verified - #FFFFFF on #1e4d92 = ~7.9:1 (AAA) */ body.home .hero h1, body.home .hero h2, body.home .cta-band h1, body.home .cta-band h2, body.home .cta-band h3, body.home .page-hero h1, body.home .post-hero h1, body.home .demo-copy h2 { color: #fff; } body.home small, body.home .meta, body.home .footer-bottom { font-size: clamp(12.5px, .9vw, 14px); } body.home i, body.home em { font-style: normal; } body.home .testimonial-card p.quote { font-style: italic; } /* ── Focus visibility (accessibility) ─────────────────────────── */ /* Contrast verified - #c9940a 3px outline is clearly visible on light and dark backgrounds */ body.home a:focus-visible, body.home button:focus-visible, body.home input:focus-visible, body.home textarea:focus-visible, body.home select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* ── Skip to content link ──────────────────────────────────────── */ body.home .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 20px; font-weight: 700; z-index: 1000; border-radius: 0 0 var(--radius) 0; } body.home .skip-link:focus { left: 0; } /* ════════════════════════════════════════════════════════════════ NAVIGATION — wrapper, announcement strip, sticky header, drawer Both bars live in .home-fixed so body padding = one offsetHeight query. ════════════════════════════════════════════════════════════════ */ /* ── Single fixed wrapper containing both bars ───────────────── */ body.home .home-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 200; } /* ── Announcement strip ──────────────────────────────────────── */ body.home .home-announce { background: linear-gradient(90deg, var(--navy-3) 0%, var(--navy) 100%); border-bottom: 1.5px solid rgba(201,148,10,.6); color: #fff; text-align: center; padding: clamp(6px,1.2vw,9px) clamp(12px,3vw,20px); font-size: clamp(11px,1.3vw,13px); font-weight: 600; line-height: 1.4; } body.home .home-announce .home-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } body.home .home-announce .announce-tag { flex-shrink: 0; font-size: clamp(9px, .8vw, 11px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: var(--gold); color: var(--navy); padding: 2px 10px; border-radius: 999px; } body.home .home-announce .announce-text { flex: 1 1 auto; } /* ── Header bar ─────────────────────────────────────────────── */ body.home .home-top { /* NOT position:fixed — sits inside the fixed wrapper */ background: var(--navy); /* exactly matches .page-hero background */ transition: background .25s ease, box-shadow .25s ease; } body.home .home-top.is-scrolled { background: var(--navy-2); box-shadow: 0 4px 24px rgba(0,0,0,.35); /* Golden bottom border — matches brand accent, visible against navy-2 */ border-bottom: 2.5px solid var(--gold); /* Subtle inner top glow so the border feels embedded, not floating */ box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 -1px 0 rgba(255,255,255,.04) inset; } body.home .home-top-inner { display: flex; align-items: center; justify-content: space-between; height: clamp(58px, 8vw, 72px); gap: 16px; } /* ── Logo ──────────────────────────────────────────────────── */ body.home .home-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; min-width: 0; } body.home .home-logo-img { width: clamp(28px,4vw,36px); height: clamp(28px,4vw,36px); border-radius: 8px; object-fit: cover; flex-shrink: 0; } body.home .home-logo-mark { width: clamp(28px,4vw,36px); height: clamp(28px,4vw,36px); border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 100%); box-shadow: 0 3px 10px rgba(201,148,10,.4); display: flex; align-items: center; justify-content: center; font-size: clamp(15px,2.5vw,18px); color: var(--navy); font-weight: 900; } body.home .home-logo-name { font-size: clamp(13px, 3.5vw, 18px); font-weight: 800; color: #fff; letter-spacing: .01em; /* No overflow clipping — the name must always show in full */ white-space: nowrap; min-width: 0; } /* ── Desktop nav links ─────────────────────────────────────── */ body.home .home-nav-desktop { display: flex; align-items: center; gap: clamp(4px,1.5vw,28px); flex: 1; justify-content: center; } body.home .home-nav-link { font-size: clamp(12px,1.2vw,14px); font-weight: 600; color: rgba(255,255,255,.82); text-decoration: none; padding: clamp(5px,.6vw,7px) clamp(8px,1vw,11px); border-radius: 6px; transition: color .15s, background .15s; white-space: nowrap; } body.home .home-nav-link:hover, body.home .home-nav-link[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); } /* ── Right action cluster ──────────────────────────────────── */ body.home .home-nav-actions { display: flex; align-items: center; gap: clamp(6px, 1.5vw, 10px); flex-shrink: 0; } body.home .home-cta-btn { display: inline-flex; align-items: center; justify-content: center; height: clamp(34px, 5.5vw, 42px); padding: 0 clamp(10px, 2.5vw, 20px); border-radius: 8px; font-size: clamp(11px, 2.5vw, 14px); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, box-shadow .18s; } body.home .home-cta-primary { background: var(--gold); color: #fff; box-shadow: 0 2px 8px rgba(201,148,10,.35); } body.home .home-cta-primary:hover { background: var(--gold-lt); box-shadow: 0 4px 14px rgba(201,148,10,.45); } body.home .home-cta-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); } body.home .home-cta-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; } /* ── Hamburger button ──────────────────────────────────────── */ body.home .home-burger { display: none; /* shown via media query below */ /* Floor stays at the WCAG 44px touch-target minimum — only the growth above that minimum is vw-driven. */ width: clamp(44px, 4vw, 48px); height: clamp(44px, 4vw, 48px); border-radius: 8px; padding: 0; background: transparent; border: 1.5px solid rgba(255,255,255,.35); flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, .5vw, 5px); cursor: pointer; transition: background .15s, border-color .15s; } body.home .home-burger:hover { background: rgba(255,255,255,.1); border-color: #fff; } body.home .burger-bar { display: block; width: clamp(18px, 2vw, 21px); height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } /* ── Mobile break point — tablets + phones ─────────────────── */ @media (max-width: 860px) { body.home .home-nav-desktop { display: none; } /* Nav links move into drawer */ body.home .home-desktop-only { display: none; } /* "Get Started" hides from header */ body.home .home-burger { display: flex; } } /* ── Backdrop ──────────────────────────────────────────────── */ body.home .home-drawer-backdrop { display: none; /* toggled by JS */ position: fixed; inset: 0; z-index: 299; background: rgba(8,16,32,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; } body.home .home-drawer-backdrop.open { display: block; opacity: 1; } /* ── Side drawer ───────────────────────────────────────────── */ body.home .home-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 300; width: min(320px, 88vw); background: linear-gradient(175deg, var(--navy-3) 0%, var(--navy) 100%); box-shadow: -8px 0 40px rgba(0,0,0,.35); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); overflow-y: auto; } body.home .home-drawer.open { transform: translateX(0); } /* Prevent body scroll while drawer is open */ body.drawer-open { overflow: hidden; } body.home .home-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: clamp(16px,4vw,20px) clamp(16px,4vw,20px) clamp(14px,3.5vw,18px); border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0; } body.home .home-drawer-close { width: clamp(38px,9vw,42px); height: clamp(38px,9vw,42px); border-radius: 8px; font-size: clamp(15px,3.5vw,17px); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; } body.home .home-drawer-close:hover { background: rgba(255,255,255,.2); } body.home .home-drawer-links { flex: 1; display: flex; flex-direction: column; padding: clamp(10px,3vw,12px) clamp(14px,3.5vw,16px); gap: 2px; overflow-y: auto; } body.home .drawer-link { display: flex; align-items: center; padding: clamp(11px,3vw,13px) clamp(14px,3.5vw,16px); font-size: clamp(14px,4vw,16px); font-weight: 600; color: rgba(255,255,255,.85); text-decoration: none; border-radius: 10px; transition: background .15s, color .15s; } body.home .drawer-link:hover { background: rgba(255,255,255,.1); color: #fff; } body.home .drawer-link.active { background: rgba(255,255,255,.15); color: #fff; } body.home .home-drawer-ctas { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(14px,3.5vw,16px) clamp(16px,4vw,20px) clamp(22px,6vw,28px); border-top: 1px solid rgba(255,255,255,.1); } body.home .home-drawer-cta-primary { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 10px; background: var(--gold); color: #fff; font-size: clamp(14px, 3.5vw, 15px); font-weight: 800; text-decoration: none; box-shadow: 0 4px 14px rgba(201,148,10,.4); transition: background .18s, box-shadow .18s; } body.home .home-drawer-cta-primary:hover { background: var(--gold-lt); } body.home .home-drawer-cta-ghost { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.35); color: #fff; font-size: clamp(14px, 3.5vw, 15px); font-weight: 700; text-decoration: none; transition: background .18s, border-color .18s; } body.home .home-drawer-cta-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; } /* ── Touch targets (global) ────────────────────────────────── */ body.home .btn-lg, body.home .home-cta-btn, body.home .drawer-link { min-height: 44px; } /* ── Section rhythm ──────────────────────────────────────── */ body.home .section { padding: clamp(1rem,6vw,1.5rem) 0; } /* ── Fluid typography — body & headings ──────────────────── */ body.home { font-size: clamp(14px, 1vw, 19px); } body.home h1 { font-size: clamp(26px, 3.6vw, 68px); } body.home h2 { font-size: clamp(22px, 2.4vw, 48px); } body.home h3 { font-size: clamp(17px, 1.6vw, 28px); } body.home p { font-size: clamp(15px, 1vw, 20px); } /* ── Font weight — bumped for readability at every screen size, public site only. Body copy default (400) reads thin at the small end of our fluid clamp()s, especially in long-form blog content; headings go one step bolder than the plain-bold UA default for clearer hierarchy. ── */ body.home h1, body.home h2, body.home h3, body.home h4, body.home h5, body.home h6 { font-weight: 800; } body.home p, body.home li { font-weight: 500; } /* Body top padding is set exclusively by JS (home-animations.js → setBodyOffset) so it always equals the exact rendered height of .home-fixed (header + optional announcement bar). No CSS fallback is needed — JS runs synchronously on load and on every resize, and re-fires on window.load for font/image reflows. */ /* ── Narrow phones (≤480px) ─────────────────────────────── */ @media (max-width: 480px) { body.home .home-wrap { padding-left: 14px !important; padding-right: 14px !important; } /* On tablets/phones, hide "Get Started" — Login + burger is enough */ body.home .home-desktop-only { display: none; } } /* ── Very small phones (≤360px) — keep name readable, shrink burger ── */ @media (max-width: 360px) { body.home .home-wrap { padding-left: 10px !important; padding-right: 10px !important; } body.home .home-logo-mark { width: clamp(24px,8vw,26px); height: clamp(24px,8vw,26px); font-size: clamp(13px,4.5vw,14px); } body.home .home-logo-name { font-size: clamp(11px,4vw,12px); } body.home .home-burger { width: clamp(34px,10vw,36px); height: clamp(34px,10vw,36px); } body.home .burger-bar { width: clamp(15px,4.5vw,16px); } body.home .home-cta-btn.home-login-btn { height: clamp(30px,9vw,32px); font-size: clamp(10px,3vw,11px); padding: 0 clamp(8px,3vw,10px); } } /* ── Extremely small (≤320px) — drop Login button, keep name clean ── */ @media (max-width: 320px) { body.home .home-login-btn { display: none; } body.home .home-logo-name { font-size: 13px; } } /* ── Section tags (small uppercase labels) ────────────────────── */ /* #c9940a on white/#F0F0FC is ~2.7:1, well below the 7:1 AAA body-text floor — use navy for tags on light backgrounds */ /* Contrast verified - #1e4d92 on #F0F0FC/#FFFFFF = ~7.45:1/~7.9:1 (AAA) */ body.home .section-tag { color: var(--navy); } /* Section tags inside dark panels (demo block, cta band) need light text */ /* Contrast verified - #FFFFFF on #1e4d92 = ~7.9:1 (AAA) */ body.home .demo-copy .section-tag, body.home .cta-band .section-tag { color: #fff; } /* No all-caps body/label text per spec */ body.home .section-tag, body.home .hero-kicker, body.home .post-card .post-date, body.home .news-card .news-date, body.home .mock-tag { text-transform: none; } /* ── Primary CTA buttons (Primary Vibrant) ────────────────────── */ body.home .btn-lg.gold { background: var(--gold); color: var(--chr-txt); box-shadow: 0 4px 12px rgba(201,148,10,0.30); transition: background-color 0.2s ease, box-shadow 0.2s ease; } body.home .btn-lg.gold:hover { background: var(--navy-6); box-shadow: 0 8px 24px rgba(201,148,10,0.35); } body.home .btn-lg.ghost { border: 1px solid var(--gold); color: var(--gold); transition: background-color 0.2s ease, color 0.2s ease; } body.home .hero .btn-lg.ghost { color: #fff; border-color: rgba(255,255,255,0.35); } body.home .hero .btn-lg.ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; } body.home .btn-lg.ghost:hover { background: var(--gold-dim); } /* ── Hero kicker / underline accents recoloured ───────────────── */ body.home .hero-kicker { color: #fff; text-decoration-color: rgba(201,148,10,0.6); } body.home .hero h1 em { background: linear-gradient(180deg, transparent 62%, rgba(201,148,10,0.45) 62%); } body.home .hero::before { background: radial-gradient(ellipse 600px 400px at 85% -10%, rgba(201,148,10,0.22), transparent 60%), radial-gradient(ellipse 500px 400px at 5% 110%, rgba(74,130,212,0.22), transparent 60%); } body.home .home-logo .mark { box-shadow: 0 4px 14px rgba(201,148,10,0.35); } /* ── Cards: feature/role/news/testimonial ─────────────────────── */ body.home .role-chip, body.home .news-card, body.home .testimonial-card, body.home .value-card, body.home .post-card { border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, border-color 0.2s ease; } body.home .role-chip:hover, body.home .news-card:hover, body.home .testimonial-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.05); } body.home .roles-strip, body.home .news-grid, body.home .testimonial-grid, body.home .feature-grid { gap: 2rem; } /* ── Feature grid (Why Choose Us style cards) ─────────────────── */ body.home .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } body.home .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease; } body.home .feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.05); } /* Icon badge: tinted rounded-square wrapper, matching the .why-card icon style */ body.home .feature-card .ico, body.home .value-card .ico { font-size: 22px; line-height: 1; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: var(--gold-dim); } body.home .feature-card h3 { margin-bottom: 8px; } body.home .feature-card p { color: var(--txt); font-size: clamp(14px, 1vw, 18px); } /* Icon badge colour rotation — shared with .why-card palette */ body.home .feature-grid .feature-card:nth-child(6n+1) .ico, body.home .values-grid .value-card:nth-child(6n+1) .ico { background: #D9D4F5; } body.home .feature-grid .feature-card:nth-child(6n+2) .ico, body.home .values-grid .value-card:nth-child(6n+2) .ico { background: #F5E6CC; } body.home .feature-grid .feature-card:nth-child(6n+3) .ico, body.home .values-grid .value-card:nth-child(6n+3) .ico { background: #CDEEDF; } body.home .feature-grid .feature-card:nth-child(6n+4) .ico, body.home .values-grid .value-card:nth-child(6n+4) .ico { background: #E1D6F8; } body.home .feature-grid .feature-card:nth-child(6n+5) .ico, body.home .values-grid .value-card:nth-child(6n+5) .ico { background: #F6D6D8; } body.home .feature-grid .feature-card:nth-child(6n+6) .ico, body.home .values-grid .value-card:nth-child(6n+6) .ico { background: #CDE7ED; } /* ── Testimonials (static grid) ───────────────────────────────── */ body.home .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } body.home .testimonial-card { background: var(--surface); border: 1px solid var(--border); } body.home .testimonial-card p.quote { font-style: italic; color: var(--txt); margin-bottom: 14px; } body.home .testimonial-card .name { color: var(--navy); font-weight: 700; } body.home .testimonial-card .role { color: var(--txt-muted); font-size: clamp(12px, .85vw, 14px); } /* ── CTA band ──────────────────────────────────────────────────── */ body.home .cta-band { background: var(--navy); color: var(--chr-txt); } body.home .cta-band .btn-lg.gold:hover { background: var(--navy-6); } /* ── Remove decorative rotation on hero mockup ───────────────── */ body.home .hero-mock { transform: none; } /* ── Footer ────────────────────────────────────────────────────── */ body.home .site-footer { background: var(--navy); color: var(--page-bg); padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.25rem, 3vw, 2rem); } body.home .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 1.75rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); } @media (max-width: 768px) { /* Stacked on mobile — the same column gap would otherwise apply *between every section* (Brand, Quick Links, Resources, Contact), reading as a wall of empty space instead of a footer. */ body.home .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } } body.home .footer-col h4 { color: var(--gold-lt, #e0ad2e); font-size: clamp(12px, .8vw, 14px); font-weight: 800; letter-spacing: .04em; margin-bottom: 10px; } body.home .footer-col p { color: var(--page-bg); font-size: clamp(13px, .85vw, 16px); } body.home .footer-brand { display:flex; align-items:center; gap:10px; font-weight:800; color:#fff; font-size:clamp(15px, 1.1vw, 18px); margin-bottom: 12px; } body.home .footer-links { display: flex; flex-direction: column; gap: 6px; } body.home .footer-links a { color: var(--page-bg); font-size: clamp(13px, .85vw, 15px); font-weight: 500; line-height: 1.4; transition: color 0.2s ease; } body.home .footer-links a:hover { color: #fff; text-decoration: underline; } body.home .footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: clamp(13px, .85vw, 15px); color: var(--page-bg); } body.home .footer-contact a { color: var(--page-bg); transition: color 0.2s ease; } body.home .footer-contact a:hover { color: #fff; text-decoration: underline; } /* Newsletter form */ body.home .newsletter-form { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } body.home .newsletter-form input[type="email"] { flex: 1 1 180px; min-width: 0; padding: clamp(9px,1vw,11px) clamp(12px,1.2vw,14px); border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font-size: clamp(13px, .9vw, 15px); font-family: inherit; } body.home .newsletter-form input[type="email"]::placeholder { color: var(--chr-2); } body.home .newsletter-form input[type="email"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } body.home .newsletter-form button { background: var(--gold); color: #fff; border: none; border-radius: var(--radius); padding: clamp(9px,1vw,11px) clamp(16px,1.8vw,20px); font-weight: 700; font-size: clamp(13px, .9vw, 15px); cursor: pointer; min-height: 44px; transition: background-color 0.2s ease; } body.home .newsletter-form button:hover { background: var(--navy-6); } /* Contrast verified - #EAF1FC on #1e4d92 = ~7:1 (AAA) */ body.home .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--chr-2); } body.home .footer-bottom a { color: var(--chr-2); transition: color 0.2s ease; } body.home .footer-bottom a:hover { color: #fff; text-decoration: underline; } body.home .footer-social { display: flex; gap: 12px; } body.home .footer-social a { width: clamp(32px,3vw,36px); height: clamp(32px,3vw,36px); border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #fff; transition: background-color 0.2s ease, border-color 0.2s ease; } body.home .footer-social a:hover { background: var(--gold); border-color: var(--gold); } /* ── Nav links & login button ─────────────────────────────────── */ /* Transparent-over-hero state: white text. Contrast verified - #FFFFFF on #1e4d92 = ~7.9:1 (AAA). */ body.home .home-nav a { color: var(--chr-txt); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } body.home .home-nav .nav-links a { padding: 8px 12px; border-radius: 6px; font-weight: 600; } body.home .home-nav .nav-links a:hover { text-decoration: none; background: rgba(255,255,255,0.12); } body.home .home-nav .nav-links a[aria-current="page"] { font-weight: 700; background: rgba(255,255,255,0.14); } body.home .home-nav .btn-owner { background: var(--gold); border: 1px solid var(--gold); border-radius: var(--radius); padding: clamp(8px,1.4vw,10px) clamp(16px,3vw,22px); font-size: clamp(12px,1.2vw,14px); font-weight: 700; transition: background-color 0.2s ease, border-color 0.2s ease; } body.home .home-nav .btn-owner.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } body.home .home-nav .btn-owner.ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; } body.home .home-nav .btn-owner:hover { background: var(--navy-6); border-color: var(--navy-6); } /* ── Inner page hero (Features / Blog / About Us) ─────────────── */ body.home .page-hero { position: relative; background: var(--navy); color: #fff; padding: 64px 0 48px; text-align: center; } body.home .page-hero h1 { color: #fff; margin-bottom: 10px; font-size: clamp(28px, 2.6vw, 54px); letter-spacing: -0.5px; } body.home .page-hero p { color: var(--chr-2); width: 100%; font-size: clamp(15px, 1vw, 19px); } @media (max-width: 768px) { /* Unlike the homepage's own .hero (which collapses via min-height:auto on mobile), this shared inner-page banner had a fixed 112px of top+bottom padding at every screen size — on a short phone screen that, plus the header above it, pushed the page's real content (feature list, pricing cards, about-us copy) below the fold, reading as "nothing happens until you scroll a long way." Shrink it the same way .hero already is. */ body.home .page-hero { padding: 22px 0 18px; } } @media (max-width: 480px) { /* Smaller phones (down to ~260px) get an even tighter cut — same progressive-shrink pattern .page-body already uses. */ body.home .page-hero { padding: 16px 0 14px; } } /* Owner-uploaded per-page hero image: cover + dark overlay for AAA contrast */ body.home .page-hero.has-image { background-size: cover; background-position: center; } body.home .page-hero.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(13,21,38,0.92) 0%, rgba(13,21,38,0.82) 50%, rgba(30,77,146,0.55) 100%); pointer-events: none; } body.home .page-hero .home-wrap { position: relative; z-index: 1; } body.home .page-hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 14px; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: rgba(212,148,10,0.65); text-underline-offset: 5px; text-decoration-thickness: 1.5px; } /* ── CMS extra content block (owner-authored rich text via Quill) ── */ body.home .cms-content { margin: 0 auto; padding: 0 clamp(0px, 6vw, 90px); color: var(--txt); font-size: clamp(15px, 1vw, 19px); line-height: 1.75; } body.home .cms-content h2, body.home .cms-content h3 { color: var(--navy); margin: 28px 0 12px; letter-spacing: -0.3px; } body.home .cms-content h2:first-child, body.home .cms-content h3:first-child { margin-top: 0; } body.home .cms-content p { margin-bottom: 14px; } body.home .cms-content ul, body.home .cms-content ol { margin: 0 0 14px 22px; } body.home .cms-content li { margin-bottom: 6px; } body.home .cms-content a { color: var(--navy); text-decoration: underline; } body.home .cms-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; } /* ── Generic alert / flash ────────────────────────────────────── */ body.home .home-alert { border-radius: var(--radius); padding: 12px 16px; font-size: 14px; font-weight: 600; margin-bottom: 20px; } /* Contrast verified - #1e4d92 on tinted #c9940a/10% over #F0F0FC = ~7.1:1 (AAA) */ body.home .home-alert.success { background: var(--gold-dim); color: var(--navy); border: 1px solid var(--border-strong); } /* Contrast verified - #D32F2F on #FFFFFF = 5.0:1 (large/bold error text) */ body.home .home-alert.error { background: #fff; color: #D32F2F; border: 1px solid #f3c7c7; font-weight: 700; } /* Flash shown inside the dark navy footer (e.g. newsletter subscribe result): the default tinted/translucent alert backgrounds disappear against navy — force solid, high-contrast panels there. */ body.home .site-footer .home-alert { background: #fff; } body.home .site-footer .home-alert.success { background: #fff; color: var(--navy); border: 2px solid var(--gold); } body.home .site-footer .home-alert.error { background: #fff; color: #D32F2F; border: 2px solid #f3c7c7; } /* ── Dark-panel text fixes (hero mock, demo terminal, step numbers) ── #e0ad2e (--gold-lt) on #1e4d92/#173b70 is only ~3.8:1 - too low for small labels. Replace with white or a light blue tint. */ /* Contrast verified - #FFFFFF on #1e4d92/#173b70 = ~7.9:1/~9.4:1 (AAA) */ body.home .step-num, body.home .demo-term .prompt, body.home .hero-mock .mock-foot { color: #fff; } /* Contrast verified - #cfe0fb on #173b70 = ~8.3:1 (AAA) */ body.home .demo-term .val, body.home .hero-stats .stat-lbl, body.home .home-logo .sub { color: #cfe0fb; } /* Contrast verified - #FFFFFF on rgba(201,148,10,0.35) over #1e4d92 = ~8:1 (AAA) */ body.home .mock-tag.gold { color: #fff; background: rgba(201,148,10,0.35); } body.home .mock-tag.teal { color: #fff; background: rgba(12,158,120,0.35); } body.home .mock-tag.green { color: #fff; background: rgba(24,168,94,0.35); } /* ── Ledger numbers / card date labels on light backgrounds ────── #c9940a on white/#F0F0FC is ~2.7:1, well below the 7:1 AAA floor */ /* Contrast verified - #1e4d92 on #FFFFFF/#F0F0FC = ~7.9:1/~7.45:1 (AAA) */ body.home .ledger-num, body.home .news-card .news-date, body.home .post-card .post-date { color: var(--navy); } /* ── Blog CMS extras: featured image, category chip, tags ────────── */ body.home .post-card { padding: 0 0 2rem; overflow: hidden; } body.home .post-card .post-featured-img { display: block; width: 100%; max-height: 320px; object-fit: cover; margin-bottom: 1.5rem; } body.home .post-card .post-date, body.home .post-card h2, body.home .post-card .post-meta, body.home .post-card .post-body, body.home .post-card .post-tags { padding-left: 2rem; padding-right: 2rem; } body.home .post-card .post-date { padding-top: 2rem; display: flex; align-items: center; gap: 10px; } body.home .post-card .post-tags { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; } /* Contrast verified - #1e4d92 on rgba(201,148,10,0.12) = ~7.45:1 (AAA) */ body.home .post-card .post-category { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: rgba(201,148,10,0.12); border: 1px solid var(--border-strong); padding: 3px 10px; border-radius: 999px; } body.home .post-card .post-tags span { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--txt-2); border: 1px solid var(--border); } /* ── Features carousel ────────────────────────────────────────── */ /* Auto-advancing carousel (pauses on hover/focus, skipped entirely for prefers-reduced-motion via js/home-carousel.js). Inline SVG illustrations — fully functional with no internet connection. */ /* Contrast verified - #FFFFFF on #1e4d92 = ~7.9:1 (AAA) */ body.home .feature-carousel { margin: 8px auto 0; max-width: 1360px; background: var(--navy); border-radius: 16px; padding: 2.5rem; } body.home .carousel-viewport { overflow: hidden; border-radius: 8px; } body.home .carousel-track { display: flex; transition: transform 0.3s ease; } body.home .carousel-card { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } body.home .feature-slide { display: flex; flex-direction: column; } body.home .carousel-pic { width: 100%; max-width: 160px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); } body.home .carousel-pic svg { width: 100%; height: auto; display: block; } body.home .feature-info { margin-top: 12px; text-align: center; } body.home .feature-info h3 { color: #fff; font-size: 16px; margin-bottom: 4px; } body.home .feature-info p { color: #fff; font-size: 13px; line-height: 1.4; max-width: 30ch; margin: 0 auto; } @media (max-width: 1024px) { body.home .carousel-card { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 768px) { body.home .feature-carousel { padding: 1.5rem; } body.home .carousel-card { grid-template-columns: 1fr; gap: 1.5rem; } body.home .carousel-pic { max-width: 200px; } } /* Controls */ body.home .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; } /* Contrast verified - #1e4d92 on #FFFFFF = ~7.9:1 (AAA) */ body.home .carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff; color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, color 0.2s ease; } body.home .carousel-btn:hover { background: var(--gold); color: #fff; } body.home .carousel-dots { display: flex; gap: 10px; } body.home .carousel-dot { width: 12px; height: 12px; min-width: 12px; min-height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: transparent; padding: 0; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } body.home .carousel-dot.is-active, body.home .carousel-dot:hover { background: var(--gold); border-color: var(--gold); } /* Larger hit area for touch targets without growing the visible dot */ body.home .carousel-dot { position: relative; } body.home .carousel-dot::after { content: ""; position: absolute; inset: -16px; } /* ── Full responsive range: 260px – very large screens ───────────── No page max-width — .home-wrap always spans the full viewport, with its side margins scaling smoothly via vw (floor/ceiling via clamp) so there's never a jarring jump between breakpoints and never horizontal scroll, from the smallest phones up through ultra-wide monitors. Readability on wide screens comes from per-element constraints (body.home p { max-width: 70ch }, .section-head, hero copy, etc.), not from capping the page shell itself. */ body.home { overflow-x: hidden; } body.home .home-wrap { width: 100%; padding: 0 clamp(12px, 4vw, 72px); } body.home img, body.home svg, body.home video { max-width: 100%; } @media (max-width: 480px) { body.home .home-wrap { padding: 0 12px; } /* Top bar: keep logo + login button on one line at 280px */ body.home .home-top .home-wrap { height: clamp(54px, 15vw, 60px); } body.home .home-logo { font-size: clamp(13px, 4vw, 14px); gap: 8px; min-width: 0; } body.home .home-logo .mark { width: clamp(26px, 8vw, 28px); height: clamp(26px, 8vw, 28px); font-size: clamp(14px, 4.5vw, 15px); border-radius: 7px; } body.home .home-logo .sub { display: none; } body.home .home-nav { gap: 8px; } body.home .home-nav .btn-owner { padding: clamp(6px,2vw,8px) clamp(10px,3vw,12px); font-size: clamp(11px,3vw,12px); } /* Hero */ body.home .hero h1 { font-size: clamp(24px, 7vw, 28px); letter-spacing: -0.5px; } body.home .hero p.lead { font-size: clamp(14px, 3.6vw, 15px); } body.home .hero-mock { padding: 14px; } body.home .hero-mock .mock-row { flex-wrap: wrap; gap: 4px; } body.home .hero-mock .mock-row .mock-name { overflow-wrap: anywhere; } /* Demo block & CTA band: smaller inner padding */ body.home .demo-copy, body.home .demo-term { padding: 24px; } body.home .cta-band { padding: 28px !important; } } /* ── CTA button hover lift ─────────────────────────────────────── */ body.home .home-cta-primary:hover, body.home .home-cta-ghost:hover { transform: translateY(-1px); } /* ── Scroll-reveal animations ─────────────────────────────────── */ body.home .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } body.home .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ── Card hover lift (modern, tactile feel) ───────────────────── */ body.home .news-card, body.home .testimonial-card, body.home .value-card, body.home .post-card, body.home .feature-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } body.home .news-card:hover, body.home .testimonial-card:hover, body.home .value-card:hover, body.home .post-card:hover, body.home .feature-card:hover { transform: translateY(-6px); border-color: var(--gold); } /* ── Hero mockup: gentle float ────────────────────────────────── */ body.home .hero-mock { animation: home-hero-float 6s ease-in-out infinite; } @keyframes home-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ── Smooth in-page scrolling ──────────────────────────────────── */ html:has(body.home) { scroll-behavior: smooth; } /* ── Respect reduced-motion preferences ───────────────────────── */ @media (prefers-reduced-motion: reduce) { body.home .reveal { opacity: 1; transform: none; transition: none; } body.home .hero-mock { animation: none; } body.home .news-card:hover, body.home .testimonial-card:hover, body.home .value-card:hover, body.home .post-card:hover, body.home .feature-card:hover { transform: none; } html:has(body.home) { scroll-behavior: auto; } } /* ════════════════════════════════════════════════════════════════ HOMEPAGE REDESIGN — additional sections (GIS-inspired layout) ════════════════════════════════════════════════════════════════ */ /* (nav theme moved to the navigation section above) */ /* ── Quick-look / welcome section ─────────────────────────────────── */ .quick-look { background: var(--surface); } .quick-look-grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: flex-start; max-width: clamp(900px, 82vw, 1360px); margin: 0 auto; } .quick-list { border-top: 3px solid var(--gold); padding-top: 18px; } .quick-list-heading { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin-bottom: 16px; } .quick-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .quick-list li { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(13px, .9vw, 16px); color: var(--txt-muted); line-height: 1.5; } .quick-list .ico { font-size: 18px; flex-shrink: 0; min-width: 24px; } .quick-welcome h2 { margin-bottom: 16px; } .quick-welcome p { color: var(--txt-muted); margin-bottom: 14px; } .read-more-link { display: inline-flex; font-size: .9rem; font-weight: 700; color: var(--navy); text-decoration: none; } .read-more-link:hover { text-decoration: underline; } @media (max-width: 768px) { .quick-look-grid { grid-template-columns: 1fr; } .quick-list { display: none; } } /* ── News & Updates carousel ──────────────────────────────────────── */ .news-carousel-section { background: var(--surface-2); } .news-carousel-wrap { position: relative; padding: 0 30px; } .news-carousel-track-outer { overflow: hidden; border-radius: var(--radius); } .news-carousel-track { display: flex; gap: 20px; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; /* Horizontal drags drive the swipe handler (home-news-carousel.js); the browser keeps vertical panning so the page still scrolls through the section. -webkit- prefix for older iOS Safari. */ touch-action: pan-y; -webkit-user-select: none; user-select: none; } .news-c-card { position: relative; flex: 0 0 calc(33.333% - 14px); min-width: 0; min-height: 240px; background: var(--surface) center/cover no-repeat; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .25s, transform .25s, border-color .25s; } .news-c-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--gold); } /* Featured-image cards get a dark translucent overlay so title/excerpt stay readable over any photo, regardless of the photo's own contrast. */ .news-c-card.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,.25) 0%, rgba(10,22,40,.85) 100%); } .news-c-body { position: relative; z-index: 1; padding: 1.5rem; display: flex; flex-direction: column; gap: 8px; } .news-c-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--navy); text-transform: uppercase; letter-spacing: .08em; } .news-c-title { font-size: clamp(16px, 1.1vw, 19px); font-weight: 800; color: var(--txt); line-height: 1.35; } .news-c-excerpt { font-size: clamp(13px, .9vw, 16px); color: var(--txt-muted); } .news-c-card.has-image .news-c-date { color: var(--gold-lt, #e0ad2e); } .news-c-card.has-image .news-c-title, .news-c-card.has-image .news-c-excerpt { color: #fff; } .carousel-arrow-btn { position: absolute; top: calc(50% - 20px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 18px; transition: background-color .2s, opacity .2s; } .carousel-arrow-btn:hover { background: var(--navy-6); } .carousel-arrow-btn:disabled { opacity: .3; cursor: default; pointer-events: none; } .carousel-arrow-btn.carousel-prev { left: 0; } .carousel-arrow-btn.carousel-next { right: 0; } .carousel-dots-row { display: flex; justify-content: center; gap: 8px; margin-top: 28px; flex-wrap: wrap; } .carousel-dots-row .carousel-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); border: none; cursor: pointer; padding: 0; transition: all .25s; } .carousel-dots-row .carousel-dot.active { background: var(--gold); width: 24px; border-radius: 5px; } @media (max-width: 900px) { .news-c-card { flex: 0 0 calc(50% - 10px); } } @media (max-width: 580px) { .news-c-card { flex: 0 0 100%; } .carousel-arrow-btn { display: none; } .news-carousel-wrap { padding: 0; } } /* ── Video CTA ("See it in action") ───────────────────────────────── */ .video-cta-section { position: relative; background: var(--navy); padding: 4.5rem 0; text-align: center; overflow: hidden; } .video-cta-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 80% 0%, rgba(201,148,10,0.25), transparent 60%); pointer-events: none; } .video-play-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,0.95); color: var(--navy); font-size: 1.5rem; border: none; cursor: pointer; margin-bottom: 1.25rem; text-decoration: none; transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease; } .video-play-btn:hover { background: #fff; transform: scale(1.08); box-shadow: 0 0 0 14px rgba(255,255,255,0.12); } .video-cta-title { position: relative; z-index: 1; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 800; color: #fff; margin: 0; } .video-cta-sub { position: relative; z-index: 1; color: var(--chr-2); margin-top: 10px; font-size: clamp(14px, 1vw, 18px); } /* ── "Why choose us" 3x2 card grid ────────────────────────────────── */ /* --cg-cols (set inline per-section, 2-4) drives the column count on wide screens only — the @media rules below override it with a literal value at narrower widths, which an inline grid-template-columns could never do. */ .why-grid { display: grid; grid-template-columns: repeat(var(--cg-cols, 3), 1fr); gap: 20px; } .why-card { border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--border); transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; display: block; color: inherit; } .why-card.card-link { cursor: pointer; } .card-link-cta { display: inline-block; margin-top: 12px; font-size: clamp(13px, .9vw, 15px); font-weight: 700; color: var(--navy); } .why-card .ico-wrap { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; } .why-card h3 { font-size: clamp(17px, 1.2vw, 21px); margin-bottom: 8px; } .why-card p { font-size: clamp(13px, .9vw, 16px); color: var(--txt-muted); margin: 0; } .why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .why-card:nth-child(6n+1) { background: #EEF0FC; border-color: #CFCBEC; } .why-card:nth-child(6n+1) .ico-wrap { background: #D9D4F5; } .why-card:nth-child(6n+2) { background: #FBF3E8; border-color: #F0DEC0; } .why-card:nth-child(6n+2) .ico-wrap { background: #F5E6CC; } .why-card:nth-child(6n+3) { background: #E9F6F0; border-color: #BFE5D4; } .why-card:nth-child(6n+3) .ico-wrap { background: #CDEEDF; } .why-card:nth-child(6n+4) { background: #F1EDFB; border-color: #D6CCF2; } .why-card:nth-child(6n+4) .ico-wrap { background: #E1D6F8; } .why-card:nth-child(6n+5) { background: #FBEDEE; border-color: #F0C6C9; } .why-card:nth-child(6n+5) .ico-wrap { background: #F6D6D8; } .why-card:nth-child(6n+6) { background: #E9F3F6; border-color: #BFDEE6; } .why-card:nth-child(6n+6) .ico-wrap { background: #CDE7ED; } @media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } } /* ── Centred section heads (testimonials etc.) ────────────────────── */ .section-head.text-center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.text-center p { margin-left: auto; margin-right: auto; } /* ── Trust badge (hero) ────────────────────────────────────────────── */ .trust-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px 8px 10px; box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600; color: var(--txt-muted); margin-top: 22px; } .trust-badge .stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; } .trust-badge strong { color: var(--navy); font-weight: 800; } /* ── "Trusted by Schools" logo strip ─────────────────────────────────── */ .logo-strip { background: var(--surface-2); padding: 2.5rem 0; } .logo-strip-head { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--txt-muted); margin-bottom: 24px; } .logo-strip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .logo-strip-row .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 700; color: var(--navy); box-shadow: var(--shadow-sm); } .logo-strip-row .pill .ico { font-size: 16px; } .logo-strip-row .pill img.logo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--surface-2, #f2f5fb); } .logo-strip-row a.pill { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .logo-strip-row a.pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 6px 16px rgba(15, 28, 50, .12)); } @media (max-width: 600px) { .logo-strip-row .pill { font-size: 13px; padding: 8px 14px; } } /* ── Security & reliability band ─────────────────────────────────────── */ .security-band { background: var(--surface); } .security-grid { display: grid; grid-template-columns: repeat(var(--cg-cols, 4), 1fr); gap: 20px; } .security-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; display: block; color: inherit; } .security-card.card-link { cursor: pointer; } .security-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .security-card .ico-wrap { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; background: var(--gold-dim); } .security-card h3 { font-size: clamp(17px, 1.2vw, 21px); margin-bottom: 8px; } .security-card p { font-size: clamp(13px, .9vw, 16px); color: var(--txt-muted); margin: 0; } @media (max-width: 1024px) { .security-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .security-grid { grid-template-columns: 1fr; } } /* ── Small-screen hardening for the marketing site (300px – 640px) ── Collapses any inline multi-column grid in CMS/section content to one column, releases inline min-widths, and prevents string overflow. */ @media (max-width: 640px) { body.home [style*="grid-template-columns"]:not([style*="auto-f"]) { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { body.home [style*="min-width"] { min-width: 0 !important; } body.home .home-wrap [style*="max-width"] { max-width: 100% !important; } body.home code, body.home .mono { overflow-wrap: anywhere; } body.home .cta-band { padding: 28px 18px !important; } body.home table { display: block; overflow-x: auto; } } /* ── Empty states (blog / resources / learn) — always centered. Duplicated from main.css because main.css is linked without a cache-buster and old cached copies predate the rule; home.css carries ?v= so this lands now. ── */ body.home .empty-state { text-align: center; padding: 60px 20px; color: var(--txt-2); line-height: 1.6; } body.home .empty-state h2 { color: var(--txt); } body.home .empty-state p { margin: 0 auto; padding: 0 clamp(0px, 6vw, 60px); }