/* ============================================================================= * vendidit.css — design system for the Vendidit marketing site * ============================================================================= * * WHAT THIS IS * ------------ * Every visual decision on the site lives in this one file. Page HTML carries * class names only; it carries no inline styles and no colour values. If you * want to change how something looks, change it here and it changes everywhere. * * LOADING ORDER (see any page's ) * ------------------------------------- * 1. Google Fonts — Instrument Sans + DM Sans + JetBrains Mono * 2. bootstrap@4.6.0 — same version and CDN as vendidit.com today * 3. vendidit.css — this file, loaded last so it wins * * WHY BOOTSTRAP IS BARELY USED HERE * --------------------------------- * We use Bootstrap for `.container-xl`, its spacing/display utilities and its * JS bundle, because that is what the live HubSpot theme already loads and what * you already know. We deliberately do NOT use its 12-column grid for layout. * The design calls for column ratios Bootstrap cannot express (1.2fr / 0.8fr, * 0.9fr / 1.1fr, 200px / 1fr / auto), so those sections use CSS Grid directly. * Mixing the two would have meant changing the design, which was out of scope. * * NAMING * ------ * BEM, matching vendidit-site.css on the live site. Everything is prefixed `v-` * so nothing here can collide with Bootstrap or with the HubSpot theme when * these blocks are ported into modules. * * .v-block component root * .v-block__element child of that component * .v-block--modifier variant of that component * * PORTING TO HUBSPOT * ------------------ * Section markup in the pages is wrapped in `` comments. * Each of those maps to one HubSpot custom module. This stylesheet can be * dropped into the theme as-is, or split along the section comments below. * * CONTENTS * -------- * 1. Design tokens * 2. Reset and base elements * 3. Typography * 4. Layout helpers (section, grid, container) * 5. Buttons and links * 6. Eyebrow, rules and mono labels * 7. Surfaces: cards, panels, dot grid * 8. Header / navigation * 9. Footer * 10. Home: hero pipeline, item record, product rows, sector matrix * 11. Solutions and Asset Intelligence * 12. Portfolio * 13. Industry page furniture (applications, ledger, connects) * 14. Resources, case studies, articles, press * 15. Company pages, forms, legal pages * 16. Utilities * 17. Responsive breakpoints * ========================================================================== */ /* ============================================================================= * 1. DESIGN TOKENS * ----------------------------------------------------------------------------- * Change a brand colour or a type step here and it propagates site-wide. * These are the only raw colour values in the codebase; everything below * references them by name. * ========================================================================== */ :root { /* --- Core palette ------------------------------------------------------ */ --v-ink: #0C121A; /* near-black. Dark section backgrounds. */ --v-ink-soft: #1B2029; /* body copy on light backgrounds */ --v-paper: #F7F8FB; /* off-white. Light section backgrounds. */ --v-white: #FFFFFF; --v-blue: #007CD9; /* primary accent on light backgrounds */ --v-blue-dark: #0067b5; /* primary accent, hover */ --v-blue-light: #449DF0; /* accent on dark backgrounds (raises AA) */ --v-muted: #5B6470; /* secondary text */ --v-line: #DDE1E8; /* standard border */ --v-line-soft: #ECEFF4; /* hairline border, section dividers */ --v-dot: #C9D0DB; /* dot-grid background texture */ /* --- Product accents --------------------------------------------------- * One per product, used for its wordmark full-stop, card top border and * hover state. Taken from each product's own brand. * -------------------------------------------------------------------- */ --v-upstream: #009FB3; --v-claimleo: #0DA053; --v-listerleo: #C38400; --v-globalsku: #D6513F; /* --- Text on dark ------------------------------------------------------ */ --v-on-dark: #F7F8FB; --v-on-dark-70: rgba(247, 248, 251, .72); --v-on-dark-55: rgba(247, 248, 251, .55); --v-on-dark-50: rgba(247, 248, 251, .5); --v-on-dark-35: rgba(247, 248, 251, .35); --v-border-dark: rgba(255, 255, 255, .14); --v-border-dark-2: rgba(255, 255, 255, .28); --v-fill-dark: rgba(255, 255, 255, .05); /* --- Type -------------------------------------------------------------- */ --v-font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --v-font-display: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --v-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid type steps. clamp(min, preferred, max) so headings scale with the * viewport without a single media query. Do not convert these to fixed px. */ --v-size-hero: clamp(40px, 6vw, 72px); /* home h1 */ --v-size-h1: clamp(36px, 5vw, 60px); /* interior page h1 */ --v-size-h1-sm: clamp(40px, 5.6vw, 68px); /* V Labs h1 */ --v-size-h2: clamp(30px, 3.6vw, 44px); --v-size-h2-sm: clamp(28px, 3.4vw, 40px); --v-size-h2-xs: clamp(28px, 3.2vw, 38px); /* closing CTA */ --v-size-h3: clamp(24px, 2.6vw, 32px); --v-size-lead: 20px; --v-size-body: 16px; /* --- Spacing ----------------------------------------------------------- */ --v-gut: clamp(20px, 4vw, 48px); /* page side gutter */ --v-section-y: 96px; /* default section padding */ --v-max: 1200px; /* content max width */ /* --- Motion ------------------------------------------------------------ */ --v-ease: .25s; } /* ============================================================================= * 2. RESET AND BASE * ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--v-font); font-size: var(--v-size-body); line-height: 1.6; color: var(--v-ink-soft); background: var(--v-white); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } svg { display: inline-block; vertical-align: middle; } /* Bootstrap 4 sets its own heading margins. We zero them and space headings * from the component that owns them, so vertical rhythm stays predictable. */ h1, h2, h3, h4, p, figure, blockquote { margin: 0; } a { color: var(--v-blue); text-decoration: none; } a:hover { color: var(--v-blue-dark); text-decoration: none; } /* Keyboard focus. Bootstrap 4 removes outlines in places; put one back. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; } /* Skip link for keyboard and screen-reader users. Visually hidden until it * receives focus, then pinned to the top-left above the sticky header. */ .v-skip { position: absolute; left: -9999px; z-index: 100; padding: 12px 18px; background: var(--v-ink); color: var(--v-on-dark); } .v-skip:focus { left: 8px; top: 8px; color: var(--v-on-dark); } /* Respect a reduced-motion preference. vendidit.js also reads this and stops * the canvas fields and auto-advancing tabs; this covers CSS transitions. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================================= * 3. TYPOGRAPHY * ----------------------------------------------------------------------------- * Headings are set by class, not by tag, so a section can use the right * heading level for accessibility while still looking correct. * ========================================================================== */ .v-hero-title, .v-h1, .v-h2, .v-h3 { font-family: var(--v-font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: pretty; /* avoids orphans in supporting browsers */ } .v-hero-title { font-size: var(--v-size-hero); letter-spacing: -.04em; line-height: .98; max-width: 18ch; } .v-h1 { font-size: var(--v-size-h1); letter-spacing: -.035em; line-height: 1.02; max-width: 20ch; } .v-h1--wide { max-width: none; } .v-h2 { font-size: var(--v-size-h2); max-width: 20ch; } .v-h2--sm { font-size: var(--v-size-h2-sm); } .v-h2--cta { font-size: var(--v-size-h2-xs); line-height: 1.1; max-width: 22ch; } .v-h2--wide { max-width: 26ch; } .v-h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; } .v-h3--lg { font-size: 24px; } .v-h3--xl { font-size: var(--v-size-h3); letter-spacing: -.025em; line-height: 1.15; } .v-lead { font-size: var(--v-size-lead); line-height: 1.55; color: var(--v-muted); max-width: 52ch; } .v-lead--on-dark { color: var(--v-on-dark-70); } .v-body { color: var(--v-muted); line-height: 1.6; max-width: 68ch; } .v-body--on-dark { color: var(--v-on-dark-70); } .v-body--tight { max-width: 46ch; } .v-note { font-size: 14px; color: var(--v-muted); } /* ============================================================================= * 4. LAYOUT * ----------------------------------------------------------------------------- * `.v-section` is the vertical rhythm unit. `.v-wrap` is the horizontal one. * Bootstrap's `.container-xl` is used on the header and footer only, because * those port straight into the existing HubSpot header/footer modules. * ========================================================================== */ .v-section { position: relative; overflow: hidden; } .v-section--ink { background: var(--v-ink); color: var(--v-on-dark); } .v-section--paper { background: var(--v-paper); } .v-section--white { background: var(--v-white); } .v-section--top-line { border-top: 1px solid var(--v-line-soft); } /* Full-viewport hero. The header is sticky and therefore still in flow, so * subtract its 69px (68px bar + 1px rule) to fill exactly one screen. Only on * desktop — on a phone a locked 100vh hero pushes everything below the fold. */ @media (min-width: 1041px) { .v-section--viewport { display: flex; min-height: calc(100vh - 69px); } .v-section--viewport > .v-wrap { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; } } /* Light-to-white and paper-to-paper gradients used between stacked sections. */ .v-section--fade-white { background: linear-gradient(180deg, var(--v-paper) 0%, var(--v-white) 100%); } .v-section--fade-paper { background: linear-gradient(180deg, var(--v-paper), #F2F4F8); } .v-wrap { position: relative; max-width: var(--v-max); margin: 0 auto; padding: var(--v-section-y) var(--v-gut); } .v-wrap--tight { padding-top: 72px; padding-bottom: 72px; } .v-wrap--lead { padding-top: 88px; padding-bottom: 56px; } .v-wrap--tall { padding-top: 104px; padding-bottom: 104px; } /* --- Two-column splits --------------------------------------------------- * The design uses fractional ratios rather than a 12-column grid. Each * modifier is one of the ratios in the original. They all collapse to a * single column at the `--wide` breakpoint in section 17. * ---------------------------------------------------------------------- */ .v-split { display: grid; gap: 64px; } .v-split--12-8 { grid-template-columns: 1.2fr .8fr; align-items: end; } .v-split--9-11 { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; } .v-split--1-2 { grid-template-columns: 1fr 2fr; } .v-split--11-9 { grid-template-columns: 1.1fr .9fr; align-items: end; } .v-split--even { grid-template-columns: 1fr 1fr; } .v-split--even-56 { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .v-split--8-12 { grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; } .v-split--sidebar { grid-template-columns: 260px 1fr; gap: 64px; align-items: start; } /* --- Equal-column rows --------------------------------------------------- */ .v-cols { display: grid; gap: 32px; } .v-cols--2 { grid-template-columns: repeat(2, 1fr); } .v-cols--3 { grid-template-columns: repeat(3, 1fr); } .v-cols--4 { grid-template-columns: repeat(4, 1fr); } .v-cols--5 { grid-template-columns: repeat(5, 1fr); } .v-cols--gap-20 { gap: 20px; } .v-cols--gap-6 { gap: 6px; } .v-cols--flush { gap: 0; } /* Section header: heading on the left, a link on the right, wrapping on * narrow screens. Used at the top of most content sections. */ .v-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } /* ============================================================================= * 5. BUTTONS AND LINKS * ----------------------------------------------------------------------------- * Named `.v-btn` rather than Bootstrap's `.btn` on purpose: Bootstrap's button * styles carry their own padding, border-radius and focus shadow that would * fight these. Do not add `.btn` alongside `.v-btn`. * ========================================================================== */ .v-btn { display: inline-flex; align-items: center; padding: 14px 20px; border: 1px solid transparent; border-radius: 6px; font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1; cursor: pointer; transition: background var(--v-ease), border-color var(--v-ease), color var(--v-ease); } .v-btn--sm { padding: 13px 18px; } /* Blue fill. Primary action on light backgrounds. */ .v-btn--primary { background: var(--v-blue); color: var(--v-white); } .v-btn--primary:hover { background: var(--v-blue-dark); color: var(--v-white); } /* Near-black fill. Primary action inside light product panels. */ .v-btn--ink { background: var(--v-ink); color: var(--v-white); } .v-btn--ink:hover { background: var(--v-blue); color: var(--v-white); } /* Off-white fill. Primary action on dark backgrounds. */ .v-btn--light { background: var(--v-paper); color: var(--v-ink); } .v-btn--light:hover { background: var(--v-white); color: var(--v-ink); } /* Outline, light background. */ .v-btn--outline { border-color: var(--v-line); color: var(--v-ink); } .v-btn--outline:hover { border-color: var(--v-ink); color: var(--v-ink); } /* Outline, dark background. */ .v-btn--ghost { border-color: var(--v-border-dark-2); color: var(--v-on-dark); } .v-btn--ghost:hover { border-color: var(--v-white); color: var(--v-white); } .v-btn-row { display: flex; gap: 12px; flex-wrap: wrap; } /* Centred hero lede. Direct children only, so the pipeline that sits below * them inside the same .v-wrap keeps its own left alignment. */ .v-hero--center > .v-hero-title, .v-hero--center > .v-lead { text-align: center; margin-left: auto; margin-right: auto; } .v-hero--center > .v-btn-row { justify-content: center; } .v-btn-row--end { justify-content: flex-end; } /* Standalone text link with a trailing arrow. */ .v-link { display: inline-block; font-weight: 500; } .v-link--on-dark { color: var(--v-blue-light); } .v-link--on-dark:hover { color: var(--v-white); } .v-link--nowrap { white-space: nowrap; } /* ============================================================================= * 6. EYEBROW, RULES, MONO LABELS * ----------------------------------------------------------------------------- * The tracked uppercase mono label is the signature of this design. It appears * above almost every heading and inside most panels. * ========================================================================== */ .v-eyebrow { font-family: var(--v-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--v-blue); margin-bottom: 14px; } .v-eyebrow--on-dark { color: var(--v-blue-light); } .v-eyebrow--muted { color: var(--v-muted); letter-spacing: .16em; } /* V Labs logo used in place of a mono eyebrow above a band heading. Sized by * height so the 308x86 artwork scales cleanly; the margin matches .v-eyebrow's * so the heading below sits exactly where it did. * * Two variants ship: v-labs-logo-white-small.png for dark bands, and * v-labs-logo-small.png for light backgrounds. Pick by surface. */ .v-labs-mark { display: block; height: 32px; width: auto; margin-bottom: 14px; } .v-labs-mark--lg { height: 46px; } @media (max-width: 700px) { .v-labs-mark { height: 26px; } .v-labs-mark--lg { height: 36px; } } /* Smaller variant used as a column or panel label rather than a section label. */ .v-label { font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-muted); } .v-label--on-dark { color: var(--v-on-dark-50); } .v-label--accent { color: var(--v-blue-light); } .v-label--xs { font-size: 9px; letter-spacing: .14em; } .v-mono { font-family: var(--v-font-mono); font-size: 11px; letter-spacing: .12em; } /* Breadcrumb above interior page headings. */ /* Section nav strip. The breadcrumb trail, promoted out of the hero to a * full-width bar sitting directly under the sticky header. Only nested pages * carry it; the home page and the seven section landing pages do not. Gutter * and max-width match .v-header__bar / __inner so it lines up with the nav * above it. */ .v-crumbs { background: var(--v-paper); border-bottom: 1px solid var(--v-line-soft); padding: 0 var(--v-gut); } .v-crumbs__trail { max-width: var(--v-max); margin: 0 auto; min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; font-family: var(--v-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-muted); } .v-crumbs a { color: var(--v-muted); transition: color var(--v-ease); } .v-crumbs a:hover { color: var(--v-blue); } .v-crumbs span { margin: 0 8px; } /* The current page is the last crumb: not a link, and given full contrast. */ .v-crumbs__here { color: var(--v-ink); margin: 0; } /* Live-status dot. Paired with a mono label to mark an active state. */ .v-dot-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--v-blue-light); animation: v-pulse 1.6s infinite; } .v-dot-live--blue { background: var(--v-blue); } .v-dot-live--green { background: var(--v-claimleo); } .v-dot-live--amber { background: var(--v-listerleo); } @keyframes v-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ============================================================================= * 7. SURFACES * ----------------------------------------------------------------------------- * The dot grid is the texture that carries the design. It is pure CSS; there * are no background images anywhere. * ========================================================================== */ /* --- Dot grid texture ---------------------------------------------------- * A 22px dot lattice, masked so it fades out. Sits in an absolutely * positioned child so it never affects layout or intercepts clicks. * Add a `--v-mask` override to move where it fades from. * ---------------------------------------------------------------------- */ .v-dotgrid { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--v-dot) 1px, transparent 1.2px); background-size: 22px 22px; opacity: .55; -webkit-mask-image: var(--v-mask, radial-gradient(ellipse 55% 70% at 78% 50%, #000 20%, transparent 75%)); mask-image: var(--v-mask, radial-gradient(ellipse 55% 70% at 78% 50%, #000 20%, transparent 75%)); } .v-dotgrid--top-fade { --v-mask: linear-gradient(180deg, #000, transparent 55%); opacity: .5; } .v-dotgrid--btm-fade { --v-mask: linear-gradient(0deg, #000, transparent 55%); opacity: .5; } .v-dotgrid--right { --v-mask: radial-gradient(ellipse 50% 60% at 90% 0%, #000 10%, transparent 70%); } .v-dotgrid--left { --v-mask: radial-gradient(ellipse 55% 70% at 12% 50%, #000 20%, transparent 75%); } .v-dotgrid--right-mid { --v-mask: radial-gradient(ellipse 55% 70% at 85% 50%, #000 20%, transparent 75%); } /* --- Radial glow --------------------------------------------------------- * The blue bloom behind dark sections. Applied as a background layer on the * section itself so it composites under the dot canvas. * * Every glow variant is a dark section, so they all carry the light text * colour too. Without this a heading inherits the dark body colour and * disappears into the background. * ---------------------------------------------------------------------- */ .v-glow--hero, .v-glow--band, .v-glow--left, .v-glow--top, .v-glow--panel, .v-glow--labs { color: var(--v-on-dark); } .v-glow--hero { background: radial-gradient(ellipse 60% 50% at 78% 18%, rgba(0,124,217,.22), transparent 70%), radial-gradient(ellipse 40% 40% at 10% 90%, rgba(0,159,179,.10), transparent 70%), var(--v-ink); } .v-glow--band { background: radial-gradient(ellipse 50% 60% at 15% 100%, rgba(0,124,217,.16), transparent 70%), var(--v-ink); } .v-glow--left { background: radial-gradient(ellipse 50% 60% at 12% 100%, rgba(0,124,217,.16), transparent 70%), var(--v-ink); } .v-glow--top { background: radial-gradient(ellipse 60% 50% at 80% 10%, rgba(0,124,217,.20), transparent 70%), var(--v-ink); } .v-glow--panel { background: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(0,124,217,.22), transparent 70%), var(--v-ink); } .v-glow--labs { background: radial-gradient(ellipse 55% 60% at 75% 40%, rgba(0,124,217,.16), transparent 70%), var(--v-ink); } /* --- Animated dot field -------------------------------------------------- * A painted by vendidit.js. The canvas element itself needs no * styling beyond filling its parent; density and anchor are set with data * attributes in the HTML. See vendidit.js section "Dot fields". * ---------------------------------------------------------------------- */ .v-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* --- Starfield dot matrix ------------------------------------------------- * The [data-v-starfield] variant of the field, ported from the Claude Design * canvas. It brings its own background: this layer sits under the canvas and * carries the drifting radial glow, which vendidit.js repaints each frame. It * covers the section's own .v-glow-- gradient, so that gradient is only what * shows for the moment before script runs. * ---------------------------------------------------------------------- */ .v-starfield__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 81% 12%, #14324E 0%, #081420 48%, #04090F 100%); } /* --- Cards --------------------------------------------------------------- */ .v-card { background: var(--v-white); border: 1px solid var(--v-line); padding: 28px; } .v-card--pad-lg { padding: 32px; } .v-card--pad-xl { padding: 40px; } .v-card--shadow { box-shadow: 0 24px 60px rgba(12,18,26,.08); } .v-card--shadow-lg { box-shadow: 0 30px 70px rgba(12,18,26,.08); } .v-card--hover:hover { border-color: var(--v-blue); } /* Card on a dark background. */ .v-card--dark { background: rgba(12,18,26,.6); border: 1px solid rgba(255,255,255,.16); color: var(--v-on-dark); backdrop-filter: blur(4px); } .v-card--dark-accent { background: rgba(68,157,240,.08); border: 1px solid var(--v-blue-light); } .v-card--dark-soft { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.16); } /* Stat cell: large accent number over a muted label. */ .v-stat { padding: 28px; border-right: 1px solid var(--v-line); } .v-stat:last-child { border-right: 0; } .v-stat__num { font-size: var(--v-size-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--v-blue); } .v-stat__label { color: var(--v-muted); font-size: 14px; margin-top: 8px; } /* Pill badge, used for capability tags. */ .v-pill { display: inline-block; font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--v-border-dark); color: var(--v-on-dark-35); } .v-pill--on { border-color: var(--v-blue-light); color: var(--v-on-dark); background: rgba(68,157,240,.12); } /* Bordered tag used on light backgrounds (case-study meta, filters). */ .v-tag { font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .08em; padding: 5px 8px; border: 1px solid var(--v-line); color: var(--v-ink); } .v-tag--on-dark { border-color: rgba(255,255,255,.18); color: rgba(247,248,251,.8); } /* Bulleted item with a square marker, used in "Built for" style lists. */ .v-marks { display: flex; flex-direction: column; gap: 8px; } .v-marks__item { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--v-ink); font-weight: 500; } .v-marks__item::before { content: ""; width: 10px; height: 10px; flex: none; margin-top: 7px; background: var(--v-mark, var(--v-blue)); } .v-marks--sm .v-marks__item { font-weight: 400; color: var(--v-muted); } .v-marks--sm .v-marks__item::before { width: 8px; height: 8px; margin-top: 8px; } /* Key/value row with a left accent bar, used in dark signal panels. */ .v-signal { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 14px; background: var(--v-fill-dark); border-left: 2px solid var(--v-blue-light); } .v-signal__k { font-size: 15px; font-weight: 500; } .v-signal__v { font-family: var(--v-font-mono); font-size: 12px; color: var(--v-on-dark-70); } /* Boxed callout with a left accent bar, used for deployment / past performance. */ .v-callout { border-left: 4px solid var(--v-blue); padding: 6px 0 6px 26px; max-width: 72ch; } .v-callout__lead { font-size: 19px; color: var(--v-ink); margin-bottom: 8px; line-height: 1.5; } /* ============================================================================= * 8. HEADER / NAVIGATION * ----------------------------------------------------------------------------- * Sticky, translucent, with hover-opened mega panels on desktop and a full * screen drawer on mobile. Behaviour is in vendidit.js; this is presentation. * * HubSpot note: this block replaces module_STARDUST_Navigation_01. The menu * tree is plain markup here so it can be swapped for a HubSpot menu field. * ========================================================================== */ .v-header { position: sticky; top: 0; z-index: 50; font-family: var(--v-font); } .v-header__bar { background: rgba(247,248,251,.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--v-line-soft); padding: 0 var(--v-gut); } .v-header__inner { max-width: var(--v-max); margin: 0 auto; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Wordmark. The official logo lockup is one image; size it by height and let * the width follow, so the 384x135 source scales cleanly at any density. * * .v-logo__text / .v-logo__dot are still used by the product wordmarks * (upstream., claimleo., listerleo., globalsku.), which are set in type with * their own accent colour, so they stay. */ .v-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--v-ink); } .v-logo:hover { color: var(--v-ink); } .v-logo__img { display: block; height: 46px; width: auto; } .v-logo__text { font-weight: 700; letter-spacing: -.03em; font-size: 21px; line-height: 1; color: var(--v-ink); } .v-logo__dot { color: var(--v-blue); } .v-logo--footer .v-logo__img { height: 52px; } .v-logo--footer .v-logo__text { font-size: 22px; } .v-logo--inline .v-logo__img { height: 32px; } .v-nav { display: flex; align-items: center; gap: 2px; position: relative; white-space: nowrap; } .v-nav__item { position: relative; } .v-nav__link { display: inline-flex; align-items: center; padding: 10px 12px; border-radius: 6px; font-weight: 500; font-size: 15px; line-height: 1; color: var(--v-ink); } .v-nav__link:hover { background: var(--v-white); color: var(--v-ink); } /* The dropdown chevrons are a lighter grey than the link text, so the words * lead and the affordance stays quiet. They inherit stroke="currentColor", * so setting `color` here is enough. */ .v-nav__link svg { margin-left: 6px; color: var(--v-muted); opacity: .7; } /* Current-section marker: a 2px underline inside the link box. */ .v-nav__item--current > .v-nav__link { box-shadow: inset 0 -2px 0 var(--v-blue); border-radius: 0; } /* Dropdown panel. Hidden by default; vendidit.js toggles [hidden]. */ .v-nav__panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 280px; background: var(--v-white); border: 1px solid var(--v-line); box-shadow: 0 18px 50px rgba(12,18,26,.10); padding: 22px; display: flex; gap: 28px; } .v-nav__col { min-width: 160px; } .v-nav__col-title { font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--v-muted); margin-bottom: 10px; } .v-nav__sub { display: block; color: var(--v-ink); padding: 7px 0; font-size: 15px; font-weight: 500; white-space: nowrap; } .v-nav__sub:hover { color: var(--v-blue); } .v-nav__sub-desc { display: block; color: var(--v-muted); font-weight: 400; font-size: 13px; margin-top: 1px; } /* Hamburger. Shown only below the desktop breakpoint (section 17). */ .v-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; align-items: center; width: 42px; height: 42px; flex: none; background: none; border: 1px solid var(--v-line); border-radius: 6px; cursor: pointer; } .v-burger span { display: block; width: 18px; height: 2px; background: var(--v-ink); } /* Mobile drawer, full height below the bar. */ .v-drawer { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; height: calc(100vh - 68px); background: var(--v-paper); overflow: auto; z-index: 49; padding: 12px var(--v-gut) 40px; } .v-drawer__group { border-bottom: 1px solid var(--v-line); padding: 14px 0; } .v-drawer__top { display: block; font-weight: 600; font-size: 18px; color: var(--v-ink); } .v-drawer__list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-left: 12px; } .v-drawer__link { display: block; padding: 7px 0; color: var(--v-ink); font-size: 15px; } /* ============================================================================= * 9. FOOTER * ----------------------------------------------------------------------------- * HubSpot note: replaces module_STARDUST_Footer_01. * ========================================================================== */ .v-footer { background: var(--v-white); border-top: 1px solid var(--v-line); padding: 64px 0 32px; color: var(--v-ink-soft); } .v-footer__inner { max-width: var(--v-max); margin: 0 auto; padding: 0 40px; } .v-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } .v-footer__blurb { color: var(--v-muted); font-size: 14px; max-width: 34ch; margin-top: 16px; line-height: 1.6; } .v-footer__contact { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 14px; } /* The column titles are links to their section index, so they need to be * display:block to keep the same stacking they had as
s. */ .v-footer__title { display: block; font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--v-muted); margin-bottom: 14px; } a.v-footer__title:hover { color: var(--v-blue); } /* City sits above the contact links rather than inside the blurb sentence. */ .v-footer__place { color: var(--v-ink); } .v-footer__links { display: flex; flex-direction: column; gap: 9px; font-size: 14px; } .v-footer__links a { color: var(--v-ink); } .v-footer__links a:hover { color: var(--v-blue); } .v-footer__links .is-child { padding-left: 12px; } .v-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--v-line-soft); font-size: 13px; color: var(--v-muted); align-items: center; } .v-footer__legal a { color: var(--v-muted); } .v-footer__copy { margin-left: auto; } /* ============================================================================= * 10. HOME * ========================================================================== */ /* --- Pipeline: five tabs over a detail panel ----------------------------- */ .v-pipeline { margin-top: 72px; border: 1px solid var(--v-border-dark); background: rgba(12,18,26,.72); backdrop-filter: blur(6px); } .v-pipeline__tabs { display: grid; grid-template-columns: repeat(5, 1fr); } .v-pipeline__tab { appearance: none; background: none; border: 0; border-right: 1px solid var(--v-border-dark); text-align: left; padding: 24px 22px 22px; cursor: pointer; color: var(--v-on-dark); font-family: inherit; opacity: .6; transition: opacity .3s, background .3s; } .v-pipeline__tab[aria-selected="true"] { opacity: 1; background: var(--v-fill-dark); } .v-pipeline__tab-meta { display: flex; justify-content: space-between; font-family: var(--v-font-mono); font-size: 11px; letter-spacing: .14em; color: rgba(247,248,251,.45); } .v-pipeline__tab[aria-selected="true"] .v-pipeline__tab-meta { color: var(--v-blue-light); } .v-pipeline__tab-title { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; } /* Selection is marked by the corner glow (.v-glowbox), not an underline. * On the dark hero the glow needs more alpha than it does on white. */ .v-pipeline__tab { --v-glow-a: .52; } .v-pipeline__body { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 36px 28px 40px; border-top: 1px solid var(--v-border-dark); } .v-pipeline__headline { font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; max-width: 22ch; } .v-pipeline__signals { display: flex; flex-direction: column; gap: 8px; align-self: start; } /* --- Item record card ---------------------------------------------------- * The animated "VD-48213" panel. Rows fade in one at a time; vendidit.js * drives the step by toggling .is-on. * ---------------------------------------------------------------------- */ .v-record__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--v-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-muted); flex-wrap: wrap; gap: 8px; } .v-record__top { display: grid; grid-template-columns: 110px 1fr; gap: 20px; margin-top: 24px; align-items: start; } .v-record__thumb { aspect-ratio: 1; background: repeating-linear-gradient(135deg, var(--v-line-soft) 0 6px, transparent 6px 14px); border: 1px solid var(--v-line); display: flex; align-items: center; justify-content: center; font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-muted); text-align: center; padding: 8px; } .v-record__title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--v-ink); min-height: 52px; } .v-record__sub { font-family: var(--v-font-mono); font-size: 12px; color: var(--v-muted); margin-top: 8px; } .v-record__rows { display: flex; flex-direction: column; margin-top: 22px; border-top: 1px solid var(--v-line); } .v-record__row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--v-line-soft); opacity: .2; transform: translateY(4px); transition: opacity .5s, transform .5s; } .v-record__row.is-on { opacity: 1; transform: none; } .v-record__k { font-family: var(--v-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-muted); width: 110px; flex: none; } .v-record__v { flex: 1; font-size: 15px; font-weight: 500; color: var(--v-ink); } .v-record__t { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-blue); } /* --- Product rows -------------------------------------------------------- */ .v-prodrows { display: flex; flex-direction: column; border-top: 1px solid var(--v-line); } .v-prodrow { display: grid; grid-template-columns: 200px 1fr auto; gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--v-line); color: var(--v-ink-soft); } /* Each row tints to its own product colour on hover. The colour is passed in * from the HTML as --v-accent so this rule stays generic. */ .v-prodrow:hover { color: var(--v-accent, var(--v-blue)); } .v-prodrow__mark { display: flex; align-items: center; gap: 10px; } .v-prodrow__name { font-weight: 700; letter-spacing: -.03em; font-size: 24px; color: var(--v-ink); } .v-prodrow__name .v-logo__dot { color: var(--v-accent, var(--v-blue)); } .v-prodrow__lead { display: block; font-weight: 500; color: var(--v-ink); } .v-prodrow__sub { display: block; font-size: 14px; color: var(--v-muted); margin-top: 2px; } /* The go affordance is a colour-coded arrow rather than a "Visit" label: it * inherits the row's own --v-accent, so each product reads as its own colour. * The row is the link, so the arrow is aria-hidden and adds no link text. */ .v-prodrow__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--v-accent, var(--v-blue)); color: var(--v-accent, var(--v-blue)); transition: background .25s, color .25s, transform .25s; } .v-prodrow__go svg { display: block; } /* Hovering anywhere on the row fills the disc and nudges it along. */ .v-prodrow:hover .v-prodrow__go { background: var(--v-accent, var(--v-blue)); color: var(--v-white); transform: translateX(4px); } /* --- Corner glow (selection marker) -------------------------------------- * Marks the selected item in a group with a blue glow that grows out of the * bottom-right corner, instead of a rule or underline. * * Add .v-glowbox to the item. It activates on EITHER .is-active (class-driven * groups, e.g. the sector matrix) or aria-selected="true" (ARIA tab groups, * e.g. the hero pipeline), so it drops onto both patterns without changing * the JS that drives them. * * The glow is a pseudo-element, not a background: gradients are background- * images and background-images do not transition. Parking it small in the * corner and scaling from that origin is what makes it grow out of the corner * rather than fade up in place. The reduced-motion guard in section 2 * flattens both transitions to instant. * ---------------------------------------------------------------------- */ .v-glowbox { position: relative; } .v-glowbox::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: scale(.35); transform-origin: 100% 100%; transition: opacity var(--v-ease), transform .34s cubic-bezier(.16, .84, .44, 1); background: radial-gradient(ellipse 130% 170% at 100% 100%, rgba(0,124,217,var(--v-glow-a, .34)) 0%, rgba(0,124,217,calc(var(--v-glow-a, .34) * .47)) 30%, rgba(0,124,217,calc(var(--v-glow-a, .34) * .15)) 55%, rgba(0,124,217,0) 78%); } .v-glowbox.is-active::after, .v-glowbox[aria-selected="true"]::after { opacity: 1; transform: scale(1); } /* Content sits above the glow. */ .v-glowbox > * { position: relative; z-index: 1; } /* --- Sector matrix ------------------------------------------------------- * Left rail of nine sectors, right panel showing the hovered one. * ---------------------------------------------------------------------- */ .v-matrix { display: grid; grid-template-columns: .9fr 1.1fr; margin-top: 44px; background: var(--v-white); border: 1px solid var(--v-line); box-shadow: 0 30px 70px rgba(12,18,26,.08); } .v-matrix__rail { display: grid; grid-template-columns: 1fr 1fr; border-right: 1px solid var(--v-line); } .v-matrix__item { display: block; padding: 18px 24px; border-bottom: 1px solid var(--v-line-soft); color: var(--v-muted); background: transparent; transition: background var(--v-ease), color var(--v-ease); } .v-matrix__item.is-active { color: var(--v-ink); background: var(--v-white); } .v-matrix__label { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; display: block; } .v-matrix__all { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: var(--v-paper); color: var(--v-ink); font-weight: 500; font-size: 15px; } .v-matrix__all:hover { color: var(--v-blue); } .v-matrix__panel { position: relative; color: var(--v-on-dark); padding: 36px; overflow: hidden; display: flex; flex-direction: column; min-height: min(460px, 100vh); } .v-matrix__panel-inner { position: relative; display: flex; flex-direction: column; flex: 1; } .v-matrix__outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; } .v-matrix__outcome { padding: 14px 16px; background: var(--v-fill-dark); border-left: 2px solid var(--v-blue-light); } .v-matrix__outcome-v { font-weight: 600; font-size: 15px; margin-top: 4px; line-height: 1.3; } .v-matrix__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 26px; } /* --- Numbered step row (engagement model) -------------------------------- */ .v-step__num { display: flex; align-items: center; gap: 12px; font-family: var(--v-font-mono); color: var(--v-blue-light); font-size: 12px; letter-spacing: .1em; } .v-step__num::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.18); } .v-step__title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-top: 16px; } .v-step__body { color: var(--v-on-dark-70); font-size: 15px; margin-top: 8px; } /* Boxed variant of the step. Solid card so the starfield behind the band does * not read through it, and the number sits in a circle instead of trailing a * rule off to the right. Opt in per instance with .v-step--card; the bare * .v-step__* treatment above is unchanged for the other pages that use it. */ .v-step--card { background: var(--v-ink-soft); border: 1px solid var(--v-border-dark); border-radius: 10px; padding: 26px 24px; } .v-step--card .v-step__num { display: inline-flex; justify-content: center; gap: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--v-blue-light); font-family: var(--v-font); font-weight: 700; font-size: 15px; letter-spacing: 0; } /* Kills the trailing rule from the base .v-step__num. */ .v-step--card .v-step__num::after { content: none; } /* Three-up proof band under the engagement model. */ .v-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--v-border-dark); } /* ============================================================================= * 11. SOLUTIONS AND ASSET INTELLIGENCE * ========================================================================== */ /* Capability accordion: five numbered rows that expand one at a time. */ .v-caps { border-top: 1px solid var(--v-line); } .v-caps__row { border-bottom: 1px solid var(--v-line); } .v-caps__btn { width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center; padding: 26px 0; background: none; border: 0; text-align: left; font-family: inherit; cursor: pointer; } .v-caps__n { font-family: var(--v-font-mono); font-size: 12px; letter-spacing: .14em; color: var(--v-blue); } .v-caps__title { font-size: var(--v-size-h3); font-weight: 600; letter-spacing: -.025em; color: var(--v-ink); } .v-caps__panel { padding: 0 0 26px 84px; } /* Lifecycle timeline (Asset Intelligence hero panel). */ .v-life__row { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--v-border-dark); opacity: .35; transition: opacity .4s; } .v-life__row.is-on { opacity: 1; } .v-life__when { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-on-dark-50); } .v-life__tag { font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-blue-light); } /* Deployment options table. */ .v-deploy { width: 100%; border-collapse: collapse; } .v-deploy th, .v-deploy td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--v-line); vertical-align: top; font-size: 15px; } .v-deploy thead th { background: var(--v-ink); color: var(--v-on-dark-55); font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; border-bottom: 0; } .v-deploy td:first-child { font-weight: 600; color: var(--v-ink); } /* ============================================================================= * 12. PORTFOLIO * ========================================================================== */ /* Top diagram: the four product tiles in a 2x2 grid. */ .v-plat { display: flex; flex-direction: column; align-self: stretch; } .v-plat__tiles { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; flex: 1; min-height: 320px; } .v-plat__tile { background: var(--v-white); border: 1px solid var(--v-line); border-top: 3px solid var(--v-accent, var(--v-blue)); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; color: var(--v-ink); } .v-plat__tile:hover { border-color: var(--v-accent, var(--v-blue)); color: var(--v-ink); } .v-plat__tile-name { font-weight: 700; letter-spacing: -.03em; font-size: 20px; } /* Product card: description on the left, facts on the right. */ .v-prod { display: grid; grid-template-columns: 1fr 1.2fr; background: var(--v-white); border: 1px solid var(--v-line); scroll-margin-top: 90px; } .v-prod__main { padding: 40px; border-right: 1px solid var(--v-line); display: flex; flex-direction: column; gap: 18px; } .v-prod__name { font-weight: 700; letter-spacing: -.03em; font-size: 32px; color: var(--v-ink); } .v-prod__one { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--v-ink); } .v-prod__facts { padding: 40px; background: var(--v-paper); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-content: start; } .v-prod__deploy { grid-column: 1 / -1; border-top: 1px solid var(--v-line); padding-top: 18px; font-size: 15px; color: var(--v-muted); line-height: 1.55; } .v-prod__deploy b { color: var(--v-ink); font-weight: 500; } /* Capability checklist inside a product card. */ .v-capslist { display: flex; flex-direction: column; gap: 6px; } .v-capslist__row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--v-line); } .v-capslist__v { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-accent, var(--v-blue)); } .v-capslist__v--off { color: var(--v-line); } /* ============================================================================= * 13. INDUSTRY PAGE FURNITURE * ----------------------------------------------------------------------------- * All nine industry pages use these. Change one rule, all nine follow. * ========================================================================== */ /* Anchor strip under the hero: four numbered jump links. */ .v-jump { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--v-border-dark); } .v-jump__link { display: flex; align-items: center; gap: 10px; padding: 18px 20px 18px 0; color: var(--v-on-dark-70); font-size: 15px; } .v-jump__link:hover { color: var(--v-white); } .v-jump__n { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-blue-light); } /* Application card: big number beside a heading and body. */ .v-app { padding: 28px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); display: grid; grid-template-columns: 64px 1fr; gap: 16px; scroll-margin-top: 90px; } .v-app__n { font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: .9; color: var(--v-blue-light); } /* Stakeholder ledger. A table rendered as a CSS grid so the five columns can * be reflowed to a stacked card layout on narrow screens (section 17). */ .v-ledger { background: var(--v-white); border: 1px solid var(--v-line); overflow: hidden; } .v-ledger__row { display: grid; grid-template-columns: 48px 1.1fr 1.1fr 1.3fr 96px; gap: 24px; align-items: center; padding: 24px 28px; border-bottom: 1px solid var(--v-line-soft); } .v-ledger__row:last-child { border-bottom: 0; } .v-ledger__row--head { padding: 16px 28px; background: var(--v-ink); color: var(--v-on-dark-55); font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; } .v-ledger__n { font-family: var(--v-font-mono); font-size: 12px; color: var(--v-blue); } .v-ledger__who { font-weight: 600; color: var(--v-ink); } .v-ledger__cap { font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-blue); text-align: right; } /* Sources / platform / decisions diagram. */ .v-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; } .v-flow__arrow { color: var(--v-blue); font-size: 26px; align-self: center; } .v-flow__box { padding: 26px; border: 1px solid var(--v-line); background: var(--v-white); color: var(--v-ink); } /* Coverage matrix on the Industries index. */ .v-coverage { width: 100%; border-collapse: collapse; background: var(--v-white); } .v-coverage th, .v-coverage td { padding: 14px 16px; border-bottom: 1px solid var(--v-line-soft); font-size: 14px; text-align: center; } .v-coverage th:first-child, .v-coverage td:first-child { text-align: left; } .v-coverage thead th { background: var(--v-ink); color: var(--v-on-dark-55); font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; } .v-coverage__sector { font-weight: 600; color: var(--v-ink); } .v-coverage__group { display: block; font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-muted); font-weight: 400; } /* Filled and empty capability marks. */ .v-mark-on { display: inline-block; width: 10px; height: 10px; background: var(--v-blue); } .v-mark-off { display: inline-block; width: 10px; height: 10px; background: var(--v-line); } /* ============================================================================= * 14. RESOURCES, CASE STUDIES, ARTICLES, PRESS * ========================================================================== */ /* Filter row. vendidit.js shows and hides cards by their data-filter value. */ .v-filters { display: flex; flex-wrap: wrap; gap: 8px; } .v-filter { padding: 8px 14px; border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-white); color: var(--v-ink); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .v-filter[aria-pressed="true"] { border-color: var(--v-ink); background: var(--v-ink); color: var(--v-white); } /* Card used for a case study, an article or a press item. */ .v-item { display: flex; flex-direction: column; gap: 12px; background: var(--v-white); border: 1px solid var(--v-line); padding: 26px; color: var(--v-ink); } .v-item:hover { border-color: var(--v-blue); color: var(--v-ink); } .v-item__meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-muted); } .v-item__title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } .v-item__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; } /* Press card with a thumbnail. */ .v-press__thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--v-line-soft); } .v-press__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Sticky meta rail on the case-study page. */ .v-rail { position: sticky; top: 96px; background: var(--v-ink); color: var(--v-on-dark); padding: 26px; } .v-rail__row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .v-rail__row:last-child { border-bottom: 0; } .v-rail__v { font-weight: 500; margin-top: 3px; } /* Numbered long-form block (case study body, origin story chapters). */ .v-numbered { display: grid; grid-template-columns: 64px 1fr; gap: 20px; } .v-numbered__n { font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: .9; color: var(--v-line); } .v-numbered__body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } .v-numbered__body p { color: var(--v-muted); font-size: 17px; line-height: 1.6; max-width: 68ch; } /* ============================================================================= * 15. COMPANY PAGES, FORMS, LEGAL * ========================================================================== */ /* Founder / team card. */ .v-person { background: var(--v-white); border: 1px solid var(--v-line); padding: 32px; } .v-person__name { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--v-ink); } .v-person__role { font-family: var(--v-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-blue); margin-top: 4px; } .v-person__bio { color: var(--v-muted); font-size: 15px; line-height: 1.65; margin-top: 14px; } /* --- Contact form -------------------------------------------------------- * HubSpot note: this markup is a visual placeholder. In production the whole *
is replaced by a HubSpot form embed; keep the wrapper classes so the * surrounding layout does not move. Field names match the current form. * ---------------------------------------------------------------------- */ .v-form { background: var(--v-white); border: 1px solid var(--v-line); padding: 32px; } .v-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .v-form__field { display: flex; flex-direction: column; gap: 6px; } .v-form__field--full { grid-column: 1 / -1; } /* Field titles are set in the body face, bold - not the mono/uppercase * treatment used for eyebrows and data labels elsewhere. */ .v-form__label { font-family: var(--v-font); font-size: 13px; font-weight: 700; color: var(--v-ink); } .v-form__input, .v-form__select, .v-form__textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--v-line); border-radius: 4px; background: var(--v-white); font-family: inherit; font-size: 15px; color: var(--v-ink); } .v-form__input:focus, .v-form__select:focus, .v-form__textarea:focus { border-color: var(--v-blue); } .v-form__textarea { min-height: 130px; resize: vertical; } .v-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; } /* Legal pages: a single measured column of prose. */ .v-legal { max-width: 76ch; } .v-legal h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--v-ink); margin-top: 36px; } .v-legal h2:first-of-type { margin-top: 0; } .v-legal p, .v-legal li { color: var(--v-muted); line-height: 1.7; margin-top: 12px; } .v-legal ul { padding-left: 20px; } /* ============================================================================= * 16. UTILITIES * ----------------------------------------------------------------------------- * Only what Bootstrap 4 does not already give us. * ========================================================================== */ .v-mt-0 { margin-top: 0 !important; } .v-mt-8 { margin-top: 8px; } .v-mt-10 { margin-top: 10px; } .v-mt-14 { margin-top: 14px; } .v-mt-16 { margin-top: 16px; } .v-mt-18 { margin-top: 18px; } .v-mt-22 { margin-top: 22px; } .v-mt-24 { margin-top: 24px; } .v-mt-28 { margin-top: 28px; } .v-mt-32 { margin-top: 32px; } .v-mt-40 { margin-top: 40px; } .v-mt-44 { margin-top: 44px; } .v-mt-48 { margin-top: 48px; } .v-mt-72 { margin-top: 72px; } .v-stack { display: flex; flex-direction: column; } .v-stack-8 { display: flex; flex-direction: column; gap: 8px; } .v-stack-12 { display: flex; flex-direction: column; gap: 12px; } .v-stack-14 { display: flex; flex-direction: column; gap: 14px; } .v-stack-20 { display: flex; flex-direction: column; gap: 20px; } .v-stack-24 { display: flex; flex-direction: column; gap: 24px; } .v-row-6 { display: flex; gap: 6px; flex-wrap: wrap; } .v-row-8 { display: flex; gap: 8px; flex-wrap: wrap; } .v-row-12 { display: flex; gap: 12px; flex-wrap: wrap; } .v-measure-36 { max-width: 36ch; } .v-measure-40 { max-width: 40ch; } .v-measure-44 { max-width: 44ch; } .v-measure-46 { max-width: 46ch; } .v-measure-50 { max-width: 50ch; } .v-measure-52 { max-width: 52ch; } .v-measure-62 { max-width: 62ch; } .v-measure-68 { max-width: 68ch; } .v-ink-text { color: var(--v-ink) !important; } .v-white-text { color: var(--v-white) !important; } .v-blue-text { color: var(--v-blue) !important; } /* Screen-reader-only text. Same behaviour as Bootstrap's .sr-only; repeated * here so these blocks still work if Bootstrap is ever dropped. */ .v-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================= * 17. RESPONSIVE * ----------------------------------------------------------------------------- * Three breakpoints, matching the original design: * * 1040px desktop nav collapses to the drawer; wide two-column splits stack * 900px four- and five-up grids drop to two * 700px everything becomes a single column * * These are close to but not identical to Bootstrap's lg/md/sm. They are the * design's own breakpoints; do not swap them for Bootstrap's without checking * the nav, which collapses at exactly 1040px. * ========================================================================== */ @media (max-width: 1040px) { /* --- Navigation ------------------------------------------------------- */ .v-nav, .v-header__cta { display: none !important; } .v-burger { display: inline-flex !important; } /* --- Wide two-column splits stack -------------------------------------- */ .v-split--12-8, .v-split--9-11, .v-split--11-9, .v-split--1-2, .v-split--8-12, .v-split--even-56, .v-split--sidebar { grid-template-columns: 1fr; gap: 40px; } .v-rail { position: static; } /* --- Home pipeline: tabs wrap, body stacks ----------------------------- */ .v-pipeline__tabs { grid-template-columns: repeat(2, 1fr); } .v-pipeline__body { grid-template-columns: 1fr; gap: 28px; } /* --- Sector matrix stacks, rail becomes a single list ------------------ */ .v-matrix { grid-template-columns: 1fr; } .v-matrix__rail { border-right: 0; border-bottom: 1px solid var(--v-line); } /* --- Portfolio product card stacks ------------------------------------- */ .v-prod { grid-template-columns: 1fr; } .v-prod__main { border-right: 0; border-bottom: 1px solid var(--v-line); } /* --- Footer to two columns --------------------------------------------- */ .v-footer__grid { grid-template-columns: repeat(2, 1fr); } /* --- Four/five-up grids to two ----------------------------------------- */ .v-cols--4, .v-cols--5 { grid-template-columns: repeat(2, 1fr); } /* --- Flow diagram: drop the arrows, stack the boxes -------------------- */ .v-flow { grid-template-columns: 1fr; } .v-flow__arrow { display: none; } /* --- Ledger becomes stacked cards -------------------------------------- */ .v-ledger__row { grid-template-columns: 1fr; gap: 6px; } .v-ledger__row--head { display: none; } .v-ledger__cap { text-align: left; } .v-jump { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { :root { --v-section-y: 72px; } .v-cols--3 { grid-template-columns: repeat(2, 1fr); } .v-prod__facts, .v-form__grid, .v-matrix__outcomes, .v-proof { grid-template-columns: 1fr; } .v-matrix__rail { grid-template-columns: 1fr; } /* Deployment and coverage tables scroll sideways rather than squash. */ .v-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .v-table-scroll > table { min-width: 640px; } } @media (max-width: 700px) { .v-logo__img { height: 38px; } .v-logo--footer .v-logo__img { height: 44px; } .v-cols--2, .v-cols--3, .v-cols--4, .v-cols--5, .v-split--even, .v-plat__tiles, .v-footer__grid, .v-pipeline__tabs { grid-template-columns: 1fr; } .v-plat__tiles { grid-template-rows: auto; min-height: 0; } .v-footer__copy { margin-left: 0; width: 100%; } .v-record__top { grid-template-columns: 1fr; } .v-prodrow { grid-template-columns: 1fr; gap: 10px; } .v-numbered, .v-app, .v-caps__btn { grid-template-columns: 1fr; gap: 10px; } .v-caps__panel { padding-left: 0; } .v-stat { border-right: 0; border-bottom: 1px solid var(--v-line); } .v-jump { grid-template-columns: 1fr; } }