/* =================================================================================== GovBidAgent — public marketing design system (V407-F87) One stylesheet for every public page outside the app shell. It replaces three divergent systems that had drifted apart: - the "product" family: an identical inline :root block copy-pasted into 7 pages - the "legal" family: a different variable set across trust/terms/privacy/security - the "SEO" family: seo-resources.css, with its own nav/footer class names It is written against the class vocabulary those pages ALREADY use (.wrap, .card, .section, .hero, .btn, .grid-3, .faq, .cta, plus the SEO family's .navlinks, .footer-inner, .eyebrow, .steps, .calculator …) so adopting it is a swap, not a markup rewrite. That matters: free-bid-no-bid-calculator.html contains a working scoring form, and the fewer structural edits it takes, the less there is to break. Tokens intentionally mirror the marketing tokens added to index.html's :root, so the homepage and these pages are one visual system rather than two that resemble each other. Kept as literals here rather than @import-ing, because these pages do not load the app stylesheet and an extra blocking request on every SEO landing page is a real cost for no benefit. =================================================================================== */ @font-face{ font-family:"Public Sans"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/PublicSans-VariableFont_wght.ttf") format("truetype"); } @font-face{ font-family:"Source Serif 4"; font-style:normal; font-weight:200 900; font-display:swap; src:url("/fonts/SourceSerif4-Variable.woff2") format("woff2"); } :root{ --navy:#0f172a; --blue:#1d4ed8; --blue-hover:#1e40af; --sky:#eff6ff; --ink:#0f172a; --body:#334155; --soft:#475569; --muted:#64748b; --bg:#ffffff; --surface:#f8fafc; --surface-2:#f1f5f9; --line:#e2e8f0; --line-strong:#cbd5e1; --line-blue:#bfdbfe; --green:#047857; --green-bg:#f0fdf4; --amber-text:#92400e; --amber-bg:#fffbeb; --red-text:#b42318; --red-bg:#fef3f2; --font-sans:"Public Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-display:"Source Serif 4",Georgia,"Times New Roman",serif; --radius:12px; --radius-sm:8px; --shadow-soft:0 8px 20px rgba(16,24,40,.06); --shadow-raised:0 1px 2px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.06); --space-section:104px; --space-section-sm:72px; --space-block:32px; --hero:clamp(38px,5vw,60px); --h2:clamp(28px,3.2vw,40px); --h3:20px; --lede:18px; --track-display:-.018em; } /* Dark theme. Three states, matching the app's convention exactly: bare :root is light, the media query covers the default "system" setting (guarded so an explicit light choice still wins), and the [data-theme] block covers an explicit choice. Every colour is defined at :root first, so no value exists only inside a conditional block. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ink:#f1f5f9; --body:#cbd5e1; --soft:#b6c2d2; --muted:#94a3b8; --bg:#0e1218; --surface:#141a22; --surface-2:#1a212b; --line:#252e3a; --line-strong:#37414f; --line-blue:#1e3a5f; --navy:#0b0f15; --blue:#4d84f5; --blue-hover:#6b9bff; --sky:#131c2b; --green:#4ade80; --green-bg:#0f2419; --amber-text:#fbbf24; --amber-bg:#241c0c; --red-text:#fca5a5; --red-bg:#2a1416; --shadow-soft:0 8px 20px rgba(0,0,0,.35); --shadow-raised:0 1px 2px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.45); } } :root[data-theme="dark"]{ --ink:#f1f5f9; --body:#cbd5e1; --soft:#b6c2d2; --muted:#94a3b8; --bg:#0e1218; --surface:#141a22; --surface-2:#1a212b; --line:#252e3a; --line-strong:#37414f; --line-blue:#1e3a5f; --navy:#0b0f15; --blue:#4d84f5; --blue-hover:#6b9bff; --sky:#131c2b; --green:#4ade80; --green-bg:#0f2419; --amber-text:#fbbf24; --amber-bg:#241c0c; --red-text:#fca5a5; --red-bg:#2a1416; --shadow-soft:0 8px 20px rgba(0,0,0,.35); --shadow-raised:0 1px 2px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.45); } /* ---- base ------------------------------------------------------------------------ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--body); font-family:var(--font-sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;height:auto} :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:2px; } .wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* ---- typography ------------------------------------------------------------------ Serif for display headings only; Public Sans carries all body, UI and data text. */ h1,h2,h3,.eyebrow{color:var(--ink)} h1,h2{ font-family:var(--font-display); font-weight:600; letter-spacing:var(--track-display); text-wrap:balance; margin:0 0 16px; } /* 30ch / 30ch rather than 22 / 26: at the narrower measures these headings broke early and left the right ~40% of a 1180px container empty, which reads as a layout fault rather than as margin. Still well inside the comfortable measure for display sizes. */ h1{font-size:var(--hero);line-height:1.06;max-width:30ch} h2{font-size:var(--h2);line-height:1.14;max-width:30ch} h3{ font-family:var(--font-sans); font-size:var(--h3); font-weight:600; line-height:1.35; letter-spacing:-.005em; margin:0 0 10px; } /* Legal/policy pages run several h2 subheads inside a single section, so section padding never separates them — they were butting straight up against the block above. A heading that follows content needs its own space; the first one in a section does not. */ * + h2{margin-top:56px} * + h3{margin-top:32px} .hero h1,.hero h2,section > h2:first-child,.section > h2:first-child{margin-top:0} p{margin:0 0 16px;max-width:72ch} p:last-child{margin-bottom:0} .lede{font-size:var(--lede);line-height:1.62;color:var(--soft);max-width:60ch} .muted{color:var(--muted)} .note,.schema-note,.privacy-line{font-size:13.5px;line-height:1.6;color:var(--muted)} .eyebrow,.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); background:var(--sky); border:1px solid var(--line-blue); border-radius:999px; padding:6px 11px; margin:0 0 18px; } .pill.green{color:var(--green);background:var(--green-bg);border-color:var(--green)} /* ---- header ---------------------------------------------------------------------- */ .topbar{ position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .topbar .inner,.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:66px; } .brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15.5px; letter-spacing:-.01em; color:var(--ink); } .brand:hover{text-decoration:none} .logo{ width:30px;height:30px; border-radius:var(--radius-sm); overflow:hidden; display:grid;place-items:center; flex:0 0 auto; } .logo img{width:100%;height:100%;display:block} .nav,.navlinks{display:flex;align-items:center;gap:2px;flex-wrap:wrap} .nav a:not(.btn),.navlinks a:not(.button){ font-size:14px; font-weight:500; color:var(--soft); padding:9px 12px; border-radius:var(--radius-sm); transition:color .15s ease,background-color .15s ease; } .nav a:not(.btn):hover,.navlinks a:not(.button):hover{ color:var(--ink); background:var(--surface); text-decoration:none; } /* ---- buttons --------------------------------------------------------------------- */ .btn,.button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-sans); font-size:14.5px; font-weight:600; line-height:1; padding:12px 20px; border:1px solid var(--blue); border-radius:var(--radius-sm); background:var(--blue); color:#fff; cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease; } .btn:hover,.button:hover{background:var(--blue-hover);border-color:var(--blue-hover);text-decoration:none;color:#fff} .btn.light,.btn.secondary,.button.secondary{ background:transparent; color:var(--ink); border-color:var(--line-strong); } .btn.light:hover,.btn.secondary:hover,.button.secondary:hover{ background:var(--surface); border-color:var(--soft); color:var(--ink); } .hero-actions,.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} /* ---- sections -------------------------------------------------------------------- The old pages ran ~34-38px of section padding, which is the main reason they read as cramped. Sections now breathe, and adjacent same-coloured sections collapse their shared padding so the page has rhythm rather than a uniform beat. */ .section{padding:var(--space-section) 0} /* Adjacent sections were each contributing a full top AND bottom pad, stacking to 200px+ of dead space between short blocks — generous rhythm turning into a broken-looking gap. Collapsing the top pad on a following sibling gives one deliberate interval between sections instead of two accidental ones. Caught on a full-page screenshot; the CSS reads perfectly reasonable in isolation. */ .section + .section{padding-top:0} .section.center{text-align:center} .section.center h2{margin-left:auto;margin-right:auto} .section.center .lede,.section.center > p{margin-left:auto;margin-right:auto} .section-intro{margin-bottom:var(--space-block);max-width:62ch} .hero{ padding:var(--space-section) 0 var(--space-section-sm); border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg)); } .hero p{font-size:var(--lede);line-height:1.62;color:var(--soft);max-width:58ch} /* ---- grids ----------------------------------------------------------------------- */ .grid{display:grid;gap:var(--space-block)} .grid-2,.two{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3,.three{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-2,.grid-3,.two,.three{display:grid;gap:var(--space-block)} /* ---- cards ------------------------------------------------------------------------ Real bordered, shadowed cards — matching the homepage's landing-shell treatment (v407-f93) rather than the hairline-only version this file shipped with. `.card.raised` steps up to the heavier --shadow-raised tier for the rare thing that genuinely sits above the page (kept from the original design, still valid). */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:28px; } /* Only the heading that OPENS a card loses its top margin. The legal pages nest their whole document inside one
, so a blanket `.card h2` reset (specificity 0,1,1) silently beat `* + h2` and collapsed every subsequent subhead to a zero gap against the block above it. */ .card > h2:first-child,.card > h3:first-child, .card > .pill:first-child + h2,.card > .pill:first-child + h3{margin-top:0} .card p{color:var(--body);font-size:15px;line-height:1.62} /* Feature-intro card grids (3 distinct capabilities, real copy each) get a real icon instead of reading as a text wall — same icon language as the homepage's .lp-icon set, reused rather than invented fresh. Checklists and plan cards don't use this. */ .card .icon-box{ width:42px;height:42px;border-radius:14px; background:var(--sky);border:1px solid var(--line-blue); display:flex;align-items:center;justify-content:center; color:var(--blue);margin-bottom:14px; } .card .icon-box + h2{margin-top:0} .lp-icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .card.raised,.box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:28px; } .card.raised{box-shadow:var(--shadow-raised);background:var(--bg)} /* The recommended plan in a pricing grid needs to visibly stand out, not just carry a label — otherwise "Most popular" is a claim with no visual backing. */ .card.featured{border-color:var(--blue);box-shadow:var(--shadow-raised)} /* The legal pages mark up these blocks as LabelDescription with no separator between them, relying on the label being a block. Dropping that rule ran the two together mid-sentence ("Terms of ServiceRules for using…"). Restored from the original legal-family stylesheet rather than editing 4 pages of markup. */ .box b,.box strong{display:block;color:var(--ink);margin-bottom:5px} /* ---- feature list ------------------------------------------------------------------ Real bordered, shadowed tiles — matching the homepage's restored .feature-card. */ .feature-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:22px; } .feature-list div{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:16px; font-size:14.5px; font-weight:500; color:var(--body); } /* ---- FAQ --------------------------------------------------------------------------- details/summary is kept — it is real disclosure behaviour, not decoration. */ .faq{display:grid;gap:12px;margin-top:var(--space-block)} .faq details,.faq-item{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:20px 24px; margin:0; } .faq summary{ font-family:var(--font-sans); font-size:16.5px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+"; font-size:20px; font-weight:400; color:var(--muted); flex:0 0 auto; line-height:1; } .faq details[open] summary::after{content:"\2212"} .faq details p{margin-top:12px;font-size:15px;color:var(--body);max-width:76ch} /* ---- closing CTA ------------------------------------------------------------------- The page's one dark moment. It earns its contrast by being the only one. */ .cta{ background:var(--navy); color:#e2e8f0; border-radius:var(--radius); padding:52px; display:grid; grid-template-columns:minmax(0,1.5fr) auto; gap:32px; align-items:center; } .cta h2{color:#fff;margin-bottom:10px} .cta p{color:#cbd5e1;margin:0;max-width:52ch} .cta .btn{background:#fff;color:var(--navy);border-color:#fff} .cta .btn:hover{background:#e2e8f0;border-color:#e2e8f0;color:var(--navy)} /* ---- footer ------------------------------------------------------------------------ */ .footer,.footer-inner{ border-top:1px solid var(--line); padding:36px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted); } .links,.footer-links{display:flex;gap:20px;flex-wrap:wrap} .links a,.footer-links a{color:var(--soft);font-weight:500} .links a:hover,.footer-links a:hover{color:var(--ink)} /* ---- status notes ------------------------------------------------------------------ */ .warning{ background:var(--amber-bg); border:1px solid var(--amber-text); border-radius:var(--radius-sm); padding:16px 18px; color:var(--amber-text); font-size:14.5px; } /* ---- SEO-family specifics ----------------------------------------------------------- The bid/no-bid calculator is a working scoring form. Styling only — no structural or behavioural change, so the existing scoring script keeps working untouched. */ .steps{display:grid;gap:0;margin-top:var(--space-block)} .step{ border-top:1px solid var(--line); padding:24px 0; } .step h3{margin-bottom:8px} .calculator,.score-form{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-soft); padding:28px; margin-top:var(--space-block); } .criterion{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); } .criterion:last-child{border-bottom:0} .checklist{display:grid;gap:0;margin:var(--space-block) 0 0;padding:0;list-style:none} .checklist li{border-top:1px solid var(--line);padding:14px 0;font-size:15px} .meter{ height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; } .meter > *{display:block;height:100%;background:var(--blue);border-radius:999px} .result,.result-score{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow-soft); padding:24px; margin-top:22px; } .result-score{font-family:var(--font-display);font-size:40px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .related{border-top:1px solid var(--line);padding-top:var(--space-block);margin-top:var(--space-section-sm)} .skip{ position:absolute; left:-9999px; } .skip:focus{ position:static; display:inline-block; margin:12px; padding:10px 16px; background:var(--blue); color:#fff; border-radius:var(--radius-sm); } /* ---- forms -------------------------------------------------------------------------- */ input,select,textarea{ font-family:var(--font-sans); font-size:15px; color:var(--ink); background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:11px 13px; width:100%; transition:border-color .15s ease,box-shadow .15s ease; } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent); } label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px; } /* ---- motion --------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; scroll-behavior:auto!important; } } /* ---- responsive ------------------------------------------------------------------------- Deliberate breakpoints, not an automatic desktop collapse. */ @media(max-width:900px){ .section{padding:var(--space-section-sm) 0} .hero{padding:var(--space-section-sm) 0 56px} .grid-3,.three,.feature-list{grid-template-columns:repeat(2,minmax(0,1fr))} .cta{grid-template-columns:1fr;padding:36px;gap:24px} } @media(max-width:640px){ .wrap{padding:0 20px} .section{padding:56px 0} .hero{padding:48px 0 44px} .grid-2,.grid-3,.two,.three,.feature-list{grid-template-columns:1fr} .topbar .inner,.topbar .wrap{ min-height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; } .nav,.navlinks{width:100%;gap:0} .cta{padding:28px;border-radius:var(--radius-sm)} .card.raised,.box,.calculator,.score-form{padding:22px} .footer,.footer-inner{flex-direction:column;align-items:flex-start;gap:14px} .criterion{flex-direction:column;align-items:flex-start;gap:10px} /* touch targets */ .btn,.button{min-height:44px} .nav a:not(.btn),.navlinks a:not(.button){min-height:40px;display:inline-flex;align-items:center} }