/* ============================================================================ 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. ========================================================================== */ :root{ --vanta:#05070E; --navy:#0B1022; --gold:#B8A272; --gold-b:#C9A840; --gold-d:#7A6534; --oat:#EEF0F8; --ink-1:rgba(238,240,248,0.92); --ink-2:rgba(238,240,248,0.62); --ink-3:rgba(238,240,248,0.40); --ink-4:rgba(238,240,248,0.22); --hair:rgba(255,255,255,0.06); --hair-g:rgba(184,162,114,0.18); --display:'Inter',sans-serif; --mono:'JetBrains Mono',monospace; --body:'Inter',sans-serif; --shell:1180px; --ease:cubic-bezier(.22,1,.36,1); } /* ── 1. Site-wide refinements ─────────────────────────────────────────────── */ /* Smoother kerning + a luxury text-selection accent everywhere */ html{ text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%; } ::selection{ background:rgba(184,162,114,0.26); color:#fff; } ::-moz-selection{ background:rgba(184,162,114,0.26); color:#fff; } /* A slimmer, on-brand scrollbar (desktop) */ @media (pointer:fine){ *{ scrollbar-width:thin; scrollbar-color:rgba(184,162,114,0.35) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(184,162,114,.5),rgba(122,101,52,.5)); border-radius:8px; border:2px solid var(--vanta); } ::-webkit-scrollbar-thumb:hover{ background:rgba(201,168,64,.7); } } /* 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(--gold-b); 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(--hair); 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(--ink-3); text-decoration:none; transition:color .2s var(--ease); } .ab-legal-bar__links a:hover{ color:var(--gold); } .ab-legal-bar__disclaimer{ font-family:var(--body); font-weight:300; font-size:11px; line-height:1.7; color:var(--ink-4); 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%, rgba(184,162,114,.07), transparent 60%), radial-gradient(900px circle at 100% 100%, rgba(11,16,34,.9), transparent 55%); } .lx-grid{ position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; background-image: linear-gradient(rgba(160,190,255,.020) 1px,transparent 1px), linear-gradient(90deg,rgba(160,190,255,.020) 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:rgba(5,7,14,.8); backdrop-filter:blur(32px) saturate(180%); -webkit-backdrop-filter:blur(32px) saturate(180%); border-bottom:1px solid rgba(255,255,255,.05); } .lx-nav::after{ content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(184,162,114,.25),transparent); } .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(--body); font-weight:200; font-size:17px; color:rgba(238,240,248,.85); } .lx-logo .b{ font-family:var(--display); font-weight:800; font-size:17px; color:var(--gold-b); 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(--ink-2); text-decoration:none; transition:color .2s var(--ease); } .lx-nav__links a:hover{ color:var(--gold); } @media (max-width:680px){ .lx-nav__links a:not(.lx-cta){ display:none; } } .lx-cta{ background:var(--gold); color:var(--vanta) !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(--gold-b); transform:translateY(-1px); box-shadow:0 8px 28px rgba(184,162,114,.3); } /* 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(--gold); 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(--gold)); } .lx-title{ font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:1.04; font-size:clamp(38px,6vw,68px); color:var(--oat); background:linear-gradient(180deg,#fff 0%,rgba(238,240,248,.72) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .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(--ink-2); } .lx-updated{ margin-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--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(--ink-3); margin-bottom:14px; font-weight:500; } .lx-toc a{ display:block; color:var(--ink-2); text-decoration:none; padding:3px 0; transition:color .2s var(--ease); } .lx-toc a:hover{ color:var(--gold); } } /* Prose */ .lx-prose{ max-width:760px; } .lx-section{ padding:34px 0; border-top:1px solid var(--hair); 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(--oat); margin-bottom:18px; display:flex; gap:14px; align-items:baseline; } .lx-section h2 .num{ font-family:var(--mono); font-size:13px; color:var(--gold); font-weight:500; } .lx-section h3{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink-1); margin:26px 0 10px; } .lx-prose p{ font-family:var(--body); font-weight:300; font-size:15.5px; line-height:1.78; color:var(--ink-2); margin-bottom:16px; } .lx-prose a{ color:var(--gold-b); text-decoration:none; border-bottom:1px solid rgba(201,168,64,.3); } .lx-prose a:hover{ border-bottom-color:var(--gold-b); } .lx-prose strong{ color:var(--ink-1); 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(--ink-2); } .lx-prose li::before{ content:''; position:absolute; left:4px; top:11px; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--gold-b),var(--gold-d)); } /* Callout box for compliance notices */ .lx-callout{ margin:22px 0; padding:22px 24px; border-radius:10px; background:linear-gradient(180deg,rgba(184,162,114,.07),rgba(184,162,114,.02)); border:1px solid var(--hair-g); } .lx-callout__label{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; } .lx-callout p{ font-size:13.5px; line-height:1.7; color:var(--ink-2); margin:0; } /* Contact / data card */ .lx-card{ margin-top:14px; padding:22px 24px; border-radius:10px; border:1px solid var(--hair); background:rgba(255,255,255,.015); font-family:var(--mono); font-size:13px; line-height:1.9; color:var(--ink-2); } .lx-card a{ color:var(--gold-b); 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(--hair); background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .lx-doc:hover{ border-color:var(--hair-g); transform:translateY(-3px); box-shadow:0 20px 50px -20px rgba(0,0,0,.6); } .lx-doc__k{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } .lx-doc__t{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--oat); margin:12px 0 8px; } .lx-doc__d{ font-family:var(--body); font-weight:300; font-size:14px; line-height:1.65; color:var(--ink-2); } .lx-doc__go{ margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--gold-b); } /* Footer (mirrors .footer-v2 + integrated legal bar) */ .lx-footer{ position:relative; z-index:10; border-top:1px solid var(--hair); padding:48px 28px; margin-top:40px; } .lx-footer::before{ content:''; position:absolute; top:-1px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(184,162,114,.18),transparent); } .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(--body); font-weight:200; font-size:14px; color:var(--ink-3); } .lx-footer__brand .b{ font-family:var(--display); font-weight:800; font-size:14px; color:rgba(184,162,114,.5); 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(--ink-4); text-decoration:none; transition:color .2s var(--ease); } .lx-footer__links a:hover{ color:var(--gold); } .lx-footer__legal{ border-top:1px solid var(--hair); padding-top:20px; font-family:var(--body); font-weight:300; font-size:11px; line-height:1.75; color:var(--ink-4); max-width:1000px; } .lx-footer__copy{ font-family:var(--mono); font-size:10px; color:var(--ink-4); } @media (max-width:640px){ .lx-hero{ padding:128px 0 40px; } .lx-footer__top{ flex-direction:column; align-items:flex-start; } }