/* ========================================================================== BespokeLMS Marketing Site — Component Styles Reusable UI components. All values use tokens from tokens.css. ========================================================================== */ /* ── Buttons ────────────────────────────────────────────────────────────── */ /* Variants : btn--primary | btn--secondary | btn--teal | btn--ghost | btn--danger Sizes : btn--sm | (default = md) | btn--lg | btn--xl Modifiers : btn--full (full width) | btn--icon (square icon button) States : default → hover → active → focus-visible → disabled → loading */ /* Base — shared structure */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--button-primary-padding-block) var(--button-primary-padding-inline); font-family: var(--font-family-body); font-size: var(--button-md-font); font-weight: var(--button-base-font-weight); line-height: var(--line-height-none); letter-spacing: var(--button-base-letter-spacing); white-space: nowrap; text-decoration: none; border-radius: var(--button-primary-radius); border: var(--button-base-border-width) solid transparent; cursor: pointer; transition: var(--button-base-transition); user-select: none; position: relative; overflow: hidden; } /* ── Size modifiers ─────────────────────────────────────────────────────── */ .btn--sm { padding: var(--button-sm-padding-block) var(--button-sm-padding-inline); font-size: var(--button-sm-font); } /* md = default */ .btn--lg { padding: var(--button-lg-padding-block) var(--button-lg-padding-inline); font-size: var(--button-lg-font); } /* ──────────────────────────────────────────────────────────────────────── Button Group Container ──────────────────────────────────────────────────────────────────────── */ .hero__actions { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; } .hero__actions.justify-center { justify-content: center; } @media (max-width: 428px) { .hero__actions { flex-direction: column; align-items: stretch; } } /* ── Button icon animations ─────────────────────────────────────────────── */ /* Usage: ═══════════════════════════════════════════════════════════════════════════ */ /* .btn--glow — the glow lives entirely on ::after; position: relative comes from .btn */ .btn--glow::after { content: ''; position: absolute; bottom: calc(-1 * var(--space-2)); left: 15%; right: 15%; height: var(--space-5); background: radial-gradient(ellipse, var(--color-teal-10) 0%, transparent 70%); filter: blur(8px); pointer-events: none; } /* ── Navigation ─────────────────────────────────────────────────────────── */ .site-header { position: fixed; top: var(--space-4); /* var(--space-2) accent stripe + var(--space-2) gap below it */ left: 50%; transform: translateX(-50%); width: min(1100px, calc(100% - 48px)); z-index: var(--z-index-toast); background: var(--surface-secondary); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-xl); border: var(--border-width-base) solid var(--border-subtle); box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 0 rgba(0, 0, 0, 0.04); transition: transform var(--transition-slow), opacity var(--transition-slow), box-shadow var(--transition-slow); } /* .is-scrolled — pill already has frosted glass, just slightly increase shadow */ .site-header.is-scrolled { background: var(--surface-secondary); border-color: var(--border-subtle); box-shadow: var(--shadow-modal), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 0 rgba(0, 0, 0, 0.04); } /* Hide on scroll-down — must combine with translateX so it doesn't reset */ .site-header.is-hidden { transform: translateX(-50%) translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; } /* Nav-open: mobile menu open */ .site-header.nav-open { border-radius: var(--radius-xl); box-shadow: var(--shadow-float); } /* Body needs enough top padding for var(--space-2) accent + var(--space-2) gap + ~78px pill + var(--space-2) below */ body { padding-top: 108px; } /* ── Top accent stripe (Salix pattern, BespokeLMS brand gradient) ─────────── */ .top-bar { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--space-2); background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-teal) 50%, var(--color-teal) 100%); background-size: 200% 100%; animation: top-bar-flow 4s var(--ease-linear) infinite; z-index: var(--z-index-dropdown); pointer-events: none; } @keyframes top-bar-flow { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } } .site-nav { display: flex; align-items: center; height: calc(var(--space-12) + 12px); /* Pill is shorter than full-width nav — padding handles the 78px outer */ padding: 0 var(--space-5) 0 var(--space-6); /* Matches Salix's 15px/var(--space-3)/15px/21px internal pill padding */ } /* Logo — icon mark + wordmark side by side */ .site-nav__logo { display: flex; align-items: center; gap: 0; font-size: 1.375rem; /* 22px — larger, more presence in the pill */ font-weight: var(--font-weight-bold); color: var(--text-primary); text-decoration: none; letter-spacing: var(--letter-spacing-tight); } .site-nav__logo:hover { opacity: 1; } .site-nav__logo-mark { display: flex; align-items: center; color: var(--text-link); flex-shrink: 0; } /* Wrapper so "Bespoke" + "LMS" are one flex item — no gap splits them */ .site-nav__wordmark { display: inline; line-height: var(--line-height-none); } .site-nav__wordmark span { color: var(--text-link); } .site-nav__links { display: flex; align-items: center; gap: var(--space-6); /* Salix link gap ~var(--space-6) */ margin-left: var(--space-8); /* Gap between logo and first link, matching Salix spacing */ } .site-nav__link { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); text-decoration: none; position: relative; /* Needed for ::after underline */ opacity: var(--opacity-80); transition: opacity var(--transition-base); display: inline-block; } /* Teal underline grows from 0 → 100% on hover — same on all nav items */ .site-nav__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--accent-primary); transition: width var(--transition-base); } .site-nav__link:hover { opacity: 1; text-decoration: none; /* Block browser default underline on li-nested links */ } .site-nav__link:hover::after { width: 100%; } .site-nav__actions { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; /* Push actions to the right — key to Salix layout */ } /* ── Resources dropdown ─────────────────────────────────────────────────── */ .site-nav__item { list-style: none; position: relative; } .site-nav__item--has-dropdown { position: relative; } /* The trigger button looks like a nav link — all values hardcoded to match .site-nav__link exactly because button UA styles override 'inherit' */ .site-nav__dropdown-trigger { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; font-family: var(--font-family-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: normal; letter-spacing: normal; color: var(--text-primary); } .site-nav__dropdown-chevron { transition: transform var(--transition-base); flex-shrink: 0; } .site-nav__dropdown-trigger[aria-expanded="true"] .site-nav__dropdown-chevron { transform: rotate(180deg); } /* Dropdown panel */ .site-nav__dropdown { display: block; position: absolute; top: calc(100% + var(--space-3)); left: 50%; transform: translateX(-50%); min-width: 240px; background: var(--surface-primary); border: var(--border-width-base) solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-raised), 0 0 0 1px var(--shadow-sm); padding: var(--space-2); list-style: none; margin: 0; /* Hidden by default */ opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-6px); transition: opacity var(--transition-fast), transform var(--transition-fast); z-index: var(--z-index-toast); } /* Explicitly expand the text-heavy 'Solutions' and 'Services' menus */ .site-nav__item--mega .site-nav__dropdown { width: 420px; max-width: calc(100vw - 32px); /* Guarantee panel never bleeds offscreen on squashed viewports */ } /* Hard wrap Descriptions so they never push the bounds horizontally */ .site-nav__dropdown-desc { white-space: normal; } .site-nav__dropdown.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Small arrow caret pointing up */ .site-nav__dropdown::before { content: ''; position: absolute; top: calc(-1 * var(--space-2)); left: 50%; transform: translateX(-50%); width: var(--space-3); height: var(--space-3); background: var(--surface-primary); border-left: var(--border-width-base) solid var(--border-subtle); border-top: var(--border-width-base) solid var(--border-subtle); rotate: 45deg; } /* Dropdown link items */ .site-nav__dropdown-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: 2px; border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); box-shadow: inset 2px 0 0 transparent; transition: background var(--transition-fast), box-shadow var(--transition-fast); } /* Match nav link typography — strong would otherwise be bold */ .site-nav__dropdown-item strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); /* Normal weight per UX review */ font-family: var(--font-family-body); color: var(--text-primary); } .site-nav__dropdown-item:hover { background: var(--surface-secondary); box-shadow: inset 2px 0 0 var(--color-teal); text-decoration: none; } /* Prevent the teal underline ::after from bleeding into dropdown items */ .site-nav__dropdown-item::after { display: none !important; } .site-nav__dropdown-icon { flex-shrink: 0; width: var(--space-8); height: var(--space-8); display: flex; align-items: center; justify-content: center; background: var(--surface-secondary); border-radius: var(--radius-base); color: var(--text-link); } .site-nav__dropdown-desc { display: block; font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; line-height: var(--line-height-snug); } /* —— Mega menu (Solutions) ——————————————————————————————————————————————— */ .site-nav__item--mega { position: static; } .site-nav__megamenu { display: block; position: absolute; top: calc(100% + var(--space-4)); left: 0; width: 100%; background: var(--surface-primary); border: var(--border-width-base) solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.15), 0 30px 60px -30px rgba(0, 0, 0, 0.1), 0 -10px 40px -10px rgba(0, 0, 0, 0.02), 0 0 0 1px var(--border-subtle); opacity: 0; visibility: hidden; transform: perspective(1000px) rotateX(-4deg) translateY(-10px); transform-origin: top center; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s; z-index: var(--z-index-toast); } .site-nav__megamenu::before { content: ''; position: absolute; top: calc(-1 * var(--space-4)); left: 0; width: 100%; height: var(--space-4); background: transparent; } .site-nav__megamenu.is-open { opacity: 1; visibility: visible; transform: perspective(1000px) rotateX(0) translateY(0); pointer-events: auto; } .site-nav__mega-grid { display: flex; justify-content: stretch; padding: var(--space-4) var(--space-2) 0; min-height: var(--nav-mega-min-height); } .site-nav__mega-col { flex: 1; padding: 0 var(--space-3) var(--space-4); } .site-nav__mega-col--bordered { border-left: var(--border-width-base) solid var(--border-subtle); } .site-nav__mega-heading { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-normal).06em; opacity: var(--opacity-70); margin: 0 var(--space-3) var(--space-2); } .site-nav__mega-list { list-style: none; margin: 0; padding: 0; } .site-nav__mega-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-top: var(--border-width-base) solid var(--border-subtle); background: var(--surface-secondary); border-radius: var(--radius-xl); } .site-nav__mega-footer-link { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-link); text-decoration: none; transition: opacity var(--transition-fast); } .site-nav__mega-footer-link:hover { opacity: var(--opacity-80); text-decoration: none; } .site-nav__mega-footer-link::after { display: none !important; } /* ── Audience Mega Menu (Interactive) ─────────────────────────────────── */ .audience-mega { display: grid; grid-template-columns: 310px 1fr; min-height: var(--nav-mega-min-height); align-items: stretch; border-radius: inherit; overflow: hidden; } .audience-mega__left { background: var(--surface-secondary); padding: var(--space-5); border-right: var(--border-width-base) solid var(--border-subtle); display: flex; flex-direction: column; } .audience-mega__header { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-normal).06em; opacity: var(--opacity-70); margin: 0 0 var(--space-4) var(--space-2); } .audience-mega__tabs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .audience-mega__tab { width: 100%; text-align: left; background: transparent; border: var(--border-width-base) solid transparent; border-radius: var(--radius-lg); padding: var(--space-3); cursor: pointer; transition: all var(--transition-base); font-family: var(--font-family-body); } .audience-mega__tab:hover, .audience-mega__tab--active { background: var(--surface-primary); box-shadow: var(--shadow-sm); border-color: var(--border-subtle); } .audience-mega__tab-title { display: block; font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-1); font-size: var(--font-size-md); } .audience-mega__tab-desc { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-height-normal); } .audience-mega__right { padding: var(--space-5); display: flex; flex-direction: column; justify-content: flex-start; } .audience-mega__panels { flex-grow: 1; display: grid; } .audience-mega__panel { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); grid-area: 1 / 1 / 2 / 2; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--transition-base), visibility 0s linear var(--duration-200); } .audience-mega__panel:not([hidden]) { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--transition-base), visibility 0s; } .audience-mega__panel[hidden] { display: flex; /* Prevent display: none so the grid calculates height based on tallest */ } .audience-mega__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: var(--space-3); border-radius: var(--radius-lg); transition: background var(--transition-fast); } .audience-mega__link:hover { background: var(--surface-secondary); text-decoration: none; } .audience-mega__link strong { color: var(--text-link); font-weight: var(--font-weight-bold); margin-bottom: var(--space-1); } .audience-mega__link span { font-size: var(--font-size-sm); color: var(--text-secondary); } .audience-mega__link::after { display: none !important; } .audience-mega__footer { padding: var(--space-4) var(--space-4) 0; margin-top: var(--space-4); border-top: var(--border-width-base) solid var(--border-subtle); } .audience-mega__footer a { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-link); text-decoration: none; } .audience-mega__footer a:hover { text-decoration: underline; } /* Editorial Mega Menu (Platform) */ .editorial-mega { display: grid; grid-template-columns: 310px 1fr; min-height: var(--nav-mega-min-height); align-items: stretch; border-radius: inherit; overflow: hidden; } .editorial-mega__left { background: var(--surface-secondary); padding: var(--space-5); border-right: var(--border-width-base) solid var(--border-subtle); display: flex; flex-direction: column; } .editorial-mega__feature { display: flex; flex-direction: column; height: 100%; } .editorial-mega__feature[hidden] { display: none; } .editorial-mega__eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-normal).06em; opacity: var(--opacity-70); margin: 0 0 var(--space-4) 0; } .editorial-mega__title { font-size: var(--font-size-lg); line-height: var(--line-height-normal); font-weight: var(--font-weight-bold); color: var(--text-primary); margin: 0 0 var(--space-3) 0; } .editorial-mega__desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-height-normal); margin: 0 0 auto 0; } .editorial-mega__cta { margin-top: var(--space-6); align-self: flex-start; } .editorial-mega__right { padding: var(--space-5); display: flex; flex-direction: column; justify-content: flex-start; } .editorial-mega__grid { display: grid; gap: var(--space-4); flex-grow: 1; } .editorial-mega__group { display: flex; flex-direction: column; } .editorial-mega__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); } .editorial-mega__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: var(--space-4); margin-left: -var(--space-4); margin-right: -var(--space-4); border-radius: var(--radius-lg); transition: background var(--transition-fast); } .editorial-mega__link:hover { background: var(--surface-secondary); text-decoration: none; } .editorial-mega__link strong { color: var(--text-link); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); font-size: var(--font-size-md); } .editorial-mega__link span { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-height-normal); } .editorial-mega__link::after { display: none !important; } @media (max-width: 900px) { .site-nav__mega-grid { flex-direction: column; } .site-nav__mega-col--bordered { border-left: none; border-top: var(--border-width-base) solid var(--border-subtle); padding-top: var(--space-4); margin-top: var(--space-4); } } /* Mobile Accordions */ .site-nav__mobile-details { margin: 0; } .site-nav__mobile-summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; /* remove Safari default arrow */ user-select: none; -webkit-tap-highlight-color: transparent; } .site-nav__mobile-summary::-webkit-details-marker { display: none; /* remove Chrome default arrow */ } /* Rotate the SVG chevron when the details element is open */ .site-nav__mobile-details[open] .site-nav__mobile-summary .site-nav__dropdown-chevron { transform: rotate(180deg); } .site-nav__mobile-summary .site-nav__dropdown-chevron { transition: transform var(--transition-base); opacity: var(--opacity-50); } .site-nav__mobile-sub { list-style: none; padding: 0; margin: 0; } .site-nav__mobile-link--sub { padding-left: var(--space-8) !important; font-size: var(--font-size-sm) !important; opacity: var(--opacity-90); } /* ── Cards ──────────────────────────────────────────────────────────────── */ .card { background-color: var(--card-background); border: var(--border-width-base) solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding-block) var(--card-padding-inline); box-shadow: var(--card-shadow); transition: box-shadow var(--transition-slow), transform var(--transition-slow); } \.card:hover { box-shadow: var(--shadow-raised); transform: translateY(-4px); border-color: var(--color-border-hovered); } .card__icon { width: var(--space-10); height: var(--space-10); display: flex; align-items: center; justify-content: center; background-color: var(--card-background); border-radius: var(--radius-lg); color: var(--text-primary); margin-bottom: var(--space-4); border: var(--border-width-base) solid var(--card-border); } .card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); } .card__body { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-height-relaxed); } /* ── Pill Badge ─────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--chip-padding-block) var(--chip-padding-inline); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--chip-radius); background-color: var(--chip-background); border: var(--border-width-base) solid var(--border-subtle); color: var(--text-secondary); } .badge__dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background-color: var(--accent-primary); flex-shrink: 0; } /* ── Kickers ────────────────────────────────────────────────────────────── */ /* A kicker is a compact 3-line highlight block: .kicker__label — ALL-CAPS category label (teal, small size) .kicker__headline — bold benefit-led headline (~7 words max) .kicker__body — one-sentence supporting line (slate) .kicker__cta — optional ghost micro-CTA link Markup:
WHITE-LABELLED

Your LMS, fully on your brand

Launch under your domain with your visual identity from day one.

Book a demo →
…3 more…
*/ .kickers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .kicker { background-color: var(--surface-primary); border: var(--border-width-base) solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-7) var(--space-6); transition: box-shadow var(--transition-slow), transform var(--transition-slow); } .kicker:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); } .kicker__label { display: block; font-size: var(--font-size-xs);; /* 11px */ font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal).1em; text-transform: uppercase; color: var(--text-link); margin-bottom: var(--space-3); } .kicker__headline { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-snug); margin-bottom: var(--space-2); letter-spacing: var(--letter-spacing-normal); } .kicker__body { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-height-relaxed); margin-bottom: 0; } .kicker__cta { display: inline-block; margin-top: var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-link); text-decoration: none; transition: opacity var(--transition-base); } .kicker__cta:hover { opacity: var(--opacity-80); } /* Responsive: 2-col at ≤768px, 1-col at ≤480px */ @media (max-width: 900px) { .kickers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .kickers-grid { grid-template-columns: 1fr; } } /* ── Section Defaults ───────────────────────────────────────────────────── */ .section { padding-block: var(--space-24); } .section--white { background-color: var(--surface-primary); } .section--subtle { background-color: var(--surface-secondary); } /* ========================================================================== C-11: Explicit Alternating Section Background Token Pattern Manually add .section--alt to alternate sections for more stable rendering across template includes. ========================================================================== */ .section--alt { background-color: var(--surface-secondary); } .section__header { max-width: var(--layout-md); margin-bottom: var(--space-16); } .section__header--center { text-align: center; margin-inline: auto; } .section__header--eyebrow-only { margin-bottom: 0; } /* -- Section eyebrow - Option A: teal accent line, no pill -------------------- */ .section__eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0; font-size: var(--font-size-xs);; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-normal).15em; text-transform: uppercase; color: var(--text-primary); background: none; border: none; border-radius: 0; margin-bottom: var(--space-5); width: fit-content; } /* In centred section headers, auto margins push the label to the middle */ /* Centred eyebrow - line above text rather than beside it */ .section__header--center .section__eyebrow { flex-direction: column; align-items: center; gap: 0; text-align: center; margin-inline: auto; } .section__header--center .section__eyebrow::before { display: block; margin: 0 auto var(--space-2); } .section__title { font-size: clamp(1.5rem, 3vw, var(--font-size-2xl)); margin-bottom: var(--space-4); color: var(--text-primary); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-snug); } .section__lead { font-size: var(--font-size-lg); color: var(--text-secondary); line-height: var(--line-height-relaxed); max-width: 56ch; } .section__header--center .section__lead { margin-inline: auto; } /* ── FAQ Accordion (shared — used on pricing and our-story) ─────────────── */ .faq-accordion { margin-top: var(--space-10); border-top: var(--border-width-base) solid var(--border-subtle); } .faq-item { border-bottom: var(--border-width-base) solid var(--border-subtle); } .faq-item__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) 0; background: none; border: none; cursor: pointer; text-align: left; color: var(--text-primary); font-family: var(--font-family-body); } .faq-item__question { font-family: var(--font-family-body); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); padding-right: var(--space-4); color: var(--text-primary); } .faq-item__icon { color: var(--text-secondary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .faq-item__icon svg { transition: transform var(--transition-base); } .faq-item__icon svg.is-open { transform: rotate(180deg); } .faq-item__content { overflow: hidden; } .faq-item__inner { padding-bottom: var(--space-5); padding-right: var(--space-8); color: var(--text-secondary); font-family: var(--font-family-body); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); } @media (max-width: 640px) { .faq-item__question { font-size: var(--font-size-md); } } /* ── Footer — fixed dark background, always visually separated ─────────── */ .site-footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); position: relative; border-top: var(--border-width-base) solid var(--border-subtle); padding-top: var(--space-12); padding-bottom: var(--space-8); } /* Full-bleed animated top line - matches vertical guide lines */ .site-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; animation: guide-colour-cycle 6s var(--ease-in-out) infinite; animation-delay: 1.5s; } .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-12); align-items: start; /* brand column top-aligned — don't stretch to SOLUTIONS height */ } .site-footer .site-nav__logo { font-size: var(--font-size-md); } /* ── Vertical logo — footer only ──────────────────────────────────────────── */ .site-footer__logo-vertical { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); text-decoration: none; color: var(--color-footer-heading); margin-bottom: var(--space-5); } .site-footer__logo-vertical:hover { opacity: var(--opacity-90); } .site-footer__logo-icon { display: block; width: var(--space-8); height: var(--space-8); color: var(--color-footer-heading); /* force near-white — never teal */ } .site-footer__logo-wordmark { font-family: var(--font-family-body-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-footer-heading); line-height: var(--line-height-none); letter-spacing: var(--letter-spacing-tight); } .site-footer__logo-wordmark span { color: var(--text-link); } .site-footer__brand p { color: var(--color-footer-text); font-size: var(--font-size-sm); margin-top: var(--space-3); max-width: 260px; opacity: var(--opacity-90); } .site-footer__cta { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-footer-link-hover); text-decoration: underline; text-underline-offset: 3px; transition: opacity var(--transition-base); } .site-footer__cta:hover { opacity: var(--opacity-80); } .site-footer__heading { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-footer-heading); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: var(--letter-spacing-normal).06em; } /* Secondary heading within the same column (e.g. Product after Company) */ .site-footer__heading--spaced { margin-top: var(--space-8); } .site-footer__links { display: flex; flex-direction: column; gap: var(--space-3); } .site-footer__link { font-size: var(--font-size-sm); color: var(--color-footer-link); text-decoration: none; transition: color var(--transition-base); } .site-footer__link:visited { color: var(--color-footer-link); /* suppress browser visited-link teal/purple */ } .site-footer__link:hover { color: var(--color-footer-link-hover); text-decoration: none; } .site-footer__link--highlight { color: var(--color-text-focus); font-weight: var(--font-weight-medium); } .site-footer__link-wrap--mt-1 { margin-top: var(--space-1); } .site-footer__link-wrap--mt-2 { margin-top: var(--space-2); } .site-footer__group { margin-bottom: var(--space-4); } .site-footer__group-title { display: block; font-size: var(--text-xs); color: var(--text-secondary); opacity: 0.7; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-2); } .site-footer__bottom { padding-top: var(--space-6); display: flex; justify-content: center; align-items: center; font-size: var(--font-size-xs);; color: var(--color-footer-text-dim); line-height: var(--line-height-relaxed); text-align: center; position: relative; } .site-footer__legal-link { color: var(--color-footer-text-dim); text-decoration: none; transition: color var(--transition-base); } .site-footer__legal-link:hover { color: var(--color-footer-link-hover); } /* Full-bleed animated divider above copyright — matches footer top line */ .site-footer__bottom::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; animation: guide-colour-cycle 6s var(--ease-in-out) infinite; animation-delay: 4.5s; } /* When only one child — centre it */ .site-footer__bottom--centred { justify-content: center; } @media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .site-footer { padding-top: var(--space-10); padding-bottom: var(--space-6); } .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-10); text-align: center; } .site-footer__brand p { margin-inline: auto; } .site-footer__logo-vertical { align-items: center; margin-inline: auto; } .site-footer__links { align-items: center; } .site-footer__bottom { flex-direction: column; gap: var(--space-3); text-align: center; margin-top: var(--space-6); } } /* ========================================================================== Mobile / Responsive Navigation ========================================================================== */ /* Hide mobile-only elements on desktop */ .site-nav__mobile-actions { display: none; } /* The mobile menu is a body-level element (sibling of
, not a child). This avoids the transform stacking-context issue where a fixed child of a transformed parent becomes relative to the parent, not the viewport. Closed state: hidden via opacity + pointer-events (not display:none, so the open animation plays correctly). */ .site-nav__mobile-menu { position: fixed; top: 84px; left: 50%; width: min(960px, calc(100% - 48px)); max-height: calc(100vh - 84px - 24px); z-index: var(--z-index-modal); background-color: var(--surface-secondary); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: var(--border-width-base) solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); padding: var(--space-6) var(--space-5); overflow-y: auto; /* Hidden state */ opacity: 0; pointer-events: none; transform: translate(-50%, -8px); transition: opacity var(--transition-base), transform var(--transition-base); } /* Open state — triggered by JS adding .nav-open to the menu element */ .site-nav__mobile-menu.nav-open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } @media (max-width: 900px) { /* ── Hide desktop-only elements ─────────────────────────────────────────── */ .site-nav__links { display: none; } .site-nav__actions { display: none; } /* ── Show mobile controls ─────────────────────────────────────────────── */ .site-nav__mobile-actions { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; } /* ── Hamburger button ─────────────────────────────────────────────────── */ .site-nav__toggle { background: none; border: none; padding: var(--space-2); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-primary); border-radius: var(--radius-md); transition: background var(--transition-base); } .site-nav__toggle:hover { background: var(--surface-secondary); } /* Three bars */ .site-nav__burger { display: flex; flex-direction: column; gap: var(--space-1); width: var(--space-6); } .site-nav__burger span { display: block; height: 2px; background: currentColor; border-radius: var(--radius-sm); transition: transform var(--transition-slow), opacity var(--transition-slow), width var(--transition-slow); transform-origin: center; } /* Morph to ✕ when open */ .site-header.nav-open .site-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.nav-open .site-nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); } .site-header.nav-open .site-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Menu nav links ───────────────────────────────────────────────────── */ .site-nav__mobile-menu ul { list-style: none; padding: 0; margin: 0 0 var(--space-6); } .site-nav__mobile-link, .site-nav__mobile-summary { padding: var(--space-4) var(--space-2); font-size: var(--font-size-lg);; font-weight: var(--font-weight-medium); color: var(--text-primary); text-decoration: none; border-bottom: var(--border-width-base) solid var(--border-subtle); opacity: 0; transform: translateY(-6px); transition: opacity var(--transition-base), transform var(--transition-base), color var(--transition-fast); } .site-nav__mobile-link { display: block; } .site-nav__mobile-link:hover, .site-nav__mobile-summary:hover { color: var(--text-link); } /* Staggered reveal when menu opens */ .site-nav__mobile-menu.nav-open .site-nav__mobile-link, .site-nav__mobile-menu.nav-open .site-nav__mobile-summary { opacity: 1; transform: translateY(0); } .site-nav__mobile-menu > ul > li:nth-child(1) .site-nav__mobile-link, .site-nav__mobile-menu > ul > li:nth-child(1) .site-nav__mobile-summary { transition-delay: 0.05s; } .site-nav__mobile-menu > ul > li:nth-child(2) .site-nav__mobile-link, .site-nav__mobile-menu > ul > li:nth-child(2) .site-nav__mobile-summary { transition-delay: 0.10s; } .site-nav__mobile-menu > ul > li:nth-child(3) .site-nav__mobile-link, .site-nav__mobile-menu > ul > li:nth-child(3) .site-nav__mobile-summary { transition-delay: 0.15s; } .site-nav__mobile-menu > ul > li:nth-child(4) .site-nav__mobile-link, .site-nav__mobile-menu > ul > li:nth-child(4) .site-nav__mobile-summary { transition-delay: 0.20s; } .site-nav__mobile-menu > ul > li:nth-child(5) .site-nav__mobile-link, .site-nav__mobile-menu > ul > li:nth-child(5) .site-nav__mobile-summary { transition-delay: 0.25s; } /* ── Book a demo CTA ──────────────────────────────────────────────────── */ .site-nav__mobile-cta { display: block; text-align: center; opacity: 0; transform: translateY(-6px); transition: opacity var(--transition-base) var(--transition-base), transform var(--transition-base) var(--transition-base); } .site-nav__mobile-menu.nav-open .site-nav__mobile-cta { opacity: 1; transform: translateY(0); } } /* ========================================================================== Logo marquee (Salix-style) — shared across all pages ========================================================================== */ .logo-marquee-section { padding: var(--space-12) 0 var(--space-10); background: transparent; overflow: hidden; } .logo-marquee__label { text-align: center; font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--text-primary); opacity: var(--opacity-70); margin-bottom: var(--space-6); } /* Centred window — logos scroll inside it */ .logo-marquee { max-width: var(--layout-lg); margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .logo-marquee__track { display: flex; align-items: center; gap: var(--space-8); /* Width will be set dynamically or allowed to overflow */ width: max-content; will-change: transform; animation: marquee-scroll 30s linear infinite; } .logo-marquee__track:hover { animation-play-state: paused; } .logo-marquee__track--static { justify-content: center; flex-wrap: wrap; width: 100%; } .site-nav__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; transition: opacity var(--transition-base); } .site-nav__logo:focus-visible { outline: var(--outline-width) solid var(--border-focus); outline-offset: 6px; border-radius: var(--radius-sm); } .site-nav__logo:focus-visible { outline: var(--outline-width) solid var(--border-focus); outline-offset: 6px; border-radius: var(--radius-sm); } .site-nav__link:focus-visible { outline: var(--outline-width) solid var(--border-focus); outline-offset: 6px; border-radius: var(--radius-sm); } .logo-marquee__item { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; opacity: var(--opacity-80); transition: opacity var(--transition-base); } .logo-marquee__item:hover { opacity: 1; } /* All logos the same rendered height */ .logo-marquee__item svg, .logo-marquee__item img { height: var(--space-8); width: auto; display: block; } .logo-marquee__item--placeholder { cursor: default; } @media (max-width: 900px) { .logo-marquee-section { overflow: hidden; } .logo-marquee { max-width: 100%; } } /* ── CTA Section (shared — home + pricing + other pages) ─────────────────── */ .cta-section { padding-block: var(--space-24); text-align: center; } .cta-section .container { max-width: var(--layout-md); } .cta-mockup-wrap { max-width: var(--layout-md); margin-inline: auto; margin-bottom: var(--space-10); } .cta-mockup { background: var(--surface-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); overflow: hidden; border: var(--border-width-base) solid var(--border-subtle); } .cta-mockup__body { display: flex; height: 240px; } .cta-mockup__sidebar { width: 140px; background: var(--surface-inverse); flex-shrink: 0; padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .cta-mockup__logo { height: var(--space-3); width: var(--space-20); background: var(--accent-primary); border-radius: var(--radius-sm); opacity: var(--opacity-80); margin-bottom: var(--space-4); } .cta-mockup__nav-item { height: var(--space-2); background: var(--surface-primary); border-radius: var(--radius-sm); opacity: var(--opacity-10); } .cta-mockup__nav-item--active { opacity: var(--opacity-40); background: var(--accent-primary); } .cta-mockup__main { flex: 1; background: var(--surface-secondary); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .cta-mockup__heading { height: var(--space-3); width: 50%; background: var(--surface-inverse); border-radius: var(--radius-sm); opacity: var(--opacity-10); } .cta-mockup__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .cta-mockup__card { background: var(--card-background); border-radius: var(--radius-lg); height: var(--space-16); box-shadow: var(--shadow-sm); } .cta-mockup__row { height: var(--space-2); background: var(--color-bg-brand-hovered); opacity: var(--opacity-10); border-radius: var(--radius-sm); } .cta-mockup__row--short { width: 60%; } .cta-section__logo { display: flex; justify-content: center; margin-bottom: var(--space-6); } .cta-logo-icon { width: var(--space-12); height: var(--space-12); display: flex; align-items: center; justify-content: center; color: var(--text-link); } .cta-section__title { font-size: var(--font-size-2xl); color: var(--text-primary); margin-bottom: var(--space-4); letter-spacing: var(--letter-spacing-tight); } .cta-section__body { font-size: var(--font-size-md); color: var(--text-secondary); margin-bottom: var(--space-8); opacity: var(--opacity-80); } .cta-section__actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; } /* ── Theme toggle FAB (fixed bottom-left) ─────────────────────────────────── */ .theme-toggle-fab { position: fixed; bottom: var(--space-6); left: var(--space-6); z-index: var(--z-index-overlay); width: var(--space-11); height: var(--space-11); min-width: 44px; min-height: 44px; border-radius: var(--radius-full); border: var(--border-width-md) solid rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--card-shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base) !important; } .theme-toggle-fab:hover { border-color: var(--border-focus); color: var(--text-link); box-shadow: var(--shadow-raised); } /* Custom Tooltip visible on hover and keyboard focus */ .theme-toggle-fab::after { content: attr(aria-label); position: absolute; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--surface-primary); color: var(--text-primary); padding: var(--space-1) var(--space-2); border: var(--border-width-base) solid var(--border-subtle); border-radius: var(--radius-base); font-size: var(--font-size-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast); box-shadow: var(--shadow-sm); font-family: var(--font-family-body); font-weight: var(--font-weight-medium); } .theme-toggle-fab:hover::after, .theme-toggle-fab:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* Show moon (→ switch to dark) in light mode */ .theme-toggle-fab .icon-sun { display: none; } .theme-toggle-fab .icon-moon { display: block; } /* Show sun (→ switch to light) in dark mode */ /* ── Dropdown panel — dark mode ──────────────────────────────────────────── */ /* Duplicate mega menu block successfully cleared */ /* ── Alert Banner (Test Component for ui-consistency) ─────────────────────── */ .alert-banner { background-color: var(--toast-background-info); border: var(--border-width-base) solid var(--toast-border-info); border-radius: var(--toast-radius); padding: var(--toast-padding-block) var(--toast-padding-inline); margin-bottom: var(--space-4); } .alert-banner__inner { display: flex; align-items: center; gap: var(--space-3); } .alert-banner__icon { width: var(--space-5); height: var(--space-5); color: var(--toast-icon-info); flex-shrink: 0; } .alert-banner__text { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--toast-text-body); line-height: var(--line-height-snug); } /* ── Service CTA (Consultative bottom funnel module) ──────────────────── */ .service-cta { background: var(--surface-secondary); padding: var(--space-20) 0; text-align: center; border-top: var(--border-width-base) solid var(--border-subtle); } .service-cta__inner { max-width: var(--layout-md); margin: 0 auto; } .service-cta__actions { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; } .alert-banner--info { border-left: var(--border-width-2xl) solid var(--toast-border-info); } .alert-banner--warning { border-left: var(--border-width-2xl) solid var(--toast-border-warning); } .alert-banner--success { border-left: var(--border-width-2xl) solid var(--toast-border-success); } .alert-banner--error { border-left: var(--border-width-2xl) solid var(--toast-border-danger); } /* ── User Request: All hero images should have rounded corners ── */ .home-hero__image, .solutions-hero__illustration, .solutions-hero__mockup img, .story-hero__image img { border-radius: var(--radius-xl) !important; overflow: hidden; } /* ── UI Consistency Phase 1 Sweep ── */ .site-footer__legal-text { color: var(--color-footer-text-dim); } .btn--inverse { background-color: var(--text-inverse); color: var(--text-link); border-color: var(--text-inverse); } .btn--inverse:hover { background-color: var(--surface-secondary); border-color: var(--surface-secondary); color: var(--text-link); } .btn--inverse-outline { color: var(--text-inverse); border-color: rgba(255, 255, 255, 0.3); } .btn--inverse-outline:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--text-inverse); } /* Base utilities used occasionally across custom layouts */ .text-center { text-align: center; } .justify-center { justify-content: center; } .placeholder-spacer { height: 40vh; } .modal-skip { margin-top: var(--space-6); text-align: center; } .modal-skip__btn { background: none; border: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); text-decoration: underline; cursor: pointer; padding: var(--space-2); } /* -- Feature Card ----------------------------------------------------------- */ .feat-card { background: var(--card-background); border: var(--border-width-base) solid var(--border-default); border-radius: var(--card-radius); padding: var(--card-padding-block) var(--card-padding-inline) var(--space-6); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: var(--space-4); transition: transform var(--transition-slow), box-shadow var(--transition-slow); } \.feat-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-4px); border-color: var(--color-border-hovered); } .feat-card__icon { display: flex; align-items: center; justify-content: center; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-lg); background: var(--surface-secondary); color: var(--text-secondary); flex-shrink: 0; } .feat-card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--text-primary); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-normal); margin: 0; } .feat-card__body, .feat-card__desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-height-relaxed); margin: 0; flex: 1; }