diff --git a/.github/workflows/build-preview.yml b/.github/workflows/build-preview.yml index a4df268..77742d9 100644 --- a/.github/workflows/build-preview.yml +++ b/.github/workflows/build-preview.yml @@ -9,7 +9,7 @@ jobs: runs-on: ubuntu-latest name: Build Preview Site and Upload Build Artifact env: - HUGO_VERSION: 0.143.1 + HUGO_VERSION: 0.161.1 steps: - name: Install Hugo CLI run: | diff --git a/.github/workflows/hugo.yml b/.github/workflows/hugo.yml index 5a81142..a4c8e67 100644 --- a/.github/workflows/hugo.yml +++ b/.github/workflows/hugo.yml @@ -32,7 +32,7 @@ jobs: build: runs-on: ubuntu-latest env: - HUGO_VERSION: 0.143.1 + HUGO_VERSION: 0.161.1 steps: - name: Install Hugo CLI run: | diff --git a/.gitignore b/.gitignore index 7ee0891..b17f5f5 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,7 @@ /public/ .DS_Store .direnv +.claude +.idea +/relaunch/ +/CLAUDE.md diff --git a/.hugo-version b/.hugo-version new file mode 100644 index 0000000..e7fa6f1 --- /dev/null +++ b/.hugo-version @@ -0,0 +1 @@ +0.161.1 diff --git a/assets/css/base.css b/assets/css/base.css new file mode 100644 index 0000000..faa9c02 --- /dev/null +++ b/assets/css/base.css @@ -0,0 +1,294 @@ +/* ===================================================================== + BRAND IDENTITY + + Three brand colors, defined by the logo + (`static/images/peakscale-logo*.svg`): + + Dark blue #091836 rgb(9, 24, 54) → --dark-blue + Bright blue #0580c4 rgb(5, 128, 196) → --bright-blue + White #ffffff → --bg-white + + Everything else is supportive palette — keeps the page readable and + gives cards their lift, but is not part of the brand identity. Use + sparingly. + ===================================================================== */ + +:root { + /* Page surfaces */ + --bg: rgb(240, 248, 252); /* icy blue-white page bg */ + --bg-white: rgb(255, 255, 255); /* [BRAND] white */ + + /* Brand blues */ + --dark-blue: rgb(9, 24, 54); /* [BRAND] display, dark surfaces, hover ink */ + --bright-blue: rgb(5, 128, 196); /* [BRAND] eyebrows, dots, links, primary buttons */ + + /* Supporting greys */ + --fg-muted: rgb(81, 87, 99); /* body copy */ + --fg-subtle: rgb(165, 171, 183); /* meta */ + + /* Hairlines */ + --border: rgb(208, 214, 227); + --border-faint: rgba(208, 214, 227, .5); + + /* Dark sections */ + --stroke-on-dark: rgba(255, 255, 255, .16); + --text-on-dark: rgba(255, 255, 255, .78); + --accent-on-dark: rgb(122, 192, 232); /* lighter blue for eyebrows / meta */ + + /* Accents (small dosage: checkmarks, tags, status, illustration details) */ + --accent-yellow: rgb(232, 184, 60); /* warm honey / amber */ + --accent-yellow-soft: rgb(252, 238, 180); /* pale wash */ + --accent-green: rgb(125, 175, 75); /* fresh grass */ + --accent-green-soft: rgb(228, 240, 210); /* pale wash */ + + /* Photo overlay — subtle navy → blue wash applied above section + background-images so the photo stays readable. Used inline in + templates as the first layer of `background-image`. */ + --overlay-photo: linear-gradient(135deg, rgba(7,19,44,.4), rgba(5,128,196,.2)); + + /* Shadows */ + --shadow-brand: 0 3px 6px 0 rgba(5, 128, 196, .10), + 0 11px 11px 0 rgba(5, 128, 196, .09), + 0 24px 14px 0 rgba(5, 128, 196, .05), + 0 43px 17px 0 rgba(5, 128, 196, .01); + --shadow-float: 0 8px 24px -8px rgba(9, 24, 54, .18), + 0 2px 8px -2px rgba(9, 24, 54, .08); + --shadow-soft: 0px 6px 12px rgba(9, 24, 54, .05); +} + +/* ---------- Typography ---------- */ + +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,200;9..40,300;9..40,400;9..40,500;9..40,700;9..40,900&family=Inter:wght@400;600;700&display=swap'); + +:root { + --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, sans-serif; + --font-ui: 'Inter', system-ui, sans-serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + + /* 7-step type scale. Display sizes scale fluidly; the rest are fixed. + Pull-quote / lifecycle stage / prose h2 collapse into title-lg. */ + --text-display: clamp(40px, 5.6vw, 72px); /* hero only */ + --text-display-sm: clamp(28px, 3.4vw, 48px); /* section headings */ + --text-title-lg: 22px; /* feature cards, pull quote */ + --text-title: 18px; /* all card h3 */ + --text-body: 16px; /* body, hero lead, lead */ + --text-sm: 14px; /* descriptions, captions */ + --text-eyebrow: 12px; /* uppercase labels, nav, micro */ + + --w-extralight: 200; + --w-light: 300; + --w-regular: 400; + --w-medium: 500; + --w-bold: 700; + --w-black: 900; + + --leading-display: 1.1; + --leading-tight: 1.2; + --leading-snug: 1.4; + --leading-normal: 1.6; + + --tracking-tight: -0.02em; + --tracking-eyebrow: 0.1em; +} + +/* ---------- Spacing, radius ---------- */ + +:root { + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + --space-16: 64px; + --space-20: 80px; + --space-24: 96px; + --space-30: 120px; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-xl: 24px; + --radius-pill: 60px; + --radius-full: 9999px; + + --layout-max: 1200px; + --layout-gutter: 360px; +} + +/* ---------- Element styles ---------- */ + +html, body { + font-family: var(--font-sans); + font-size: var(--text-body); + line-height: var(--leading-normal); + color: var(--dark-blue); + background: var(--bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, .h1 { + font-family: var(--font-sans); + font-size: var(--text-display); + font-weight: var(--w-medium); + line-height: var(--leading-display); + letter-spacing: var(--tracking-tight); + color: var(--dark-blue); + margin: 0 0 var(--space-6); + text-wrap: balance; +} + +h2, .h2, .display-xl { + font-size: var(--text-display-sm); + font-weight: var(--w-medium); + line-height: var(--leading-tight); + letter-spacing: var(--tracking-tight); + margin: 0 0 var(--space-6); + text-wrap: balance; +} + +h3, .h3 { + font-size: var(--text-title); + font-weight: var(--w-medium); + line-height: var(--leading-tight); + margin: 0 0 var(--space-4); +} + +h4, .h4 { + font-size: var(--text-title-lg); + font-weight: var(--w-medium); + line-height: var(--leading-tight); + margin: 0 0 var(--space-3); +} + +.lead { + font-size: var(--text-body); + font-weight: var(--w-regular); + line-height: var(--leading-normal); + color: var(--fg-muted); +} + +p, .body { + font-size: var(--text-body); + line-height: var(--leading-snug); + color: var(--fg-muted); + margin: 0 0 var(--space-4); + text-wrap: pretty; +} + +.eyebrow { + font-family: var(--font-ui); + font-size: var(--text-eyebrow); + font-weight: var(--w-bold); + text-transform: uppercase; + letter-spacing: var(--tracking-eyebrow); + color: var(--bright-blue); + display: inline-block; +} + +.mono, code, kbd, samp, pre { + font-family: var(--font-mono); + font-size: .9em; +} + +a { + color: inherit; + text-decoration: none; + transition: color .18s ease, opacity .18s ease; +} + +a:hover { + color: var(--bright-blue); +} + +hr { + border: 0; + border-top: 1px solid var(--border); + margin: var(--space-12) 0; +} + +/* ---------- Re-usable element classes ---------- */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 14px 28px; + border-radius: var(--radius-pill); + font-family: var(--font-sans); + font-size: var(--text-sm); + font-weight: var(--w-medium); + line-height: 1; + border: 1px solid transparent; + cursor: pointer; + transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease; + white-space: nowrap; +} + +.btn:active { + transform: scale(.98); +} + +.btn--primary { + background: var(--bright-blue); + color: var(--bg-white); +} + +.btn--primary:hover { + background: var(--dark-blue); +} + +.btn--inverse { + background: var(--bg-white); + color: var(--bright-blue); + border-color: var(--bg-white); +} + +.btn--inverse:hover { + background: var(--bg); +} + +.btn--ghost { + background: transparent; + color: var(--dark-blue); + border-color: var(--border); +} + +.btn--ghost:hover { + border-color: var(--bright-blue); + color: var(--bright-blue); +} + +.card { + background: var(--bg-white); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: var(--space-8); + box-shadow: var(--shadow-brand); + transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; +} + +a.card { + color: inherit; + text-decoration: none; +} + +a.card:hover, +.card:has(a):hover { + transform: translateY(-2px); + border-color: var(--bright-blue); +} + +.dot-square { + display: inline-block; + width: 6px; + height: 6px; + background: var(--bright-blue); + transform: rotate(45deg); + border-radius: 2px; + vertical-align: middle; +} diff --git a/assets/css/site.css b/assets/css/site.css new file mode 100644 index 0000000..b9c89af --- /dev/null +++ b/assets/css/site.css @@ -0,0 +1,1269 @@ +/* Peak Scale — site styles. base.css is concatenated ahead of this file. */ + +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { margin: 0; min-height: 100vh; } + +img, svg, video { max-width: 100%; height: auto; display: block; } +ul.reset, ol.reset { list-style: none; padding: 0; margin: 0; } + +.sr-only { + position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; + overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; +} + +.skip-link { + position: absolute; left: 16px; top: -100px; z-index: 100; + background: var(--bright-blue); color: #fff; padding: 12px 18px; + border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; +} +.skip-link:focus { top: 16px; } + +:focus-visible { + outline: 2px solid var(--bright-blue); + outline-offset: 3px; + border-radius: 4px; +} + +/* ---------- Layout ---------- */ + +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding-left: clamp(20px, 4vw, 40px); + padding-right: clamp(20px, 4vw, 40px); +} + +.section { + padding: clamp(56px, 8vw, 120px) 0; +} +.section--alt { + background: var(--bg-white); + border-top: 1px solid var(--border-faint); + border-bottom: 1px solid var(--border-faint); +} +.section--dark { + background: var(--dark-blue); + color: #fff; + position: relative; + overflow: hidden; +} +.section--dark .eyebrow { color: var(--accent-on-dark); } +.section--dark p { color: var(--text-on-dark); } +.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } +.section--dark .lead { color: var(--text-on-dark); } + +.section__head { + max-width: 760px; + margin: 0 auto var(--space-12); + text-align: center; +} +.section__head--left { + margin-left: 0; + margin-right: auto; + text-align: left; +} +.section__head .eyebrow { margin-bottom: var(--space-4); } +.section__head .lead { + margin: var(--space-4) auto 0; + max-width: 640px; +} +.section__head--left .lead { margin-left: 0; margin-right: 0; } +.section__head h2 { text-wrap: balance; } + +.section__icon { + width: 56px; height: 56px; border-radius: 9999px; + background: rgba(5, 128, 196, .08); color: var(--bright-blue); + display: inline-flex; align-items: center; justify-content: center; + margin-bottom: var(--space-4); +} +.section--dark .section__icon { + background: rgba(255,255,255,.08); color: var(--accent-on-dark); +} + +/* ---------- Grids ---------- */ + +.grid { + display: grid; + gap: var(--space-6); +} +.grid--2 { grid-template-columns: repeat(2, 1fr); } +.grid--3 { grid-template-columns: repeat(3, 1fr); } +.grid--4 { grid-template-columns: repeat(4, 1fr); } +.grid--5 { grid-template-columns: repeat(5, 1fr); } + +@media (max-width: 960px) { + .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); } +} +@media (max-width: 600px) { + .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; } +} + +/* ---------- Header (floating pill) ---------- */ + +.site-header { + position: sticky; + top: 16px; + z-index: 30; + padding: 0 16px; + margin-top: 16px; +} +.site-header__pill { + max-width: 1140px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 12px 22px; + border-radius: var(--radius-pill); + background: var(--text-on-dark); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid var(--border-faint); + box-shadow: var(--shadow-float); +} +.site-header__brand { + display: flex; align-items: center; + color: var(--dark-blue); + flex-shrink: 0; +} +.site-header__brand:hover { color: var(--dark-blue); } +.site-header__brand img { + height: 30px; width: auto; display: block; +} + +.site-header__nav { + display: flex; align-items: center; gap: 14px; +} +.site-header__nav a { + font-size: var(--text-eyebrow); font-weight: 600; color: var(--fg-muted); + text-transform: uppercase; letter-spacing: 0.08em; + padding: 4px 0; transition: color .18s ease; +} +.site-header__nav a:hover { color: var(--bright-blue); } +.site-header__nav a.is-active { color: var(--bright-blue); } + +.site-header__actions { + display: flex; align-items: center; gap: 12px; +} + +.lang-switch { + display: inline-flex; align-items: center; + background: var(--bg); border-radius: 9999px; padding: 2px; +} +.lang-switch a { + padding: 4px 12px; font-size: var(--text-eyebrow); font-weight: 500; + border-radius: 9999px; color: var(--fg-muted); + transition: background .18s ease, color .18s ease; +} +.lang-switch a.is-active { + background: #fff; color: var(--bright-blue); box-shadow: var(--shadow-soft); +} + +.site-header__menu-toggle { + display: none; + border: 0; background: transparent; padding: 6px; cursor: pointer; + color: var(--dark-blue); +} + +@media (max-width: 860px) { + .site-header__nav, + .site-header__actions .lang-switch { display: none; } + .site-header__menu-toggle { display: inline-flex; } +} + +/* ---------- Mobile menu overlay ---------- */ + +.mobile-menu { + position: fixed; inset: 0; z-index: 60; + background: var(--bg); + padding: 24px; + display: flex; flex-direction: column; +} +.mobile-menu[hidden] { display: none; } +.mobile-menu__head { + display: flex; justify-content: space-between; align-items: center; + margin-bottom: 48px; +} +.mobile-menu__close { + border: 0; background: transparent; cursor: pointer; color: var(--dark-blue); + padding: 6px; +} +.mobile-menu__list { + list-style: none; padding: 0; margin: 0; + display: flex; flex-direction: column; gap: 4px; +} +.mobile-menu__list a { + font-size: var(--text-title-lg); font-weight: 500; color: var(--dark-blue); + display: inline-block; padding: 8px 0; +} +.mobile-menu__list a.is-active { color: var(--bright-blue); } +.mobile-menu__footer { + margin-top: auto; display: flex; flex-direction: column; gap: 16px; + padding-top: 24px; border-top: 1px solid var(--border); +} + +/* ---------- Floating contact button ---------- */ + +.contact-fab { + position: fixed; right: 22px; bottom: 22px; z-index: 40; + width: 56px; height: 56px; border-radius: 9999px; border: 0; cursor: pointer; + background: var(--bright-blue); color: #fff; + box-shadow: var(--shadow-float); + display: flex; align-items: center; justify-content: center; + text-decoration: none; + transition: background .2s ease, transform .1s ease; +} +.contact-fab:hover { background: var(--dark-blue); color: #fff; } +.contact-fab:active { transform: scale(.96); } + +@supports (padding: env(safe-area-inset-bottom)) { + .contact-fab { + bottom: calc(22px + env(safe-area-inset-bottom)); + right: calc(22px + env(safe-area-inset-right)); + } +} + +/* ---------- Hero (centered) ---------- */ + +.hero { + position: relative; + padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 6vw, 80px); + text-align: center; + overflow: hidden; +} +.hero::before { + content: ""; + position: absolute; + top: 44%; + left: 58%; + width: 1750px; + aspect-ratio: 177 / 91; + transform: translate(-50%, -50%); + background: url('/images/peakscale-watermark.svg') center / contain no-repeat; + pointer-events: none; + z-index: 0; +} +.hero__inner, .hero > .container { position: relative; z-index: 1; } +.hero__inner { + max-width: 880px; + margin: 0 auto; +} +.hero__title { + font-size: var(--text-display); + line-height: 1.05; + font-weight: 500; + letter-spacing: -0.02em; + margin: 0 0 var(--space-6); + color: var(--dark-blue); + text-wrap: balance; +} +.hero__lead { + margin: 0 auto var(--space-6); + max-width: 640px; + font-size: var(--text-body); + line-height: 1.6; + color: var(--fg-muted); +} +.hero__kicker { + display: inline-block; + margin: 0 auto var(--space-8); + padding: 8px 18px; + background: var(--bg-white); + border-radius: var(--radius-pill); + font-family: var(--font-ui); + font-size: var(--text-eyebrow); font-weight: 700; + text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); + color: var(--bright-blue); +} +.hero__ctas { + display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; + margin-top: var(--space-2); +} +.hero__ctas .btn { + padding: 14px 28px; + text-transform: uppercase; + letter-spacing: 0.06em; + font-size: var(--text-eyebrow); + font-weight: 700; +} +/* Match the .next-steps__cta arrow badge so the home-hero CTA reads as the + same component family: colored circle with white arrow at the end of the + pill. Inside the bright-blue primary button we use --dark-blue so the + circle has contrast against the button background. */ +.hero__ctas .btn--primary svg { + background: var(--dark-blue); border-radius: 9999px; padding: 4px; + width: 22px; height: 22px; color: #fff; +} + +/* ---------- Accent helper for partial heading words ---------- */ +.accent { + color: var(--bright-blue); +} +.section--dark .accent, +.next-steps .accent { color: var(--accent-on-dark); } + +.hero-photo { + margin: clamp(32px, 5vw, 56px) auto 0; + max-width: 1200px; + border-radius: var(--radius-lg); + overflow: hidden; + position: relative; + aspect-ratio: 16/7; + background-size: cover; background-position: center; + box-shadow: var(--shadow-soft); +} +.hero-photo__svg { position: absolute; inset: 0; width: 100%; height: 100%; } + +.hero-photo__tags { + position: absolute; inset: 0; + pointer-events: none; +} +.hero-photo__tag { + position: absolute; + background: rgba(255,255,255,.92); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + padding: 10px 18px; + border-radius: var(--radius-pill); + font-size: var(--text-sm); font-weight: 500; color: var(--dark-blue); + box-shadow: var(--shadow-soft); + white-space: nowrap; +} +.hero-photo__tag--1 { top: 10%; left: 42%; } +.hero-photo__tag--4 { top: 70%; right: 4%; } +.hero-photo__tag--2 { top: 35%; right: 20%; } +.hero-photo__tag--3 { bottom: 28%; left: 10%; } +@media (max-width: 720px) { + .hero-photo__tag { font-size: var(--text-eyebrow); padding: 6px 12px; } +} + +/* ---------- Cards ---------- */ + +.card h3 { font-size: var(--text-title); font-weight: 500; margin: 0 0 10px; color: var(--dark-blue); } +.card p { font-size: var(--text-sm); color: var(--fg-muted); margin: 0 0 18px; line-height: 1.55; } +.card .card__link { + font-size: var(--text-sm); font-weight: 500; color: var(--bright-blue); + display: inline-flex; align-items: center; gap: 6px; +} +.card .card__link:hover { color: var(--dark-blue); } + +.card__icon { + display: inline-flex; align-items: center; justify-content: center; + width: 52px; height: 52px; margin-bottom: 18px; + color: var(--bright-blue); +} +.card__icon svg { stroke-width: 1.5; } + +/* ---------- Why grid (6 tiles, 3 columns; first card featured & dark with topo image) ---------- */ + +.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } +.why-grid--2 { grid-template-columns: repeat(2, 1fr); } +@media (max-width: 960px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } +@media (max-width: 560px) { + .why-grid, .why-grid--2 { grid-template-columns: 1fr; } + .why-grid > .card { min-height: 280px; } +} + +.why-grid .card--feature { + background: linear-gradient(160deg, var(--dark-blue) 0%, rgba(5,128,196,.25) 100%); + color: #fff; + position: relative; + overflow: hidden; + border-color: transparent; +} +/* Image fills the full card; headline overlays the upper area (where the + source image is dark and blends into the gradient). */ +.why-grid .card--feature h3 { + position: relative; + z-index: 1; + color: #fff; + font-weight: 400; + line-height: 1.3; +} +.why-grid .card--feature h3 strong { font-weight: 700; color: #fff; } +.why-grid .card--feature p { position: relative; z-index: 1; color: var(--text-on-dark); } +.why-grid .card--feature::after { + content: ""; + position: absolute; + inset: 0; + background: var(--feature-image) center calc(100% + 150px) / 120% auto no-repeat; + mix-blend-mode: screen; + filter: saturate(1.4) brightness(1.15); + pointer-events: none; +} + +/* ---------- Lifecycle: horizontal arrow path ---------- */ + +.lifecycle-path { + display: flex; align-items: center; justify-content: center; + flex-wrap: wrap; + gap: var(--space-3) var(--space-4); + font-family: var(--font-ui); + font-size: var(--text-sm); font-weight: 700; + letter-spacing: var(--tracking-eyebrow); + text-transform: uppercase; + color: var(--bright-blue); +} +.lifecycle-path__step { white-space: nowrap; } +.lifecycle-path__arrow { + color: var(--bright-blue); opacity: .6; + font-family: var(--font-sans); font-weight: 400; +} + +/* ---------- Customer logo carousel (boxed tiles, JS-scrolled, arrows) ---------- */ + +.logo-carousel { + position: relative; + padding: var(--space-6) 56px; /* leave room for the arrow buttons */ +} +.logo-carousel__viewport { + overflow: hidden; + /* Vertical slack so the tile's translateY(-2px) hover lift and its + top border aren't clipped by the overflow boundary. */ + padding: 6px 0; + /* Fade edges into the section background */ + -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); + mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); +} +.logo-carousel__track { + display: flex; + gap: var(--space-4); + transform: translateX(0); + transition: transform .5s ease; + will-change: transform; +} +@media (prefers-reduced-motion: reduce) { + .logo-carousel__track { transition: none; } +} + +.logo-carousel__nav { + position: absolute; + top: 50%; transform: translateY(-50%); + z-index: 2; + width: 44px; height: 44px; padding: 0; + border-radius: 9999px; + background: var(--bg-white); + border: 1px solid var(--border); + color: var(--bright-blue); + font-size: 20px; line-height: 1; + cursor: pointer; + box-shadow: var(--shadow-soft); + display: inline-flex; align-items: center; justify-content: center; + transition: border-color .2s ease, color .2s ease, transform .1s ease; +} +.logo-carousel__nav:hover { border-color: var(--bright-blue); color: var(--dark-blue); } +.logo-carousel__nav:active { transform: translateY(-50%) scale(.96); } +.logo-carousel__nav--prev { left: 0; } +.logo-carousel__nav--next { right: 0; } + +.logo-tile { + flex: 0 0 auto; + display: inline-flex; align-items: center; justify-content: center; + width: 220px; height: 110px; + /* Generous, even padding on all sides — this is the visible + "border" around every logo. Each logo then fills the full + interior so the surrounding whitespace is consistent regardless + of the logo's aspect ratio. */ + padding: 18px 32px; + background: var(--bg-white); + border: 1px solid var(--border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-soft); + transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; +} +.logo-tile:hover { + border-color: var(--bright-blue); + transform: translateY(-2px); + box-shadow: var(--shadow-float); +} +/* Each img fills the entire tile interior; object-fit: contain then + scales the SVG to the largest size that fits, so portrait marks + (BFH) and landscape marks (Mobiliar) both reach an edge of the + interior box. */ +.logo-tile img { + width: 100%; + height: 100%; + object-fit: contain; + filter: grayscale(1); + opacity: .65; + transition: filter .2s ease, opacity .2s ease; +} +.logo-tile:hover img { filter: none; opacity: 1; } + +@media (max-width: 560px) { + .logo-tile { width: 180px; height: 90px; padding: 14px 24px; } +} + +/* ---------- Partner logos (4 plain tiles, large logo) ---------- */ + +/* Partner logos: same tile treatment as the customer logo strip but as a + static centered grid (no carousel). Uniform 220×110 white cards so each + logo's surrounding whitespace is consistent regardless of aspect ratio. */ +.partner-logos { + display: grid; + grid-template-columns: repeat(4, 220px); + gap: var(--space-6); + justify-content: center; + align-items: center; + padding: var(--space-8) 0; +} +.partner-logos__item { + display: inline-flex; align-items: center; justify-content: center; + width: 220px; height: 110px; + padding: 18px 32px; + background: var(--bg-white); + border: 1px solid var(--border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-soft); + transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; +} +.partner-logos__item:hover { + border-color: var(--bright-blue); + transform: translateY(-2px); + box-shadow: var(--shadow-float); +} +.partner-logos__item img { + width: 100%; + height: 100%; + object-fit: contain; + filter: grayscale(1); + opacity: .65; + transition: filter .2s ease, opacity .2s ease; +} +.partner-logos__item:hover img { filter: none; opacity: 1; } + +@media (max-width: 960px) { .partner-logos { grid-template-columns: repeat(2, 220px); } } +@media (max-width: 480px) { + .partner-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } + .partner-logos__item { width: 100%; height: 90px; padding: 14px 20px; } +} + +/* ---------- Testimonial (centered with chevrons) ---------- */ + +.testimonial-carousel { + position: relative; + max-width: 880px; margin: 0 auto; + text-align: center; + padding: var(--space-8) 0; +} +.testimonial-carousel__bg { + position: absolute; inset: 0; + background: radial-gradient(circle at center, rgba(5,128,196,.08) 0%, transparent 70%); + pointer-events: none; + z-index: 0; +} +.testimonial-carousel__bg::before, +.testimonial-carousel__bg::after { + content: ""; position: absolute; left: 50%; top: 50%; + border: 1px solid rgba(5,128,196,.12); border-radius: 50%; + transform: translate(-50%,-50%); +} +.testimonial-carousel__bg::before { width: 360px; height: 360px; } +.testimonial-carousel__bg::after { width: 580px; height: 580px; } + +.testimonial-carousel__viewport { position: relative; z-index: 1; min-height: 200px; padding: 0 56px; } +.testimonial { margin: 0; } +.testimonial__quote { + margin: 0; + font-size: var(--text-title-lg); + line-height: 1.45; color: var(--dark-blue); font-weight: 400; + font-style: italic; +} +.testimonial__quote::before { content: "“"; } +.testimonial__quote::after { content: "”"; } +.section--dark .testimonial__quote { color: #fff; } +.testimonial__cite { margin-top: 24px; font-size: var(--text-sm); color: var(--fg-muted); } +.section--dark .testimonial__cite { color: var(--text-on-dark); } + +.testimonial-carousel__nav { + position: absolute; top: 50%; transform: translateY(-50%); + background: var(--bright-blue); border: 1px solid var(--bright-blue); + width: 56px; height: 56px; border-radius: 9999px; + display: inline-flex; align-items: center; justify-content: center; + color: #fff; cursor: pointer; padding: 0; + font-size: 22px; line-height: 1; + z-index: 2; + box-shadow: var(--shadow-soft); + transition: background .2s ease, transform .1s ease; +} +.testimonial-carousel__nav:hover { background: var(--dark-blue); border-color: var(--dark-blue); color: #fff; } +.testimonial-carousel__nav:active { transform: translateY(-50%) scale(.96); } +.testimonial-carousel__nav--prev { left: 0; } +.testimonial-carousel__nav--next { right: 0; } + +.testimonial-carousel__dots { + display: flex; gap: 8px; margin-top: 28px; justify-content: center; + position: relative; z-index: 1; +} +.testimonial-carousel__dots button { + width: 8px; height: 8px; border-radius: 9999px; + background: rgba(165,171,183,.4); border: 0; padding: 0; cursor: pointer; + transition: all .2s ease; +} +.testimonial-carousel__dots button.is-active { + width: 24px; background: var(--bright-blue); border-radius: 4px; +} + +/* Yellow side-card testimonial (Services page) */ +.testimonial-side { + background: var(--accent-yellow-soft); + border-radius: var(--radius-lg); + padding: var(--space-8); + border: 1px solid rgba(184,169,120,.3); + position: relative; + display: flex; flex-direction: column; gap: var(--space-3); + margin: 0; +} +.testimonial-side__mark { + font-family: Georgia, serif; font-size: 64px; line-height: 1; + color: rgba(184,169,120,.5); + position: absolute; top: 8px; left: 16px; +} +.testimonial-side__quote { + margin: 0; font-style: italic; font-size: var(--text-body); line-height: 1.55; + color: var(--dark-blue); position: relative; z-index: 1; + margin-top: 28px; +} +.testimonial-side__cite { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; } + +.tag-arbeitsweise { + background: var(--accent-green-soft); + border-radius: var(--radius-md); + padding: var(--space-4) var(--space-6); + border: 1px solid rgba(144,202,125,.3); + font-size: var(--text-sm); color: var(--dark-blue); +} +.tag-arbeitsweise strong { color: var(--dark-blue); display: block; margin-bottom: 4px; } + +/* ---------- Lifecycle rows (dark, 4 horizontal rows with image + text) ---------- */ + +.lifecycle-rows { display: flex; flex-direction: column; gap: var(--space-6); } +.lifecycle-rows__row { + display: grid; + grid-template-columns: 200px 1fr 1fr; + gap: var(--space-6); + align-items: stretch; +} +.lifecycle-rows__title { + font-size: var(--text-title-lg); font-weight: 500; color: #fff; + letter-spacing: -0.01em; margin: 0; line-height: 1.2; + align-self: center; +} +.lifecycle-rows__media { + aspect-ratio: 16/10; + border-radius: var(--radius-lg); + background: linear-gradient(135deg, rgba(5,128,196,.4) 0%, rgba(9,24,54,.85) 100%); + background-size: cover; background-position: center; + border: 1px solid var(--stroke-on-dark); +} +@media (max-width: 760px) { + .lifecycle-rows__row { grid-template-columns: 1fr; } + .lifecycle-rows__media { display: none; } +} + +/* ---------- Glass challenges card ---------- */ + +.challenges-glass { + position: relative; + border-radius: var(--radius-lg); + overflow: hidden; + background: var(--dark-blue); + min-height: 360px; + padding: clamp(32px, 5vw, 64px); + color: #fff; +} +.challenges-glass__bg { + position: absolute; inset: 0; z-index: 0; + background-image: linear-gradient(135deg, rgba(7,19,44,.85) 0%, rgba(5,128,196,.4) 100%), + var(--challenges-bg, none); + background-size: cover; background-position: center; +} +.challenges-glass__inner { position: relative; z-index: 1; } +.challenges-glass__item { + background: rgba(255,255,255,.06); + border: 1px solid rgba(255,255,255,.12); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: var(--radius-md); + padding: var(--space-6); +} +.challenges-glass__item h3 { font-size: var(--text-title); font-weight: 500; color: #fff; margin: 0 0 10px; } +.challenges-glass__item p { font-size: var(--text-sm); color: var(--text-on-dark); margin: 0; line-height: 1.55; } + +/* Split variant: heading on the left, stacked cards on the right */ +.challenges-glass--split { padding: clamp(40px, 5vw, 72px); min-height: 420px; } +.challenges-glass__inner--split { + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: clamp(32px, 5vw, 64px); + align-items: start; +} +.challenges-glass__intro h2 { + font-size: var(--text-display-sm); + line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; + margin: 0 0 var(--space-4); +} +.challenges-glass__intro .lead { margin: 0; color: var(--text-on-dark); } +.challenges-glass__stack { display: flex; flex-direction: column; gap: var(--space-3); } +.challenges-glass__stack .challenges-glass__item { padding: 20px var(--space-6); } +.challenges-glass__item--featured { + background: rgba(255,255,255,.94); + border-color: rgba(255,255,255,.94); +} +.challenges-glass__item--featured h3 { color: var(--dark-blue); } +.challenges-glass__item--featured p { color: var(--fg-muted); } +@media (max-width: 860px) { + .challenges-glass__inner--split { grid-template-columns: 1fr; } +} + +/* ---------- Next-step cross-link cards (dark gradient) ---------- */ + +.next-steps { + display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); +} +@media (max-width: 760px) { .next-steps { grid-template-columns: 1fr; } } + +/* Mosaic variant: 1 large primary on the left, 2 stacked variants on the right */ +.next-steps--mosaic { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: var(--space-6); + max-width: 980px; margin: 0 auto; +} +.next-steps--mosaic .next-steps__card--primary { + grid-row: 1 / span 2; +} +@media (max-width: 760px) { + .next-steps--mosaic { grid-template-columns: 1fr; grid-template-rows: auto; } + .next-steps--mosaic .next-steps__card--primary { grid-row: auto; } +} + +.next-steps__card { + display: flex; flex-direction: column; gap: var(--space-4); + padding: var(--space-12) var(--space-8); + background: linear-gradient(160deg, var(--dark-blue) 0%, rgba(5,128,196,.55) 100%); + border: 1px solid rgba(255,255,255,.1); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-soft); + color: #fff; + position: relative; + overflow: hidden; + transition: transform .2s ease, border-color .2s ease; + min-height: 260px; +} +.next-steps__card--gold { + background: linear-gradient(135deg, rgba(184,169,120,.85) 0%, rgba(167,154,110,.95) 100%); + border-color: rgba(252,238,180,.35); +} +.next-steps__card--sage { + background: linear-gradient(135deg, rgba(80,140,90,.95) 0%, rgba(120,170,110,.85) 100%); + border-color: rgba(228,240,210,.35); +} +.next-steps__card::after { + content: ""; position: absolute; right: -20%; top: -20%; + width: 240px; height: 240px; + background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%); + pointer-events: none; +} +.next-steps__card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.45); color: #fff; } +.next-steps__eyebrow { + display: inline-block; + font-family: var(--font-ui); font-size: var(--text-eyebrow); font-weight: 700; + letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; + color: var(--accent-on-dark); + background: rgba(122,192,232,.12); + padding: 4px 12px; border-radius: var(--radius-sm); + align-self: flex-start; + border: 1px solid rgba(122,192,232,.3); +} +.next-steps__card--gold .next-steps__eyebrow { + color: var(--accent-yellow-soft); background: rgba(252,238,180,.18); + border-color: rgba(252,238,180,.45); +} +.next-steps__card--sage .next-steps__eyebrow { + color: var(--accent-green-soft); background: rgba(228,240,210,.18); + border-color: rgba(228,240,210,.45); +} +.next-steps__title { font-size: var(--text-title-lg); font-weight: 500; margin: 0; color: #fff; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; } +.next-steps__desc { color: var(--text-on-dark); margin: 0; font-size: var(--text-sm); line-height: 1.55; } +.next-steps__checklist { + list-style: none; padding: 0; margin: var(--space-4) 0 0; + display: flex; flex-direction: column; gap: 12px; + color: #fff; font-size: var(--text-sm); +} +.next-steps__checklist li { + display: flex; align-items: center; gap: 12px; +} +.next-steps__check { + display: inline-flex; align-items: center; justify-content: center; + width: 18px; height: 18px; border-radius: 9999px; + background: var(--accent-on-dark); color: var(--dark-blue); + font-size: var(--text-eyebrow); font-weight: 700; + flex-shrink: 0; +} +.next-steps__cta { + margin-top: auto; align-self: flex-start; + display: inline-flex; align-items: center; gap: 8px; + background: rgba(255,255,255,.12); color: #fff; + padding: 10px 18px; border-radius: var(--radius-pill); + border: 1px solid rgba(255,255,255,.22); + font-size: var(--text-eyebrow); font-weight: 700; + text-transform: uppercase; letter-spacing: 0.06em; +} +.next-steps__cta svg { + background: var(--bright-blue); border-radius: 9999px; padding: 4px; width: 22px; height: 22px; + color: #fff; +} +.next-steps__card--gold .next-steps__cta svg { background: var(--accent-yellow); } +.next-steps__card--sage .next-steps__cta svg { background: var(--accent-green); } +.next-steps__card:hover .next-steps__cta { background: rgba(255,255,255,.2); } + +/* ---------- Team grid + member cards ---------- */ + +/* ---------- Team grid: featured "Unser Team" card + member cards (why-grid 2-col) ---------- */ + +.why-grid > .team-feature { + grid-row: span 2; + display: flex; flex-direction: column; gap: var(--space-3); + background: linear-gradient(180deg, var(--bright-blue) 0%, var(--dark-blue) 100%); +} +.team-feature__icon { + width: 48px; height: 48px; border-radius: 9999px; + background: rgba(255,255,255,.15); + display: inline-flex; align-items: center; justify-content: center; + margin-bottom: var(--space-2); +} +.team-feature__title { color: #fff; font-size: var(--text-title-lg); font-weight: 500; margin: 0 0 var(--space-3); } +.team-feature__lead { color: var(--text-on-dark); margin: 0; font-size: var(--text-sm); line-height: 1.55; } +.team-feature__cta { + margin-top: auto; align-self: flex-start; + display: inline-flex; align-items: center; gap: 8px; + background: rgba(255,255,255,.15); color: #fff; + padding: 10px 16px; border-radius: var(--radius-pill); + font-size: var(--text-sm); font-weight: 500; + border: 1px solid rgba(255,255,255,.24); + text-transform: uppercase; letter-spacing: 0.05em; +} +.team-feature:hover .team-feature__cta { background: rgba(255,255,255,.25); color: #fff; } + +.team-member { + position: relative; + display: grid; + grid-template-columns: 96px 1fr; + column-gap: var(--space-4); + row-gap: var(--space-3); + align-items: center; + transition: border-color .2s ease, transform .2s ease; +} +.team-member__avatar { + width: 96px; height: 96px; border-radius: 9999px; object-fit: cover; + background: var(--bg); +} +.team-member__avatar--placeholder { + display: inline-flex; align-items: center; justify-content: center; + background: linear-gradient(135deg, var(--dark-blue), var(--bright-blue)); + color: #fff; + font-family: var(--font-ui); + font-size: 30px; font-weight: 500; letter-spacing: 0.02em; + text-transform: uppercase; +} +.team-member__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } +.team-member__name { font-size: var(--text-title); font-weight: 500; color: var(--dark-blue); margin: 0; } +.team-member__role { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; } +.team-member__focus { + grid-column: 1 / -1; + margin-top: var(--space-4); + display: flex; flex-direction: column; gap: 4px; + font-family: var(--font-ui); font-size: var(--text-sm); color: var(--fg-muted); +} +.team-member__focus p.team-member__focus-text { margin: 0; } +.team-member__focus-label { + width: 100%; + display: inline-flex; align-items: center; gap: 6px; + color: var(--bright-blue); + font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-eyebrow); + margin-bottom: 2px; +} +.team-member__focus-label svg { + fill: var(--fg-subtle); + stroke: none; +} +.team-member__linkedin { + position: absolute; + top: var(--space-6); + right: var(--space-6); + display: inline-flex; align-items: center; justify-content: center; + color: var(--bright-blue); + transition: color .2s ease; +} +.team-member:hover .team-member__linkedin { color: var(--dark-blue); } + +@media (max-width: 560px) { + .why-grid > .team-feature { grid-row: auto; } + .team-member { grid-template-columns: 80px 1fr; } + .team-member__avatar { width: 80px; height: 80px; } + .team-member__avatar--placeholder { font-size: 26px; } +} + +/* ---------- Icon tile (shared: icon + title, optional body) ---------- + Used by home (lifecycle rows), team (how-we-work, why-cloud-native), + services (assessment cards). Light by default; flips dark inside + `.section--dark`. `--stack` puts the icon above the text; `--feature` + highlights the tile with the accent-green fill. */ +.icon-tile { + display: flex; align-items: center; gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--bg-white); + border: 1px solid var(--border); + border-radius: var(--radius-lg); +} +.icon-tile--stack { + flex-direction: column; + align-items: flex-start; + gap: var(--space-3); + padding: var(--space-6); + justify-content: center; +} +.icon-tile__icon { + width: 48px; height: 48px; border-radius: 9999px; + background: rgba(5,128,196,.08); color: var(--bright-blue); + display: inline-flex; align-items: center; justify-content: center; + flex-shrink: 0; +} +.icon-tile__title { + margin: 0; color: var(--dark-blue); + font-size: var(--text-title); font-weight: 500; line-height: 1.3; +} +.icon-tile__body { + margin: 0; color: var(--fg-muted); + font-size: var(--text-sm); line-height: 1.55; +} +.section--dark .icon-tile { + background: rgba(255,255,255,.04); + border-color: var(--stroke-on-dark); +} +.section--dark .icon-tile__icon { + background: rgba(122,192,232,.12); color: var(--accent-on-dark); +} +.section--dark .icon-tile__title { color: #fff; } +.section--dark .icon-tile__body { color: var(--text-on-dark); } + +/* Werte — 5 rows with photo + copy */ +.values-list { display: flex; flex-direction: column; gap: var(--space-4); max-width: 980px; margin-left: auto; margin-right: auto; } +.values-list__row { + display: grid; + grid-template-columns: 200px 240px 1fr; + gap: var(--space-6); + align-items: center; + padding: var(--space-3) 0; + border-bottom: 1px solid var(--stroke-on-dark); +} +.values-list__row:last-child { border-bottom: 0; } +.values-list__title { color: #fff; font-size: var(--text-title-lg); font-weight: 500; margin: 0; } +.values-list__media { + aspect-ratio: 5/3; + border-radius: var(--radius-md); + background-size: cover; background-position: center; + background-color: rgba(5,128,196,.2); +} +.values-list__desc { color: var(--text-on-dark); font-size: var(--text-sm); margin: 0; line-height: 1.55; } +@media (max-width: 760px) { + .values-list__row { grid-template-columns: 1fr; gap: var(--space-3); } + .values-list__media { display: none; } +} + +/* ---------- Team page: community, contact CTA ---------- */ + +.section--gold { background: var(--accent-yellow-soft); } +.section__icon--gold { + background: rgba(184,169,120,.2); + color: var(--accent-yellow); +} + +.contact-cta { + max-width: 720px; margin: 0 auto; text-align: center; +} +.contact-cta__eyebrow { color: var(--accent-on-dark); } +.contact-cta__title { margin-top: 12px; } +.contact-cta__actions { margin-top: var(--space-6); } + +/* ---------- Service columns (Services page) ---------- */ + +.service-stack { display: flex; flex-direction: column; gap: var(--space-6); } +.service-stack--tight { gap: var(--space-4); } +.service-card__items { + display: flex; flex-direction: column; gap: 6px; + font-size: var(--text-sm); color: var(--fg-muted); +} +.card__eyebrow { margin-top: 18px; margin-bottom: 8px; } +.tag-arbeitsweise__list { margin-top: 6px; } +.assessment-cards { margin-bottom: var(--space-8); } +.output-block { display: flex; flex-direction: column; gap: var(--space-4); } +.output-block__title { color: var(--accent-on-dark); } +.output-block__list { display: grid; grid-template-columns: repeat(3, 1fr); } +@media (max-width: 760px) { .output-block__list { grid-template-columns: 1fr; } } + +/* ---------- Journey banner (Produkte) ---------- */ + +.journey-banner { + aspect-ratio: 16/4; + margin: 0 auto var(--space-8); + max-width: 880px; + border-radius: var(--radius-lg); + background-size: cover; background-position: center; + border: 1px solid var(--stroke-on-dark); +} + +/* ---------- Partner cards (Produkte) ---------- */ + +.partner-cards { max-width: 980px; margin: 0 auto; } +.partner-card__logo { height: 36px; width: auto; margin-bottom: var(--space-4); } +.partner-card__role { margin-top: 4px; margin-bottom: 8px; color: var(--bright-blue); } +.partner-card__themes-title { margin-top: 14px; margin-bottom: 8px; color: var(--fg-subtle); } + +/* ---------- Own-solutions cards (Produkte) ---------- */ + +.own-cards { display: flex; flex-direction: column; gap: var(--space-6); } +.own-card__icon { + width: 52px; height: 52px; border-radius: 9999px; + background: rgba(5, 128, 196, .08); color: var(--bright-blue); + display: inline-flex; align-items: center; justify-content: center; + margin-bottom: var(--space-4); +} +.own-card__title { font-size: var(--text-title-lg); } +.own-card__eyebrow { margin-top: 18px; margin-bottom: 8px; } + +/* ---------- Fit-for block (Produkte cards "Geeignet für") ---------- */ + +.fit-block { + margin-top: 20px; + padding: var(--space-4) 20px; + background: rgba(154, 199, 132, .14); + border: 1px solid rgba(154, 199, 132, .35); + border-radius: var(--radius-md); +} +.fit-block__title { + font-size: var(--text-sm); + font-weight: 600; + color: var(--dark-blue); + margin-bottom: 10px; +} +.fit-block__list { + display: flex; + flex-direction: column; + gap: 6px; + font-size: var(--text-sm); + color: var(--fg-muted); +} +.fit-block__list li { display: flex; gap: 8px; } +.fit-block__check { color: var(--accent-green); font-weight: 600; } + +/* ---------- Service block (engineering categories) ---------- */ + +.cat-subhead { + font-size: var(--text-sm); + font-weight: 600; + color: var(--dark-blue); + margin-bottom: var(--space-4); +} +.cat-card__title { + font-size: var(--text-title); font-weight: 500; + color: var(--dark-blue); + margin: 0 0 14px; + line-height: 1.3; +} +.cat-card__items { + display: flex; flex-wrap: wrap; gap: 6px; + list-style: none; margin: 0; padding: 0; +} +.cat-card__items li { + font-family: var(--font-mono); font-size: var(--text-eyebrow); + padding: 5px 12px; border: 1px solid var(--border); + border-radius: var(--radius-md); + color: var(--dark-blue); background: var(--bg); +} + +/* ---------- Generic helpers for repeated layout patterns ---------- */ + +.col-narrow { max-width: 880px; margin-left: auto; margin-right: auto; } +.col-narrow--md { max-width: 720px; margin-left: auto; margin-right: auto; } +.training-cards { margin-bottom: var(--space-12); } + +.section--deep { background: var(--dark-blue); } + +.section__footnote { + text-align: center; max-width: 720px; + margin: var(--space-6) auto 0; + color: var(--fg-muted); font-size: var(--text-sm); +} + +/* Checkmark bullet list — variants for grid layout and dark sections. + Templates write `