/* DATAMET V2 — shared design tokens + base reset. Loaded by every page (homepage, /venue, /automation, /gdpr). Color/type tokens carried over intentionally from the V1 brand (see DATAMET WEBSITE V2 discovery report, "Brand Evolution"). */ :root { --ink: #060B15; --ink-2: #0A1220; --ink-3: #0E1830; --paper: #F4F7FC; --azure: #4E8CFF; --azure-soft: rgba(78, 140, 255, .14); --mint: #3BD9C4; --text-d: #E9EFFA; --text-d-dim: #93A3BF; --text-l: #0D1626; --text-l-dim: #54617A; --line-d: rgba(148, 178, 230, .14); --line-l: rgba(13, 22, 38, .10); --radius: 18px; --font-display: 'Sora', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --nav-h: 72px; } * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { -webkit-tap-highlight-color: rgba(0,0,0,0); } html { scroll-behavior: smooth; } /* overflow-x:hidden lives on only, not : on it propagates to the viewport (still fully blocks horizontal scroll site-wide) without the computed overflow-y:auto side effect that setting it on too would cause — that would make its own scroll container and silently break position:sticky for every descendant relative to the real viewport (the Venue story section's sticky stage, in particular). */ html, body { max-width: 100%; } html { overflow-x: hidden; } body { font-family: var(--font-body); background: var(--ink); color: var(--text-d); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg, canvas, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } button, a, [role="button"] { touch-action: manipulation; } ul { list-style: none; } ::selection { background: var(--azure); color: #fff; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #fff; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* Visually-hidden but accessible (skip link target label, sr-only text) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip link: visible on focus, first focusable element in DOM order */ .skip-link { position: absolute; top: -48px; left: 16px; z-index: 1000; background: var(--azure); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: top .2s ease; } .skip-link:focus { top: 16px; } /* Consistent visible focus state across all interactive elements */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 15px; border-radius: 12px; padding: 13px 24px; min-height: 48px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .btn-primary { background: linear-gradient(135deg, #5B96FF, #3E7BF0); color: #fff; box-shadow: 0 8px 28px rgba(66, 124, 246, .35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(66, 124, 246, .45); } .btn-ghost { border: 1px solid var(--line-d); color: var(--text-d); background: rgba(255,255,255,.03); } .btn-ghost:hover { background: rgba(255,255,255,.07); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }