/** * Jarvis theme overrides — DXPR-style look via Bootstrap 5 CSS custom properties. * ponytail: theme at the variable level; add a SCSS pipeline only if this can't reach it. */ :root { --bs-primary: #2d6cdf; --bs-primary-rgb: 45, 108, 223; --bs-secondary: #1b2a4a; --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-body-color: #1b2130; --bs-border-radius: 0.65rem; --bs-border-radius-lg: 1rem; --jarvis-section-gap: 4rem; } body { -webkit-font-smoothing: antialiased; } /* Page title bold by default — scoped to beat Bootstrap's heading weight. */ .jarvis-page-title h1, .jarvis-page-title .page-title { font-weight: 700; } .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: #245ac0; --bs-btn-hover-border-color: #245ac0; --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: 0.7rem; font-weight: 600; } /* Jarvis spacing utilities — exact px, driven by the padding/margin SDC props. Bootstrap's rem scale can't hit 10/20/30px, so these are bespoke. small=10px, medium=20px, large=30px. */ .jp-p-all-small { padding: 10px; } .jp-p-all-medium { padding: 20px; } .jp-p-all-large { padding: 30px; } .jp-p-top-small { padding-top: 10px; } .jp-p-top-medium { padding-top: 20px; } .jp-p-top-large { padding-top: 30px; } .jp-p-bottom-small { padding-bottom: 10px; } .jp-p-bottom-medium { padding-bottom: 20px; } .jp-p-bottom-large { padding-bottom: 30px; } .jp-p-left-small { padding-left: 10px; } .jp-p-left-medium { padding-left: 20px; } .jp-p-left-large { padding-left: 30px; } .jp-p-right-small { padding-right: 10px; } .jp-p-right-medium { padding-right: 20px; } .jp-p-right-large { padding-right: 30px; } .jp-m-all-small { margin: 10px; } .jp-m-all-medium { margin: 20px; } .jp-m-all-large { margin: 30px; } .jp-m-top-small { margin-top: 10px; } .jp-m-top-medium { margin-top: 20px; } .jp-m-top-large { margin-top: 30px; } .jp-m-bottom-small { margin-bottom: 10px; } .jp-m-bottom-medium { margin-bottom: 20px; } .jp-m-bottom-large { margin-bottom: 30px; } .jp-m-left-small { margin-left: 10px; } .jp-m-left-medium { margin-left: 20px; } .jp-m-left-large { margin-left: 30px; } .jp-m-right-small { margin-right: 10px; } .jp-m-right-medium { margin-right: 20px; } .jp-m-right-large { margin-right: 30px; } /* Vertical padding button: 30px top + bottom. */ .jp-vpad { padding-top: 30px; padding-bottom: 30px; } /* No-padding toggle: overrides jp-vpad's top/bottom so rows can touch vertically. !important because it must beat jp-vpad above. */ .jp-nopad { padding-top: 0 !important; padding-bottom: 0 !important; } /* Site logo: cap at 400px, pin left. Branding block img has no class, so scope to the branding block in the header region. */ /* Site logo: cap at 400px, pin left. Same rule whether branding sits in the header region or the primary-menu (nav) region. */ .jarvis-header [id*="branding"], .jarvis-primary-menu [id*="branding"] { text-align: left; } .jarvis-header [id*="branding"] img, .jarvis-primary-menu [id*="branding"] img { width: 400px; max-width: 100%; height: auto; } /* Canvas renders the primary-menu blocks with random UUID ids, so the Twig split by block id never matches; js/nav-branding.js moves the logo link out of the offcanvas drawer into .jarvis-branding-wrap so it stays visible on mobile (the drawer is hidden until the hamburger is tapped). */ /* Break the nav row out of the centered .container so it spans the viewport; 100px left pad pins the logo near the browser's left edge — desktop only, on mobile it would eat a quarter of the screen from the logo/hamburger row. */ .jarvis-primary-menu { max-width: none; } @media (min-width: 992px) { .jarvis-primary-menu { padding-left: 100px; } } /* Logo left (capped 400px, shrinks on narrow screens), menu 50px to its right. */ .jarvis-branding-wrap { min-width: 0; } .jarvis-branding-wrap img { width: 400px; max-width: 100%; height: auto; } .jarvis-primary-menu .offcanvas-body > div { display: flex; align-items: center; } .jarvis-primary-menu .offcanvas-body nav[role="navigation"] { margin-left: 50px; } /* Full-width columns: kill container-fluid gutter, row negative margins, AND the Bootstrap col padding so the section reaches the screen edge. Without the last rule the col's --bs-gutter-x padding leaves a white strip on each side (shows as left padding on the hero). Trade-off: full-width multi-column sections lose their inter-column gutter — use the gap/padding props for that. ponytail: single-column full-bleed is the common case; revisit if multi-col full-width needs a between-columns gap. */ .jarvis-columns .container-fluid { padding-left: 0; padding-right: 0; } .jarvis-columns .container-fluid > .row { margin-left: 0; margin-right: 0; } .jarvis-columns .container-fluid > .row > [class*="col"] { padding-left: 0; padding-right: 0; } /* Bootstrap's vertical gutter puts margin-top:-var(--bs-gutter-y) on .row and a matching padding-top on the cols. That negative margin escapes .jarvis-columns' padding box — pulling the grid up so the wrapper's vertical padding AND bottom margin read as ignored (sections have no .row, so they were fine). Swap the margin/padding hack for row-gap: same between-row spacing when columns wrap on mobile, without the negative margin. */ .jarvis-columns .row { margin-top: 0; row-gap: var(--bs-gutter-y); } .jarvis-columns .row > * { padding-top: 0; } /* Primary menu: superfish-style dropdowns. Pure CSS hover + :focus-within multi-level fly-outs — no jQuery/superfish plugin (native covers it). Menu block renders a bare