/* ============================================================ Avant Insights family — component layer (light theme). THE SOURCE OF TRUTH for color/type/space is css/avant-tokens.css (the --ai-* tokens, vendored from the Avant Insights Design System; loaded BEFORE this file). Do NOT add raw hex/brand values here — this :root block is only a BRIDGE that maps the working vars used below to the canonical --ai-* tokens. The accent swaps automatically via the data-product attribute on (parent=azure · triaxis=teal · auditron=action-navy), so there is no per-site colour block to edit. ============================================================ */ /* ===== RESET ===== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* ---- neutrals → --ai-n-* ---- */ --n0:var(--ai-n-0);--n25:var(--ai-n-25);--n50:var(--ai-n-50);--n100:var(--ai-n-100);--n200:var(--ai-n-200); --n300:var(--ai-n-300);--n400:var(--ai-n-400);--n500:var(--ai-n-500);--n600:var(--ai-n-600);--n700:var(--ai-n-700); --n800:var(--ai-n-800);--n900:var(--ai-n-900); /* ---- navy: shared family anchor → --ai-navy-* ---- */ --navy-50:var(--ai-navy-50);--navy-100:var(--ai-navy-100);--navy-300:var(--ai-navy-300);--navy-500:var(--ai-navy-500); --navy-700:var(--ai-navy-700);--navy-800:var(--ai-navy-800);--navy-900:var(--ai-navy-900); /* ---- accent: role tokens, set per site by [data-product] in avant-tokens.css ---- */ --accent:var(--ai-accent); --accent-hover:var(--ai-accent-hover); --accent-soft:var(--ai-accent-soft); --on-accent:var(--ai-on-accent); /* extra accent roles (deep text, soft border) follow the family — overridden per data-product below */ --accent-deep:var(--ai-azure-700); --accent-soft-bd:var(--ai-azure-100); /* ---- semantic surfaces / ink ---- */ --bg:var(--ai-n-0);--bg-soft:var(--ai-n-50);--surface:var(--ai-n-0); --ink:var(--ai-navy-800);--text:var(--ai-n-900);--muted:var(--ai-n-600);--faint:var(--ai-n-500); --border:var(--ai-n-200);--border-soft:var(--ai-n-100); --footer-bg:var(--ai-navy-900);--footer-text:var(--ai-n-300);--footer-dim:var(--ai-n-500);--footer-rule:var(--ai-navy-700); /* ---- semantic ---- */ --success:var(--ai-success);--warning:var(--ai-warning);--danger:var(--ai-danger);--info:var(--ai-info); /* ---- type ---- */ --font-display:var(--ai-font-display);--font-sans:var(--ai-font-sans);--font-mono:var(--ai-font-mono); /* ---- radius / shadow ---- */ --r-xs:var(--ai-radius-xs);--r-sm:var(--ai-radius-sm);--r-md:var(--ai-radius-md);--r-lg:var(--ai-radius-lg);--r-pill:var(--ai-radius-pill); --radius:var(--ai-radius-md);--radius-lg:var(--ai-radius-lg); --sh-xs:var(--ai-shadow-xs);--sh-sm:var(--ai-shadow-sm);--sh-md:var(--ai-shadow-md);--sh-lg:var(--ai-shadow-lg); /* ---- layout ---- */ --container:var(--ai-container-max); /* ---- legacy kit aliases (so kit pages/components keep resolving) ---- */ --blue:var(--accent);--blue-light:var(--accent);--blue-dim:var(--navy-700); --magenta:var(--accent);--cyan:var(--accent);--dim:var(--faint); --surface2:var(--n50);--border-blue:var(--accent-soft-bd); --green:var(--success);--red:var(--danger);--orange:var(--warning);--yellow:var(--warning); } /* extra accent roles per product (accent/hover/soft already swap via avant-tokens.css) */ [data-product="triaxis"]{--accent-deep:var(--ai-triaxis-700);--accent-soft-bd:var(--ai-triaxis-100);} [data-product="auditron"]{--accent-deep:var(--ai-auditron-700);--accent-soft-bd:var(--ai-auditron-100);} /* ===== BASE ===== */ html{scroll-behavior:smooth} body{font-family:var(--font-sans);background:var(--bg);color:var(--text); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;line-height:1.6} a{text-decoration:none;color:inherit} ::selection{background:var(--navy-100)} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* The dark-theme grid motif is a no-op in the light system */ .grid-bg{display:none} /* ===== TYPE HELPERS ===== */ .display{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.01em;color:var(--ink)} .eyebrow,.sec-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono); font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px} .sec-label .ln{width:24px;height:1px;background:var(--accent)} .sec-title{font-family:var(--font-sans);font-size:clamp(28px,3.4vw,40px);font-weight:600; line-height:1.16;letter-spacing:-.01em;color:var(--ink);margin-bottom:14px} .sec-sub,.lead{color:var(--muted);font-size:clamp(16px,1.4vw,18px);line-height:1.6;max-width:64ch} .grad{color:var(--accent)} .serif{font-family:var(--font-display)} /* ===== NAVIGATION ===== */ nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between; gap:24px;padding:16px 48px;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border-soft)} .nav-logo{display:flex;align-items:center} .nav-logo .logo-img{height:28px;width:auto} .nav-brand{font-family:var(--font-sans);font-size:19px;font-weight:600;color:var(--ink)} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{color:var(--n700);font-size:14px;font-weight:500;transition:color .2s} .nav-links a:hover,.nav-links a.active{color:var(--accent)} .nav-actions{display:flex;align-items:center;gap:14px} .nav-cta{background:var(--accent);color:var(--on-accent)!important;padding:9px 18px;border-radius:var(--r-sm); font-size:14px;font-weight:600;transition:background .2s} .nav-cta:hover{background:var(--accent-hover)} .nav-ghost{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--accent-deep); border:1px solid var(--n300);border-radius:var(--r-sm);padding:8px 13px;transition:border-color .2s} .nav-ghost:hover{border-color:var(--accent)} .nav-dropdown{position:relative} .nav-dropdown>a::after{content:' ▾';font-size:10px;opacity:.5} .nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:210px; background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:8px; opacity:0;visibility:hidden;transition:all .18s;z-index:200;box-shadow:var(--sh-lg);margin-top:8px} .nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible} .nav-dropdown-menu a{display:block;padding:9px 12px;border-radius:var(--r-sm);color:var(--n700);font-size:14px;font-weight:500;transition:all .15s} .nav-dropdown-menu a:hover{color:var(--accent);background:var(--accent-soft)} /* ===== CONTAINERS / SECTIONS ===== */ .container{max-width:var(--container);margin:0 auto;padding:0 48px} .container-narrow{max-width:880px;margin:0 auto;padding:0 48px} section{padding:84px 0;position:relative} .band{background:var(--bg-soft)} .rule-top{border-top:1px solid var(--border-soft)} /* ===== BUTTONS ===== */ .btn-p,.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent); padding:14px 26px;border-radius:var(--r-sm);font-size:16px;font-weight:600;border:1px solid var(--accent); transition:background .2s,border-color .2s;cursor:pointer} .btn-p:hover,.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)} .btn-s,.btn-ghost{display:inline-flex;align-items:center;gap:8px;color:var(--accent-deep);background:#fff; padding:14px 26px;border-radius:var(--r-sm);font-size:16px;font-weight:600;border:1px solid var(--n300); transition:border-color .2s,background .2s;cursor:pointer} .btn-s:hover,.btn-ghost:hover{border-color:var(--accent);background:var(--accent-soft)} .btn-light{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink); padding:14px 26px;border-radius:var(--r-sm);font-size:16px;font-weight:600;border:1px solid #fff; transition:background .2s,border-color .2s;cursor:pointer} .btn-light:hover{background:var(--n100);border-color:var(--n100)} .btn-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} /* ===== CARDS / CHIPS / STATS ===== */ .card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:32px} .card-soft{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px} .card-dash{border:1px dashed var(--n300);border-radius:var(--r-lg);padding:32px;background:var(--n25)} .chip{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:5px 12px;border-radius:var(--r-pill); background:var(--accent-soft);color:var(--accent-deep)} .stat-n{font-family:var(--font-sans);font-weight:700;font-size:clamp(32px,4vw,42px);line-height:1;color:var(--ink)} .stat-n.accent{color:var(--accent)} .stat-l{font-size:14px;color:var(--muted);margin-top:8px} .grid{display:grid;gap:24px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} /* navy feature band (re-usable dark surface inside a light page) */ .navy{background:var(--navy-900);color:#fff;border-radius:18px;padding:64px 56px} .navy .eyebrow{color:var(--navy-300)} .navy h2,.navy h3{color:#fff} .navy p{color:#9CB3C9} /* logo / trust strip — full-width band, inner content aligned to the 1200 container */ .trust{background:var(--n25);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)} .trust .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:40px;padding-top:22px;padding-bottom:22px} .trust .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--n400)} .trust .name{font-weight:600;font-size:15px;color:var(--muted)} /* ===== SCROLL REVEAL ===== */ .reveal{opacity:0;transform:translateY(24px);transition:all .7s cubic-bezier(.16,1,.3,1)} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s} @media(prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}} /* ===== HAMBURGER ===== */ .nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;z-index:101} .ham-line{display:block;width:22px;height:2px;background:var(--n700);border-radius:2px;transition:all .3s ease} .nav-hamburger[aria-expanded="true"] .ham-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .nav-hamburger[aria-expanded="true"] .ham-line:nth-child(2){opacity:0} .nav-hamburger[aria-expanded="true"] .ham-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} /* ===== VIEW MODE TOGGLE (Human / Agent) ===== */ .machine-content{display:none} [data-view-mode="machine"] .human-content{display:none} [data-view-mode="machine"] .machine-content{display:block} [data-view-mode="machine"] footer{display:none} .view-toggle{display:flex;align-items:center;height:32px;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden} .view-toggle label{display:flex;align-items:center;gap:5px;padding:4px 10px;cursor:pointer;font-family:var(--font-mono); font-size:11px;font-weight:500;color:var(--faint);transition:all .2s;user-select:none} .view-toggle label:first-of-type{border-right:1px solid var(--border)} .view-toggle input{position:absolute;opacity:0;pointer-events:none} .view-toggle input:checked+span{color:var(--accent)} .view-toggle .dot{width:5px;height:5px;border-radius:50%;border:1px solid currentColor;transition:all .2s} .view-toggle input:checked~.dot{background:currentColor} .machine-view{max-width:780px;margin:0 auto;padding:80px 48px} .machine-view pre{font-family:var(--font-mono);font-size:14px;line-height:1.85;color:var(--muted);white-space:pre-wrap;word-wrap:break-word;margin:0} .machine-view .mv-header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-soft)} .machine-view .mv-header .mv-title{font-family:var(--font-mono);font-size:13px;color:var(--accent);font-weight:500;margin-bottom:8px} .machine-view .mv-header .mv-url{font-family:var(--font-mono);font-size:12px;color:var(--faint)} .machine-view .mv-footer{margin-top:48px;padding-top:24px;border-top:1px solid var(--border-soft);font-family:var(--font-mono);font-size:12px;color:var(--faint);line-height:2} .machine-view .mv-footer a{color:var(--accent)} /* ===== FOOTER (navy) ===== */ footer{background:var(--footer-bg);color:var(--footer-text)} footer a{color:var(--footer-text);transition:color .2s} footer a:hover{color:#fff} /* ===== RESPONSIVE ===== */ @media(max-width:1024px){ .container,.container-narrow{padding:0 28px} .navy{padding:48px 36px} nav{padding:14px 24px} } @media(max-width:768px){ nav{flex-wrap:wrap;padding:12px 18px} .nav-hamburger{display:flex} .nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:0;padding:12px 0 6px;border-top:1px solid var(--border-soft);margin-top:12px} .nav-links.open{display:flex} .nav-links a{padding:12px 0;font-size:15px;border-bottom:1px solid var(--border-soft);width:100%} .nav-actions{flex-direction:column;align-items:stretch;width:100%;gap:8px;margin-top:8px} .nav-cta,.nav-ghost{text-align:center;justify-content:center;width:100%;padding:13px 18px} .nav-dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;min-width:auto;border:none;box-shadow:none;padding:0 0 0 14px;background:none} .nav-dropdown>a::after{content:''!important} .view-toggle{display:none} section{padding:56px 0} .cols-2,.cols-3,.cols-4{grid-template-columns:1fr} .navy{padding:36px 24px} .trust .container{gap:18px;padding-top:18px;padding-bottom:18px} } @media(max-width:480px){ .btn-p,.btn,.btn-s,.btn-ghost{padding:12px 20px;font-size:15px} }