inherits neither. */
.diag-link { cursor: pointer; }
.diag-link rect { transition: fill .18s, stroke-width .18s; }
.diag-link:hover rect { fill: rgba(33,150,243,.30); stroke-width: 2.5; }
/* ------------------------------------------------------------------------
Homepage hero lede.
The proposition sits directly under the headline in a deck-sized weight --
larger than body copy, clearly smaller than the h1, so it reads as the
second thing on the page rather than competing with the first.
The strap ("Your data. Your rules. Your choice of AI.") sits after the body
copy and immediately before the call to action. It deliberately echoes the
h1's "Your data, wherever it lives" -- separated by the lede and two
paragraphs that reads as a refrain closing the argument, whereas placing it
adjacent to the h1 would read as the same line said twice.
------------------------------------------------------------------------ */
.hero-lede {
font-family: 'Montserrat', sans-serif;
font-size: clamp(1.12rem, 1.6vw, 1.35rem);
font-weight: 800; line-height: 1.4; letter-spacing: -.01em;
color: #EEF4FF; max-width: 540px; margin-bottom: 1.1rem;
}
.hero-sub-tight { margin-bottom: 1.5rem; }
.hero-strap {
font-family: 'Montserrat', sans-serif;
font-size: .95rem; font-weight: 800; letter-spacing: .01em;
color: var(--accent-bright); margin-bottom: 2.1rem;
}
/* The two body paragraphs sit closer together than a lone lede did. */
.hero-lede + .hero-sub { margin-bottom: 1.1rem; }
/* ------------------------------------------------------------------------
Stack explainer band.
Replaces the caption strip under the hero diagram. In the mockup that was a
single carrying inline styles, sitting BETWEEN two sections with no
container of its own -- full-bleed and unstyled at any width. It is a real
section here, so the copy sits on the same 1080px measure as the rest of the
page.
The four steps are an
because they are the diagram's tiers in order:
OPAL on top, Virtuoso, UDA, and the engineers who deploy it. The numbering
is what ties this copy to the stack drawn directly above it, so it is shown
rather than suppressed.
------------------------------------------------------------------------ */
.stack-band {
background: var(--navy-dk);
padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.25rem, 4vw, 3rem);
}
.stack-thesis {
font-family: 'Montserrat', sans-serif;
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
font-weight: 800; line-height: 1.35; letter-spacing: -.01em;
color: #EEF4FF; max-width: 30ch; margin: 0 0 1.9rem;
}
.stack-steps {
list-style: none; counter-reset: stack; margin: 0 0 1.7rem; padding: 0;
display: grid; gap: 1.5rem 2rem;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.stack-steps li {
counter-increment: stack; position: relative; padding-top: 2.1rem;
font-size: .95rem; line-height: 1.6; color: rgba(220, 236, 255, .78);
border-top: 2px solid rgba(100, 180, 255, .28);
}
.stack-steps li::before {
content: counter(stack, decimal-leading-zero);
position: absolute; top: .75rem; left: 0;
font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 800;
letter-spacing: .12em; color: var(--accent-bright);
}
.stack-steps li b { color: #EEF4FF; font-weight: 800; }
.stack-strap {
font-family: 'Montserrat', sans-serif;
font-size: .95rem; font-weight: 800; color: var(--accent-bright); margin: 0;
}
/* ===== EMBEDDED SPARQL / FEED-BACKED PAGES =====
The server-rendered result set is a data island, not presentation:
js/embedded-sparql.js reads it and renders through page templates, so it is
hidden unconditionally rather than toggled after rendering. That avoids a
flash of raw result rows, and keeps them hidden even if the script fails. */
.embeddedsparqlresultset { display: none; }
.post-featured-slot:empty { display: none; }
.post-featured { background: linear-gradient(160deg, var(--navy-dk) 0%, var(--navy) 60%, var(--navy-lt) 100%); color: #fff; border-radius: 8px; padding: 2.25rem 2.5rem; margin-bottom: 2rem; }
.post-featured h2 { font-family:'Montserrat',sans-serif; font-weight: 800; font-size: clamp(1.4rem,2.4vw,1.9rem); line-height: 1.2; letter-spacing: -.01em; margin: .6rem 0 1.25rem; text-wrap: balance; }
/* Fixed-background region: text colours pinned, never theme variables. */
.post-featured .post-meta { color: rgba(255,255,255,.72); }
.post-featured .post-category { background: rgba(255,255,255,.14); color: #fff; }
.post-featured .read-more { color: #fff; border-bottom: 1.5px solid rgba(255,255,255,.55); }
.post-featured .read-more:hover { border-bottom-color: #fff; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem 1.6rem; display: flex; flex-direction: column; border-top: 4px solid var(--blue); transition: border-color .2s, box-shadow .2s; }
.post-card:hover { box-shadow: var(--shadow); }
.post-card h3 { font-family:'Montserrat',sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.4; color: var(--ink); margin: .6rem 0 1.1rem; flex: 1; }
.post-meta { display: flex; align-items: center; gap: .6rem; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--ink2); }
.post-category { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 3px; background: var(--surface2); color: var(--link); }
.post-card .read-more { font-size: .8rem; font-weight: 700; color: var(--link); align-self: flex-start; }
.post-card .read-more:hover { text-decoration: underline; }
:root[data-theme="dark"] .post-card .read-more,
:root[data-theme="dark"] .post-category { color: var(--accent-bright); }
.post-empty { grid-column: 1 / -1; color: var(--ink2); font-size: .95rem; padding: 2rem 0; }
.post-empty a { color: var(--link); font-weight: 600; }
:root[data-theme="dark"] .post-empty a { color: var(--accent-bright); }
/* ===== OFFER BANNER (animated strip above the nav) =====
Ported from the live sites' matrix skin (#newsBanner / #news-carousel).
Fixed-background region: colors pinned to literal values, never theme
variables, per the standing rule for regions with a hard-coded background. */
.offer-banner { background: linear-gradient(to right, var(--navy), var(--navy-dk)); overflow: hidden; }
.offer-banner[hidden] { display: none; }
.offer-banner-inner { position: relative; display: flex; align-items: center; justify-content: center; padding: .5rem 2.75rem .5rem 1rem; min-height: 2.1rem; }
.offer-carousel { flex: 1; text-align: center; }
/* display is set entirely by js/offer-banner.js (explicit 'block'/'none' on
every item, not just the first), never by CSS. A :first-child fallback
used to live here; it was the bug that made rotation go blank after the
first tick, because a rotated-into item cleared to no inline style falls
back to plain .offer-item's display:none unless it happens to BE the first
child, which only the initial item ever is. */
.offer-item { display: none; }
.offer-link { color: #fff; font-size: .82rem; font-weight: 600; }
.offer-title { }
.offer-price { color: rgba(255,255,255,.78); font-weight: 700; }
.offer-close-btn { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,.75); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .3rem .5rem; }
.offer-close-btn:hover { color: #fff; }
/* Dark mode: navy text on the dark surface was near-invisible. */
:root[data-theme="dark"] .pricing-amount,
:root[data-theme="dark"] .pricing-card.tier-contact .btn-buy { color: var(--ink); }
/* ===== PERSONAS ("Built for your role", UDA page) =====
Tabs over a panel per role. Colours are theme tokens only, so the block
follows the light/dark toggle: --link is the text blue (lightened in dark
mode), --surface/--border/--ink/--ink2 are the page tokens. */
.personas-tabs {
display: flex; gap: .5rem; margin: 2rem 0 2.2rem; padding-bottom: .5rem;
border-bottom: 2px solid var(--border);
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.personas-tabs::-webkit-scrollbar { display: none; }
.personas-tab {
flex: none; font-family: 'Montserrat',sans-serif; font-size: .82rem; font-weight: 600;
padding: .75rem 1.1rem; white-space: nowrap; cursor: pointer;
color: var(--ink2); background: transparent; border: 0;
border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
transition: color .15s, background .15s, border-color .15s;
}
.personas-tab:hover { color: var(--link); background: var(--surface2); }
.personas-tab:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.personas-tab[aria-selected="true"] {
color: var(--link); border-bottom-color: var(--link); background: var(--surface2); font-weight: 700;
}
.personas-panel {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2.5rem; align-items: center;
}
.personas-panel[hidden] { display: none; }
.personas-headline {
font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.2; color: var(--ink); margin-bottom: 1rem;
}
.personas-body { font-size: 1.05rem; line-height: 1.75; color: var(--ink2); max-width: 34rem; }
.personas-visual {
display: flex; align-items: center; justify-content: center; min-height: 260px;
padding: 1.25rem; background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; box-shadow: var(--shadow);
}
.personas-visual img { width: 100%; max-width: 420px; height: auto; max-height: 300px; object-fit: contain; }
@media (max-width: 760px) {
.personas-panel { grid-template-columns: 1fr; gap: 1.5rem; }
}
.personas-sub { font-size: 1.1rem; line-height: 1.7; color: var(--ink2); max-width: 44rem; margin-top: .75rem; }
/* ===== TRY MENU AND TRIAL CHOOSERS (additions) =====
"Which Driver Do I Need?" now sits at the foot of the trial menu; the
Enterprise chooser's client step has three columns; links in a chooser's
status line follow the theme. Text colours use --link so dark mode lightens
them. */
.try-menu .try-menu-help { margin-top: .35rem; padding-top: .75rem; border-top: 1px solid rgba(220,236,255,.14); }
.wd-result .wd-continue { margin-top: .9rem; }
.tl-browser.tl-browser-3 { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.7fr); }
.tl-browser.tl-browser-v { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, .8fr); }
.tl-status a { font-weight: 700; color: var(--link); text-decoration: none; }
.tl-status a:hover { text-decoration: underline; }
@media (max-width: 760px) { .tl-browser.tl-browser-3, .tl-browser.tl-browser-v { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } }
/* ===== LIGHT MODE FOR THE FULL-WIDTH BANDS =====
The announcement bar, hero, stack band, closing band and footer were navy in
both themes, so the toggle appeared to change only the menu and the middle
of each page. In light mode they now follow the theme: pale grounds, ink
text, the page's own accent. Dark mode is untouched (it keeps the navy
look). The hero diagrams are drawn for navy; in light mode they get a navy
panel of their own so their labels stay legible without recolouring each
drawing. Applied for an explicit data-theme="light", and for visitors whose
system prefers light and who have no stored choice yet. */
:root[data-theme="light"] .annc {
background: linear-gradient(to right, #DCE8F8, #EAF1FB); color: var(--navy);
border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .hero,
:root[data-theme="light"] .closing {
background: linear-gradient(160deg, #E6EEF9 0%, #F0F5FC 55%, #F7FAFE 100%);
border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .hero::after {
background: radial-gradient(ellipse 55% 60% at 72% 50%, rgba(51,102,153,.08) 0%, transparent 60%);
}
:root[data-theme="light"] .eyebrow { color: var(--link); }
:root[data-theme="light"] .hero-h1,
:root[data-theme="light"] .closing-h2,
:root[data-theme="light"] .hero-lede,
:root[data-theme="light"] .stack-thesis,
:root[data-theme="light"] .stack-steps li b { color: var(--ink); }
:root[data-theme="light"] .hero-h1 em,
:root[data-theme="light"] .hero-strap,
:root[data-theme="light"] .stack-strap,
:root[data-theme="light"] .stack-steps li::before { color: var(--navy); }
:root[data-theme="light"] .hero-sub,
:root[data-theme="light"] .closing-sub,
:root[data-theme="light"] .stack-steps li { color: var(--ink2); }
:root[data-theme="light"] .hero-note,
:root[data-theme="light"] .kicker-closing { color: var(--ink2); opacity: .85; }
:root[data-theme="light"] .closing-h2 .heading-anchor { color: var(--link); }
:root[data-theme="light"] .closing-h2 .heading-anchor:hover,
:root[data-theme="light"] .closing-h2 .heading-anchor:focus-visible { background: rgba(0,51,102,.08); }
:root[data-theme="light"] .hero .btn-primary,
:root[data-theme="light"] .closing .btn-primary { background: var(--navy); color: #fff; }
:root[data-theme="light"] .hero .btn-primary:hover,
:root[data-theme="light"] .closing .btn-primary:hover { background: var(--navy-dk); }
:root[data-theme="light"] .hero .btn-ghost,
:root[data-theme="light"] .closing .btn-ghost {
color: var(--navy); background: transparent; border-color: rgba(0,51,102,.35);
}
:root[data-theme="light"] .hero .btn-ghost:hover,
:root[data-theme="light"] .closing .btn-ghost:hover { background: rgba(0,51,102,.07); border-color: var(--navy); }
:root[data-theme="light"] .stack-band,
:root[data-theme="light"] .fig-caption-band { background: var(--surface2); color: var(--ink2); }
:root[data-theme="light"] .stack-steps li { border-top-color: rgba(51,102,153,.35); }
:root[data-theme="light"] .foot {
background: var(--surface2); border-top: 1px solid var(--border); color: var(--ink2);
}
:root[data-theme="light"] .foot-brand { color: var(--ink); }
:root[data-theme="light"] .foot-h { color: var(--ink); }
:root[data-theme="light"] .foot-links a { color: var(--ink2); }
:root[data-theme="light"] .foot-links a:hover { color: var(--link); }
:root[data-theme="light"] .foot-bottom { border-top-color: var(--border); }
/* The trial menu drops out of the hero: a light card in light mode. */
:root[data-theme="light"] .try-menu {
background: var(--surface); border-color: var(--border); box-shadow: 0 14px 34px rgba(0,51,102,.16);
}
:root[data-theme="light"] .try-menu a,
:root[data-theme="light"] .try-menu .try-menu-item { color: var(--ink); }
:root[data-theme="light"] .try-menu a:hover,
:root[data-theme="light"] .try-menu a:focus-visible,
:root[data-theme="light"] .try-menu .try-menu-item:hover,
:root[data-theme="light"] .try-menu .try-menu-item:focus-visible { color: var(--link); background: var(--surface2); }
:root[data-theme="light"] .try-menu .try-menu-help { border-top-color: var(--border); }
/* full-monty: the hero diagrams follow the theme. They are drawn for navy
(pale strokes, near-white labels); on light mode's pale hero they used to sit
on a navy panel of their own. Instead, every literal colour of the drawings'
shared palette (all six hero drawings use the same twenty values) is mapped
to a light-theme value, the same values content/youid.html uses for its
diagram. CSS fill/stroke override SVG presentation attributes, so the
drawings themselves are untouched; dark mode keeps them exactly as drawn. */
:root[data-theme="light"] .hero-diag svg { background: none; padding: 0; }
:root[data-theme="light"] .hero-diag [fill="#0f3e72"] { fill: #F4F8FC; }
:root[data-theme="light"] .hero-diag [fill="rgba(238,244,255,0.10)"] { fill: rgba(255,255,255,0.80); }
:root[data-theme="light"] .hero-diag [fill="rgba(0,18,44,0.45)"] { fill: rgba(0,51,102,0.17); }
:root[data-theme="light"] .hero-diag [fill="rgba(0,18,44,0.50)"] { fill: rgba(0,51,102,0.22); }
:root[data-theme="light"] .hero-diag [fill="rgba(238,244,255,0.30)"] { fill: rgba(0,51,102,0.28); }
:root[data-theme="light"] .hero-diag [fill="rgba(255,255,255,0.04)"] { fill: #FFFFFF; }
:root[data-theme="light"] .hero-diag [stroke="rgba(222,236,255,0.90)"] { stroke: rgba(0,51,102,0.58); }
:root[data-theme="light"] .hero-diag [stroke="rgba(238,244,255,0.40)"] { stroke: rgba(0,51,102,0.30); }
:root[data-theme="light"] .hero-diag [stroke="rgba(238,244,255,0.30)"] { stroke: rgba(0,51,102,0.24); }
:root[data-theme="light"] .hero-diag [fill="#7FA8D8"] { fill: #7FA3D3; }
:root[data-theme="light"] .hero-diag [stroke="#7FA8D8"] { stroke: #7FA3D3; }
:root[data-theme="light"] .hero-diag [fill="rgba(33,150,243,0.30)"] { fill: rgba(33,150,243,0.16); }
:root[data-theme="light"] .hero-diag [stroke="rgba(100,180,255,0.75)"],
:root[data-theme="light"] .hero-diag [stroke="rgba(100,180,255,0.80)"] { stroke: rgba(33,150,243,0.90); }
:root[data-theme="light"] .hero-diag [fill="#EEF4FF"] { fill: var(--ink); }
:root[data-theme="light"] .hero-diag [fill="rgba(170,204,245,0.78)"] { fill: var(--ink2); }
:root[data-theme="light"] .hero-diag [fill="#64B4FF"] { fill: var(--link); }
/* The drawings' own hover style brightens linked words to #EEF4FF. */
:root[data-theme="light"] .hero-diag .olx-tlink:hover,
:root[data-theme="light"] .hero-diag .olx-tlink:focus-visible { fill: var(--link); }
/* The footer carries the reversed (white) logo; light mode uses the standard
one, the same asset the menu already shows in light mode. */
:root[data-theme="light"] .foot-logo { content: url("https://www.openlinksw.com/DAV/oplweb3/images/logos/oplogo_std_200x80.png"); }
/* Light mode over inline styles. Several pages carry navy-band colours as
style="" attributes (kickers, the UDA database strip, the Virtuoso hero
stats, the figure-caption bands); an inline style beats a stylesheet rule,
so these target the exact inline patterns, and only in light mode. */
:root[data-theme="light"] [style*="rgba(160,196,240"],
:root[data-theme="light"] [style*="rgba(220,236,255"] { color: var(--ink2) !important; }
:root[data-theme="light"] .hero [style*="color:#fff"] { color: var(--ink) !important; }
:root[data-theme="light"] [style*="color:#64B4FF"] { color: var(--link) !important; border-color: var(--link) !important; }
:root[data-theme="light"] [style*="background:var(--navy-dk)"] { background: var(--surface2) !important; }
:root[data-theme="light"] [style*="rgba(255,255,255,0.16)"],
:root[data-theme="light"] [style*="rgba(255,255,255,.07)"] { border-color: var(--border) !important; }
/* ===== MAIN-MENU TRIAL DROPDOWN AND LOGIN ICON =====
On the driver pages the main menu's Free Trial is the hero's dropdown (built
by js/try-lite.js), opening under the button and right-aligned so it stays
on screen. The account control is an icon button the height of the theme
toggle, which it sits beside (see ACCOUNT MENU below). */
.nav-try { display: inline-flex; }
.nav-try > .btn-nav { cursor: pointer; font-family: 'Montserrat',sans-serif; }
.nav-try .try-menu { left: auto; right: 0; transform: none; }
/* ===== UDA HOME PAGE: FREE TRIAL > DATABASE > EDITION =====
The main-menu dropdown lists every database and bridge; each opens a
submenu of editions to its left (the menu sits at the right edge of the
bar). Hover and focus open it; a click opens it too, for touch. Colours
follow .try-menu, in both themes. */
.try-menu-hub { min-width: 15rem; }
.try-group { position: relative; }
.try-parent::before { content: "\2039"; margin-right: .6rem; opacity: .65; }
.try-submenu {
position: absolute; right: calc(100% - 2px); top: -.4rem; min-width: 14rem; padding: .4rem 0; z-index: 61;
visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility 0s linear .2s;
background: var(--navy-dk); border: 1px solid rgba(220,236,255,.22); border-radius: 6px;
box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.try-group:hover > .try-submenu,
.try-group:focus-within > .try-submenu,
.try-group.open > .try-submenu { visibility: visible; opacity: 1; transition: opacity .12s ease, visibility 0s; }
.try-group:hover > .try-parent,
.try-group.open > .try-parent { color: #fff; background: rgba(255,255,255,.08); }
.try-sep { border-top: 1px solid rgba(220,236,255,.14); margin: .35rem 0; }
:root[data-theme="light"] .try-submenu {
background: var(--surface); border-color: var(--border); box-shadow: 0 14px 34px rgba(0,51,102,.16);
}
:root[data-theme="light"] .try-sep { border-top-color: var(--border); }
:root[data-theme="light"] .try-group:hover > .try-parent,
:root[data-theme="light"] .try-group.open > .try-parent { color: var(--link); background: var(--surface2); }
/* ===== FREE TRIAL MENU: TOUCH DEVICES AND PHONES =====
Mouse: hover and focus open the menu and its database submenus (rules above).
Touch (no hover): js/try-lite.js toggles .open on a tap, so :hover, which
sticks after a tap, must not decide anything. Phones: the menu is a
full-width panel under the bar, databases expand in place (an accordion)
instead of flying out sideways, and every entry is at least 44px tall. */
.try-cap { padding: .55rem 1.1rem .25rem; font-family: 'Montserrat',sans-serif; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(220,236,255,.6); }
:root[data-theme="light"] .try-cap { color: var(--ink2); }
.try-dropdown.open > .try-menu { visibility: visible; opacity: 1; transition: opacity .12s ease, visibility 0s; }
@media (hover: none) {
.try-dropdown:hover > .try-menu,
.try-dropdown:focus-within > .try-menu,
.try-group:hover > .try-submenu,
.try-group:focus-within > .try-submenu { visibility: hidden; opacity: 0; transition: none; }
.try-dropdown.open > .try-menu,
.try-group.open > .try-submenu { visibility: visible; opacity: 1; }
.try-group:hover > .try-parent { background: none; color: inherit; }
.try-group.open > .try-parent { background: rgba(255,255,255,.08); }
:root[data-theme="light"] .try-group.open > .try-parent { background: var(--surface2); color: var(--link); }
.try-menu-item { min-height: 44px; }
}
@media (max-width: 760px) {
.nav-try { position: static; }
.nav-try .try-menu {
position: absolute; left: .75rem; right: .75rem; top: 100%; transform: none; margin-top: 0;
min-width: 0; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-try .try-menu::before { display: none; }
.try-menu-item { min-height: 44px; display: flex; align-items: center; }
.try-parent::before { content: "\203A"; display: inline-block; margin-right: .6rem; transition: transform .15s; }
.try-group.open > .try-parent::before { transform: rotate(90deg); }
.try-submenu {
position: static; display: none; visibility: visible; opacity: 1; min-width: 0;
padding: 0 0 .35rem 1.1rem; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.try-group.open > .try-submenu { display: block; }
.try-group:hover > .try-submenu, .try-group:focus-within > .try-submenu { display: none; }
.try-group.open:hover > .try-submenu, .try-group.open:focus-within > .try-submenu { display: block; }
}
/* ===== PHONE TOP BAR =====
Logo, Talk to an Architect, Free Trial, login and theme toggle did not fit in
375px: the theme toggle was squeezed to a sliver and pushed past the edge.
The icon buttons never shrink, and below 480px the bar tightens up. */
.theme-btn, .acct-btn { flex-shrink: 0; }
@media (max-width: 480px) {
.nav { gap: .6rem; padding: 0 .75rem; }
.nav-logo img { height: 26px; }
.nav-actions { gap: .3rem; }
.btn-nav { padding: .45rem .6rem; font-size: .64rem; letter-spacing: .02em; line-height: 1.25; text-align: center; }
.nav-try > .btn-nav { white-space: nowrap; }
}
/* ===== REPOSITORY LINK (GITHUB MARK) =====
A route with oplsite:repoHref shows the mark beside the login and theme icons
from 481px up; on phones the bar has no room, and the footer link shows
instead. Same box and colours as the login icon. */
.nav-repo-link {
width: 32px; height: 32px; padding: 0; box-sizing: border-box; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--border); border-radius: 4px; color: var(--ink2);
transition: color .18s, border-color .18s;
}
.nav-repo-link svg { display: block; }
.nav-repo-link:hover { color: var(--link); border-color: var(--blue); }
:root[data-theme="dark"] .nav-repo-link:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
.foot-repo-row { display: none; padding: 0 0 1rem; }
.foot-repo { font-size: .85rem; font-weight: 600; text-decoration: underline; }
@media (max-width: 480px) {
.nav-repo-link { display: none; }
.foot-repo-row { display: block; }
}
/* ===== ACCOUNT MENU (main bar) =====
Person icon with a chevron; opens the public site's profile dropdown (Log In,
Register, Profile, My Purchases, My Quotes, Log Out). Entries are shown by
login state: each carries data-show="out|in|always" and #odsAuth carries
data-state, so with no script the logged-out menu is what a visitor gets.
The account name sits beside the icon from 1400px up and the chevron from
1280px; below that the bar has no room and the name appears only at the head
of the open menu. Light and dark
follow the same tokens as the theme toggle. */
.ods-auth { display: flex; align-items: center; position: relative; }
.acct-btn { height: 32px; width: 32px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: .4rem;
background: none; border: 1.5px solid var(--border); border-radius: 4px; color: var(--ink2); cursor: pointer;
font-family: 'Montserrat',sans-serif; font-size: .78rem; font-weight: 600; transition: color .18s, border-color .18s; }
.acct-btn svg { display: block; flex-shrink: 0; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { color: var(--link); border-color: var(--blue); }
:root[data-theme="dark"] .acct-btn:hover,
:root[data-theme="dark"] .acct-btn[aria-expanded="true"] { color: var(--accent-bright); border-color: var(--accent-bright); }
/* The bar is a fixed budget: the button stays the 32px square the login icon
was, so adding the account menu costs the bar nothing. The chevron and the
name are extras that need room; they appear only where the bar has it. */
.acct-btn .acct-chev, .acct-name { display: none; }
@media (min-width: 1280px) { .acct-btn { width: auto; padding: 0 .55rem; } .acct-btn .acct-chev { display: block; } }
.acct-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1400px) { .acct[data-state="in"] .acct-name:not(:empty) { display: inline; } }
.acct-menu { position: absolute; top: calc(100% + .45rem); right: 0; min-width: 12.5rem; z-index: 60; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); padding: .3rem 0; }
.acct-menu[hidden] { display: none; }
.acct-head { padding: .45rem .85rem .55rem; font-size: .72rem; color: var(--ink2); border-bottom: 1px solid var(--border); margin-bottom: .25rem; }
.acct-head[hidden] { display: none; }
.acct-head strong { display: block; font-size: .8rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item { padding: .45rem .85rem; font-size: .78rem; font-weight: 600; font-family: 'Montserrat',sans-serif; color: var(--ink2); white-space: nowrap; }
.acct-item:hover, .acct-item:focus-visible { color: var(--link); background: var(--surface2); }
:root[data-theme="dark"] .acct-item:hover,
:root[data-theme="dark"] .acct-item:focus-visible { color: var(--accent-bright); }
.acct[data-state="out"] [data-show="in"], .acct[data-state="in"] [data-show="out"] { display: none; }
/* ===== EDITION TABS (driver and pricing pages) =====
Lite (Single-Tier) and Enterprise (Multi-Tier) offers, one panel each.
The strip reuses the .personas-tab look. Without script (js/edition-tabs.js
sets data-ready) both panels show, each under its own heading, and the strip
is hidden; with it the headings give way to the tabs. */
.edition-tabs:not([data-ready]) .edition-strip { display: none; }
.edition-tabs[data-ready] .edition-h { display: none; }
.edition-h { font-family: 'Montserrat',sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 2rem 0 .25rem; }
.edition-tabs .personas-tabs { margin-bottom: .6rem; }
.edition-panel[hidden] { display: none; }
/* A "Need More?" card sits beside the real offers on its tab. */
.pricing-card.tier-more .pricing-amount { font-size: 1.05rem; font-weight: 700; color: var(--ink2); margin-bottom: 1.2rem; }
/* ===== VIRTUOSO PAGE: install guides, FAQ, resources =====
Theme tokens only (--surface, --border, --ink, --ink2, --link), so all three
follow the light/dark toggle. */
.install-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.install-card .card-h3 { margin-bottom: .2rem; }
.install-icon { color: var(--link); margin-bottom: .4rem; }
.edition-lede { font-size: .95rem; color: var(--ink2); margin: .2rem 0 1rem; }
/* a deployment tab can hold more than one category of offer (AWS: virtual machines and managed SaaS), each with its own heading */
.edition-sub { font-family: 'Montserrat',sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--link); margin: 2.2rem 0 .2rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.edition-sub:first-of-type { margin-top: 1.4rem; padding-top: 0; border-top: 0; }
.edition-sublede { font-size: .92rem; color: var(--ink2); margin: .2rem 0 1rem; max-width: 52rem; }
/* with script the categories are sub-tabs and the tab label is the heading; without it they read as headed groups */
.edition-tabs[data-ready] .edition-sub { display: none; }
.edition-tabs[data-ready] .edition-sublede { margin-top: .4rem; }
/* the "#" link beside a deployment tab (edition-tabs.js): faint on the chosen tab, full on hover or focus, like the section headings';
a copied link shows a tick (the strip scrolls, so the usual "Link copied" bubble would be clipped) */
.tab-wrap { flex: none; display: inline-flex; align-items: center; }
.tab-wrap > .personas-tab { padding-right: 2rem; }
.tab-wrap > .tab-anchor { z-index: 1; width: 1.3rem; height: 1.3rem; margin: 0 .25rem 0 -1.85rem; opacity: 0; }
.tab-wrap > .personas-tab[aria-selected="true"] + .tab-anchor { opacity: .7; }
.tab-wrap:hover > .tab-anchor, .tab-wrap:focus-within > .tab-anchor, .tab-wrap > .tab-anchor.copied { opacity: 1; }
.tab-anchor.copied::after { content: none; }
.edition-sublede[id], .edition-panel[id], .pricing-card[id] { scroll-margin-top: 6rem; } /* clear the sticky header when a link lands here */
/* the managed SaaS cards: price on one line, its contract term on the next, the same for all three, so a longer figure
("From $2,632") never wraps in the middle of the phrase and the three line up */
#edition-panel-aws-saas .pricing-amount { line-height: 1.15; white-space: nowrap; }
#edition-panel-aws-saas .pricing-unit { display: block; margin: .35rem 0 0; font-size: .9rem; font-weight: 600; white-space: normal; }
.edition-tabs[data-ready] .edition-lede { margin-top: 1rem; }
.resource-links { list-style: none; margin: 0 0 .6rem; padding: 0; }
.resource-links li { margin-bottom: .55rem; font-size: .92rem; }
.resource-links a { color: var(--link); font-weight: 600; }
.resource-links a:hover { text-decoration: underline; }
.faq-list .faq-panel[hidden] { display: none; }
.faq-item { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); margin-bottom: .75rem; }
.faq-question {
cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.25rem; position: relative;
font-family: 'Montserrat',sans-serif; font-weight: 700; font-size: .95rem; line-height: 1.5; color: var(--ink);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
content: ''; position: absolute; right: 1.25rem; top: 50%; width: .55rem; height: .55rem;
border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2);
transform: translateY(-70%) rotate(45deg); transition: transform .18s;
}
.faq-item[open] > .faq-question::after { transform: translateY(-30%) rotate(-135deg); }
.faq-question:hover { color: var(--link); }
.faq-question:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
.faq-answer { padding: 0 1.25rem 1.1rem; font-size: .92rem; line-height: 1.75; color: var(--ink2); white-space: pre-line; }
/* ===== EDITION COMPARISON MATRIX (/virtuoso) =====
Table built by js/matrix-table.js. Theme tokens only. */
.matrix-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.matrix-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.matrix-table th, .matrix-table td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); text-align: center; }
.matrix-table thead th { font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--surface2); }
.matrix-table th[scope="row"], .matrix-table thead th:first-child { text-align: left; }
.matrix-table th[scope="row"] { font-weight: 600; color: var(--ink); }
.matrix-table tbody tr:last-child > * { border-bottom: 0; }
.matrix-table tbody tr[hidden] { display: none; }
.matrix-yes { color: var(--check); font-weight: 800; font-size: 1.05rem; }
.matrix-no { color: var(--ink2); opacity: .6; }
.matrix-more { text-align: center; margin-top: 1.25rem; }
.matrix-toggle {
font-family: 'Montserrat',sans-serif; font-weight: 700; font-size: .85rem; cursor: pointer;
color: var(--link); background: transparent; border: 1.5px solid var(--link); border-radius: 6px; padding: .7rem 1.5rem;
transition: background .15s;
}
.matrix-toggle:hover { background: var(--surface2); }
.matrix-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.matrix-cell { font-size: .88rem; color: var(--ink2); }
.matrix-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: .92rem; }
.provider-h { font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--ink); margin: 1.75rem 0 .5rem; }
.provider-h:first-of-type { margin-top: 1rem; }
.edition-tabs[data-ready] .provider-h { display: none; }
.edition-tabs .edition-tabs { margin-top: 1rem; }
.edition-tabs .edition-tabs .personas-tabs { margin-top: 0; }
.edition-tabs { scroll-margin-top: 5.5rem; }
/* Offers have ids (their offer IRI fragment) for direct links. */
.pricing-card { scroll-margin-top: 5.5rem; }
.pricing-card:target { outline: 2px solid var(--link); outline-offset: 4px; }
/* Hero stat strip on /virtuoso: five figures in a row. One shared size for the
figures (a clamp, so "Tables & Graphs" fits its column from desktop down),
and fewer columns as the page narrows. */
.stat-strip { gap: 1rem; }
.stat-strip .stat-num { font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.2; }
.stat-strip .stat-lbl { line-height: 1.4; }
@media (max-width: 1100px) { .stat-strip { grid-template-columns: repeat(3,1fr); row-gap: 1.6rem; } }
@media (max-width: 620px) { .stat-strip { grid-template-columns: repeat(2,1fr); } }
/* Install guides: sub-guide sections of numbered steps, with a quick-nav. */
.howto { display: grid; grid-template-columns: 14rem minmax(0,1fr); gap: 2.5rem; align-items: start; }
.howto-nav { position: sticky; top: 5.5rem; font-size: .9rem; }
.howto-nav ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.howto-nav a { display: block; padding: .45rem .9rem; color: var(--ink2); font-weight: 600; }
.howto-nav a:hover { color: var(--link); }
.howto-section { scroll-margin-top: 5.5rem; margin-bottom: 2.5rem; }
.howto-h2 { font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--ink); margin-bottom: .5rem; }
.howto-desc { color: var(--ink2); margin-bottom: 1.25rem; }
.howto-step { display: flex; gap: 1.1rem; scroll-margin-top: 5.5rem; padding: 1.25rem 0; border-top: 1px solid var(--border); }
.howto-num { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--link); color: #fff; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.howto-step-main { min-width: 0; flex: 1; }
.howto-h3 { font-family: 'Montserrat',sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: .6rem; }
.howto-text { color: var(--ink2); line-height: 1.65; }
.howto-text p, .howto-text ul, .howto-text ol, .howto-text blockquote { margin: .6rem 0; }
.howto-text ul, .howto-text ol { padding-left: 1.4rem; }
.howto-text a { color: var(--link); font-weight: 600; }
.howto-text blockquote { border-left: 3px solid var(--link); padding: .1rem 1rem; background: var(--surface2); }
.howto-text code { font-family: ui-monospace,Menlo,Consolas,monospace; font-size: .88em; background: var(--surface2); padding: .1em .35em; border-radius: 4px; }
.howto-code { position: relative; margin: .75rem 0; }
.howto-text pre { margin: 0; padding: 1rem 1rem; overflow-x: auto; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; }
.howto-text pre code { background: none; padding: 0; }
.howto-copy { position: absolute; top: .4rem; right: .4rem; font: 700 .72rem 'Montserrat',sans-serif; color: var(--link); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: .25rem .6rem; cursor: pointer; }
.howto-copy:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.howto-img { max-width: 100%; height: auto; margin-top: .9rem; border: 1px solid var(--border); border-radius: 6px; }
.howto-body { min-width: 0; }
.howto-back { margin-top: 2rem; }
@media (max-width: 900px) {
.howto { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
.howto-nav { position: static; }
.howto-nav ol { display: flex; flex-wrap: wrap; border-left: 0; gap: .4rem; }
.howto-nav a { border: 1px solid var(--border); border-radius: 999px; padding: .3rem .8rem; }
}
/* Install-guide index: a platform mark above each card's title. */
.howto-card { display: flex; flex-direction: column; }
.howto-card .card-b { flex: 1; }
.howto-logo { width: 3.5rem; height: 3.5rem; margin-bottom: 1.1rem; color: var(--ink); display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--surface2); padding: .6rem; }
.howto-logo svg { width: 100%; height: 100%; display: block; }
/* full-monty: refund policy under every pricing table (production wording). */
.refund-policy { max-width: 800px; margin: 2rem auto 0; text-align: center; }
.refund-policy h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.refund-policy p { font-size: .88rem; color: var(--ink2); line-height: 1.6; margin: 0; }
/* full-monty: nav search link, footer newsletter and social profiles. */
.nav-search-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; color: var(--ink2); border: 1.5px solid var(--border); }
.nav-search-link:hover, .nav-search-link:focus-visible { color: var(--link); border-color: var(--link); }
.foot-extra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(238,244,255,.12); }
.foot-subscribe { flex: 1 1 360px; max-width: 560px; }
.foot-sub-desc { font-size: .8rem; color: rgba(220,236,255,.7); margin: .25rem 0 .6rem; }
.foot-sub-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.foot-sub-row input { flex: 1 1 140px; min-width: 0; padding: .5rem .65rem; border-radius: 4px; border: 1px solid rgba(238,244,255,.25); background: rgba(238,244,255,.08); color: #EEF4FF; font-size: .85rem; }
.foot-sub-row input::placeholder { color: rgba(220,236,255,.55); }
.foot-sub-row button { padding: .5rem 1rem; border-radius: 4px; border: 1px solid #4a98f0; background: #1d74d8; color: #fff; font-weight: 600; font-size: .85rem; cursor: pointer; }
.foot-sub-row button[disabled] { opacity: .6; cursor: progress; }
.foot-sub-msg { min-height: 1.2em; margin-top: .4rem; font-size: .8rem; color: rgba(220,236,255,.8); }
.foot-sub-msg[data-state="error"] { color: #ffb4a8; }
.foot-sub-msg[data-state="success"] { color: #9be7b0; }
.foot-social { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; }
.foot-social a { color: rgba(220,236,255,.8); text-decoration: none; }
.foot-social a:hover, .foot-social a:focus-visible { color: #fff; text-decoration: underline; }
/* The footer's newsletter form and social links were drawn for the dark footer
(pale text on navy). Light mode's footer is pale, so they follow the same
light-theme tokens as the footer's other text. */
:root[data-theme="light"] .foot-extra { border-top-color: var(--border); }
:root[data-theme="light"] .foot-sub-desc,
:root[data-theme="light"] .foot-sub-msg { color: var(--ink2); }
:root[data-theme="light"] .foot-sub-row input { background: var(--surface); border-color: var(--border); color: var(--ink); }
:root[data-theme="light"] .foot-sub-row input::placeholder { color: var(--ink2); opacity: .75; }
:root[data-theme="light"] .foot-sub-msg[data-state="error"] { color: #b3261e; }
:root[data-theme="light"] .foot-sub-msg[data-state="success"] { color: #1b7f3b; }
:root[data-theme="light"] .foot-social a { color: var(--ink2); }
:root[data-theme="light"] .foot-social a:hover,
:root[data-theme="light"] .foot-social a:focus-visible { color: var(--link); }
/* full-monty: skip link, and the not-found page's search form. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--surface); color: var(--ink); padding: .6rem 1rem; border: 2px solid var(--link); border-radius: 4px; }
.skip-link:focus { left: 1rem; top: 1rem; }
.nf-search { margin-top: 1.5rem; max-width: 560px; }
.nf-search-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; color: rgba(220,236,255,.8); }
.nf-search-row { display: flex; gap: .5rem; }
.nf-search-row input { flex: 1; min-width: 0; padding: .6rem .75rem; border-radius: 4px; border: 1px solid rgba(238,244,255,.3); background: rgba(238,244,255,.08); color: #EEF4FF; font-size: .95rem; }
/* full-monty: the nav gained a Developer menu and a search link, and pages
with a pricing section carry an eleventh entry. Labels never wrap; the nav
tightens in steps instead. Measured on /opal, /virtuoso and /company: no
wrapped label and no horizontal overflow from 1600 px down to the 860 px
collapse. (/openlink-ldp wrapped three labels from 1366 px and overflowed
below 1100 px.) */
.nav-links > .nav-item > a, .btn-nav { white-space: nowrap; }
@media (max-width: 1600px) { .nav-links { gap: 1rem; } .nav-actions { gap: .4rem; } .btn-nav { padding: .5rem .75rem; } .nav-repo-link { display: none; } }
@media (max-width: 1366px) { .nav-links { gap: .7rem; } .nav-links a { font-size: .72rem; letter-spacing: .01em; } .btn-nav { padding: .45rem .6rem; font-size: .66rem; } }
@media (max-width: 1240px) { .nav-links { gap: .5rem; } .nav-links a { font-size: .68rem; letter-spacing: 0; } .nav-search-link { display: none; } }
@media (max-width: 1140px) { .btn-nav-ghost { display: none; } .nav-item.hasChildren > a::after { display: none; } .nav-links { gap: .45rem; } }
@media (max-width: 1000px) { .nav-links a { font-size: .62rem; } .nav-links { gap: .35rem; } .btn-nav { font-size: .6rem; padding: .4rem .45rem; } }
@media (max-width: 920px) { .nav-links a { font-size: .58rem; } .nav-links { gap: .28rem; } }
/* full-monty: a link whose text is a long address (OPAL's developer cards:
"linkeddata.uriburner.com/oauth/applications.vsp") breaks where it must, so
a card never pushes the page sideways on a phone (it overflowed by 20 px at
390 px). Text with spaces wraps as before. */
.card a, .card code { overflow-wrap: anywhere; }
/* full-monty: in how-to text, an address written as a link or inline code
("https://{CNAME}/oauth/applications.vsp") breaks where it must, so the
OPAL install guides and the Docker guide don't scroll sideways on a phone.
Code blocks (pre) keep their own horizontal scroll. */
.howto-text a, .howto-text :not(pre) > code { overflow-wrap: anywhere; }
/* Static how-to guide pages: group headings and the related-guide links */
.howto-group { margin: 2.2rem 0 .2rem; padding-bottom: .4rem; border-bottom: 2px solid var(--border); font-size: 1.35rem; color: var(--ink); }
.howto-group:first-child { margin-top: 0; }
.howto-related { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; color: var(--ink2); }
.howto-related-label { font-weight: 600; }
.howto-related-here { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--link); }
/* OPAL install guides (merged from the live pages): glossary, FAQ, media */
.howto-lead { margin-bottom: 1.6rem; }
.howto-text img, .howto-text video { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); margin: .8rem 0; display: block; }
.howto-text dl { margin: .6rem 0; }
.howto-text dt { margin-top: 1rem; font-weight: 700; color: var(--ink); }
.howto-text dd { margin: .25rem 0 0; color: var(--ink2); }
.howto-text details { margin: .6rem 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.howto-text summary { cursor: pointer; padding: .8rem 1rem; font-weight: 600; color: var(--ink); }
.howto-text details[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface2); }
.howto-text details > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
.howto-text details > :last-child { margin-bottom: 1rem; }
.howto-text table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.howto-text th, .howto-text td { border: 1px solid var(--border); padding: .4rem .7rem; text-align: left; }
/* Driver pages, "Install and configure": the guides as a compact matrix. Each group (protocol and
edition) is a small label over a row of operating-system chips; the remaining links sit below a rule. */
.guide-chips { list-style: none; margin: .4rem 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .45rem; }
.guide-chips li { display: contents; }
.guide-group { flex: 0 0 100%; margin-top: .95rem; font-family: 'Montserrat',sans-serif; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink2); }
.guide-group:first-child { margin-top: 0; }
.guide-chip { display: inline-block; padding: .3rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--link); font-size: .84rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.guide-chip:hover, .guide-chip:focus-visible { background: var(--surface); border-color: var(--link); text-decoration: none; }
.uda-links-more { margin-top: 0; padding-top: .9rem; border-top: 1px solid var(--border); }
.guide-more { margin: .9rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink2); }
/* Meshed wiki topics inside the guides: readable lists and headings, no runs of stray line breaks */
.howto-text ul { list-style: disc; }
.howto-text ol { list-style: decimal; }
.howto-text li { margin: .25rem 0; }
.howto-text h3 { margin: 1.3rem 0 .3rem; font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.howto-text h4 { margin: 1.1rem 0 .25rem; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.howto-text h5 { margin: 1rem 0 .2rem; font-size: .92rem; color: var(--ink); }
.howto-text br + br, .howto-text img + br, .howto-text br + img { display: none; }
.howto-text details > h3:first-of-type, .howto-text details > h4:first-of-type { margin-top: .9rem; }
/* Driver page hero: the four buttons (Talk to an Architect, Pricing, Free 30-Day Trial, Installation & Docs)
as a 2 x 2 grid of equal cells, one height, labels centred, so the rows line up whatever the labels are
and whichever of the buttons a page has. One column on a phone. */
.uda-hero-text .hero-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: stretch; }
.uda-hero-text .hero-ctas > a, .uda-hero-text .hero-ctas .try-dropdown { display: flex; width: 100%; }
.uda-hero-text .hero-ctas > a, .uda-hero-text .hero-ctas .try-dropdown > button {
box-sizing: border-box; width: 100%; min-height: 3.1rem; margin: 0; padding: .7rem 1rem; border-width: 1px; border-style: solid;
display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; white-space: normal;
}
.uda-hero-text .hero-ctas > a.btn-primary { border-color: transparent; }
@media (max-width: 480px) { .uda-hero-text .hero-ctas { grid-template-columns: minmax(0, 1fr); } }
/* Virtuoso hero: the Guides menu (content/virtuoso-vhero-more) as a ghost button, like the buttons above it, that opens a card of
grouped links (Installation, Cloud Marketplaces, Developer Guides) instead of a run of bare text links. No script: . */
.vhero-more { margin: 0; display: flex; }
/* the Virtuoso hero's four controls (primary, Pricing, trial, Guides) as a 2 x 2 grid of equal cells, as on the driver pages */
.hero-ctas:has(.vhero-more) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: stretch; max-width: 34rem; }
.hero-ctas:has(.vhero-more) > a {
box-sizing: border-box; width: 100%; min-height: 3.1rem; margin: 0; padding: .7rem 1rem; border-width: 1px; border-style: solid;
display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; white-space: normal;
}
.hero-ctas:has(.vhero-more) > a.btn-primary { border-color: transparent; }
.hero-ctas:has(.vhero-more) .vguides { display: block; width: 100%; }
.hero-ctas:has(.vhero-more) .vguides > summary { box-sizing: border-box; width: 100%; min-height: 3.1rem; justify-content: center; padding: .7rem 1rem; }
@media (max-width: 480px) { .hero-ctas:has(.vhero-more) { grid-template-columns: minmax(0, 1fr); } }
.hero:has(.vguides) { overflow: visible; }
/* the hero's content wrappers each have z-index 1 (stacking contexts): the one that holds the menu must sit above the one that
holds the strip below it, or the open menu is painted under the strip's text */
.hero:has(.vguides) > *:has(.vguides) { z-index: 10; }
.vguides { position: relative; display: inline-block; }
.vguides > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; font-family: 'Montserrat',sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(220,236,255,.88); background: rgba(255,255,255,.07); border: 1.5px solid rgba(220,236,255,.30); padding: .82rem 1.4rem; border-radius: 4px; transition: all .18s; }
.vguides > summary::-webkit-details-marker { display: none; }
.vguides > summary::after { content: ""; width: .48rem; height: .48rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s; }
.vguides[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.vguides > summary:hover, .vguides[open] > summary { background: rgba(255,255,255,.13); border-color: rgba(220,236,255,.55); }
.vguides > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
:root[data-theme="light"] .hero .vguides > summary { color: var(--navy); background: transparent; border-color: rgba(0,51,102,.35); }
:root[data-theme="light"] .hero .vguides > summary:hover, :root[data-theme="light"] .hero .vguides[open] > summary { background: rgba(0,51,102,.07); border-color: var(--navy); }
.vguides-menu { position: absolute; z-index: 30; left: 0; top: calc(100% + .45rem); width: min(33rem, calc(100vw - 2.5rem)); box-sizing: border-box; display: flex; flex-wrap: wrap; gap: .4rem .45rem; padding: 1.1rem 1.25rem 1.25rem; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 40px rgba(0,20,50,.28); }
.vguides-h { flex: 0 0 100%; margin: .65rem 0 .1rem; font-family: 'Montserrat',sans-serif; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink2); }
.vguides-h:first-child { margin-top: 0; }
.vguides-menu a { display: inline-block; padding: .3rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--link); font-size: .84rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .15s, border-color .15s; }
.vguides-menu a:hover, .vguides-menu a:focus-visible { background: var(--surface); border-color: var(--link); text-decoration: none; }
.vguides-menu a[target="_blank"]::after { content: " \2197"; font-size: .85em; }
/* The close button (js/guides-menu.js) sits in the menu's top right corner; it is out of the flex flow, so the first heading
keeps its place. */
.vguides-close { position: absolute; top: .6rem; right: .7rem; width: 1.9rem; height: 1.9rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface2); color: var(--ink2); font: 400 1.25rem/1 'Montserrat',sans-serif; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.vguides-close:hover, .vguides-close:focus-visible { background: var(--surface); border-color: var(--link); color: var(--link); }
.vguides-close + .vguides-h { margin-top: 0; }
@media (max-width: 600px) {
.vguides { display: block; }
.vguides > summary { display: flex; justify-content: space-between; }
.vguides-menu { position: relative; top: auto; left: auto; width: auto; margin-top: .5rem; box-shadow: none; }
}
/* Vector Index documentation (content/virtuoso/docs/vector-index): page list, article, admonitions */
.dx-main { min-width: 0; }
.dx-main h2 { margin: 2.2rem 0 .6rem; font-size: 1.55rem; color: var(--ink); scroll-margin-top: 5.5rem; }
.dx-main h3, .dx-main h4 { margin: 1.6rem 0 .4rem; color: var(--ink); scroll-margin-top: 5.5rem; }
.dx-main code { font-size: .88em; background: var(--surface2); border: 1px solid var(--rule); border-radius: 4px; padding: .05em .35em; }
/* Standard code and query example (codefmt.py): language bar with Copy, then the highlighted text.
The panel is dark in both themes, so every colour here is pinned to a literal value. */
.codeblock { margin: 1.1rem 0; border-radius: 10px; overflow: hidden; background: #0D1A2E; border: 1px solid #1d3354; box-shadow: var(--shadow); }
.codeblock-bar { display: flex; align-items: center; justify-content: space-between; padding: .35rem .5rem .35rem .9rem; background: #13233d; border-bottom: 1px solid #1d3354; }
.codeblock-lang { font: 700 .7rem 'Montserrat',sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8fb3de; }
.codeblock-copy { font: 700 .7rem 'Montserrat',sans-serif; color: #D4E4FF; background: transparent; border: 1px solid #2c4a75; border-radius: 4px; padding: .2rem .6rem; cursor: pointer; }
.codeblock-copy:hover { background: #1d3354; }
.codeblock-copy:focus-visible { outline: 2px solid #64B4FF; outline-offset: 2px; }
figure.codeblock pre { margin: 0; padding: .9rem 1.1rem; overflow-x: auto; background: transparent; color: #D4E4FF; border: 0; border-radius: 0; line-height: 1.6; tab-size: 2; }
figure.codeblock pre code { background: none; border: 0; padding: 0; color: inherit; font: 400 .85rem/1.6 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space: pre; }
.codeblock[data-lang="text"] pre code { color: #B9CBE4; }
.tk-k { color: #7CC4FF; font-weight: 600; } .tk-s { color: #A5E08A; } .tk-c { color: #8497AE; font-style: italic; }
.tk-n { color: #F0B36B; } .tk-i { color: #D3A8FF; } .tk-v { color: #FFD479; } .tk-f { color: #7FE0D0; } .tk-p { color: #8497AE; user-select: none; }
.dx-main hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.dx-main .table-wrap { overflow-x: auto; margin: 1rem 0; }
.dx-main table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.dx-main th, .dx-main td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.dx-main th { color: var(--ink); background: var(--surface2); }
.admon { margin: 1rem 0; padding: .7rem 1rem; border-left: 4px solid var(--link); background: var(--surface2); border-radius: 0 8px 8px 0; }
.admon p { margin: .3rem 0; }
.admon-h { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.admon-tip { border-left-color: var(--check); } .admon-tip .admon-h { color: var(--check); }
.admon-important, .admon-caution, .admon-warning { border-left-color: #c77700; }
.admon-important .admon-h, .admon-caution .admon-h, .admon-warning .admon-h { color: #c77700; }
/* ---- Documentation shell (dxshell.py): pages reached from Guides and Documentation links open on a compact header, never the
marketing hero, then a sidebar / article / on-this-page layout ---- */
.dx-head { background: var(--surface); border-bottom: 1px solid var(--border); }
.dx-head-in { max-width: 88rem; margin: 0 auto; padding: 1.6rem 2rem 1.5rem; }
.dx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; font-size: .8rem; font-weight: 600; color: var(--ink2); }
.dx-crumbs a { color: var(--link); text-decoration: none; }
.dx-crumbs a:hover { text-decoration: underline; }
.dx-crumbs [aria-current] { color: var(--ink2); font-weight: 500; }
.dx-sep { color: var(--ink2); opacity: .5; }
.dx-titlerow { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .8rem 1.5rem; margin-top: .75rem; }
.dx-title { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); max-width: 56rem; }
.dx-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dx-action { display: inline-block; padding: .45rem .95rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--link); font-size: .82rem; font-weight: 700; text-decoration: none; }
.dx-action:hover { border-color: var(--link); background: var(--surface); }
.dx-lead { margin: .7rem 0 0; max-width: 56rem; color: var(--ink2); font-size: 1.02rem; line-height: 1.6; }
section.dx { padding-top: 1.75rem; padding-bottom: 3.5rem; }
section.dx > .sec-inner { max-width: 88rem; }
.dx-grid { max-width: 88rem; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 16rem minmax(0, 1fr) 14rem; gap: 2.75rem; align-items: start; }
.dx-side, .dx-toc { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; font-size: .88rem; padding-right: .25rem; }
.dx-side-h { margin: 1.1rem 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.dx-side-h:first-child { margin-top: 0; }
.dx-side ul, .dx-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.dx-side a, .dx-here, .dx-toc a { display: block; padding: .32rem .85rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink2); font-weight: 600; line-height: 1.35; text-decoration: none; }
.dx-side a:hover, .dx-toc a:hover { color: var(--link); }
.dx-here, .dx-toc a.is-current { color: var(--link); border-left-color: var(--link); background: var(--surface2); }
.dx-toc a { font-weight: 500; font-size: .84rem; }
.dx-main { min-width: 0; max-width: 52rem; }
.dx-main > :first-child { margin-top: 0; }
.dx-pn { display: flex; justify-content: space-between; gap: 1rem; margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.dx-pn a { display: flex; flex-direction: column; gap: .15rem; max-width: 48%; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; background: var(--surface); }
.dx-pn a:hover { border-color: var(--link); }
.dx-pn-next { margin-left: auto; text-align: right; }
.dx-pn-k { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.dx-pn-t { color: var(--link); font-weight: 700; }
/* the existing guide layout (UDA, OPAL and install guides) under the documentation header */
section.dx .howto { max-width: 88rem; margin: 0 auto; padding: 0 2rem; grid-template-columns: 16rem minmax(0, 1fr); gap: 2.75rem; }
section.dx .howto-nav { top: 5rem; }
section.dx .howto-body { max-width: 56rem; min-width: 0; }
section.dx .howto-related, section.dx .howto-back { max-width: 88rem; margin-left: auto; margin-right: auto; padding: 0 2rem; }
@media (max-width: 1180px) { .dx-grid { grid-template-columns: 15rem minmax(0, 1fr); } .dx-toc { display: none; } }
@media (max-width: 820px) {
.dx-head-in, .dx-grid, section.dx .howto, section.dx .howto-related, section.dx .howto-back { padding-left: 1.1rem; padding-right: 1.1rem; }
.dx-grid, section.dx .howto { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.dx-side, section.dx .howto-nav { position: static; max-height: none; }
.dx-side { border: 1px solid var(--border); border-radius: 10px; padding: .75rem 1rem; background: var(--surface); }
.dx-pn { flex-direction: column; } .dx-pn a { max-width: none; }
}
/* ===== Phone and tablet menu =====
Up to 860px the primary links are a panel under the masthead, opened by .nav-toggle
(js/nav-menu.js). Dropdown parents become accordion rows: tapping one shows its
children beneath it. At desktop width the button is hidden and nothing changes. */
.nav-toggle { display: none; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: .3rem;
color: var(--ink2); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.nav-toggle:hover { color: var(--link); background: var(--bg-alt); }
.nav-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.nav-toggle .cross { display: none; }
.nav-toggle[aria-expanded="true"] .bars { display: none; }
.nav-toggle[aria-expanded="true"] .cross { display: block; }
@media (max-width: 860px) {
.nav-toggle { display: inline-flex; }
.nav { gap: .6rem; }
.nav-logo { margin-right: auto; }
.nav.menu-open .nav-links {
display: flex; flex-direction: column; align-items: stretch; gap: 0;
position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain;
padding: .5rem clamp(1.25rem, 4vw, 3rem) 1rem;
background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 16px 32px rgba(0, 0, 0, .16);
}
.nav.menu-open .nav-item { display: block; border-bottom: 1px solid var(--border); }
.nav.menu-open .nav-item:last-child { border-bottom: 0; }
.nav.menu-open .nav-links > .nav-item > a { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; font-size: .9rem; letter-spacing: .02em; white-space: normal; }
.nav.menu-open .nav-item > a[aria-haspopup]::after { content: ""; display: inline-block; flex: none; margin-left: .6em; border: .32em solid transparent; border-top-color: currentColor; transform: translateY(.18em); transition: transform .15s; }
.nav.menu-open .nav-item.open > a[aria-haspopup]::after { transform: translateY(-.12em) rotate(180deg); }
/* the dropdown is part of the flow, not a floating card, and hover does not open it */
.nav.menu-open .nav-drop { position: static; transform: none; min-width: 0; padding: 0 0 .6rem .9rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; display: none; }
.nav.menu-open .nav-item.open > .nav-drop { display: block; }
.nav.menu-open .nav-item:hover:not(.open) > .nav-drop, .nav.menu-open .nav-item:focus-within:not(.open) > .nav-drop { display: none; }
.nav.menu-open .nav-drop a { padding: .55rem 0; white-space: normal; font-size: .85rem; }
.nav.menu-open .nav-drop a.nav-sub { padding-left: 1.3rem; }
.nav.menu-open .nav-drop a.nav-sub::before { left: .1rem; }
.nav.menu-open .nav-drop a.nav-sub2 { padding-left: 2.5rem; }
.nav.menu-open .nav-drop a.nav-sub2::before { left: 1.3rem; }
}
@media (max-width: 480px) { .nav-actions .btn-nav-solid { padding: .45rem .55rem; } }
/* ===== SCROLL EFFECTS (js/scroll-effects.js; reveal and parallax motion is CSS only) =====================================
Subtle by design, and progressive: no script, no support, or reduced motion requested, and the page is simply the page.
Only transform, translate and opacity move, so scrolling stays on the compositor. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* section rail (long pages): a thin track on the right edge, centred. Its fill is how far you have read, a tick marks where each
section starts. Hover or focus it (a phone taps the "Sections" pill) and a panel lists the sections in page order: behind you
above the marker, the current one highlighted, those ahead below. */
.section-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); height: min(50vh, 400px); width: 30px; z-index: 95; }
.sr-handle { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; opacity: .7;
transition: opacity .15s; }
.section-rail:hover .sr-handle, .section-rail:focus-within .sr-handle, .section-rail.is-open .sr-handle { opacity: 1; }
.sr-handle:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 6px; }
.sr-track { position: absolute; right: 11px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
background: color-mix(in srgb, var(--ink2) 30%, transparent); }
.sr-fill { position: absolute; inset: 0; border-radius: 2px; transform-origin: 0 0; transform: scaleY(0); will-change: transform;
background: linear-gradient(var(--blue), var(--accent-bright)); }
.sr-tick { position: absolute; right: -4px; width: 10px; height: 2px; margin-top: -1px; border-radius: 1px;
background: color-mix(in srgb, var(--ink2) 55%, transparent); transition: width .15s, background .15s; }
.sr-tick[data-state="behind"] { background: var(--link); }
.sr-tick[data-state="current"] { width: 16px; right: -7px; height: 3px; background: var(--accent-bright); }
.section-rail:hover .sr-tick, .section-rail.is-open .sr-tick { width: 14px; right: -6px; }
.section-rail:hover .sr-tick[data-state="current"], .section-rail.is-open .sr-tick[data-state="current"] { width: 20px; right: -9px; }
.sr-panel { position: absolute; right: 38px; top: 50%; width: min(340px, 78vw); max-height: min(72vh, 520px); overflow-y: auto;
padding: .75rem .45rem .55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translate(8px, -50%);
transition: opacity .16s, transform .16s, visibility .16s; overscroll-behavior: contain; }
.section-rail.is-open .sr-panel { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.sr-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 .6rem .4rem; padding-bottom: .5rem;
border-bottom: 1px solid var(--rule); font-family: 'Montserrat', sans-serif; font-size: .64rem; font-weight: 800;
letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.sr-pos { letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink); }
.sr-list { list-style: none; margin: 0; padding: 0; }
.sr-item[data-cap]::before { content: attr(data-cap); display: block; margin: .55rem .6rem .1rem; font-family: 'Montserrat', sans-serif;
font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); opacity: .8; }
.sr-item a { display: flex; align-items: center; gap: .65rem; padding: .42rem .6rem; border-radius: 6px; text-decoration: none;
font-size: .86rem; line-height: 1.3; color: var(--ink); }
.sr-item a::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; }
.sr-item a:hover, .sr-item a:focus-visible { background: var(--surface2); color: var(--link); }
.sr-item[data-state="behind"] a { color: var(--ink2); }
.sr-item[data-state="behind"] a::before { background: color-mix(in srgb, var(--link) 55%, transparent); border-color: transparent; }
.sr-item[data-state="current"] a { font-weight: 700; background: var(--surface2); }
.sr-item[data-state="current"] a::before { background: var(--accent-bright); border-color: var(--accent-bright);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 28%, transparent); }
.sr-pill, .sr-backdrop { display: none; }
/* phones and tablets: no hover, so a "Sections" pill at the bottom centre (clear of the chat launcher) opens
the same list as a bottom sheet */
@media (max-width: 920px) {
/* centred with margins, not a transform: a transformed ancestor would pin the fixed sheet and backdrop to the pill */
.section-rail { top: auto; bottom: 14px; left: 0; right: 0; margin-inline: auto; transform: none; height: auto; width: fit-content; }
.sr-handle { position: static; display: block; opacity: 1; }
.sr-track { display: none; }
.sr-pill { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; overflow: hidden;
border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sr-pill-n { color: var(--ink2); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.sr-pill-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: 0 50%; transform: scaleX(0);
background: linear-gradient(90deg, var(--blue), var(--accent-bright)); }
.sr-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 68vh; border-radius: 16px 16px 0 0;
border-width: 1px 0 0; padding: .9rem .6rem calc(.8rem + env(safe-area-inset-bottom)); transform: translateY(100%); }
.section-rail.is-open .sr-panel { transform: none; }
.sr-backdrop { display: block; position: fixed; inset: 0; z-index: -1; background: rgba(5, 12, 24, .45); opacity: 0; visibility: hidden;
transition: opacity .2s, visibility .2s; }
.section-rail.is-open .sr-backdrop { opacity: 1; visibility: visible; }
.sr-item a { padding: .6rem .7rem; font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .sr-handle, .sr-tick, .sr-panel, .sr-backdrop { transition: none; } }
@media print { .section-rail { display: none; } }
/* "On this page" strip: the section being read */
.toc a[aria-current="location"] { color: var(--page-accent, var(--link)); background: var(--surface); border-color: var(--border); }
/* phones: the nav steps aside while reading down and comes back on the first scroll up; the strip rides up with it */
@media (max-width: 920px) {
.nav { transition: transform .25s ease; }
.toc { transition: top .25s ease; }
html.nav-hidden .nav { transform: translateY(-100%); }
html.nav-hidden .toc { top: 0; }
}
@media (max-width: 920px) and (prefers-reduced-motion: reduce) { .nav, .toc { transition: none; } }
/* reveal on entry (tier B) and a slow drift of the hero diagram (tier C): scroll-driven animations, where supported */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes sfx-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.grid-2 > *:not(.pricing-card), .grid-3 > *:not(.pricing-card), .grid-4 > *:not(.pricing-card), .grid-5 > *:not(.pricing-card),
.pf-card, .layers > .layer, .gets > .get {
animation: sfx-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 32%;
}
.grid-2 > :nth-child(2), .grid-3 > :nth-child(2), .grid-4 > :nth-child(2), .grid-5 > :nth-child(2) { animation-range: entry 5% entry 37%; }
.grid-3 > :nth-child(3), .grid-4 > :nth-child(3), .grid-5 > :nth-child(3) { animation-range: entry 10% entry 42%; }
.grid-4 > :nth-child(4), .grid-5 > :nth-child(4) { animation-range: entry 15% entry 47%; }
.grid-5 > :nth-child(5) { animation-range: entry 20% entry 52%; }
@keyframes sfx-drift { to { translate: 0 26px; } }
@keyframes sfx-converge { to { translate: 0 calc(var(--k, 0) * 10px); } }
.hero-diag.fx-parallax svg { animation: sfx-drift linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; }
.hero-diag.fx-parallax [data-part] { animation: sfx-converge linear both; animation-timeline: scroll(root block); animation-range: 0 60vh; }
}
}