/* ============================================================================ fowara-site.css — Fowara marketing-site design system (2026-08) ---------------------------------------------------------------------------- Source of truth: Claude Design project "fowara (Remix)" → Fowara Homepage.html + fowara/site.css. Ported to a self-hosted, WCAG-corrected stylesheet. WHY A SEPARATE FILE (do not fold this into tailwind.min.css): Program.cs serves everything outside /portal/ with `Cache-Control: public, max-age=31536000, immutable` and no ?v= convention. Editing an existing stylesheet therefore never reaches a returning browser. New design work goes in a NEW file, linked with an explicit ?v= stamp. Bump the ?v= in _Layout.cshtml + homePage.cshtml whenever this file changes. ALL selectors are `fw-` prefixed. The design's source used generic names (.card, .nav, .btn, .tile, .wrap) which collide with forum.css, fowara-forms.css and Tailwind utilities — the prefix is deliberate, not decoration. DELIBERATE DEVIATIONS FROM THE DESIGN SOURCE (all required by Rule 23 / aeo-rules.md — do not "fix" these back): 1. Google Fonts @import removed. Fonts are self-hosted (/css/fonts.css). 2. --fw-ink-3 is #6f6f6f, not the design's #8d8d8d. #8d8d8d on white is 3.0:1 and fails WCAG AA for the footer strip and proof-context lines. #6f6f6f is 4.6:1. #8d8d8d survives only as --fw-ink-faint (non-text). 3. Inline text links on white use #0043ce (--fw-link), per docs/fowara-agency/development/frontend/brand-design-tokens.md: "#0f62fe on dark; #0043ce on white." #0f62fe is retained for button fills, rules, numerals and other non-body-text accents. 4. A mobile menu exists. The design simply did `.nav{display:none}` under 900px with nothing to replace it, which strands every nav link on phones. 5. Tap targets are >= 44px on touch viewports. ========================================================================= */ /* --------------------------------------------------------------------------- Font weight range fonts.css declares IBM Plex Sans as `font-weight: 400 700`, but the shipped IBMPlexSans-Regular.woff2 is a variable font whose wght axis starts at 100. The hairline 300 weight is the signature of this design, so widen the range. Redeclared here (not only in fonts.css) because fonts.css is already in browser caches for a year. Same file, same unicode-range — no extra download. --------------------------------------------------------------------------- */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------------- Tokens --------------------------------------------------------------------------- */ :root { --fw-blue: #0f62fe; /* fills, rules, numerals, accents */ --fw-blue-700: #0043ce; /* button hover + text links on white */ --fw-link: #0043ce; /* inline text links on light ground */ --fw-ink: #161616; --fw-ink-2: #525252; --fw-ink-3: #6f6f6f; /* smallest text that must stay AA-legible */ --fw-ink-faint: #8d8d8d; /* decorative only — never body copy */ --fw-rule: #e0e0e0; --fw-bg: #ffffff; --fw-bg-soft: #f7f7f7; --fw-tint: #e5f0ff; --fw-band: #1e293b; --fw-band-ink: #c6d3e1; /* Content width. 1120px is the design's measure and is what the homepage uses. _Layout sets .fw-chrome-wide on for the legacy pages, whose bodies are still max-w-7xl (1280px) — that keeps the shared header and footer aligned with the page content underneath them instead of sitting 160px narrower than it. Remove the override as pages are redesigned. */ --fw-maxw: 1120px; } .fw-chrome-wide { --fw-maxw: 1280px; } /* --------------------------------------------------------------------------- Primitives --------------------------------------------------------------------------- */ .fw-wrap { max-width: var(--fw-maxw); margin: 0 auto; padding: 0 32px; } .fw-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; } .fw-kicker { font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--fw-blue-700); } .fw-rule-top { border-top: 1px solid var(--fw-rule); } .fw-textlink { font-weight: 500; color: var(--fw-link); } .fw-textlink::after { content: ' \2192'; } /* Visible keyboard focus everywhere in the new chrome (Rule 23). */ .fw-page a:focus-visible, .fw-page button:focus-visible, .fw-page summary:focus-visible, .fw-page input:focus-visible, .fw-topbar a:focus-visible, .fw-topbar button:focus-visible, .fw-footer a:focus-visible, .fw-footer button:focus-visible, .fw-footer input:focus-visible { outline: 2px solid var(--fw-blue); outline-offset: 2px; } /* Screen-reader-only. Distinct from .fw-hp (the form honeypot) — same visual result, opposite intent, and conflating them makes the markup lie. */ .fw-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fw-skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fw-ink); color: #fff; padding: 12px 20px; font: 500 14px/1 'IBM Plex Sans', system-ui, sans-serif; } .fw-skiplink:focus { left: 0; text-decoration: none; } /* --------------------------------------------------------------------------- Scoped normalize The design source assumed `* { box-sizing: border-box }` and DEFAULT browser paragraph margins. This site ships Tailwind Preflight, which zeroes p margins. Depending on either one would make the layout differ between the homepage and a _Layout page, so the chrome normalizes its own subtree and every margin that matters is stated explicitly below. Scoped, so /portal and the forum are untouched. --------------------------------------------------------------------------- */ .fw-page, .fw-page *, .fw-page *::before, .fw-page *::after, .fw-topbar, .fw-topbar *, .fw-topbar *::before, .fw-topbar *::after, .fw-footer, .fw-footer *, .fw-footer *::before, .fw-footer *::after { box-sizing: border-box; } /* Page shell — scoped so these resets never leak into /portal or the forum. */ .fw-page { background: var(--fw-bg); color: var(--fw-ink); font: 400 16px/1.55 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; margin: 0; } .fw-page p { margin: 0 0 1em; } .fw-page p:last-child { margin-bottom: 0; } .fw-page a { color: var(--fw-link); text-decoration: none; } .fw-page a:hover { text-decoration: underline; } .fw-page h1, .fw-page h2, .fw-page h3, .fw-page h4 { margin: 0; font-weight: 400; } /* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .fw-btn { display: inline-block; background: var(--fw-blue); color: #fff; font: 500 15px/1 'IBM Plex Sans', system-ui, sans-serif; padding: 14px 24px; border: 1px solid var(--fw-blue); cursor: pointer; } .fw-btn:hover { background: var(--fw-blue-700); border-color: var(--fw-blue-700); color: #fff; text-decoration: none; } .fw-btn-sm { padding: 12px 18px; font-size: 14px; } .fw-btn-ghost { background: transparent; color: var(--fw-blue-700); } .fw-btn-ghost:hover { background: var(--fw-tint); color: var(--fw-blue-700); } /* --------------------------------------------------------------------------- Header --------------------------------------------------------------------------- */ .fw-topbar { border-bottom: 1px solid var(--fw-rule); background: var(--fw-bg); position: sticky; top: 0; z-index: 50; font: 400 16px/1.55 'IBM Plex Sans', system-ui, sans-serif; } .fw-topbar .fw-wrap { display: flex; align-items: center; gap: 36px; height: 64px; } .fw-logo { font: 600 20px/1 'IBM Plex Sans', system-ui, sans-serif; color: var(--fw-ink); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; } .fw-logo:hover { text-decoration: none; } .fw-logo b { color: var(--fw-blue); font-weight: 600; } .fw-nav { display: flex; gap: 28px; align-items: center; } .fw-nav a { font: 400 14px/1 'IBM Plex Sans', system-ui, sans-serif; color: var(--fw-ink-2); text-decoration: none; padding: 6px 0; } .fw-nav a:hover { color: var(--fw-ink); text-decoration: none; } .fw-nav a.fw-active { color: var(--fw-ink); border-bottom: 2px solid var(--fw-blue); padding-bottom: 4px; } .fw-spacer { flex: 1; } /* Hamburger — hidden on desktop, 44px target on touch. */ .fw-navtoggle { display: none; background: none; border: 1px solid var(--fw-rule); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; color: var(--fw-ink); padding: 0; } .fw-navtoggle svg { width: 20px; height: 20px; } .fw-mobilenav { display: none; border-top: 1px solid var(--fw-rule); background: var(--fw-bg); } .fw-mobilenav.fw-open { display: block; } .fw-mobilenav a { display: flex; align-items: center; min-height: 48px; padding: 0 32px; font: 400 16px/1.4 'IBM Plex Sans', system-ui, sans-serif; color: var(--fw-ink-2); border-bottom: 1px solid var(--fw-rule); text-decoration: none; } .fw-mobilenav a:last-child { border-bottom: 0; } .fw-mobilenav a:hover { color: var(--fw-ink); background: var(--fw-bg-soft); text-decoration: none; } .fw-mobilenav .fw-mobilecta { color: var(--fw-blue-700); font-weight: 500; } /* --------------------------------------------------------------------------- Hero --------------------------------------------------------------------------- */ .fw-hero { padding: 112px 0 96px; } .fw-hero h1 { font-weight: 300; font-size: 56px; line-height: 1.12; letter-spacing: -.015em; max-width: 900px; text-wrap: pretty; } .fw-hero .fw-sub { font-size: 19px; line-height: 1.6; color: var(--fw-ink-2); max-width: 680px; margin-top: 28px; } .fw-hero .fw-ctas { display: flex; gap: 16px; margin-top: 44px; flex-wrap: wrap; align-items: center; } .fw-hero .fw-sec-cta { font-size: 15px; } /* --------------------------------------------------------------------------- Who this is for — rule grid, sharp corners, no shadows --------------------------------------------------------------------------- */ .fw-who { padding: 88px 0; } .fw-who .fw-intro { font-size: 15px; color: var(--fw-ink-2); margin: 14px 0 40px; } .fw-cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--fw-rule); border-left: 1px solid var(--fw-rule); } .fw-card { border-right: 1px solid var(--fw-rule); border-bottom: 1px solid var(--fw-rule); padding: 32px 28px 40px; } .fw-card::before { content: ''; display: block; width: 32px; height: 2px; background: var(--fw-blue); margin-bottom: 22px; } .fw-card h3 { font: 500 19px/1.3 'IBM Plex Sans', system-ui, sans-serif; margin-bottom: 12px; } .fw-card p { margin: 0; font-size: 15px; color: var(--fw-ink-2); } /* --------------------------------------------------------------------------- Section headings --------------------------------------------------------------------------- */ .fw-who h2, .fw-how h2, .fw-cap h2, .fw-teaser h2 { font-weight: 300; font-size: 36px; letter-spacing: -.01em; } /* --------------------------------------------------------------------------- How it works — numbered steps --------------------------------------------------------------------------- */ .fw-how { padding: 88px 0; } .fw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; } .fw-step .fw-num { font: 400 44px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--fw-blue); } .fw-step h3 { font: 500 19px/1.3 'IBM Plex Sans', system-ui, sans-serif; margin: 18px 0 10px; } .fw-step p { margin: 0; font-size: 15px; color: var(--fw-ink-2); } /* --------------------------------------------------------------------------- Proof strip — Carbon data-tile pattern --------------------------------------------------------------------------- */ .fw-proof { padding: 72px 0; background: var(--fw-bg-soft); } .fw-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .fw-tile { border-top: 2px solid var(--fw-ink); padding-top: 18px; } .fw-tile .fw-n { font: 300 44px/1.05 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: -.02em; } .fw-tile .fw-l { font-size: 13px; color: var(--fw-ink-2); margin-top: 8px; } .fw-proof .fw-ctx { font-size: 13px; color: var(--fw-ink-3); margin-top: 36px; } /* --------------------------------------------------------------------------- Capabilities — rows, not cards --------------------------------------------------------------------------- */ .fw-cap { padding: 88px 0; } .fw-caprows { margin-top: 48px; border-top: 1px solid var(--fw-rule); } .fw-caprow { display: grid; grid-template-columns: 320px 1fr; gap: 40px; padding: 28px 0; border-bottom: 1px solid var(--fw-rule); } .fw-caprow h3 { font: 500 18px/1.35 'IBM Plex Sans', system-ui, sans-serif; } .fw-caprow p { margin: 0; font-size: 15px; color: var(--fw-ink-2); } .fw-cap .fw-rowlink { display: inline-block; margin-top: 28px; } /* --------------------------------------------------------------------------- Security band — the single tinted band on the page --------------------------------------------------------------------------- */ .fw-band { background: var(--fw-band); color: #fff; padding: 72px 0; } .fw-band h2 { font-weight: 300; font-size: 32px; letter-spacing: -.01em; max-width: 640px; } .fw-band p { font-size: 16px; line-height: 1.65; color: var(--fw-band-ink); max-width: 760px; margin: 22px 0 0; } /* --------------------------------------------------------------------------- Case-study teaser — asymmetric split + line-art diagram --------------------------------------------------------------------------- */ .fw-teaser { padding: 96px 0; } .fw-teaser .fw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .fw-teaser h2 { margin: 16px 0 20px; text-wrap: pretty; } .fw-teaser p { font-size: 16px; color: var(--fw-ink-2); margin: 0 0 26px; } .fw-diagram { border: 1px solid var(--fw-rule); padding: 24px; } .fw-diagram .fw-dl { stroke: #161616; stroke-width: 1; fill: none; } .fw-diagram .fw-db { stroke: #0f62fe; stroke-width: 1.5; fill: none; } .fw-diagram .fw-dt { font: 500 11px 'IBM Plex Mono', ui-monospace, monospace; fill: #161616; } .fw-diagram .fw-ds { font: 400 10px 'IBM Plex Mono', ui-monospace, monospace; fill: #525252; } .fw-diagram .fw-dbt { font: 500 11px 'IBM Plex Mono', ui-monospace, monospace; fill: #0043ce; } /* --------------------------------------------------------------------------- Final CTA + micro-FAQ --------------------------------------------------------------------------- */ .fw-final { padding: 96px 0; text-align: center; } .fw-final h2 { font-weight: 300; font-size: 36px; } .fw-final > .fw-wrap > p { font-size: 16px; color: var(--fw-ink-2); max-width: 560px; margin: 20px auto 36px; text-wrap: pretty; } /* Native details/summary — aeo-rules.md rule 4: no Alpine accordions, the answer text must be in the DOM for crawlers that cannot run JavaScript. */ .fw-faq { max-width: 680px; margin: 64px auto 0; text-align: left; border-top: 1px solid var(--fw-rule); } .fw-faq details { border-bottom: 1px solid var(--fw-rule); } .fw-faq summary { cursor: pointer; padding: 20px 32px 20px 0; font: 500 16px/1.4 'IBM Plex Sans', system-ui, sans-serif; list-style: none; position: relative; } .fw-faq summary::-webkit-details-marker { display: none; } .fw-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 24px/1 'IBM Plex Sans', system-ui, sans-serif; color: var(--fw-blue); } .fw-faq details[open] summary::after { content: '\2013'; } .fw-faq .fw-a { padding: 0 0 22px; font-size: 15px; color: var(--fw-ink-2); } /* --------------------------------------------------------------------------- Footer --------------------------------------------------------------------------- */ .fw-footer { border-top: 1px solid var(--fw-rule); margin-top: 96px; background: var(--fw-bg); color: var(--fw-ink); font: 400 16px/1.55 'IBM Plex Sans', system-ui, sans-serif; } .fw-footer .fw-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding: 56px 0; } .fw-footer h4 { font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--fw-ink-3); margin: 0 0 18px; } .fw-footer .fw-blurb { font-size: 14px; color: var(--fw-ink-2); max-width: 320px; margin: 16px 0 0; } .fw-footer .fw-flist { display: flex; flex-direction: column; gap: 10px; } .fw-footer .fw-flist a { color: var(--fw-ink-2); font-size: 14px; } .fw-footer .fw-flist a:hover { color: var(--fw-ink); } .fw-footer .fw-strip { border-top: 1px solid var(--fw-rule); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--fw-ink-3); flex-wrap: wrap; } .fw-footer .fw-strip a { color: var(--fw-ink-3); } .fw-footer .fw-strip a:hover { color: var(--fw-ink); } /* Newsletter — Rule 1 form, posts to /api/forms/submit */ .fw-nl { display: flex; gap: 0; margin: 0 0 12px; max-width: 320px; } .fw-nl input[type="email"] { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--fw-rule); border-right: 0; background: var(--fw-bg); color: var(--fw-ink); font: 400 14px/1.2 'IBM Plex Sans', system-ui, sans-serif; } .fw-nl input[type="email"]::placeholder { color: var(--fw-ink-3); } .fw-nl button { padding: 11px 16px; border: 1px solid var(--fw-blue); background: var(--fw-blue); color: #fff; font: 500 14px/1.2 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; white-space: nowrap; } .fw-nl button:hover { background: var(--fw-blue-700); border-color: var(--fw-blue-700); } .fw-nlmsg { font-size: 13px; margin: 0 0 12px; } .fw-nlmsg.fw-ok { color: #0e6027; } .fw-nlmsg.fw-err { color: #a2191f; } .fw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fw-social { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .fw-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--fw-ink-2); border: 1px solid var(--fw-rule); } .fw-social a:hover { color: var(--fw-ink); border-color: var(--fw-ink-3); text-decoration: none; } .fw-social svg { width: 16px; height: 16px; } /* Longtail answers — aeo-rules.md rule 5 (answer-first, title-attributed cross-links). Referenced by the Speakable schema selector .fw-longtail. */ .fw-longtail h5 { font: 500 14px/1.35 'IBM Plex Sans', system-ui, sans-serif; margin: 0 0 6px; color: var(--fw-ink); } .fw-longtail p { font-size: 13px; line-height: 1.55; color: var(--fw-ink-2); margin: 0 0 6px; } .fw-longtail .fw-qa { margin-bottom: 20px; } .fw-longtail .fw-qa a { font-size: 12px; font-weight: 500; } /* Weighted tag cloud — aeo-rules.md rule 7. Weight is carried by real heading/strong elements, not by CSS alone, so crawlers see the emphasis. */ .fw-tagcloud { line-height: 2.1; margin-top: 18px; } .fw-tagcloud a { display: inline-block; margin-right: 10px; } .fw-tagcloud h5 { display: inline; margin: 0; } .fw-tagcloud h5 a { font: 600 16px/1 'IBM Plex Sans', system-ui, sans-serif; color: var(--fw-ink); } .fw-tagcloud strong a { font: 500 14px/1 'IBM Plex Sans', system-ui, sans-serif; color: var(--fw-ink-2); } .fw-tagcloud > a { font: 400 12px/1 'IBM Plex Sans', system-ui, sans-serif; color: var(--fw-ink-3); } /* --------------------------------------------------------------------------- Responsive --------------------------------------------------------------------------- */ @media (max-width: 1080px) { .fw-footer .fw-cols { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 900px) { .fw-wrap { padding: 0 20px; } .fw-nav { display: none; } .fw-navtoggle { display: inline-flex; } .fw-topbar .fw-wrap { gap: 16px; } .fw-topbar .fw-headercta { display: none; } .fw-mobilenav a { padding: 0 20px; } .fw-hero { padding: 72px 0 64px; } .fw-hero h1 { font-size: 36px; } .fw-hero .fw-sub { font-size: 17px; } .fw-cards, .fw-steps, .fw-tiles { grid-template-columns: 1fr; } .fw-steps { gap: 36px; } .fw-tiles { gap: 24px; } .fw-caprow { grid-template-columns: 1fr; gap: 10px; } .fw-teaser .fw-split { grid-template-columns: 1fr; gap: 40px; } .fw-who h2, .fw-how h2, .fw-cap h2, .fw-final h2 { font-size: 28px; } .fw-band h2 { font-size: 26px; } .fw-who, .fw-how, .fw-cap { padding: 64px 0; } .fw-teaser, .fw-final { padding: 72px 0; } .fw-footer .fw-cols { grid-template-columns: 1fr; gap: 36px; padding: 44px 0; } .fw-footer .fw-strip { flex-direction: column; gap: 8px; } /* Rule 23 — 44px minimum tap target on touch viewports. */ .fw-footer .fw-flist a, .fw-footer .fw-strip a { min-height: 44px; display: flex; align-items: center; } .fw-tagcloud { line-height: 2.6; } .fw-tagcloud a { padding: 6px 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }