/* ============================================================================= fnfpanel — site stylesheet ----------------------------------------------------------------------------- Hand-authored from the measured tokens in /design-tokens.json and /reference/DESIGN_SPEC.md. NOTHING here is copied from WemX: no Blade, no theme file, no compiled vendor CSS. The live site loads Tailwind's in-browser JIT compiler, Flowbite and Boxicons from three CDNs on every page view; this file replaces all three with ~20 KB of static CSS and zero third-party requests. Dark-only by decision (DESIGN_SPEC §6): the live markup carries light-mode utilities that are never exercised, so they are not carried over. Layout order: 1. tokens 8. cards 2. reset/base 9. hero + glass panel 3. a11y 10. marquee 4. layout 11. pricing 5. type 12. header / footer 6. buttons 13. legacy content compatibility layer 7. pills/badges 14. responsive + reduced motion ============================================================================= */ /* ------------------------------------------------------------------ 1. tokens */ :root { /* accent ramp `fnf` — a colder iris than Tailwind purple/violet/indigo */ --fnf-50: #eef0ff; --fnf-100: #e0e3ff; --fnf-200: #c8ccff; --fnf-300: #a7a8fd; --fnf-400: #8b85fb; --fnf-500: #6d5efc; /* brand: gradient starts, glows, hover borders */ --fnf-600: #5a45ef; /* solid button fill */ --fnf-700: #4a34cf; --fnf-800: #3d2ba6; --fnf-900: #342783; --cyan: #22d3ee; /* gradient partner + glow ONLY. Never a standalone fill. */ --bg: #080b12; --bg-alt: #070a11; --bg-alt-2: #0a0d16; --bg-alt-3: #0b0f1a; --surface: rgba(255, 255, 255, 0.025); --surface-hover: rgba(255, 255, 255, 0.045); --surface-soft: rgba(255, 255, 255, 0.02); --border: rgba(255, 255, 255, 0.07); --border-soft: rgba(255, 255, 255, 0.06); --border-panel: rgba(255, 255, 255, 0.08); --border-hover: rgba(109, 94, 252, 0.45); /* Text. Contrast vs --bg #080b12, computed (WCAG 2.1 relative luminance): #ffffff 19.68:1 · #e2e8f0 15.97:1 · #cbd5e1 13.26:1 · #94a3b8 7.68:1 #a7a8fd 9.06:1 · #8b85fb 6.42:1 · #8b83ff 6.36:1 All pass AA (4.5:1) for normal text; all but the last two pass AAA (7:1). */ --text: #ffffff; --text-body: #e2e8f0; --text-muted: #cbd5e1; --text-dim: #94a3b8; --text-accent: #8b83ff; --eyebrow: #8b85fb; --radius-sm: 0.5rem; --radius-md: 0.7rem; --radius-lg: 0.8rem; --radius-card: 1rem; --radius-panel: 1.25rem; --container: 1280px; --prose: 42rem; --pad-x: 1.5rem; --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif; --shadow-panel: 0 34px 70px -24px rgba(0, 0, 0, 0.65); --shadow-btn: 0 10px 26px -8px rgba(109, 94, 252, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); --shadow-btn-hover: 0 14px 32px -8px rgba(109, 94, 252, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.18); --shadow-tile: 0 8px 22px -8px rgba(109, 94, 252, 0.60); /* Minimum interactive box on touch. WCAG 2.5.5 / Apple HIG both land on 44px. */ --tap: 44px; } /* ------------------------------------------------------------- 2. reset/base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; /* sticky header height + breathing room */ } body { margin: 0; background: var(--bg); color: var(--text-body); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip, not hidden: `hidden` on silently kills position:sticky in Safari */ overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } img, svg { max-width: 100%; height: auto; display: block; } ::selection { background: rgba(124, 107, 255, 0.30); } a { color: var(--text-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--fnf-300); } hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; } /* Forms: 16px minimum, because iOS Safari zooms the viewport on focus below that. */ input, select, textarea, button { font-family: inherit; font-size: 1rem; } /* --------------------------------------------------------------------- 3. a11y */ /* Parked off-canvas, snaps in on keyboard focus. First tab stop on every page. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fnf-700); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; } /* Visible focus everywhere. Never `outline: none` without a replacement. */ :focus-visible { outline: 2px solid var(--fnf-300); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ 4. layout */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: 4rem; } .section--alt { background: var(--bg-alt); } .section--alt-2 { background: var(--bg-alt-2); } .section--alt-3 { background: var(--bg-alt-3); } .section--tight { padding-block: 2.5rem; } .section-head { max-width: var(--prose); margin-inline: auto; text-align: center; } .section-head--left { margin-inline: 0; text-align: left; } .grid { display: grid; gap: 1.5rem; } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr; } .stack > * + * { margin-top: 1rem; } /* -------------------------------------------------------------------- 5. type */ h1, h2, h3, h4 { color: var(--text); font-weight: 700; margin: 0 0 0.5rem; } h1, h2 { font-family: var(--font-display); letter-spacing: -0.02em; } h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); line-height: 1.08; } h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.15; } h3 { font-size: 1.05rem; line-height: 1.35; } p { margin: 0 0 1rem; } .eyebrow { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 0.6rem; } .lede { color: var(--text-muted); font-size: 1.02rem; margin-bottom: 0; } .muted { color: var(--text-muted); } .dim { color: var(--text-dim); } .small { font-size: 0.8rem; } .gradient-text { background: linear-gradient(135deg, var(--fnf-300) 0%, var(--fnf-500) 45%, var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ----------------------------------------------------------------- 6. buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--tap); padding: 0.75rem 1.4rem; border-radius: var(--radius-lg); font-size: 0.95rem; font-weight: 600; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } /* White on this gradient measures 4.51:1 at the light end (#6d5efc) and 5.95:1 at the dark end (#5a45ef) — AA for normal text across the whole fill. */ .btn--primary { background: linear-gradient(135deg, var(--fnf-500) 0%, var(--fnf-600) 100%); color: #fff; box-shadow: var(--shadow-btn); } .btn--primary:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.07); box-shadow: var(--shadow-btn-hover); } .btn--ghost { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.12); color: var(--text-body); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); color: #fff; } .btn--block { width: 100%; } .btn--sm { padding: 0.55rem 1rem; font-size: 0.875rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--fnf-300); text-decoration: none; min-height: var(--tap); } .link-arrow:hover { color: var(--fnf-200); text-decoration: underline; } /* ------------------------------------------------------------ 7. pills/badges */ .pill { display: inline-flex; /* fixes DESIGN_SPEC defect #6 — the live pill is a block and stretches the full card width on mobile */ align-items: center; gap: 0.45rem; width: auto; max-width: 100%; padding: 0.35rem 0.8rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.78rem; font-weight: 500; } .pill--accent { border-color: rgba(109, 94, 252, 0.30); background: rgba(109, 94, 252, 0.12); color: var(--fnf-300); font-weight: 600; } .pill__dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: #28c840; flex: none; } .badge { display: inline-flex; align-items: center; align-self: flex-start; width: auto; padding: 0.2rem 0.6rem; border-radius: 9999px; background: rgba(109, 94, 252, 0.16); border: 1px solid rgba(109, 94, 252, 0.30); color: var(--fnf-300); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* -------------------------------------------------------------------- 8. cards */ .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.5rem; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .card:hover { transform: translateY(-3px); border-color: var(--border-hover); background: var(--surface-hover); } /* Card headings are h2/h3 for document structure but always read at card scale. */ .card__title { margin: 0.85rem 0 0.35rem; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.35; letter-spacing: normal; } .card__body { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1rem; } .card__foot { margin-top: auto; padding-top: 0.5rem; } .card--feature { background: var(--surface-soft); padding: 1.4rem; } .card--feature:hover { transform: none; } .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.85rem; height: 2.85rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(109, 94, 252, 0.95), rgba(34, 211, 238, 0.55)); box-shadow: var(--shadow-tile); color: #fff; flex: none; } .icon-tile svg { width: 1.45rem; height: 1.45rem; } .icon-tile--quiet { width: 2.6rem; height: 2.6rem; border-radius: var(--radius-md); background: rgba(109, 94, 252, 0.12); border: 1px solid rgba(109, 94, 252, 0.28); box-shadow: none; color: var(--fnf-300); } .icon-tile--quiet svg { width: 1.3rem; height: 1.3rem; } .cta-band { position: relative; overflow: hidden; border-radius: var(--radius-panel); border: 1px solid rgba(109, 94, 252, 0.25); background: linear-gradient(135deg, rgba(109, 94, 252, 0.18), rgba(34, 211, 238, 0.08)); padding: 3rem 1.5rem; text-align: center; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(109, 94, 252, 0.35), transparent 70%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; } /* --------------------------------------------------------- 9. hero + panel */ .hero { position: relative; padding-block: 3.5rem 4rem; overflow: hidden; } .hero__glow, .hero__grid { position: absolute; pointer-events: none; } .hero__glow { width: 920px; height: 620px; top: -220px; left: 50%; margin-left: -460px; background: radial-gradient(50% 50% at 50% 50%, rgba(109, 94, 252, 0.30), transparent 70%); filter: blur(30px); } .hero__glow--cyan { width: 380px; height: 380px; top: 140px; right: -80px; left: auto; margin-left: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(34, 211, 238, 0.18), transparent 70%); filter: blur(28px); } .hero__grid { inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 0%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 85% 60% at 50% 0%, #000 35%, transparent 100%); } .hero__inner { position: relative; display: grid; gap: 2.5rem; } .hero__copy { max-width: var(--prose); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 2rem; } .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; } .stat__value { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--fnf-300); } .stat__label { font-size: 0.8rem; color: var(--text-dim); } .panel { position: relative; border-radius: var(--radius-panel); border: 1px solid var(--border-panel); background: linear-gradient(180deg, rgba(20, 24, 38, 0.92), rgba(12, 15, 26, 0.92)); box-shadow: var(--shadow-panel); overflow: hidden; } /* 1px gradient hairline, drawn as a masked ring so it does not eat a border slot */ .panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(109, 94, 252, 0.55), rgba(34, 211, 238, 0.25), transparent 55%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .panel__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-soft); font-size: 0.78rem; color: var(--text-dim); } .panel__lights { display: flex; gap: 0.375rem; } .panel__lights i { width: 0.7rem; height: 0.7rem; border-radius: 9999px; display: block; } .panel__host { margin-inline: auto; } .panel__body { padding: 1.25rem 1rem; } .panel__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } .panel__deploy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0.75rem 0 1.25rem; } .panel__game { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.6rem 0.25rem; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); font-size: 0.7rem; color: var(--text-dim); } .panel__game img { width: 28px; height: 28px; } .meter + .meter { margin-top: 0.7rem; } .meter__row { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-dim); margin-bottom: 0.3rem; } .meter__track { height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .meter__fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--fnf-500), var(--cyan)); } /* Fixed decorative widths live here rather than in a style="" attribute, so the Content-Security-Policy can stay at `style-src 'self'` with no 'unsafe-inline'. */ .w-18 { width: 18%; } .w-42 { width: 42%; } .w-100 { width: 100%; } .sprite { display: none; } /* Default box for every sprite icon. The carries the viewBox, so an `` has NO intrinsic size. Combined with the `svg { max-width: 100%; height: auto }` reset in §2 that makes a bare icon expand to fill whatever flex/inline space it is given -- a 24px arrow rendering ~200px wide inside a button. Sized in `em` so an icon always tracks the text it sits beside, and `flex: none` so it never stretches. The two tile rules and the feature-list rule below are more specific and still win. */ .ico { width: 1.15em; height: 1.15em; flex: none; } .panel__foot { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; border-top: 1px solid var(--border-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: var(--fnf-300); } /* ---------------------------------------------------------------- 10. marquee */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee__track { display: flex; gap: 1rem; width: max-content; animation: marquee 48s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__tile { width: 132px; flex: none; padding: 1.3rem 1rem; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); text-align: center; } .marquee__tile img { width: 56px; height: 56px; margin: 0 auto 0.6rem; } .marquee__tile span { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee__caption { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: center; justify-content: center; text-align: center; margin: 0; } .panel__lights .l-r { background: #ff5f57; } .panel__lights .l-y { background: #febc2e; } .panel__lights .l-g { background: #28c840; } /* ---------------------------------------------------------------- 11. pricing */ .price { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.75rem 0 0.25rem; } .price__amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1; } .price__interval { font-size: 0.9rem; color: var(--text-dim); } .price__note { font-size: 0.8rem; color: var(--text-dim); margin: 0 0 0.75rem; } .feature-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; } .feature-list li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; color: var(--text-muted); } .feature-list svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.28rem; color: var(--fnf-300); } .card--pricing { padding: 1.75rem 1.5rem; } .card--featured { border-color: rgba(109, 94, 252, 0.45); background: var(--surface-hover); } .breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 1rem; padding: 0; list-style: none; } .breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: rgba(255, 255, 255, 0.25); } /* WCAG 2.2 §2.5.8 puts the floor for an inline control at 24x24. At 0.8rem the breadcrumb links were 15px tall. Padded rather than blown up to 44px, which would wreck the crumb rhythm. */ .breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-dim); text-decoration: none; } .breadcrumb a:hover { color: var(--fnf-300); text-decoration: underline; } .notice { border: 1px solid rgba(109, 94, 252, 0.28); background: rgba(109, 94, 252, 0.10); border-radius: var(--radius-md); padding: 1rem 1.15rem; color: var(--text-muted); font-size: 0.9rem; } .notice p:last-child { margin-bottom: 0; } /* Document layout: prose column + a rail of related links. The live marketing pages clamp the column to 42rem but leave it hard against the left edge of a 1280px container, wasting ~40% of the viewport (DESIGN_SPEC §7 #8). Here the same 42rem column is centred, and above 1024px the leftover space earns its keep as a related-links rail instead of sitting empty. */ .doc { display: grid; gap: 2.5rem; justify-content: center; } .doc__body { max-width: var(--prose); min-width: 0; } .doc__body--centered { margin-inline: auto; text-align: center; } .doc__body--centered .rail-list { justify-content: center; } .doc__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .doc__body--centered .doc__cta { justify-content: center; } .doc__rail { min-width: 0; } .rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .rail-list--inline { flex-direction: row; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 1.5rem; } .rail-list li a { display: flex; align-items: center; min-height: var(--tap); color: var(--text-muted); font-size: 0.9rem; text-decoration: none; border-bottom: 1px solid var(--border-soft); } /* Height already comes from the shared rule; a short label like "Home" was still only 41px WIDE, so the row variant needs a floor on both axes. */ .rail-list--inline li a { border-bottom: 0; min-width: var(--tap); justify-content: center; } .rail-list li a:hover { color: #fff; } /* Product detail: copy left, sticky buy box right. */ .product { display: grid; gap: 2rem; } .product__copy { min-width: 0; max-width: var(--prose); } .product__features { margin-top: 1.5rem; } .product__buy { align-self: start; } .product__meta { margin: 1rem 0 0; } .article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .article-list h3 { margin: 0 0 0.35rem; font-size: 1.1rem; } .article-list a { text-decoration: none; } .article-list a:hover h3 { color: var(--fnf-300); } /* -------------------------------------------------------- 12. header / footer */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(8, 11, 18, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; } /* min-height, not just line box: the header brand is a primary tap target on mobile and its 32px logo alone left it under the 44px floor. */ .brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap); text-decoration: none; color: #fff; font-weight: 700; } .brand img { width: 32px; height: 32px; } .brand span { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.02em; } .nav { display: none; align-items: center; gap: 0.25rem; margin-left: auto; } .nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 0.7rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.9rem; text-decoration: none; } .nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .nav a[aria-current="page"] { color: #fff; background: rgba(109, 94, 252, 0.15); } .nav-actions { display: none; align-items: center; gap: 0.5rem; } .nav-actions .btn { padding: 0.6rem 1rem; font-size: 0.875rem; } /* Mobile menu is a

element: no JavaScript, keyboard-operable, and it still works if scripts fail. */ .menu { margin-left: auto; } .menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-body); cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } .menu__panel { position: absolute; left: 0; right: 0; background: var(--bg-alt-2); border-bottom: 1px solid var(--border); padding: 0.5rem var(--pad-x) 1rem; } .menu__panel a { display: flex; align-items: center; min-height: var(--tap); padding: 0 0.25rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border-soft); } .menu__panel a:hover { color: #fff; } .menu__panel .btn { margin-top: 0.85rem; width: 100%; } .site-footer { border-top: 1px solid var(--border); background: var(--bg-alt-2); padding-block: 3rem 1.5rem; margin-top: 4rem; } .site-footer__cols { display: grid; gap: 2rem; } .site-footer h2 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.75rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--text-muted); font-size: 0.9rem; text-decoration: none; } .site-footer li a:hover { color: #fff; text-decoration: underline; } .site-footer__brandcopy { color: var(--text-dim); font-size: 0.875rem; max-width: 22rem; margin-top: 0.75rem; } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; border-top: 1px solid var(--border-soft); margin-top: 2.5rem; padding-top: 1.25rem; color: var(--text-dim); font-size: 0.8rem; } /* ------------------------------------------- 13. legacy content compat layer */ /* Kev's marketing copy was authored inside WemX with Tailwind utility classes baked into the HTML (`bg-white dark:bg-gray-800`, `text-primary-600`, `grid-cols-1`...). The copy is his and moves verbatim; the class names came along for the ride. Rather than rewrite his HTML — which would risk mangling the text and would have to be redone every time he edits a page — this block re-implements exactly the 60-odd utilities that appear in the export, mapped onto the landing palette. Result: the old markup renders in the NEW design system, with no Tailwind on the page. Scoped to `.prose` so these short names can never leak into the app chrome. Regenerate the list with: grep -o 'class="[^"]*"' | tr ' ' '\n' | sort -u */ .prose { max-width: var(--prose); color: var(--text-body); } .prose > :first-child { margin-top: 0; } .prose h2 { font-size: 1.5rem; margin-top: 2.5rem; } .prose h3 { font-size: 1.1rem; margin-top: 1.5rem; } .prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1rem; } .prose li { margin-bottom: 0.35rem; } .prose ul.grid, .prose ul.flex, .prose ul.feature-list { list-style: none; padding-left: 0; } .prose strong { color: #fff; font-weight: 600; } .prose pre { background: var(--bg-alt-3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; overflow-x: auto; font-size: 0.85rem; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; color: var(--fnf-200); } .prose pre code { color: var(--text-body); } .prose .not-format { /* opt-out marker from the old typography plugin — no-op here */ } /* display / flex / grid */ .prose .flex { display: flex; } .prose .inline-flex { display: inline-flex; } .prose .inline-block { display: inline-block; } .prose .flex-col { flex-direction: column; } .prose .items-center { align-items: center; } .prose .items-start { align-items: flex-start; } .prose .justify-center { justify-content: center; } .prose .grid { display: grid; } .prose .grid-cols-1 { grid-template-columns: minmax(0, 1fr); } .prose .gap-2 { gap: 0.5rem; } .prose .gap-4 { gap: 1rem; } /* spacing */ .prose .mt-0\.5 { margin-top: 0.125rem; } .prose .mt-1 { margin-top: 0.25rem; } .prose .mt-2 { margin-top: 0.5rem; } .prose .mt-4 { margin-top: 1rem; } .prose .mt-5 { margin-top: 1.25rem; } .prose .mb-2 { margin-bottom: 0.5rem; } .prose .my-3 { margin-block: 0.75rem; } .prose .my-4 { margin-block: 1rem; } .prose .my-6 { margin-block: 1.5rem; } .prose .p-5 { padding: 1.25rem; } .prose .px-2 { padding-inline: 0.5rem; } .prose .px-4 { padding-inline: 1rem; } .prose .px-5 { padding-inline: 1.25rem; } .prose .px-6 { padding-inline: 1.5rem; } .prose .py-0\.5 { padding-block: 0.125rem; } .prose .py-2\.5 { padding-block: 0.625rem; } .prose .py-3 { padding-block: 0.75rem; } .prose .space-y-1\.5 > * + * { margin-top: 0.375rem; } /* type */ .prose .text-xs { font-size: 0.75rem; } .prose .text-sm { font-size: 0.875rem; } .prose .text-base { font-size: 1rem; } .prose .text-lg { font-size: 1.125rem; } .prose .text-3xl { font-size: 1.875rem; line-height: 1.15; } .prose .font-medium { font-weight: 500; } .prose .font-semibold { font-weight: 600; } .prose .font-bold { font-weight: 700; } .prose .font-extrabold { font-weight: 800; } /* colour — the `dark:` variants win because the site ships dark-only */ .prose .text-gray-900, .prose .dark\:text-white, .prose .text-white { color: #fff; } .prose .text-gray-600, .prose .dark\:text-gray-300 { color: var(--text-muted); } .prose .text-gray-500, .prose .dark\:text-gray-400 { color: var(--text-dim); } .prose .text-primary-600, .prose .dark\:text-primary-400 { color: var(--fnf-300); } .prose .text-primary-700, .prose .text-primary-800, .prose .dark\:text-primary-200, .prose .dark\:text-primary-300 { color: var(--fnf-200); } /* surfaces — flat greys become the translucent glass of the landing system */ .prose .bg-white, .prose .dark\:bg-gray-800 { background: var(--surface); } .prose .border { border: 1px solid var(--border); } .prose .border-gray-200, .prose .dark\:border-gray-700 { border-color: var(--border); } .prose .rounded-lg { border-radius: var(--radius-lg); } .prose .rounded-xl { border-radius: var(--radius-card); } .prose .rounded-full { border-radius: 9999px; } .prose .shadow-sm { box-shadow: none; } .prose .ring-2.ring-primary-500 { border-color: var(--border-hover); box-shadow: 0 0 0 1px rgba(109, 94, 252, 0.35); } .prose .bg-primary-100, .prose .dark\:bg-primary-900 { background: rgba(109, 94, 252, 0.16); border: 1px solid rgba(109, 94, 252, 0.30); } /* the embedded plan cards get the real card hover */ .prose .rounded-xl.border { transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .prose .rounded-xl.border:hover { transform: translateY(-3px); border-color: var(--border-hover); background: var(--surface-hover); } /* embedded CTAs become real primary buttons */ .prose a.bg-primary-600 { background: linear-gradient(135deg, var(--fnf-500) 0%, var(--fnf-600) 100%); color: #fff; min-height: var(--tap); box-shadow: var(--shadow-btn); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .prose a.bg-primary-600:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: var(--shadow-btn-hover); } /* ------------------------------------------- 14. responsive + reduced motion */ @media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cta-band { padding: 3.5rem 2.5rem; } .prose .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .site-footer__cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .section { padding-block: 6rem; } .section--tight { padding-block: 3rem; } .hero { padding-block: 5rem 6rem; } .hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 3rem; } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nav, .nav-actions { display: flex; } .menu { display: none; } .prose .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .doc { grid-template-columns: minmax(0, var(--prose)) minmax(0, 15rem); gap: 4rem; } .doc__rail { position: sticky; top: 6rem; align-self: start; } .doc__body--centered { grid-column: 1 / -1; } .product { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 3rem; } .product__buy { position: sticky; top: 6rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee__track { animation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { .site-header, .site-footer, .hero__glow, .hero__grid, .marquee { display: none; } body { background: #fff; color: #000; } }