/* AirLode Design System Brand anchors confirmed from assets/images/site_logo/AirLode_logo.svg: ink #15171a teal #25afa1 Typeface: Suisse Int'l (self-hosted, assets/fonts/) */ /* --------------------------------------------------------------- Fonts --------------------------------------------------------------- */ @font-face { font-family: 'Suisse Int\'l'; src: url('../fonts/suisseIntl-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Suisse Int\'l'; src: url('../fonts/suisseIntl-medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Suisse Int\'l'; src: url('../fonts/suisseIntl-semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Suisse Int\'l'; src: url('../fonts/suisseIntl-bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- Tokens — theme system --------------------------------------------------------------- Semantic tokens (--al-bg, --al-surface, --al-text, --al-accent, ...) carry deliberate, independently-tuned values per theme — light is not dark inverted. Legacy component tokens (--al-ink, --al-white, --al-teal, ...) are kept as aliases so existing component rules below don't need renaming; only the alias targets are theme-aware. Cascade (matches the anti-FOUC script in ): :root → light (base/fallback) @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) → dark, when device prefers dark and user hasn't forced light :root[data-theme="dark"] → dark, forced regardless of device :root[data-theme="light"] → light, forced regardless of device --------------------------------------------------------------- */ :root { /* ---- Light (base/default) ---- */ --al-bg: #faf9f6; --al-surface: #ffffff; --al-surface-elevated: #ffffff; --al-text: #15171a; --al-text-muted: #565d61; --al-text-faint: #767d81; --al-border: rgba(21,23,26,0.11); --al-border-strong: rgba(21,23,26,0.20); --al-accent: #25afa1; --al-accent-hover: #1c8a80; --al-accent-text: #0e7d70; --al-accent-soft: rgba(37,175,161,0.10); --al-accent-soft-strong: rgba(37,175,161,0.28); --al-focus: #0e7d70; --al-amber: #a35f10; --al-amber-soft: rgba(217,154,60,0.14); --al-danger: #c8362b; --al-success: #1f8a5c; --al-shadow: 0 1px 2px rgba(21,23,26,0.04), 0 8px 24px rgba(21,23,26,0.06); /* Header — independently designed per theme, not a faded page-bg overlay */ --al-header-bg: rgba(255,255,255,0.86); --al-header-text: #15171a; --al-header-text-muted: #52585c; --al-header-border: rgba(21,23,26,0.13); --al-header-hover-bg: rgba(21,23,26,0.05); --al-header-hover-text: #15171a; --al-header-active-bg: rgba(37,175,161,0.12); --al-header-active-text: #0e7d70; --al-header-control-bg: #ffffff; --al-header-control-border: rgba(21,23,26,0.14); --al-header-control-icon: #52585c; /* Theme-invariant: text that sits on the solid vivid-teal accent fill needs to stay dark ink regardless of overall page theme, since the accent color itself doesn't change between light/dark. Do not alias this to --al-text or --al-bg — both flip per theme and would make button/skip-link text illegible in one of the two modes. */ --al-on-accent: #15171a; /* Legacy aliases used throughout components below */ --al-ink: var(--al-bg); --al-ink-2: var(--al-surface); --al-ink-3: var(--al-surface-elevated); --al-ink-border: var(--al-border); --al-ink-border-strong: var(--al-border-strong); --al-teal: var(--al-accent); --al-teal-strong: var(--al-accent-hover); --al-teal-soft: var(--al-accent-soft); --al-teal-soft-strong: var(--al-accent-soft-strong); --al-white: var(--al-text); --al-muted: var(--al-text-muted); --al-muted-2: var(--al-text-faint); /* Typography */ --al-font: 'Suisse Int\'l', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --al-fs-xs: 0.75rem; --al-fs-sm: 0.875rem; --al-fs-base: 1rem; --al-fs-md: 1.125rem; --al-fs-lg: 1.25rem; --al-fs-xl: 1.5rem; --al-fs-2xl: 2rem; --al-fs-3xl: clamp(2rem, 1.6rem + 1.8vw, 3rem); --al-fs-hero: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem); --al-lh-tight: 1.1; --al-lh-snug: 1.3; --al-lh-body: 1.65; /* Spacing (8pt rhythm) */ --al-sp-1: 4px; --al-sp-2: 8px; --al-sp-3: 12px; --al-sp-4: 16px; --al-sp-5: 24px; --al-sp-6: 32px; --al-sp-7: 48px; --al-sp-8: 64px; --al-sp-9: 96px; --al-sp-10: 128px; /* Radius */ --al-radius-sm: 8px; --al-radius-md: 14px; --al-radius-lg: 22px; --al-radius-pill: 999px; /* Motion */ --al-ease: cubic-bezier(0.16, 1, 0.3, 1); --al-dur-fast: 150ms; --al-dur: 250ms; --al-dur-slow: 420ms; /* Layout */ --al-container: 1200px; --al-container-narrow: 820px; --al-header-h: 84px; } /* Dark palette — applied when device prefers dark AND user hasn't forced light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --al-bg: #15171a; --al-surface: #1b1e23; --al-surface-elevated: #22262c; --al-text: #f6f7f7; --al-text-muted: #a7afb6; --al-text-faint: #7d858c; --al-border: rgba(255,255,255,0.10); --al-border-strong: rgba(255,255,255,0.18); --al-accent: #25afa1; --al-accent-hover: #2fc0b1; --al-accent-text: #25afa1; --al-accent-soft: rgba(37,175,161,0.14); --al-accent-soft-strong: rgba(37,175,161,0.24); --al-focus: #25afa1; --al-amber: #d99a3c; --al-amber-soft: rgba(217,154,60,0.14); --al-danger: #e2574c; --al-success: #3fb27f; --al-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3); --al-header-bg: rgba(21,23,26,0.82); --al-header-text: #f6f7f7; --al-header-text-muted: #a7afb6; --al-header-border: rgba(255,255,255,0.10); --al-header-hover-bg: rgba(255,255,255,0.06); --al-header-hover-text: #ffffff; --al-header-active-bg: rgba(37,175,161,0.16); --al-header-active-text: #25afa1; --al-header-control-bg: rgba(255,255,255,0.04); --al-header-control-border: rgba(255,255,255,0.14); --al-header-control-icon: #a7afb6; } } /* Dark palette — forced via explicit user choice, wins regardless of device */ :root[data-theme="dark"] { --al-bg: #15171a; --al-surface: #1b1e23; --al-surface-elevated: #22262c; --al-text: #f6f7f7; --al-text-muted: #a7afb6; --al-text-faint: #7d858c; --al-border: rgba(255,255,255,0.10); --al-border-strong: rgba(255,255,255,0.18); --al-accent: #25afa1; --al-accent-hover: #2fc0b1; --al-accent-text: #25afa1; --al-accent-soft: rgba(37,175,161,0.14); --al-accent-soft-strong: rgba(37,175,161,0.24); --al-focus: #25afa1; --al-amber: #d99a3c; --al-amber-soft: rgba(217,154,60,0.14); --al-danger: #e2574c; --al-success: #3fb27f; --al-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3); --al-header-bg: rgba(21,23,26,0.82); --al-header-text: #f6f7f7; --al-header-text-muted: #a7afb6; --al-header-border: rgba(255,255,255,0.10); --al-header-hover-bg: rgba(255,255,255,0.06); --al-header-hover-text: #ffffff; --al-header-active-bg: rgba(37,175,161,0.16); --al-header-active-text: #25afa1; --al-header-control-bg: rgba(255,255,255,0.04); --al-header-control-border: rgba(255,255,255,0.14); --al-header-control-icon: #a7afb6; } /* Light palette — forced via explicit user choice, wins regardless of device */ :root[data-theme="light"] { --al-bg: #faf9f6; --al-surface: #ffffff; --al-surface-elevated: #ffffff; --al-text: #15171a; --al-text-muted: #565d61; --al-text-faint: #767d81; --al-border: rgba(21,23,26,0.11); --al-border-strong: rgba(21,23,26,0.20); --al-accent: #25afa1; --al-accent-hover: #1c8a80; --al-accent-text: #0e7d70; --al-accent-soft: rgba(37,175,161,0.10); --al-accent-soft-strong: rgba(37,175,161,0.28); --al-focus: #0e7d70; --al-amber: #a35f10; --al-amber-soft: rgba(217,154,60,0.14); --al-danger: #c8362b; --al-success: #1f8a5c; --al-shadow: 0 1px 2px rgba(21,23,26,0.04), 0 8px 24px rgba(21,23,26,0.06); --al-header-bg: rgba(255,255,255,0.86); --al-header-text: #15171a; --al-header-text-muted: #52585c; --al-header-border: rgba(21,23,26,0.13); --al-header-hover-bg: rgba(21,23,26,0.05); --al-header-hover-text: #15171a; --al-header-active-bg: rgba(37,175,161,0.12); --al-header-active-text: #0e7d70; --al-header-control-bg: #ffffff; --al-header-control-border: rgba(21,23,26,0.14); --al-header-control-icon: #52585c; } /* Theme transition — smooth but restrained; only color-ish properties, never layout */ .al, .al * { transition: background-color var(--al-dur) var(--al-ease), border-color var(--al-dur) var(--al-ease), color var(--al-dur) var(--al-ease); } /* --------------------------------------------------------------- Reset / base --------------------------------------------------------------- */ .al * , .al *::before, .al *::after { box-sizing: border-box; } .al { background: var(--al-ink); color: var(--al-white); font-family: var(--al-font); font-size: 16px; line-height: var(--al-lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .al img, .al svg { max-width: 100%; display: block; } .al a { color: inherit; text-decoration: none; } .al ul { list-style: none; margin: 0; padding: 0; } .al h1, .al h2, .al h3, .al h4 { font-family: var(--al-font); font-weight: 600; line-height: var(--al-lh-tight); letter-spacing: -0.01em; margin: 0 0 var(--al-sp-4); color: var(--al-white); } .al h1 { font-size: var(--al-fs-hero); font-weight: 700; } .al h2 { font-size: var(--al-fs-3xl); } .al h3 { font-size: var(--al-fs-xl); } .al p { margin: 0 0 var(--al-sp-4); color: var(--al-muted); } .al .al-container { width: 100%; max-width: var(--al-container); margin: 0 auto; padding: 0 var(--al-sp-5); } .al .al-container-narrow { width: 100%; max-width: var(--al-container-narrow); margin: 0 auto; padding: 0 var(--al-sp-5); } .al .al-section { padding: var(--al-sp-9) 0; } @media (max-width: 768px) { .al .al-section { padding: var(--al-sp-7) 0; } } .al .al-section--tight { padding: var(--al-sp-7) 0; } .al .al-section--alt { background: var(--al-ink-2); } .al .al-visually-hidden { 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 */ .al-skip-link { position: absolute; left: var(--al-sp-4); top: -60px; background: var(--al-teal); color: var(--al-on-accent); padding: 12px 20px; border-radius: var(--al-radius-sm); font-weight: 600; z-index: 1000; transition: top var(--al-dur) var(--al-ease); } .al-skip-link:focus { top: var(--al-sp-4); } /* Focus states */ .al a:focus-visible, .al button:focus-visible, .al input:focus-visible, .al textarea:focus-visible, .al [tabindex]:focus-visible { outline: 2px solid var(--al-focus); outline-offset: 3px; border-radius: var(--al-radius-sm); } /* --------------------------------------------------------------- Eyebrow / badge --------------------------------------------------------------- */ .al-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--al-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--al-accent-text); background: var(--al-teal-soft); border: 1px solid var(--al-teal-soft-strong); padding: 7px 14px; border-radius: var(--al-radius-pill); margin-bottom: var(--al-sp-4); } .al-eyebrow--amber { color: var(--al-amber); background: var(--al-amber-soft); border-color: rgba(217,154,60,0.32); } /* --------------------------------------------------------------- Buttons --------------------------------------------------------------- */ .al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--al-font); font-weight: 600; font-size: var(--al-fs-sm); padding: 15px 26px; border-radius: var(--al-radius-pill); border: 1px solid transparent; cursor: pointer; min-height: 48px; transition: transform var(--al-dur-fast) var(--al-ease), background var(--al-dur) var(--al-ease), border-color var(--al-dur) var(--al-ease), box-shadow var(--al-dur) var(--al-ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; } .al-btn:active { transform: scale(0.97); } .al-btn--primary { background: var(--al-teal); color: var(--al-on-accent); } .al-btn--primary:hover { background: #2fc0b1; box-shadow: 0 8px 24px rgba(37,175,161,0.28); } .al-btn--ghost { background: transparent; color: var(--al-white); border-color: var(--al-ink-border-strong); } .al-btn--ghost:hover { border-color: var(--al-teal); color: var(--al-accent-text); } .al-btn--light { background: #ffffff; color: var(--al-on-accent); } .al-btn--light:hover { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .al-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .al-link { display: inline-flex; align-items: center; gap: 6px; color: var(--al-accent-text); font-weight: 600; font-size: var(--al-fs-sm); transition: gap var(--al-dur-fast) var(--al-ease), color var(--al-dur-fast) var(--al-ease); } .al-link:hover { gap: 10px; color: #2fc0b1; } .al-link svg { width: 14px; height: 14px; } /* --------------------------------------------------------------- Header / Navigation --------------------------------------------------------------- */ .al-header { position: sticky; top: 0; z-index: 500; background: var(--al-header-bg); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--al-header-border); /* .al-header is the containing block for .al-nav (position:absolute, see below) because of the backdrop-filter above. While closed, .al-nav sits off-canvas via transform: translateX(100%) — that box still counts toward .al-header's (and therefore the document's) scrollable overflow, causing page-wide horizontal scroll even though nothing is visible. overflow-x: clip removes that phantom width without creating a scroll container, so overflow-y stays truly visible and the open panel (which extends the full viewport height below the header) is unaffected. */ overflow-x: clip; overflow-y: visible; } .al-header .al-brand__word { color: var(--al-header-text); } .al-header .al-brand__tag { color: var(--al-header-text-muted); } .al-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--al-sp-4); height: var(--al-header-h); max-width: var(--al-container); margin: 0 auto; padding: 0 var(--al-sp-5); } /* At the narrowest supported phones (iPhone SE class, ~320px), brand + theme-toggle + hamburger don't quite fit at the default gap, pushing the hamburger button ~8px past the right edge. Tighten the gap only at this width so the touch target stays fully reachable; wider phones (360px+) already fit and are untouched. */ @media (max-width: 340px) { .al-header__bar { gap: var(--al-sp-3); } } .al-brand { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .al-brand__mark { display: flex; align-items: center; gap: 9px; } .al-brand__mark img { width: 26px; height: 26px; flex-shrink: 0; } .al-brand__word { font-family: var(--al-font); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--al-white); line-height: 1; } .al-brand__tag { font-size: 11px; color: var(--al-muted-2); letter-spacing: 0.02em; } @media (max-width: 640px) { .al-brand__tag { display: none; } } .al-nav { display: flex; align-items: center; gap: var(--al-sp-6); } .al-nav__list { display: flex; align-items: center; gap: var(--al-sp-5); } .al-nav__link { font-size: var(--al-fs-sm); font-weight: 500; color: var(--al-header-text-muted); padding: 9px 10px; border-radius: var(--al-radius-sm); position: relative; transition: color var(--al-dur-fast) var(--al-ease), background var(--al-dur-fast) var(--al-ease); } .al-nav__link:hover { color: var(--al-header-hover-text); background: var(--al-header-hover-bg); } .al-nav__link[aria-current="page"] { color: var(--al-header-active-text); background: var(--al-header-active-bg); font-weight: 600; } .al-header__actions { display: flex; align-items: center; gap: var(--al-sp-3); flex-shrink: 0; } .al-header__actions .al-btn { padding: 11px 20px; min-height: 40px; font-size: var(--al-fs-xs); } .al-nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--al-header-control-border); border-radius: var(--al-radius-sm); background: var(--al-header-control-bg); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .al-nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--al-header-text); position: relative; transition: transform var(--al-dur) var(--al-ease), opacity var(--al-dur) var(--al-ease); } .al-nav-toggle span::before, .al-nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--al-header-text); transition: transform var(--al-dur) var(--al-ease); } .al-nav-toggle span::before { top: -6px; } .al-nav-toggle span::after { top: 6px; } .al-header--open .al-nav-toggle span { background: transparent; } .al-header--open .al-nav-toggle span::before { transform: translateY(6px) rotate(45deg); } .al-header--open .al-nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1050px) { .al-nav-toggle { display: inline-flex; } .al-nav { /* .al-header has backdrop-filter, which makes it the containing block for fixed-position descendants — position:fixed here would resolve against the 84px-tall header box, not the viewport, clipping the panel behind the header. Anchor to that real containing block instead. */ position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--al-header-h)); height: calc(100dvh - var(--al-header-h)); background: var(--al-ink); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: var(--al-sp-6) var(--al-sp-5); gap: var(--al-sp-6); transform: translateX(100%); transition: transform var(--al-dur-slow) var(--al-ease); overflow-y: auto; /* Real iOS Safari drops the repaint for this panel right around transitionend (~420ms — reads as "opens, then vanishes a fraction of a second later" while .al-header--open / aria-expanded / body scroll lock all stay correctly "open"): a transform-animated descendant of a position:sticky + backdrop-filter ancestor gets a temporary compositor layer for the transition that WebKit tears down at completion without reliably repainting. Pinning a persistent layer prevents that promote/demote cycle. Do not remove — this is the actual fix, not a performance nicety. */ will-change: transform; } .al-header--open .al-nav { transform: translateX(0); } .al-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .al-nav__link { padding: var(--al-sp-4) 0; border-bottom: 1px solid var(--al-ink-border); font-size: var(--al-fs-md); min-height: 44px; display: flex; align-items: center; } .al-header__actions { flex-direction: column; align-items: stretch; } .al-header__actions .al-btn { width: 100%; min-height: 48px; } } /* Desktop nav must never wrap a multi-word label ("AirLode ID", "Book a meeting") onto a second line. white-space: nowrap alone reliably prevents that, but — verified in a real browser across 961-1440px — it also raises each link's effective minimum width to its full text width, which at the narrow end of the (then-960px) desktop range pushed the theme-toggle and "For Business" button partially off-screen (silently clipped by .al-header's overflow-x: clip, not visibly scrollable). The gap/padding trims below recover just enough width to stay safe from 1051px up, which is why the mobile-nav breakpoint above was moved from 960px to 1050px rather than left in place — under measurement, no reasonable amount of trimming here made 960px itself safe. */ @media (min-width: 1051px) { .al-header__bar { gap: 12px; } .al-nav { gap: 20px; } .al-nav__list { gap: 14px; } .al-nav__link { white-space: nowrap; padding: 9px 8px; } .al-header__actions { gap: 8px; } .al-header__actions .al-btn { padding: 11px 14px; } } /* --------------------------------------------------------------- Theme toggle (Auto / Light / Dark) — header + footer instances --------------------------------------------------------------- */ .al-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--al-radius-pill); background: var(--al-surface); border: 1px solid var(--al-border); flex-shrink: 0; } .al-theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; min-height: 36px; padding: 0 10px; border: none; border-radius: var(--al-radius-pill); background: transparent; color: var(--al-text-muted); font-family: var(--al-font); font-size: var(--al-fs-xs); font-weight: 500; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; transition: background var(--al-dur-fast) var(--al-ease), color var(--al-dur-fast) var(--al-ease); } .al-theme-toggle__btn svg { width: 15px; height: 15px; flex-shrink: 0; } .al-theme-toggle__btn:hover { color: var(--al-text); } .al-theme-toggle__btn[aria-checked="true"] { background: var(--al-accent-soft); color: var(--al-accent-text); font-weight: 700; } .al-theme-toggle__btn:focus-visible { outline: 2px solid var(--al-focus); outline-offset: 2px; } /* Header instance: icon-only (label visually hidden), header-scoped control tokens so it reads correctly against the translucent header bg rather than the page bg */ .al-header .al-theme-toggle { background: var(--al-header-control-bg); border-color: var(--al-header-control-border); } .al-header .al-theme-toggle__btn { min-width: 38px; min-height: 38px; padding: 0 9px; color: var(--al-header-control-icon); } .al-header .al-theme-toggle__btn:hover { color: var(--al-header-hover-text); } /* Footer instance: visible label, slightly smaller footprint */ .al-theme-toggle--footer .al-theme-toggle__btn { min-height: 32px; font-size: 11px; padding: 0 9px; } .al-theme-toggle--footer .al-theme-toggle__btn svg { width: 13px; height: 13px; } @media (max-width: 1050px) { .al-header .al-theme-toggle { order: -1; } } /* --------------------------------------------------------------- Hero --------------------------------------------------------------- */ .al-hero { padding: var(--al-sp-9) 0 var(--al-sp-8); position: relative; overflow: hidden; } .al-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--al-sp-8); align-items: center; } @media (max-width: 960px) { .al-hero__grid { grid-template-columns: 1fr; gap: var(--al-sp-7); } } .al-hero h1 { margin-bottom: var(--al-sp-5); } .al-hero__lead { font-size: var(--al-fs-md); color: var(--al-muted); max-width: 46ch; margin-bottom: var(--al-sp-6); } .al-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--al-sp-3); margin-bottom: var(--al-sp-6); } .al-hero__note { font-size: var(--al-fs-xs); color: var(--al-muted-2); } /* Relationship diagram */ .al-diagram { position: relative; aspect-ratio: 1 / 1; max-width: 460px; margin: 0 auto; } .al-diagram svg { width: 100%; height: 100%; } .al-diagram__path { stroke: var(--al-accent-text); stroke-width: 1.5; fill: none; opacity: 0.55; stroke-dasharray: 6 6; } .al-diagram__node { fill: var(--al-ink-2); stroke: var(--al-ink-border-strong); stroke-width: 1; } .al-diagram__node--accent { fill: var(--al-teal-soft); stroke: var(--al-accent-text); } .al-diagram__label { font-family: var(--al-font); font-size: 13px; font-weight: 600; fill: var(--al-white); } .al-diagram__sublabel { font-family: var(--al-font); font-size: 10px; fill: var(--al-muted); } .al-diagram__pulse { animation: al-pulse 3.2s var(--al-ease) infinite; } @keyframes al-pulse { 0%, 100% { opacity: 0.35; r: 3; } 50% { opacity: 1; r: 4.5; } } /* --------------------------------------------------------------- About — copy + supporting photograph --------------------------------------------------------------- */ .al-about__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--al-sp-8); align-items: center; } @media (max-width: 860px) { .al-about__grid { grid-template-columns: 1fr; gap: var(--al-sp-7); } } .al-about__media { border: 1px solid var(--al-ink-border); border-radius: var(--al-radius-lg); overflow: hidden; box-shadow: var(--al-shadow); } .al-about__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; } /* --------------------------------------------------------------- Section heading --------------------------------------------------------------- */ .al-heading { max-width: 720px; margin-bottom: var(--al-sp-7); } .al-heading--center { margin-left: auto; margin-right: auto; text-align: center; } .al-heading p { font-size: var(--al-fs-md); margin: 0; } /* --------------------------------------------------------------- Dual path (For Business / My Workspace) --------------------------------------------------------------- */ .al-paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--al-sp-5); } @media (max-width: 760px) { .al-paths { grid-template-columns: 1fr; } } .al-path { border: 1px solid var(--al-ink-border); border-radius: var(--al-radius-lg); padding: var(--al-sp-7); background: linear-gradient(160deg, var(--al-ink-2), var(--al-ink-3)); transition: border-color var(--al-dur) var(--al-ease), transform var(--al-dur) var(--al-ease); } .al-path:hover { border-color: var(--al-ink-border-strong); transform: translateY(-2px); } .al-path__icon { width: 44px; height: 44px; border-radius: var(--al-radius-sm); background: var(--al-teal-soft); color: var(--al-accent-text); display: flex; align-items: center; justify-content: center; margin-bottom: var(--al-sp-5); } .al-path__icon svg { width: 22px; height: 22px; } .al-path h3 { margin-bottom: var(--al-sp-2); } .al-path p { margin-bottom: var(--al-sp-5); } /* --------------------------------------------------------------- Capability rows (editorial, alternating) --------------------------------------------------------------- */ .al-capability { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--al-sp-8); align-items: center; padding: var(--al-sp-7) 0; border-top: 1px solid var(--al-ink-border); } .al-capability:first-of-type { border-top: none; padding-top: 0; } .al-capability:nth-of-type(even) { direction: rtl; } .al-capability:nth-of-type(even) > * { direction: ltr; } @media (max-width: 860px) { .al-capability, .al-capability:nth-of-type(even) { grid-template-columns: 1fr; direction: ltr; } } .al-capability__index { font-size: var(--al-fs-xs); font-weight: 700; color: var(--al-accent-text); letter-spacing: 0.08em; margin-bottom: var(--al-sp-3); } .al-capability h3 { font-size: var(--al-fs-2xl); margin-bottom: var(--al-sp-3); } .al-capability p { font-size: var(--al-fs-base); max-width: 48ch; } .al-capability__points { margin-top: var(--al-sp-4); display: flex; flex-direction: column; gap: 10px; } .al-capability__points li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--al-fs-sm); color: var(--al-white); } .al-capability__points svg { width: 16px; height: 16px; margin-top: 3px; color: var(--al-accent-text); flex-shrink: 0; } .al-capability__visual { border: 1px solid var(--al-ink-border); border-radius: var(--al-radius-lg); background: var(--al-ink-2); padding: var(--al-sp-6); min-height: 220px; display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------- Product / ecosystem cards --------------------------------------------------------------- */ .al-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--al-sp-5); } @media (max-width: 860px) { .al-products { grid-template-columns: 1fr; } } /* Two-column variant of the same card component for wide viewports; still collapses to one column under 860px via the rule above. */ @media (min-width: 861px) { .al-products--cols-2 { grid-template-columns: repeat(2, 1fr); } } .al-product-card { border: 1px solid var(--al-ink-border); border-radius: var(--al-radius-lg); padding: var(--al-sp-6); background: var(--al-ink-2); transition: border-color var(--al-dur) var(--al-ease), transform var(--al-dur) var(--al-ease); display: flex; flex-direction: column; } .al-product-card:hover { border-color: var(--al-teal); transform: translateY(-3px); } .al-product-card__mark { width: 40px; height: 40px; border-radius: 10px; background: var(--al-teal-soft); color: var(--al-accent-text); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: var(--al-sp-5); } .al-product-card h3 { font-size: var(--al-fs-lg); margin-bottom: var(--al-sp-2); } .al-product-card p { flex: 1; margin-bottom: var(--al-sp-5); } /* --------------------------------------------------------------- Trust / security grid --------------------------------------------------------------- */ .al-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--al-sp-5); } @media (max-width: 860px) { .al-trust-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .al-trust-grid { grid-template-columns: 1fr; } } /* services.html and pricing.html want 3 columns instead of the 4-col default on wide viewports (an inline style previously did this, but inline styles outrank the media queries above at every width, so the grid never collapsed on mobile). Scoping it to min-width keeps it out of the way of the existing collapse rules below 860px. */ @media (min-width: 861px) { .al-trust-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } } .al-trust-item { padding: var(--al-sp-5); border: 1px solid var(--al-ink-border); border-radius: var(--al-radius-md); } .al-trust-item svg { width: 22px; height: 22px; color: var(--al-accent-text); margin-bottom: var(--al-sp-3); } .al-trust-item h3 { font-size: var(--al-fs-base); margin-bottom: 6px; } .al-trust-item p { font-size: var(--al-fs-sm); margin: 0; } /* --------------------------------------------------------------- Disclosure / regulatory note block --------------------------------------------------------------- */ .al-disclosure { border: 1px solid var(--al-ink-border); border-left: 3px solid var(--al-teal); border-radius: var(--al-radius-md); padding: var(--al-sp-5) var(--al-sp-6); background: var(--al-ink-2); } .al-disclosure p { font-size: var(--al-fs-sm); color: var(--al-muted); margin: 0; } .al-disclosure p + p { margin-top: 10px; } .al-disclosure strong { color: var(--al-white); } .al-legal-review { border: 1px solid rgba(217,154,60,0.35); border-left: 3px solid var(--al-amber); background: var(--al-amber-soft); border-radius: var(--al-radius-md); padding: var(--al-sp-5) var(--al-sp-6); } .al-legal-review p { color: var(--al-white); opacity: 0.9; } /* --------------------------------------------------------------- CTA band --------------------------------------------------------------- */ .al-cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--al-sp-6); flex-wrap: wrap; padding: var(--al-sp-7) 0; } .al-cta-band h2 { margin: 0; } .al-cta-band__actions { display: flex; gap: var(--al-sp-3); flex-wrap: wrap; } /* --------------------------------------------------------------- Footer — institutional, four layers: identity / customer destinations / trust & legal / corporate legal band --------------------------------------------------------------- */ .al-footer { border-top: 1px solid var(--al-border); background: var(--al-bg); } .al-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--al-sp-8); } /* Specificity fix: `.al-container` (also on this element) is `.al .al-container` (0,2,0) — a bare `.al-footer__grid` (0,1,0) loses the padding shorthand fight entirely, so top/bottom padding computed to 0 regardless of the value here. Scoping to `.al .al-footer__grid` (0,2,0) restores the intended vertical rhythm without touching `.al-container`'s horizontal gutter. */ .al .al-footer__grid { padding-top: var(--al-sp-7); padding-bottom: var(--al-sp-8); } @media (max-width: 860px) { .al-footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--al-sp-7); } .al .al-footer__grid { padding-top: var(--al-sp-6); padding-bottom: var(--al-sp-7); } .al-footer__identity { grid-column: 1 / -1; } } @media (max-width: 560px) { .al-footer__grid { grid-template-columns: 1fr; gap: var(--al-sp-7); } .al .al-footer__grid { padding-top: var(--al-sp-5); } } .al-footer__identity .al-brand__mark { margin-bottom: var(--al-sp-4); } .al-footer__identity .al-brand__mark img { width: 30px; height: 30px; } .al-footer__identity .al-brand__word { font-size: 23px; } .al-footer__identity p { font-size: var(--al-fs-sm); color: var(--al-text-muted); max-width: 36ch; line-height: 1.65; margin: 0; } .al-footer__col h4 { font-size: var(--al-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--al-text-faint); margin-bottom: var(--al-sp-4); font-weight: 600; } .al-footer__col ul { display: flex; flex-direction: column; gap: 12px; } .al-footer__col a { font-size: var(--al-fs-sm); color: var(--al-text-muted); transition: color var(--al-dur-fast) var(--al-ease); } .al-footer__col a:hover { color: var(--al-accent-text); } /* Corporate legal band — full-bleed, visually distinct from the destinations grid above */ .al-footer__legalband { border-top: 1px solid var(--al-border); background: var(--al-surface); } .al-footer__legalband-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--al-sp-7); flex-wrap: wrap; } /* Same specificity fix as .al-footer__grid above; also gives this lower band breathing room comparable to the grid above it, so both dividers read consistently. */ .al .al-footer__legalband-inner { padding-top: var(--al-sp-7); padding-bottom: var(--al-sp-6); } @media (max-width: 860px) { .al .al-footer__legalband-inner { padding-top: var(--al-sp-6); } } .al-footer__legalband-text { max-width: 68ch; } .al-footer__copyright { font-size: var(--al-fs-sm); color: var(--al-text); font-weight: 600; margin: 0 0 10px; } .al-footer__disclosure { font-size: var(--al-fs-sm); color: var(--al-text-muted); line-height: 1.7; margin: 0 0 10px; } .al-footer__trademarks { font-size: var(--al-fs-xs); color: var(--al-text-muted); margin: 0; letter-spacing: 0.01em; } .al-footer__legalband-utility { flex-shrink: 0; } @media (max-width: 640px) { .al-footer__legalband-inner { flex-direction: column; align-items: flex-start; } .al-footer__legalband-utility { align-self: flex-start; } } .al-footer__cookie-link { display: inline-block; margin-top: 10px; font-size: var(--al-fs-sm); color: var(--al-text-muted); transition: color var(--al-dur-fast) var(--al-ease); } .al-footer__cookie-link:hover { color: var(--al-accent-text); } /* Minimal footer (utility pages: app / thank-you / error) */ .al-footer--minimal .al-footer__legalband { border-top: none; } .al-footer--minimal .al-footer__legalband-inner { padding: var(--al-sp-6) 0; } /* --------------------------------------------------------------- Forms --------------------------------------------------------------- */ .al-form { display: flex; flex-direction: column; gap: var(--al-sp-5); } .al-field { display: flex; flex-direction: column; gap: 8px; } .al-field label { font-size: var(--al-fs-sm); font-weight: 600; color: var(--al-white); } .al-field .al-hint { font-size: var(--al-fs-xs); color: var(--al-muted-2); } .al-field input, .al-field select, .al-field textarea { font-family: var(--al-font); font-size: var(--al-fs-base); color: var(--al-white); background: var(--al-ink-2); border: 1px solid var(--al-ink-border-strong); border-radius: var(--al-radius-sm); padding: 13px 16px; min-height: 48px; transition: border-color var(--al-dur-fast) var(--al-ease); } .al-field textarea { min-height: 140px; resize: vertical; } .al-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } .al-field input:focus, .al-field select:focus, .al-field textarea:focus { outline: none; border-color: var(--al-focus); } .al-field--error input, .al-field--error select, .al-field--error textarea { border-color: var(--al-danger); } .al-field__error { font-size: var(--al-fs-xs); color: var(--al-danger); display: none; } .al-field--error .al-field__error { display: block; } .al-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--al-sp-4); } @media (max-width: 640px) { .al-row-2 { grid-template-columns: 1fr; } } .al-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .al-form__status { font-size: var(--al-fs-sm); padding: var(--al-sp-4); border-radius: var(--al-radius-sm); display: none; } .al-form__status[data-state="success"] { display: block; background: rgba(63,178,127,0.14); color: var(--al-success); border: 1px solid rgba(63,178,127,0.35); } .al-form__status[data-state="error"] { display: block; background: rgba(226,87,76,0.12); color: var(--al-danger); border: 1px solid rgba(226,87,76,0.35); } .al-form__status[data-state="info"] { display: block; background: var(--al-amber-soft); color: var(--al-amber); border: 1px solid rgba(217,154,60,0.35); } .al-form__submit[aria-busy="true"] { opacity: 0.7; pointer-events: none; } /* --------------------------------------------------------------- Accordion (used on payments-compliance / legal) --------------------------------------------------------------- */ .al-accordion__item { border-bottom: 1px solid var(--al-ink-border); } .al-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--al-sp-4); background: none; border: none; color: var(--al-white); font-family: var(--al-font); font-size: var(--al-fs-base); font-weight: 600; text-align: left; padding: var(--al-sp-5) 4px; cursor: pointer; min-height: 44px; } .al-accordion__trigger svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--al-accent-text); transition: transform var(--al-dur) var(--al-ease); } .al-accordion__item[data-open="true"] .al-accordion__trigger svg { transform: rotate(45deg); } .al-accordion__panel { overflow: hidden; max-height: 0; transition: max-height var(--al-dur-slow) var(--al-ease); } .al-accordion__panel-inner { padding: 0 4px var(--al-sp-5); } .al-accordion__panel-inner p { font-size: var(--al-fs-sm); } /* --------------------------------------------------------------- Scroll reveal (progressive enhancement — content visible by default) --------------------------------------------------------------- */ .al-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--al-dur-slow) var(--al-ease), transform var(--al-dur-slow) var(--al-ease); } .al-reveal.is-visible { opacity: 1; transform: none; } .js-no .al-reveal { opacity: 1; transform: none; } /* Staggered entrance within card groups — pure CSS, no JS timing logic */ .al-products .al-product-card.al-reveal:nth-child(1) { transition-delay: 0ms; } .al-products .al-product-card.al-reveal:nth-child(2) { transition-delay: 80ms; } .al-products .al-product-card.al-reveal:nth-child(3) { transition-delay: 160ms; } .al-trust-grid .al-trust-item.al-reveal:nth-child(1) { transition-delay: 0ms; } .al-trust-grid .al-trust-item.al-reveal:nth-child(2) { transition-delay: 60ms; } .al-trust-grid .al-trust-item.al-reveal:nth-child(3) { transition-delay: 120ms; } .al-trust-grid .al-trust-item.al-reveal:nth-child(4) { transition-delay: 180ms; } .al-paths .al-path.al-reveal:nth-child(2) { transition-delay: 100ms; } @media (prefers-reduced-motion: reduce) { .al * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .al-reveal { opacity: 1 !important; transform: none !important; } .al-diagram__pulse { animation: none !important; } } /* --------------------------------------------------------------- Back to top / WhatsApp --------------------------------------------------------------- */ .al-backtotop { position: fixed; right: var(--al-sp-5); bottom: var(--al-sp-5); width: 48px; height: 48px; border-radius: 50%; background: var(--al-ink-2); border: 1px solid var(--al-ink-border-strong); color: var(--al-white); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--al-dur) var(--al-ease), transform var(--al-dur) var(--al-ease); z-index: 400; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .al-backtotop.is-visible { opacity: 1; visibility: visible; transform: none; } .al-backtotop svg { width: 18px; height: 18px; } .al-whatsapp { position: fixed; right: var(--al-sp-5); bottom: 80px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--al-radius-pill); background: #1f9587; color: #fff; font-weight: 600; font-size: var(--al-fs-sm); box-shadow: 0 10px 24px rgba(0,0,0,0.3); z-index: 400; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (max-width: 640px) { .al-backtotop { bottom: 84px; } .al-whatsapp { bottom: 20px; right: 20px; } } /* --------------------------------------------------------------- Page header (secondary pages) --------------------------------------------------------------- */ .al-page-header { padding: var(--al-sp-8) 0 var(--al-sp-6); text-align: center; border-bottom: 1px solid var(--al-ink-border); } .al-page-header h1 { margin-bottom: var(--al-sp-3); } .al-page-header p { max-width: 60ch; margin: 0 auto; } .al-breadcrumb { display: flex; justify-content: center; gap: 8px; font-size: var(--al-fs-xs); color: var(--al-muted-2); margin-top: var(--al-sp-3); } .al-breadcrumb a { color: var(--al-muted-2); } .al-breadcrumb a:hover { color: var(--al-accent-text); }