/* ============================================================================ AIToolsay — Business Services (public) Namespace: .bizp- ---------------------------------------------------------------------------- FIVE RULES THIS FILE FOLLOWS. Breaking any of them is a bug. 1. CONSUME --aits-* TOKENS, DO NOT REDECLARE THEM (design.md §2). The site palette is neutral grey — #111 / #444 / #666 / #ECECEC — not blue-grey — that tint was deliberately removed sitewide. Every surface, ink and line below resolves through --aits-*, so this module inherits light/dark for free and can never drift from the brand. 2. THE LOCAL LAYER EXISTS FOR EXACTLY TWO THINGS. (a) The per-service accent, which an admin overrides inline. (b) Dark twins for the semantic hues. --aits-green-ink and friends have NO dark twin, so `color: var(--aits-green-ink)` on a dark tint is unreadable. §1b declares those twins and remaps them under body.theme-dark. Nothing else may be redeclared here. 3. NOTHING IS EVER HIDDEN WITHOUT JS CONFIRMING IT CAN UNHIDE IT. The reveal animation is opt-IN: `.bizp-in` is fully visible until the kit adds `bizp-js` to , which it does synchronously on parse. A blocked script, a CSP, a JS error — any of them leaves the page readable instead of blank. This is inverted from the usual pattern on purpose. 4. EVERY HOVER IS GATED ON (hover:hover) AND (pointer:fine). On touch, :hover latches after a tap — two "selected" package cards is the classic symptom. `hover:hover` alone still matches some stylus and hybrid devices, hence the pointer check too. 5. Icons are Font Awesome Free 6.5.2 site wide. Use FA6 names directly and do NOT add a local codepoint map — see §0. ========================================================================== */ /* ============================================================================ §0 Icon name shim — RETIRED 2026-08-17 assets/css/fontawesome.min.css is now Font Awesome Free 6.5.2, which serves every FA6 name natively. The 322 codepoint rules that used to live in these files mapped FA6 names onto FA5 glyphs; after the upgrade 62 of them disagreed with FA6 and, because page CSS loads last, they won the cascade and drew the WRONG glyph. Do not add them back. ========================================================================== */ /* ============================================================================ §1 Local tokens — the ONLY two legitimate reasons for a local layer ========================================================================== */ /* --- §1a Per-service accent -------------------------------------------- */ .bizp { /* Defaults are the house blue. A service overrides --bizp-accent / --bizp-accent-2 inline from its branding document; everything below derives from those two so one edit retints the whole page. */ --bizp-accent: var(--aits-blue, #3680ED); --bizp-accent-2: var(--aits-blue-dark, #2060C0); /* The site's own CTA gradient is blue → blue-dark, NOT blue → violet. A service may replace this wholesale; the default must match the rest of the site. */ --bizp-grad: linear-gradient(135deg, var(--bizp-accent) 0%, var(--bizp-accent-2) 100%); /* Small white text on #3680ED is only 3.4:1. Anything that puts a SMALL white glyph on a solid accent fill (step numbers, badge dots, counters) uses the deep twin instead, which measures 5.9:1. Large gradient buttons keep the base accent so the module matches the site. */ --bizp-accent-solid: var(--aits-blue-dark, #2060C0); /* Geometry + motion come straight from the house scale. */ --bizp-r-sm: var(--r-sm, 8px); --bizp-r: var(--r-md, 10px); --bizp-r-md: var(--r-lg, 14px); --bizp-r-lg: var(--r-xl, 18px); --bizp-r-xl: var(--r-2xl, 24px); --bizp-t: var(--t, .18s); --bizp-ease: cubic-bezier(.22, .9, .32, 1); --bizp-max: 1240px; --bizp-gap: 24px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--aits-txt); font-size: 15.5px; line-height: 1.62; -webkit-font-smoothing: antialiased; } /* --- §1b Dark twins for the semantic hues ------------------------------ --aits-green-ink / -soft and their siblings have no dark variant in custom.ltr.css. Used unqualified, they render dark-on-dark. These are the only colour values this file declares, and each has a dark remap below. */ .bizp { --bizp-accent-ink: var(--aits-blue-dark, #2060C0); --bizp-green: #0CA678; --bizp-green-soft: #E6FCF3; --bizp-green-ink: #087F5B; --bizp-amber: #D97706; --bizp-amber-soft: #FFF5E1; --bizp-amber-ink: #B45309; --bizp-red: #E03131; --bizp-red-soft: #FFECEC; --bizp-red-ink: #B71C1C; --bizp-violet: #0196FD; --bizp-violet-soft: #E1F3FF; --bizp-violet-ink: #0A53BE; --bizp-cyan: #0BA5C7; --bizp-cyan-soft: #E4F8FC; --bizp-cyan-ink: #05687E; --bizp-rose: #E8497E; --bizp-rose-soft: #FDEBF1; --bizp-rose-ink: #B32458; --bizp-teal: #0D9488; --bizp-teal-soft: #E3F8F5; --bizp-teal-ink: #0B6E66; --bizp-indigo: #4F46E5; --bizp-indigo-soft: #EBEAFE; --bizp-indigo-ink: #372FB0; --bizp-slate: #64748B; --bizp-slate-soft: var(--aits-surface-3); --bizp-slate-ink: var(--aits-mut); } body.theme-dark .bizp { /* Each hue keeps its identity; only the TINT darkens and the -ink lifts. Greying one out here is what makes "included" and "not included" look identical in a feature list. */ --bizp-accent-ink: #8DBEFF; --bizp-green-soft: rgba(12,166,120,.16); --bizp-green-ink: #6BE3B8; --bizp-amber-soft: rgba(217,119,6,.16); --bizp-amber-ink: #F0B44E; --bizp-red-soft: rgba(224,49,49,.16); --bizp-red-ink: #FF8A8A; --bizp-violet-soft: rgba(112,72,232,.18); --bizp-violet-ink: #B79DFF; --bizp-cyan-soft: rgba(11,165,199,.16); --bizp-cyan-ink: #5FD8F0; --bizp-rose-soft: rgba(232,73,126,.16); --bizp-rose-ink: #FF9CBE; --bizp-teal-soft: rgba(13,148,136,.16); --bizp-teal-ink: #5FD9CB; --bizp-indigo-soft: rgba(79,70,229,.18); --bizp-indigo-ink: #A9A3FF; } /* ============================================================================ §2 Full-bleed escape from the Bootstrap layout ---------------------------------------------------------------------------- layouts.public wraps every public route in `.container py-4` with a 9/12 + 3/12 grid and appends a `#content-box` that renders the *home page's* article body — because a business page passes the home Page model for the layout's chrome. All three have to go. `:has()` is unsupported in Safari <15.4 / Firefox <121, so the kit also stamps `bizp-page` on and every rule is written twice. ========================================================================== */ body:has(.bizp) #content-box, body.bizp-page #content-box, body:has(.bizp) .sidebars, body.bizp-page .sidebars, body:has(.bizp) .page-wrapper .breadcrumb, body.bizp-page .page-wrapper .breadcrumb, body:has(.bizp) .page-wrapper > .page-content > #parallax, body.bizp-page .page-wrapper > .page-content > #parallax { display: none !important; } body:has(.bizp) .page-wrapper > .page-content > .container, body.bizp-page .page-wrapper > .page-content > .container { max-width: 100% !important; padding: 0 !important; } body:has(.bizp) .page-wrapper > .page-content > .container > .row, body.bizp-page .page-wrapper > .page-content > .container > .row { margin: 0 !important; } body:has(.bizp) .page-wrapper > .page-content > .container > .row > div, body.bizp-page .page-wrapper > .page-content > .container > .row > div { flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; } body:has(.bizp) .page-home, body.bizp-page .page-home { margin: 0 !important; padding: 0 !important; } /* Every wrapper takes the page surface so the canvas reads as one continuous sheet from the navbar edge to the footer edge, in both themes. */ body:has(.bizp) .page-wrapper, body:has(.bizp) .page-wrapper > .page-content, body:has(.bizp) .page-wrapper > .page-content > .container, body:has(.bizp) .page-wrapper > .page-content > .container > .row, body:has(.bizp) .page-wrapper > .page-content > .container > .row > div, body.bizp-page .page-wrapper, body.bizp-page .page-wrapper > .page-content, body.bizp-page .page-wrapper > .page-content > .container, body.bizp-page .page-wrapper > .page-content > .container > .row, body.bizp-page .page-wrapper > .page-content > .container > .row > div { background: var(--dk-bg, #FFFFFF) !important; } /* ============================================================================ §3 Shell + section scaffolding ========================================================================== */ .bizp { position: relative; background: var(--aits-bg); overflow-x: clip; /* a decorative blob must never widen the page */ } .bizp *, .bizp *::before, .bizp *::after { box-sizing: border-box; } .bizp a { text-decoration: none; color: inherit; } /* Ungated on purpose: removing an underline leaves no visual state that could latch after a tap. */ .bizp a:hover { text-decoration: none; } .bizp img { max-width: 100%; height: auto; display: block; } /* The mesh backdrop. pointer-events off so it can never eat a click. */ .bizp.is-mesh::before { content: ""; position: absolute; inset: 0 0 auto 0; height: min(920px, 88vh); pointer-events: none; z-index: 0; background: radial-gradient(720px 400px at 12% -6%, rgba(54,128,237,.11), transparent 62%), radial-gradient(640px 380px at 88% 2%, rgba(112,72,232,.09), transparent 60%); } body.theme-dark .bizp.is-mesh::before { background: radial-gradient(720px 400px at 12% -6%, rgba(54,128,237,.18), transparent 62%), radial-gradient(640px 380px at 88% 2%, rgba(112,72,232,.15), transparent 60%); } .bizp-wrap { position: relative; z-index: 1; width: 100%; max-width: var(--seo-shell-max, 1600px); margin-inline: auto; padding-block: 0; padding-left: max(var(--seo-shell-pad, 24px), env(safe-area-inset-left)); padding-right: max(var(--seo-shell-pad, 24px), env(safe-area-inset-right)); } .bizp-sec { position: relative; z-index: 1; padding: 76px 0; } .bizp-sec.is-tight { padding: 48px 0; } .bizp-sec.is-first { padding-top: 40px; } .bizp-sec[data-bg="soft"] { background: var(--aits-surface-2); } .bizp-sec[data-bg="gradient"] { background: var(--aits-blue-tint-2); } .bizp-sec[data-bg="mesh"] { background: radial-gradient(600px 300px at 20% 0%, rgba(54,128,237,.07), transparent 62%), radial-gradient(540px 280px at 82% 8%, rgba(112,72,232,.06), transparent 60%); } /* A dark band inside a light page. Rather than hand-picking colours, it re-points the --aits-* surface/ink tokens for its subtree, so every child component keeps working without a single override. */ .bizp-sec[data-bg="dark"] { background: #111114; --aits-ink: #FFFFFF; --aits-ink-soft: #E8E8EA; --aits-txt: #C4C4CA; --aits-mut: #9B9BA3; --aits-faint: #7C7C85; --aits-card: rgba(255,255,255,.05); --aits-surface-2: rgba(255,255,255,.04); --aits-surface-3: rgba(255,255,255,.07); --aits-line: rgba(255,255,255,.11); --aits-line-soft: rgba(255,255,255,.07); --aits-line-strong: rgba(255,255,255,.18); --bizp-accent-ink: #8DBEFF; } /* --- Section head -------------------------------------------------------- */ .bizp-head { max-width: 720px; margin: 0 auto 42px; text-align: center; } .bizp-head.is-left { margin-left: 0; text-align: left; } .bizp-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 5px 13px; border-radius: var(--r-pill, 999px); background: var(--aits-blue-tint); color: var(--bizp-accent-ink); border: 1px solid var(--aits-blue-line); font-size: 12px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; } .bizp-h1 { margin: 0 0 16px; font-size: clamp(31px, 5vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; color: var(--aits-ink); } .bizp-h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.028em; line-height: 1.16; color: var(--aits-ink); } .bizp-h3 { margin: 0 0 8px; font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; letter-spacing: -.02em; color: var(--aits-ink); } .bizp-lede { margin: 0; font-size: 16px; line-height: 1.66; color: var(--aits-mut); } /* The gradient-clipped phrase in a headline. Without the @supports fallback an unsupported engine renders transparent text on a transparent background — i.e. an invisible headline. */ .bizp-h1 .accent, .bizp-h2 .accent { background: var(--bizp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .bizp-h1 .accent, .bizp-h2 .accent { color: var(--bizp-accent-ink); -webkit-text-fill-color: currentColor; background: none; } } /* --- Grids --------------------------------------------------------------- */ .bizp-grid { display: grid; gap: var(--bizp-gap); } .bizp-grid.is-g2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .bizp-grid.is-g3 { grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr)); } .bizp-grid.is-g4 { grid-template-columns: repeat(auto-fit, minmax(min(225px, 100%), 1fr)); } .bizp-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 14px; } .bizp-grid.is-stack { grid-template-columns: minmax(0, 1fr); gap: 18px; } .bizp-grid.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (max-width: 900px) { .bizp-grid.is-split { grid-template-columns: minmax(0, 1fr); } } /* A carousel that degrades to a scroller rather than a broken grid. */ .bizp-grid.is-carousel { grid-auto-flow: column; grid-auto-columns: minmax(min(300px, 82%), 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; } .bizp-grid.is-carousel > * { scroll-snap-align: start; } /* ============================================================================ §4 Buttons — matched to the site's .aits-btn spec ========================================================================== */ .bizp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--bizp-r); font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; text-decoration: none !important; text-shadow: none !important; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color var(--bizp-t) ease, border-color var(--bizp-t) ease, color var(--bizp-t) ease, transform .12s ease, box-shadow var(--bizp-t) ease; } .bizp-btn i { font-size: .95em; line-height: 1; } /* Solid primary — the site default. */ .bizp-btn.is-primary { background: var(--bizp-accent); color: #fff !important; box-shadow: var(--sh-brand, 0 6px 18px rgba(54,128,237,.28)); } /* Gradient — reserved for the one hero CTA per page. */ .bizp-btn.is-gradient { background: var(--bizp-grad); color: #fff !important; box-shadow: var(--sh-brand, 0 6px 18px rgba(54,128,237,.28)); } .bizp-btn.is-secondary { background: var(--aits-card); color: var(--bizp-accent-ink) !important; border-color: var(--aits-line-strong); box-shadow: var(--sh-xs, 0 1px 2px rgba(15,23,42,.04)); } .bizp-btn.is-ghost { background: transparent; color: var(--bizp-accent-ink) !important; border-color: var(--aits-blue-line); } .bizp-btn.is-quiet { background: transparent; color: var(--aits-mut) !important; padding: 10px 14px; } .bizp-btn.is-lg { padding: 15px 30px; font-size: 15.5px; border-radius: var(--bizp-r-md); } .bizp-btn.is-sm { padding: 8px 15px; font-size: 13px; border-radius: var(--bizp-r-sm); } .bizp-btn.is-block { width: 100%; } .bizp-btn:disabled, .bizp-btn[aria-disabled="true"], .bizp-btn.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; } /* Focus is a ring, never an outline removal — keyboard users must be able to see where they are. :focus-visible keeps it off mouse clicks. */ .bizp-btn:focus-visible, .bizp .bizp-input:focus-visible, .bizp-opt:focus-within, .bizp-faq-q:focus-visible, .bizp-rail-item:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)); } @media (hover: hover) and (pointer: fine) { .bizp-btn.is-primary:hover { background: var(--bizp-accent-2); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(54,128,237,.32); } .bizp-btn.is-gradient:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(54,128,237,.36); filter: saturate(1.06); } .bizp-btn.is-secondary:hover { border-color: var(--bizp-accent); background: var(--aits-blue-tint); transform: translateY(-2px); } .bizp-btn.is-ghost:hover { background: var(--aits-blue-tint); } .bizp-btn.is-quiet:hover { color: var(--aits-ink) !important; background: var(--aits-surface-3); } .bizp-btn:disabled:hover, .bizp-btn.is-disabled:hover { transform: none; box-shadow: none; } } .bizp-btn:active { transform: translateY(0) scale(.99); } /* ============================================================================ §5 Cards, chips, icon tiles ========================================================================== */ .bizp-card { position: relative; padding: 24px; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-lg); box-shadow: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06)); transition: transform var(--bizp-t) var(--bizp-ease), box-shadow var(--bizp-t) var(--bizp-ease), border-color var(--bizp-t) var(--bizp-ease); } /* Frosted glass. Only applied where the browser actually supports it — without backdrop-filter the rgba background just looks washed out. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bizp.is-glass .bizp-card, .bizp.is-glass .bizp-block, .bizp.is-glass .bizp-plan { background: color-mix(in srgb, var(--aits-card) 78%, transparent); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); } } @supports not (background: color-mix(in srgb, red 50%, blue)) { .bizp.is-glass .bizp-card, .bizp.is-glass .bizp-block, .bizp.is-glass .bizp-plan { background: var(--aits-card); } } .bizp-ic { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--bizp-r-md); background: var(--aits-blue-tint); color: var(--bizp-accent-ink); font-size: 18px; line-height: 1; } .bizp-ic.is-sm { width: 34px; height: 34px; border-radius: var(--bizp-r-sm); font-size: 14px; } .bizp-ic.is-lg { width: 56px; height: 56px; border-radius: var(--bizp-r-lg); font-size: 22px; } .bizp-ic[data-tone="green"] { background: var(--bizp-green-soft); color: var(--bizp-green-ink); } .bizp-ic[data-tone="amber"] { background: var(--bizp-amber-soft); color: var(--bizp-amber-ink); } .bizp-ic[data-tone="red"] { background: var(--bizp-red-soft); color: var(--bizp-red-ink); } .bizp-ic[data-tone="violet"] { background: var(--bizp-violet-soft); color: var(--bizp-violet-ink); } .bizp-ic[data-tone="cyan"] { background: var(--bizp-cyan-soft); color: var(--bizp-cyan-ink); } .bizp-ic[data-tone="rose"] { background: var(--bizp-rose-soft); color: var(--bizp-rose-ink); } .bizp-ic[data-tone="teal"] { background: var(--bizp-teal-soft); color: var(--bizp-teal-ink); } .bizp-ic[data-tone="indigo"] { background: var(--bizp-indigo-soft); color: var(--bizp-indigo-ink); } .bizp-ic[data-tone="blue"] { background: var(--aits-blue-tint); color: var(--bizp-accent-ink); } .bizp-ic[data-tone="slate"] { background: var(--aits-surface-3); color: var(--aits-mut); } .bizp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill, 999px); background: var(--aits-surface-3); color: var(--aits-mut); font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.6; } .bizp-chip[data-tone="green"] { background: var(--bizp-green-soft); color: var(--bizp-green-ink); } .bizp-chip[data-tone="amber"] { background: var(--bizp-amber-soft); color: var(--bizp-amber-ink); } .bizp-chip[data-tone="red"] { background: var(--bizp-red-soft); color: var(--bizp-red-ink); } .bizp-chip[data-tone="violet"] { background: var(--bizp-violet-soft); color: var(--bizp-violet-ink); } .bizp-chip[data-tone="cyan"] { background: var(--bizp-cyan-soft); color: var(--bizp-cyan-ink); } .bizp-chip[data-tone="rose"] { background: var(--bizp-rose-soft); color: var(--bizp-rose-ink); } .bizp-chip[data-tone="teal"] { background: var(--bizp-teal-soft); color: var(--bizp-teal-ink); } .bizp-chip[data-tone="indigo"] { background: var(--bizp-indigo-soft); color: var(--bizp-indigo-ink); } .bizp-chip[data-tone="blue"] { background: var(--aits-blue-tint); color: var(--bizp-accent-ink); } .bizp-chip.is-brand { background: var(--aits-blue-tint); color: var(--bizp-accent-ink); } /* ============================================================================ §6 Hero ========================================================================== */ .bizp-hero { padding: 60px 0 68px; position: relative; z-index: 1; } .bizp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; align-items: center; } .bizp-hero.is-centered .bizp-hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 800px; margin-inline: auto; text-align: center; } .bizp-hero.is-centered .bizp-hero-cta { justify-content: center; } .bizp-hero.is-centered .bizp-hero-bullets { align-items: center; } .bizp-hero.is-centered .bizp-rating { justify-content: center; } @media (max-width: 980px) { .bizp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } } .bizp-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 15px 6px 7px; border-radius: var(--r-pill, 999px); background: var(--aits-card); border: 1px solid var(--aits-blue-line); box-shadow: var(--sh-xs, 0 1px 2px rgba(15,23,42,.04)); font-size: 13px; font-weight: 600; color: var(--aits-ink-soft); } .bizp-badge i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill, 999px); /* Deep twin: a small white glyph on the base blue fails contrast. */ background: var(--bizp-accent-solid); color: #fff; font-size: 11px; } .bizp-hero-sub { margin: 0 0 28px; font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.65; color: var(--aits-mut); max-width: 58ch; } .bizp-hero.is-centered .bizp-hero-sub { margin-inline: auto; } .bizp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .bizp-hero-bullets { display: flex; flex-direction: column; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; } .bizp-hero-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--aits-txt); } .bizp-hero-bullets i { flex: none; margin-top: 3px; color: var(--bizp-green); font-size: 13px; } .bizp-rating { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--aits-mut); } .bizp-rating .stars { color: var(--aits-gold, #D97706); letter-spacing: 1px; font-size: 13px; } .bizp-rating b { color: var(--aits-ink); font-weight: 700; } /* --- Hero visual --------------------------------------------------------- */ .bizp-hero-art { position: relative; border-radius: var(--bizp-r-xl); } .bizp-hero-art img { display: block; width: 100%; height: auto; border-radius: var(--bizp-r-xl); box-shadow: var(--sh-pop, 0 16px 48px rgba(15,23,42,.16)); } /* The generated scene, for a service with no hero image. Pure CSS so it costs no request and cannot 404. */ .bizp-scene { position: relative; padding: 26px; border-radius: var(--bizp-r-xl); background: var(--aits-card); border: 1px solid var(--aits-line); box-shadow: var(--sh-pop, 0 16px 48px rgba(15,23,42,.16)); overflow: hidden; } .bizp-scene::before { content: ""; position: absolute; inset: 0; background: var(--bizp-grad); opacity: .045; pointer-events: none; } .bizp-scene-row { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .bizp-scene-row:last-child { margin-bottom: 0; } .bizp-scene-bar { height: 10px; border-radius: var(--r-pill, 999px); background: var(--aits-surface-3); flex: 1; } .bizp-scene-bar.is-fill { background: var(--bizp-grad); } .bizp-scene-bar.w60 { max-width: 60%; } .bizp-scene-bar.w40 { max-width: 40%; } .bizp-scene-tile { position: relative; padding: 16px; border-radius: var(--bizp-r-md); background: var(--aits-surface-2); border: 1px solid var(--aits-line-soft); } .bizp-scene-num { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--aits-ink); font-variant-numeric: tabular-nums; } .bizp-scene-lab { font-size: 12px; font-weight: 600; color: var(--aits-mut); } /* ============================================================================ §7 Statistics ========================================================================== */ .bizp-stat { padding: 26px 20px; text-align: center; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-lg); box-shadow: var(--sh-xs, 0 1px 2px rgba(15,23,42,.04)); transition: transform var(--bizp-t) var(--bizp-ease), box-shadow var(--bizp-t) var(--bizp-ease), border-color var(--bizp-t) var(--bizp-ease); } .bizp-stat .bizp-ic { margin: 0 auto 13px; } .bizp-stat .v { display: block; font-size: clamp(27px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--aits-ink); font-variant-numeric: tabular-nums; } .bizp-stat .t { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 600; color: var(--aits-mut); } .bizp-stat .d { display: block; margin-top: 6px; font-size: 12.5px; color: var(--aits-mut); line-height: 1.5; } @media (hover: hover) and (pointer: fine) { .bizp-stat:hover { transform: translateY(-3px); box-shadow: var(--sh-md, 0 8px 20px rgba(15,23,42,.07)); border-color: var(--aits-blue-line); } } /* ============================================================================ §8 Feature / block cards ========================================================================== */ .bizp-block { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-lg); box-shadow: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06)); height: 100%; transition: transform var(--bizp-t) var(--bizp-ease), box-shadow var(--bizp-t) var(--bizp-ease), border-color var(--bizp-t) var(--bizp-ease); } .bizp-block .b-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .bizp-block .b-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--aits-ink); line-height: 1.35; } .bizp-block .b-sub { margin: 5px 0 0; font-size: 13px; font-weight: 600; color: var(--bizp-accent-ink); } .bizp-block .b-text { margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--aits-txt); } .bizp-block .b-num { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--aits-ink); font-variant-numeric: tabular-nums; } .bizp-block .b-foot { margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .bizp-block .b-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--bizp-accent-ink); } .bizp-block .b-link i { transition: transform var(--bizp-t) ease; } .bizp-block ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .bizp-block ul li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--aits-txt); line-height: 1.55; } .bizp-block ul li i { flex: none; margin-top: 4px; font-size: 11px; color: var(--bizp-green); } @media (hover: hover) and (pointer: fine) { .bizp-block:hover { transform: translateY(-4px); box-shadow: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12)); border-color: var(--aits-blue-line); } .bizp-block:hover .b-link i { transform: translateX(3px); } } /* --- List variant (guidelines, comparison rows) -------------------------- */ .bizp-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-md); box-shadow: var(--sh-xs, 0 1px 2px rgba(15,23,42,.04)); transition: border-color var(--bizp-t) ease, box-shadow var(--bizp-t) ease, transform var(--bizp-t) ease; } .bizp-row .r-body { min-width: 0; flex: 1; } .bizp-row .r-title { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; color: var(--aits-ink); } .bizp-row .r-text { margin: 0; font-size: 14px; line-height: 1.62; color: var(--aits-txt); } @media (hover: hover) and (pointer: fine) { .bizp-row:hover { border-color: var(--aits-blue-line); box-shadow: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06)); transform: translateX(2px); } } /* --- Process (numbered steps) -------------------------------------------- */ .bizp-step-card { position: relative; padding: 28px 22px 24px; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-lg); box-shadow: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06)); height: 100%; } .bizp-step-card .n { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 15px; border-radius: var(--bizp-r-sm); background: var(--bizp-grad); color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ============================================================================ §9 Packages ========================================================================== */ .bizp-plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px; background: var(--aits-card); border: 1.5px solid var(--aits-line); border-radius: var(--bizp-r-xl); box-shadow: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06)); height: 100%; transition: transform var(--bizp-t) var(--bizp-ease), box-shadow var(--bizp-t) var(--bizp-ease), border-color var(--bizp-t) var(--bizp-ease); } /* The popular card is raised on desktop only. On a phone the cards stack, and a permanently-translated card just looks misaligned. */ .bizp-plan.is-popular { border-color: var(--bizp-accent); box-shadow: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12)); } @media (min-width: 981px) { .bizp-plan.is-popular { transform: translateY(-10px); } } .bizp-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 15px; border-radius: var(--r-pill, 999px); background: var(--bizp-grad); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--sh-brand, 0 6px 18px rgba(54,128,237,.28)); white-space: nowrap; } .bizp-plan .p-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .bizp-plan .p-name { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--aits-ink); } .bizp-plan .p-tag { margin: 4px 0 0; font-size: 13px; color: var(--aits-mut); line-height: 1.45; } .bizp-plan .p-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 18px 0 4px; } .bizp-plan .p-amount { font-size: clamp(30px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--aits-ink); font-variant-numeric: tabular-nums; } .bizp-plan .p-unit { font-size: 14px; font-weight: 600; color: var(--aits-mut); } .bizp-plan .p-was { font-size: 15px; font-weight: 600; color: var(--aits-mut); text-decoration: line-through; } .bizp-plan .p-save { padding: 2px 8px; border-radius: var(--r-pill, 999px); background: var(--bizp-green-soft); color: var(--bizp-green-ink); font-size: 11.5px; font-weight: 700; } .bizp-plan .p-note { margin: 0 0 18px; min-height: 1em; font-size: 12.5px; color: var(--aits-mut); } .bizp-plan .p-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--aits-line-soft); } .bizp-plan .p-features { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; } .bizp-plan .p-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--aits-txt); } .bizp-plan .p-features li i { flex: none; margin-top: 3px; font-size: 12px; } .bizp-plan .p-features li.is-in i { color: var(--bizp-green); } /* An excluded row dims its TEXT and keeps it legible. A struck-through, near-invisible row is the "text is hidden" bug report — the whole point of showing it is that the buyer can read what the cheaper tier does not get. */ .bizp-plan .p-features li.is-out { color: var(--aits-mut); } .bizp-plan .p-features li.is-out i { color: var(--aits-faint); } .bizp-plan .p-features li.is-hi { color: var(--aits-ink); font-weight: 600; } @media (hover: hover) and (pointer: fine) { .bizp-plan:hover { box-shadow: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12)); border-color: var(--aits-blue-line); } .bizp-plan:not(.is-popular):hover { transform: translateY(-5px); } .bizp-plan.is-popular:hover { transform: translateY(-14px); box-shadow: var(--sh-pop, 0 16px 48px rgba(15,23,42,.16)); } } /* Ungated on purpose: this is the mobile RESET that cancels the desktop hover lift. Wrapping it in (hover:hover) would stop it from ever running on the touch devices it exists for. */ @media (max-width: 980px) { .bizp-plan.is-popular:hover { transform: none; } } /* Selected, when packages double as a picker for the form below. */ .bizp-plan.is-selected { border-color: var(--bizp-accent); box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)), var(--sh-lg, 0 12px 32px rgba(15,23,42,.12)); } .bizp-plan .p-tick { position: absolute; top: 16px; right: 16px; display: none; color: var(--bizp-accent); font-size: 18px; } .bizp-plan.is-selected .p-tick { display: block; } /* A service that sells ONE package still renders into the auto-fit grid, and a lone item stretches across every empty track — a 1,180px-wide pricing card reads as a banner rather than a price. `:only-child` needs no `:has()`, so this holds on the same engines as the rest of the file. */ .bizp-grid > .bizp-plan:only-child { max-width: 480px; margin-inline: auto; } /* ============================================================================ §10 Budget calculator ========================================================================== */ .bizp-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-xl); box-shadow: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12)); overflow: hidden; } @media (max-width: 880px) { .bizp-calc { grid-template-columns: minmax(0, 1fr); } } .bizp-calc-body { padding: 32px; } .bizp-calc-side { padding: 32px; background: var(--bizp-grad); color: #fff; display: flex; flex-direction: column; justify-content: center; } .bizp-calc-side .c-label { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .9; } .bizp-calc-side .c-total { margin: 8px 0 6px; font-size: clamp(34px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; } .bizp-calc-side .c-note { font-size: 13.5px; opacity: .92; line-height: 1.55; } .bizp-calc-side .bizp-btn { margin-top: 22px; background: #fff; color: var(--bizp-accent-2) !important; border-color: transparent; box-shadow: 0 8px 20px rgba(0,0,0,.16); } @media (hover: hover) and (pointer: fine) { .bizp-calc-side .bizp-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.22); } } .bizp-calc-rows { display: flex; flex-direction: column; gap: 20px; } .bizp-calc-row .c-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .bizp-calc-row .c-name { font-size: 14.5px; font-weight: 600; color: var(--aits-ink); } .bizp-calc-row .c-val { font-size: 14.5px; font-weight: 700; color: var(--bizp-accent-ink); font-variant-numeric: tabular-nums; } /* A range input styled in both engines. Left unstyled, the thumb is a platform default that looks broken next to everything else here. */ .bizp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill, 999px); background: var(--aits-surface-3); outline: none; cursor: pointer; } .bizp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: var(--r-pill, 999px); background: #fff; border: 3px solid var(--bizp-accent); box-shadow: var(--sh-sm, 0 1px 3px rgba(15,23,42,.05)); cursor: pointer; transition: transform .12s ease; } .bizp-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: var(--r-pill, 999px); background: #fff; border: 3px solid var(--bizp-accent); box-shadow: var(--sh-sm, 0 1px 3px rgba(15,23,42,.05)); cursor: pointer; } .bizp-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)); } .bizp-range:focus-visible::-moz-range-thumb { box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)); } @media (hover: hover) and (pointer: fine) { .bizp-range:hover::-webkit-slider-thumb { transform: scale(1.12); } } /* --- Slider controls ------------------------------------------------------ A 1,000–100,000 range in steps of 500 is 199 notches. Dragging to an exact value is not realistic, so the slider ships with a stepper on each side and a row of quick picks; the range input alone is the fallback, not the whole control. */ .bizp-range-line { display: flex; align-items: center; gap: 12px; } .bizp-range-line .bizp-range { flex: 1 1 auto; min-width: 0; } .bizp-stepbtn { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill, 999px); background-color: var(--aits-card); border: 1.5px solid var(--aits-line-strong); color: var(--aits-ink); font-size: 12px; cursor: pointer; transition: background-color var(--bizp-t) ease, color var(--bizp-t) ease, border-color var(--bizp-t) ease; } .bizp-stepbtn:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)); } @media (hover: hover) and (pointer: fine) { .bizp-stepbtn:hover { background-color: var(--aits-blue-tint); border-color: var(--bizp-accent); color: var(--bizp-accent-ink); } } /* The scale under the track. The side padding clears the two stepper buttons so "1,000" sits under the left end of the TRACK, not under the minus key. */ .bizp-range-scale { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 7px; padding: 0 48px; font-size: 11.5px; color: var(--aits-faint); font-variant-numeric: tabular-nums; } .bizp-range-scale .s-step { flex: 1 1 auto; text-align: center; font-variant-numeric: normal; letter-spacing: .02em; } @media (max-width: 560px) { .bizp-range-scale { padding: 0; } .bizp-range-scale .s-step { display: none; } } /* Quick picks. `.is-on` is set by the kit as the slider moves, so the chip and the thumb never disagree. */ .bizp-calc-picks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; } .bizp-pick { padding: 5px 12px; border-radius: var(--r-pill, 999px); background-color: var(--aits-surface-2); border: 1px solid var(--aits-line); color: var(--aits-mut); font-family: inherit; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--bizp-t) ease, color var(--bizp-t) ease, border-color var(--bizp-t) ease; } .bizp-pick.is-on { background-color: var(--aits-blue-tint); border-color: var(--bizp-accent); color: var(--bizp-accent-ink); } .bizp-pick:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)); } @media (hover: hover) and (pointer: fine) { .bizp-pick:hover { border-color: var(--bizp-accent); color: var(--bizp-accent-ink); } } /* The arithmetic, spelled out. A quoted total nobody can reproduce reads as a guess; showing "10,000 × $0.10 = $1,000" makes it checkable. */ .bizp-calc-sum { margin: 8px 0 0; font-size: 13px; color: var(--aits-mut); line-height: 1.6; font-variant-numeric: tabular-nums; } .bizp-calc-sum b { color: var(--aits-ink); font-weight: 700; } /* ============================================================================ §10b Rate card ---------------------------------------------------------------------------- A two-column price list IS a table: marked up as anything else it loses the row/column semantics a screen reader needs to read "1,000 – 100,000 clicks, CPC, $0.10" as one fact. It lives inside a `richtext` section body, so these rules are scoped to the class rather than to the section. ========================================================================== */ .bizp-rate-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .bizp-rate { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .bizp-rate-cap { caption-side: top; padding: 0 0 14px; text-align: left; font-size: 13px; color: var(--aits-mut); } .bizp-rate th, .bizp-rate td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--aits-line); } .bizp-rate thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aits-faint); border-bottom-width: 1.5px; } .bizp-rate tbody th { font-size: 15px; font-weight: 700; color: var(--aits-ink); white-space: nowrap; } .bizp-rate tbody td { font-size: 15px; color: var(--aits-txt); } .bizp-rate tbody td b { font-size: 19px; color: var(--bizp-accent-ink); } /* custom.ltr.css carries body:not(.admin-shell):not(.theme-dark) strong, body:not(.admin-shell):not(.theme-dark) b { color: var(--ez-ink) } at (0,3,1) — it outranks any plain descendant selector in this file and repaints the headline CPC near-black BY DAY ONLY, so the bug is invisible in the dark theme this site defaults to. Same shape gets it back; the rule above still governs dark, where the site rule does not apply. Sibling of the documented `h2` override in the same stylesheet. */ body:not(.admin-shell):not(.theme-dark) .bizp-rate tbody td b { color: var(--bizp-accent-ink); } .bizp-rate tbody tr:last-child th, .bizp-rate tbody tr:last-child td { border-bottom: 0; } .bizp-rate-note { margin: 16px 0 0; font-size: 13.5px; color: var(--aits-mut); line-height: 1.65; } .bizp-rate-note a { color: var(--bizp-accent-ink); font-weight: 600; } /* ============================================================================ §11 Testimonials ========================================================================== */ .bizp-quote { display: flex; flex-direction: column; gap: 16px; padding: 30px 26px; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-lg); box-shadow: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06)); height: 100%; transition: transform var(--bizp-t) var(--bizp-ease), box-shadow var(--bizp-t) var(--bizp-ease); } .bizp-quote .q-mark { font-size: 22px; color: var(--aits-blue-line); line-height: 1; } .bizp-quote .q-text { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--aits-ink-soft); } .bizp-quote .q-result { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill, 999px); background: var(--bizp-green-soft); color: var(--bizp-green-ink); font-size: 12.5px; font-weight: 700; } .bizp-quote .q-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; } .bizp-quote .q-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--r-pill, 999px); background: var(--bizp-grad); color: #fff; font-size: 14px; font-weight: 700; overflow: hidden; } .bizp-quote .q-avatar img { width: 100%; height: 100%; object-fit: cover; } .bizp-quote .q-name { font-size: 14.5px; font-weight: 700; color: var(--aits-ink); } .bizp-quote .q-role { font-size: 12.5px; color: var(--aits-mut); } .bizp-quote .q-stars { color: var(--aits-gold, #D97706); font-size: 12px; letter-spacing: 1px; } @media (hover: hover) and (pointer: fine) { .bizp-quote:hover { transform: translateY(-3px); box-shadow: var(--sh-md, 0 8px 20px rgba(15,23,42,.07)); } } /* ============================================================================ §12 FAQ ========================================================================== */ .bizp-faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin-inline: auto; } .bizp-faq-item { background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-md); overflow: hidden; transition: border-color var(--bizp-t) ease, box-shadow var(--bizp-t) ease; } .bizp-faq-item.is-open { border-color: var(--aits-blue-line); box-shadow: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06)); } .bizp-faq-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 19px 20px; background: none; border: 0; text-align: left; font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--aits-ink); cursor: pointer; line-height: 1.45; } .bizp-faq-q .q-ic { flex: none; color: var(--bizp-accent-ink); font-size: 15px; } .bizp-faq-q .q-caret { flex: none; margin-left: auto; color: var(--aits-mut); font-size: 13px; transition: transform var(--bizp-t) ease; } .bizp-faq-item.is-open .q-caret { transform: rotate(180deg); color: var(--bizp-accent-ink); } /* grid-template-rows animates; height:auto does not. The inner wrapper needs min-height:0 or the collapsed state still reserves the content's height. */ .bizp-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--bizp-t) var(--bizp-ease); } .bizp-faq-item.is-open .bizp-faq-a { grid-template-rows: 1fr; } .bizp-faq-a > div { overflow: hidden; min-height: 0; } .bizp-faq-a .a-body { padding: 0 20px 21px 54px; font-size: 14.5px; line-height: 1.72; color: var(--aits-txt); } .bizp-faq-a .a-body p:last-child { margin-bottom: 0; } .bizp-faq-a .a-body a { color: var(--bizp-accent-ink); text-decoration: underline; } @media (max-width: 560px) { .bizp-faq-a .a-body { padding-left: 20px; } } @media (hover: hover) and (pointer: fine) { .bizp-faq-item:hover { border-color: var(--aits-blue-line); } } /* ============================================================================ §13 Request form ========================================================================== */ .bizp-form-shell { max-width: 900px; margin-inline: auto; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--bizp-r-xl); box-shadow: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12)); overflow: hidden; } /* --- Step rail ----------------------------------------------------------- */ .bizp-rail { display: flex; gap: 4px; padding: 18px 22px; background: var(--aits-surface-2); border-bottom: 1px solid var(--aits-line); overflow-x: auto; scrollbar-width: none; } .bizp-rail::-webkit-scrollbar { display: none; } .bizp-rail-item { display: flex; align-items: center; gap: 9px; flex: none; padding: 8px 14px; border-radius: var(--bizp-r-sm); background: transparent; border: 0; font-family: inherit; color: var(--aits-mut); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--bizp-t) ease, color var(--bizp-t) ease; } .bizp-rail-item .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill, 999px); background: var(--aits-surface-3); color: var(--aits-mut); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color var(--bizp-t) ease, color var(--bizp-t) ease; } .bizp-rail-item.is-active { background: var(--aits-blue-tint); color: var(--bizp-accent-ink); } /* Deep twin: a 12px white numeral on the base blue is 3.4:1. */ .bizp-rail-item.is-active .n { background: var(--bizp-accent-solid); color: #fff; } .bizp-rail-item.is-done .n { background: var(--bizp-green); color: #fff; } .bizp-rail-item.is-done { color: var(--aits-ink-soft); } .bizp-rail-item:disabled { cursor: not-allowed; opacity: .6; } @media (hover: hover) and (pointer: fine) { .bizp-rail-item:not(:disabled):not(.is-active):hover { background: var(--aits-surface-3); color: var(--aits-ink); } } .bizp-progress { height: 3px; background: var(--aits-line-soft); overflow: hidden; } .bizp-progress span { display: block; height: 100%; background: var(--bizp-grad); border-radius: var(--r-pill, 999px); transition: width .42s var(--bizp-ease); } /* --- Step body ----------------------------------------------------------- */ .bizp-step { padding: 32px; } .bizp-step-head { margin-bottom: 28px; } .bizp-step-head .st-title { margin: 0 0 6px; display: flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 700; letter-spacing: -.022em; color: var(--aits-ink); } .bizp-step-head .st-title i { color: var(--bizp-accent-ink); font-size: 18px; } .bizp-step-head .st-sub { margin: 0; font-size: 14.5px; color: var(--aits-mut); line-height: 1.6; } .bizp-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } .bizp-f.is-full { grid-column: span 6; } .bizp-f.is-two3 { grid-column: span 4; } .bizp-f.is-half { grid-column: span 3; } .bizp-f.is-third { grid-column: span 2; } @media (max-width: 720px) { .bizp-f.is-two3, .bizp-f.is-half, .bizp-f.is-third { grid-column: span 6; } } .bizp-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--aits-ink-soft); } .bizp-label .req { color: var(--bizp-red); font-weight: 700; } .bizp-label .opt { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--aits-mut); text-transform: uppercase; letter-spacing: .04em; } .bizp-input, .bizp select.bizp-input, .bizp textarea.bizp-input { display: block; width: 100%; padding: 12px 14px; background: var(--aits-card); border: 1.5px solid var(--aits-line-strong); border-radius: var(--bizp-r); color: var(--aits-ink); font-size: 14.5px; font-family: inherit; line-height: 1.5; transition: border-color var(--bizp-t) ease, box-shadow var(--bizp-t) ease; } .bizp textarea.bizp-input { min-height: 120px; resize: vertical; } .bizp-input::placeholder { color: var(--aits-mut); opacity: 1; } .bizp-input:focus { outline: none; border-color: var(--bizp-accent); box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)); } .bizp-input.is-invalid { border-color: var(--bizp-red); } .bizp-input:disabled { background-color: var(--aits-surface-3); color: var(--aits-mut); cursor: not-allowed; } /* A native select needs its own arrow once the border is restyled, or the platform one collides with the padding. The glyph itself comes from §SELX (assets/css/aits-select.css) so this field carries the SAME caret as every other select on the site and gets its dark twin for free — this rule used to ship a filled triangle here and a second one under .theme-dark. */ .bizp select.bizp-input { -webkit-appearance: none; appearance: none; padding-inline-end: 40px; background-image: var(--selx-chev); background-repeat: no-repeat; background-position: var(--selx-chev-pos, right 14px center); background-size: var(--selx-chev-size, 15px 15px); } .bizp-inputwrap { position: relative; } .bizp-inputwrap .in-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--aits-mut); font-size: 14px; pointer-events: none; z-index: 1; } .bizp-inputwrap .in-ic ~ .bizp-input { padding-left: 40px; } .bizp-help { margin: 7px 0 0; font-size: 12.5px; color: var(--aits-mut); line-height: 1.55; } .bizp-error { margin: 7px 0 0; font-size: 12.5px; font-weight: 600; color: var(--bizp-red-ink); } .bizp-count { margin-left: auto; font-size: 11.5px; color: var(--aits-mut); font-variant-numeric: tabular-nums; } .bizp-count.is-over { color: var(--bizp-red-ink); font-weight: 700; } /* --- Choice tiles -------------------------------------------------------- */ .bizp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px; } .bizp-opts.is-inline { display: flex; flex-wrap: wrap; } /* The whole tile is the control. The real input stays in the DOM — screen readers and form semantics need it — but is visually hidden. */ .bizp-opt { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; background: var(--aits-card); border: 1.5px solid var(--aits-line-strong); border-radius: var(--bizp-r); cursor: pointer; font-size: 14px; color: var(--aits-txt); transition: border-color var(--bizp-t) ease, background-color var(--bizp-t) ease; } .bizp-opt input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .bizp-opt .o-box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--aits-line-strong); border-radius: var(--r-xs, 6px); background: var(--aits-card); color: transparent; font-size: 11px; transition: background-color var(--bizp-t) ease, border-color var(--bizp-t) ease, color var(--bizp-t) ease; } .bizp-opt.is-radio .o-box { border-radius: var(--r-pill, 999px); } .bizp-opt .o-title { display: block; font-weight: 600; color: var(--aits-ink); } .bizp-opt .o-note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--aits-mut); line-height: 1.5; } /* `.is-on` is set by the kit and is the primary selector; `:has()` is the progressive enhancement, not the other way round. A checked tile is never indistinguishable, even on an engine without :has(). */ .bizp-opt.is-on, .bizp-opt:has(input:checked) { border-color: var(--bizp-accent); background: var(--aits-blue-tint-2); } .bizp-opt.is-on .o-box, .bizp-opt:has(input:checked) .o-box { background: var(--bizp-accent-solid); border-color: var(--bizp-accent-solid); color: #fff; } @media (hover: hover) and (pointer: fine) { .bizp-opt:hover { border-color: var(--aits-blue-line); } } /* --- Toggle -------------------------------------------------------------- */ .bizp-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; } .bizp-toggle input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } .bizp-toggle .t-track { flex: none; position: relative; width: 44px; height: 25px; border-radius: var(--r-pill, 999px); background: var(--aits-line-strong); transition: background-color var(--bizp-t) ease; } .bizp-toggle .t-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: var(--r-pill, 999px); background: #fff; box-shadow: var(--sh-xs, 0 1px 2px rgba(15,23,42,.04)); transition: transform var(--bizp-t) ease; } .bizp-toggle input:checked + .t-track { background: var(--bizp-accent); } .bizp-toggle input:checked + .t-track::after { transform: translateX(19px); } .bizp-toggle input:focus-visible + .t-track { box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)); } .bizp-toggle .t-label { font-size: 14px; color: var(--aits-txt); line-height: 1.5; } /* --- Quantity stepper ---------------------------------------------------- */ .bizp-qty { display: inline-flex; align-items: center; } .bizp-qty button { display: grid; place-items: center; width: 42px; height: 44px; background: var(--aits-card); border: 1.5px solid var(--aits-line-strong); color: var(--aits-ink); cursor: pointer; font-size: 13px; transition: background-color var(--bizp-t) ease, color var(--bizp-t) ease; } .bizp-qty button:first-child { border-radius: var(--bizp-r) 0 0 var(--bizp-r); } .bizp-qty button:last-child { border-radius: 0 var(--bizp-r) var(--bizp-r) 0; } .bizp-qty input { width: 84px; height: 44px; padding: 0 8px; text-align: center; background: var(--aits-card); border: 1.5px solid var(--aits-line-strong); border-left: 0; border-right: 0; color: var(--aits-ink); font-family: inherit; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .bizp-qty input:focus { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(96,164,245,.28)); position: relative; z-index: 1; } @media (hover: hover) and (pointer: fine) { .bizp-qty button:hover { background: var(--aits-blue-tint); color: var(--bizp-accent-ink); } } /* --- Tags ---------------------------------------------------------------- */ .bizp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .bizp-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 12px; border-radius: var(--r-pill, 999px); background: var(--aits-blue-tint); color: var(--bizp-accent-ink); font-size: 12.5px; font-weight: 600; } .bizp-tag button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: var(--r-pill, 999px); background: rgba(0,0,0,.08); color: inherit; font-size: 9px; cursor: pointer; } body.theme-dark .bizp-tag button { background: rgba(255,255,255,.12); } @media (hover: hover) and (pointer: fine) { .bizp-tag button:hover { background: var(--bizp-red); color: #fff; } } /* --- File uploads -------------------------------------------------------- */ .bizp-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px; text-align: center; background: var(--aits-surface-2); border: 1.5px dashed var(--aits-line-strong); border-radius: var(--bizp-r-md); cursor: pointer; transition: border-color var(--bizp-t) ease, background-color var(--bizp-t) ease; } .bizp-drop input[type="file"] { display: none; } .bizp-drop .d-ic { font-size: 24px; color: var(--bizp-accent-ink); } .bizp-drop .d-title { font-size: 14.5px; font-weight: 600; color: var(--aits-ink); } .bizp-drop .d-hint { font-size: 12.5px; color: var(--aits-mut); } @media (hover: hover) and (pointer: fine) { .bizp-drop:hover { border-color: var(--bizp-accent); background: var(--aits-blue-tint-2); } } .bizp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .bizp-thumb { position: relative; width: 92px; height: 92px; border-radius: var(--bizp-r); overflow: hidden; background: var(--aits-surface-3); border: 1px solid var(--aits-line); display: grid; place-items: center; } .bizp-thumb img { width: 100%; height: 100%; object-fit: cover; } .bizp-thumb .t-ic { font-size: 22px; color: var(--aits-mut); } .bizp-thumb .t-del { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: var(--r-pill, 999px); background: rgba(17,17,17,.72); color: #fff; font-size: 10px; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .bizp-thumb .t-del:hover { background: var(--bizp-red); } } /* --- Footer actions ------------------------------------------------------ */ .bizp-form-foot { display: flex; align-items: center; gap: 12px; padding: 20px 32px; background: var(--aits-surface-2); border-top: 1px solid var(--aits-line); flex-wrap: wrap; } .bizp-form-foot .spacer { flex: 1 1 auto; } .bizp-saved { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--aits-mut); transition: color var(--bizp-t) ease; } .bizp-saved.is-on { color: var(--bizp-green-ink); } /* Honeypot: off-screen, never display:none — some bots skip hidden fields. */ .bizp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } /* --- Review summary ------------------------------------------------------ */ .bizp-summary { display: flex; flex-direction: column; gap: 20px; } .bizp-summary-group .sg-title { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--aits-ink); } .bizp-summary-group .sg-title i { color: var(--bizp-accent-ink); } .bizp-summary-row { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--aits-line-soft); font-size: 14px; } .bizp-summary-row:last-child { border-bottom: 0; } .bizp-summary-row dt { color: var(--aits-mut); font-weight: 500; } .bizp-summary-row dd { margin: 0; color: var(--aits-ink); word-break: break-word; } @media (max-width: 560px) { .bizp-summary-row { grid-template-columns: minmax(0, 1fr); gap: 3px; } } /* ============================================================================ §14 Order tracker / status page ========================================================================== */ .bizp-tracker { display: flex; flex-direction: column; } .bizp-track-step { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 0 0 28px; } .bizp-track-step:last-child { padding-bottom: 0; } /* The connector is drawn on the step, not between steps, so the last one can drop it without a :not() chain that breaks when a milestone is hidden. */ .bizp-track-step::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 6px; width: 2px; background: var(--aits-line); } .bizp-track-step:last-child::before { display: none; } .bizp-track-step.is-done::before { background: var(--bizp-green); } .bizp-track-step .tk-dot { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-pill, 999px); background: var(--aits-surface-3); color: var(--aits-faint); border: 2px solid var(--aits-line); font-size: 14px; } .bizp-track-step.is-done .tk-dot { background: var(--bizp-green); border-color: var(--bizp-green); color: #fff; } .bizp-track-step.is-current .tk-dot { background: var(--bizp-accent-solid); border-color: var(--bizp-accent-solid); color: #fff; box-shadow: 0 0 0 5px var(--aits-blue-tint); } .bizp-track-step .tk-title { margin: 9px 0 3px; font-size: 15px; font-weight: 600; color: var(--aits-ink); } .bizp-track-step .tk-meta { font-size: 12.5px; color: var(--aits-mut); } .bizp-track-step .tk-note { margin-top: 6px; font-size: 13.5px; color: var(--aits-txt); line-height: 1.6; } .bizp-track-step:not(.is-done):not(.is-current) .tk-title { color: var(--aits-mut); } .bizp-status-hero { padding: 30px; border-radius: var(--bizp-r-xl); background: var(--bizp-grad); color: #fff; box-shadow: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12)); } .bizp-status-hero .sh-ref { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .9; } .bizp-status-hero .sh-title { margin: 8px 0 14px; font-size: clamp(21px, 3vw, 28px); font-weight: 800; letter-spacing: -.025em; } .bizp-status-hero .sh-chips { display: flex; flex-wrap: wrap; gap: 8px; } .bizp-status-hero .bizp-chip { background: rgba(255,255,255,.18); color: #fff; } /* ============================================================================ §15 CTA + banner ========================================================================== */ .bizp-cta { position: relative; padding: clamp(36px, 5vw, 60px); border-radius: var(--bizp-r-xl); background: var(--bizp-grad); color: #fff; text-align: center; box-shadow: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12)); overflow: hidden; } .bizp-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 15% 0%, rgba(255,255,255,.16), transparent 60%), radial-gradient(380px 200px at 85% 100%, rgba(255,255,255,.12), transparent 60%); pointer-events: none; } .bizp-cta > * { position: relative; } .bizp-cta h2 { margin: 0 0 12px; font-size: clamp(23px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; color: #fff; } .bizp-cta p { margin: 0 auto 28px; max-width: 60ch; font-size: 16px; line-height: 1.66; opacity: .95; } /* Inside a gradient panel the buttons invert: white fill for the primary, translucent outline for the secondary. */ .bizp-cta .bizp-btn.is-primary, .bizp-cta .bizp-btn.is-gradient { background: #fff; color: var(--bizp-accent-2) !important; box-shadow: 0 10px 28px rgba(0,0,0,.20); } .bizp-cta .bizp-btn.is-ghost { color: #fff !important; border-color: rgba(255,255,255,.45); background: transparent; } @media (hover: hover) and (pointer: fine) { .bizp-cta .bizp-btn.is-primary:hover, .bizp-cta .bizp-btn.is-gradient:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.26); } .bizp-cta .bizp-btn.is-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); } } .bizp-banner { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: var(--bizp-r-lg); background: var(--aits-blue-tint); border: 1px solid var(--aits-blue-line); flex-wrap: wrap; } .bizp-banner .bn-body { flex: 1 1 320px; min-width: 0; } .bizp-banner .bn-title { margin: 0 0 5px; font-size: 17px; font-weight: 700; color: var(--aits-ink); } .bizp-banner .bn-text { margin: 0; font-size: 14.5px; color: var(--aits-txt); line-height: 1.6; } /* ============================================================================ §16 Services hub — REMOVED 2026-08-21 ---------------------------------------------------------------------------- `.bizp-svc` and its five children were the hub's service card. /services was rebuilt on the HOMEPAGE kit (`.hpx-`, assets/css/homepage.css) and no longer loads this stylesheet at all, so the rules had no markup left anywhere on the site. Everything else in this file stays: the SERVICE pages, the order tracker and My Orders are still `.bizp-`. `.bizp-inputwrap` and `.bizp-eyebrow` were part of the same hub and are NOT removed — sections/partials/field.blade.php and sections/partials/head.blade.php still use them on the service pages. ========================================================================== */ /* ============================================================================ §17 Empty / notice states ========================================================================== */ .bizp-empty { padding: 48px 24px; text-align: center; background: var(--aits-surface-2); border: 1px dashed var(--aits-line-strong); border-radius: var(--bizp-r-lg); } .bizp-empty .e-ic { font-size: 30px; color: var(--aits-faint); margin-bottom: 12px; } .bizp-empty .e-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--aits-ink); } .bizp-empty .e-text { margin-inline: auto; max-width: 46ch; font-size: 14.5px; color: var(--aits-mut); line-height: 1.6; } .bizp-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--bizp-r-md); background: var(--aits-blue-tint); border: 1px solid var(--aits-blue-line); font-size: 14px; line-height: 1.6; color: var(--aits-ink-soft); } .bizp-note i { flex: none; margin-top: 3px; color: var(--bizp-accent-ink); } .bizp-note[data-tone="green"] { background: var(--bizp-green-soft); border-color: transparent; } .bizp-note[data-tone="green"] i { color: var(--bizp-green-ink); } .bizp-note[data-tone="amber"] { background: var(--bizp-amber-soft); border-color: transparent; } .bizp-note[data-tone="amber"] i { color: var(--bizp-amber-ink); } .bizp-note[data-tone="red"] { background: var(--bizp-red-soft); border-color: transparent; } .bizp-note[data-tone="red"] i { color: var(--bizp-red-ink); } .bizp-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--r-pill, 999px); animation: bizp-spin .7s linear infinite; } @keyframes bizp-spin { to { transform: rotate(360deg); } } /* ============================================================================ §18 Entrance animation — OPT-IN, never opt-out ---------------------------------------------------------------------------- `.bizp-in` is fully visible by default. Only once the kit has stamped `bizp-js` on — which it does synchronously, before first paint — does the hidden state apply. A blocked script, a CSP violation or a JS error therefore leaves the page perfectly readable rather than blank. ========================================================================== */ body.bizp-js .bizp-in { opacity: 0; transform: translateY(14px); transition: opacity .42s var(--bizp-ease), transform .42s var(--bizp-ease); will-change: opacity, transform; } body.bizp-js .bizp-in.is-in { opacity: 1; transform: none; } /* `no-anim` comes from the service's branding document. Everything must be visible when animation is off — an entrance animation that never runs is how content ends up permanently invisible. */ body.bizp-js .bizp.no-anim .bizp-in { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .bizp *, .bizp *::before, .bizp *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } body.bizp-js .bizp-in { opacity: 1 !important; transform: none !important; } } /* ============================================================================ §19 Responsive ========================================================================== */ @media (max-width: 720px) { .bizp-sec { padding: 54px 0; } .bizp-hero { padding: 34px 0 46px; } .bizp-step, .bizp-calc-body, .bizp-calc-side { padding: 22px; } .bizp-form-foot { padding: 16px 22px; } .bizp-rail { padding: 14px 16px; } .bizp-head { margin-bottom: 30px; } .bizp-btn.is-lg { padding: 13px 22px; font-size: 15px; } /* Stacked CTAs go full width — two half-width buttons on a 360px screen wrap their labels and look broken. */ .bizp-hero-cta .bizp-btn { flex: 1 1 100%; } } @media (max-width: 420px) { .bizp-plan { padding: 26px 20px; } .bizp-block { padding: 22px 20px; } .bizp-qty input { width: 64px; } .bizp-status-hero { padding: 22px; } } /* ============================================================================ §20 Print ========================================================================== */ @media print { .bizp.is-mesh::before, .bizp-form-foot, .bizp-rail, .bizp-cta { display: none !important; } .bizp-card, .bizp-block, .bizp-plan, .bizp-quote { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; } body.bizp-js .bizp-in { opacity: 1 !important; transform: none !important; } }