/* ============================================================ NES web — design system Adaptive light/dark built on the NxtElections Design System (nes-graphic-design:nxtelections-design / theme.css). Light is the token default; the site ships forced dark via , which is what the marketing-web UI kit does. Color law: NxtNavy carries structure (headings, links, primary), and accents come from the swish palette — swish red for emphasis and CTAs, swish maroon for lines and secondary buttons, amber/teal/green for verticals. There is no flag palette in this system. The swish artwork carries the saturated color; the hexes below are sampled approximations for accents only and must never be used to reproduce a swish. Component styles mirror ui_kits/marketing-web/site.css. ============================================================ */ /* Adobe Typekit kit for itc-avant-garde-gothic-pro — direct ancestor of Century Gothic, used as the canonical web face. Each page loads the kit before this stylesheet so the font is available when site.css parses. */ /* ---------- Design tokens: theme-agnostic + light defaults ---------- */ :root { /* Print (canonical brand) — retained for print/PDF surfaces. */ --print-NxtNavy: #1A3C5E; --print-NxtLightNavy: #2A5A8A; --print-NxtBodyGray: #2D2D2D; --print-NxtSubtitleGray: #555555; --print-NxtTableStripe: #F4F7FA; --print-NxtRuleGray: #D0D8E0; --print-NxtCalloutBg: #DEE8F2; /* Swish accent palette — sampled approximations of the multicolor swish PNG. Use for state/vertical accents only; never reproduce the swish itself from these hexes (the swish is always a placed PNG). */ --swish-red: #C8233E; --swish-amber: #E2A024; --swish-maroon: #6B1B2C; --swish-teal: #3FA9B4; --swish-green: #4F9B4D; /* Light theme surfaces + text */ --bg: #FFFFFF; --bg-elevated: #F4F7FA; --bg-sunken: #DEE8F2; --fg: #2D2D2D; --fg-heading: #1A3C5E; /* NxtNavy */ --fg-muted: #555555; --fg-dim: #8A8F94; /* Light theme accents */ --accent: #2A5A8A; /* NxtLightNavy — links, primary */ --accent-hover: #1A3C5E; /* deepens to NxtNavy */ --accent-warm: #C8233E; /* swish red — emphasis, CTAs */ --accent-warm-hover: #A81B33; --accent-maroon: #6B1B2C; /* swish maroon — lines, outlines, secondary */ --accent-maroon-hover: #521320; --rule: #D0D8E0; --rule-strong: #A8B8C8; /* Font stack — one family for everything (headings, body, UI, the NXT wordmark). Differentiation comes from size + weight + tracking, not a second face. ITC Avant Garde Gothic Pro (Adobe Fonts, near-identical ancestor of Century Gothic) is the canonical web face; Century Gothic is picked up natively where Office is installed; Jost is the public Google-Fonts fallback. Do NOT substitute Montserrat. Do NOT use Barlow Condensed — earlier iterations did and that's been removed. */ --font-heading: 'itc-avant-garde-gothic-pro', 'Century Gothic', 'Jost', 'URW Gothic', 'Avant Garde', 'Avenir Next', Arial, sans-serif; --font-body: 'itc-avant-garde-gothic-pro', 'Century Gothic', 'Jost', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --size-hero: clamp(2.25rem, 5vw, 3.5rem); /* 36→56px */ --size-h1: clamp(1.75rem, 3.5vw, 2.5rem); /* 28→40px */ --size-h2: clamp(1.375rem, 2.5vw, 1.75rem); /* 22→28px */ --size-h3: 1.25rem; /* 20px */ --size-body: 1.0625rem; /* 17px */ --size-small: 0.9375rem; /* 15px */ --size-nav: 0.9375rem; --size-eyebrow: 0.75rem; /* 12px, all-caps tracked */ --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.65; --tracking-tight: -0.02em; /* hero */ --tracking-snug: -0.01em; /* headings */ --tracking-wide: 0.08em; /* eyebrows / nav meta */ --tracking-wider: 0.12em; /* product wordmark suffix */ --content-width: 1180px; --wide-width: 1520px; --measure: 78ch; /* readable line length, independent of column width */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --duration: 180ms; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* Semantic aliases */ --text-heading: var(--fg-heading); --text-body: var(--fg); --text-muted: var(--fg-muted); --text-link: var(--accent); --surface: var(--bg); --surface-card: var(--bg-elevated); --border: var(--rule); } /* ---------- Dark theme overrides ---------- Two paths, kept in sync: OS preference when no explicit theme is set, and an explicit data-theme/.theme-dark which always wins. Headings go near-white on dark rather than navy; accents brighten for contrast. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0A0A0A; --bg-elevated: #141414; --bg-sunken: #050505; --fg: #E8EAED; --fg-heading: #E8EAED; --fg-muted: #9AA0A6; --fg-dim: #6B7075; --accent: #5FA8E8; --accent-hover: #8BC3F0; --accent-warm: #E0405A; --accent-warm-hover: #EC6376; --accent-maroon: #B84656; --accent-maroon-hover: #C85A6A; --rule: #2A2A2A; --rule-strong: #3A3A3A; } } [data-theme="dark"], .theme-dark { --bg: #0A0A0A; --bg-elevated: #141414; --bg-sunken: #050505; --fg: #E8EAED; --fg-heading: #E8EAED; --fg-muted: #9AA0A6; --fg-dim: #6B7075; --accent: #5FA8E8; --accent-hover: #8BC3F0; --accent-warm: #E0405A; --accent-warm-hover: #EC6376; --accent-maroon: #B84656; --accent-maroon-hover: #C85A6A; --rule: #2A2A2A; --rule-strong: #3A3A3A; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--size-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); } /* EXPERIMENT — home only, so it can be compared against every other page. The near-black convention (Material's #121212) rather than the darker #0A0A0A the rest of the site uses. Delete this block to revert. */ html:has(body[data-nav="home"]), body[data-nav="home"] { --bg: #121212; background: #121212; } main { flex: 1; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--duration) var(--ease); } a:hover, a:focus { color: var(--accent-hover); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: var(--lh-heading); margin: 0 0 var(--space-2); letter-spacing: var(--tracking-snug); color: var(--fg-heading); } h1 { font-size: var(--size-h1); } h2 { font-size: var(--size-h2); margin-top: var(--space-5); } h3 { font-size: var(--size-h3); font-weight: 600; margin-top: var(--space-4); } .hero-title { font-size: var(--size-hero); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); color: var(--fg-heading); } p { margin: 0 0 var(--space-2); max-width: var(--measure); } .lede { font-size: 1.1875rem; /* 19px */ color: var(--fg); line-height: 1.55; } .muted { color: var(--fg-muted); } .small { font-size: var(--size-small); } /* Person bio: name as the heading, role directly beneath it, then prose. */ .bio { margin-bottom: var(--space-6); } .bio:last-child { margin-bottom: 0; } .bio-role { font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-maroon); margin-bottom: var(--space-3); } /* Stands in until the person's copy arrives — dimmed so an unwritten bio is obvious on the page rather than reading as finished. */ .bio-pending { color: var(--fg-dim); font-style: italic; } strong { font-weight: 700; color: var(--fg); } em { font-style: italic; } ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25rem; } ul li, ol li { margin-bottom: var(--space-1); } hr { border: none; border-top: 1px solid var(--rule); margin: var(--space-5) 0; } /* ---------- Layout containers ---------- */ .container { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--space-3); } .container-wide { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--space-3); } section { padding: var(--space-6) 0; } section + section { padding-top: 0; } /* ---------- Header / nav ---------- */ /* min-height on the empty #site-header placeholder (before js/site.js injects HEADER) reserves the swish's 10:1 aspect ratio up front. Without this, the header is 0px tall until injection runs, the page grows underneath the browser's already-computed scroll position, and the viewport visibly jumps on every navigation. Keep this in sync with .swish-top's aspect-ratio. */ #site-header { min-height: 10vw; } .site-header { position: relative; padding-top: 0; } /* Swish hero area: swish image with the NES cube logo overlapping upper-left and (on NXTAssets-branded pages) the NXTAssets wordmark upper-right. */ .swish-hero { position: relative; width: 100%; } .swish-top { width: 100%; height: auto; aspect-ratio: 10 / 1; display: block; } /* Large cube logo sitting on top of the swish, upper-left, scaled relative to the swish height so it reads consistent across viewport widths. */ .brand-cube { position: absolute; top: 6%; left: 2.5%; height: 95%; width: auto; z-index: 4; } .brand-cube-link { display: inline-block; line-height: 0; } /* Nav bar below the swish. The big cube on the swish is the brand lockup and the home link; the nav line is just the nav links, end-aligned. */ .site-header-inner { position: absolute; left: 0; right: 0; bottom: 50px; display: flex; align-items: center; justify-content: flex-end; max-width: var(--wide-width); margin: 0 auto; padding: var(--space-3) var(--space-3); gap: var(--space-3); flex-wrap: wrap; z-index: 3; } .site-nav { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } .site-nav a { color: var(--fg); font-family: var(--font-heading); font-size: var(--size-nav); font-weight: 500; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease); } .site-nav a:hover, .site-nav a:focus, .site-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* ---------- Product wordmark ---------- Heavy "NXT" + lighter, tracked-out product suffix on a shared baseline. Typography only — never an image. Set as ONE word with no gap: NXTAssets, not NXT Assets. The suffix runs ~58% the size of the NXT run. */ .wordmark { display: inline-flex; align-items: baseline; color: var(--fg-heading); white-space: nowrap; text-decoration: none; font-family: var(--font-heading); line-height: 1; } .wordmark .wm-nxt { font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--tracking-snug); line-height: 1; } .wordmark .wm-suffix { font-family: var(--font-heading); font-weight: 400; letter-spacing: var(--tracking-wider); line-height: 1; margin-left: 0; text-transform: uppercase; color: var(--fg-muted); } .wordmark--page { margin: var(--space-2) 0 var(--space-3); } .wordmark--page .wm-nxt { font-size: clamp(1.6rem, 5vw, 3.25rem); } .wordmark--page .wm-suffix { font-size: clamp(0.93rem, 2.9vw, 1.89rem); } .wordmark--card .wm-nxt { font-size: 2rem; } .wordmark--card .wm-suffix { font-size: 1.15rem; } .wordmark--inline { vertical-align: baseline; } .wordmark--inline .wm-nxt { font-size: 1.05em; } .wordmark--inline .wm-suffix { font-size: 0.61em; } .wordmark--footer .wm-nxt { font-size: 1.35rem; } .wordmark--footer .wm-suffix { font-size: 0.78rem; } /* ---------- Hero ---------- */ .hero { padding: var(--space-6) 0 var(--space-5); text-align: left; } .hero-sub { font-size: 1.25rem; color: var(--fg-muted); max-width: var(--measure); margin-bottom: var(--space-4); line-height: 1.45; } /* ---------- Buttons / CTAs ---------- */ .btn { display: inline-block; white-space: nowrap; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); text-decoration: none; border: 1.5px solid transparent; transition: all var(--duration) var(--ease); cursor: pointer; } .btn-primary { background: var(--accent); color: var(--bg); } .btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); color: var(--bg); } .btn-cta { background: var(--accent-warm); color: var(--bg); } .btn-cta:hover, .btn-cta:focus { background: var(--accent-warm-hover); color: var(--bg); } .btn-warm { background: var(--accent-warm); color: var(--bg); } .btn-warm:hover, .btn-warm:focus { background: var(--accent-warm-hover); color: var(--bg); } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--accent-maroon); } .btn-ghost:hover, .btn-ghost:focus { border-color: var(--accent-warm); color: var(--accent-warm); } .btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); } /* ---------- Grids ---------- */ .grid { display: grid; gap: var(--space-3); margin-top: var(--space-3); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } /* ---------- Cards ---------- */ .card { background: var(--bg-elevated); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-3); transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease); display: flex; flex-direction: column; } .card:hover { border-color: var(--rule-strong); } .card h3 { margin-top: 0; font-size: 1.125rem; } .card-wordmark { margin: 0 0 var(--space-2); line-height: 1; font-size: inherit; } .card p { color: var(--fg-muted); font-size: var(--size-small); margin-bottom: var(--space-2); line-height: 1.55; } .card .card-link { color: var(--accent); margin-top: auto; font-size: var(--size-small); font-weight: 600; font-family: var(--font-heading); } .card-link--wordmark { display: inline-flex; align-items: baseline; gap: 0.4rem; } .card.is-featured { border-color: var(--accent); } /* Edged product cards — a swish-palette rule capping the card. */ .card--edged { padding: 0; overflow: hidden; } .card-edge { height: 4px; } .card--edged .card-body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; } .card--edged .card-body p { margin-bottom: var(--space-3); } .card--edged .wordmark { margin-bottom: var(--space-2); } .card .badge { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); padding: 0.125rem 0.5rem; margin-bottom: var(--space-2); } .card .badge.is-soon { color: var(--accent-warm); border-color: var(--accent-warm); } .card .badge.is-live { color: var(--accent); border-color: var(--accent); } /* ---------- Persona cards (home lane selector) ---------- */ .persona-card { padding: var(--space-4); text-align: left; } .persona-card .label { display: block; font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: var(--space-1); } .persona-card h3 { margin-top: 0; margin-bottom: var(--space-1); font-size: 1.3125rem; } /* ---------- Callout ---------- */ .callout { background: var(--bg-elevated); border-left: 3px solid var(--accent-warm); border-radius: var(--radius-sm); padding: var(--space-3); margin: var(--space-4) 0; } .callout .callout-label { font-family: var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-warm); margin-bottom: var(--space-1); } .callout p:last-child { margin-bottom: 0; } /* ---------- Product hero image ---------- Sits between the product wordmark and the pillars. Photographic, so it gets a rule rather than a heavy frame and stays clear of the text column width. */ .product-hero-image { margin: 0 0 var(--space-5); padding: 0; } .product-hero-image img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: var(--radius-md); } /* ---------- Application screenshot ---------- Live product UI, captured light. Same white-plate treatment as the diagrams so screen captures and artwork read as one family, and links to itself because UI detail does not survive being scaled into a column. */ .app-shot { margin: 0 0 var(--space-4); } /* Two captures that belong together — the form and what it returns — read as a pair on a wide viewport and stack once the column can no longer hold both at their captured size. */ .shot-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); } .shot-row .app-shot { margin-bottom: 0; } /* A capture sitting inside a pillar block, between the title and the bullets. */ .pillar-hero { margin: var(--space-3) 0 var(--space-4); } /* Bullets on the left, a column of thumbnails on the right. The thumbnails are deliberately small — each links to the full-size file, so the page stays readable and the document is one click away. Below 720px the aside drops under the text rather than squeezing both. */ .pillar-with-aside { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; } @media (min-width: 720px) { .pillar-with-aside { grid-template-columns: 1fr 240px; } } .pillar-with-aside > * { min-width: 0; } .pillar-aside .thumb { margin-bottom: var(--space-3); } .pillar-aside .thumb:last-child { margin-bottom: 0; } .pillar-aside .app-shot-frame { display: block; } .pillar-aside .thumb img { width: 100%; } /* Many captures rather than a few: tile them inside the same column instead of running one stack down the page. */ .pillar-aside--tiled { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .pillar-aside--tiled .thumb { margin-bottom: 0; } /* ---------- Lightbox ---------- Opens a thumbnail's full-size file over the page. The markup is built by site.js, so without script the thumbnail stays an ordinary link to the image and nothing here applies. */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(0, 0, 0, 0.88); } .lightbox.is-open { display: flex; } .lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #FFFFFF; border-radius: var(--radius-md); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); } .lightbox-close { position: absolute; top: var(--space-3); right: var(--space-3); width: 44px; height: 44px; font-size: 1.75rem; line-height: 1; color: var(--fg); background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-md); cursor: pointer; } .lightbox-close:hover, .lightbox-close:focus-visible { border-color: var(--accent-warm); } /* Radio technology marks under a pillar's bullets. All four are drawn at the same canvas size and stroke weight so they read as one set. */ .symbol-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); } .symbol-row img { width: 52px; height: 52px; } /* Never paint a screen capture larger than it was captured — upscaling is what makes UI text read as fuzzy. The width attribute on the image decides how wide it is drawn; it shrinks to fit a narrow column but never stretches past its own size. Do not add `width: auto` here: an author rule outranks the width attribute, which then stops controlling anything and a capture taken at device resolution gets painted at its pixel count instead of its CSS size. */ .app-shot img { max-width: 100%; height: auto; } .app-shot-frame { display: inline-block; background: #FFFFFF; border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-1); transition: border-color var(--duration) var(--ease); } .app-shot-frame:hover, .app-shot-frame:focus-visible { border-color: var(--accent-warm); } .app-shot-frame img { height: auto; display: block; } .app-shot figcaption { margin-top: var(--space-2); font-size: var(--size-small); line-height: 1.45; color: var(--fg-muted); max-width: 80ch; } /* ---------- Diagram set ---------- A numbered walk outward: the room, the uplink, the failure case. Three across on a wide viewport so the sequence reads at a glance; one per row once a column gets too narrow to read the artwork. The diagrams are dense, so each frames a link to itself at full size. */ .diagram-set-title { margin: 0 0 var(--space-4); } .diagram-set { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; margin-bottom: var(--space-3); } @media (min-width: 720px) { .diagram-set { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1120px) { .diagram-set { grid-template-columns: repeat(3, 1fr); } } .diagram-set > * { min-width: 0; } .diagram { margin: 0; } .diagram-head { display: flex; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-2); border-left: 4px solid var(--accent-warm); padding-left: var(--space-2); } .diagram-step { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--accent-warm); line-height: 1.2; flex: none; } .diagram-head strong { display: block; font-family: var(--font-heading); font-size: 1.0625rem; color: var(--fg-heading); margin-bottom: 0.15rem; } .diagram-note { display: block; font-size: var(--size-small); line-height: 1.45; color: var(--fg-muted); } /* The artwork is drawn on white, so it sits on its own light plate rather than fighting the near-black page. */ .diagram-frame { display: block; background: #FFFFFF; border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-1); transition: border-color var(--duration) var(--ease); } .diagram-frame:hover, .diagram-frame:focus-visible { border-color: var(--accent-warm); } .diagram-frame img { width: 100%; height: auto; display: block; } /* ---------- Banner pillar ---------- The printed roll-up banner treatment: a swish-red bar down the left, a bold heading, and muted supporting lines under it. This is the site's primary content block — product pages are stacks of these. */ .pillar-block { border-left: 4px solid var(--accent-warm); padding: 0 0 0 var(--space-3); margin: 0 0 var(--space-6); } .pillar-block:last-child { margin-bottom: 0; } .pillar-block h1, .pillar-block h2, .pillar-block h3 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: var(--lh-heading); letter-spacing: var(--tracking-snug); color: var(--fg-heading); margin: 0 0 var(--space-1); } .pillar-block h1 a, .pillar-block h2 a, .pillar-block h3 a { color: inherit; border-bottom: 2px solid transparent; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); } .pillar-block h1 a:hover, .pillar-block h1 a:focus, .pillar-block h2 a:hover, .pillar-block h2 a:focus, .pillar-block h3 a:hover, .pillar-block h3 a:focus { color: var(--accent-warm); border-bottom-color: var(--accent-warm); } /* Sub-lines. Plain list, no markers — the banner sets them as loose lines. */ .pillar-block ul { list-style: none; padding: 0; margin: 0; } .pillar-block li { color: var(--fg-muted); font-size: var(--size-body); line-height: 1.5; margin: 0 0 0.35rem; max-width: var(--measure); } .pillar-block li:last-child { margin-bottom: 0; } /* Product group heading on the home + products pages. The wordmark itself is the link into the product page — there is no separate call-to-action line. */ .product-block .wordmark { display: inline-flex; margin-bottom: var(--space-4); } a.wordmark { transition: color var(--duration) var(--ease); } a.wordmark:hover, a.wordmark:focus { color: var(--accent-warm); } a.wordmark:hover .wm-suffix, a.wordmark:focus .wm-suffix { color: var(--accent-warm); } .product-block .wordmark--card .wm-nxt { font-size: 2.75rem; } .product-block .wordmark--card .wm-suffix { font-size: 1.6rem; } /* ---------- Three-up product columns ---------- The whole product line, side by side, using the full page width less a small gutter. Each column is one banner. Below 1024px they stack. */ .container-full { width: 100%; margin: 0 auto; padding: 0 var(--space-3); } /* auto-fit rather than a fixed count, so adding or removing a product does not need a layout change — the row fills the width and rewraps on its own. */ .product-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; } /* Explicit counts rather than auto-fit: with a known four products, auto-fit left a fifth empty track on wide viewports and the row stopped filling. */ @media (min-width: 620px) { .product-columns { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .product-columns { grid-template-columns: repeat(4, 1fr); } } /* Grid children default to min-width:auto, so a long unbroken line pushes its track wider than 1fr and the row overflows the viewport. */ .product-columns > * { min-width: 0; } /* Column-scale typography: the banner sizes are set for a full-width block, so they come down a step once three of them share the viewport. */ .product-columns .product-block .wordmark--card .wm-nxt { font-size: clamp(1.75rem, 2.6vw, 2.5rem); } .product-columns .product-block .wordmark--card .wm-suffix { font-size: clamp(1.02rem, 1.5vw, 1.45rem); } .product-columns .pillar-block { margin-bottom: var(--space-4); } .product-columns .pillar-block h3 { font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); } .product-columns .pillar-block li { font-size: var(--size-small); line-height: 1.45; max-width: none; } /* A thin maroon outline around each column, so the products read as separate things rather than one wall of text. .product-columns appears on the home page and the products hub only, which is the whole scope of this. */ .product-columns .product-block { border: 1px solid var(--accent-maroon); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); } .product-columns .product-block .pillar-block:last-child { margin-bottom: 0; } /* EXPERIMENT — the outline box may be doing the separating work on its own. Hiding the pillar bars rather than removing them: delete this one rule to bring them back exactly as they were, layout untouched. Pillar bars on the product and pillar pages are unaffected. */ .product-columns .pillar-block { border-left-color: transparent; } /* ---------- Rainbow rule (crop of the real swish artwork) ---------- */ .swish-rule { height: 10px; overflow: hidden; display: flex; align-items: center; margin: var(--space-5) 0; } .swish-rule img { width: 100%; flex: none; } .swish-rule--tall { height: 22px; } /* ---------- Contact methods ---------- */ .contact-methods { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); } .contact-method { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-2); align-items: start; margin: 0; } .contact-icon { width: 2rem; height: 2rem; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); color: var(--accent); display: inline-grid; place-items: center; } .contact-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .contact-method strong { display: block; color: var(--fg); font-size: var(--size-small); } /* ---------- Pillar grid (product page) ---------- */ .pillar { padding: var(--space-3); border-top: 1px solid var(--rule); } .pillar h3 { margin-top: 0; margin-bottom: var(--space-1); font-size: 1.1875rem; } .pillar p { color: var(--fg-muted); font-size: var(--size-small); line-height: 1.55; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--size-small); } th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; } th { background: var(--bg-elevated); font-family: var(--font-heading); font-weight: 600; color: var(--fg); } tr:hover td { background: var(--bg-elevated); } code, kbd { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-elevated); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); color: var(--accent); } /* ---------- Breadcrumbs ---------- */ .crumbs { font-size: var(--size-small); color: var(--fg-muted); margin-top: var(--space-4); margin-bottom: var(--space-2); } .crumbs a { color: var(--fg-muted); border-bottom: 1px dotted transparent; } .crumbs a:hover { color: var(--accent); } .crumbs .sep { margin: 0 0.5rem; color: var(--fg-dim); } /* ---------- Stats / trust row ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-4) 0; margin: var(--space-4) 0; } .stat { text-align: left; } .stat-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--accent); display: block; line-height: 1.2; } .stat-label { font-size: var(--size-small); color: var(--fg-muted); } /* ---------- Footer ---------- */ /* min-height reserves the swish-bottom's 10:1 aspect ratio before js/site.js injects FOOTER — see the matching #site-header comment above. The footer-grid text below the swish is comparatively small and appears below the fold on load, so it isn't the part that causes a visible jump. */ #site-footer { min-height: 10vw; } .site-footer { margin-top: var(--space-6); position: relative; } .swish-bottom { width: 100%; height: auto; aspect-ratio: 10 / 1; display: block; } .footer-inner { background: var(--bg-sunken); padding: var(--space-4) var(--space-3); border-top: 1px solid var(--rule); } .footer-grid { max-width: var(--wide-width); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid h4 { font-family: var(--font-heading); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: var(--space-2); } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: var(--space-1); } .footer-grid a { color: var(--fg); font-size: var(--size-small); } .footer-grid p { color: var(--fg-muted); font-size: var(--size-small); line-height: 1.55; } .footer-grid .wordmark { color: var(--fg); font-size: 1rem; } .footer-grid a:hover { color: var(--accent); } .footer-grid a:hover .wm-suffix, .footer-grid a:focus .wm-suffix { color: var(--accent-hover); } .footer-update-stamp { max-width: var(--wide-width); margin: 0 auto; padding: var(--space-2) var(--space-3) var(--space-3); background: var(--bg-sunken); color: var(--fg-dim); font-size: 0.8125rem; text-align: center; } /* ---------- Utilities ---------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mb-0 { margin-bottom: 0 !important; } .mb-4 { margin-bottom: var(--space-4); } .tag-pill { display: inline-block; white-space: nowrap; font-family: var(--font-heading); font-size: var(--size-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 0.125rem 0.625rem; margin-bottom: var(--space-2); } .tag-pill--warm { color: var(--accent-warm); border-color: var(--accent-warm); } .eyebrow { font-family: var(--font-heading); font-size: var(--size-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-dim); margin-bottom: var(--space-2); } .coming-soon { opacity: 0.85; } .coming-soon .stub-note { border: 1px dashed var(--rule-strong); border-radius: var(--radius-md); padding: var(--space-3); color: var(--fg-muted); font-size: var(--size-small); margin: var(--space-4) 0; } /* ---------- Screenshot figure ---------- Marketing/UI captures embedded inline. The screenshots ship with their own black mat from the source slick; on the dark site that mat reads as a frame against the elevated card surface. */ .screenshot { margin: var(--space-4) 0; padding: 0; } .screenshot img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); border: 1px solid var(--rule); } .screenshot figcaption { margin-top: var(--space-1); font-size: var(--size-small); color: var(--fg-muted); text-align: center; } .screenshot--narrow { max-width: 480px; margin-left: auto; margin-right: auto; } /* ---------- NXTAssets sub-nav ---------- Stacked link block surfaced on the NXTAssets product hub and every nxtassets-* page so a reader can move between capability pages and audience-view pages without going back to the hub. */ .product-subnav { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-3); margin: var(--space-4) 0; background: var(--bg-elevated); } .product-subnav .subnav-group { margin-bottom: var(--space-3); } .product-subnav .subnav-group:last-child { margin-bottom: 0; } .product-subnav h4 { font-family: var(--font-heading); font-size: var(--size-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-muted); margin: 0 0 var(--space-1); } .product-subnav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); } .product-subnav li { margin: 0; } .product-subnav a { color: var(--fg); font-size: var(--size-small); border-bottom: 1px solid transparent; padding-bottom: 1px; } .product-subnav a:hover, .product-subnav a:focus, .product-subnav a.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* ---------- Accessibility utility ---------- */ .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; }