/* ========================================================================== BitFlip Technologies: shared styles Tokens mirror DESIGN.md ("Clear Morning"). Change a value here, not in pages. ========================================================================== */ /* ---- Tokens ---- */ :root { /* Neutrals */ --ink-black: #221f1c; --night-ink: #000000; --reading-ink: #3d3933; --teal-ink: #1d3f3d; --soft-ink: #4a463f; --stone-gray: #6b655c; --pebble: #736d64; --paper-white: #f5f5f5; --pure-white: #ffffff; --slate-edge-strong: rgba(39,39,42,0.16); --slate-edge: rgba(39,39,42,0.10); --slate-edge-faint: rgba(39,39,42,0.08); --ink-tint: rgba(34,31,28,0.06); /* Primary: the sky and its text tier */ --harbor-blue: #3c74c1; --deep-lagoon: #008180; --gradient-sky: linear-gradient(105deg, var(--harbor-blue) 0%, var(--deep-lagoon) 100%); --azure-action: #518bdb; --blue-text: #346bb6; --blue-text-deep: #26508a; /* Category accents: bright marker tier + text tier (The Two-Tier Accent Rule) */ --teal-pulse: #36bab8; --teal-text: #007877; --coral-marker: #ed6d68; --coral-text: #b84140; --violet-marker: #9b6dc9; --violet-text: #8256ae; --orchid-marker: #bf89cd; --amber-marker: #e5a057; --amber-deep: #b06f22; --amber-text: #9b5e0c; --signal-green: #3a6b2a; /* Pastel washes (backgrounds only) */ --mint-wash: #cbfbf1; --peach-wash: #f8ebd8; --gold-wash: #fbf3cf; --lavender-wash: #ede9fe; --violet-wash: #f1e8fb; --sage-wash: #e6f2df; --teal-mist: #cff2ef; /* Status */ --success-green: #1f7a4d; --error-red: #c0392b; /* Type */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Shape (The Three Radii Rule) */ --radius-control: 8px; --radius-card-sm: 14px; --radius-card-lg: 18px; --radius-pill: 9999px; /* Depth (The Flat-By-Default Rule) */ --shadow-brand-lift: 0 22px 44px -14px rgba(0,0,0,0.20); --shadow-ambient-card: 0 1px 3px rgba(0,0,0,0.06); --shadow-hover-glow: 0 6px 16px rgba(0,0,0,0.14); --shadow-menu: 0 16px 24px -16px rgba(0,0,0,0.22); --shadow-focus-halo: 0 0 0 3px rgba(81,139,219,0.18); } /* ---- Base ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink-black); background: var(--paper-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, p, ul { margin: 0; padding: 0; } ul { list-style: none; } a { color: var(--blue-text); text-decoration: none; } a:hover { color: var(--blue-text-deep); } ::selection { background: rgba(60,116,193,0.22); color: var(--ink-black); } :focus-visible { outline: 3px solid var(--blue-text); outline-offset: 3px; } .on-dark :focus-visible { outline-color: var(--pure-white); } .on-dark form :focus-visible { outline-color: var(--blue-text); } main:focus { outline: none; } img { max-width: 100%; } .display { font-family: var(--font-display); } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; } section[id] { scroll-margin-top: 90px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } a, button, summary { -webkit-tap-highlight-color: rgba(60,116,193,0.15); } input, textarea, select, button { font-family: inherit; } input, textarea { caret-color: var(--blue-text); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--azure-action); box-shadow: var(--shadow-focus-halo); } textarea { resize: vertical; } ::placeholder { color: var(--pebble); } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ink-black); color: var(--pure-white); font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: var(--radius-control); } .skip-link:hover, .skip-link:focus { color: var(--pure-white); } .skip-link:focus { top: 12px; } /* ---- Buttons ---- */ .btn-dark, .btn-white { font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: var(--radius-control); } .btn-dark { background: var(--ink-black); color: var(--pure-white); transition: transform .12s ease, background .15s ease; } .btn-white { background: var(--pure-white); color: var(--ink-black); transition: transform .12s ease, box-shadow .15s ease; } .btn-grad { border: none; cursor: pointer; background: var(--gradient-sky); color: var(--pure-white); font-size: 15px; font-weight: 700; padding: 14px; border-radius: var(--radius-control); transition: transform .12s ease, filter .15s ease; } .btn-grad:disabled { opacity: .7; cursor: default; transform: none; } .nav-cta { font-size: 14px; padding: 10px 18px; white-space: nowrap; } .btn-dark:active, .btn-white:active, .btn-grad:active:not(:disabled) { transform: scale(0.98); } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(245,245,245,0.88); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--slate-edge); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; } .brand-link { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 40px; height: 40px; border-radius: var(--radius-control); display: block; } .brandword { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--ink-black); white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 4px; } .navpill { padding: 7px 13px; border-radius: var(--radius-control); font-size: 14px; font-weight: 500; color: var(--ink-black); transition: background .15s ease; } .navpill[aria-current="page"] { background: var(--ink-tint); font-weight: 600; } .header-actions { display: flex; align-items: center; gap: 8px; } .cta-short { display: none; } /* Mobile menu (
; app.js adds close-on-link / Escape / outside tap) */ .mobile-menu { display: none; } .mobile-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-control); border: 1px solid var(--slate-edge-strong); background: var(--pure-white); color: var(--ink-black); cursor: pointer; } .mobile-menu > summary::-webkit-details-marker { display: none; } .mobile-menu .icon-close, .mobile-menu[open] .icon-open { display: none; } .mobile-menu[open] .icon-close { display: block; } .mobile-menu-panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper-white); border-bottom: 1px solid var(--slate-edge); box-shadow: var(--shadow-menu); padding: 4px 22px 12px; display: flex; flex-direction: column; } .mobile-menu-panel a { display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 600; color: var(--ink-black); border-bottom: 1px solid var(--slate-edge-faint); } .mobile-menu-panel a[aria-current="page"] { color: var(--blue-text); } .mobile-menu-panel a:last-child { border-bottom: none; } .mobile-menu-panel a.menu-cta { justify-content: center; margin-top: 12px; min-height: 48px; border-radius: var(--radius-control); border-bottom: none; background: var(--ink-black); color: var(--pure-white); font-size: 16px; } /* ---- Footer ---- */ .site-footer { background: var(--paper-white); border-top: 1px solid var(--slate-edge); padding: 44px 0; } .site-footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; } .footer-brand { display: flex; align-items: center; gap: 12px; } .footer-logo { width: 34px; height: 34px; border-radius: var(--radius-control); display: block; } .footer-name { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--ink-black); } .footer-tagline { font-size: 12px; color: var(--pebble); } .footer-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .footlink { color: var(--stone-gray); font-size: 14px; font-weight: 500; transition: color .15s ease; } .footer-legal { font-size: 13px; color: var(--pebble); } /* ---- Section header ---- */ .section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 680px; margin: 0 auto 48px; } .section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-text); } .section-label--on-dark { color: var(--teal-pulse); } .section-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: 0.01em; color: var(--ink-black); } .section-title--compact { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14; } .section-title--on-dark { color: var(--pure-white); } .section-intro { font-size: 17px; line-height: 1.6; color: var(--stone-gray); } /* ---- Service card (feature block): the wash carries it, no border, no shadow ---- */ .svc-card { background: var(--card-wash); border-radius: var(--radius-card-lg); padding: 32px; display: flex; flex-direction: column; gap: 18px; } .svc-card--web { --card-wash: var(--mint-wash); --card-accent: var(--teal-pulse); --card-check: var(--teal-pulse); } .svc-card--hosting { --card-wash: var(--peach-wash); --card-accent: var(--azure-action); --card-check: var(--azure-action); } .svc-card--seo { --card-wash: var(--gold-wash); --card-accent: var(--amber-marker); --card-check: var(--amber-deep); } .svc-card--security { --card-wash: var(--lavender-wash); --card-accent: var(--coral-marker); --card-check: var(--coral-marker); } .svc-card--privacy { --card-wash: var(--violet-wash); --card-accent: var(--violet-marker); --card-check: var(--violet-marker); } .svc-card--a11y { --card-wash: var(--sage-wash); --card-accent: var(--signal-green); --card-check: var(--signal-green); } .icon-tile { width: 52px; height: 52px; border-radius: var(--radius-card-sm); background: var(--pure-white); display: flex; align-items: center; justify-content: center; color: var(--card-accent); } .svc-card__title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-black); } .svc-card__copy { font-size: 15px; line-height: 1.6; color: var(--soft-ink); } .svc-card__note { font-size: 12px; line-height: 1.5; color: var(--stone-gray); font-style: italic; } .check-list { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; } .check-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ink-black); } .check-list svg { flex-shrink: 0; margin-top: 1px; stroke: var(--card-check); } /* ---- Small card ---- */ .small-card { background: var(--pure-white); border: 1px solid var(--slate-edge-faint); border-radius: var(--radius-card-sm); padding: 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-ambient-card); } .small-card__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-black); } .small-card__copy { font-size: 14px; line-height: 1.55; color: var(--stone-gray); } /* ---- Chip (bright-tier tint, text-tier letters) ---- */ .chip { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); } .chip--teal { color: var(--teal-text); background: rgba(54,186,184,0.14); } .chip--blue { color: var(--blue-text); background: rgba(81,139,219,0.14); } .chip--coral { color: var(--coral-text); background: rgba(237,109,104,0.14); } .chip--violet { color: var(--violet-text); background: rgba(155,109,201,0.14); } .chip--amber { color: var(--amber-text); background: rgba(229,160,87,0.16); } .chip--green { color: var(--signal-green); background: rgba(58,107,42,0.12); } /* ---- Numbered step ---- */ .step { display: flex; align-items: flex-start; gap: 16px; } .step__num { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--ink-black); color: var(--pure-white); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; } .step__title { font-size: 15px; font-weight: 700; color: var(--ink-black); } .step__copy { font-size: 14px; line-height: 1.5; color: var(--soft-ink); } /* ---- Contact facts (on ink) ---- */ .contact-facts { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } .contact-fact { display: flex; align-items: center; gap: 12px; } .contact-fact__icon { color: var(--teal-pulse); } .contact-fact__value, .contact-fact__value:hover { font-family: var(--font-mono); font-size: 14px; color: rgba(245,245,245,0.9); } /* ---- Form field ---- */ .field { display: flex; flex-direction: column; gap: 7px; } .field__label { font-size: 13px; font-weight: 600; color: var(--ink-black); } .field__optional { color: var(--pebble); font-weight: 400; } .field__input { border: 1px solid var(--slate-edge-strong); border-radius: var(--radius-control); padding: 11px 13px; font-size: 16px; color: var(--ink-black); background: var(--pure-white); } textarea.field__input { line-height: 1.5; } /* ---- Document (reading pages: privacy policy, Security Notes) ---- */ .doc { max-width: 680px; margin: 0 auto; padding: 72px 0 96px; } .doc-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--blue-text); } .doc-title { font-weight: 900; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: 0.01em; color: var(--ink-black); } .doc-updated { margin-top: 14px; font-size: 15px; color: var(--stone-gray); } .doc-title, .doc section h2, .note-row__title, .note-cta__title { text-wrap: balance; } .doc section p, .doc-lead, .note-row__summary { text-wrap: pretty; } .doc-role { white-space: nowrap; } .doc-meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; line-height: 1.5; color: var(--stone-gray); } .doc-lead { margin-top: 18px; font-size: 19px; line-height: 1.6; color: var(--reading-ink); max-width: 62ch; } .doc section { margin-top: 52px; } .doc section h2 { font-size: clamp(24px, 2.6vw, 28px); font-weight: 800; line-height: 1.2; color: var(--ink-black); } .doc section h3 { margin-top: 30px; font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-black); } .doc section p, .doc section li { font-size: 17px; line-height: 1.7; color: var(--reading-ink); } .doc section p { margin-top: 14px; } .doc section ul { margin-top: 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; list-style: disc; } .doc section ol { margin: 14px 0 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; list-style: decimal; } .doc section li::marker { color: var(--blue-text); } .doc section ol li::marker { font-weight: 700; } .doc section strong { color: var(--ink-black); font-weight: 700; } .doc section p a, .doc section li a, .doc .contact-block a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* "The short version" panel: Teal Mist with Teal Ink text (derived from the panel hue) */ .summary { margin-top: 40px; background: var(--teal-mist); border-radius: var(--radius-card-lg); padding: 32px; } .summary h2 { font-size: 22px; font-weight: 800; color: var(--ink-black); } .summary ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; list-style: none; } .summary li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--teal-ink); } .summary li svg { flex-shrink: 0; margin-top: 3px; stroke: var(--teal-text); } /* Security Notes: index list rows (a readable list, not a card grid) */ .note-list { margin-top: 44px; border-top: 1px solid var(--slate-edge); } .note-row { border-bottom: 1px solid var(--slate-edge); } .note-row > a { display: flex; flex-direction: column; gap: 10px; padding: 30px 0; color: inherit; } .note-row__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--ink-black); transition: color .15s ease; } .note-row__summary { font-size: 17px; line-height: 1.6; color: var(--soft-ink); max-width: 62ch; } .note-row__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--stone-gray); } .note-row__more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--blue-text); } .note-list--compact { margin-top: 20px; } .doc section .note-list { padding-left: 0; display: block; list-style: none; } .doc section .note-row a { text-decoration: none; } .doc section .note-row__summary { margin-top: 0; font-size: 16px; color: var(--soft-ink); } .note-list--compact .note-row > a { padding: 20px 0; gap: 6px; } .note-list--compact .note-row__title { font-size: 20px; } /* "Want a hand?" closing card on each note */ .note-cta { margin-top: 56px; background: var(--pure-white); border: 1px solid var(--slate-edge-faint); border-radius: var(--radius-card-sm); box-shadow: var(--shadow-ambient-card); padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .note-cta__title { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ink-black); } .note-cta p { font-size: 16px; line-height: 1.6; color: var(--soft-ink); } .note-cta .btn-dark { margin-top: 4px; } /* ---- Security Notes header band: a lavender wash with a faint field of "bits", a few switched on. The pattern fades away behind the text column; on notes the band ends inside "The short version". ---- */ .doc-head { position: relative; isolation: isolate; } .doc-head::before { content: ""; position: absolute; z-index: -1; top: -72px; bottom: -96px; left: 50%; width: 100vw; transform: translateX(-50%); background-color: var(--lavender-wash); border-bottom: 1px solid var(--slate-edge-faint); background-image: url("data:image/svg+xml,"); background-size: 160px 160px; background-position: center top; } .doc-head::after { content: ""; position: absolute; z-index: -1; top: -72px; bottom: -96px; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 46% 85% at 50% 42%, var(--lavender-wash) 52%, rgba(237,233,254,0) 100%); } .doc-head--index::before, .doc-head--index::after { bottom: -36px; } /* the band sits in its own layer; content after it (the summary panel, the list) stays on top */ .doc-head ~ * { position: relative; z-index: 1; } /* the band is full-bleed (100vw); clip at the page so it never adds sideways scroll */ body:has(.notes-page) { overflow-x: clip; } @media (max-width: 600px) { .doc-head::before, .doc-head::after { top: -48px; } .doc-head::after { background: radial-gradient(ellipse 70% 80% at 50% 45%, var(--lavender-wash) 45%, rgba(237,233,254,0) 100%); } } /* ---- Interaction: hover only where a real hover exists ---- */ @media (hover: hover) { .navpill:hover { background: var(--ink-tint); color: var(--ink-black); } .btn-dark:hover { background: var(--night-ink); color: var(--pure-white); transform: translateY(-1px); } .btn-white:hover { color: var(--ink-black); transform: translateY(-1px); box-shadow: var(--shadow-hover-glow); } .btn-grad:hover { transform: translateY(-1px); filter: brightness(1.04); } .footlink:hover { color: var(--ink-black); } .note-row > a:hover .note-row__title { color: var(--blue-text-deep); } .note-row > a:hover .note-row__more { text-decoration: underline; text-underline-offset: 3px; } } @media (forced-colors: active) { .btn-dark, .btn-white, .btn-grad { border: 1px solid ButtonText !important; } .navpill[aria-current="page"] { outline: 1px solid CanvasText; } } /* ---- Responsive & touch ---- */ @media (max-width: 900px) { .nav-links { display: none !important; } .mobile-menu { display: block; } } @media (max-width: 900px), (pointer: coarse) { .navpill, .nav-cta, .footlink, .contact-link { display: inline-flex; align-items: center; min-height: 44px; } .brand-link, .doc-back { min-height: 44px; } .contact-facts { gap: 2px; } .footer-nav { row-gap: 0; } } @media (max-width: 600px) { .wrap { padding: 0 22px; } .site-header__inner { height: 64px; gap: 10px; } .brandword { font-size: 15px; } .nav-cta { padding: 9px 14px; font-size: 13px; } .cta-long { display: none; } .cta-short { display: inline; } .doc { padding: 48px 0 72px; } .summary { padding: 26px 22px; } .note-row__title { font-size: 22px; } .doc-lead { font-size: 18px; } } /* Below 395px the header can't fit name + button + menu with breathing room: keep the name, move the button into the menu */ @media (max-width: 394px) { .header-actions .nav-cta { display: none !important; } } @media (max-width: 319px) { .brandword { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-height: 500px) and (orientation: landscape) { .site-header { position: relative; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ================= Home: split hero, split section heads, and "bit flip" motion ================= The brand is a bit flip (0 to 1): things switch on rather than float in. Every hidden start state sits behind .motion-ok, which app.js adds only when motion is allowed, so the page is complete without it. */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Each service carries its accent's text tier for the "on" face of its icon tile (white icon passes on all six). */ .svc-card--web { --card-deep: var(--teal-text); } .svc-card--hosting { --card-deep: var(--blue-text); } .svc-card--seo { --card-deep: var(--amber-text); } .svc-card--security { --card-deep: var(--coral-text); } .svc-card--privacy { --card-deep: var(--violet-text); } .svc-card--a11y { --card-deep: var(--signal-green); } /* ---------- Hero: split composition, brand card straddling the horizon ---------- */ .hero-split { position: relative; background: var(--gradient-sky); padding: 84px 0 76px; } /* the sky clips its own drifting layer, so the hero itself never clips the overhanging brand card */ .hero-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-sky::before { content: ""; position: absolute; inset: -25%; background: radial-gradient(38% 46% at 28% 32%, rgba(16, 46, 110, 0.38), transparent 70%), radial-gradient(34% 42% at 74% 68%, rgba(0, 96, 96, 0.42), transparent 70%); } .hero-split__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); gap: 56px; align-items: end; } .hero-split__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 8px; } .hero-tag { display: inline-block; background: rgba(255, 255, 255, 0.92); color: var(--ink-black); font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; padding: 7px 15px; border-radius: var(--radius-card-sm); text-wrap: balance; } .hero-split h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(42px, 5vw, 70px); line-height: 1.04; letter-spacing: -0.005em; color: var(--pure-white); max-width: none; text-wrap: balance; } .hero-split__lead { font-size: 19px; line-height: 1.58; color: var(--pure-white); max-width: 50ch; } .hero-split__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; } .hero-split__card { margin-bottom: -150px; position: relative; z-index: 2; } .hero-split__card .brand-card { background: var(--pure-white); border: 1px solid var(--slate-edge); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-brand-lift); padding: 36px 36px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .brand-card__top { display: flex; align-items: center; gap: 18px; } .brand-card__top img { width: 88px; height: 88px; border-radius: var(--radius-card-sm); display: block; } .brand-card__name { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; color: var(--ink-black); } .brand-card__line { font-size: 15px; line-height: 1.5; color: var(--stone-gray); max-width: 38ch; } .brand-card__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; perspective: 600px; } .chip { display: inline-block; } .chip--teal { --on-fg: var(--teal-text); --on-bg: rgba(54,186,184,0.14); } .chip--blue { --on-fg: var(--blue-text); --on-bg: rgba(81,139,219,0.14); } .chip--coral { --on-fg: var(--coral-text); --on-bg: rgba(237,109,104,0.14); } .chip--violet { --on-fg: var(--violet-text); --on-bg: rgba(155,109,201,0.14); } .chip--amber { --on-fg: var(--amber-text); --on-bg: rgba(229,160,87,0.16); } .chip--green { --on-fg: var(--signal-green); --on-bg: rgba(58,107,42,0.12); } #services.after-hero { padding-top: 212px !important; } /* ---------- Section heads: left-aligned, title and intro side by side ---------- */ .section-head--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 14px 64px; align-items: end; text-align: left; max-width: none; margin: 0 0 52px; } .section-head--split .section-label, .section-head--split .section-title { grid-column: 1; } .section-head--split .section-title { font-size: clamp(32px, 4vw, 52px); line-height: 1.08; text-wrap: balance; } .section-head--split .section-intro { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-bottom: 6px; } /* ---------- Service cards ---------- */ .svc-card { position: relative; isolation: isolate; overflow: hidden; } /* light that follows the pointer across the wash */ .svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.7), transparent 72%); } /* the icon tile is a bit: off (white) and on (accent) */ .icon-tile--flip { position: relative; background: transparent; perspective: 420px; } .icon-tile__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.6s var(--ease-out), background-color 0.3s ease; } .icon-tile__off { background: var(--pure-white); color: var(--card-accent); } .icon-tile__on { background: var(--card-deep); color: var(--pure-white); transform: rotateY(180deg); } .svc-card.is-on .icon-tile__off { transform: rotateY(-180deg); } .svc-card.is-on .icon-tile__on { transform: rotateY(0deg); } @media (hover: hover) { .svc-card { transition: transform 0.45s var(--ease-out); } .svc-card:hover, .svc-card:focus-within { transform: translateY(-4px); } .svc-card:hover::before, .svc-card:focus-within::before { opacity: 1; } .svc-card:hover .icon-tile__off, .svc-card:focus-within .icon-tile__off { transform: rotateY(-180deg); } .svc-card:hover .icon-tile__on, .svc-card:focus-within .icon-tile__on { transform: rotateY(0deg); } .small-card { transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); } .small-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.22); } } /* ---------- Steps: the route between them draws in order ---------- */ .steps-panel .step { position: relative; } .steps-panel .step:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 40px; bottom: -18px; width: 2px; border-radius: 2px; background: var(--teal-ink); opacity: 0.35; transform-origin: top; } /* ================= Motion (only when the visitor allows it and JS is running) ================= */ .motion-ok .hero-sky::before { animation: sky-drift 24s ease-in-out infinite alternate; } .motion-ok .hero-split.is-paused .hero-sky::before { animation-play-state: paused; } @keyframes sky-drift { from { transform: translate3d(-5%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.08); } } /* Focal moment: the brand card arrives, then its six services switch on one bit at a time */ .motion-ok .hero-split__card .brand-card { animation: card-arrive 0.8s var(--ease-out) 0.15s both; } @keyframes card-arrive { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .motion-ok .brand-card__chips .chip { animation: bit-flip 0.56s var(--ease-out) both; animation-delay: calc(0.75s + var(--i) * 0.11s); } @keyframes bit-flip { 0% { transform: rotateX(0deg); color: var(--pebble); background-color: transparent; box-shadow: inset 0 0 0 1px var(--slate-edge-strong); } 49.9% { transform: rotateX(90deg); color: var(--pebble); background-color: transparent; box-shadow: inset 0 0 0 1px var(--slate-edge-strong); } 50% { transform: rotateX(-90deg); color: var(--on-fg); background-color: var(--on-bg); box-shadow: inset 0 0 0 1px transparent; } 100% { transform: rotateX(0deg); color: var(--on-fg); background-color: var(--on-bg); box-shadow: inset 0 0 0 1px transparent; } } /* Cards switch on as their list reaches the viewport (content is visible without JS) */ .motion-ok .svc-card:not(.is-in), .motion-ok .small-card:not(.is-in) { opacity: 0; transform: translateY(22px); } .motion-ok .svc-card.is-in, .motion-ok .small-card.is-in { opacity: 1; transition: opacity 0.6s ease var(--d, 0s), transform 0.75s var(--ease-out) var(--d, 0s); } .motion-ok .svc-card.is-settled, .motion-ok .small-card.is-settled { transition-delay: 0s; } .motion-ok .check-list polyline { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.5s var(--ease-out); } .motion-ok .svc-card.is-in .check-list li:nth-child(1) polyline { stroke-dashoffset: 0; transition-delay: calc(var(--d, 0s) + 0.35s); } .motion-ok .svc-card.is-in .check-list li:nth-child(2) polyline { stroke-dashoffset: 0; transition-delay: calc(var(--d, 0s) + 0.45s); } .motion-ok .svc-card.is-in .check-list li:nth-child(3) polyline { stroke-dashoffset: 0; transition-delay: calc(var(--d, 0s) + 0.55s); } .motion-ok .steps-panel .step__num { transform: scale(0.6); opacity: 0.4; transition: transform 0.5s var(--ease-out), opacity 0.3s ease; } .motion-ok .steps-panel .step:not(:last-child)::after { transform: scaleY(0); transition: transform 0.5s var(--ease-out); } .motion-ok .steps-panel.is-in .step__num { transform: none; opacity: 1; } .motion-ok .steps-panel.is-in .step:nth-child(2) .step__num { transition-delay: 0s; } .motion-ok .steps-panel.is-in .step:nth-child(2)::after { transform: scaleY(1); transition-delay: 0.2s; } .motion-ok .steps-panel.is-in .step:nth-child(3) .step__num { transition-delay: 0.55s; } .motion-ok .steps-panel.is-in .step:nth-child(3)::after { transform: scaleY(1); transition-delay: 0.75s; } .motion-ok .steps-panel.is-in .step:nth-child(4) .step__num { transition-delay: 1.1s; } /* Reduced motion: no travel. The tile still changes state, as a quick cross-fade. */ @media (prefers-reduced-motion: reduce) { .icon-tile__on { transform: none; opacity: 0; } .svc-card.is-on .icon-tile__off, .svc-card:hover .icon-tile__off, .svc-card:focus-within .icon-tile__off { transform: none; } .svc-card.is-on .icon-tile__on, .svc-card:hover .icon-tile__on, .svc-card:focus-within .icon-tile__on { opacity: 1; } .svc-card:hover, .svc-card:focus-within, .small-card:hover { transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .hero-split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 40px; } } @media (max-width: 900px) { .hero-split { padding: 76px 0 0; } .hero-split__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .hero-split__copy { padding-bottom: 0; } .hero-split__card { margin-bottom: -110px; max-width: 560px; } #services.after-hero { padding-top: 198px !important; } .section-head--split { grid-template-columns: minmax(0, 1fr); } .section-head--split .section-intro { grid-column: 1; grid-row: auto; } } @media (max-width: 600px) { .hero-split { padding-top: 56px; } .hero-split__card .brand-card { padding: 26px 22px 24px; } .brand-card__top img { width: 64px; height: 64px; } .brand-card__name { font-size: 22px; } .section-head--split { margin-bottom: 36px; } }