/* ============================================================================ artificialBRIDGE — Luxury Design Layer (v6) ---------------------------------------------------------------------------- Loaded LAST in so it refines the per-page inline base styles without requiring a rewrite of each page. Two jobs: 1. Site-wide polish + responsive hardening for the existing canonical pages. 2. A self-contained component system for the legal pages (.lx-*). Palette is inherited from each page's :root (vanta / navy / gold / oat); we provide fallbacks so the sheet is also valid standalone. ========================================================================== */ /* Manrope — required for the wordmark (brand kit spec: light 300 + extrabold 800) */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700;800&display=swap'); :root{ /* Colour, elevation and motion tokens live in /data/theme.css, which loads last on every page. This sheet keeps only typography + geometry so the legal pages stay self-describing. */ --ab-font:'Manrope','Helvetica Neue',Arial,sans-serif; --ab-tracking:-0.02em; --wordmark:'Manrope','Helvetica Neue',Arial,sans-serif; --display:'Manrope','Helvetica Neue',Arial,sans-serif; --mono:'Manrope','Helvetica Neue',Arial,sans-serif; --body:'Manrope','Helvetica Neue',Arial,sans-serif; --shell:1180px; } /* ── 1. Site-wide refinements ─────────────────────────────────────────────── */ /* Smoother kerning + a luxury text-selection accent everywhere */ html{ text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%; } ::selection{ background:var(--ab-select-bg); color:var(--ab-select-fg); } ::-moz-selection{ background:var(--ab-select-bg); color:var(--ab-select-fg); } /* A slimmer, on-brand scrollbar (desktop) */ @media (pointer:fine){ *{ scrollbar-width:thin; scrollbar-color:rgb(var(--ab-ink-4-rgb) / 0.55) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:rgb(var(--ab-ink-4-rgb) / 0.45); border-radius:8px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:rgb(var(--ab-ink-3-rgb) / 0.75); background-clip:padding-box; } } /* Accessible keyboard focus — the inline styles ship none */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--ab-focus); outline-offset:3px; border-radius:3px; } /* Respect reduced-motion: kill the heavy ambient/grain animation + reveals */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .grain,.ambient{ display:none !important; } .reveal{ opacity:1 !important; transform:none !important; } } /* ── 2. Touch / mobile hardening for the custom cursor ────────────────────── */ /* Pages set `cursor:none` on body + a JS cursor. On touch there is no pointer, which leaves controls with no visible cursor. Restore native cursors and hide the decorative cursor on any device without a fine hover pointer. */ @media (hover:none), (pointer:coarse){ html, body, a, button, input, textarea, select, label{ cursor:auto !important; } .cursor, .cursor-ring{ display:none !important; } } /* ── 3. Responsive hardening for the shared nav + footer ──────────────────── */ /* Several pages have thin/empty @media coverage; clamp the chrome fluidly so every page degrades gracefully on small screens regardless of its own CSS. */ @media (max-width:640px){ .nav-v2 > div{ padding-left:18px !important; padding-right:18px !important; gap:12px !important; } .footer-v2{ padding:40px 20px !important; margin-top:72px !important; } .footer-v2 > div{ flex-direction:column !important; align-items:flex-start !important; gap:22px !important; } } /* ── 4. The standardized legal bar injected into every canonical footer ───── */ .ab-legal-bar{ position:relative; z-index:10; max-width:1400px; margin:28px auto 0; padding-top:24px; border-top:1px solid var(--ab-border); display:flex; flex-direction:column; gap:16px; } .ab-legal-bar__links{ display:flex; flex-wrap:wrap; gap:22px; } .ab-legal-bar__links a{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ab-ink-3); text-decoration:none; transition:color .2s var(--ease); } .ab-legal-bar__links a:hover{ color:var(--ab-accent); } .ab-legal-bar__disclaimer{ font-family:var(--body); font-weight:300; font-size:11px; line-height:1.7; color:var(--ab-ink-3); max-width:980px; } /* ============================================================================ LEGAL PAGE COMPONENT SYSTEM (.lx-*) — used by /privacy /terms /security /hipaa /legal. Self-contained: these pages do not load Tailwind. ========================================================================== */ .lx-shell{ position:relative; z-index:10; max-width:var(--shell); margin:0 auto; padding:0 28px; } /* Ambient depth identical in spirit to the marketing pages */ .lx-ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(800px circle at 50% -10%, rgb(var(--ab-accent-rgb) / 0.05), transparent 62%); } .lx-grid{ position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; background-image: linear-gradient(rgb(var(--ab-ink-rgb) / 0.045) 1px,transparent 1px), linear-gradient(90deg,rgb(var(--ab-ink-rgb) / 0.045) 1px,transparent 1px); background-size:80px 80px; -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 15%,transparent 100%); mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 15%,transparent 100%); } /* Nav (mirrors .nav-v2 so the legal pages feel native) */ .lx-nav{ position:fixed; top:0; left:0; right:0; z-index:100; background:var(--ab-nav-bg); backdrop-filter:blur(32px) saturate(140%); -webkit-backdrop-filter:blur(32px) saturate(140%); border-bottom:1px solid var(--ab-border); } .lx-nav::after{ content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--ab-border); } .lx-nav__inner{ max-width:1400px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .lx-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; } .lx-logo svg{ width:24px; height:20px; } .lx-logo .a{ font-family:var(--wordmark); font-weight:300; font-size:17px; color:var(--ab-ink); letter-spacing:var(--ab-tracking); } .lx-logo .b{ font-family:var(--wordmark); font-weight:800; font-size:17px; color:var(--ab-accent); letter-spacing:-.03em; } .lx-nav__links{ display:flex; align-items:center; gap:24px; } .lx-nav__links a{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ab-ink-2); text-decoration:none; transition:color .2s var(--ease); } .lx-nav__links a:hover{ color:var(--ab-accent); } @media (max-width:680px){ .lx-nav__links a:not(.lx-cta){ display:none; } } .lx-cta{ background:var(--ab-accent); color:var(--ab-on-accent) !important; font-family:var(--display) !important; font-weight:700 !important; font-size:11px !important; letter-spacing:.02em !important; text-transform:none !important; padding:10px 18px; border-radius:4px; transition:all .25s var(--ease); } .lx-cta:hover{ background:var(--ab-accent-hi); transform:translateY(-2px); box-shadow:0 2px 4px rgb(var(--ab-accent-rgb) / 0.18), 0 12px 24px -8px rgb(var(--ab-accent-rgb) / 0.40); } /* Hero / header */ .lx-hero{ padding:150px 0 56px; } .lx-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ab-accent); display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; } .lx-eyebrow::before{ content:''; width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--ab-accent)); } .lx-title{ font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:1.04; font-size:clamp(38px,6vw,68px); color:var(--ab-ink); } .lx-lede{ margin-top:22px; max-width:640px; font-family:var(--body); font-weight:300; font-size:clamp(15px,2vw,18px); line-height:1.72; color:var(--ab-ink-2); } .lx-updated{ margin-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ab-ink-3); } /* Layout: prose + sticky table of contents on wide screens */ .lx-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:48px; padding-bottom:120px; } @media (min-width:980px){ .lx-layout{ grid-template-columns:230px minmax(0,1fr); gap:64px; } } .lx-toc{ display:none; } @media (min-width:980px){ .lx-toc{ display:block; position:sticky; top:110px; align-self:start; font-family:var(--mono); font-size:11px; line-height:1.9; } .lx-toc h4{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ab-ink-3); margin-bottom:14px; font-weight:500; } .lx-toc a{ display:block; color:var(--ab-ink-2); text-decoration:none; padding:3px 0; transition:color .2s var(--ease); } .lx-toc a:hover{ color:var(--ab-accent); } } /* Prose */ .lx-prose{ max-width:760px; } .lx-section{ padding:34px 0; border-top:1px solid var(--ab-border); scroll-margin-top:110px; } .lx-section:first-child{ border-top:0; padding-top:0; } .lx-section h2{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.18; font-size:clamp(22px,3vw,28px); color:var(--ab-ink); margin-bottom:18px; display:flex; gap:14px; align-items:baseline; } .lx-section h2 .num{ font-family:var(--mono); font-size:13px; color:var(--ab-accent); font-weight:500; } .lx-section h3{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--ab-ink); margin:26px 0 10px; } .lx-prose p{ font-family:var(--body); font-weight:300; font-size:15.5px; line-height:1.78; color:var(--ab-ink-2); margin-bottom:16px; } .lx-prose a{ color:var(--ab-accent); text-decoration:none; border-bottom:1px solid var(--ab-border); } .lx-prose a:hover{ border-bottom-color:var(--ab-accent); } .lx-prose strong{ color:var(--ab-ink); font-weight:600; } .lx-prose ul{ list-style:none; margin:8px 0 18px; padding:0; } .lx-prose li{ position:relative; padding-left:24px; margin-bottom:11px; font-family:var(--body); font-weight:300; font-size:15px; line-height:1.7; color:var(--ab-ink-2); } .lx-prose li::before{ content:''; position:absolute; left:4px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--ab-accent); } /* Callout box for compliance notices */ .lx-callout{ margin:22px 0; padding:22px 24px; border-radius:10px; background:var(--ab-surface); border:1px solid var(--ab-border); border-left:2px solid var(--ab-accent); box-shadow:var(--ab-shadow-1); } .lx-callout__label{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ab-accent); margin-bottom:10px; } .lx-callout p{ font-size:13.5px; line-height:1.7; color:var(--ab-ink-2); margin:0; } /* Contact / data card */ .lx-card{ margin-top:14px; padding:22px 24px; border-radius:10px; border:1px solid var(--ab-border); background:var(--ab-surface); box-shadow:var(--ab-shadow-1); font-family:var(--mono); font-size:13px; line-height:1.9; color:var(--ab-ink-2); } .lx-card a{ color:var(--ab-accent); border:0; } /* Legal hub grid (/legal) */ .lx-grid-cards{ display:grid; grid-template-columns:1fr; gap:18px; padding-bottom:120px; } @media (min-width:720px){ .lx-grid-cards{ grid-template-columns:1fr 1fr; } } .lx-doc{ display:block; padding:28px; border-radius:14px; text-decoration:none; border:1px solid var(--ab-border); background:var(--ab-surface); box-shadow:var(--ab-shadow-2); transition:var(--ab-transition); } .lx-doc:hover{ border-color:var(--ab-ink); transform:translateY(-3px); } .lx-doc__k{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ab-accent); } .lx-doc__t{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--ab-ink); margin:12px 0 8px; } .lx-doc__d{ font-family:var(--body); font-weight:300; font-size:14px; line-height:1.65; color:var(--ab-ink-2); } .lx-doc__go{ margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ab-accent); } /* Footer (mirrors .footer-v2 + integrated legal bar) */ .lx-footer{ position:relative; z-index:10; border-top:1px solid var(--ab-border); padding:48px 28px; margin-top:40px; } .lx-footer::before{ content:''; position:absolute; top:-1px; left:10%; right:10%; height:1px; background:var(--ab-border); } .lx-footer__inner{ max-width:1400px; margin:0 auto; display:flex; flex-direction:column; gap:24px; } .lx-footer__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; } .lx-footer__brand{ display:flex; align-items:baseline; } .lx-footer__brand .a{ font-family:var(--wordmark); font-weight:300; font-size:14px; color:var(--ab-ink-3); letter-spacing:var(--ab-tracking); } .lx-footer__brand .b{ font-family:var(--wordmark); font-weight:800; font-size:14px; color:var(--ab-ink-3); letter-spacing:-.03em; } .lx-footer__links{ display:flex; flex-wrap:wrap; gap:24px; } .lx-footer__links a{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ab-ink-3); text-decoration:none; transition:color .2s var(--ease); } .lx-footer__links a:hover{ color:var(--ab-accent); } .lx-footer__legal{ border-top:1px solid var(--ab-border); padding-top:20px; font-family:var(--body); font-weight:300; font-size:11px; line-height:1.75; color:var(--ab-ink-3); max-width:1000px; } .lx-footer__copy{ font-family:var(--mono); font-size:10px; color:var(--ab-ink-3); } @media (max-width:640px){ .lx-hero{ padding:128px 0 40px; } .lx-footer__top{ flex-direction:column; align-items:flex-start; } }