/* ========================================================================= Codeora Vision Blocks — Industry page widgets (CV Industry — …) Ported 1:1 from the reference page stylesheet. Every rule is scoped under the `.cvb-ac` root that each industry widget renders, so nothing here can touch the existing `.cvb-*` widgets or the theme. ========================================================================= */ /* ---- 1. Root tokens (reference `.accounting-page`) --------------------- */ .cvb-ac { --background: #03060d; --foreground: #f6f9fc; --card: #080d18; --muted: #101622; --muted-foreground: #979fab; --border: #ffffff14; --input: #ffffff1f; --accent: #111a2d; --primary: #1746ff; --primary-foreground: #f6f9fc; --secondary: #ff9034; --destructive: #f51d31; --ring: var(--primary); --radius: .75rem; --gradient-brand: linear-gradient(178deg, #043fff 40%, #fea63d 100%); --gradient-text: linear-gradient(135deg, #fff 0%, #b9c8ff 50%, #ff9a3e 100%); --font-display: "Unbounded", sans-serif; --font-heading: "Goldman", sans-serif; --font-body: "Karla", sans-serif; --ac-accent: var(--secondary); --ac-surge: #ff903414; --ac-veil-color: #ff9a3e; --ac-blue: #5486ff; --ac-success: #47c86e; --ac-gradient: var(--gradient-brand); color: var(--foreground); background: var(--background); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; width: 100%; } /* ---- 2. Scoped preflight (Tailwind base the reference relied on) ------- */ .cvb-ac *, .cvb-ac *::before, .cvb-ac *::after { box-sizing: border-box; border: 0 solid var(--border); } .cvb-ac :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, fieldset, legend, hr) { margin: 0; padding: 0; } .cvb-ac :where(ul, ol) { list-style: none; } .cvb-ac img, .cvb-ac svg, .cvb-ac canvas, .cvb-ac audio { display: block; vertical-align: middle; } .cvb-ac img { max-width: 100%; height: auto; } .cvb-ac a { color: inherit; text-decoration: inherit; } .cvb-ac button, .cvb-ac input, .cvb-ac select, .cvb-ac textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; appearance: none; -webkit-appearance: none; } .cvb-ac button { cursor: pointer; text-transform: none; white-space: normal; text-align: inherit; line-height: inherit; font-weight: inherit; text-decoration: none; transition: none; } .cvb-ac button:disabled { cursor: default; } .cvb-ac fieldset { min-width: 0; border: 0; } .cvb-ac legend { padding: 0; } .cvb-ac table { border-collapse: collapse; border-color: inherit; text-indent: 0; } .cvb-ac small { font-size: 80%; } .cvb-ac strong { font-weight: 700; } .cvb-ac :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .cvb-ac .elementor-widget-container { margin: 0; padding: 0; } /* ---- 3. Typography (reference globals + `.accounting-page`) ----------- */ .cvb-ac h1 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 22px 0; font-size: 48px; font-weight: 700; line-height: 1.05; overflow-wrap: break-word; } .cvb-ac h2, .cvb-ac h3, .cvb-ac h4 { font-family: var(--font-heading); font-weight: 400; color: var(--foreground); } .cvb-ac h2 { letter-spacing: 0; max-width: 950px; margin: 16px 0 24px; font-size: 30px; line-height: 1.3; } .cvb-ac h3 { letter-spacing: 0; margin-bottom: 12px; font-size: 19px; line-height: 1.4; } .cvb-ac p { color: var(--muted-foreground); margin: 0 0 18px; } .cvb-ac strong { color: var(--foreground); } .cvb-ac a:not(.ac-btn):not(.ac-service-links a):not(.ac-insights a) { color: var(--ac-accent); } .cvb-ac h1 em, .cvb-ac h2 em, .ac-highlight { font-style: italic; background-image: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .cvb-ac .ac-rt p:last-child { margin-bottom: 0; } @media (max-width: 1023px) { .cvb-ac h1 { font-size: 40px; } } @media (max-width: 767px) { .cvb-ac h1 { font-size: 32px; } .cvb-ac h2 { font-size: 25px; } } /* ---- 4. Buttons (reference shadcn/Tailwind button recipes) ------------ */ .cvb-ac .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: calc(var(--radius) - 2px); font-size: 14px; font-weight: 500; line-height: 1.25; cursor: pointer; height: 36px; padding: 8px 16px; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s; } .cvb-ac .ac-btn svg { pointer-events: none; width: 16px; height: 16px; flex-shrink: 0; } .cvb-ac .ac-btn:disabled { pointer-events: none; opacity: .5; } .cvb-ac .ac-btn--primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; } .cvb-ac .ac-btn--primary:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); } .cvb-ac .ac-btn--outline { border: 1px solid var(--input); background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; } .cvb-ac .ac-btn--outline:hover { background: var(--accent); color: var(--foreground); } .cvb-ac .ac-btn--ghost { color: inherit; } .cvb-ac .ac-btn--ghost:hover { background: var(--accent); color: var(--foreground); } .cvb-ac .ac-btn--link { color: var(--primary); text-underline-offset: 4px; } .cvb-ac .ac-btn--link:hover { text-decoration: underline; } .cvb-ac .ac-btn--icon { width: 36px; height: 36px; padding: 0; } /* `.ac-primary-button` = gradient fill; re-declared with the exact reference values. */ .cvb-ac .ac-primary-button { background: var(--gradient-brand); color: var(--foreground); white-space: normal; text-align: center; height: auto; min-height: 48px; padding: 12px 18px; } .cvb-ac .ac-primary-button:hover { background: var(--gradient-brand); color: var(--foreground); } /* ---- 5. Hero background veil (CSS stand-in for the WebGL shader) ------- */ .cvb-ac .ac-veil { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(60% 55% at 62% 38%, color-mix(in oklab, var(--ac-veil-color) 22%, transparent), transparent 70%), radial-gradient(40% 50% at 30% 70%, color-mix(in oklab, var(--ac-veil-color) 14%, transparent), transparent 70%), radial-gradient(45% 40% at 85% 85%, color-mix(in oklab, var(--ac-blue) 12%, transparent), transparent 70%), var(--background); } .cvb-ac .ac-veil::before, .cvb-ac .ac-veil::after { content: ""; position: absolute; inset: -20%; background: conic-gradient(from 210deg at 55% 45%, transparent 0 40%, color-mix(in oklab, var(--ac-veil-color) 18%, transparent) 46%, transparent 52%, color-mix(in oklab, var(--ac-veil-color) 10%, transparent) 60%, transparent 66%); filter: blur(40px); opacity: .9; animation: acVeilDrift 26s ease-in-out infinite alternate; } .cvb-ac .ac-veil::after { animation-duration: 38s; animation-direction: alternate-reverse; opacity: .55; transform: rotate(12deg); } @keyframes acVeilDrift { 0% { transform: translate(-3%, -2%) rotate(0deg) scale(1); } 100% { transform: translate(3%, 3%) rotate(8deg) scale(1.08); } } .cvb-ac .ac-veil--image { background-size: cover; background-position: center; } .cvb-ac .ac-veil--image::before, .cvb-ac .ac-veil--image::after { display: none; } .cvb-ac .ac-veil--image-fade::after { display: block; inset: 0; filter: none; animation: none; transform: none; opacity: 1; background: linear-gradient(180deg, color-mix(in oklab, var(--background) 35%, transparent), var(--background)); } /* ---- 6. Component states the reference drove from React ---------------- */ .cvb-ac .ac-transcript[hidden] { display: none; } .cvb-ac .ac-transcript { margin-top: 10px; } .cvb-ac .ac-transcript-toggle svg { transition: transform .2s; } .cvb-ac .ac-transcript-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .cvb-ac .ac-step { border: 0; background: transparent; } .cvb-ac .ac-faq > div[hidden] { display: none; } .cvb-ac .ac-faq button svg { flex-shrink: 0; margin-left: 12px; width: 16px; height: 16px; transition: transform .2s; } .cvb-ac .ac-faq button[aria-expanded="true"] svg { transform: rotate(180deg); } .cvb-ac .ac-uc-panel[hidden] { display: none; } .cvb-ac .ac-form-step[hidden] { display: none; } .cvb-ac .ac-form-result[hidden] { display: none; } .cvb-ac .ac-form input[type="text"], .cvb-ac .ac-form input[type="email"], .cvb-ac .ac-form input[type="tel"], .cvb-ac .ac-form textarea { background: var(--background); border: 1px solid var(--border); width: 100%; color: var(--foreground); border-radius: 10px; outline: none; padding: 12px 14px; font-size: 15px; transition: border-color .2s, box-shadow .2s; } .cvb-ac .ac-form textarea { min-height: 110px; resize: vertical; } .cvb-ac .ac-form input:focus, .cvb-ac .ac-form textarea:focus { border-color: var(--ac-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ac-accent) 20%, transparent); } .cvb-ac .ac-form .ac-input-grid label { color: var(--muted-foreground); font-size: 13px; display: flex; flex-direction: column; gap: 9px; } .cvb-ac .ac-form-summary { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; font-size: 14px; } .cvb-ac .ac-form-summary dt { color: var(--muted-foreground); font-size: 12px; margin-top: 10px; } .cvb-ac .ac-form-summary dt:first-child { margin-top: 0; } .cvb-ac .ac-form-summary dd { color: var(--foreground); } .cvb-ac .ac-form-error { color: var(--destructive); } .cvb-ac .ac-form-result h3 { margin-bottom: 8px; } .cvb-ac .ac-form-buttons .ac-btn--ghost { color: var(--foreground); } .cvb-ac .ac-months button { border: 0; } .cvb-ac .ac-chart-point-hit { cursor: pointer; } .cvb-ac .ac-wave rect { transition: fill .15s; } .cvb-ac .ac-mslider-track { scroll-behavior: smooth; } .cvb-ac .ac-embed { margin-top: 24px; } .cvb-ac .ac-embed iframe { max-width: 100%; border: 0; display: block; } .cvb-ac .ac-align-center { text-align: center; } .cvb-ac .ac-align-center h2, .cvb-ac .ac-align-center > .ac-container > p { margin-left: auto; margin-right: auto; } .cvb-ac .ac-section--flush-top { border-top: 0; padding-top: 0; } .cvb-ac .ac-section--flush-bottom { padding-bottom: 0; } .cvb-ac .ac-section--no-border { border-top: 0; } .cvb-ac .ac-stack-body > .ac-reveal.is-in, .cvb-ac .ac-table-scroll.is-in tbody tr { opacity: 1; transform: none; } .cvb-ac .ac-service-links a h3 { font-weight: 400; } .cvb-ac .ac-service-links a > svg:first-child { color: var(--ac-accent); } .cvb-ac .ac-service-links a > svg:last-child, .cvb-ac .ac-insight-row > svg:last-child { color: var(--ac-accent); } .cvb-ac .ac-insight-row > svg:first-child { color: var(--ac-accent); } .cvb-ac .ac-compliance > svg { width: 24px; height: 24px; } .cvb-ac .ac-timeline svg { color: var(--foreground); height: 18px; } .cvb-ac .ac-fit-grid li svg { color: var(--ac-accent); } .cvb-ac .ac-wave-on { fill: var(--ac-accent); } /* ---- 7. Ported reference rules follow ---------------------------------- */ .cvb-ac .ac-container{ max-width: 1240px; margin: 0px auto; padding: 0px 32px; } .cvb-ac .ac-hero{ isolation: isolate; padding: 112px 0px 72px; position: relative; overflow: hidden; } .cvb-ac .ac-hero-background{ z-index: -1; pointer-events: none; position: absolute; inset: 0px; } .cvb-ac .ac-hero > .ac-container{ z-index: 1; position: relative; } .cvb-ac .ac-hero-background .dark-veil-container{ width: 100%; height: 100%; position: relative; overflow: hidden; } .cvb-ac .ac-hero-background .dark-veil-canvas{ width: 100%; height: 100%; display: block; position: absolute; inset: 0px; } .cvb-ac .ac-hero-grid{ grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 0.95fr); align-items: center; gap: 48px; display: grid; } .cvb-ac .ac-hero-grid > *{ min-width: 0px; } .cvb-ac .ac-hero-pill{ border: 1px solid var(--border); color: var(--muted-foreground); background: var(--card); border-radius: 99px; align-items: center; gap: 9px; padding: 6px 12px; font-size: 11px; display: inline-flex; } .cvb-ac .ac-hero-pill i{ background: var(--ac-accent); border-radius: 50%; width: 5px; height: 5px; } .cvb-ac .ac-capsule{ font-size: 17px; line-height: 1.65; } .cvb-ac .ac-actions{ flex-wrap: wrap; gap: 12px; margin: 24px 0px 16px; display: flex; } .cvb-ac .ac-primary-button{ background: var(--gradient-brand); color: var(--foreground); white-space: normal; text-align: center; height: auto; min-height: 48px; padding: 12px 18px; } .cvb-ac .ac-actions > button{ white-space: normal; text-align: center; height: auto; min-height: 48px; padding: 12px 18px; } .cvb-ac .ac-fine{ margin-bottom: 8px; font-size: 13px; } .cvb-ac .ac-hero-trust{ border-top: 1px solid var(--border); margin-top: 28px; padding-top: 20px; font-size: 13px; } .cvb-ac .ac-hero-trust > div{ flex-wrap: wrap; gap: 7px 17px; margin-bottom: 16px; font-weight: 600; display: flex; } .cvb-ac .ac-player{ background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px 20px 16px; scroll-margin-top: 100px; } .cvb-ac .ac-player h3{ margin-bottom: 4px; font-size: 19px; line-height: 1.25; } .cvb-ac .ac-player-sub{ margin-bottom: 0px; font-size: 12px; } .cvb-ac .ac-player-controls{ align-items: center; gap: 12px; margin: 14px 0px 10px; display: flex; } .cvb-ac .ac-play{ background: var(--foreground); width: 44px; height: 44px; color: var(--background); border-radius: 50%; flex-shrink: 0; } .cvb-ac .ac-wave{ min-width: 0px; height: 36px; fill: var(--border); flex: 1 1 0%; } .cvb-ac .ac-wave-on{ fill: var(--ac-accent); } .cvb-ac .ac-time{ font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted-foreground); font-size: 12px; } .cvb-ac .ac-now{ background: var(--muted); border-radius: 10px; min-height: 62px; padding: 10px 12px; } .cvb-ac .ac-now span{ letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); font-size: 10px; font-weight: 600; } .cvb-ac .ac-now p{ color: var(--foreground); margin: 3px 0px 0px; font-size: 13px; line-height: 1.5; } .cvb-ac .ac-now-status{ background: var(--ac-surge); } .cvb-ac .ac-flow{ border-top: 1px solid var(--border); margin-top: 12px; padding: 8px 0px 0px; list-style: none; position: relative; } .cvb-ac .ac-flow::before{ content: ""; background: var(--border); width: 1px; position: absolute; top: 20px; bottom: 18px; left: 13px; } .cvb-ac .ac-flow .ac-step{ text-align: left; white-space: normal; width: 100%; height: auto; color: var(--muted-foreground); justify-content: flex-start; align-items: flex-start; gap: 10px; padding: 4px 0px; } .cvb-ac .ac-step-number{ border: 1px solid var(--border); background: var(--card); border-radius: 50%; flex-shrink: 0; place-items: center; width: 26px; height: 26px; font-size: 12px; display: grid; position: relative; } .cvb-ac .ac-step-on .ac-step-number{ border-color: var(--ac-accent); background: var(--ac-accent); color: var(--background); } .cvb-ac .ac-step strong{ margin-top: 2px; font-size: 13px; display: block; } .cvb-ac .ac-step small{ margin-top: 2px; font-size: 12px; line-height: 1.35; display: block; } .cvb-ac .ac-data-chip{ color: var(--ac-accent); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-family: monospace; } .cvb-ac .ac-guardrails{ border-top: 1px solid var(--border); flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; display: flex; } .cvb-ac .ac-guardrails span{ background: var(--muted); color: var(--muted-foreground); border-radius: 99px; padding: 4px 8px; font-size: 10px; } .cvb-ac .ac-transcript-toggle{ justify-content: space-between; width: 100%; margin-top: 8px; font-size: 12px; } .cvb-ac .ac-transcript{ border-top: 1px solid var(--border); padding-top: 12px; } .cvb-ac .ac-transcript p{ font-size: 13px; } .cvb-ac .ac-section{ border-top: 1px solid var(--border); padding: 80px 0px; scroll-margin-top: 80px; } .cvb-ac .ac-section-alt{ background: var(--card); } .cvb-ac .ac-eyebrow{ color: var(--ac-accent); margin-bottom: 12px; font-size: 11px; font-weight: 700; display: block; } .cvb-ac .ac-section > .ac-container > p{ max-width: 920px; } .cvb-ac .ac-section ul{ padding: 0px; list-style: none; } .cvb-ac .ac-section li{ color: var(--muted-foreground); align-items: flex-start; gap: 10px; margin-bottom: 12px; display: flex; } .cvb-ac .ac-section li > svg{ width: 16px; height: 16px; color: var(--ac-accent); flex-shrink: 0; margin-top: 5px; } .cvb-ac .ac-section code{ color: var(--ac-accent); } .cvb-ac .ac-chart{ border: 1px solid var(--border); background: linear-gradient(180deg,var(--card),var(--background)); border-radius: 18px; margin: 30px 0px 10px; padding: 24px 24px 16px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-chart{ background: linear-gradient(180deg,color-mix(in oklab,var(--card) 92%,transparent),color-mix(in oklab,var(--background) 80%,transparent)); } } .cvb-ac .ac-chart{ box-shadow: rgba(0, 0, 0, 0.6) 0px 24px 60px -30px, rgba(255, 255, 255, 0.04) 0px 1px inset; } .cvb-ac .ac-chart-head{ flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; display: flex; } .cvb-ac .ac-chart svg{ width: 100%; height: auto; display: block; overflow: visible; } .cvb-ac .ac-chart svg text{ fill: var(--muted-foreground); font-family: var(--font-body); letter-spacing: 0.06em; font-size: 11px; } .cvb-ac .ac-chart svg .ac-chart-tag{ fill: var(--ac-accent); font-weight: 700; } .cvb-ac .ac-surge{ fill: var(--ac-surge); stroke: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-surge{ stroke: color-mix(in oklab,var(--ac-accent) 22%,transparent); } } .cvb-ac .ac-surge{ stroke-dasharray: 4, 4; } .cvb-ac .ac-grid-line{ stroke: var(--foreground); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-grid-line{ stroke: color-mix(in oklab,var(--foreground) 7%,transparent); } } .cvb-ac .ac-grid-line{ stroke-width: 1px; } .cvb-ac .ac-stop-a{ stop-color: var(--ac-accent); stop-opacity: 0.32; } .cvb-ac .ac-stop-b{ stop-color: var(--ac-accent); stop-opacity: 0; } .cvb-ac .ac-overflow{ fill: var(--ac-accent); opacity: 0.18; } .cvb-ac .ac-volume-line{ stroke: var(--ac-accent); stroke-width: 3px; fill: none; stroke-linecap: round; stroke-linejoin: round; } .cvb-ac .ac-volume-glow{ stroke: var(--ac-accent); stroke-width: 10px; fill: none; opacity: 0.18; filter: blur(6px); } .cvb-ac .ac-capacity-line{ stroke: var(--ac-blue); stroke-width: 2px; stroke-dasharray: 8, 6; fill: none; } .cvb-ac .ac-chart svg .ac-capacity-text{ fill: var(--ac-blue); font-weight: 600; } .cvb-ac .ac-deadline-line{ stroke: var(--foreground); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-deadline-line{ stroke: color-mix(in oklab,var(--foreground) 22%,transparent); } } .cvb-ac .ac-deadline-line{ stroke-dasharray: 2, 5; } .cvb-ac .ac-deadline-dot{ fill: var(--ac-accent); } .cvb-ac .ac-chart svg .ac-deadline-text{ fill: var(--foreground); font-weight: 600; } .cvb-ac .ac-cursor-line{ stroke: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-cursor-line{ stroke: color-mix(in oklab,var(--ac-accent) 45%,transparent); } } .cvb-ac .ac-cursor-line{ stroke-width: 1px; transition: d 0.25s; } .cvb-ac .ac-point{ fill: var(--background); stroke: var(--ac-accent); stroke-width: 2px; cursor: pointer; transition: r 0.2s; } .cvb-ac .ac-point-active{ fill: var(--ac-accent); stroke: var(--background); stroke-width: 3px; filter: drop-shadow(0 0 8px var(--ac-accent)); } .cvb-ac .ac-chart-key{ color: var(--muted-foreground); flex-wrap: wrap; gap: 20px; font-size: 12px; display: flex; } .cvb-ac .ac-chart-key span{ align-items: center; gap: 8px; display: flex; } .cvb-ac .ac-chart-key i{ background: var(--ac-accent); border-radius: 3px; width: 18px; height: 3px; } .cvb-ac .ac-chart-key span:nth-child(2) i{ background: repeating-linear-gradient(90deg,var(--ac-blue) 0 5px,transparent 5px 8px); } .cvb-ac .ac-chart-key span:nth-child(3) i{ background: var(--ac-surge); border: 1px dashed var(--ac-accent); height: 10px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-chart-key span:nth-child(3) i{ border: 1px dashed color-mix(in oklab,var(--ac-accent) 40%,transparent); } } .cvb-ac .ac-chart-readout{ border: 1px solid var(--border); background: var(--background); border-radius: 999px; align-items: baseline; gap: 10px; padding: 8px 14px; font-size: 12px; display: flex; } .cvb-ac .ac-chart-readout strong{ font-family: var(--font-display,inherit); font-size: 15px; } .cvb-ac .ac-chart-readout span{ color: var(--muted-foreground); } .cvb-ac .ac-chart-readout em{ color: var(--ac-blue); font-style: normal; font-weight: 600; } .cvb-ac .ac-chart-readout.is-surge{ border-color: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-chart-readout.is-surge{ border-color: color-mix(in oklab,var(--ac-accent) 40%,transparent); } } .cvb-ac .ac-chart-readout.is-surge em, .cvb-ac .ac-chart-readout.is-surge strong{ color: var(--ac-accent); } .cvb-ac .ac-months{ grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 4px; margin-top: 6px; padding-left: 4.5%; display: grid; } .cvb-ac .ac-months button{ height: 30px; color: var(--muted-foreground); border-radius: 8px; padding: 4px; font-size: 12px; } .cvb-ac .ac-months .ac-month-surge{ color: var(--foreground); } .cvb-ac .ac-months .ac-month-active{ color: var(--ac-accent); background: var(--ac-surge); box-shadow: inset 0 0 0 1px var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-months .ac-month-active{ box-shadow: inset 0 0 0 1px color-mix(in oklab,var(--ac-accent) 35%,transparent); } } .cvb-ac .ac-chart-note{ margin: 10px 0px; font-size: 12px; } .cvb-ac .ac-stat-row{ grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; margin: 28px 0px; display: grid; } .cvb-ac .ac-stat-row > div{ border: 1px solid var(--border); background: var(--card); border-radius: 16px; padding: 22px 22px 20px; transition: transform 0.25s, border-color 0.25s; position: relative; overflow: hidden; } .cvb-ac .ac-stat-row > div::before{ content: ""; background: var(--ac-gradient); height: 2px; position: absolute; inset: 0px 0px auto; } .cvb-ac .ac-stat-row > div:hover{ border-color: var(--ac-accent); transform: translateY(-3px); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-stat-row > div:hover{ border-color: color-mix(in oklab,var(--ac-accent) 40%,transparent); } } .cvb-ac .ac-stat-row strong{ font-family: var(--font-display,inherit); color: var(--ac-accent); margin-bottom: 6px; font-size: 32px; display: block; } .cvb-ac .ac-stat-row span{ color: var(--muted-foreground); font-size: 13px; } .cvb-ac .ac-calculator{ border: 1px solid var(--ac-accent); margin-top: 36px; padding: 32px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-calculator{ border: 1px solid color-mix(in oklab,var(--ac-accent) 25%,var(--border)); } } .cvb-ac .ac-calculator{ background: radial-gradient(120% 140% at 100% 0%,var(--ac-accent),transparent 55%),var(--card); border-radius: 20px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-calculator{ background: radial-gradient(120% 140% at 100% 0%,color-mix(in oklab,var(--ac-accent) 10%,transparent),transparent 55%),var(--card); } } .cvb-ac .ac-calculator{ box-shadow: rgba(0, 0, 0, 0.7) 0px 30px 70px -40px; } .cvb-ac .ac-input-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; margin: 24px 0px; display: grid; } .cvb-ac .ac-input-grid label{ color: var(--muted-foreground); flex-direction: column; justify-content: space-between; gap: 9px; font-size: 13px; display: flex; } .cvb-ac .ac-input-grid input{ background: var(--background); border: 1px solid var(--border); width: 100%; color: var(--foreground); border-radius: 10px; outline: none; padding: 12px 14px; font-size: 16px; font-weight: 600; transition: border-color 0.2s, box-shadow 0.2s; } .cvb-ac .ac-input-grid input:focus{ border-color: var(--ac-accent); box-shadow: 0 0 0 3px var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-input-grid input:focus{ box-shadow: 0 0 0 3px color-mix(in oklab,var(--ac-accent) 20%,transparent); } } .cvb-ac .ac-result{ background: var(--background); border: 1px solid var(--border); border-radius: 14px; max-width: 850px; padding: 20px 22px; font-size: 20px; } .cvb-ac .ac-result strong{ color: var(--ac-accent); font-size: 34px; font-family: var(--font-display,inherit); } .cvb-ac .ac-text-link{ white-space: normal; text-align: left; height: auto; color: var(--ac-accent); padding: 0px; } .cvb-ac .ac-cta-band{ background: radial-gradient(700px 300px at 50% 0%,var(--ac-accent),transparent 70%),var(--background); padding: 88px 0px; position: relative; overflow: hidden; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-cta-band{ background: radial-gradient(700px 300px at 50% 0%,color-mix(in oklab,var(--ac-accent) 10%,transparent),transparent 70%),var(--background); } } .cvb-ac .ac-cta-band::before, .cvb-ac .ac-cta-band::after{ content: ""; background: linear-gradient(90deg,transparent,var(--ac-accent),var(--ac-blue),transparent); width: min(880px, 86%); height: 1px; position: absolute; left: 50%; transform: translate(-50%); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-cta-band::before, .cvb-ac .ac-cta-band::after{ background: linear-gradient(90deg,transparent,color-mix(in oklab,var(--ac-accent) 60%,transparent),color-mix(in oklab,var(--ac-blue) 60%,transparent),transparent); } } .cvb-ac .ac-cta-band::before{ top: 0px; } .cvb-ac .ac-cta-band::after{ bottom: 0px; } .cvb-ac .ac-cta-card{ text-align: center; flex-direction: column; align-items: center; gap: 30px; max-width: 820px; margin: 0px auto; display: flex; position: relative; } .cvb-ac .ac-cta-ghost{ display: none; } .cvb-ac .ac-cta-copy{ flex-direction: column; align-items: center; display: flex; } .cvb-ac .ac-cta-pill{ color: var(--ac-accent); letter-spacing: 0.2em; text-transform: uppercase; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; display: inline-flex; } .cvb-ac .ac-cta-pill::before, .cvb-ac .ac-cta-pill::after{ content: ""; background: var(--ac-accent); width: 28px; height: 1px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-cta-pill::before, .cvb-ac .ac-cta-pill::after{ background: color-mix(in oklab,var(--ac-accent) 55%,transparent); } } .cvb-ac .ac-cta-dot{ display: none; } .cvb-ac .ac-cta-card h2{ text-wrap: balance; margin: 18px 0px 14px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.18; } .cvb-ac .ac-cta-card p{ max-width: 640px; color: var(--muted-foreground); text-wrap: pretty; margin: 0px auto; font-size: 16.5px; line-height: 1.65; } .cvb-ac .ac-cta-actions{ flex-wrap: wrap; justify-content: center; gap: 14px; display: flex; } .cvb-ac .ac-cta-actions .ac-primary-button{ border-radius: 999px; min-height: 52px; padding-inline: 28px; font-size: 15px; transition: transform 0.2s, box-shadow 0.2s; } .cvb-ac .ac-cta-actions .ac-primary-button:hover{ box-shadow: 0 18px 40px -18px var(--ac-accent); transform: translateY(-2px); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-cta-actions .ac-primary-button:hover{ box-shadow: 0 18px 40px -18px color-mix(in oklab,var(--ac-accent) 70%,transparent); } } .cvb-ac .ac-cta-secondary{ border: 1px solid var(--border); border-radius: 999px; min-height: 52px; padding-inline: 26px; transition: border-color 0.2s, color 0.2s; } .cvb-ac .ac-cta-secondary:hover{ border-color: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-cta-secondary:hover{ border-color: color-mix(in oklab,var(--ac-accent) 55%,transparent); } } .cvb-ac .ac-cta-secondary:hover{ color: var(--ac-accent); background: 0px 0px; } @media (max-width: 767px){ .cvb-ac .ac-cta-band{ padding: 60px 0px; } .cvb-ac .ac-cta-actions{ flex-direction: column; width: 100%; } .cvb-ac .ac-cta-actions .ac-primary-button, .cvb-ac .ac-cta-secondary{ width: 100%; } } .cvb-ac .ac-capability-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; margin-top: 28px; display: grid; } .cvb-ac .ac-capability{ background: linear-gradient(180deg,var(--card),var(--card)); flex-direction: column; display: flex; position: relative; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-capability{ background: linear-gradient(180deg,color-mix(in oklab,var(--card) 92%,var(--ac-accent)),var(--card)); } } .cvb-ac .ac-capability{ border: 1px solid var(--border); border-radius: 14px; padding: 20px; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; overflow: hidden; } .cvb-ac .ac-capability::before{ content: ""; background: var(--ac-gradient); opacity: 0; height: 2px; transition: opacity 0.25s; position: absolute; inset: 0px 0px auto; } .cvb-ac .ac-capability:hover{ border-color: var(--ac-accent); transform: translateY(-3px); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-capability:hover{ border-color: color-mix(in oklab,var(--ac-accent) 45%,var(--border)); } } .cvb-ac .ac-capability:hover{ box-shadow: 0 14px 34px -18px var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-capability:hover{ box-shadow: 0 14px 34px -18px color-mix(in oklab,var(--ac-accent) 55%,transparent); } } .cvb-ac .ac-capability:hover::before{ opacity: 1; } .cvb-ac .ac-cap-head{ justify-content: space-between; align-items: center; margin-bottom: 14px; display: flex; } .cvb-ac .ac-cap-num{ color: var(--muted-foreground); letter-spacing: 0.1em; font-family: Goldman, sans-serif; font-size: 13px; } .cvb-ac .ac-capability h3{ margin: 0px 0px 8px; font-size: 17px; } .cvb-ac .ac-capability p{ margin: 0px 0px 12px; font-size: 14px; line-height: 1.6; } .cvb-ac .ac-capability p:has(em){ border-left: 2px solid var(--ac-accent); background: var(--ac-accent); margin-top: auto; padding: 10px 12px; font-size: 13px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-capability p:has(em){ background: color-mix(in oklab,var(--ac-accent) 8%,transparent); } } .cvb-ac .ac-capability p:has(em){ border-radius: 0px 8px 8px 0px; } .cvb-ac .ac-capability em{ color: var(--foreground); background: 0px 0px; } .cvb-ac .ac-card-icon{ color: var(--ac-accent); background: var(--ac-accent); border-radius: 10px; place-items: center; width: 38px; height: 38px; display: grid; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-card-icon{ background: color-mix(in oklab,var(--ac-accent) 12%,transparent); } } .cvb-ac .ac-card-icon{ border: 1px solid var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-card-icon{ border: 1px solid color-mix(in oklab,var(--ac-accent) 30%,transparent); } } .cvb-ac .ac-card-icon svg{ width: 18px; height: 18px; } .cvb-ac .ac-small-tag{ color: var(--ac-accent); border: 1px solid var(--ac-accent); border-radius: 999px; align-self: flex-start; padding: 3px 10px; font-size: 11px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-small-tag{ border: 1px solid color-mix(in oklab,var(--ac-accent) 35%,transparent); } } .cvb-ac .ac-cap-extras{ grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; display: grid; } .cvb-ac .ac-sms, .cvb-ac .ac-wont{ background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .cvb-ac .ac-sms-label{ text-transform: uppercase; letter-spacing: 0.08em; color: var(--ac-accent); align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; display: flex; } .cvb-ac .ac-sms-label svg{ width: 15px; height: 15px; } .cvb-ac .ac-sms p{ background: var(--muted); border-radius: 14px 14px 14px 4px; margin: 0px 0px 8px; padding: 12px 14px; font-size: 13px; } .cvb-ac .ac-sms small{ color: var(--muted-foreground); font-size: 11px; } .cvb-ac .ac-portal-chip{ color: var(--ac-accent); } .cvb-ac .ac-wont{ font-size: 13px; } .cvb-ac .ac-wont > div{ flex-wrap: wrap; gap: 8px; margin: 12px 0px; display: flex; } .cvb-ac .ac-wont span{ color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; display: flex; } .cvb-ac .ac-wont svg{ width: 13px; height: 13px; color: var(--ac-accent); } .cvb-ac .ac-wont p{ color: var(--muted-foreground); margin: 0px; font-size: 13px; } @media (max-width: 767px){ .cvb-ac .ac-cap-extras{ grid-template-columns: 1fr; } } .cvb-ac .ac-architecture{ flex-direction: column; align-items: center; margin: 32px 0px; display: flex; } .cvb-ac .ac-arch-node{ border: 1px solid var(--border); background: var(--card); border-radius: 14px; align-items: flex-start; gap: 12px; padding: 14px 16px; display: flex; position: relative; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-node{ background: color-mix(in oklab,var(--card) 80%,transparent); } } .cvb-ac .ac-arch-node{ text-align: left; } .cvb-ac .ac-arch-node strong{ font-size: 14px; line-height: 1.3; display: block; } .cvb-ac .ac-arch-node span{ color: var(--ac-accent); margin-top: 2px; font-size: 12.5px; display: block; } .cvb-ac .ac-arch-node small{ color: var(--muted-foreground); margin-top: 4px; font-size: 12px; line-height: 1.45; display: block; } .cvb-ac .ac-arch-node em{ letter-spacing: 0.12em; text-transform: uppercase; background: var(--background); border: 1px solid var(--border); color: var(--muted-foreground); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-style: normal; font-weight: 700; position: absolute; top: -9px; right: 12px; } .cvb-ac .ac-arch-ico{ background: var(--ac-accent); border-radius: 10px; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; display: grid; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-ico{ background: color-mix(in oklab,var(--ac-accent) 14%,transparent); } } .cvb-ac .ac-arch-ico{ color: var(--ac-accent); } .cvb-ac .ac-arch-ico svg{ width: 17px; height: 17px; } .cvb-ac .ac-arch-node.is-end{ min-width: 280px; } .cvb-ac .ac-arch-link{ background: linear-gradient(var(--ac-accent),var(--ac-blue)); width: 1px; height: 26px; } .cvb-ac .ac-arch-hub{ border: 1px solid var(--ac-accent); border-radius: 20px; width: 100%; padding: 18px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-hub{ border: 1px solid color-mix(in oklab,var(--ac-accent) 30%,var(--border)); } } .cvb-ac .ac-arch-hub{ background: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-hub{ background: color-mix(in oklab,var(--ac-accent) 5%,transparent); } } .cvb-ac .ac-arch-hub{ flex-direction: column; align-items: center; gap: 16px; display: flex; } .cvb-ac .ac-arch-node.is-agent{ border-color: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-node.is-agent{ border-color: color-mix(in oklab,var(--ac-accent) 55%,transparent); } } .cvb-ac .ac-arch-node.is-agent{ background: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-node.is-agent{ background: color-mix(in oklab,var(--ac-accent) 12%,var(--card)); } } .cvb-ac .ac-arch-node.is-agent{ min-width: 280px; } .cvb-ac .ac-arch-node.is-agent em{ color: var(--ac-accent); border-color: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-node.is-agent em{ border-color: color-mix(in oklab,var(--ac-accent) 50%,transparent); } } .cvb-ac .ac-arch-grid{ grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; display: grid; } @media (max-width: 767px){ .cvb-ac .ac-arch-grid{ grid-template-columns: 1fr; } .cvb-ac .ac-arch-node.is-end, .cvb-ac .ac-arch-node.is-agent{ width: 100%; min-width: 0px; } } .cvb-ac .ac-stack{ isolation: isolate; position: relative; overflow: hidden; } .cvb-ac .ac-stack::before{ content: ""; z-index: -1; pointer-events: none; background: radial-gradient(38% 44% at 16% 24%,var(--ac-accent),transparent 70%),radial-gradient(34% 40% at 84% 72%,var(--ac-blue),transparent 70%); position: absolute; inset: -15% -12%; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-stack::before{ background: radial-gradient(38% 44% at 16% 24%,color-mix(in oklab,var(--ac-accent) 15%,transparent),transparent 70%),radial-gradient(34% 40% at 84% 72%,color-mix(in oklab,var(--ac-blue) 13%,transparent),transparent 70%); } } .cvb-ac .ac-stack::before{ animation: 24s ease-in-out 0s infinite alternate none running acStackDrift; } @keyframes acStackDrift{ 0% { transform: translate(-3%, -2%) scale(1); } 100% { transform: translate(4%, 3%) scale(1.1); } } .cvb-ac .ac-stack-body > .ac-reveal{ opacity: 0; transition: opacity .65s ease var(--ac-d,0s),transform .65s cubic-bezier(.22,.68,.3,1) var(--ac-d,0s); transform: translateY(16px); } .cvb-ac .ac-stack-body > .ac-reveal.is-in{ opacity: 1; transform: none; } .cvb-ac .ac-tech-pill{ border: 1px solid var(--ac-accent); border-radius: 999px; align-items: center; gap: 7px; margin: 0px 1px; padding: 2px 11px; display: inline-flex; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-tech-pill{ border: 1px solid color-mix(in oklab,var(--ac-accent) 42%,transparent); } } .cvb-ac .ac-tech-pill{ background: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-tech-pill{ background: color-mix(in oklab,var(--ac-accent) 10%,transparent); } } .cvb-ac .ac-tech-pill{ color: var(--foreground); white-space: nowrap; font-size: 0.9em; font-weight: 600; transition: transform 0.2s, background 0.2s, border-color 0.2s; } .cvb-ac .ac-tech-pill::before{ content: ""; background: var(--ac-accent); border-radius: 50%; width: 5px; height: 5px; animation: 3s ease-out 0s infinite normal none running acPillPulse; } @keyframes acPillPulse{ 0% { box-shadow: 0 0 color-mix(in oklab,var(--ac-accent) 55%,transparent); } 70%, 100% { box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 7px; } } .cvb-ac .ac-tech-pill:hover{ background: var(--ac-accent); transform: translateY(-2px); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-tech-pill:hover{ background: color-mix(in oklab,var(--ac-accent) 20%,transparent); } } .cvb-ac .ac-tech-pill:hover{ border-color: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-tech-pill:hover{ border-color: color-mix(in oklab,var(--ac-accent) 70%,transparent); } } .cvb-ac .ac-status{ letter-spacing: 0.1em; text-transform: uppercase; color: var(--foreground); white-space: nowrap; align-items: baseline; gap: 9px; font-size: 11.5px; font-weight: 700; display: inline-flex; } .cvb-ac .ac-status::before{ content: ""; border-radius: 50%; flex: 0 0 auto; align-self: center; width: 8px; height: 8px; } .cvb-ac .ac-status em{ letter-spacing: 0px; text-transform: none; color: var(--muted-foreground); font-size: 12.5px; font-style: normal; font-weight: 500; } .cvb-ac .ac-status.is-core::before{ background: var(--ac-accent); box-shadow: 0 0 0 4px var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-status.is-core::before{ box-shadow: 0 0 0 4px color-mix(in oklab,var(--ac-accent) 20%,transparent); } } .cvb-ac .ac-status.is-extended::before{ background: var(--ac-blue); box-shadow: 0 0 0 4px var(--ac-blue); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-status.is-extended::before{ box-shadow: 0 0 0 4px color-mix(in oklab,var(--ac-blue) 18%,transparent); } } .cvb-ac .ac-status.is-standard::before{ background: var(--ac-success); box-shadow: 0 0 0 4px var(--ac-success); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-status.is-standard::before{ box-shadow: 0 0 0 4px color-mix(in oklab,var(--ac-success) 18%,transparent); } } .cvb-ac .ac-stack .ac-table-scroll{ border-color: var(--foreground); border-radius: 14px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-stack .ac-table-scroll{ border-color: color-mix(in oklab,var(--foreground) 14%,transparent); } } .cvb-ac .ac-stack .ac-table-scroll{ background: var(--card); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-stack .ac-table-scroll{ background: color-mix(in oklab,var(--card) 62%,transparent); } } .cvb-ac .ac-stack .ac-table-scroll{ box-shadow: rgba(0, 0, 0, 0.7) 0px 24px 60px -40px; } .cvb-ac .ac-stack .ac-table-scroll th{ background: var(--muted); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-stack .ac-table-scroll th{ background: color-mix(in oklab,var(--muted) 55%,transparent); } } .cvb-ac .ac-stack .ac-table-scroll th{ letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); font-size: 11px; } .cvb-ac .ac-stack .ac-table-scroll th:first-child{ box-shadow: inset 3px 0 0 var(--ac-accent); } .cvb-ac .ac-stack .ac-table-scroll tbody tr{ opacity: 0; transition: opacity 0.5s, transform 0.5s, background 0.25s; transform: translateY(10px); } .cvb-ac .ac-stack .ac-table-scroll.is-in tbody tr{ opacity: 1; transform: none; } .cvb-ac .ac-stack .ac-table-scroll tbody tr:hover{ background: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-stack .ac-table-scroll tbody tr:hover{ background: color-mix(in oklab,var(--ac-accent) 8%,transparent); } } .cvb-ac .ac-stack .ac-table-scroll tbody tr:hover td:first-child{ background: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-stack .ac-table-scroll tbody tr:hover td:first-child{ background: color-mix(in oklab,var(--ac-accent) 8%,var(--card)); } } .cvb-ac .ac-stack .ac-table-scroll tbody tr:hover td:first-child{ box-shadow: inset 3px 0 0 var(--ac-accent); } .cvb-ac .ac-arch-link{ position: relative; } .cvb-ac .ac-arch-link::after{ content: ""; background: var(--ac-accent); width: 5px; height: 5px; box-shadow: 0 0 10px 2px var(--ac-accent); border-radius: 50%; position: absolute; top: 0px; left: -2px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-link::after{ box-shadow: 0 0 10px 2px color-mix(in oklab,var(--ac-accent) 55%,transparent); } } .cvb-ac .ac-arch-link::after{ animation: 3.4s ease-in-out 0s infinite normal none running acArchTravel; } @keyframes acArchTravel{ 0% { opacity: 0; transform: translateY(-5px); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } } .cvb-ac .ac-arch-hub{ animation: 7s ease-in-out 0s infinite normal none running acHubGlow; } @keyframes acHubGlow{ 0%, 100% { box-shadow: 0 0 color-mix(in oklab,var(--ac-accent) 8%,transparent); } 50% { box-shadow: 0 0 40px -8px color-mix(in oklab,var(--ac-accent) 30%,transparent); } } .cvb-ac .ac-arch-node{ transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; } .cvb-ac .ac-arch-node:hover{ border-color: var(--ac-accent); transform: translateY(-3px); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-node:hover{ border-color: color-mix(in oklab,var(--ac-accent) 45%,transparent); } } .cvb-ac .ac-arch-node:hover{ box-shadow: 0 16px 34px -24px var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-arch-node:hover{ box-shadow: 0 16px 34px -24px color-mix(in oklab,var(--ac-accent) 75%,transparent); } } .cvb-ac .ac-arch-ico{ transition: transform 0.25s; } .cvb-ac .ac-arch-node:hover .ac-arch-ico{ transform: scale(1.1); } .cvb-ac .ac-table-scroll{ border: 1px solid var(--border); border-radius: 5px; margin: 30px 0px; overflow-x: auto; } .cvb-ac .ac-table-scroll table{ border-collapse: collapse; width: 100%; min-width: 760px; font-size: 13px; } .cvb-ac .ac-table-scroll th{ text-align: left; background: var(--muted); padding: 17px; font-weight: 600; } .cvb-ac .ac-table-scroll td{ border-top: 1px solid var(--border); color: var(--muted-foreground); vertical-align: top; padding: 18px 17px; } .cvb-ac .ac-table-scroll th:first-child, .cvb-ac .ac-table-scroll td:first-child{ background: var(--card); min-width: 170px; position: sticky; left: 0px; } .cvb-ac .ac-table-scroll th:nth-child(2), .cvb-ac .ac-table-scroll td:nth-child(2){ border-inline: 1px solid var(--ac-accent); } .cvb-ac .ac-table-scroll tr:has(td:first-child:nth-last-child(4)):last-child:has(td:first-child){ scroll-margin-top: 100px; } .cvb-ac .ac-pricing-grid{ grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; margin: 32px 0px; display: grid; } .cvb-ac .ac-pricing-tier{ border: 0; border-top: 3px solid var(--ac-accent); background: var(--card); border-radius: 8px; min-width: 0px; padding: 24px; } .cvb-ac .ac-pricing-tier:nth-child(2){ border-top-color: var(--ac-blue); } .cvb-ac .ac-pricing-tier h3{ letter-spacing: 0px; min-height: 58px; margin: 0px 0px 18px; font-size: 19px; line-height: 1.5; } .cvb-ac .ac-pricing-tier dl{ margin: 0px; } .cvb-ac .ac-pricing-tier dl > div{ border-top: 1px solid var(--border); padding: 16px 0px; } .cvb-ac .ac-pricing-tier dl > div:first-child{ min-height: 145px; } .cvb-ac .ac-pricing-tier dl > div:last-child{ padding-bottom: 0px; } .cvb-ac .ac-pricing-tier dt{ color: var(--muted-foreground); margin-bottom: 7px; font-size: 12px; } .cvb-ac .ac-pricing-tier dd{ color: var(--foreground); margin: 0px; font-size: 14px; line-height: 1.65; } .cvb-ac .ac-pricing-tier dd strong{ color: var(--foreground); font-weight: 700; } .cvb-ac .ac-pricing-tier .ac-pricing-amount{ font-family: var(--font-heading); color: var(--ac-accent); font-size: 28px; } @media (max-width: 767px){ .cvb-ac .ac-pricing-grid{ grid-template-columns: 1fr; } .cvb-ac .ac-pricing-tier h3, .cvb-ac .ac-pricing-tier dl > div:first-child{ min-height: 0px; } } .cvb-ac .ac-compliance-grid{ grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px; margin: 30px 0px; display: grid; } .cvb-ac .ac-compliance{ border: 1px solid var(--border); background: var(--card); border-radius: 8px; padding: 28px; } .cvb-ac .ac-compliance > svg{ color: var(--ac-accent); margin-bottom: 16px; } .cvb-ac .ac-compliance p{ font-size: 14px; } .cvb-ac .ac-compliance p:last-child{ font-size: 11px; } .cvb-ac .ac-controls{ border-block: 1px solid var(--border); margin-bottom: 38px; padding: 22px 0px; font-size: 14px; } .cvb-ac .ac-objections{ grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 20px; display: grid; } .cvb-ac .ac-objections article{ border-top: 2px solid var(--ac-accent); padding-top: 20px; font-size: 14px; } .cvb-ac .ac-timeline-label{ color: var(--ac-accent); margin-top: 30px; font-size: 11px; } .cvb-ac .ac-timeline{ gap: 20px; margin-bottom: 20px; padding: 25px 0px 35px; display: flex; overflow-x: auto; } .cvb-ac .ac-timeline article{ border-top: 1px solid var(--ac-accent); flex: 1 1 0%; min-width: 160px; padding-top: 15px; } .cvb-ac .ac-timeline article > span{ color: var(--ac-accent); font-size: 12px; display: block; } .cvb-ac .ac-timeline svg{ width: 18px; margin: 15px 0px; } .cvb-ac .ac-timeline h3{ font-size: 15px; } .cvb-ac .ac-timeline p{ font-size: 13px; } .cvb-ac .ac-fit-grid{ border-top: 1px solid var(--border); grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 28px; display: grid; } .cvb-ac .ac-fit-grid h3{ align-items: center; gap: 12px; display: flex; } .cvb-ac .ac-fit-grid h3 svg{ color: var(--ac-accent); width: 20px; } .cvb-ac .ac-glossary{ grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 30px; display: grid; } .cvb-ac .ac-glossary dt{ color: var(--foreground); margin-bottom: 10px; font-weight: 600; } .cvb-ac .ac-glossary dd{ color: var(--muted-foreground); font-size: 14px; } .cvb-ac .ac-faq-grid{ grid-template-columns: 1fr 1fr; align-items: start; gap: 0px 35px; display: grid; } .cvb-ac .ac-faq{ border-bottom: 1px solid var(--border); } .cvb-ac .ac-faq button{ white-space: normal; text-align: left; justify-content: space-between; width: 100%; height: auto; min-height: 75px; padding: 18px 16px; font-size: 15px; border-radius: 10px; } .cvb-ac .ac-faq p{ padding-bottom: 18px; font-size: 14px; } .cvb-ac .ac-faq > [data-ac-answer]{ padding: 4px 16px 0; } .cvb-ac .ac-book-grid{ grid-template-columns: 1fr 1fr; align-items: start; gap: 50px; display: grid; } .cvb-ac .ac-book h2 em{ display: block; } .cvb-ac .ac-book-grid > div:first-child > button{ white-space: normal; height: auto; margin: 8px 0px; } .cvb-ac .ac-form, .cvb-ac .ac-form-result{ border: 1px solid var(--border); background: var(--card); border-radius: 8px; padding: 28px; } .cvb-ac .ac-form-progress{ color: var(--ac-accent); margin-bottom: 25px; font-size: 13px; } .cvb-ac .ac-form-progress > div{ gap: 6px; margin-top: 12px; display: flex; } .cvb-ac .ac-form-progress i{ background: var(--border); flex: 1 1 0%; height: 3px; } .cvb-ac .ac-form-progress .ac-progress-active{ background: var(--ac-accent); } .cvb-ac .ac-form fieldset{ margin: 0px 0px 25px; } .cvb-ac .ac-form legend{ margin-bottom: 10px; font-size: 14px; font-weight: 600; } .cvb-ac .ac-options{ flex-wrap: wrap; gap: 8px; display: flex; } .cvb-ac .ac-options button{ white-space: normal; height: auto; padding: 9px 12px; font-size: 12px; } .cvb-ac .ac-options .ac-option-selected{ border-color: var(--ac-accent); background: var(--ac-surge); color: var(--ac-accent); } .cvb-ac .ac-form .ac-input-grid{ grid-template-columns: 1fr 1fr; } .cvb-ac .ac-form-buttons{ justify-content: flex-end; gap: 10px; display: flex; } .cvb-ac .ac-form-error{ min-height: 20px; font-size: 13px; } .cvb-ac .ac-honeypot{ display: none !important; } .cvb-ac .ac-form-result button{ white-space: normal; height: auto; margin: 10px 10px 0px 0px; } .cvb-ac .ac-service-links{ grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; margin: 25px 0px; display: grid; } .cvb-ac .ac-service-links a{ border: 1px solid var(--border); background: var(--card); border-radius: 8px; align-items: center; gap: 15px; padding: 22px; transition: border-color 0.2s; display: flex; } .cvb-ac .ac-service-links a:hover{ border-color: var(--ac-accent); } .cvb-ac .ac-service-links h3{ color: var(--foreground); flex: 1 1 0%; margin: 0px; font-size: 15px; } .cvb-ac .ac-service-links svg{ flex-shrink: 0; width: 18px; } .cvb-ac .ac-related-title{ margin-top: 45px; } .cvb-ac .ac-footer-links{ flex-wrap: wrap; gap: 25px; margin-top: 30px; font-size: 14px; display: flex; } .cvb-ac .ac-sticky{ display: none; } @media (min-width: 1500px){ .cvb-ac .ac-hero{ padding-bottom: 60px; } } @media (max-width: 1023px){ .cvb-ac .ac-hero-grid{ gap: 28px; } .cvb-ac .ac-capability-grid, .cvb-ac .ac-objections, .cvb-ac .ac-glossary{ grid-template-columns: 1fr 1fr; } .cvb-ac .ac-book-grid{ gap: 30px; } .cvb-ac .ac-service-links{ grid-template-columns: 1fr 1fr; } } @media (max-width: 767px){ .cvb-ac .ac-container{ padding: 0px 20px; } .cvb-ac .ac-hero{ padding: 104px 0px 40px; } .cvb-ac .ac-hero-grid{ grid-template-columns: 1fr; gap: 32px; } .cvb-ac .ac-section{ padding: 50px 0px; } .cvb-ac .ac-player{ padding: 16px; } .cvb-ac .ac-capability-grid, .cvb-ac .ac-book-grid, .cvb-ac .ac-faq-grid, .cvb-ac .ac-compliance-grid, .cvb-ac .ac-fit-grid{ grid-template-columns: 1fr; } .cvb-ac .ac-objections, .cvb-ac .ac-glossary{ grid-template-columns: 1fr 1fr; } .cvb-ac .ac-input-grid{ grid-template-columns: 1fr; gap: 14px; } .cvb-ac .ac-stat-row{ gap: 12px; } .cvb-ac .ac-stat-row strong{ font-size: 23px; } .cvb-ac .ac-stat-row span{ font-size: 11px; } .cvb-ac .ac-chart svg{ min-width: 600px; } .cvb-ac .ac-chart{ overflow-x: auto; } .cvb-ac .ac-months{ min-width: 600px; } .cvb-ac .ac-chart-key{ justify-content: flex-start; } .cvb-ac .ac-service-links{ grid-template-columns: 1fr; } .cvb-ac .ac-form{ padding: 20px; } .cvb-ac .ac-form .ac-input-grid{ grid-template-columns: 1fr; } .cvb-ac .ac-sticky{ padding: 12px 15px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); z-index: 40; bottom: 0px; gap: 10px; display: flex; position: fixed; inset-inline: 0px; } .cvb-ac .ac-sticky button{ flex: 1 1 0%; } .cvb-ac .ac-book-grid{ gap: 28px; } } @media (prefers-reduced-motion: reduce){ .cvb-ac .ac-stack-body > .ac-reveal, .cvb-ac .ac-stack .ac-table-scroll tbody tr{ opacity: 1 !important; transform: none !important; } } .cvb-ac .ac-wwd-answer{ color: var(--muted-foreground); max-width: 820px; margin-top: 12px; font-size: 16px; } .cvb-ac .ac-wwd-row1{ grid-template-columns: 3fr 2fr; gap: 20px; margin-top: 32px; display: grid; } .cvb-ac .ac-wwd-toggle, .cvb-ac .ac-wwd-stat, .cvb-ac .ac-flip-face, .cvb-ac .ac-wwd-metrics > div{ background: var(--card); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-toggle, .cvb-ac .ac-wwd-stat, .cvb-ac .ac-flip-face, .cvb-ac .ac-wwd-metrics > div{ background: color-mix(in oklab,var(--card) 85%,transparent); } } .cvb-ac .ac-wwd-toggle, .cvb-ac .ac-wwd-stat, .cvb-ac .ac-flip-face, .cvb-ac .ac-wwd-metrics > div{ border: 1px solid var(--border); border-radius: 16px; } .cvb-ac .ac-wwd-toggle{ padding: 20px; } .cvb-ac .ac-wwd-tabs{ background: var(--background); border: 1px solid var(--border); border-radius: 999px; gap: 4px; padding: 4px; display: inline-flex; } .cvb-ac .ac-wwd-tabs button{ color: var(--muted-foreground); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background 0.15s, color 0.15s; } .cvb-ac .ac-wwd-tabs button[aria-selected="true"]{ background: var(--ac-gradient); color: var(--primary-foreground); } .cvb-ac .ac-wwd-panels{ margin-top: 16px; display: grid; } .cvb-ac .ac-wwd-panel{ opacity: 0; visibility: hidden; grid-area: 1 / 1; margin: 0px; padding: 0px; list-style: none; transition: opacity 0.15s; } .cvb-ac .ac-wwd-panel.is-active{ opacity: 1; visibility: visible; } .cvb-ac .ac-wwd-panel li{ border-top: 1px solid var(--border); align-items: center; gap: 12px; padding: 12px 0px; font-size: 15px; display: flex; } .cvb-ac .ac-wwd-panel li small{ letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); font-size: 11px; display: block; } .cvb-ac .ac-wwd-row-icon{ background: var(--ac-accent); border-radius: 10px; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; display: inline-grid; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-row-icon{ background: color-mix(in oklab,var(--ac-accent) 14%,transparent); } } .cvb-ac .ac-wwd-row-icon{ color: var(--ac-accent); } .cvb-ac .ac-wwd-row-icon svg{ width: 17px; height: 17px; } .cvb-ac .is-ai .ac-wwd-row-icon{ background: var(--ac-success); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .is-ai .ac-wwd-row-icon{ background: color-mix(in oklab,var(--ac-success) 15%,transparent); } } .cvb-ac .is-ai .ac-wwd-row-icon{ color: var(--ac-success); } .cvb-ac .ac-wwd-stat{ flex-direction: column; padding: 24px; display: flex; } .cvb-ac .ac-wwd-source{ border: 1px solid var(--border); color: var(--muted-foreground); border-radius: 999px; align-self: flex-start; padding: 4px 10px; font-size: 11px; } .cvb-ac .ac-wwd-stat strong{ color: var(--ac-accent); background: 0px 0px; margin: 14px 0px 6px; font-family: Goldman, sans-serif; font-size: 48px; line-height: 1.1; display: block; } .cvb-ac .ac-wwd-stat p{ color: var(--muted-foreground); margin: 0px; font-size: 14px; } .cvb-ac .ac-wwd-stat hr{ border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--border); margin: 16px 0px; } .cvb-ac .ac-wwd-stat .ac-wwd-translate{ color: var(--foreground); font-weight: 600; } .cvb-ac .ac-wwd-subtitle{ margin-top: 44px; font-size: 20px; } .cvb-ac .ac-wwd-hint{ color: var(--muted-foreground); margin: 4px 0px 16px; font-size: 13px; } .cvb-ac .ac-wwd-flips{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; display: grid; } .cvb-ac .ac-flip{ perspective: 1000px; text-align: left; min-height: 200px; padding: 0px; } .cvb-ac .ac-flip-inner{ height: 100%; transform-style: preserve-3d; transition: transform 0.3s; display: grid; position: relative; } .cvb-ac .ac-flip.is-flipped .ac-flip-inner{ transform: rotateY(180deg); } .cvb-ac .ac-flip-face{ backface-visibility: hidden; flex-direction: column; grid-area: 1 / 1; gap: 10px; padding: 20px; transition: border-color 0.2s; display: flex; } .cvb-ac .ac-flip:hover .ac-flip-face, .cvb-ac .ac-flip:focus-visible .ac-flip-face{ border-color: var(--ac-accent); } .cvb-ac .ac-flip-face strong{ font-size: 16px; } .cvb-ac .ac-flip-face > span:not(.ac-wwd-row-icon){ color: var(--muted-foreground); font-size: 14px; } .cvb-ac .ac-flip-front em{ color: var(--ac-accent); align-items: center; gap: 6px; margin-top: auto; font-size: 12px; font-style: normal; display: flex; } .cvb-ac .ac-flip-front em svg{ width: 13px; height: 13px; } .cvb-ac .ac-flip-back{ border-color: var(--ac-success); transform: rotateY(180deg); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-flip-back{ border-color: color-mix(in oklab,var(--ac-success) 45%,transparent); } } .cvb-ac .ac-flip-back small{ color: var(--ac-success); text-transform: uppercase; letter-spacing: 0.05em; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; display: flex; } .cvb-ac .ac-flip-back small svg{ width: 14px; height: 14px; } .cvb-ac .ac-flip-back > span{ color: var(--foreground) !important; } .cvb-ac .ac-wwd-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; display: grid; } .cvb-ac .ac-wwd-metrics > div{ padding: 20px; } .cvb-ac .ac-wwd-metrics strong{ color: var(--ac-accent); font-family: Goldman, sans-serif; font-size: 26px; display: block; } .cvb-ac .ac-wwd-metrics span{ color: var(--muted-foreground); font-size: 12px; } .cvb-ac .ac-wwd-light{ --background: #f3f6fb; --foreground: #141a29; --card: #fdfeff; --muted: #e7ebf3; --muted-foreground: #404858; --border: #1d222b1f; --ac-accent: #c60; --ac-success: #05893e; --ac-surge: #cc66001a; --ac-blue: #1949ff; background: var(--background); } @supports (color:lab(0% 0 0)){ .cvb-ac .ac-wwd-light{ --background: lab(96.7266% -.420183 -2.99121); --foreground: lab(9.3201% .515975 -10.8754); --card: lab(99.6396% -.215173 -1.49853); --muted: lab(93.001% -.613987 -4.4776); --muted-foreground: lab(30.2349% -.0813603 -11.0542); --border: lab(12.8881% -.0225306 -7.35811/.12); --ac-accent: lab(54.9553% 40.8334 78.1887); --ac-success: lab(49.6613% -45.6133 30.4579); --ac-surge: lab(54.9553% 40.8334 78.1887/.1); --ac-blue: lab(39.6559% 45.5414 -99.0146); } } .cvb-ac .ac-wwd-light h2, .cvb-ac .ac-wwd-light h3{ color: var(--foreground); } .cvb-ac .ac-wwd-light .ac-wwd-answer, .cvb-ac .ac-wwd-light .ac-wwd-hint{ color: var(--muted-foreground); } .cvb-ac .ac-wwd-light .ac-wwd-toggle, .cvb-ac .ac-wwd-light .ac-wwd-stat, .cvb-ac .ac-wwd-light .ac-flip-face, .cvb-ac .ac-wwd-light .ac-wwd-metrics > div{ background: var(--card); box-shadow: rgba(20, 26, 41, 0.06) 0px 1px 2px, rgba(20, 26, 41, 0.22) 0px 10px 30px -18px; } .cvb-ac .ac-wwd-light .ac-wwd-tabs{ background: var(--muted); } .cvb-ac .ac-wwd-light .ac-wwd-row-icon{ background: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-light .ac-wwd-row-icon{ background: color-mix(in oklab,var(--ac-accent) 14%,transparent); } } .cvb-ac .ac-wwd-light .ac-wwd-row-icon{ color: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-light .ac-wwd-row-icon{ color: color-mix(in oklab,var(--ac-accent) 62%,var(--foreground)); } } .cvb-ac .ac-wwd-light .is-ai .ac-wwd-row-icon{ background: var(--ac-success); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-light .is-ai .ac-wwd-row-icon{ background: color-mix(in oklab,var(--ac-success) 14%,transparent); } } .cvb-ac .ac-wwd-light .is-ai .ac-wwd-row-icon{ color: var(--ac-success); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-light .is-ai .ac-wwd-row-icon{ color: color-mix(in oklab,var(--ac-success) 58%,var(--foreground)); } } .cvb-ac .ac-wwd-light .ac-wwd-source{ color: var(--muted-foreground); border-color: var(--foreground); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-light .ac-wwd-source{ border-color: color-mix(in oklab,var(--foreground) 18%,transparent); } } .cvb-ac .ac-wwd-light .ac-wwd-panel li small{ color: var(--muted-foreground); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-light .ac-wwd-panel li small{ color: color-mix(in oklab,var(--muted-foreground) 78%,var(--foreground)); } } .cvb-ac .ac-wwd-light .ac-wwd-metrics span, .cvb-ac .ac-wwd-light .ac-wwd-hint{ color: var(--muted-foreground); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-light .ac-wwd-metrics span, .cvb-ac .ac-wwd-light .ac-wwd-hint{ color: color-mix(in oklab,var(--muted-foreground) 80%,var(--foreground)); } } .cvb-ac .ac-wwd-light .ac-wwd-stat .ac-wwd-translate{ color: var(--foreground); } .cvb-ac .ac-wwd-light .ac-flip-back{ background: var(--ac-success); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-wwd-light .ac-flip-back{ background: color-mix(in oklab,var(--ac-success) 7%,var(--card)); } } @media (prefers-reduced-motion: reduce){ .cvb-ac .ac-flip-inner, .cvb-ac .ac-wwd-panel{ transition: none; } } @media (max-width: 767px){ .cvb-ac .ac-wwd-row1, .cvb-ac .ac-wwd-flips, .cvb-ac .ac-wwd-metrics{ grid-template-columns: 1fr; } } .cvb-ac .ac-uc{ border: 1px solid var(--border); background: var(--card); border-radius: 16px; grid-template-columns: 260px minmax(0px, 1fr); margin-top: 24px; display: grid; overflow: hidden; } .cvb-ac .ac-uc-list{ border-right: 1px solid var(--border); background: var(--background); flex-direction: column; gap: 2px; padding: 8px; display: flex; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-uc-list{ background: color-mix(in oklab,var(--background) 60%,var(--card)); } } .cvb-ac .ac-uc-item{ width: 100%; color: var(--muted-foreground); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; text-align: left; cursor: pointer; background: 0px 0px; border: 0px; border-radius: 10px; align-items: center; gap: 12px; padding: 11px 12px; font-size: 14px; transition: background 0.2s, color 0.2s; display: flex; position: relative; } .cvb-ac .ac-uc-item svg{ flex: 0 0 auto; width: 17px; height: 17px; } .cvb-ac .ac-uc-item:hover{ background: var(--foreground); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-uc-item:hover{ background: color-mix(in oklab,var(--foreground) 5%,transparent); } } .cvb-ac .ac-uc-item:hover{ color: var(--foreground); } .cvb-ac .ac-uc-item.is-on{ background: var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-uc-item.is-on{ background: color-mix(in oklab,var(--ac-accent) 12%,transparent); } } .cvb-ac .ac-uc-item.is-on{ color: var(--foreground); } .cvb-ac .ac-uc-item.is-on::before{ content: ""; background: var(--ac-gradient); border-radius: 3px; width: 3px; position: absolute; top: 10px; bottom: 10px; left: 0px; } .cvb-ac .ac-uc-item.is-on svg{ color: var(--ac-accent); } .cvb-ac .ac-uc-item:focus-visible{ outline: 2px solid var(--ring); outline-offset: -2px; } .cvb-ac .ac-uc-n{ letter-spacing: 0.08em; opacity: 0.7; flex: 0 0 auto; width: 20px; font-family: Goldman, sans-serif; font-size: 12px; } .cvb-ac .ac-uc-panel{ min-height: 300px; padding: 24px 28px; animation: 0.3s ease 0s 1 normal none running acUcIn; } @keyframes acUcIn{ 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } } .cvb-ac .ac-uc-head{ flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; display: flex; } .cvb-ac .ac-uc-ico{ background: var(--ac-accent); border-radius: 10px; place-items: center; width: 38px; height: 38px; display: grid; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-uc-ico{ background: color-mix(in oklab,var(--ac-accent) 14%,transparent); } } .cvb-ac .ac-uc-ico{ color: var(--ac-accent); } .cvb-ac .ac-uc-ico svg{ width: 19px; height: 19px; } .cvb-ac .ac-uc-head h3{ margin: 0px; font-size: 20px; } .cvb-ac .ac-uc-tag{ color: var(--ac-accent); background: var(--ac-accent); border-radius: 999px; margin-left: auto; padding: 5px 11px; font-size: 12px; } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-uc-tag{ background: color-mix(in oklab,var(--ac-accent) 12%,transparent); } } .cvb-ac .ac-uc-tag{ border: 1px solid var(--ac-accent); } @supports (color:color-mix(in lab,red,red)){ .cvb-ac .ac-uc-tag{ border: 1px solid color-mix(in oklab,var(--ac-accent) 30%,transparent); } } .cvb-ac .ac-uc-desc{ color: var(--muted-foreground); max-width: 680px; margin: 0px 0px 20px; font-size: 15px; line-height: 1.65; } .cvb-ac .ac-uc-desc a{ color: var(--ac-accent); } .cvb-ac .ac-uc-bubbles{ gap: 14px; display: grid; } .cvb-ac .ac-uc-bubbles.is-two{ grid-template-columns: 1fr 1fr; } .cvb-ac .ac-uc-label{ color: var(--muted-foreground); align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; display: flex; } .cvb-ac .ac-uc-label svg{ width: 13px; height: 13px; } .cvb-ac .ac-uc-bubble{ background: var(--muted); border-left: 2px solid var(--ac-accent); color: var(--foreground); border-radius: 14px 14px 14px 4px; margin: 0px; padding: 14px 16px; font-size: 15px; font-style: italic; line-height: 1.55; } .cvb-ac .ac-uc-bubble.is-sms{ border-left: 0px; border-right: 2px solid var(--ac-blue); border-radius: 14px 14px 4px; font-size: 14px; font-style: normal; } .cvb-ac .ac-uc-link{ color: var(--ac-accent); text-underline-offset: 3px; text-decoration: underline; } .cvb-ac .ac-uc-wont{ flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; display: flex; } .cvb-ac .ac-uc-wont strong{ margin-right: 6px; font-size: 14px; } .cvb-ac .ac-uc-wont span{ border: 1px solid var(--border); background: var(--card); color: var(--foreground); border-radius: 999px; align-items: center; gap: 7px; padding: 6px 12px; font-size: 13px; display: inline-flex; } .cvb-ac .ac-uc-wont svg{ width: 13px; height: 13px; color: var(--destructive); } .cvb-ac .ac-uc-note{ color: var(--muted-foreground); margin: 10px 0px 0px; font-size: 13px; } .cvb-ac .ac-uc-light{ --background: #f3f6fb; --foreground: #141a29; --card: #fdfeff; --muted: #e7ebf3; --muted-foreground: #404858; --border: #1d222b1f; --ac-accent: #c60; --ac-blue: #1949ff; --destructive: #d40924; background: var(--background); } @supports (color:lab(0% 0 0)){ .cvb-ac .ac-uc-light{ --background: lab(96.7266% -.420183 -2.99121); --foreground: lab(9.3201% .515975 -10.8754); --card: lab(99.6396% -.215173 -1.49853); --muted: lab(93.001% -.613987 -4.4776); --muted-foreground: lab(30.2349% -.0813603 -11.0542); --border: lab(12.8881% -.0225306 -7.35811/.12); --ac-accent: lab(54.9553% 40.8334 78.1887); --ac-blue: lab(39.6559% 45.5414 -99.0146); --destructive: lab(45.5382% 69.8881 46.2994); } } .cvb-ac .ac-uc-light h2, .cvb-ac .ac-uc-light h3, .cvb-ac .ac-uc-light .ac-uc-bubble{ color: var(--foreground); } .cvb-ac .ac-uc-light .ac-uc{ background: var(--card); box-shadow: rgba(20, 26, 41, 0.06) 0px 1px 2px, rgba(20, 26, 41, 0.22) 0px 10px 30px -18px; } .cvb-ac .ac-uc-light .ac-uc-wont span{ background: var(--card); box-shadow: rgba(20, 26, 41, 0.06) 0px 1px 2px; } .cvb-ac .ac-uc-light .ac-uc-bubble{ background: var(--muted); } .cvb-ac .ac-compliance-light{ --background: #f3f6fb; --foreground: #141a29; --card: #fdfeff; --muted: #e7ebf3; --muted-foreground: #404858; --border: #1d222b1f; --ac-accent: #c60; --ac-blue: #1949ff; --destructive: #d40924; background: var(--background); } @supports (color:lab(0% 0 0)){ .cvb-ac .ac-compliance-light{ --background: lab(96.7266% -.420183 -2.99121); --foreground: lab(9.3201% .515975 -10.8754); --card: lab(99.6396% -.215173 -1.49853); --muted: lab(93.001% -.613987 -4.4776); --muted-foreground: lab(30.2349% -.0813603 -11.0542); --border: lab(12.8881% -.0225306 -7.35811/.12); --ac-accent: lab(54.9553% 40.8334 78.1887); --ac-blue: lab(39.6559% 45.5414 -99.0146); --destructive: lab(45.5382% 69.8881 46.2994); } } .cvb-ac .ac-compliance-light h2, .cvb-ac .ac-compliance-light h3{ color: var(--foreground); } .cvb-ac .ac-compliance-light .ac-compliance{ background: var(--card); box-shadow: rgba(20, 26, 41, 0.06) 0px 1px 2px, rgba(20, 26, 41, 0.22) 0px 10px 30px -18px; } .cvb-ac .ac-compliance-light .ac-controls, .cvb-ac .ac-compliance-light .ac-objections article{ color: var(--muted-foreground); } @media (max-width: 767px){ .cvb-ac .ac-uc{ grid-template-columns: 1fr; } .cvb-ac .ac-uc-list{ border-right: 0px; border-bottom: 1px solid var(--border); scrollbar-width: none; flex-direction: row; overflow-x: auto; } .cvb-ac .ac-uc-item{ white-space: nowrap; flex: 0 0 auto; width: auto; padding: 9px 12px; } .cvb-ac .ac-uc-item.is-on::before{ width: auto; height: 2px; inset: auto 10px 0px; } .cvb-ac .ac-uc-panel{ min-height: 0px; padding: 18px; } .cvb-ac .ac-uc-tag{ margin-left: 0px; } .cvb-ac .ac-uc-bubbles.is-two{ grid-template-columns: 1fr; } } .cvb-ac .ac-mslider-nav, .cvb-ac .ac-mobile-only, .cvb-ac .ac-insight-img{ display: none; } .cvb-ac .ac-insight-row{ display: contents; } @media (max-width: 767px){ .cvb-ac .ac-desktop-only{ display: none !important; } .cvb-ac .ac-mobile-only{ display: block; } .cvb-ac .ac-table-scroll th:first-child, .cvb-ac .ac-table-scroll td:first-child{ position: static; } .cvb-ac .ac-stat-row{ grid-template-columns: 1fr; } .cvb-ac .ac-stat-row > div{ align-items: center; gap: 16px; padding: 16px 18px; display: flex; } .cvb-ac .ac-stat-row strong{ flex-shrink: 0; min-width: 96px; margin: 0px; font-size: 22px; } .cvb-ac .ac-stat-row span{ font-size: 13px; line-height: 1.45; } .cvb-ac .ac-faq button{ padding: 18px 14px; } .cvb-ac .ac-faq > [data-ac-answer]{ padding: 4px 14px 0; } .cvb-ac .ac-mslider-track{ scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; overflow-x: auto; grid-template-columns: none !important; gap: 14px !important; margin-bottom: 0px !important; display: flex !important; } .cvb-ac .ac-mslider-track::-webkit-scrollbar{ display: none; } .cvb-ac .ac-mslider-track > *{ scroll-snap-align: start; flex: 0 0 86%; min-width: 0px; } .cvb-ac .ac-mslider.is-compact .ac-mslider-track > *{ flex-basis: 62%; } .cvb-ac .ac-mslider-nav{ align-items: center; gap: 10px; margin: 14px 0px 28px; display: flex; } .cvb-ac .ac-mslider-nav > button{ border: 1px solid var(--foreground); border-radius: 999px; place-items: center; width: 40px; height: 40px; display: grid; } .cvb-ac .ac-mslider-nav > button{ background: var(--card); } .cvb-ac .ac-mslider-nav > button{ color: var(--foreground); transition: background 0.2s, border-color 0.2s, opacity 0.2s; } .cvb-ac .ac-mslider-nav > button:not(:disabled):active{ background: var(--ac-gradient); border-color: rgba(0, 0, 0, 0); } .cvb-ac .ac-mslider-nav > button:not(:disabled){ border-color: var(--ac-accent); } .cvb-ac .ac-mslider-nav > button:disabled{ opacity: 0.35; } .cvb-ac .ac-mslider-nav svg{ width: 18px; height: 18px; } .cvb-ac .ac-mslider.is-compact .ac-mslider-nav > button{ width: 32px; height: 32px; } .cvb-ac .ac-mslider.is-compact .ac-mslider-nav svg{ width: 15px; height: 15px; } .cvb-ac .ac-mslider-dots{ flex: 1 1 0%; justify-content: center; gap: 6px; display: flex; } .cvb-ac .ac-mslider-dots button{ background: var(--foreground); border-radius: 999px; width: 7px; height: 7px; } .cvb-ac .ac-mslider-dots button{ transition: width 0.25s, background 0.25s; } .cvb-ac .ac-mslider-dots button.is-on{ background: var(--ac-gradient); width: 22px; } .cvb-ac .ac-mslider-count{ color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-size: 12px; } .cvb-ac .ac-mslider:not(.is-compact) .ac-mslider-count{ display: none; } .cvb-ac .ac-timeline{ padding: 20px 0px 6px; } .cvb-ac .ac-row-card{ border: 0; border-top: 3px solid var(--ac-accent); background: var(--card); border-radius: 12px; padding: 18px; } .cvb-ac .ac-row-card h3{ margin: 0px 0px 12px; font-size: 16px; } .cvb-ac .ac-row-card dl{ gap: 10px; margin: 0px; display: grid; } .cvb-ac .ac-row-card dl > div{ border-top: 1px solid var(--border); padding-top: 10px; } .cvb-ac .ac-row-card dl > div.is-ours{ border-left: 2px solid var(--ac-accent); padding-left: 10px; } .cvb-ac .ac-row-card dt{ letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 4px; font-size: 11px; } .cvb-ac .ac-row-card dd{ color: var(--foreground); margin: 0px; font-size: 14px; } .cvb-ac .ac-compliance-light .ac-mslider-nav > button{ background: var(--background); } .cvb-ac .ac-insights a{ flex-direction: column; align-items: stretch; padding: 0px; overflow: hidden; } .cvb-ac .ac-insight-img{ aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block; } .cvb-ac .ac-insight-row{ align-items: center; gap: 12px; padding: 16px; display: flex; } } /* ---- 8. Link-buttons inherit the reference