/* ==========================================================================
Scitools — Design System Stylesheet
Raw CSS, no framework. This file is shared across every page of the site.
Sections:
1. Design tokens
2. Reset & base
3. Typography
4. Layout utilities
5. Buttons
6. Badges
7. Cards
8. Forms
9. Navbar (liquid glass)
10. Footer
11. Logo strip
12. Misc utilities (glow, dividers, section backgrounds)
========================================================================== */
/* -----------------------------------------------------------------------
1. Design tokens
----------------------------------------------------------------------- */
:root {
/* Brand colors — as specified */
--surface: #0A0F1C;
--surface-rgb: 10, 15, 28;
--card: #141F30;
--card-rgb: 20, 31, 48;
--accent-1: #3B82F6; /* primary — blue */
--accent-1-rgb: 59, 130, 246;
--accent-2: #34D399; /* secondary — green */
--accent-2-rgb: 52, 211, 153;
/* Text — carried over from earlier approved mockups, tweak freely */
--text-primary: #E6E8EB;
--text-muted: #8A93A6;
--text-on-accent: #0A0F1C; /* dark text sitting on top of a bright accent fill */
/* Borders & elevation */
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.16);
--shadow-sm: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
--shadow-md: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 30px 70px -25px rgba(0, 0, 0, 0.6);
/* Radius scale */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
--radius-full: 999px;
/* Type */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "SF Mono", Menlo, Consolas, monospace;
/* Layout */
--container-max: 1160px;
--section-py: 6.5rem;
--section-py-sm: 3.5rem;
/* Motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* Theme-aware special cases (see section 1b for light overrides) */
--navbar-highlight: rgba(255, 255, 255, 0.06);
--input-bg: rgba(255, 255, 255, 0.03);
--logo-filter: grayscale(1) contrast(0) brightness(1.8);
--logo-opacity: 0.55;
color-scheme: dark;
}
/* -----------------------------------------------------------------------
1b. Light theme overrides
Auto-detected via prefers-color-scheme, or forced via [data-theme]
(set by js/main.js). Brand accents stay fixed in both themes.
----------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--surface: #EEF2F8;
--surface-rgb: 238, 242, 248;
--card: #FFFFFF;
--card-rgb: 255, 255, 255;
--text-primary: #0F172A;
--text-muted: #55607A;
--border: rgba(15, 23, 42, 0.10);
--border-strong: rgba(15, 23, 42, 0.18);
--shadow-sm: 0 8px 20px -10px rgba(15, 23, 42, 0.12);
--shadow-md: 0 20px 40px -18px rgba(15, 23, 42, 0.16);
--shadow-lg: 0 30px 70px -25px rgba(15, 23, 42, 0.2);
--navbar-highlight: rgba(15, 23, 42, 0.05);
--input-bg: rgba(15, 23, 42, 0.035);
--logo-filter: grayscale(1) contrast(0) brightness(0.85);
--logo-opacity: 0.45;
color-scheme: light;
}
}
:root[data-theme="light"] {
--surface: #EEF2F8;
--surface-rgb: 238, 242, 248;
--card: #FFFFFF;
--card-rgb: 255, 255, 255;
--text-primary: #0F172A;
--text-muted: #55607A;
--border: rgba(15, 23, 42, 0.10);
--border-strong: rgba(15, 23, 42, 0.18);
--shadow-sm: 0 8px 20px -10px rgba(15, 23, 42, 0.12);
--shadow-md: 0 20px 40px -18px rgba(15, 23, 42, 0.16);
--shadow-lg: 0 30px 70px -25px rgba(15, 23, 42, 0.2);
--navbar-highlight: rgba(15, 23, 42, 0.05);
--input-bg: rgba(15, 23, 42, 0.035);
--logo-filter: grayscale(1) contrast(0) brightness(0.85);
--logo-opacity: 0.45;
color-scheme: light;
}
/* -----------------------------------------------------------------------
2. Reset & base
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--surface);
color: var(--text-primary);
font-family: var(--font-sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
/* Every ![]()
carries width/height attributes now (added for CLS). Without a
matching height:auto the attribute supplies the used height while CSS
shrinks only the width, so the picture squashes horizontally -- the Onboard
graphs rendered 240px wide at their full 474px natural height. This sits on
the bare `img` selector (0,0,1) on purpose: any class that sets a real
height, like .ob-nav-logo or .logo-taller, still outranks it. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
::selection { background: rgba(var(--accent-1-rgb), 0.35); }
/* -----------------------------------------------------------------------
3. Typography
----------------------------------------------------------------------- */
/* Space under a heading belongs to the type scale, not to each component.
The reset above zeroes every margin; this puts the bottom one back, in em
so it tracks the heading's own size. Measured across all 47 pages before
adding it: 133 headings were sitting 0-4px above the paragraph under them
because they relied on that zero, and almost all of them were an h2 in a
.section-heading. Anything that already sets its own margin-bottom does so
from a class selector, which outranks this, so none of those move. */
h1, h2, h3, h4 { margin-bottom: 0.5em; }
/* The one exception: inside a flex parent that is already spacing its
children with `gap`, this margin would stack on top of that gap. Any new
gapped flex or grid wrapper that takes a heading as a direct child needs
adding here. */
.stack > h1, .stack > h2, .stack > h3, .stack > h4,
.row > h1, .row > h2, .row > h3, .row > h4 { margin-bottom: 0; }
h1, .h1 {
font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
}
h2, .h2 {
font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text-primary);
}
h3, .h3 {
font-size: 1.375rem;
line-height: 1.3;
font-weight: 600;
color: var(--text-primary);
}
h4, .h4 {
font-size: 1.0625rem;
line-height: 1.4;
font-weight: 600;
color: var(--text-primary);
}
p {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.65;
}
p.lead {
font-size: 1.125rem;
line-height: 1.6;
color: var(--text-muted);
}
.text-small { font-size: 0.8125rem; color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.text-accent-1 { color: var(--accent-1); }
.text-accent-2 { color: var(--accent-2); }
.eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-2);
margin-bottom: 0.75rem;
}
.gradient-text {
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
a.link {
color: var(--accent-1);
font-weight: 600;
border-bottom: 1px solid transparent;
transition: border-color 0.15s var(--ease);
}
a.link:hover { border-color: currentColor; }
code {
font-family: var(--font-mono);
font-size: 0.85em;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border);
padding: 0.15em 0.45em;
border-radius: 6px;
color: var(--accent-2);
}
/* -----------------------------------------------------------------------
4. Layout utilities
----------------------------------------------------------------------- */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 1.75rem;
}
/* Screens bigger than a laptop get a wider content column instead of
just more empty margin on either side. */
@media (min-width: 1440px) {
:root { --container-max: 1440px; }
/* The hero's two-column row (copy + hub diagram) doesn't get the same
treatment: at this wider container, an even 1fr/1fr split leaves a
visible dead gap where the copy (capped at 520px by its own
paragraph) stops well short of filling its column before the
diagram even starts. Capping the copy column's width lets the
extra room go to the diagram instead of sitting empty. */
#hero-intro .grid-2 { grid-template-columns: minmax(0, 560px) 1fr; }
/* The hub diagram's own column also grew from the change above, and
the expanded detail panel (which used to cover the whole diagram
box edge to edge) grew right along with it — its content doesn't
need that much room, so it was just empty space. Capping the
panel's own width instead of stretching it full-bleed keeps it
content-sized and lets the (still-dimmed) other surface nodes show
through on the right, instead of being hidden behind blank card. */
.hub-detail { right: auto; width: 460px; }
}
.section { padding: var(--section-py) 0; }
.section-sm { padding: var(--section-py-sm) 0; }
.section-heading {
max-width: 620px;
margin: 0 auto 3rem;
text-align: center;
}
.section-heading.align-left { margin-left: 0; text-align: left; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.75rem; }
.grid {
display: grid;
gap: 1.5rem;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
:root { --section-py: 4rem; }
}
.divider {
border: none;
border-top: 1px solid var(--border);
margin: 0;
}
/* -----------------------------------------------------------------------
5. Buttons
----------------------------------------------------------------------- */
.btn {
--btn-py: 0.8rem;
--btn-px: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: var(--btn-py) var(--btn-px);
border-radius: var(--radius-full);
font-size: 0.9375rem;
font-weight: 700;
border: 1px solid transparent;
color: var(--text-primary);
cursor: pointer;
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease);
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --btn-py: 0.55rem; --btn-px: 1.1rem; font-size: 0.8125rem; }
.btn-lg { --btn-py: 1rem; --btn-px: 2rem; font-size: 1rem; }
.btn-primary {
background: var(--accent-1);
color: #fff;
box-shadow: 0 8px 24px -8px rgba(var(--accent-1-rgb), 0.55);
}
.btn-primary:hover { box-shadow: 0 10px 30px -6px rgba(var(--accent-1-rgb), 0.7); }
.btn-secondary {
background: var(--accent-2);
color: var(--text-on-accent);
box-shadow: 0 8px 24px -8px rgba(var(--accent-2-rgb), 0.5);
}
.btn-secondary:hover { box-shadow: 0 10px 30px -6px rgba(var(--accent-2-rgb), 0.65); }
.btn-outline {
background: transparent;
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--accent-1); }
.btn-ghost {
background: transparent;
color: var(--text-primary);
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.btn-ghost:hover { color: var(--accent-1); }
.btn-icon {
width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--radius-full);
background: var(--card); border-color: var(--border);
}
.btn-icon:hover {
background: rgba(var(--accent-1-rgb), 0.15);
border-color: var(--accent-1);
color: var(--accent-1);
transform: translateY(-2px);
}
.btn:disabled, .btn.is-disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
/* -----------------------------------------------------------------------
6. Badges
----------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--card);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 0.8125rem;
font-weight: 600;
padding: 0.4rem 0.9rem;
border-radius: var(--radius-full);
}
.badge .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-2);
flex-shrink: 0;
}
.badge-accent-1 { color: var(--accent-1); border-color: rgba(var(--accent-1-rgb), 0.35); background: rgba(var(--accent-1-rgb), 0.1); }
.badge-accent-1 .dot { background: var(--accent-1); }
.badge-accent-2 { color: var(--accent-2); border-color: rgba(var(--accent-2-rgb), 0.35); background: rgba(var(--accent-2-rgb), 0.1); }
.badge-accent-2 .dot { background: var(--accent-2); }
/* -----------------------------------------------------------------------
7. Cards
----------------------------------------------------------------------- */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.75rem;
transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card-hover:hover {
transform: translateY(-4px);
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
}
.card-icon {
width: 2.75rem; height: 2.75rem;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1.25rem;
background: rgba(var(--accent-1-rgb), 0.14);
color: var(--accent-1);
}
.card-icon.is-accent-2 { background: rgba(var(--accent-2-rgb), 0.14); color: var(--accent-2); }
.card-icon svg, .card-icon img { width: 1.35rem; height: 1.35rem; }
.card h3 { margin-bottom: 0.5rem; }
.card p { margin: 0; font-size: 0.9375rem; }
.card-bordered-glow {
position: relative;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
}
/* -----------------------------------------------------------------------
8. Forms
----------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; min-width: 0; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.input, .textarea, select.input {
background: var(--input-bg);
border: 1px solid var(--border-strong);
color: var(--text-primary);
border-radius: var(--radius-md);
padding: 0.8rem 1rem;
font-family: var(--font-sans);
font-size: 0.9375rem;
transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.textarea { resize: vertical; min-height: 120px; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus, select.input:focus {
outline: none;
border-color: var(--accent-1);
box-shadow: 0 0 0 3px rgba(var(--accent-1-rgb), 0.25);
}
select.input option {
background: var(--card);
color: var(--text-primary);
}
/* A percentage width lets a select shrink below its longest option (the
country list's "South Georgia and the South Sandwich Islands"), so it can't
push a single-column form wider than a phone screen. */
.field select.input { width: 100%; min-width: 0; }
.field-hint { font-size: 0.75rem; color: var(--text-muted); }
.checkbox-row { display: flex; align-items: center; gap: 0.6rem; }
.checkbox-row input[type="checkbox"] {
width: 1.05rem; height: 1.05rem; accent-color: var(--accent-1);
}
/* One-line email capture (newsletter, "send me the details"). The input
takes the room and the button keeps its label; when there isn't room for
both, the button drops under the input instead of squeezing it. */
.inline-form-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.inline-form-row .input { flex: 1 1 13rem; min-width: 0; }
.inline-form-row .btn { flex: 0 0 auto; }
.is-sent .inline-form-row { display: none; }
/* Status line under a form: a muted resting note, then sending / sent /
failed. The icons are inline masks, so nothing extra is downloaded and
they take the text color in either theme. */
.form-status {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.75rem;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--text-muted);
}
.form-status[hidden] { display: none; }
.form-status[data-state="success"],
.form-status[data-state="error"] { color: var(--text-primary); }
.form-status[data-state]::before {
content: "";
flex: 0 0 auto;
width: 1rem;
height: 1rem;
margin-top: 0.05rem;
background: currentColor;
-webkit-mask: var(--status-icon) center / contain no-repeat;
mask: var(--status-icon) center / contain no-repeat;
}
.form-status[data-state="wait"]::before {
--status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 1-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
animation: form-status-spin 0.9s linear infinite;
}
.form-status[data-state="success"]::before {
--status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background: var(--accent-2);
}
.form-status[data-state="error"]::before {
--status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M8 4.7v4.1' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='1' fill='black'/%3E%3C/svg%3E");
}
@keyframes form-status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.form-status[data-state="wait"]::before { animation: none; }
}
/* -----------------------------------------------------------------------
9. Navbar — liquid glass, pinned
----------------------------------------------------------------------- */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}
.navbar-inner {
background: linear-gradient(180deg, rgba(var(--card-rgb), 0.55), rgba(var(--surface-rgb), 0.4));
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
box-shadow: inset 0 1px 0 var(--navbar-highlight);
transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.navbar.is-scrolled .navbar-inner {
background: rgba(var(--surface-rgb), 0.78);
box-shadow: inset 0 1px 0 var(--navbar-highlight), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
padding-bottom: 1rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.6rem; }
/* The 2026 mark's artwork fills 97% of its box, where the old one filled 87%,
so the same box height would render it ~11% larger and leave only ~4px
between the wordmark and "Product" at 941px (the last width before the
links collapse). 36/29 reproduce the previous optical size to within a
pixel and restore the old spacing. */
.nav-logo img { height: 29px; width: auto; }
.navbar .nav-logo img { height: 36px; }
.nav-logo .logo-light { display: none; }
:root[data-theme="light"] .nav-logo .logo-dark { display: none; }
:root[data-theme="light"] .nav-logo .logo-light { display: block; }
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-links a,
.nav-links .nav-dropdown-trigger {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 500;
position: relative;
padding: 4px 0;
background: none;
border: none;
font-family: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: color 0.15s var(--ease);
}
.nav-links a::after,
.nav-links .nav-dropdown-trigger::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: var(--accent-1);
border-radius: var(--radius-full);
transition: width 0.25s var(--ease);
}
.nav-links a:hover,
.nav-links a.is-active,
.nav-links .nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger { color: var(--text-primary); }
.nav-links a:hover::after,
.nav-dropdown.is-open .nav-dropdown-trigger::after { width: 100%; }
.nav-dropdown-trigger .chevron { transition: transform 0.2s var(--ease); flex-shrink: 0; }
.nav-dropdown.is-open .nav-dropdown-trigger .chevron { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
/* A product bar (Understand, Onboard) carries its own trial action, so the
sitewide one would be a second identical button in the same corner of the
screen. Keyed on the bar actually being in the page rather than on a body
class, so it stays right as pages gain or lose one. Browsers without :has()
drop the rule and simply keep showing the button. */
body:has(.u-nav) .navbar .nav-actions .btn-primary,
body:has(.ob-nav) .navbar .nav-actions .btn-primary { display: none; }
.nav-toggle {
display: none;
width: 2.25rem; height: 2.25rem;
border-radius: var(--radius-sm);
background: transparent; border: 1px solid var(--border-strong);
color: var(--text-primary);
align-items: center; justify-content: center;
cursor: pointer;
}
.nav-mobile-panel {
display: none;
flex-direction: column;
gap: 0.25rem;
padding: 0.5rem 1.75rem 1.5rem;
background: rgba(var(--surface-rgb), 0.96);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.nav-mobile-panel > a {
padding: 0.75rem 0;
font-size: 0.95rem;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
.navbar.is-open .nav-mobile-panel { display: flex; }
/* --- Product dropdown (desktop mega-menu) ---
Opens on click/tap (JS toggles .is-open) rather than CSS :hover — a
hover-only menu needs the trigger and panel to share one continuous
hoverable area with no gap, which is fragile; a click toggle plus
close-on-outside-click/Escape (see main.js) is simpler and works the
same for mouse, touch, and keyboard. */
.nav-dropdown { position: relative; }
.nav-megamenu {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(6px);
width: 424px;
max-width: calc(100vw - 3rem);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.125rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
z-index: 1002;
/* A safety net, not a layout tool: the menus are sized to fit without it.
It stops any future addition from pushing content off the bottom of the
screen, and on a short laptop window it scrolls instead of being cut. */
max-height: calc(100vh - 8rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.nav-dropdown.is-open .nav-megamenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* The selector carries .nav-megamenu for specificity, not for scope: these are
elements inside .nav-links, and `.nav-links a` (0,1,1) sets
align-items: center, which outranks a bare .nav-megamenu-item (0,1,0). The
effect is invisible until two items in a grid row differ in height -- then
the shorter one's icon floats to the middle of the stretched row and sits
level with the description instead of the title. */
.nav-megamenu .nav-megamenu-item {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 0.8rem 0.85rem;
border-radius: var(--radius-md);
transition: background-color 0.15s var(--ease);
}
.nav-megamenu-item:hover { background: rgba(var(--accent-1-rgb), 0.10); }
.nav-megamenu-item:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.nav-megamenu-icon {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-md);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.05rem;
background: rgba(var(--accent-1-rgb), 0.14);
color: var(--accent-1);
}
.nav-megamenu-icon.is-accent-2 { background: rgba(var(--accent-2-rgb), 0.14); color: var(--accent-2); }
.nav-megamenu-icon svg, .nav-megamenu-icon img { width: 1.15rem; height: 1.15rem; }
.nav-megamenu-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.nav-megamenu-title { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.nav-megamenu-desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; }
.nav-megamenu-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 0.5rem;
padding: 0.85rem 0 0.25rem;
border-top: 1px solid var(--border);
font-size: 0.84rem;
font-weight: 700;
color: var(--accent-1);
}
.nav-megamenu-footer svg { width: 13px; height: 13px; transition: transform 0.15s var(--ease); }
.nav-megamenu-footer:hover svg { transform: translateX(3px); }
/* --- Solutions dropdown: same item format as Product, on a wider surface.
Twelve pains with a sentence each do not fit a 440px panel -- that version
gave each description a 164px column and 11px type, and wrapped most of them
to four lines. This one is 836px wide with the items 2-up inside it, so a
description gets ~330px and almost all of them land on two lines at the same
13px the Product menu uses.
Categories stack rather than sitting side by side. With one category on
screen a side-by-side row left half the panel empty; stacking keeps the
panel one width whether "Who we help" is in it or not. --- */
.nav-megamenu.is-columns.is-rich { width: 836px; }
/* An 836px panel centred on its own trigger reaches the left edge of a 941px
window -- the narrowest desktop there is, since the nav becomes a hamburger
at 940. Anchoring it to the navbar's container instead of the trigger keeps
an even gutter at every width. The id is the whole selector because the
markup already carries it on all 47 pages; the Product dropdown is narrow
enough to stay anchored to its trigger. */
.navbar .container { position: relative; }
#solutionsDropdown { position: static; }
.nav-megamenu-columns-row {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.nav-megamenu-col {
min-width: 0;
display: flex;
flex-direction: column;
}
.nav-megamenu-col + .nav-megamenu-col {
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.nav-megamenu-col-title {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
padding: 0.1rem 0.85rem 0.7rem;
}
.nav-megamenu-col-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.15rem 0.75rem;
align-items: start; /* each item sizes to its own copy instead of being
stretched to its row partner's height */
}
.nav-megamenu-item-sm {
gap: 0.75rem;
padding: 0.7rem 0.85rem;
}
.nav-megamenu-icon-sm {
width: 2rem;
height: 2rem;
border-radius: var(--radius-sm);
margin-top: 0.1rem;
}
.nav-megamenu-icon-sm svg, .nav-megamenu-icon-sm img { width: 1rem; height: 1rem; }
.nav-megamenu-item-sm .nav-megamenu-title { font-size: 0.875rem; }
.nav-megamenu-item-sm .nav-megamenu-desc { font-size: 0.8125rem; line-height: 1.5; }
/* A category rendered as a title-only index, 3-up. "Common pains" carries a
sentence each and runs 560px on its own; measured, a second category with
descriptions takes the panel to 1322px, which no viewport has. So when
"Who we help" is uncommented it goes on the column as