/* ========================================== IT-Impulse — Impulse Campus design system Light architectural glass · one calm accent Outfit · Manrope · JetBrains Mono (tabular nums) ========================================== */ :root { /* Day campus — airy stone & glass */ --nx-bg-void: #e8ecef; --nx-bg-deep: #dfe4e8; --nx-bg-surface: rgba(255, 255, 255, 0.55); --nx-bg-elevated: rgba(255, 255, 255, 0.78); --nx-bg-glass: rgba(255, 255, 255, 0.42); --nx-bg-glass-strong: rgba(255, 255, 255, 0.72); --nx-accent: #1c2430; --nx-accent-soft: #2c3644; --nx-accent-dim: #121820; --nx-accent-glow: rgba(28, 36, 48, 0.18); --nx-accent-glow-strong: rgba(28, 36, 48, 0.28); /* Ink laid on top of --nx-accent. Flips with the theme so the accent can invert without leaving the label unreadable. */ --nx-on-accent: #f7f8fa; /* Mixed from the accent rather than written out, so focus rings and hover washes follow it into the dark theme instead of staying near-black. */ --nx-tint: color-mix(in oklab, var(--nx-accent) 8%, transparent); --nx-tint-strong: color-mix(in oklab, var(--nx-accent) 16%, transparent); --nx-border: rgba(20, 28, 40, 0.1); --nx-border-strong: rgba(20, 28, 40, 0.18); --nx-border-glass: rgba(255, 255, 255, 0.55); --nx-grid: rgba(28, 36, 48, 0.06); --nx-font-display: 'Outfit', system-ui, sans-serif; --nx-font-body: 'Manrope', system-ui, sans-serif; --nx-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Header chrome */ --nx-font-signal: 'Space Grotesk', system-ui, sans-serif; --nx-font-signal-mono: 'JetBrains Mono', ui-monospace, monospace; --nx-font-frame: 'Space Grotesk', system-ui, sans-serif; --nx-font-editorial: 'Outfit', system-ui, sans-serif; --nx-radius-sm: 4px; --nx-radius-md: 10px; --nx-radius-lg: 16px; --nx-radius-xl: 22px; --nx-radius-orb: 999px; --nx-radius-sharp: 0; --nx-radius-edge: 2px; --nx-ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --nx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --nx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --bg-primary: var(--nx-bg-void); --bg-card: var(--nx-bg-elevated); --bg-card-2: var(--nx-bg-deep); --bg-elevated: var(--nx-bg-elevated); --border: var(--nx-border); --border-strong: var(--nx-border-strong); --accent: var(--nx-accent); --accent-hover: var(--nx-accent-soft); --accent-dim: var(--nx-accent-dim); --accent-glow: var(--nx-accent-glow); --accent-glow-strong: var(--nx-accent-glow-strong); --text-primary: #12161c; --text-secondary: #4a5562; /* 4.55:1 on --nx-bg-void. Anything lighter drops under the WCAG AA floor. */ --text-muted: #626b76; --container-max: 1200px; --nx-gutter: clamp(20px, 4vw, 48px); --font-display: var(--nx-font-display); --font-mono: var(--nx-font-mono); /* Campus glass */ --campus-glass: rgba(255, 255, 255, 0.38); --campus-glass-strong: rgba(255, 255, 255, 0.62); --campus-ink: #14181e; --campus-ink-dim: rgba(20, 24, 30, 0.72); --campus-line: rgba(255, 255, 255, 0.75); --campus-line-dim: rgba(20, 24, 30, 0.18); --campus-mark: #5c6570; --campus-impulse: #d4c4a8; --campus-impulse-bright: #e8d9b8; } /* Evening campus */ [data-theme="dark"] { --nx-bg-void: #0e1116; --nx-bg-deep: #151922; --nx-bg-surface: rgba(22, 28, 38, 0.72); --nx-bg-elevated: rgba(28, 34, 46, 0.88); --nx-bg-glass: rgba(18, 24, 34, 0.55); --nx-bg-glass-strong: rgba(14, 18, 26, 0.82); --nx-accent: #e8ecf0; --nx-accent-soft: #f4f6f8; --nx-accent-dim: #c8d0d8; --nx-accent-glow: rgba(232, 236, 240, 0.12); --nx-accent-glow-strong: rgba(232, 236, 240, 0.2); --nx-border: rgba(255, 255, 255, 0.1); --nx-border-strong: rgba(255, 255, 255, 0.18); --nx-border-glass: rgba(255, 255, 255, 0.14); --nx-on-accent: #12161c; /* Only the aliases that genuinely differ from :root are restated here. The rest resolve through --nx-* on this same element and follow on their own — data-theme sits on , which is also :root. */ --bg-card: var(--nx-bg-surface); --text-primary: #f2f4f7; --text-secondary: #a8b0bc; /* 4.55:1 on --nx-bg-void. */ --text-muted: #747d8c; --campus-glass: rgba(16, 22, 32, 0.45); --campus-glass-strong: rgba(16, 22, 32, 0.72); --campus-ink: #f2f4f7; --campus-ink-dim: rgba(242, 244, 247, 0.72); --campus-line: rgba(255, 255, 255, 0.35); --campus-line-dim: rgba(255, 255, 255, 0.18); --campus-mark: #9aa3ae; --campus-impulse: #d4c4a8; --campus-impulse-bright: #e8d9b8; } body { font-family: var(--nx-font-body); background: var(--nx-bg-void); color: var(--text-primary); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .hero-title, .sec-title, .ap-intro__title, .nx-hero__title, .nx-ap-intro__title, .campus-loc__title, .campus-panel__title { font-family: var(--nx-font-display); letter-spacing: -0.03em; font-weight: 600; } /* Prices, metrics, step numbers — tabular figures so digits hold their column. Matched on the element suffix instead of hall by hall: the old list named only cloud and studio, which is why desk, sec and vault drifted off it. */ [class*="__fact-v"], [class*="__price"], [class*="__duel-sum"], [class*="__bar-label"], [class*="__step-num"], [class*="__q-num"], [class*="__journey-time"], [class*="__estimate-v"], [class*="__estimate-t"], [class*="__meta"], .campus-kpi .num { font-variant-numeric: tabular-nums; } .nx-cmd__item, .nx-cmd__hub-label, .nx-cmd__hub-sub, .nx-deck__cta, .nx-deck__phone, .btn-nexus, .nx-mega__card-title, .nx-mega__card-num, .nx-mega__card-price { font-family: var(--nx-font-body); } /* Variant-scoped header typography overrides live in shell.css */ body > main, body > .footer, body > .nx-footer { position: relative; z-index: 2; } body > .nx-shell { position: fixed; z-index: 500; } body.has-nx-shell > .nx-shell.is-console-open { z-index: 580; } body.has-nx-shell > .skip-link { position: fixed; top: auto; left: -9999px; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; z-index: 9999; } body.has-nx-shell > .skip-link:focus { top: 12px; left: 12px; width: auto; height: auto; padding: 10px 20px; overflow: visible; clip: auto; white-space: normal; border-radius: var(--nx-radius-md); background: var(--campus-glass-strong); color: var(--text-primary); border: 1px solid var(--nx-border-strong); backdrop-filter: blur(16px); } body.has-nx-shell .section-wrap, body.has-nx-shell .articles-page .ap-outro .container { max-width: var(--container-max); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; } body.has-nx-shell .section-wrap { padding-left: var(--nx-gutter); padding-right: var(--nx-gutter); } body.has-nx-shell .nx-footer { width: 100%; box-sizing: border-box; padding-left: var(--nx-gutter); padding-right: var(--nx-gutter); } body.has-nx-shell .nx-footer__inner { max-width: var(--container-max); margin-left: auto; margin-right: auto; } /* Primary CTA — glass campus */ .btn-nexus { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; font-family: var(--nx-font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; text-transform: none; color: var(--nx-on-accent); background: var(--nx-accent); border: 1px solid transparent; border-radius: var(--nx-radius-orb); box-shadow: 0 8px 28px var(--nx-accent-glow); transition: background 280ms var(--nx-ease-out), transform 280ms var(--nx-ease-out), box-shadow 280ms; cursor: pointer; text-decoration: none; } .btn-nexus:hover { color: var(--nx-on-accent); background: var(--nx-accent-soft); transform: translateY(-1px); box-shadow: 0 12px 32px var(--nx-accent-glow-strong); } .btn-nexus--ghost { background: var(--campus-glass); color: var(--campus-ink); border: 1px solid var(--nx-border-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; } .btn-nexus--ghost:hover { color: var(--campus-ink); border-color: var(--campus-ink); background: var(--campus-glass-strong); box-shadow: none; } .btn-nexus--sm { padding: 9px 16px; font-size: 12px; } .nx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--nx-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--campus-mark, var(--text-muted)); margin-bottom: 12px; } .nx-eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: 0.7; } .nx-eyebrow::after { display: none; } .highlight, .campus-loc__title .accent { color: inherit; font-weight: 600; }