/* ==========================================================================
Lolly Central — brand stylesheet
Hand-written, no framework. Targets WCAG 2.2 AAA.
Headings: Poppins (self-hosted) · Body: Calibri (system) / Carlito (self-hosted fallback)
========================================================================== */
/* ----- Fonts ------------------------------------------------------------- */
/* Poppins — headings */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/poppins-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/poppins-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/poppins-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/poppins-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/poppins-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Carlito — metric-compatible Calibri fallback for body */
@font-face {
font-family: 'Carlito';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/carlito-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Carlito';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/carlito-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Carlito';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/carlito-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Carlito';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/carlito-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ----- Design tokens ----------------------------------------------------- */
:root {
/* Brand */
--brand: #F78E20; /* primary orange — fills & large non-text accents only */
--brand-hover: #E07A0E; /* darker orange for hover/active on fills */
--brand-deep: #8A3F00; /* AAA-safe "orange" text on light (≈7.5:1 on white) */
--brand-tint: #FFF3E6; /* soft wash for section backgrounds */
--brand-tint-2: #FDE7CC;
/* Ink & surfaces */
--ink: #1A1A1A; /* body text — ≈16:1 on white */
--ink-soft: #3D3D3D; /* secondary text — ≈10:1 on white */
--surface: #FFFFFF;
--surface-alt: #FFFFFF; /* light mode: keep the whole page white */
--line: #DCDCD8;
--nav-hover: #DFE0DF; /* neutral grey hover for the top menu pills */
--focus: #0B3DD1; /* high-contrast focus ring */
--header-bg: rgba(255, 255, 255, 0.92);
--footer-bg: #1A1A1A;
/* Type */
--font-head: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-body: Calibri, 'Carlito', 'Segoe UI', system-ui, -apple-system, sans-serif;
/* Shape & depth */
--radius: 14px;
--radius-sm: 9px;
--shadow: 0 4px 16px rgba(26, 26, 26, 0.08);
--shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.14);
/* Spacing scale (8px base) */
--sp-1: 0.5rem;
--sp-2: 1rem;
--sp-3: 1.5rem;
--sp-4: 2rem;
--sp-5: 3rem;
--sp-6: 4.5rem;
--container: 1200px;
--content: 70ch;
}
/* ----- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem; /* 17px */
line-height: 1.6;
color: var(--ink);
background: var(--surface);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
display: flex;
flex-direction: column;
min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-head);
font-weight: 700;
line-height: 1.2;
color: var(--ink);
margin: 0 0 var(--sp-2);
text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 var(--sp-2); }
a {
color: var(--brand-deep);
text-decoration: underline;
text-underline-offset: 0.15em;
text-decoration-thickness: 0.08em;
}
a:hover { text-decoration-thickness: 0.16em; }
ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.4em; }
li { margin-bottom: 0.4em; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
:target { scroll-margin-top: 6rem; }
/* ----- Focus visibility (WCAG 2.4.7 / 2.4.13) ---------------------------- */
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
/* Remove default outline only where we provide :focus-visible */
:focus:not(:focus-visible) { outline: none; }
/* ----- Skip link (WCAG 2.4.1) -------------------------------------------- */
.skip-link {
position: absolute;
left: var(--sp-2);
top: -4rem;
z-index: 1000;
background: var(--ink);
color: #fff;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
text-decoration: none;
font-family: var(--font-head);
font-weight: 600;
transition: top 0.2s ease;
}
.skip-link:focus { top: var(--sp-2); }
/* ----- Layout helpers ---------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--sp-3);
}
.section { padding-block: var(--sp-6); }
.section--alt { background: var(--surface-alt); }
.section--tint { background: var(--brand-tint); }
.section--soft-grey { background: rgba(223, 224, 223, 0.2); } /* 20% of #DFE0DF */
.prose { max-width: var(--content); }
.lead { font-size: 1.2rem; color: var(--ink-soft); }
.text-center { text-align: center; }
main { flex: 1 0 auto; }
/* ----- Header & brand ---------------------------------------------------- */
.site-header {
position: sticky;
top: 2.25rem; /* sits directly below the sticky top contact bar */
z-index: 100;
background: var(--header-bg);
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
min-height: 4.5rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
color: var(--ink);
font-family: var(--font-head);
font-weight: 700;
font-size: 1.3rem;
padding: 0.4rem 0.2rem;
flex-shrink: 0; /* never shrink/truncate the wordmark — the menu flexes instead */
}
.brand img { width: 2.6rem; height: 2.6rem; flex-shrink: 0; }
.brand__name { white-space: nowrap; }
.brand__name span { color: var(--brand); } /* "Lolly" in brand orange, "Central" stays ink */
/* ----- Primary navigation ------------------------------------------------ */
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--ink);
cursor: pointer;
flex-shrink: 0;
}
.nav-toggle__bars { display: inline-block; width: 1.25rem; height: 0.875rem; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
content: "";
position: absolute;
left: 0; right: 0;
height: 2px;
background: var(--ink);
border-radius: 2px;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars::after { bottom: 0; }
.primary-nav ul {
list-style: none;
display: flex;
align-items: center;
gap: clamp(0.05rem, -0.15rem + 0.5vw, 0.25rem);
margin: 0;
padding: 0;
}
.primary-nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.5rem clamp(0.45rem, 0.1rem + 0.6vw, 0.9rem);
color: var(--ink);
text-decoration: none;
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(0.82rem, 0.62rem + 0.5vw, 1rem);
border-radius: 999px;
}
.primary-nav a:hover { background: var(--nav-hover); color: var(--ink); }
.primary-nav a[aria-current="page"] {
color: var(--brand);
}
/* Nudge the menu options down slightly so they sit a touch lower in the header. */
@media (min-width: 801px) {
.primary-nav { transform: translateY(5px); }
}
/* ----- Buttons ----------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
padding: 0.7rem 1.4rem;
border-radius: 999px;
border: 2px solid transparent;
font-family: var(--font-head);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
cursor: pointer;
transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: #1A1A1A; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
/* ----- Hero -------------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
background: var(--surface);
}
/* Side-by-side hero, mirroring the inner-page .page-head__grid: the search column sits on the LEFT
(capped like the inner headline column), the mascot on the RIGHT in its own `bot` cell, and a 1fr
spacer column absorbs any mascot size change — so a larger mascot can never widen, narrow or move
the search column. Collapses to a single stacked column on mobile (see the 800px block below). */
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 40rem) auto 1fr;
grid-template-areas: "search bot .";
align-items: center;
column-gap: var(--sp-5);
row-gap: var(--sp-3);
text-align: left;
max-width: 72rem;
margin-inline: auto;
padding-block: var(--sp-4) var(--sp-5);
}
.hero__inner .hero-search { grid-area: search; }
.hero__eyebrow {
display: inline-block;
font-family: var(--font-head);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.8rem;
color: var(--brand);
margin-bottom: var(--sp-2);
}
/* Home hero greeting "speech bubble" — sits over the bot so it reads as the bot greeting you.
Thin lolly-orange outline, white fill, with a tail pointing down toward the robot. */
.bot-bubble {
position: absolute;
top: 10%;
right: 51%;
z-index: 3;
white-space: nowrap;
margin: 0;
background: #fff;
border: 2px solid var(--brand);
border-radius: var(--radius);
padding: var(--sp-1) var(--sp-3);
color: #1A1A1A; /* always dark — the bubble is white in both themes */
font-size: clamp(1rem, 0.8rem + 0.6vw, 1.35rem);
line-height: 1.2;
box-shadow: var(--shadow);
text-align: center;
}
/* Tail on the bottom edge, pointing down toward the bot's head below it. */
.bot-bubble::after {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%) rotate(45deg);
width: 18px;
height: 18px;
background: #fff;
border-right: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
}
/* Desktop only: nudge the greeting bubble LEFT so its body clears the top of Ali's head, and slide
its tail RIGHT along the bottom edge so it stays attached and still points back at the mascot.
The base rules above (right:51% / tail left:50%) are left untouched, so the ≤800px mobile hero
and its bubble are unchanged. Two tunables: the bubble's `right` and the tail's `left`. */
@media (min-width: 801px) {
.bot-bubble {
right: 60%; /* bubble offset — higher % moves the bubble further LEFT */
padding-bottom: calc(var(--sp-1) + 7px); /* clear the tail: its notch pokes ~12px up into the bubble and
paints over the text, so give the last word room below it.
Raise the +7px if any clip remains, lower it if too bottom-heavy. */
}
.bot-bubble::after { left: 80%; } /* tail position — higher % moves the tail further RIGHT along the bubble edge */
}
/* Mobile only (≤800px): after the recent Ali size increase he grew UP into the bubble, so the tail
landed on his hand/head. Lift the bubble above his head and nudge the tail toward him so it stays
attached and points cleanly at him. The bubble is positioned as a % of Ali's box, so it tracks his
size — these are the tuned offsets for the current mobile size. Complements the desktop block above;
the desktop bubble (≥801px) is untouched. All three mobile knobs live here. */
@media (max-width: 800px) {
.bot-bubble {
top: -4%; /* lift above Ali's head — MORE NEGATIVE = higher (primary fix) */
right: 51%; /* horizontal offset — higher % = further LEFT */
}
.bot-bubble::after { left: 62%; } /* tail toward Ali — higher % = further RIGHT along the bubble edge */
}
/* ----- Search inputs: shared, theme-aware styling ------------------------ */
/* One consistent, premium look for every search box — the Home hero, the library
section toolbars, the FAQ filter and the all-library search page. Every colour
comes from a theme token, so the field reads correctly in light and dark mode.
Layout/sizing per context is set in each component's own rule below. */
.hero-search__field,
.library-search,
.faq-search { position: relative; }
/* Magnifier affordance, drawn on the wrapper (not the input, which can't take a
pseudo-element) and tinted with the secondary-ink token so it adapts per theme. */
.hero-search__field::before,
.library-search::before,
.faq-search::before {
content: "";
position: absolute;
left: 1.15rem;
top: 50%;
width: 1.15rem;
height: 1.15rem;
transform: translateY(-50%);
background: var(--ink-soft);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
z-index: 1;
}
.hero-search input,
.library-search input,
.faq-search input {
min-width: 0; /* allow the field to shrink (no 320px overflow) */
font: inherit;
color: var(--ink);
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: 999px;
padding: 0.7rem 1.2rem 0.7rem 3rem; /* left room for the magnifier */
box-shadow: var(--shadow);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.hero-search input::placeholder,
.library-search input::placeholder,
.faq-search input::placeholder { color: var(--ink-soft); opacity: 1; }
.hero-search input:hover,
.library-search input:hover,
.faq-search input:hover { border-color: var(--brand); }
/* Strong, on-brand focus — layered (border + offset outline + soft glow) so it
stays clearly visible in both themes; keeps the pill radius (overrides the
global 4px focus radius). */
.hero-search input:focus-visible,
.library-search input:focus-visible,
.faq-search input:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 2px;
border-color: var(--brand);
border-radius: 999px;
box-shadow: 0 0 0 4px rgba(247, 142, 32, 0.18);
}
/* Inline image documents in the viewer. */
.viewer-image {
width: 100%;
height: auto;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-alt);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.hero__media {
position: relative;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 16 / 10;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* decorative brand "blob" */
.hero__media::after {
content: "";
position: absolute;
inset: auto -20% -25% auto;
width: 60%;
aspect-ratio: 1;
background: radial-gradient(circle, rgba(247,142,32,0.35), transparent 70%);
z-index: -1;
}
/* Mascot variant: a transparent PNG that floats free of the photo "card" chrome. */
.hero__media--mascot {
grid-area: bot;
align-self: center;
/* Mascot size — the SINGLE tunable value (min, preferred, max). Because it lives in the `bot`
cell with a 1fr spacer to its right, resizing only eats into that spacer — it never touches
the search column. Capped so the greeting + full search row stay above the fold on ~700px-tall
laptops; if space is tight the mascot shrinks, never the search. Bump this to fine-tune desktop. */
--home-bot-size: clamp(220px, 26vw, 340px);
width: var(--home-bot-size);
display: flex;
flex-direction: column;
align-items: center;
border-radius: 0;
overflow: visible;
box-shadow: none;
background: transparent;
aspect-ratio: auto;
}
.hero__media--mascot img { width: 100%; height: auto; object-fit: contain; }
.hero__media--mascot::after { display: none; }
/* Blink: the eyes-closed image stacks over the bot and flashes in briefly on a loop. */
.bot-blink { position: relative; width: 100%; margin-inline: auto; }
.hero__media--mascot .bot-blink__lids {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
/* Clip off the bottom (feet + baked-in orange glow) so only the head/eyes area of the overlay
renders. The glow is semi-transparent in both PNGs, so without this it doubles up and pulses
with the blink. The feet/glow are identical to the base image, so hiding them is invisible. */
clip-path: inset(0 0 18% 0);
/* BLINK TEMPORARILY DISABLED — the overlay frame (Welcome-Bot-closed.png) is still the older
1529x1456 art and no longer registers against the 1500x1500 base. The keyframes below are
kept intact. TO RE-ENABLE: un-comment the line below and restore the overlay ![]()
in
Pages/Index.cshtml. Left commented out, this layer stays at opacity: 0, so even if the
markup comes back on its own nothing blinks. */
/* animation: bot-blink 20s infinite; */
}
@keyframes bot-blink {
/* Eyes open ~19.7s, then a quick ~0.3s blink (tight percentages = fast close/open). */
0%, 98.5%, 100% { opacity: 0; }
99%, 99.4% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero__media--mascot .bot-blink__lids { animation: none; }
}
/* ----- Cards ------------------------------------------------------------- */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: var(--sp-3);
}
.card {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--sp-3);
box-shadow: var(--shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.card__icon {
display: inline-grid;
place-items: center;
width: 3rem;
height: 3rem;
background: transparent;
color: var(--brand);
margin-bottom: var(--sp-1);
}
.card__icon svg { width: 100%; height: 100%; }
.card h3 { margin-bottom: 0.25rem; }
.card p { color: var(--ink-soft); margin-bottom: 0; }
/* Icon + heading on one row, content below. */
.card__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--sp-1); }
.card__head .card__icon { margin-bottom: 0; flex-shrink: 0; }
.card__head h3 { margin-bottom: 0; }
.card__image {
width: 100%;
height: auto;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
margin-bottom: var(--sp-2);
}
.card__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.card__doclink { display: block; width: 100%; text-decoration: none; }
.card__video { width: 100%; border-radius: var(--radius-sm); margin-bottom: var(--sp-2); background: #000; }
/* Heading spans the card top; description + media sit alongside each other beneath it. */
.card__body-split { display: flex; align-items: flex-start; gap: var(--sp-3); }
.card__body-split .card__desc { flex: 1 1 40%; min-width: 0; margin: 0; color: var(--ink-soft); line-height: 1; }
.card__body-split .card__media { flex: 1 1 60%; min-width: 0; }
/* Video and the Carbon image share the same 16:9 box, so both cards are the same height. */
.card__body-split .card__media video,
.card__body-split .card__media .card__image {
width: 100%;
aspect-ratio: 16 / 9;
margin-bottom: 0;
}
.card__body-split .card__media video { object-fit: cover; background: #000; }
.card__body-split .card__media .card__image { object-fit: contain; background: var(--surface); }
@media (max-width: 600px) {
.card__body-split { flex-direction: column; align-items: stretch; }
}
/* Horizontal "Latest Release Notes" box below the cards. */
.release-banner {
display: flex;
align-items: center;
gap: var(--sp-3);
max-width: 51rem;
margin-inline: auto;
margin-top: var(--sp-4);
padding: var(--sp-3);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
text-decoration: none;
color: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.release-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.release-banner__icon { flex-shrink: 0; width: 3rem; height: 3rem; color: var(--brand); display: inline-grid; place-items: center; }
.release-banner__icon svg { width: 100%; height: 100%; }
.release-banner__text { flex: 1; min-width: 0; }
.release-banner__title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-bottom: 0.2rem; }
.release-banner__desc { display: block; color: var(--ink-soft); }
.release-banner__arrow { flex-shrink: 0; color: var(--brand); font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; }
@media (max-width: 560px) {
.release-banner { flex-direction: column; text-align: center; }
.release-banner__arrow { display: none; }
}
/* Lightbox: enlarge a card image over a dimmed backdrop with a close button. */
.lightbox {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-4);
background: rgba(26, 26, 26, 0.6);
}
.lightbox[hidden] { display: none; }
.lightbox__frame { position: relative; display: inline-block; max-width: 92vw; max-height: 88vh; }
.lightbox__img,
.lightbox__video {
display: block;
max-width: 92vw;
max-height: 88vh;
width: auto;
height: auto;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.lightbox__video { width: min(92vw, 960px); background: #000; }
.lightbox__img[hidden], .lightbox__video[hidden] { display: none; }
/* Video preview thumbnail (opens in the lightbox) with a play badge. */
.card__video-trigger { position: relative; }
.card__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.lightbox__close {
position: absolute;
top: -1rem;
right: -1rem;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--ink);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.lightbox__close:hover { background: var(--brand); color: #fff; }
.card__more {
margin-top: auto;
padding-top: var(--sp-1);
font-family: var(--font-head);
font-weight: 600;
color: var(--brand);
}
/* ----- Prose / legal pages ----------------------------------------------- */
.page-head {
background:
radial-gradient(40rem 24rem at 100% 0%, var(--brand-tint) 0%, transparent 60%),
var(--surface-alt);
border-bottom: 1px solid var(--line);
padding-block: var(--sp-5);
}
/* Library listing header: no gradient, no divider line, and the gap down to the
search box reduced to ~10% of the default. */
.page-head--tight {
background: var(--surface-alt);
border-bottom: 0;
padding-bottom: 0.4rem;
}
.page-head--tight .lead { margin-bottom: 0; }
.section--tight { padding-top: 0.35rem; }
/* Plain header: drop the gradient (keeps the divider line + spacing) — used on document/video views. */
.page-head--plain { background: var(--surface-alt); }
/* ----- FAQ accordion ----------------------------------------------------- */
.faq-search { margin-top: 5px; margin-bottom: var(--sp-3); max-width: 30rem; }
.faq-search input { flex: 1; min-height: 52px; }
.faq-list { max-width: 60rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
list-style: none;
cursor: pointer;
padding: var(--sp-3) 0;
font-family: var(--font-head);
font-weight: 600;
font-size: 1.1rem;
color: var(--ink);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }
.faq-item__q:hover { color: var(--brand); }
.faq-item__toggle {
position: relative;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brand);
}
.faq-item__toggle::before,
.faq-item__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #fff;
border-radius: 2px;
transform: translate(-50%, -50%);
}
.faq-item__toggle::before { width: 12px; height: 2px; } /* horizontal bar */
.faq-item__toggle::after { width: 2px; height: 12px; } /* vertical bar (hidden when open) */
.faq-item[open] .faq-item__toggle::after { display: none; }
.faq-item__a { padding-bottom: var(--sp-3); color: var(--ink-soft); }
.faq-item__summary { font-weight: 600; color: var(--ink); margin-bottom: var(--sp-1); }
.faq-item__a ul { margin: var(--sp-1) 0 0; }
.faq-item__a li { margin-bottom: 0.35em; }
/* Section header: title + intro + search bar form a capped header block, with a small mascot
accent sitting RIGHT BESIDE it as a connected pair (column 1 is capped so the bot is
adjacent, not pushed to the far edge; the leftover width goes to a spacer on the right, and
the bot is vertically centred against the title+intro+search rows). The tag filters then
span the full width beneath, free to use the reclaimed space.
The search & filter must stay inside one