/* Shared AutoLive Pro design system. Loaded after the legacy components. */
:root { --color-surface:#0b0d16; --color-surface-dim:#090b12; --color-surface-container-lowest:#080a10; --color-surface-container-low:#111420; --color-surface-container:#151927; --color-surface-container-high:#1c2131; --color-surface-container-highest:#252b3e; --color-on-surface:#f0f1fa; --color-on-surface-variant:#a6aec3; --color-outline:#58617c; --color-outline-variant:#292e42; --color-primary:#b3a8ff; --color-primary-container:#7965ee; --color-on-primary:#fff; --color-tertiary:#84e7dc; --color-on-tertiary:#0b302d; --color-tertiary-container:#285c5a; --color-secondary:#b3a8ff; --color-card-bg:#111521; --color-card-hover:#191e2c; --color-glass-bg:rgba(19,22,35,.9); --color-header-bg:rgba(11,13,22,.92); --pro-accent:#8e7bff; --pro-line:#272d40; }
html:not(.dark) { --color-surface:#f7f8fc; --color-surface-dim:#f0f2f8; --color-surface-container-lowest:#fff; --color-surface-container-low:#fff; --color-surface-container:#eef0f7; --color-surface-container-high:#e5e8f2; --color-surface-container-highest:#dbe0ed; --color-on-surface:#182035; --color-on-surface-variant:#59647a; --color-outline-variant:#dce1ec; --color-primary:#6550cc; --color-primary-container:#7863ed; --color-tertiary:#16776d; --color-on-tertiary:#fff; --color-tertiary-container:#b3ded8; --color-card-bg:#fff; --color-card-hover:#fafaff; --color-glass-bg:rgba(255,255,255,.95); --color-header-bg:rgba(247,248,252,.94); --pro-line:#dce1ec; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:100px; } body { margin:0; font-family:Geist,Inter,'Segoe UI',sans-serif; background:var(--color-surface); color:var(--color-on-surface); } button,input,textarea,select { font:inherit; } a { text-decoration:none; } button,a { -webkit-tap-highlight-color:transparent; } :focus-visible { outline:3px solid var(--color-primary); outline-offset:5px; } img { max-width:100%; } .skip-link { position:fixed; z-index:10000; top:-100px; left:16px; padding:12px 18px; border-radius:8px; background:#fff; color:#19192a; } .skip-link:focus { top:10px; }
.pro-container { width:min(1200px,calc(100% - 64px)); margin-inline:auto; } .pro-main { padding-top:82px; } .pro-section { padding:100px 0; } .pro-section + .pro-section { border-top:1px solid var(--pro-line); } .pro-eyebrow { display:flex; gap:9px; align-items:center; margin:0 0 20px; color:var(--color-primary); font-size:11px; line-height:1.5; letter-spacing:.18em; font-weight:700; text-transform:uppercase; } .pro-eyebrow::before { content:''; width:16px; height:2px; background:currentColor; } .pro-section h2 { font-size:clamp(30px,4vw,48px); line-height:1.12; letter-spacing:-.045em; font-weight:600; margin:0 0 20px; } .pro-lead { color:var(--color-on-surface-variant); font-size:17px; line-height:1.8; max-width:650px; margin:0; } .pro-header { position:fixed; z-index:60; inset:0 0 auto; height:82px; background:var(--color-header-bg); backdrop-filter:blur(18px); border-bottom:1px solid var(--pro-line); } .pro-header-inner { width:min(1320px,calc(100% - 64px)); height:100%; margin:auto; display:flex; align-items:center; gap:28px; justify-content:space-between; } .pro-brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; color:var(--color-on-surface); font-size:23px; font-weight:650; letter-spacing:-.8px; } .pro-brand>span { display:inline-flex; align-items:center; gap:7px; } .pro-brand img { width:36px; height:36px; } .pro-brand-tag { font-size:9px; font-weight:750; letter-spacing:1px; border:1px solid var(--color-outline-variant); border-radius:5px; padding:3px 4px; color:var(--color-primary); } .pro-desktop-nav { display:flex; align-items:center; gap:25px; } .pro-desktop-nav .nav-link { font-family:inherit; font-size:13px; font-weight:500; letter-spacing:0; color:var(--color-on-surface-variant); padding:28px 0; } .pro-desktop-nav .nav-link.active,.pro-desktop-nav .nav-link:hover { color:var(--color-on-surface); } .pro-desktop-nav .nav-link::after { height:2px; bottom:18px; background:var(--pro-accent); } .pro-header-actions { display:flex; align-items:center; gap:9px; } .pro-icon-btn { display:inline-flex!important; width:35px; height:35px; padding:0!important; align-items:center; justify-content:center; border:0!important; border-radius:9px; color:var(--color-on-surface-variant); background:transparent!important; cursor:pointer; } .pro-icon-btn:hover { background:var(--color-surface-container-high)!important; color:var(--color-on-surface); } .pro-icon-btn .material-symbols-outlined { font-size:21px; } .pro-nav-cta { display:flex; gap:18px; align-items:center; font-size:12px; font-weight:600; color:#fff; background:#7561df; padding:10px 15px; border-radius:8px; margin-left:5px; } .pro-menu-btn { display:none!important; } .pro-button { display:inline-flex; justify-content:center; align-items:center; gap:20px; min-height:49px; padding:13px 22px; font-size:13px; font-weight:600; background:linear-gradient(135deg,#9584ff,#7760de); border:1px solid #a091ff; color:#fff; border-radius:9px; transition:transform .2s,box-shadow .2s; cursor:pointer; } .pro-button:hover { transform:translateY(-2px); box-shadow:0 8px 30px #7760de38; } .pro-button-secondary { background:transparent; border-color:var(--color-outline-variant); color:var(--color-on-surface); } .pro-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } .pro-text-link { display:inline-flex; align-items:center; gap:12px; color:var(--color-primary); font-weight:600; font-size:14px; } .pro-text-link:hover { gap:18px; }
.pro-hero { padding:94px 0 80px; position:relative; overflow:hidden; } .pro-hero::before { content:''; position:absolute; pointer-events:none; inset:-20% -30% 0 30%; background:radial-gradient(ellipse at center,#7462ed19,transparent 64%); } .pro-hero-grid { position:relative; display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:65px; } .pro-release { display:inline-flex; align-items:center; gap:9px; color:var(--color-on-surface-variant); border:1px solid var(--pro-line); background:var(--color-surface-container-low); padding:7px 10px; border-radius:6px; font-size:10px; font-weight:550; margin-bottom:28px; } .pro-release i { width:5px; height:5px; border-radius:50%; background:#8e7bff; } .pro-hero h1 { font-size:clamp(42px,4.7vw,65px); font-weight:600; line-height:1.09; letter-spacing:-.055em; margin:0 0 24px; } .pro-hero h1 em { font-style:normal; color:var(--color-primary); } .pro-hero .pro-lead { font-size:16px; max-width:460px; line-height:1.85; } .pro-meta-line { display:flex; flex-wrap:wrap; gap:18px; font-size:11px; color:var(--color-on-surface-variant); margin-top:23px; } .pro-meta-line span::before { content:'✓'; color:var(--color-tertiary); margin-right:6px; }
.studio { background:#121724; color:#eef0fc; border:1px solid #343951; border-radius:14px; box-shadow:0 35px 90px #0005,0 0 80px #7462ed0d; overflow:hidden; transform:perspective(1200px) rotateY(-4deg) rotateX(2deg); } .studio-top { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 17px; border-bottom:1px solid #2a3045; font-size:11px; color:#b0b9d0; } .studio-top strong { font-weight:550; color:#e8eafa; } .studio-status { border:1px solid #485369; padding:3px 7px; border-radius:4px; font-size:9px; letter-spacing:.04em; } .studio-content { display:grid; grid-template-columns:45px 1fr; } .studio-sidebar { display:flex; gap:20px; align-items:center; flex-direction:column; padding-top:20px; border-right:1px solid #2a3045; color:#606a85; } .studio-sidebar span { font-size:18px; } .studio-sidebar span:first-child { color:#b2a1ff; } .studio-workspace { padding:18px; min-width:0; } .studio-tabs { display:flex; gap:6px; margin-bottom:14px; } .studio-tabs button { font-size:10px; border:1px solid transparent; background:none; color:#8c96ad; padding:7px 9px; border-radius:5px; cursor:pointer; } .studio-tabs button.is-selected { color:#ddd6ff; background:#7965ee24; border-color:#7965ee48; } .studio-preview { height:232px; position:relative; display:grid; grid-template-columns:1fr 136px; gap:13px; } .studio-screen { position:relative; overflow:hidden; border-radius:7px; background:linear-gradient(145deg,#293b48,#344247 35%,#7d7561); display:flex; align-items:flex-end; padding:12px; } .studio-screen::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 50%,#0a1222bc); } .studio-model { position:absolute; width:145px; height:190px; top:34px; left:50%; transform:translateX(-50%); } .studio-screen-label { position:relative; z-index:2; font-size:9px; color:#d8dfeb; } .studio-screen-tag { position:absolute; top:10px; left:10px; z-index:2; background:#10232a80; border:1px solid #b8d6d344; border-radius:4px; padding:3px 6px; font-size:8px; letter-spacing:.08em; } .studio-notes { border:1px solid #2b3347; border-radius:7px; padding:12px; background:#171d2c; } .studio-notes small { color:#9da7bc; font-size:8px; letter-spacing:.08em; } .studio-notes h4 { font-size:12px; font-weight:500; line-height:1.5; margin:18px 0 12px; } .studio-note-line { height:4px; margin-top:7px; border-radius:3px; background:#394158; } .studio-note-line:nth-child(even) { width:75%; } .studio-product { margin-top:22px; height:45px; border-radius:4px; background:#252e43; display:flex; align-items:center; gap:9px; font-size:9px; color:#bac4d7; padding:8px; } .studio-product .material-symbols-outlined { color:#b8a5ff; font-size:23px; } .studio-script { margin-top:13px; border:1px solid #343954; border-radius:7px; background:#8e7bff0a; padding:11px 12px; } .studio-script-head { display:flex; gap:7px; align-items:center; color:#c6baff; font-size:9px; margin-bottom:7px; } .studio-script-head .material-symbols-outlined { font-size:14px; } .studio-script p { color:#a3acc3; font-size:10px; line-height:1.6; margin:0; } .studio-timeline { display:flex; align-items:center; gap:8px; margin-top:17px; } .studio-timeline span { height:17px; flex:1; background:#6356b2; border-radius:3px; } .studio-timeline span:nth-child(2) { background:#4b7c83; flex:1.6; } .studio-timeline span:nth-child(3) { background:#414b69; flex:1.2; } .studio-timeline b { font-size:8px; color:#96a2bb; font-weight:400; } .studio-caption { margin:13px 0 0; font-size:10px; color:var(--color-on-surface-variant); text-align:center; }
.pro-platforms { padding:27px 0; border-top:1px solid var(--pro-line); border-bottom:1px solid var(--pro-line); } .pro-platforms-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; } .pro-platforms p { color:var(--color-on-surface-variant); font-size:11px; max-width:190px; } .pro-platform-list { display:flex; gap:54px; color:var(--color-on-surface-variant); font-weight:650; font-size:19px; letter-spacing:-.5px; } .pro-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:42px; } .pro-section-head .pro-lead { font-size:14px; max-width:340px; } .pro-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .pro-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .pro-card { border:1px solid var(--pro-line); background:var(--color-surface-container-low); border-radius:12px; padding:29px; transition:border-color .2s,transform .2s; } .pro-card:hover { border-color:var(--color-outline); transform:translateY(-3px); } .pro-card-icon { display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; color:var(--color-primary); background:#8e7bff12; border:1px solid #8e7bff25; border-radius:10px; margin-bottom:34px; } .pro-card h3 { font-size:20px; font-weight:550; letter-spacing:-.5px; margin:0 0 12px; line-height:1.35; } .pro-card p { font-size:13px; color:var(--color-on-surface-variant); line-height:1.85; margin:0; } .pro-card .pro-text-link { margin-top:24px; font-size:12px; } .pro-card-num { font-size:12px; letter-spacing:.14em; color:var(--color-primary); margin-bottom:34px; }
.pro-workflow { display:grid; grid-template-columns:.8fr 1fr; gap:90px; align-items:center; } .pro-flow-list { display:grid; gap:0; border-top:1px solid var(--pro-line); } .pro-flow-item { display:grid; grid-template-columns:40px 1fr; gap:16px; padding:25px 0; border-bottom:1px solid var(--pro-line); } .pro-flow-item>span { font-size:11px; color:var(--color-primary); padding-top:4px; } .pro-flow-item h3 { font-size:17px; margin:0 0 7px; font-weight:550; } .pro-flow-item p { font-size:13px; color:var(--color-on-surface-variant); margin:0; line-height:1.8; } .pro-pill-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; } .pro-pill { padding:7px 11px; border:1px solid var(--pro-line); border-radius:6px; color:var(--color-on-surface-variant); font-size:11px; } .pro-resource { min-height:255px; display:flex; flex-direction:column; align-items:flex-start; } .pro-resource .pro-text-link { margin-top:auto; padding-top:25px; } .pro-cta-panel { padding:58px; border:1px solid #8370ec42; border-radius:16px; background:radial-gradient(ellipse at 90% 20%,#7965ee22,transparent 65%),var(--color-surface-container-low); display:flex; justify-content:space-between; align-items:center; gap:40px; } .pro-cta-panel h2 { max-width:660px; font-size:36px; margin-bottom:12px; } .pro-cta-panel .pro-actions { flex-shrink:0; } .pro-faq { max-width:820px; margin:auto; } .pro-faq details { border-bottom:1px solid var(--pro-line); } .pro-faq summary { font-size:16px; font-weight:500; padding:23px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:30px; } .pro-faq summary::after { content:'+'; color:var(--color-primary); font-size:22px; font-weight:300; } .pro-faq details[open] summary::after { content:'−'; } .pro-faq details p { color:var(--color-on-surface-variant); line-height:1.85; font-size:14px; padding:0 35px 24px 0; margin:0; } .pro-page-intro { padding:78px 0 60px; text-align:center; border-bottom:1px solid var(--pro-line); } .pro-page-intro .pro-eyebrow { justify-content:center; } .pro-page-intro h1 { font-size:clamp(38px,5vw,58px); line-height:1.12; letter-spacing:-.045em; font-weight:600; margin:0 auto 20px; max-width:900px; } .pro-page-intro .pro-lead { margin:auto; } .pro-price { font-size:29px!important; font-weight:550; margin:26px 0!important; color:var(--color-on-surface)!important; } .pro-plan-featured { border-color:#9381f0; position:relative; box-shadow:0 0 50px #7462ed10; } .pro-plan-label { display:inline-block; background:#8e7bff18; color:var(--color-primary); font-size:10px; padding:4px 8px; border-radius:5px; margin-bottom:18px; } .pro-checklist { list-style:none; padding:0; margin:24px 0; display:grid; gap:14px; font-size:13px; color:var(--color-on-surface-variant); } .pro-checklist li::before { content:'✓'; margin-right:9px; color:var(--color-tertiary); } .pro-notice { border-left:3px solid var(--color-primary); padding:20px 24px; background:var(--color-surface-container-low); color:var(--color-on-surface-variant); font-size:13px; line-height:1.9; border-radius:0 8px 8px 0; margin-top:30px; } .pro-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; } .pro-info-line { border-bottom:1px solid var(--pro-line); padding:23px 0; } .pro-info-line small { font-size:11px; color:var(--color-on-surface-variant); text-transform:uppercase; letter-spacing:.1em; } .pro-info-line p { margin:8px 0 0; font-size:18px; } .pro-form { display:grid; gap:17px; } .pro-form label { display:grid; gap:8px; font-size:12px; color:var(--color-on-surface-variant); } .pro-form input,.pro-form textarea,.pro-form select { width:100%; color:var(--color-on-surface); border:1px solid var(--pro-line); background:var(--color-surface); border-radius:8px; padding:12px 14px; outline:none; } .pro-form textarea { min-height:115px; resize:vertical; } .pro-form :disabled { cursor:not-allowed; opacity:.55; } .pro-footnote { font-size:11px; color:var(--color-on-surface-variant); line-height:1.8; } .pro-footer { padding:65px 0 25px!important; border-top:1px solid var(--pro-line); background:var(--color-surface-dim)!important; } .pro-footer .site-footer__grid { grid-template-columns:1.8fr 1fr 1fr 1fr; gap:45px; } .pro-footer .site-footer__tagline { font-size:13px; line-height:1.8; max-width:290px; margin:22px 0 10px; color:var(--color-on-surface-variant); } .pro-footer .footer-heading { font-family:inherit; font-size:12px; font-weight:600; letter-spacing:0; color:var(--color-on-surface); text-transform:none; margin:0 0 20px; } .pro-footer .site-footer__links { font-size:12px; gap:13px; } .pro-footer-bottom { margin-top:55px; padding-top:24px; border-top:1px solid var(--pro-line); display:flex; justify-content:space-between; color:var(--color-on-surface-variant); font-size:10px; }
/* Bring the retained guide and library pages into the shared visual language. */
[data-autolive-site] main { padding-top:100px; } [data-autolive-site] main>section { padding-left:32px; padding-right:32px; } [data-autolive-site] .max-w-container-max { max-width:1200px; } [data-autolive-site] .font-label-caps { font-family:inherit; font-weight:600; letter-spacing:.07em; } [data-autolive-site] h1 { letter-spacing:-.045em; } .surface-card { border-radius:12px; box-shadow:none!important; } .btn-primary { background:#7b67e7!important; border-color:#9785f2!important; color:#fff!important; border-radius:9px!important; font-family:inherit!important; letter-spacing:0!important; text-transform:none; } .btn-outline { border-radius:9px!important; font-family:inherit!important; letter-spacing:0!important; } .ambient-mesh { opacity:.25; pointer-events:none; } .reveal { opacity:1!important; transform:none!important; } .contact-dock { display:none!important; } .spotlight-modal { border-color:var(--pro-line)!important; } .pro-mobile-close { position:absolute; right:25px; top:25px; } .mobile-menu { z-index:100; } .mobile-menu [data-cms-nav-mobile-links] { display:flex; flex-direction:column; gap:16px; } .mobile-menu .nav-link,.mobile-menu .mobile-nav-link { font-size:20px; font-family:inherit; letter-spacing:0; font-weight:500; } .mobile-menu .pro-button { align-self:flex-start; margin-top:10px; } .guide-hub { border-color:var(--pro-line); }
@media(min-width:1450px) { .pro-hero { padding:120px 0 100px; } }
@media(max-width:1150px) { .pro-desktop-nav { gap:17px; } .pro-header-inner { gap:18px; } .pro-header .pro-nav-cta { display:none; } .pro-hero-grid { gap:30px; } }
@media(max-width:950px) { .pro-desktop-nav { display:none; } .pro-menu-btn { display:inline-flex!important; } .pro-hero-grid { grid-template-columns:1fr; gap:48px; } .pro-hero { padding-top:65px; } .pro-hero h1 { max-width:650px; font-size:58px; } .pro-hero .pro-lead { max-width:560px; } .studio-wrap { max-width:620px; width:100%; margin:auto; } .studio { transform:none; } .studio-preview { height:280px; grid-template-columns:1fr 175px; } .studio-model { width:180px; height:230px; } .pro-workflow { gap:40px; } .pro-platform-list { gap:28px; } .pro-contact-grid { gap:30px; } }
@media(max-width:700px) { .pro-container,.pro-header-inner { width:calc(100% - 36px); } .pro-header { height:70px; } .pro-main { padding-top:70px; } .pro-brand { font-size:21px; } .pro-brand img { width:31px; height:31px; } .pro-header-actions { gap:3px; } .pro-header .theme-toggle-btn { display:none!important; } .pro-section { padding:65px 0; } .pro-hero { padding:45px 0 54px; } .pro-hero h1 { font-size:45px; line-height:1.12; letter-spacing:-.055em; } .pro-release { margin-bottom:23px; font-size:9px; } .pro-hero .pro-lead { font-size:15px; } .pro-hero-grid { gap:40px; } .pro-actions { gap:9px; } .pro-button { padding:12px 17px; font-size:12px; gap:12px; } .pro-meta-line { gap:12px; font-size:10px; } .studio-workspace { padding:12px; } .studio-top { padding:0 12px; } .studio-content { grid-template-columns:32px 1fr; } .studio-sidebar span { font-size:16px; } .studio-preview { height:210px; grid-template-columns:1fr 105px; gap:9px; } .studio-notes { padding:9px; } .studio-notes h4 { font-size:10px; } .studio-model { width:130px; height:170px; } .studio-tabs { gap:0; } .studio-tabs button { font-size:9px; padding:6px 7px; } .studio-product { font-size:8px; padding:5px; gap:4px; } .pro-platforms-inner { display:block; text-align:center; } .pro-platforms p { max-width:none; margin:0 0 18px; } .pro-platform-list { justify-content:center; flex-wrap:wrap; gap:14px 24px; font-size:15px; } .pro-section-head { display:block; margin-bottom:30px; } .pro-section-head .pro-lead { margin-top:20px; max-width:none; } .pro-grid-3,.pro-grid-2,.pro-workflow,.pro-contact-grid { grid-template-columns:1fr; } .pro-card { padding:25px; } .pro-card-icon { margin-bottom:24px; } .pro-workflow { gap:30px; } .pro-cta-panel { padding:30px 24px; display:block; } .pro-cta-panel h2 { font-size:29px; } .pro-footer .site-footer__grid { grid-template-columns:1fr 1fr; gap:32px 20px; } .pro-footer .site-footer__brand { grid-column:1/-1; } .pro-footer-bottom { gap:18px; flex-direction:column; margin-top:35px; } .pro-page-intro { padding:55px 0 40px; } [data-autolive-site] main>section { padding-left:18px; padding-right:18px; } [data-autolive-site] main { padding-top:75px; } .pro-resource { min-height:230px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
.pro-guide-note { padding:12px 16px; margin-top:18px; border:1px solid var(--pro-line); border-radius:8px; color:var(--color-on-surface-variant); font-size:11px; line-height:1.65; background:var(--color-surface-container-low); }
/* Connected contact and support forms */
.pro-intake{display:grid;gap:20px;margin-top:28px}.pro-intake label{display:grid;gap:9px;font-size:14px}.pro-intake input:not([type=checkbox]),.pro-intake textarea{width:100%;box-sizing:border-box;padding:14px;border:1px solid #ffffff24;border-radius:12px;background:#ffffff08;color:inherit;font:inherit}.pro-intake .pro-consent{display:block;line-height:1.7}.pro-consent input{margin-right:8px}.pro-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.pro-intake [role=status]{font-size:14px;line-height:1.7}.pro-price{font-size:27px;font-weight:700}.pro-price small{font-size:14px}