/* ===================================================================== Accessibility Audit page - scoped styles. Everything is namespaced under `.aa-page` (the class). The stylesheet is enqueued ONLY on page-accessibility-audit.php, so it cannot affect the homepage or any other template. Design tokens are taken from the QA Madness Figma design system. ===================================================================== */ /* ---------- Fonts ---------- */ @font-face { font-family: "GT Sectra LC Display"; src: url("../../fonts/GTSectraDisplaySuper.woff2") format("woff2"), url("../../fonts/GTSectraDisplaySuper.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } /* ---------- Design tokens ---------- */ .aa-page { --aa-bg-1: #110D1A; --aa-bg-2: #08060D; --aa-surface: #15111E; --aa-white: #F9F7FF; --aa-grey: #CCCBD2; --aa-grey-2: #8B8A92; --aa-line: rgba(203, 185, 249, .14); --aa-purple: #7D51F1; --aa-purple-light: #CBB9F9; --aa-purple-dark: #5336A1; --aa-purple-border: #5336A1; --aa-green: #00CCA6; --aa-dark-green: #00886F; --aa-light-green: #68DCC7; --aa-green-card-back: #0A1013; --aa-pink: #E62D54; --aa-light-pink: #EB5776; --aa-dark-pink: #991E38; --aa-yellow: #FCC31E; --aa-dark-yellow: #A88214; --aa-font-display: "GT Sectra LC Display", "Playfair Display", Georgia, serif; --aa-font-body: "Noto Sans", -apple-system, "Segoe UI", sans-serif; --aa-font-mono: "JetBrains Mono", ui-monospace, monospace; --aa-container: 1400px; --aa-header-h: 76px; --aa-radius: 16px; /* Vertical padding on each content section (top + bottom). One knob for the gap between sections - change here to adjust all of them at once. */ --aa-section-y: 50px; } /* ---------- Scoped reset (only inside .aa-page) ---------- */ .aa-page { margin: 0; /* Lock the page to the viewport width so the UI stays flush to the screen edges on mobile (no sideways drag from a stray overflowing element). `clip` is preferred - it does NOT create a scroll container, so the fixed header, anchor jumps, and vertical scrolling are unaffected; `hidden` is the fallback for engines without `clip`. The header is position:fixed, so neither breaks it. */ overflow-x: hidden; overflow-x: clip; background: var(--aa-bg-2); color: var(--aa-white); font-family: var(--aa-font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: calc(var(--aa-header-h) + 12px); } .aa-page *, .aa-page *::before, .aa-page *::after { box-sizing: border-box; } /* :where() keeps this at zero specificity so component rules (e.g. the logo show/hide toggle) aren't overridden by the base img reset. */ :where(.aa-page img) { max-width: 100%; display: block; } /* :where() keeps these base resets at zero specificity so component classes (.aa-header__link, .aa-lang__current, ...) set their own colors without a fight. */ :where(.aa-page a) { color: inherit; text-decoration: none; } :where(.aa-page button) { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* Google reCAPTCHA badge: hidden here to match the rest of the site (the legacy head, templates/head.php, hides it on every other page). Its fixed box sits ~186px off the right edge (right:-186px); position:fixed escapes the page's overflow-x:clip, so on touch browsers (Samsung Internet, iOS Safari) that off-screen box let the page pan sideways ("not stuck to the borders"). This self-contained AA head dropped the rule, so it only regressed here. !important is required because Google sets an inline `display:block` on the badge; without it the layout box survives (only invisible via the inline visibility:hidden) and still creates the sideways drag. */ .aa-page .grecaptcha-badge { display: none !important; } .aa-container { width: 100%; max-width: var(--aa-container); margin-inline: auto; padding-inline: 32px; } /* ---------- Wide side gutters ---------- All content sections sit 200px in from each edge. Excluded: the hero, the marquee strip right after it (full-bleed), and the Request a Full Audit form. Gated to wide viewports; below 1200px the sections fall back to the normal centered container so the 200px gutters never crush the content. */ @media (min-width: 1200px) { .aa-stats > .aa-container, .aa-eaa > .aa-container, .aa-chal > .aa-container, .aa-scan > .aa-container, .aa-cmp-section > .aa-container, .aa-proc > .aa-container, .aa-deliv > .aa-container, .aa-res > .aa-container, .aa-faq > .aa-container { max-width: none; padding-inline: 200px; } } /* ---------- Buttons ---------- */ .aa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--aa-font-body); font-weight: 600; font-size: 14px; line-height: 1; padding: 13px 22px; border-radius: 999px; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease; } /* Primary button — no glow; animates like the green "Run Free Scan" button: the label/arrow gap stretches on hover while a lighter gradient fades in toward the arrow. */ .aa-btn--primary { background: var(--aa-purple); color: #fff; position: relative; z-index: 0; overflow: hidden; transition: background-color .35s ease, opacity .25s ease, gap .4s cubic-bezier(.4, 0, .2, 1); } .aa-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to right, rgba(203, 185, 249, 0) 35%, rgba(203, 185, 249, .9) 100%); opacity: 0; transition: opacity .5s ease .18s; } .aa-btn--primary:hover { background: #8d63f5; gap: 24px; } .aa-btn--primary:hover::after { opacity: 1; } .aa-btn--primary:focus-visible { outline: 2px solid var(--aa-purple-light); outline-offset: 2px; } /* ===================================================================== Header ===================================================================== */ .aa-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } .aa-header__inner { display: flex; align-items: center; gap: 28px; min-height: var(--aa-header-h); } /* Scroll-progress bar (mirrors the homepage header indicator). */ .aa-header__progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; max-width: 100%; background: linear-gradient(90deg, var(--aa-green), var(--aa-purple)); transition: width .1s linear; pointer-events: none; z-index: 1; } /* Solid dark state once scrolled, or while the mobile menu is open - matches the homepage header (#08060D). Logo / nav / controls stay light throughout. */ .aa-header.is-scrolled, .aa-header.is-menu-open { background: #08060D; border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); } .aa-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .aa-header__logo-img { height: 30px; width: auto; } .aa-header__nav { display: flex; align-items: center; justify-content: center; gap: 30px; margin-inline: auto; } .aa-header__link { position: relative; font-size: 15px; font-weight: 500; color: rgba(249, 247, 255, .82); padding: 6px 2px; transition: color .18s ease; } .aa-header__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; border-radius: 2px; background: var(--aa-purple); transition: width .2s ease; } .aa-header__link:hover, .aa-header__link:focus-visible { color: var(--aa-white); } .aa-header__link:hover::after, .aa-header__link:focus-visible::after { width: 100%; } .aa-header__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } /* ---------- Mobile burger (hidden on desktop) ---------- */ .aa-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(249, 247, 255, .22); } .aa-burger span { display: block; width: 18px; height: 2px; margin-inline: auto; border-radius: 2px; background: var(--aa-white); transition: transform .22s ease, opacity .22s ease; } .aa-header.is-menu-open .aa-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .aa-header.is-menu-open .aa-burger span:nth-child(2) { opacity: 0; } .aa-header.is-menu-open .aa-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 1024px) { .aa-header__nav { gap: 22px; } .aa-header__link { font-size: 14px; } } @media (max-width: 900px) { .aa-burger { display: flex; } /* The nav becomes a fixed dropdown below, leaving the flex flow — so the auto-margin that pushed the actions right on desktop no longer applies. Push the actions (CTA + burger) back to the right edge here. */ .aa-header__actions { margin-left: auto; } .aa-header__nav { position: fixed; inset: var(--aa-header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 12px 24px 24px; background: #08060D; border-bottom: 1px solid var(--aa-line); box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .6); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .aa-header.is-menu-open .aa-header__nav { transform: translateY(0); opacity: 1; visibility: visible; } .aa-header__link { padding: 14px 2px; font-size: 16px; border-bottom: 1px solid var(--aa-line); } .aa-header__link::after { display: none; } /* The CTA collapses into the mobile panel feel; keep it compact in the bar. */ .aa-header__cta { padding: 11px 16px; } } @media (max-width: 560px) { .aa-container { padding-inline: 20px; } .aa-header__cta { display: none; } } /* ===================================================================== Hero ===================================================================== */ .aa-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--aa-bg-2); padding: calc(var(--aa-header-h) + 48px) 0 72px; } /* Aurora gradient blobs - same recipe as the homepage hero (fallback shown only when no hero-bg image is present). */ .aa-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(34% 30% at 2% 2%, rgba(214, 54, 84, 0.55), transparent 60%), radial-gradient(42% 44% at 0% 24%, rgba(120, 70, 230, 0.55), transparent 62%), radial-gradient(34% 40% at 100% 22%, rgba(126, 84, 250, 0.55), transparent 60%), radial-gradient(40% 46% at 102% 52%, rgba(60, 110, 240, 0.45), transparent 62%), radial-gradient(46% 50% at 96% 84%, rgba(38, 205, 158, 0.50), transparent 62%); filter: blur(32px); } /* Dark vignette keeps the centered text legible over the blobs. */ .aa-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(46% 44% at 50% 40%, rgba(8, 8, 13, 0.85) 8%, transparent 66%); } /* When a hero-bg image is set, use it (same as homepage) and drop the overlay. */ .aa-hero--image .aa-hero__bg { background: var(--aa-hero-bg) center / 100% 100% no-repeat; background-color: var(--aa-bg-2); filter: none; } .aa-hero--image::after { display: none; } .aa-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .aa-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; } .aa-chip { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(249, 247, 255, .16); background: rgba(249, 247, 255, .05); font-size: 12px; font-weight: 600; color: var(--aa-white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .aa-hero__title { margin: 0; max-width: 18ch; font-family: var(--aa-font-display); font-weight: 900; font-size: clamp(40px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.01em; } .aa-hero__line { display: block; color: var(--aa-white); } .aa-hero__line--grad { background: linear-gradient(90deg, #7d51f1 0%, #5b9dff 52%, #00cca6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .aa-hero__lead { margin: 28px 0 0; max-width: 580px; color: var(--aa-white); font-size: clamp(16px, 1.3vw, 18px); font-weight: lighter; line-height: 1.6; } .aa-hero__lead strong { color: var(--aa-white); font-weight: 500; } .aa-hero__cta { margin-top: 38px; } .aa-btn--lg { padding: 17px 30px; font-size: 16px; } .aa-btn__arrow { transition: transform .2s ease; } .aa-btn--primary:hover .aa-btn__arrow { transform: translateX(3px); } /* Trust / ratings row */ .aa-hero__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 44px; margin-top: 54px; } .aa-trust { display: flex; align-items: center; gap: 8px; color: var(--aa-grey); } .aa-trust__eyebrow { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--aa-grey-2); } .aa-trust__name { font-weight: 700; color: var(--aa-white); font-size: 18px; } .aa-trust__badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #ff492c; color: #fff; font-weight: 800; font-size: 13px; } .aa-stars { display: inline-flex; gap: 2px; } .aa-stars svg { display: block; } .aa-trust__meta { font-size: 13px; font-weight: 600; color: var(--aa-grey); } .aa-trust__meta--stack { line-height: 1.25; text-align: left; } .aa-trust__logo { height: 34px; width: auto; } .aa-trust__ai { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(249, 247, 255, .25); color: var(--aa-white); font-weight: 800; font-size: 12px; } /* Scroll hint - sits in flow below the trust row, centered. */ .aa-hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 52px; color: var(--aa-grey-2); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; } .aa-hero__mouse { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgba(249, 247, 255, .3); display: flex; justify-content: center; padding-top: 6px; } .aa-hero__mouse i { width: 3px; height: 7px; border-radius: 2px; background: var(--aa-purple-light); animation: aa-mouse 1.5s ease-in-out infinite; } @keyframes aa-mouse { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(5px); opacity: 1; } } .aa-hero__chev { color: var(--aa-purple); animation: aa-bounce 1.8s ease-in-out infinite; } @keyframes aa-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @media (max-width: 600px) { /* Match the homepage hero: natural top-down flow instead of a full-viewport block that vertically-centers the content (which left the CTA floating in the middle of the screen). */ .aa-hero { min-height: auto; align-items: flex-start; padding: calc(var(--aa-header-h) + 24px) 0 48px; } .aa-hero__chips { margin-bottom: 26px; } /* CTA spans the full content width. */ .aa-hero__cta { width: 100%; } .aa-hero__cta .aa-btn { width: 100%; } /* Trust row becomes a full-width 2-column grid; each cell left-aligned. minmax(0, 1fr) lets the tracks shrink below their content's intrinsic width so the grid never pushes past the viewport (no right-edge overflow); the items then wrap and their logos scale down to fit. */ .aa-hero__trust { width: 100%; display: grid; /* Content-sized columns grouped at the start - not two half-width 1fr tracks, which pushed the 2nd badge to the mid-line and left a big gap between the pairs. This keeps the two columns aligned but tight, matching the design. The badges are small (fixed 28px height) so auto tracks can't overflow the narrow viewport, and .aa-page clips any edge case. */ grid-template-columns: auto auto; justify-content: center; justify-items: start; gap: 26px 40px; margin-top: 44px; } .aa-trust { min-width: 0; align-items: center; flex-wrap: wrap; gap: 6px 8px; } .aa-trust__logo { height: 28px; } .aa-trust__meta { font-size: 12px; } .aa-stars svg { width: 12px; height: 12px; } .aa-hero__scroll { display: none; } } /* ===================================================================== Marquee strip ===================================================================== */ .aa-marquee { overflow: hidden; background: var(--aa-bg-1); border-block: 1px solid var(--aa-line); /* Decorative running line: show the arrow, not the text I-beam (inherited by the items). Matches the home-page marquee. */ cursor: default; /* Fade both edges. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .aa-marquee__track { display: flex; width: max-content; animation: aa-marquee-scroll 40s linear infinite; } .aa-marquee:hover .aa-marquee__track { animation-play-state: paused; } .aa-marquee__group { display: flex; align-items: center; flex: 0 0 auto; /* Each copy must be at least as wide as the viewport, otherwise on very wide viewports (large monitors, or high browser zoom-out) one group is narrower than the screen and the -50% loop exposes an empty gap on the right. min-width 100vw guarantees coverage at any width; space-around then distributes the items evenly across the extra width - and because the end spacing equals half an inter-item gap on each side, the rhythm stays consistent across the seam. At normal widths the content is wider than the viewport, so this is a no-op. */ min-width: 100vw; justify-content: space-around; margin: 0; padding: 0; list-style: none; } .aa-marquee__item { display: inline-flex; align-items: center; padding: 17px 0; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; color: rgba(249, 247, 255, .8); transition: color 0.2s ease; } /* Brighten the hovered item (the track pauses on hover), matching the home-page running line's hover highlight. */ .aa-marquee__item:hover { color: var(--aa-white); } /* Separator dot rendered as its own flex item (not an ::after glued to the label) so that when the group stretches to fill wide / zoomed-out viewports (justify-content: space-around), each dot sits centred in the gap between two labels instead of hugging the label it follows. At normal widths the group is content-sized, so the 38px margins alone set the spacing (unchanged look). */ .aa-marquee__sep { flex: 0 0 auto; width: 5px; height: 5px; margin: 0 38px; border-radius: 50%; background: var(--aa-purple); list-style: none; } /* Moving the track by exactly one of the two identical copies = seamless loop. */ @keyframes aa-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===================================================================== Stats band ("The Numbers That Demand Action") ===================================================================== */ .aa-stats { padding: var(--aa-section-y) 0; } .aa-stats__head { margin-bottom: 44px; } .aa-stats__title { margin: 0; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -.01em; } .aa-stats__title-ghost { color: var(--aa-white); } .aa-stats__title-accent { color: var(--aa-purple); } .aa-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .aa-stat { text-align: center; padding: 40px 26px; border-radius: var(--aa-radius); background: rgba(255, 255, 255, .05); border: 1px solid var(--aa-line); } .aa-stat--hot { background: var(--aa-green-card-back); border-color: rgba(0, 204, 166, .42); } .aa-stat__value { margin-bottom: 10px; font-size: clamp(28px, 3vw, 38px); font-weight: 700; line-height: 1; color: var(--aa-purple-light); } .aa-stat--hot .aa-stat__value { color: var(--aa-light-green); } .aa-stat__label { margin: 0; color: var(--aa-white); font-size: 15px; line-height: 1.45; } @media (max-width: 900px) { .aa-stats__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .aa-stats { padding: var(--aa-section-y) 0; } .aa-stats__grid { grid-template-columns: 1fr; } /* Mobile design: centered heading and larger heading / stat numbers. */ .aa-stats__head { text-align: center; } .aa-stats__title { font-size: 34px; line-height: 1.2; } .aa-stat__value { font-size: 32px; } } /* ===================================================================== EAA section ===================================================================== */ .aa-eaa { padding: var(--aa-section-y) 0; background: var(--aa-bg-1); } .aa-eaa__title { margin: 0; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -.01em; } .aa-eaa__title-l1 { display: block; color: var(--aa-white); } .aa-eaa__title-accent { display: block; color: var(--aa-green); } .aa-eaa__intro { max-width: 760px; margin: 22px 0 0; color: var(--aa-grey); font-size: 16px; line-height: 1.7; } .aa-eaa__intro p { margin: 0; } .aa-eaa__intro strong { color: var(--aa-white); font-weight: 700; } .aa-eaa__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; } .aa-eaa-card { padding: 28px 30px; border-radius: var(--aa-radius); background: rgba(19, 15, 28, .03); border: 1px solid var(--aa-purple-dark); } .aa-eaa-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .aa-eaa-card__icon { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .aa-eaa-card__icon img { width: 44px; height: 44px; display: block; } .aa-eaa-card__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--aa-purple-light); } .aa-eaa-card__text { color: var(--aa-grey); font-size: 14px; line-height: 1.6; } .aa-eaa-card__text p { margin: 0; } .aa-eaa-card__text strong { color: var(--aa-white); font-weight: 700; } .aa-eaa__sublabel { display: block; margin: 48px 0 18px; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--aa-white); } .aa-eaa__ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .aa-ind { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 12px; background: rgba(13, 26, 24, .5); border: 1px solid var(--aa-dark-green); color: #68dcc7; font-weight: 600; font-size: 15px; } .aa-ind__icon { flex: 0 0 auto; display: inline-flex; color: var(--aa-light-green); } .aa-ind__icon svg, .aa-ind__icon img { width: 18px; height: 18px; display: block; } .aa-eaa__prec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .aa-prec { display: flex; flex-direction: column; padding: 26px 28px; border-radius: var(--aa-radius); background: rgba(19, 15, 28, .03); border: 1px solid var(--aa-purple-dark); } .aa-prec__name { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--aa-white); } .aa-prec__amount { margin-bottom: 14px; font-size: 30px; font-weight: 700; line-height: 1; color: var(--aa-purple-light); } .aa-prec__text { margin: 0 0 20px; color: var(--aa-white); font-size: 14px; line-height: 1.6; } .aa-prec__tag { align-self: flex-start; margin-top: auto; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--aa-line); color: var(--aa-purple-light); font-size: 12px; font-weight: 600; } @media (max-width: 880px) { .aa-eaa__cards { grid-template-columns: 1fr; } .aa-eaa__ind-grid { grid-template-columns: repeat(2, 1fr); } .aa-eaa__prec-grid { grid-template-columns: 1fr; } /* Mobile design: heading + intro are centered (sub-labels and cards, which are siblings of the head, stay left-aligned). */ .aa-eaa__head { text-align: center; } .aa-eaa__intro { margin-inline: auto; } } @media (max-width: 520px) { .aa-eaa { padding: var(--aa-section-y) 0; } .aa-eaa__ind-grid { grid-template-columns: 1fr; } } /* ===================================================================== Challenges ("The Hidden Risks of Inaccessible Products") ===================================================================== */ .aa-chal { padding: var(--aa-section-y) 0; } .aa-chal__title-h { margin: 0; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -.01em; } .aa-chal__title-ghost { color: var(--aa-white); } .aa-chal__title-accent { color: var(--aa-purple); } .aa-chal__lead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; color: var(--aa-white); font-size: 18px; } /* Before / after switch (used at the top and inside each panel) — squarish buttons; inactive is muted grey, the active one shows its colour + tint. */ .aa-chal__switch { display: inline-flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--aa-line); vertical-align: middle; } .aa-chal__switch button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--aa-grey-2); transition: background-color .18s ease, color .18s ease; } /* Active button: coloured icon + text on a tinted background of its colour; inactive buttons stay muted grey (icons use currentColor). */ .aa-chal__switch button[data-aa-state-btn="before"].is-active { color: #eb5776; background: rgba(230, 45, 84, .16); } .aa-chal__switch button[data-aa-state-btn="after"].is-active { color: #00cca6; background: rgba(0, 204, 166, .16); } .aa-chal__layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; margin-top: 40px; align-items: start; } /* Tabs */ .aa-chal__tabs { display: flex; flex-direction: column; gap: 8px; } .aa-chal__tab { position: relative; display: block; text-align: left; padding: 18px 20px; border-radius: 14px; border: 1px solid transparent; background: transparent; } .aa-chal__tab-num { display: block; margin-bottom: 4px; font-size: 13px; color: rgba(203, 185, 249, .5); } .aa-chal__tab-title { display: block; font-size: 16px; font-weight: 400; color: var(--aa-purple-light) ; transition: color .18s ease; } .aa-chal__tab:hover .aa-chal__tab-title { color: var(--aa-purple-light); } .aa-chal__tab.is-active { background: rgba(14, 11, 22, 1); border-color: var(--aa-purple-border); padding-left: 24px; } .aa-chal__tab.is-active .aa-chal__tab-title { color: var(--aa-white); font-weight: 600; } .aa-chal__tab.is-active .aa-chal__tab-num { color: var(--aa-purple-light); } .aa-chal__tab.is-active::before { content: ""; position: absolute; left: 10px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--aa-purple) 0%, var(--aa-purple-light) 100%); transform-origin: bottom; animation: aa-tab-bar .4s cubic-bezier(.22, .61, .36, 1) both; } @keyframes aa-tab-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* Panel */ .aa-chal__panel { min-height: 499px; padding: 30px 32px; border-radius: 18px; background: rgba(8, 6, 13, 1); border: 1px solid var(--aa-purple-border); } .aa-chal__panel[hidden] { display: none; } .aa-chal__phead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .aa-chal__eyebrow { font-size: 18px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--aa-purple-dark); } .aa-chal__ctitle { margin: 0 0 10px; font-size: 24px; font-weight: 700; color: var(--aa-white); } .aa-chal__desc { margin: 0 0 22px; max-width: 760px; color: var(--aa-white); font-size: 14px; line-height: 1.6; font-weight: 400; } /* State toggle visibility */ .aa-chal[data-state="before"] [data-state-content="after"], .aa-chal[data-state="after"] [data-state-content="before"] { display: none; } /* Entrance animation replayed (via JS) on tab switch + before/after toggle. */ @keyframes aa-chal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .aa-anim-in { animation: aa-chal-in .45s cubic-bezier(.22, .61, .36, 1) both; } /* Screen-reader lines read in with a small stagger (replayed via JS). */ @keyframes aa-sr-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } .aa-sr.is-anim .aa-sr__line { animation: aa-sr-in .4s ease both; } .aa-sr.is-anim .aa-sr__line:nth-child(1) { animation-delay: .06s; } .aa-sr.is-anim .aa-sr__line:nth-child(2) { animation-delay: .19s; } .aa-sr.is-anim .aa-sr__line:nth-child(3) { animation-delay: .32s; } .aa-sr.is-anim .aa-sr__line:nth-child(4) { animation-delay: .45s; } .aa-sr.is-anim .aa-sr__line:nth-child(5) { animation-delay: .58s; } /* Browser mock-up */ .aa-browser { margin-bottom: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--aa-purple-light); background: var(--aa-surface); } .aa-browser__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--aa-line); } .aa-browser__dots { display: inline-flex; gap: 6px; } .aa-browser__dots i { width: 10px; height: 10px; border-radius: 50%; } .aa-browser__dots i:nth-child(1) { background: #ff5f57; } .aa-browser__dots i:nth-child(2) { background: #febc2e; } .aa-browser__dots i:nth-child(3) { background: #28c840; } .aa-browser__url { font-family: var(--aa-font-mono); font-size: 12px; color: rgba(203, 185, 249, 0.5); } .aa-browser__body { padding: 22px; } .aa-mock { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .aa-mock__img { width: 100px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed var(--aa-light-green); border-radius: 8px; font-size: 24px; } .aa-mock__img em { font-style: normal; font-family: var(--aa-font-mono); font-size: 12px; color: var(--aa-light-green); } .aa-mock__img.is-bad em { color: var(--aa-light-pink); } .aa-mock__img.is-good em { color: var(--aa-light-green); } .aa-mock__img.is-bad { background-color: rgba(29, 17, 20, .5); border-color: rgba(230, 45, 84, .5); } .aa-mock__img.is-good { background-color: rgba(13, 26, 24, 0.5); border-color: var(--aa-light-green); } .aa-mock__price { font-size: 16px; font-weight: 500; color: var(--aa-white); } .aa-mock__btn { padding: 13px 17px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid var(--aa-light-green); } .aa-mock__btn.is-bad { background-color: rgba(29, 17, 20, .5); border-color: rgba(230, 45, 84, .5); color: #eb5776; } .aa-mock__btn.is-good { background-color: rgba(13, 26, 24, 0.5); border-color: var(--aa-light-green); color: #68dcc7; } .aa-mock__flag { padding: 13px 17px; font-size: 12px; font-weight: 600; border-radius: 24px; border: 1px solid var(--aa-light-green); } .aa-mock__flag.is-bad { background-color: rgba(29, 17, 20, .5); color: #eb5776; border-color: rgba(230, 45, 84, .5); } .aa-mock__flag.is-good { background-color: rgba(13, 26, 24, 0.5); color: #68dcc7; border-color: var(--aa-light-green); } /* --- Dashboard mock (challenge 02) --- */ .aa-dash__unknown { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--aa-white); border-radius: 6px; margin-bottom: 16px; } .aa-dash__q { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--aa-grey-2); color: var(--aa-grey); font-weight: 700; } .aa-dash__unknown b { color: var(--aa-white); font-size: 14px; } .aa-dash__unknown p { margin: 4px 0 0; font-size: 12px; color: var(--aa-grey-2); } .aa-dash__grid-label { font-size: 12px; color: var(--aa-grey-2); margin-bottom: 8px; } .aa-dash__grid { display: flex; flex-wrap: nowrap; gap: 8px; } .aa-dash__grid i { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--aa-grey); } .aa-dash--after { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; } /* Squared score card with a gradient number (matches the design). */ .aa-dash__score { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid var(--aa-line); } .aa-ring { font-size: 32px; font-weight: 800; line-height: 1; text-align: center; background: linear-gradient(120deg, #00cca6 0%, #7d51f1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .aa-dash__scoretext { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--aa-grey); } .aa-dash__scoretext span { color: var(--aa-white); font-weight: 700; font-size: 14px; } .aa-dash__scoretext b { color: var(--aa-green-light, #68dcc7); font-size: 13px; } .aa-bars { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; min-width: 260px; } /* Label sits above the bar (both left-aligned); percentage centered on the right. */ .aa-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label pct" "bar pct"; column-gap: 20px; row-gap: 10px; align-items: center; font-size: 13px; line-height: 1; color: var(--aa-grey); } .aa-bar-row > span { grid-area: label; color: rgba(249, 247, 255, .92); } .aa-bar-row > .aa-bar { grid-area: bar; } .aa-bar-row > b { grid-area: pct; } .aa-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; } .aa-bar i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1.1s cubic-bezier(.22, .61, .36, 1); } .aa-bar--yellow i { background: linear-gradient(90deg, #e8a400 0%, #ffd95e 100%); } .aa-bar--green i { background: linear-gradient(90deg, #00a88a 0%, #3de3c2 100%); } .aa-bar--purple i { background: linear-gradient(90deg, #6e45e0 0%, #bba6ff 100%); } .aa-bar--pink i { background: linear-gradient(90deg, #d62348 0%, #ff7a92 100%); } /* Labels and percentage numbers coloured to match their bar. */ .aa-bar-row b { font-weight: 700; color: var(--aa-white); } .aa-bar-row--yellow > span, .aa-bar-row--yellow b { color: #fcc31e; } .aa-bar-row--green > span, .aa-bar-row--green b { color: #2ed8ac; } .aa-bar-row--purple > span, .aa-bar-row--purple b { color: #9b7bf5; } .aa-bar-row--pink > span, .aa-bar-row--pink b { color: #eb5776; } /* --- Scan mock (challenge 03) --- */ .aa-scan-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .aa-scan-box { padding: 18px; border-radius: 10px; border: 1px solid var(--aa-line); } .aa-scan-box.is-detected { border-color: rgba(230, 45, 84, .45); background: rgba(230, 45, 84, .06); } .aa-scan-box.is-missed { border-color: var(--aa-line); background: rgba(255, 255, 255, .02); } .aa-scan-box__title { font-size: 15px; font-weight: 700; color: var(--aa-white); margin-bottom: 14px; } .aa-scan-box__num { font-size: 26px; font-weight: 700; color: var(--aa-white); margin-bottom: 12px; } .aa-scan-box__num small { font-size: 12px; font-weight: 500; color: var(--aa-grey); } .aa-scan-box.is-detected .aa-scan-box__num, .aa-scan-box.is-detected .aa-scan-box__num small { color: var(--aa-pink); } .aa-scan-box.is-missed .aa-scan-box__num { color: var(--aa-white); } .aa-scan-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .aa-scan-box li { position: relative; padding-left: 16px; font-size: 13px; color: var(--aa-grey); } .aa-scan-box li::before { content: "•"; position: absolute; left: 2px; color: var(--aa-grey-2); } .aa-scan-box.is-detected li::before { color: var(--aa-pink); } .aa-methods__total { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 812px; height: 92px; margin: 16px auto; padding: 0 14px; text-align: center; border-radius: 12px; border: 1px solid var(--aa-line); background: #08060D; } .aa-methods__total b { display: block; font-size: 34px; font-weight: 800; line-height: 1; background: linear-gradient(90deg, #00cca6 0%, #7d51f1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .aa-methods__total span { font-size: 13px; font-weight: 700; line-height: 1; color: var(--aa-white); } .aa-methods__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .aa-method { padding: 16px 18px; border-radius: 10px; border: 1px solid var(--aa-line); } .aa-method b { display: block; font-size: 24px; font-weight: 700; margin-bottom: 4px; } .aa-method span { font-size: 14px; color: var(--aa-white); } .aa-method--yellow { border-color: var(--aa-dark-yellow); background: rgba(168, 130, 20, .05); } .aa-method--yellow b { color: var(--aa-yellow) } .aa-method--purple { border-color: var(--aa-purple-dark); background: rgba(83, 54, 161, .05); } .aa-method--purple b { color: var(--aa-purple-light); } .aa-method--green { border-color: var(--aa-dark-green); background: rgba(0, 136, 111, .05); } .aa-method--green b { color: var(--aa-green); } .aa-method--pink { border-color: var(--aa-dark-pink); background: rgba(153, 30, 56, .05); } .aa-method--pink b { color: var(--aa-pink); } /* --- Focus map mock (challenge 04) --- */ .aa-focusmap__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .aa-fstep { min-height: 34px; max-width: 164px; padding: 11px 20px; border-radius: 8px; border: 1px solid var(--aa-grey-2); font-size: 14px; color: var(--aa-grey); } .aa-fstep.is-bad { border-color: rgba(230, 45, 84, .5); color: #eb5776; } .aa-fmodal { padding: 22px 24px; border-radius: 10px; border: 1px solid var(--aa-grey-2); } .aa-fmodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .aa-fmodal__head b { color: var(--aa-white); font-size: 15px; } .aa-fmodal__x { color: var(--aa-grey-2); } .aa-fmodal__close { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--aa-purple-light); color: var(--aa-purple-light); font-size: 14px; } .aa-fmodal__fields { display: flex; flex-wrap: wrap; gap: 10px; } .aa-fmodal__fields span { padding: 11px 16px; border-radius: 8px; border: 1px solid var(--aa-line); font-size: 13px; color: var(--aa-grey); } .aa-fmodal__fields span:first-child { border-color: var(--aa-purple-light); color: var(--aa-purple-light); } .aa-focusmap__warn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; font-weight: 600; color: #eb5776; } .aa-taborder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; } .aa-taborder__label { font-size: 13px; color: var(--aa-grey-2); } .aa-tabpill { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #68dcc7; border: 1px solid rgba(0, 204, 166, .35); background: rgba(0, 204, 166, .05); } /* Challenge 04 focus-map mock: on mobile the panel is stacked (accordion), so centre the mock UI (nav buttons, modal fields, tab-order pills, warning) to match the design. Desktop (tab layout) keeps the left-aligned mock. */ @media (max-width: 900px) { .aa-focusmap { text-align: center; } /* Warning row: flush-left (not centred with the buttons/fields above), with the icon pinned to the first text line and the copy left-aligned and wrapping under itself - matching the design. `display:flex` makes it a block so the parent's text-align:center no longer centres it; align-items keeps the icon on line 1 and flex:0 0 auto stops the SVG being shrunk. */ .aa-focusmap__warn { display: flex; align-items: flex-start; text-align: left; } .aa-focusmap__warn svg { flex: 0 0 auto; margin-top: 2px; } /* Tab order: the "Tab order:" label on its own row, pills two-per-row, and the last pill (5. Pay) centered on its own row - matches the design. */ .aa-taborder { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; align-items: center; gap: 10px 14px; } .aa-taborder__label { grid-column: 1 / -1; } .aa-taborder .aa-tabpill:last-child { grid-column: 1 / -1; } /* Nav: Logo + Search share the first row; every later button (Cart, Footer) gets its own centered row - matches the design at any width, instead of pairing up on wider phones. */ .aa-focusmap__nav { display: grid; /* Content-sized columns centered as a group, so Logo + Search cluster with a small gap instead of being pushed to opposite edges (1fr halves did that). */ grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; align-items: center; gap: 10px 14px; } .aa-focusmap__nav .aa-fstep:nth-child(n+3) { grid-column: 1 / -1; } /* Modal fields: Card number on its own row, Expiry + CVV side by side below, each pair clustered centered (not spread to the edges). */ .aa-fmodal__fields { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; gap: 10px 14px; } .aa-fmodal__fields span:first-child { grid-column: 1 / -1; } .aa-fmodal.is-good .aa-fmodal__head { flex-direction: column; align-items: center; gap: 14px; } .aa-fmodal.is-good .aa-fmodal__close { width: 100%; max-width: 137px; justify-content: center; } } /* --- Jira mock (challenge 05) --- */ .aa-jira { border-radius: 10px; border: 1px solid var(--aa-line); padding: 0 18px 18px; overflow: hidden; } .aa-jira--before { border-color: rgba(230, 45, 84, .45); } .aa-jira--after { border-color: rgba(0, 204, 166, .4); } .aa-jira__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 -18px 18px; padding: 16px 18px; border-bottom: 1px solid var(--aa-line); } .aa-jira--before .aa-jira__head { border-bottom-color: rgba(230, 45, 84, .45); background: rgba(29, 17, 20, .5); } .aa-jira--after .aa-jira__head { border-bottom-color: rgba(0, 204, 166, .4); background: rgba(13, 26, 24, .5); } .aa-jira__head b { color: var(--aa-white); font-size: 14px; } .aa-jira--before .aa-jira__head b { color: var(--aa-light-pink); } .aa-jira--after .aa-jira__head b { color: var(--aa-light-green); } .aa-jira__pill { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; } .aa-jira__pill.is-bad { color: #eb5776; border: 1px solid rgba(230, 45, 84, .5); } .aa-jira__pill.is-good { color: #68dcc7; border: 1px solid rgba(0, 204, 166, .5); } .aa-jira__text { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--aa-grey); } .aa-jira__code { margin: 0 0 14px; padding: 14px 16px; border-radius: 8px; background: rgba(0, 0, 0, .4); border: 1px solid var(--aa-line); font-family: var(--aa-font-mono); font-size: 12px; line-height: 1.7; color: #eb5776; white-space: pre-wrap; overflow-x: auto; } .aa-jira__code .c { color: var(--aa-grey-2); } .aa-jira__code .g { color: var(--aa-yellow); } .aa-jira__flag { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 24px; border: 1px solid var(--aa-purple); color: var(--aa-purple); font-size: 10px; font-weight: 700; letter-spacing: .5px; } @media (max-width: 600px) { .aa-scan-split { grid-template-columns: 1fr; } .aa-methods__grid { grid-template-columns: 1fr; } /* Bar track goes fluid below the fixed 586px so it never overflows. */ .aa-bar-row { grid-template-columns: minmax(0, 1fr) auto; } } /* Screen-reader output */ .aa-sr { border-radius: 12px; overflow: hidden; border: 1px solid var(--aa-purple-light); background: var(--aa-surface); } .aa-sr__head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--aa-line); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--aa-purple-light); } .aa-sr__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aa-purple-light); box-shadow: 0 0 5px 1px rgba(125, 81, 241, .8), 0 0 2px rgba(203, 185, 249, .9); animation: aa-sr-pulse 1.8s ease-in-out infinite; } @keyframes aa-sr-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 5px 1px rgba(125, 81, 241, .8), 0 0 2px rgba(203, 185, 249, .9); } 50% { transform: scale(1.12); box-shadow: 0 0 8px 2px rgba(125, 81, 241, .9), 0 0 4px rgba(203, 185, 249, 1); } } @media (prefers-reduced-motion: reduce) { .aa-sr__dot { animation: none; } } .aa-sr__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; } .aa-sr__line { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--aa-white); font-weight: lighter; } .aa-sr__line strong { color: var(--aa-white); font-weight: 600; } .aa-sr__tag { flex: 0 0 auto; min-width: 42px; text-align: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid; } .aa-sr__tag--ok { color: #68dcc7; border-color: rgba(0, 204, 166, .5); } .aa-sr__tag--error { color: #eb5776; border-color: rgba(230, 45, 84, .5); } .aa-sr__tag--warn { color: var(--aa-yellow, #fcc31e); border-color: rgba(252, 195, 30, .5); } .aa-sr__tag--info { color: #5b9dff; border-color: rgba(91, 157, 255, .5); } @media (max-width: 900px) { /* minmax(0,1fr) (not 1fr) lets the single column shrink below the intrinsic min-content of the relocated panels; otherwise a wide child (e.g. the dashboard grid or a code block) blows the track past the viewport. */ .aa-chal__layout { grid-template-columns: minmax(0, 1fr); } /* Heading + lead centered on mobile (matches the design). */ .aa-chal__head { text-align: center; } .aa-chal__lead { justify-content: center; } /* Accordion: tabs are a full-width vertical list of bordered cards. The active tab's panel is relocated (via JS) to sit directly beneath it. min-width:0 lets this flex column shrink with the grid track. */ .aa-chal__tabs { flex-direction: column; gap: 12px; overflow: visible; padding-bottom: 0; min-width: 0; } .aa-chal__tab { position: relative; flex: none; min-width: 0; padding: 18px 52px 18px 20px; border-radius: 14px; border: 1px solid var(--aa-purple-border); background: transparent; transition: background-color .18s ease; } /* Collapsed tabs read muted; the open one is brighter with a subtle fill. */ .aa-chal__tab:not(.is-active) .aa-chal__tab-title { color: rgba(203, 185, 249, .6); } .aa-chal__tab:not(.is-active) .aa-chal__tab-num { color: rgba(203, 185, 249, .38); } .aa-chal__tab.is-active { padding-left: 20px; background: rgba(255, 255, 255, .05); } .aa-chal__tab.is-active::before { display: none; } /* Right indicator: down-right arrow when collapsed, ✕ when open. */ .aa-chal__tab::after { content: ""; position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBB9F9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l8 8M16 9v7h-7'/%3E%3C/svg%3E"); opacity: .55; } .aa-chal__tab.is-active::after { opacity: .9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F7FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } /* Panel becomes a content-height card sitting inline under its tab. The design stacks the panel as a single 16px-gap column: eyebrow, title, description, the before/after toggle, then the browser mock + screen-reader output. On desktop the toggle lives top-right inside the head; on mobile it drops below the description and spans the full width. `display: contents` dissolves the head so its children (eyebrow + toggle) join the panel's flex flow and can be reordered around the title/description that sit between them in the markup. */ .aa-chal__panel { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 25px; } .aa-chal__phead { display: contents; } .aa-chal__eyebrow { order: 1; } .aa-chal__ctitle { order: 2; margin: 0; } .aa-chal__desc { order: 3; margin: 0; } .aa-chal__phead .aa-chal__switch { order: 4; width: 100%; } .aa-chal__phead .aa-chal__switch button { flex: 1 1 0; justify-content: center; } .aa-chal__state { order: 5; } } @media (max-width: 520px) { .aa-chal { padding: var(--aa-section-y) 0; } } /* Mobile mock bodies (challenges 01/02/03/05): the desktop mocks are laid out left-to-right; on the stacked accordion the design centres them in a single 16px-gap column. Scoped per mock so each matches its Figma mobile frame. */ @media (max-width: 900px) { .aa-browser__body { padding: 16px; } /* --- Product mock (challenge 01) --- */ .aa-mock { flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; } /* The tile collapses from the desktop 100×78 box to a hug-width inline pill: glyph + alt text side by side (matches the Figma mobile frame). */ .aa-mock__img { width: auto; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 9px 17px; font-size: 22px; } .aa-mock__price { font-size: 18px; font-weight: 700; } /* Button + flag centre and cap their width so long labels wrap tidily (px 17 / py 9 matches the Figma mobile frame). */ .aa-mock__btn, .aa-mock__flag { max-width: 204px; padding: 9px 17px; text-align: center; } .aa-mock__flag { border-radius: 100px; } /* --- Dashboard mock (challenge 02) --- */ /* Before: the untested-pages grid must wrap instead of running off-screen (10 nowrap cells were forcing the whole panel wider than the viewport). */ .aa-dash__grid { flex-wrap: wrap; } /* After: score card and bars stack full-width; the score card centres its gradient number + labels. */ .aa-dash--after { flex-direction: column; align-items: stretch; gap: 16px; } .aa-dash__score { align-items: center; text-align: center; } .aa-bars { width: 100%; min-width: 0; flex-basis: auto; } } /* ===================================================================== Scan CTA band ===================================================================== */ .aa-scan { position: relative; overflow: hidden; padding: var(--aa-section-y) 0; text-align: center; background: #110D1A; } .aa-scan::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 50% 100%, #00886F 0%, #110D1A 100%); opacity: 0.3; } .aa-scan__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; } .aa-scan__title { margin: 0; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.01em; color: var(--aa-white); } .aa-scan__title-accent { color: var(--aa-green); } .aa-scan__text { margin: 18px auto 0; max-width: 620px; color: var(--aa-white); font-size: 18px; line-height: 1.6; } .aa-scan__cta { margin-top: 28px; } .aa-scan__note { margin: 22px 0 0; color: var(--aa-grey); font-size: 12px; } /* Green button variant — home-hero "Get" style: no glow, label glued left, the button stretches on hover while a gradient highlight fades in toward the arrow. */ .aa-btn--green { background: var(--aa-green); color: #06231d; justify-content: flex-start; position: relative; z-index: 0; overflow: hidden; transition: background-color .35s ease, opacity .25s ease, gap .4s cubic-bezier(.4, 0, .2, 1); } .aa-btn--green::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to right, rgba(69, 230, 186, 0) 35%, rgba(69, 230, 186, .95) 100%); opacity: 0; transition: opacity .5s ease .18s; } .aa-btn--green:hover { background: #15d9b3; gap: 24px; } .aa-btn--green:hover::after { opacity: 1; } .aa-btn--green:hover .aa-btn__arrow { transform: translateX(2px); } .aa-btn--green:focus-visible { outline: 2px solid var(--aa-green-light, #68dcc7); outline-offset: 2px; } @media (max-width: 520px) { .aa-scan { padding: var(--aa-section-y) 0; } } /* ===================================================================== Comparison ("What Automated Tools Miss / What Experts Find") ===================================================================== */ .aa-cmp-section { padding: var(--aa-section-y) 0; } .aa-cmp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; } .aa-cmp__title { margin: 0; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -.01em; } .aa-cmp__ghost { color: var(--aa-white); } .aa-cmp__accent-green { color: var(--aa-green); } .aa-cmp__accent-purple { color: var(--aa-purple); } .aa-cmp__text { margin: 16px 0 0; color: var(--aa-white); font-size: 18px; } .aa-cmp__cta { flex: 0 0 auto; margin-top: 6px; } .aa-cmp { border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid var(--aa-line); } .aa-cmp-group + .aa-cmp-group { border-top: 1px solid rgba(0, 0, 0, .3); } .aa-cmp-group__head { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 22px 26px; background: transparent; transition: background-color .18s ease; } .aa-cmp-group__head:hover { background: rgba(255, 255, 255, .02); } .aa-cmp-group__icon { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .aa-cmp-group__icon img { width: 44px; height: 44px; display: block; } .aa-cmp-group__titlewrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .aa-cmp-group__title { font-size: 18px; font-weight: 700; color: var(--aa-white); } .aa-cmp-group__desc { font-size: 14px; color: var(--aa-grey); } .aa-cmp-group__chev { flex: 0 0 auto; display: inline-flex; color: rgba(249, 247, 255, .55); } .aa-cmp-group__chev .close { display: none; } .aa-cmp-group.is-open { background: #0a0810; } .aa-cmp-group.is-open .aa-cmp-group__title { color: var(--aa-purple); } .aa-cmp-group.is-open .aa-cmp-group__chev .chev { display: none; } .aa-cmp-group.is-open .aa-cmp-group__chev .close { display: inline-flex; } .aa-cmp-group__body { display: none; } .aa-cmp-group.is-open .aa-cmp-group__body { display: block; } .aa-cmp-table { width: 100%; border-collapse: collapse; } /* Keep the table/cells transparent so the dark open-group background shows through (a global table/td background would otherwise paint over it grey). */ .aa-cmp-table, .aa-cmp-table thead, .aa-cmp-table tbody, .aa-cmp-table tfoot, .aa-cmp-table tr, .aa-cmp-table th, .aa-cmp-table td { background: transparent; } .aa-cmp-table th { text-align: left; padding: 14px 26px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--aa-purple-light); } .aa-cmp-table td { padding: 18px 26px; vertical-align: top; border-top: 1px solid var(--aa-line); font-size: 14px; line-height: 1.55; color: var(--aa-grey); } .aa-cmp-table td.check { color: var(--aa-white); font-weight: 600; } .aa-cmp-table .col-mid { width: 130px; text-align: center; } .aa-mark { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; } .aa-mark svg { display: block; width: 16px; height: 16px; } .aa-cmp-table tfoot td { border-top: 1px solid var(--aa-line); } .aa-score { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; } .aa-score__ico { display: block; flex: none; } .aa-score__sep { opacity: .55; } /* Auto-scan pill colour reflects coverage: none (red), partial (yellow), full (green). */ .aa-score--auto.is-none { background: rgba(29, 17, 20, .5); border-color: #991E38; color: #E62D54; } .aa-score--auto.is-partial { background: rgba(32, 28, 17, .5); border-color: #A88214; color: #FCC31E; } .aa-score--auto.is-full { background: rgba(13, 26, 24, .5); border-color: #00886F; color: #00CCA6; } .aa-score--full { background: rgba(13, 26, 24, .5); border-color: #00886F; color: #00CCA6; } @media (max-width: 720px) { /* Head centered; CTA spans the width. */ .aa-cmp__head { justify-content: center; text-align: center; } .aa-cmp__cta { width: 100%; justify-content: center; } /* Groups become separate centered cards, not one connected list. */ .aa-cmp { display: flex; flex-direction: column; gap: 14px; border: 0; border-radius: 0; background: transparent; overflow: visible; } .aa-cmp-group { border-radius: 16px; border: 1px solid var(--aa-line); background: rgba(255, 255, 255, .05); overflow: hidden; } .aa-cmp-group + .aa-cmp-group { border-top: 1px solid var(--aa-line); } /* Head stacks: icon on top, then title + description + indicator, centered. */ .aa-cmp-group__head { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 20px; } .aa-cmp-group__titlewrap { flex: none; align-items: center; text-align: center; } .aa-cmp-group__chev .chev { transform: rotate(90deg); } /* point the arrow down-right */ /* Comparison table -> stacked label / value rows (Check, Auto Scan, Full Audit, Note) instead of cramped columns. */ .aa-cmp-table, .aa-cmp-table tbody, .aa-cmp-table tfoot, .aa-cmp-table tr, .aa-cmp-table td { display: block; } .aa-cmp-table thead { display: none; } .aa-cmp-table tbody tr { padding: 12px 0; } .aa-cmp-table tbody tr + tr, .aa-cmp-table tfoot { border-top: 1px solid var(--aa-line); } .aa-cmp-table tfoot { padding-top: 12px; } .aa-cmp-table td { display: grid; /* Label in a fixed left column; value centered in the remaining space (per the design: check text, icons, notes and score badges are all centre-aligned). */ grid-template-columns: 96px 1fr; align-items: center; gap: 4px 14px; padding: 8px 20px; border-top: 0; text-align: center; } .aa-cmp-table td:empty { display: none; } /* tfoot spacer cells */ .aa-cmp-table .col-mid { width: auto; text-align: center; } .aa-cmp-table .aa-mark, .aa-cmp-table .aa-score { justify-self: center; } /* Per-cell labels (thead is hidden; row cell order is fixed). */ .aa-cmp-table td::before { justify-self: start; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(203, 185, 249, .55); } .aa-cmp-table td:nth-child(1)::before { content: "Check"; } .aa-cmp-table td:nth-child(2)::before { content: "Auto Scan"; } .aa-cmp-table td:nth-child(3)::before { content: "Full Audit"; } .aa-cmp-table td:nth-child(4)::before { content: "Note"; } } /* ===================================================================== Process ("How It Works") ===================================================================== */ .aa-proc { padding: var(--aa-section-y) 0; background: var(--aa-bg-1); } .aa-proc__head { margin-bottom: 44px; } .aa-proc__title { margin: 0; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -.01em; color: var(--aa-white); } .aa-proc__title-accent { color: var(--aa-purple); } .aa-proc__text { margin: 16px 0 0; max-width: 760px; color: var(--aa-white); font-size: 18px; line-height: 1.6; } .aa-proc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .aa-step { position: relative; padding: 26px 24px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--aa-line); } .aa-step--purple { border-color: rgba(125, 81, 241, .3); } .aa-step--green { border-color: rgba(0, 204, 166, .3); background: rgba(13, 26, 24, .5);} /* Connector line between cards. */ .aa-step:not(:last-child)::after { content: ""; position: absolute; top: 48px; left: 100%; width: 16px; height: 1px; background: var(--aa-line); } .aa-step__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .aa-step__num { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 18px; font-weight: 700; color: #fff; } .aa-step--purple .aa-step__num { background: var(--aa-purple-dark); color: rgba(203, 185, 249, .5);} .aa-step--green .aa-step__num { background: var(--aa-dark-green); color: rgba(104, 220, 199, .9); } .aa-step__title { margin: 0; font-size: 18px; font-weight: 600; } .aa-step--purple .aa-step__title { color: var(--aa-purple-light); } .aa-step--green .aa-step__title { color: #68dcc7; } .aa-step__text { margin: 0; color: var(--aa-white); font-size: 14px; line-height: 1.6; } @media (max-width: 900px) { .aa-proc__grid { grid-template-columns: repeat(2, 1fr); } .aa-step:not(:last-child)::after { display: none; } /* Heading + intro centered on mobile. */ .aa-proc__head { text-align: center; } .aa-proc__text { margin-inline: auto; } } @media (max-width: 520px) { .aa-proc { padding: var(--aa-section-y) 0; } .aa-proc__grid { grid-template-columns: 1fr; } /* Vertical connector between the stacked cards, aligned under the number badge (card padding-left 24px + half of the 44px badge = 46px). */ .aa-step:not(:last-child)::after { display: block; top: 100%; left: 46px; width: 1px; height: 16px; /* spans the grid gap */ background: var(--aa-line); } } /* ===================================================================== Deliverable ("What You Get in the Full Audit") ===================================================================== */ .aa-deliv { padding: var(--aa-section-y) 0; } .aa-deliv__card { position: relative; display: grid; grid-template-columns: 1fr 1fr; } /* Split border drawn by two overlays anchored to the SAME card box (top:0; bottom:0), so the green (left) and purple (right) edges are guaranteed to line up exactly at top and bottom — no sub-pixel seam. The shared middle edge is left open. */ .aa-deliv__card::before, .aa-deliv__card::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; } .aa-deliv__card::before { left: 0; right: 50%; border: 1px solid var(--aa-dark-green); border-right: 0; border-radius: 22px 0 0 22px; } .aa-deliv__card::after { left: 50%; right: 0; border: 1px solid var(--aa-purple-dark); border-left: 0; border-radius: 0 22px 22px 0; } .aa-deliv__left { padding: 48px; background: linear-gradient(155deg, #0D2020 0%, #102A25 50%, #151520 100%); border-radius: 22px 0 0 22px; } .aa-deliv__right { padding: 48px; background: linear-gradient(155deg, #1A1630 0%, #2A1F50 50%, #1C2A40 100%); border-radius: 0 22px 22px 0; } .aa-deliv__title { margin: 0 0 28px; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.01em; color: var(--aa-white); } .aa-deliv__accent { color: var(--aa-green); } .aa-deliv__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .aa-deliv__item { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 12px; border: 1px solid rgba(0, 204, 166, .4); background: transparent; } .aa-deliv__item-num { flex: 0 0 auto; font-size: 24px; font-weight: 700; color: var(--aa-green); } .aa-deliv__item-text { color: rgba(249, 247, 255, .9); font-size: 14px; font-weight: lighter; } /* Form */ .aa-deliv__field { margin-bottom: 18px; } .aa-deliv__field label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--aa-purple-light); } .aa-deliv__form input { width: 100%; padding: 15px 16px; border-radius: 10px; border: 1px solid var(--aa-line); background: rgba(0, 0, 0, .28); color: var(--aa-white); -webkit-text-fill-color: var(--aa-white) !important; font-family: var(--aa-font-body); font-size: 15px; } .aa-deliv__form input::placeholder { color: var(--aa-grey-2); -webkit-text-fill-color: var(--aa-grey-2) !important; } .aa-deliv__form input:focus { outline: none; border-color: var(--aa-purple); } .aa-deliv__submit { width: 100%; margin-top: 6px; padding: 16px; } /* Coverage meter */ .aa-deliv__coverage { margin-top: 26px; padding: 24px; border-radius: 16px; background: rgba(0, 0, 0, .28); border: 1px solid var(--aa-line); } .aa-cov__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .aa-cov__title { font-size: 20px; font-weight: 700; color: var(--aa-white); } .aa-cov__value { font-size: 24px; font-weight: 700; color: var(--aa-white); } .aa-cov__row + .aa-cov__row { margin-top: 16px; } .aa-cov__rowhead { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--aa-grey); } .aa-cov__pct { font-weight: 700; color: var(--aa-white); } .aa-cov__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; } .aa-cov__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--aa-purple), #b9a4ff); transition: width 1.1s cubic-bezier(.22, .61, .36, 1); } @media (max-width: 860px) { /* minmax(0, 1fr) not plain 1fr: 1fr's implicit `auto` minimum lets the track grow to the column's intrinsic min-content, so on narrow phones the form column can push the track wider than the viewport and scroll the whole page sideways. Clamping the minimum to 0 keeps the single column locked to the container width. */ .aa-deliv__card { grid-template-columns: minmax(0, 1fr); } .aa-deliv__left, .aa-deliv__right { padding: 32px; } /* Stacked: overlays don't apply (halves have unequal heights); use per-half borders with the seam opened where they meet horizontally. */ .aa-deliv__card::before, .aa-deliv__card::after { display: none; } .aa-deliv__left { border: 1px solid var(--aa-dark-green); border-bottom: 0; border-radius: 22px 22px 0 0; } .aa-deliv__right { border: 1px solid var(--aa-purple-dark); border-top: 0; border-radius: 0 0 22px 22px; } } @media (max-width: 520px) { .aa-deliv { padding: var(--aa-section-y) 0; } } /* ===================================================================== Results ("Your Business Will Feel Real Results") ===================================================================== */ .aa-res { padding: var(--aa-section-y) 0; background: var(--aa-bg-1); } .aa-res__head { margin-bottom: 36px; } .aa-res__title { margin: 0 0 14px; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -.01em; color: var(--aa-white); } .aa-res__title-accent { color: var(--aa-purple); } .aa-res__label { display: block; font-size: 18px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--aa-white); } .aa-res__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; } .aa-res__wide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .aa-res-card { text-align: center; padding: 32px 28px; border-radius: 16px; border: 1px solid var(--aa-line); background: rgba(255, 255, 255, .03); } .aa-res-card__value { margin-bottom: 12px; font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1; } .aa-res-card__text { margin: 0; color: var(--aa-white); font-size: 14px; line-height: 1.5; } .aa-res-card--purple { border-color: rgba(125, 81, 241, .3); background: var(--aa-surface); } .aa-res-card--purple .aa-res-card__value { color: #9b7bf5; } .aa-res-card--green { border-color: rgba(0, 204, 166, .4); background: rgba(0, 204, 166, .06); } .aa-res-card--green .aa-res-card__value { color: #68dcc7; } .aa-res-card--pink { border-color: rgba(230, 45, 84, .4); background: rgba(230, 45, 84, .06); } .aa-res-card--pink .aa-res-card__value { color: #eb5776; } @media (max-width: 860px) { .aa-res__grid { grid-template-columns: 1fr; } .aa-res__wide { grid-template-columns: 1fr; } } @media (max-width: 520px) { .aa-res { padding: var(--aa-section-y) 0; } } /* ===================================================================== FAQ ===================================================================== */ .aa-faq { padding: var(--aa-section-y) 0; } .aa-faq__container { max-width: 1000px; } .aa-faq__head { text-align: center; margin-bottom: 40px; } .aa-faq__title { margin: 0; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(30px, 4vw, 48px); color: var(--aa-white); } .aa-faq__text { margin: 14px 0 0; color: var(--aa-grey); font-size: 16px; } .aa-faq__item { padding: 0 28px; border-bottom: 1px solid var(--aa-line); } .aa-faq__item.is-open { background: rgba(255, 255, 255, .05); border-radius: 14px; border-bottom-color: transparent; } .aa-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; padding: 26px 0; font-size: 20px; font-weight: 700; color: rgba(249, 247, 255, .55); transition: color .18s ease; } .aa-faq__q:hover { color: var(--aa-white); } .aa-faq__item.is-open .aa-faq__q { color: #68dcc7; padding-bottom: 14px; } .aa-faq__icon { flex: 0 0 auto; display: inline-flex; color: rgba(249, 247, 255, .5); } .aa-faq__icon .close { display: none; } .aa-faq__item.is-open .aa-faq__icon { color: #68dcc7; } .aa-faq__item.is-open .aa-faq__icon .chev { display: none; } .aa-faq__item.is-open .aa-faq__icon .close { display: inline-flex; } .aa-faq__a { display: none; padding-bottom: 28px; color: var(--aa-white); font-size: 14px; line-height: 1.65; } .aa-faq__item.is-open .aa-faq__a { display: block; } .aa-faq__a p { margin: 0 0 12px; } .aa-faq__a p:last-child { margin-bottom: 0; } .aa-faq__a strong { color: var(--aa-white); font-weight: 700; } .aa-faq__a ul { list-style: none; margin: 0 0 14px; padding: 0; } .aa-faq__a li { position: relative; padding-left: 18px; margin-bottom: 2px; } .aa-faq__a li::before { content: "\2022"; position: absolute; left: 2px; color: var(--aa-white); } /* Highlighted callout box inside an answer (e.g. the EAA microenterprise note). */ .aa-faq__box { margin: 16px 0; padding: 16px 18px; border-radius: 12px; background: rgba(13, 26, 24, .9); border: 1px solid var(--aa-dark-green); } .aa-faq__box p { margin: 0 0 8px; } .aa-faq__box p:last-child { margin-bottom: 0; } .aa-faq__box strong { color: var(--aa-green); } @media (max-width: 600px) { .aa-faq { padding: var(--aa-section-y) 0; } .aa-faq__item { padding: 0 18px; } .aa-faq__q { font-size: 17px; padding: 20px 0; } } /* ===================================================================== Request form ===================================================================== */ .aa-req { position: relative; overflow: hidden; padding: var(--aa-section-y) 0; background: #110D1A; } .aa-req::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* Figma: radial fill #5336A1 at 35% opacity over the #110D1A base. */ background: radial-gradient(60% 80% at 50% 118%, rgba(83, 54, 161, .35), transparent 72%); } .aa-req__container { position: relative; z-index: 1; max-width: 1040px; } .aa-req__card { padding: 48px 56px; border-radius: 24px; border: 1px solid rgba(125, 81, 241, .4); /* Figma linear fill, top-left → bottom-right, both stops at 50% opacity. */ background: linear-gradient(135deg, rgba(21, 17, 30, .5) 0%, rgba(83, 54, 161, .5) 100%); } .aa-req__title { margin: 0; font-family: var(--aa-font-body); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); color: var(--aa-white); } .aa-req__text { margin: 12px 0 0; color: var(--aa-grey); font-size: 16px; } .aa-req__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; } .aa-req__field--full { grid-column: 1 / -1; } .aa-req__field label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--aa-purple-light); } .aa-req__req { color: var(--aa-purple); } .aa-req__form input, .aa-req__form textarea { width: 100%; padding: 15px 16px; border-radius: 10px; border: 1px solid var(--aa-line); background: rgba(0, 0, 0, .28); color: var(--aa-white); /* !important so it beats Chrome's UA autofill/preview text-fill (also !important): keeps typed, autofilled AND previewed text light in every state. */ -webkit-text-fill-color: var(--aa-white) !important; font-family: var(--aa-font-body); font-size: 15px; } .aa-req__form textarea { min-height: 120px; resize: vertical; } .aa-req__form input::placeholder, .aa-req__form textarea::placeholder { color: var(--aa-grey-2); -webkit-text-fill-color: var(--aa-grey-2) !important; } .aa-req__form input:focus, .aa-req__form textarea:focus { outline: none; border-color: var(--aa-purple); } /* Keep browser autofill on-theme (it otherwise forces a white/yellow bg). The inset box-shadow masks the forced background; text-fill-color keeps text light. */ .aa-req__form input:-webkit-autofill, .aa-req__form input:-webkit-autofill:hover, .aa-req__form input:-webkit-autofill:focus, .aa-req__form textarea:-webkit-autofill, .aa-deliv__form input:-webkit-autofill, .aa-deliv__form input:-webkit-autofill:hover, .aa-deliv__form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--aa-white); -webkit-box-shadow: 0 0 0 1000px #17122c inset; box-shadow: 0 0 0 1000px #17122c inset; caret-color: var(--aa-white); transition: background-color 9999s ease-in-out 0s; } /* Chrome autofill PREVIEW (shown while hovering a suggestion in the dropdown) uses internal pseudo-classes distinct from :-webkit-autofill. Kept in SEPARATE rules so an unrecognized pseudo in one Chrome version can't invalidate the other. Non-Chrome browsers ignore these unknown pseudo-classes. */ .aa-req__form input:-internal-autofill-previewed, .aa-deliv__form input:-internal-autofill-previewed { -webkit-text-fill-color: var(--aa-white) !important; box-shadow: 0 0 0 1000px #17122c inset !important; } .aa-req__form input:-internal-autofill-selected, .aa-deliv__form input:-internal-autofill-selected { -webkit-text-fill-color: var(--aa-white) !important; box-shadow: 0 0 0 1000px #17122c inset !important; } /* Standard + active autofill states (cross-browser catch-all). */ .aa-req__form input:autofill, .aa-req__form textarea:autofill, .aa-deliv__form input:autofill { -webkit-text-fill-color: var(--aa-white) !important; box-shadow: 0 0 0 1000px #17122c inset !important; } .aa-req__consent, .aa-deliv__consent { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0; color: var(--aa-grey); font-size: 13px; line-height: 1.5; } .aa-req__consent input, .aa-deliv__consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--aa-purple); } .aa-req__submit { width: 100%; padding: 18px; font-size: 16px; } .aa-req__turnstile, .aa-deliv__turnstile { margin: 4px 0 16px; } .aa-req__submit:disabled, .aa-deliv__submit:disabled { opacity: .6; cursor: not-allowed; } /* Shared submit status message (audit + sample-report forms). */ .aa-req__status, .aa-deliv__status { margin: 16px 0 0; font-size: 14px; line-height: 1.5; outline: none; } .aa-req__status.is-success, .aa-deliv__status.is-success { color: var(--aa-green); } .aa-req__status.is-error, .aa-deliv__status.is-error { color: #eb5776; } @media (max-width: 720px) { .aa-req { padding: var(--aa-section-y) 0; } .aa-req__card { padding: 32px 22px; } .aa-req__grid { grid-template-columns: 1fr; } /* Cloudflare Turnstile ("flexible" size) has a 300px minimum width. When the card is narrower than that (small phones), the widget rendered wider than its box and spilled past the right edge. max(300px,100%) keeps it filling the card when there's room (tablets) but pins it to a centred 300px when the card is narrower, so it no longer overflows. Centring works even when the 300px exceeds the container (auto margins alone can't centre an overflow). */ .aa-req__turnstile { width: max(300px, 100%); margin-inline: auto; position: relative; left: 50%; transform: translateX(-50%); } } /* ===================================================================== Scroll reveal (added via JS; class only applied when JS + IO run, so a no-JS visit shows everything normally). Stagger via the --aa-rd delay. ===================================================================== */ .aa-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--aa-rd, 0s); will-change: opacity, transform; } .aa-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .aa-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===================================================================== Footer ===================================================================== */ .aa-footer { border-top: 1px solid var(--aa-line); background: var(--aa-bg-2); } .aa-footer__inner { display: grid; /* Content-sized columns centred as a group (not 1fr/auto spread edge-to-edge), so the copyright and links sit close together instead of leaving a large void - and the links no longer reach the bottom-right corner, where the fixed chat launcher covered the last one at laptop/tablet widths (~900-1600px). */ grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 16px 40px; padding-block: 26px; } .aa-footer__copy { justify-self: start; color: var(--aa-grey-2); font-size: 14px; } /* Floating back-to-top — relocated out of the footer (matches the homepage): fixed bottom-right above the HubSpot chat, hidden until scrolled (aa-page.js toggles .is-visible and anchors it to the chat launcher). */ .aa-totop { position: fixed; /* Gap kept above the chat/cookie widget the JS anchors to (aa-page.js reads it). `bottom` is the fallback when no chat/cookie is present; JS overrides it. */ --float-gap: 40px; /* Horizontal distance from the chat launcher container's RIGHT edge to the visible launcher button's centre (the button sits bottom-right, not centred). The JS aligns the arrow's centre to this. Increase to move the arrow left, decrease to move it right. */ --chat-btn-offset: 34px; right: 24px; bottom: 92px; /* clears the chat widget in the bottom-right corner */ z-index: 95; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--aa-line); background: #08060D; color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s, background .2s ease, bottom .35s cubic-bezier(.4, 0, .2, 1); } .aa-totop:hover { background: #15111f; border-color: #fff; } .aa-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s, background .2s ease, bottom .35s cubic-bezier(.4, 0, .2, 1); } .aa-footer__links { justify-self: end; display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; } .aa-footer__links a { color: var(--aa-grey); font-size: 14px; transition: color .18s ease; } .aa-footer__links a:hover { color: var(--aa-white); } @media (max-width: 720px) { /* Single centred column (per design): copyright + each footer link stacked and centred. Keeps every link at the horizontal centre, clear of the fixed bottom-corner widgets (cookie-settings gear at bottom-left, HubSpot chat at bottom-right) that otherwise cover the ends of a horizontal link row. */ .aa-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .aa-footer__copy { justify-self: center; } .aa-footer__links { justify-self: center; justify-content: center; flex-direction: column; gap: 14px; } } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .aa-page, .aa-header, .aa-btn, .aa-header__link::after, .aa-header__nav { transition: none; scroll-behavior: auto; } .aa-hero__mouse i, .aa-hero__chev, .aa-marquee__track, .aa-anim-in, .aa-sr.is-anim .aa-sr__line, .aa-chal__tab.is-active::before { animation: none; } .aa-bar i { transition: none; } }