:root { --ink: #0c1826; --ink-2: #1e3a56; --navy: #15304c; --green: #a97b33; --green-light: #f2e4c8; --green-bright: #f0b429; --amber: #a8552c; --amber-light: #f1dfcf; /* Dark orange — distinct from --amber (that's a muted rust, used as a small text/border accent, not built to carry a full-bleed background). Introduced 2026-08-16 for legal.css's .policy-hero, which the user wanted to keep dark (unlike the .page-hero family fixed the same session — see that fix's comment above) but recolored off navy so it doesn't reintroduce the same "blends into the dark nav" problem. #9a3412/#c2410c both hold >5:1 contrast with white text, so headings and body copy inside the hero stay readable. */ --rust: #9a3412; --rust-light: #fbe4d4; /* Neutral grey, not the old blue-tinted slate (#f8fafc) — matches shared.css's --bg on the logged-in app, so the public and authenticated sides of the site read as one product instead of two different shades of "almost white." */ --paper: #f0f0f0; --white: #ffffff; --ash: #5b6472; /* Neutral grey, not the old blue-tinted slate (#e2e8f0) — matches shared.css's --border for the same reason. */ --line: #e4e4e7; --line-dark: rgba(255,255,255,0.12); --blue: #37567c; --teal: #2b6e63; /* Cards sit on --paper as pure white + a soft shadow (see --shadow below) rather than a color difference — same elevation pattern as shared.css's .card on the app side. */ --shadow: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06); /* Aliases for the older token names some public pages still use internally (register.php, pricing pages, etc.) — lets those pages drop their own duplicate :root block and inherit this one unchanged, without a rule-by-rule var() rename. */ --bg: var(--paper); --slate: var(--ash); --border: var(--line); --text: #1e293b; } html { overflow-x: hidden; max-width: 100%; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--paper); color: #1e293b; line-height: 1.6; margin: 0; overflow-x: hidden; max-width: 100%; } /* 1160→1280 (2026-08-25): this is the shared container every public marketing page inherits (index, organizations, about-us, both pricing pages, privacy-policy, terms-of-service, support) — it was actually the narrowest of the site's three .container definitions, auth-login.css and register.css had already independently settled on 1200px for their own pages. Widening the one page-by-page component caps (organizations.css's .split/ .privacy-callout/.steps, etc.) sit under can only go so far when the ceiling itself is this tight, which is why organizations.php and about-us.php kept reading as narrower than index.php even after those. 1280 is comfortably past all three previous values. */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* ── Skip link (WCAG 2.4.1 Bypass Blocks) ── Same off-screen-until-focused pattern as shared.css's .skip-link on the authenticated side, just using this side's own token names (--green-bright is this site's equivalent accent to shared.css's --gold-glow — see public-nav.php's logo mark). First focusable element in the DOM — see head.php, right after . Target is #main-content, an empty anchor public-nav.php places right after its own (every public page shares that one nav partial, but not a single shared content wrapper to put the id on directly). */ .skip-link { position: absolute; top: -48px; left: 12px; z-index: 999; background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0; outline: 3px solid var(--green-bright); outline-offset: -3px; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ── Nav ── PNC-style two-tier top nav: a dark bar of tier-1 sections (Personal / For Organizations / About), each opening a full-width second row of real links below — same system as the authenticated app's top-nav (see shared.css's .top-nav/ .tn-* comments for the full reasoning), copied rather than shared via one file since the public site loads landing.css, not shared.css, and pulling the whole authenticated stylesheet in just for this would drag in a lot of unrelated app-only CSS. Token names below use landing.css's own (--ink/--ink-2/ --green-bright) instead of shared.css's (--sidebar-bg/ --sidebar-bg-2/--gold-glow) — same actual colors, just this file's existing names. */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--green-bright); z-index: 200; transition: width 0.1s linear; } .logo { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 700; color: var(--navy); text-decoration: none; display: flex; align-items: center; gap: 10px; } .logo-mark { flex-shrink: 0; display: block; } .top-nav { background: linear-gradient(90deg, var(--ink-2) 0%, var(--ink) 100%); position: sticky; top: 0; z-index: 150; box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .tn-inner { height: 76px; max-width: 1300px; margin: 0 auto; padding: 0 32px; display: flex; align-items: stretch; gap: 28px; } .tn-logo { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 700; color: white; text-decoration: none; display: flex; align-items: center; gap: 8px; letter-spacing: -0.3px; flex-shrink: 0; } .tn-logo-mark { flex-shrink: 0; display: block; } .tn-links { display: flex; align-items: stretch; gap: 4px; flex: 1; } .tn-link { position: relative; display: inline-flex; align-items: center; gap: 6px; color: #dde6f0; text-decoration: none; font-size: 17px; font-weight: 500; padding: 12px 18px; border-radius: 8px; border: none; background: none; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; } .tn-link:hover { background: rgba(255,255,255,0.08); color: white; } /* Active/open tab: solid fill matching the sub-nav panel below (.tn-subnav uses the same --ink) plus a gold bar flush against the bar's real top edge — align-items:stretch above is what makes top:0 here land on the bar's top, not just the button's own shorter box. Square all around, not just top-rounded: .tn-subnav is a plain rectangle, so rounded bottom corners would leave two gaps right at the seam. */ .tn-link.active, .tn-link.open { background: var(--ink); color: white; border-radius: 0; } .tn-link.active::before, .tn-link.open::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green-bright); } .tn-chevron { flex-shrink: 0; opacity: 0.7; transition: transform 0.15s; } .tn-group-trigger.open .tn-chevron { transform: rotate(180deg); } /* Sub-nav panels — full-width second row, one per tier-1 section. Unlike the authenticated app's version, one of these is always open (server-rendered via $activeSection, no click needed) — PNC always shows the current section's second row rather than starting collapsed, and public-nav.js's JS respects that instead of treating "none open" as a valid state. */ /* No position:absolute here, unlike the authenticated app's copy of this rule (shared.css) — there, a subnav panel is a temporary click-triggered overlay that's fine floating over content. Here, one panel is ALWAYS open by design (matching PNC — Personal is open by default on load), so it has to participate in normal document flow and actually push the page content below it down, not float over it. */ .tn-subnav { display: none; background: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,0.18); } .tn-subnav.open { display: block; } .tn-subnav-inner { display: flex; align-items: center; gap: 4px; max-width: 1300px; margin: 0 auto; padding: 16px 32px; } .tn-subnav-inner a { display: inline-flex; align-items: center; gap: 6px; color: #b8c4d4; text-decoration: none; font-size: 15px; font-weight: 600; padding: 12px 18px; border-radius: 6px; transition: background 0.15s, color 0.15s; } .tn-subnav-inner a:hover { background: rgba(255,255,255,0.1); color: white; } .tn-subnav-inner a.active { color: white; background: rgba(240,180,41,0.14); } .tn-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; } .tn-hamburger { display: none; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.08); border: none; align-items: center; justify-content: center; color: white; cursor: pointer; } .tn-hamburger svg { width: 20px; height: 20px; } .tn-hamburger:hover { background: rgba(255,255,255,0.16); } /* ── Mobile menu (off-canvas drawer) ── Redesigned 2026-08-19 to match the authenticated app's own sidebar-nav.php drawer redesign the same day ("the mobile menu for the public side needs the same treatment") — same recipe: a real off-canvas panel (not an absolutely-positioned dropdown sitting under the header), a dimming/click-to-close backdrop, a body scroll lock, big centered text links with hairline separators, and collapsible sections instead of one long flat list. Slides in from the right (the hamburger that opens it sits on the right of the header) rather than the left the authenticated drawer uses — just enough visual distinction that the two never get confused for the same surface, while using this file's own --ink/--ink-2/--green-bright tokens (identical values to shared.css's --sidebar-bg/-bg-2/ --gold-glow) so the palette still matches. Class names keep the existing tn-mobile-* prefix rather than borrowing shared.css's .sidebar-*/.nav-* names — this is a genuinely separate component (public-nav.php, no PHP session state), not a copy of the authenticated one. z-index 210/211, not 199/200 — #scroll-progress (index.php only) is itself a fixed, full-width z-index:200 bar that comes later in that page's DOM, so at an equal z-index it would paint its thin 3px strip on top of the open drawer. Clearing it outright avoids relying on DOM order between two unrelated components. */ .tn-mobile-overlay { display: none; position: fixed; inset: 0; z-index: 210; background: rgba(6, 12, 20, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .tn-mobile-overlay.open { opacity: 1; pointer-events: auto; } body.tn-mobile-open { overflow: hidden; } .tn-mobile-links { display: none; position: fixed; top: 0; right: 0; width: min(440px, 100vw); height: 100vh; background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 65%); flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 24px; box-shadow: -4px 0 15px rgba(0,0,0,0.25); z-index: 211; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; } .tn-mobile-links.open { transform: translateX(0); } .tn-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 8px; } .tn-mobile-logo { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: white; text-decoration: none; } .tn-mobile-close { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); border: none; display: flex; align-items: center; justify-content: center; color: #b8c4d4; cursor: pointer; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .tn-mobile-close svg { width: 18px; height: 18px; } .tn-mobile-close:hover { background: rgba(255,255,255,0.16); color: white; } .tn-mobile-group { margin-bottom: 4px; } .tn-mobile-group-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: none; border: none; font-family: inherit; cursor: pointer; padding: 16px 20px; } .tn-mobile-group-toggle:hover { background: rgba(255,255,255,0.05); } .tn-mobile-group-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a97a8; } .tn-mobile-group.open .tn-mobile-group-label { color: white; } .tn-mobile-chevron { width: 14px; height: 14px; color: #64748b; flex-shrink: 0; transition: transform 0.2s ease; } .tn-mobile-group.open .tn-mobile-chevron { transform: rotate(180deg); } .tn-mobile-group-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; } .tn-mobile-group.open .tn-mobile-group-panel { grid-template-rows: 1fr; } .tn-mobile-group-panel-inner { overflow: hidden; min-height: 0; } .tn-mobile-links a.tn-mobile-item { display: flex; align-items: center; justify-content: center; padding: 16px 20px; color: #c3cbd6; text-decoration: none; font-size: 18px; font-weight: 600; text-align: center; transition: background 0.15s, color 0.15s; border-top: 1px solid rgba(255,255,255,0.07); } .tn-mobile-links a.tn-mobile-item:hover { background: rgba(255,255,255,0.06); color: white; } .tn-mobile-links a.tn-mobile-item.active { color: var(--green-bright); background: rgba(240,180,41,0.08); } .tn-mobile-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 4px 20px 8px; } /* width explicit, not left to align-items:stretch — the existing ≤700px ".btn { width: 100% }" rule (further down, for the page's other mobile buttons) also matches this one, and 100% of the drawer's own width PLUS this rule's 20px side margins overflowed past the drawer's right edge with nothing clipping it (only overflow-y is set on .tn-mobile-links) — that's what was pushing "Go to Home"/"Log In" off the page. */ .tn-mobile-cta.btn-primary { margin: 12px 20px 0; width: calc(100% - 40px); justify-content: center; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.2s ease; border: none; cursor: pointer; } .btn-primary { background: var(--green); color: white; } /* #276128 was a true green, stale from before --green became a tan/gold token (see shared.css's :root and its matching .btn-primary:hover fix, 2026-08-12) — #7a5a26 is the darkened- tan value the rest of the app already standardized on. */ .btn-primary:hover { background: #7a5a26; transform: translateY(-1px); } .btn-ghost { background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.28); } .btn-ghost:hover { background: rgba(255,255,255,0.16); } .btn-ghost.light { background: white; color: var(--navy); border: 1px solid var(--line); } .btn-ghost.light:hover { background: var(--paper); } /* Was pasted identically into about-us.css and organizations.css (their dark .about-hero/.org-hero sections) — consolidated here since both pages already load this file unconditionally. */ .btn-ghost-dark { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); } .btn-ghost-dark:hover { background: rgba(255,255,255,0.1); } .btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); } .btn-outline:hover { background: var(--navy); color: white; } /* ── Hero (from index2: doors-rack signature + shield tagline + trust card) ── White background so the sticky dark .top-nav meets a light section right below it instead of another dark block — the two colored bars were blending into each other with no visible seam. The .page-hero/.about-hero/.org-hero family below (2026-08-16) now gets the same light treatment for the same reason — it had the identical nav/hero collision on organizations.php, organization-pricing.php, about-us.php, and personal-pricing.php, just never fixed there when this page's hero was. .eyebrow and .btn-ghost below are shared with that family too, so their light-bg treatment here is scoped under .hero/.page-hero/ .about-hero/.org-hero rather than changed at the base rule (which stays translucent-on-dark for genuinely dark surfaces like .top-nav itself). */ .hero { position: relative; background: var(--white); color: #1e293b; padding: 32px 0 116px; overflow: hidden; } /* Two soft, low-opacity glows instead of a flat white field — a warm gold one roughly behind .hero-trust-card, a faint navy one low on the opposite side. Generated content, so it paints before .container in the box and sits under .hero-content's z-index:1 without needing its own z-index. */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(680px 420px at 84% 6%, rgba(240,180,41,0.12), transparent 62%), radial-gradient(620px 400px at 6% 96%, rgba(21,48,76,0.07), transparent 65%); pointer-events: none; } .hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: start; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .eyebrow, .hero h1, .hero p.lede, .hero-ctas, .hero-cta-group { opacity: 0; animation: heroFadeUp 0.6s ease forwards; } .eyebrow { animation-delay: 0.05s; } .hero h1 { animation-delay: 0.15s; } .hero p.lede { animation-delay: 0.28s; } .hero-ctas, .hero-cta-group { animation-delay: 0.4s; } } .eyebrow { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 22px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); } .hero .eyebrow, .page-hero .eyebrow, .about-hero .eyebrow, .org-hero .eyebrow { background: var(--paper); border-color: var(--line); } .hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 46px; line-height: 1.14; margin: 0 0 18px; max-width: 560px; } .hero h1 em { font-style: italic; color: var(--amber); } .hero p.lede { font-size: 17.5px; max-width: 520px; margin: 0 0 20px; color: #475569; } /* Still used by organizations.php/organization-pricing.php's own .org-hero CTAs — index.php's hero moved to .hero-cta-group above, but this pair's original layout rule stays for the pages that still render two independent .btn elements here. margin-top matches .final-cta p's own margin-bottom below, since .org-hero .lede has no bottom margin of its own. */ .hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; } .hero .btn-ghost { background: var(--paper); color: var(--navy); border: 1px solid var(--line); } .hero .btn-ghost:hover { background: var(--line); } /* Right column of .hero-content: just the intro screenshot, borderless so it blends straight into the page background. */ .hero-right { display: flex; flex-direction: column; } .hero-intro-image { width: 100%; height: auto; display: block; } .hero-trust-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px 28px; box-shadow: 0 12px 30px -22px rgba(0,0,0,0.18); } .hero-trust-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; } .hero-trust-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .hero-trust-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: #475569; line-height: 1.5; } .hero-trust-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(240,180,41,0.12); color: var(--amber); display: flex; align-items: center; justify-content: center; } .hero-trust-icon svg { width: 15px; height: 15px; } .hero-trust-cta { display: block; text-align: center; background: var(--green-bright); color: var(--ink); font-weight: 700; padding: 13px; border-radius: 10px; text-decoration: none; margin-bottom: 10px; } .hero-trust-login { text-align: center; font-size: 13px; color: var(--ash); margin: 0; } .hero-trust-login a { color: var(--green); } /* ── Hero CTAs: one connected control, not two competing buttons ── Personal and Organization used to be two separate .btn elements with independent styles floating apart — read as two different products. Sharing one rounded/shadowed outer shell with a hard seam between halves (instead of a gap) makes clear these are two doors into the same thing, matching the "Your view / Coach view" tabs on .hero-preview below. */ .hero-cta-group { display: inline-flex; align-items: stretch; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 28px -16px rgba(12,24,38,0.35); margin-top: 4px; } .hero-cta-pill { display: flex; flex-direction: column; gap: 3px; padding: 15px 26px; text-decoration: none; transition: background 0.15s ease; } .hero-cta-pill-title { font-size: 15.5px; font-weight: 700; } .hero-cta-pill-sub { font-size: 11.5px; font-weight: 500; opacity: 0.78; } .hero-cta-pill-primary { background: var(--green); color: white; } .hero-cta-pill-primary:hover { background: #7a5a26; } .hero-cta-pill:not(.hero-cta-pill-primary) { background: var(--navy); color: white; border-left: 1px solid rgba(255,255,255,0.16); } .hero-cta-pill:not(.hero-cta-pill-primary):hover { background: var(--ink-2); } .hero-cta-note { font-size: 12.5px; color: var(--ash); margin: 12px 0 0; } /* ── Hero product preview ── Replaces the old doors-rack icon grid. This is a faithful recreation of the real home.php "Goals / Pending / Secure" dashboard — same card shell, badge, and accent-color language as .focus-item in home.css — framed like a browser window, so the hero shows the actual product instead of an icon metaphor for it. No max-width on purpose: fills the same width as .hero-content above it, same reasoning the old .doors-rack had. */ .hero-preview { width: 100%; margin-top: 40px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 34px 64px -30px rgba(12,24,38,0.4), 0 0 0 1px rgba(12,24,38,0.05); } .hp-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--paper); border-bottom: 1px solid var(--line); } .hp-chrome-dots { display: flex; gap: 6px; flex-shrink: 0; } .hp-chrome-dots span { width: 9px; height: 9px; border-radius: 50%; background: #d4d4d8; } .hp-chrome-url { font-size: 11.5px; color: var(--ash); background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 4px 14px; } .hp-chrome-tabs { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; } .hp-chrome-tab { font-size: 11.5px; font-weight: 600; color: var(--ash); padding: 5px 12px; border-radius: 99px; } .hp-chrome-tab-active { background: var(--navy); color: white; } .hp-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px; background: var(--paper); } .hp-col-label { font-size: 11.5px; font-weight: 700; color: var(--hp-accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .hp-card { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--hp-accent); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); } .hp-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .hp-card-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--hp-accent-light); color: var(--hp-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hp-card-icon svg { width: 13px; height: 13px; } .hp-card-title { font-size: 11.5px; font-weight: 700; color: #1e293b; flex: 1; line-height: 1.3; } .hp-card-badge { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 99px; background: var(--hp-accent-light); color: var(--hp-accent); white-space: nowrap; } .hp-card-bar { height: 6px; border-radius: 99px; background: var(--hp-accent-light); overflow: hidden; } .hp-card-bar i { display: block; height: 100%; border-radius: 99px; background: var(--hp-accent); } .hp-card-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px 8px; } .hp-card-check { width: 28px; height: 28px; border-radius: 50%; background: var(--hp-accent-light); color: var(--hp-accent); display: flex; align-items: center; justify-content: center; } .hp-card-check svg { width: 14px; height: 14px; } .hp-card-empty-text { font-size: 10.5px; font-weight: 600; color: var(--ash); line-height: 1.4; } @media (prefers-reduced-motion: no-preference) { .hero-preview { opacity: 0; animation: heroFadeUp 0.6s ease forwards; animation-delay: 0.5s; } } /* ── Sections (shared) ── */ /* position:relative so any section can host an absolutely-positioned .section-wave divider (see below) at its own bottom edge without every page having to opt in individually. */ .section { padding: 84px 0; position: relative; } .section-header { text-align: center; max-width: 680px; margin: 0 auto 46px; } .section-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; } .section-header h2 { font-size: 32px; color: var(--navy); margin: 0 0 12px; } .section-header p { font-size: 17px; color: #475569; margin: 0; } /* index.php alternates white/navy backgrounds down the page from "How Forzara works" on: #how (navy) → shield-band (white) → #tools (navy) → #pricing (white) → #faq (navy) → final CTA (white). #how/#tools/#faq keep the shared .section-header/ .showcase-tab styling above (built for a light background) as their default, so each gets its own dark-bg override here, scoped by id+class so it can't leak onto other pages that reuse those same class names (e.g. organizations.php's own showcase section, support.php's #faq). Stays a flat fill rather than a gradient — #tools and #faq both receive a .section-wave curve from the section above them (see below), solid-filled to match this background exactly, so the top edge here has to be the plain, uniform var(--ink) that fill actually is. A gradient wash would look lit in the middle of the band but leave a visible mismatch right where the curve lands. */ #how.section, #tools.section, #faq.section { background: var(--ink); } #how.section .section-eyebrow, #tools.section .section-eyebrow, #faq.section .section-eyebrow { color: var(--green-bright); } #how.section .section-header h2, #tools.section .section-header h2, #faq.section .section-header h2 { color: white; } #how.section .section-header p, #tools.section .section-header p, #faq.section .section-header p { color: #b8c4d4; } /* ── Shield band (from index2) ── */ .shield-band { background: var(--white); color: #1e293b; padding: 92px 0 110px; position: relative; } /* .section-eyebrow is display:inline-block and relies on a text-align:center parent (normally .section-header) to center itself — shield-band puts it straight in .container instead, which has no text-align, so it sat left-aligned above the .shield-statement/.shield-sub below it (both set their own text-align:center directly). Scoped here rather than changing the shared .section-eyebrow rule, which every other page's .section-header usage still depends on staying inline-block. */ .shield-band .section-eyebrow { display: block; text-align: center; } /* ── Section wave dividers ── Generic, reusable version of the curved seam that used to exist only at the bottom of .shield-band (a one-off .shield-band-divider rule) — every OTHER place two full-bleed section backgrounds met was a flat color-swap edge, reading as stacked template sections rather than one designed page. Drop ` would occupy inside .showcase-panel. ── */ .showcase-textblock { flex: 1; padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; } .showcase-textblock p.intro { font-size: 15.5px; color: var(--navy); font-weight: 600; margin: 0 0 20px; line-height: 1.6; } .showcase-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .showcase-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #475569; line-height: 1.55; } .showcase-list li svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; margin-top: 2px; } /* Point-of-use scope disclaimer (Court Form Finder panel) — legal flagged that the FAQ's "we aren't a law firm" language needed to also live where the tool itself is described, not only in the FAQ further down the page. */ .showcase-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: #64748b; line-height: 1.55; } /* ── Track grid (index.php's #tools section) ── All four tracks visible at once instead of hidden behind tabs — the old tab+single-panel widget (still used by organizations.php, see .showcase-* above) left one mostly-empty white card on screen at a time. Each card sets --accent/--accent-bg inline the same way .showcase-panel sets --panel-accent. Reuses .showcase-list/ .showcase-note for the checkmarks and legal footnote so the two patterns still share type styles. */ .track-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .track-card { position: relative; background: white; border: 1px solid var(--line); border-radius: 20px; padding: 30px 30px 28px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .track-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px -12px rgba(12,24,38,0.22); } .track-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent, var(--green)); } .track-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .track-card-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-bg, var(--green-light)); color: var(--accent, var(--green)); display: flex; align-items: center; justify-content: center; } .track-card-icon svg { width: 21px; height: 21px; } .track-card h3 { font-size: 18.5px; color: var(--navy); margin: 0; } .track-card p.intro { font-size: 15px; color: var(--navy); font-weight: 600; margin: 0 0 18px; line-height: 1.6; } /* ── FAQ ── */ .faq-item { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 4px 22px; margin-bottom: 12px; box-shadow: var(--shadow); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .faq-item:hover { border-color: #d4d4d8; box-shadow: 0 8px 22px -12px rgba(12,24,38,0.2); } .faq-item summary { padding: 16px 0; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 20px; color: var(--ash); transition: transform 0.2s ease; flex-shrink: 0; margin-left: 12px; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { padding-bottom: 18px; color: #475569; font-size: 14.5px; margin: 0; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Focus-visible states (keyboard navigation) ── */ .btn:focus-visible, .showcase-tab:focus-visible, .faq-item summary:focus-visible, .nav-links a:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; } /* ── Scroll cue beneath the doors-rack ── */ .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 36px; opacity: 0.6; } .scroll-cue span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); } .scroll-cue svg { width: 18px; height: 18px; color: var(--green-bright); } @keyframes scrollCueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: no-preference) { .scroll-cue svg { animation: scrollCueBounce 1.8s ease-in-out infinite; } } footer { background: var(--navy); color: #cbd5e1; padding: 60px 0 24px; } .footer-security { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #cbd5e1; margin: 0 0 10px; } .footer-security svg { width: 15px; height: 15px; color: var(--green-bright); flex-shrink: 0; } .footer-copyright { margin: 0 0 10px; font-size: 13.5px; color: #94a3b8; } .footer-legal-links { font-size: 13.5px; } .footer-legal-links a { color: #94a3b8; text-decoration: none; } .footer-legal-links a:hover { color: white; } /* ── Full footer (4-column: brand + Product/Company/Legal) ── */ .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-col h4 { color: white; font-size: 14px; margin-bottom: 14px; } .footer-col a { display: block; color: #94a3b8; text-decoration: none; font-size: 14px; margin-bottom: 10px; } .footer-col a:hover { color: white; } .footer-grid-bottom { padding-top: 22px; } .footer-grid-bottom p { margin: 0 0 10px; } .footer-grid-bottom p:last-child { margin-bottom: 0; } /* ── Minimal footer (auth-card pages) ── */ .footer-bottom { text-align: center; } @media (max-width: 900px) { .showcase-layout { grid-template-columns: 1fr; } .showcase-tabs { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; } .showcase-tab { flex-shrink: 0; } .showcase-tab-sub { display: none; } } @media (max-width: 700px) { .container { padding: 0 18px; max-width: 100%; } .tn-inner { padding: 0 18px; gap: 14px; } .tn-logo { font-size: 20px; } .tn-links, .tn-subnav { display: none !important; } .tn-hamburger { display: flex; } .tn-right .btn-primary { display: none; } /* moves into .tn-mobile-links below instead of sitting twice */ .tn-mobile-overlay { display: block; } .tn-mobile-links { display: flex; } .hero { padding: 44px 0 100px; } .hero-content { grid-template-columns: 1fr; gap: 32px; } .hero h1 { font-size: 30px; max-width: 100%; } .hero p.lede { font-size: 16px; max-width: 100%; } .scroll-cue { display: none; } .hero-cta-group { flex-direction: column; width: 100%; } .hero-cta-pill:not(.hero-cta-pill-primary) { border-left: none; border-top: 1px solid rgba(255,255,255,0.16); } .hp-body { grid-template-columns: 1fr; } .hp-chrome-url { display: none; } .section { padding: 52px 0; } .section-header h2 { font-size: 24px; } .shield-grid { grid-template-columns: 1fr; } .track-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .shield-statement { font-size: 26px; } .btn { min-height: 46px; width: 100%; } .hero-ctas .btn { width: auto; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .page-hero, .about-hero, .org-hero { padding: 48px 0 44px; } .page-hero h1, .about-hero h1, .org-hero h1 { font-size: 28px; } .page-hero p.lede, .about-hero p.lede, .org-hero .lede { font-size: 16px; } .final-cta h2 { font-size: 26px; } .final-cta .cta-buttons .btn { width: 100%; } } /* .js-hidden: server-rendered initial-hide for elements whose ongoing show/hide is owned by client JS via direct .style.display assignment (not restricted by CSP's style-src, unlike a markup style="" attribute). Added while removing 'unsafe-inline' from style-src — see security-headers.php. */ .js-hidden { display: none; }