/* ============================================================ NES web — design system Dark-theme adaptation of the NES print brand. Print uses navy on white; web inverts to near-black with brighter accents so the swish artwork carries the color. ============================================================ */ /* Adobe Typekit kit for itc-avant-garde-gothic-pro — direct ancestor of Century Gothic, used as the canonical web face. The kit URL is also embedded in each page's so the font is available before this stylesheet parses. */ @import url('https://use.typekit.net/vwm4gox.css'); /* ---------- Design tokens ---------- */ :root { --bg: #0A0A0A; --bg-elevated: #141414; --bg-sunken: #050505; --fg: #E8EAED; --fg-muted: #9AA0A6; --fg-dim: #6B7075; --accent: #5FA8E8; /* links, pull quotes — brighter than print navy */ --accent-hover: #8BC3F0; --accent-warm: #E84F4F; /* TX/state accent, use sparingly */ --rule: #2A2A2A; --rule-strong: #3A3A3A; /* 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; /* 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: 720px; --wide-width: 1120px; --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); --text-body: var(--fg); --text-muted: var(--fg-muted); --text-link: var(--accent); --surface: var(--bg); --surface-card: var(--bg-elevated); --border: var(--rule); } /* ---------- 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; } 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: -0.01em; } 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: -0.02em; margin-bottom: var(--space-3); } p { margin: 0 0 var(--space-2); max-width: 66ch; } .lede { font-size: 1.1875rem; /* 19px */ color: var(--fg); line-height: 1.55; } .muted { color: var(--fg-muted); } .small { font-size: var(--size-small); } 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 ---------- */ .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; 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: 2; } .brand-cube-link { display: inline-block; line-height: 0; } /* Product wordmark — heavy "NXT" + lighter, tracked-out product suffix on a shared baseline. Typography only (no images). Used as a hero overlay on the swish and as card titles on the products page. The differentiation comes from size + weight + tracking; both runs are the same family (ITC Avant Garde Gothic Pro / Century Gothic / Jost). The suffix is ~45% the size of NXT to match the printed wordmark proportions. */ .wordmark { display: inline-flex; align-items: baseline; color: var(--fg); white-space: nowrap; text-decoration: none; font-family: var(--font-heading); line-height: 1; } .wordmark .wm-nxt { font-family: var(--font-heading); font-weight: 700; 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.18em; text-transform: uppercase; color: var(--fg-muted); } /* Hero size — sits over the swish on product-branded pages */ .wordmark--hero { position: absolute; top: 50%; right: 3%; transform: translateY(-50%); z-index: 2; } .wordmark--hero .wm-nxt { font-size: clamp(1.6rem, 5vw, 3.25rem); } .wordmark--hero .wm-suffix { font-size: clamp(0.95rem, 2.6vw, 1.6rem); } /* Card-title size — used inside product cards as the h3 replacement. Suffix at ~45% of the NXT run, matching the printed wordmark proportions. */ .wordmark--card .wm-nxt { font-size: 2rem; } .wordmark--card .wm-suffix { font-size: 0.9rem; } /* Hero wordmark visibility is driven by */ body .wordmark--hero { display: none; } body.branded-nxtassets .wordmark--hero[data-product="nxtassets"], body.branded-nxtportal .wordmark--hero[data-product="nxtportal"], body.branded-nxtvoter .wordmark--hero[data-product="nxtvoter"] { display: inline-flex; } /* 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 { 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; } .site-nav { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } .site-nav a { color: var(--fg); 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 { color: var(--accent); border-bottom-color: var(--accent); } .site-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* ---------- 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: 60ch; margin-bottom: var(--space-4); line-height: 1.45; } /* ---------- Buttons / CTAs ---------- */ .btn { display: inline-block; 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: #0A0A0A; } .btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); color: #0A0A0A; } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--rule-strong); } .btn-ghost:hover, .btn-ghost:focus { border-color: var(--accent); color: var(--accent); } .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); } .card .card-link { margin-top: auto; font-size: var(--size-small); font-weight: 600; } .card.is-featured { border-color: var(--accent); } .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: 999px; 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 { 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); border-radius: var(--radius-sm); padding: var(--space-3); margin: var(--space-4) 0; } .callout .callout-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); margin-bottom: var(--space-1); } .callout p:last-child { margin-bottom: 0; } /* ---------- 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); } /* ---------- 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-sunken); } 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; } .stat-label { font-size: var(--size-small); color: var(--fg-muted); } /* ---------- Footer ---------- */ .site-footer { margin-top: var(--space-6); position: relative; } .swish-bottom { width: 100%; height: auto; 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 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-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 a:hover { color: var(--accent); } .footer-legal { max-width: var(--wide-width); margin: var(--space-4) auto 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); font-size: var(--size-small); color: var(--fg-dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } /* ---------- 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; 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); } .eyebrow { font-size: var(--size-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-muted); } .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-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 { color: var(--accent); border-bottom-color: var(--accent); } .product-subnav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }