/* ── Homepage: neutralize the surrounding layout chrome ─────────── The layout wraps every public route in a Bootstrap `.container py-4` with a 9/12 + 3/12 grid (main + sidebar) and appends a `#content-box` that repeats the pageTrans title/description. For the premium landing page we want a full-bleed canvas, so we hide the extras and break the main column out to full viewport width. We target either `body:has(.aits-home)` (modern browsers) or the `aits-home-page` class dropped on by the fallback script below — Safari <15.4 and Firefox <121 don't support :has(). */ body:has(.aits-home) #content-box, body.aits-home-page #content-box, body:has(.aits-home) .sidebars, body.aits-home-page .sidebars, body:has(.aits-home) .page-wrapper .breadcrumb, body.aits-home-page .page-wrapper .breadcrumb, body:has(.aits-home) .page-wrapper > .page-content > #parallax, body.aits-home-page .page-wrapper > .page-content > #parallax { display: none !important; } body:has(.aits-home) .page-wrapper > .page-content > .container, body.aits-home-page .page-wrapper > .page-content > .container { max-width: 100% !important; padding: 0 !important; } body:has(.aits-home) .page-wrapper > .page-content > .container > .row, body.aits-home-page .page-wrapper > .page-content > .container > .row { margin: 0 !important; } body:has(.aits-home) .page-wrapper > .page-content > .container > .row > div, body.aits-home-page .page-wrapper > .page-content > .container > .row > div { flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; } body:has(.aits-home) .page-home, body.aits-home-page .page-home { margin: 0 !important; padding: 0 !important; } /* ── Dark-mode surface, wrapper-level ─────────────────────────── Force every wrapper on the home page to the same dark card surface the home page uses so the whole column reads as one continuous canvas from navbar edge to footer edge. */ body.theme-dark:has(.aits-home), body.theme-dark:has(.aits-home) .page-wrapper, body.theme-dark:has(.aits-home) .page-wrapper > .page-content, body.theme-dark:has(.aits-home) .page-wrapper > .page-content > .container, body.theme-dark:has(.aits-home) .page-wrapper > .page-content > .container > .row, body.theme-dark:has(.aits-home) .page-wrapper > .page-content > .container > .row > div, body.theme-dark.aits-home-page, body.theme-dark.aits-home-page .page-wrapper, body.theme-dark.aits-home-page .page-wrapper > .page-content, body.theme-dark.aits-home-page .page-wrapper > .page-content > .container, body.theme-dark.aits-home-page .page-wrapper > .page-content > .container > .row, body.theme-dark.aits-home-page .page-wrapper > .page-content > .container > .row > div { background: var(--aits-bg) !important; } /* ── Root scope ───────────────────────────────────────────────── Every design token used here (colors, radii, shadows, motion) is declared once in custom.ltr.css on `body:not(.admin-shell)`. This block never redeclares tokens — it only consumes them. */ .aits-home { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--aits-ink); background: var(--aits-card); line-height: 1.6; } .aits-home *, .aits-home *::before, .aits-home *::after { box-sizing: border-box; } .aits-home a { text-decoration: none; color: inherit; } .aits-home a:hover { text-decoration: none; } .aits-home img { max-width: 100%; height: auto; display: block; } /* Dark: keep container transparent so section gradients bleed edge-to-edge */ body.theme-dark .aits-home { background: var(--aits-bg); } body.theme-dark .aits-home .aits-container { background: transparent; } /* ── Container — 1240 px per design.md §4 ───────────────────────── ⚠️ This padding is the INNER inset of each `section.aits-*` (hero, directory, trust), not a page gutter — every .aits-container is a child of one of those sections. It is also a `.container > .row > .col-lg-9` sidebar page, so it is not meant to align with the header brand. Stripped on 2026-08-11 during a sitewide alignment pass and restored the same day; don't remove it again. */ .aits-container { width: 100%; max-width: 1240px; margin-inline: auto; padding: 0 24px; } /* ── Buttons ──────────────────────────────────────────────────── */ .aits-home .aits-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: var(--r-md, 12px); font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1.2; letter-spacing: -0.005em; cursor: pointer; text-decoration: none !important; text-shadow: none !important; box-shadow: none; transition: background-color var(--t, .18s) ease, color var(--t, .18s) ease, transform var(--t-fast, .12s) ease, box-shadow var(--t, .18s) ease; -webkit-appearance: none; appearance: none; white-space: nowrap; } .aits-home .aits-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .aits-home .aits-btn:hover { transform: translateY(-1px); text-decoration: none !important; } .aits-home .aits-btn:active { transform: translateY(0); } .aits-home .aits-btn:focus-visible { outline: 3px solid var(--aits-focus); outline-offset: 2px; } /* Primary — solid brand blue */ .aits-home .aits-btn-primary { background: var(--aits-blue); color: #fff !important; box-shadow: var(--sh-brand); } .aits-home .aits-btn-primary:hover { background: var(--aits-blue-dark); color: #fff !important; box-shadow: 0 12px 24px rgba(54, 128, 237, 0.32); } /* Gradient CTA — the big pillar buttons */ .aits-home .aits-btn-gradient { background: linear-gradient(135deg, var(--aits-blue) 0%, var(--aits-blue-dark) 100%); color: #fff !important; padding: 16px 32px; font-size: 15.5px; border-radius: var(--r-lg, 14px); box-shadow: 0 10px 26px rgba(54, 128, 237, 0.32), inset 0 1px 0 rgba(255,255,255,0.18); } .aits-home .aits-btn-gradient:hover { color: #fff !important; box-shadow: 0 18px 38px rgba(54, 128, 237, 0.42), inset 0 1px 0 rgba(255,255,255,0.22); } /* Soft (tinted) — secondary CTAs on light backgrounds */ .aits-home .aits-btn-soft { background: var(--aits-blue-tint); color: var(--aits-blue-dark) !important; } .aits-home .aits-btn-soft:hover { background: var(--aits-blue); color: #fff !important; } /* Ghost — outline style */ .aits-home .aits-btn-ghost { background: var(--aits-card); color: var(--aits-blue-dark) !important; border: 1px solid var(--aits-line-strong); } .aits-home .aits-btn-ghost:hover { border-color: var(--aits-blue); background: var(--aits-blue-tint); color: var(--aits-blue-dark) !important; } /* ═════════════════════════════════════════════════════════════════ SECTION 1 — HERO (design.md §5.2) ═════════════════════════════════════════════════════════════════ */ .aits-hero { position: relative; padding: 72px 0 40px; overflow: hidden; background: radial-gradient(circle at 15% 20%, rgba(54, 128, 237, 0.06), transparent 45%), radial-gradient(circle at 85% 80%, rgba(54, 128, 237, 0.05), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f4f8fe 100%); } .aits-hero::before, .aits-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: 0.5; } .aits-hero::before { top: -80px; left: -80px; width: 320px; height: 320px; background: #CFE0FA; } .aits-hero::after { bottom: -100px; right: -80px; width: 380px; height: 380px; background: #EAF2FD; } .aits-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; } /* A grid item's automatic minimum size is its MIN-CONTENT, not zero, so a single non-wrapping descendant sets a floor for the whole column. The popular-searches rail is exactly that: a row of `white-space: nowrap` chips. Without this the 1fr track resolved to the rail's full 620px inside a 328px container on a phone, and `.aits-hero { overflow: hidden }` quietly clipped the difference — taking the Search button off-screen with it. The overflow never showed up as a scrollbar, which is what made it easy to miss. */ .aits-hero-left { min-width: 0; } /* The surface is `--aits-card`, NOT a hard-coded #FFFFFF. The previous gradient started at literal white, and since this rule had no dark twin the pill kept a white top half at night with `--aits-blue-dark` text on it — which is why the badge label read as missing in dark mode. Token in, dark twin below, and it can't happen again. */ .aits-hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px 8px 14px; border-radius: 999px; background: linear-gradient(180deg, var(--aits-card) 0%, var(--aits-blue-tint) 100%); border: 1px solid rgba(54,128,237,.22); color: var(--aits-blue-dark); font-size: 13px; font-weight: 700; letter-spacing: .01em; margin-bottom: 24px; box-shadow: 0 4px 14px rgba(54,128,237,.14), inset 0 1px 0 rgba(255,255,255,.9); transition: transform var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease; } .aits-hero-badge:hover { transform: translateY(-1px); border-color: rgba(54,128,237,.42); box-shadow: 0 8px 20px rgba(54,128,237,.22), inset 0 1px 0 rgba(255,255,255,.9); } /* The four-point sparkle is the AIToolsay mark and is brand blue, not the amber star this carried before — the homepage hero opens on the same mark, so the two pages now read as one product. */ .aits-hero-badge svg { width: 15px; height: 15px; color: var(--aits-blue); animation: aits-badge-twinkle 3.2s ease-in-out infinite; } @keyframes aits-badge-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } } @media (prefers-reduced-motion: reduce) { .aits-hero-badge svg { animation: none; } } /* Mobile brand strip removed — the navbar logo is the only brand mark on <720px, so the hero opens straight on the badge + headline. */ .aits-hero-title { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 20px; color: var(--aits-ink); } .aits-hero-title .aits-accent { display: block; color: var(--aits-blue); } .aits-hero-sub { font-size: 1.05rem; color: var(--aits-mut); margin: 0 0 28px; max-width: 560px; } .aits-hero-sub strong { color: var(--aits-ink); font-weight: 600; } /* Premium search bar */ .aits-search-form { display: flex; align-items: center; background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%); border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -8px rgba(54,128,237,.12), inset 0 1px 0 rgba(255,255,255,1); padding: 6px 6px 6px 20px; max-width: 620px; margin-bottom: 20px; border: 1.5px solid var(--aits-line-strong); transition: box-shadow var(--t, .2s) ease, border-color var(--t, .2s) ease, transform var(--t-fast, .15s) ease; } .aits-search-form:hover { border-color: rgba(54, 128, 237, 0.30); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 36px -8px rgba(54,128,237,.20), inset 0 1px 0 rgba(255,255,255,1); } .aits-search-form:focus-within { border-color: var(--aits-blue); box-shadow: 0 0 0 4px rgba(54,128,237,.14), 0 20px 44px -10px rgba(54,128,237,.28), inset 0 1px 0 rgba(255,255,255,1); } .aits-search-form .aits-search-ico { flex-shrink: 0; width: 22px; height: 22px; color: var(--aits-mut); transition: color var(--t-fast, .15s) ease, transform var(--t-fast, .15s) ease; } .aits-search-form:focus-within .aits-search-ico { color: var(--aits-blue); transform: scale(1.08); } .aits-search-form input { flex: 1; border: 0; outline: 0; background: transparent; padding: 16px 12px; font-size: 15px; color: var(--aits-ink); font-family: inherit; font-weight: 600; letter-spacing: -.005em; min-width: 0; } .aits-search-form input::placeholder { color: var(--aits-faint); font-weight: 500; } /* The signature 135° blue→blue-dark gradient, the same fill the homepage hero's Search button carries. A flat `--aits-blue` that swapped to `--aits-blue-dark` on hover was the off-brand button: the site's primary action is a gradient everywhere else, and swapping the whole fill on hover reads as a state change rather than as a lift. Sliding the gradient keeps the identity and still answers the pointer. */ .aits-btn-search { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; background: linear-gradient(135deg, var(--aits-blue) 0%, var(--aits-blue-dark) 100%); background-size: 170% 170%; background-position: 0% 50%; color: #fff; border: 0; border-radius: 12px; font-weight: 700; font-size: 15px; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px rgba(54,128,237,.32), inset 0 1px 0 rgba(255,255,255,.24); transition: background-position var(--t, .35s) ease, transform var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease; } .aits-btn-search:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(54,128,237,.42), inset 0 1px 0 rgba(255,255,255,.28); } .aits-btn-search:active { transform: translateY(0) scale(.975); } .aits-btn-search svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--t-fast, .15s) ease; } .aits-btn-search:hover svg { transform: scale(1.10); } /* The sparkle leading the label, matching the homepage hero's button. */ .aits-btn-search .aits-btn-spark { width: 16px; height: 16px; } .aits-btn-search:hover .aits-btn-spark { animation: aits-badge-twinkle 1.4s ease-in-out infinite; transform: none; } /* The magnifier is the narrow-screen stand-in for the word, so it stays out of the way until the label is dropped at 560px. Declared here rather than only in the breakpoint so the button never renders both glyphs at once. */ .aits-btn-search .aits-btn-search-ico { display: none; } /* The label sits ABOVE the rail rather than beside it. This hero's copy column is ~610px, and an inline label ate a third of it — enough that only two and a half chips survived, which reads as broken rather than as scrollable. Stacked, the rail gets the whole column. */ .aits-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 620px; } .aits-popular-label { flex: 0 0 100%; font-size: 12.5px; font-weight: 700; color: var(--aits-mut); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 2px; } .aits-popular-rail { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; padding: 3px 2px; overflow-x: auto; /* NO `scroll-behavior: smooth` here. It applies to direct `scrollLeft` assignment as well as to scrollTo(), which means the arrow's instant fallback would animate too — and when the animation is the thing being suppressed, the fallback stalls exactly like the call it was meant to rescue. Smoothness is asked for per-call in the handler instead. */ scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; } .aits-popular-rail::-webkit-scrollbar { display: none; } /* Painted only once the script measures a genuine overflow — an arrow that scrolls nothing is a dead control. Driven by an attribute rather than `:has()`, which Safari below 15.4 and Firefox below 121 lack; there they would lose the arrow outright instead of degrading. */ .aits-popular-next { display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; background: var(--aits-card); border: 1px solid var(--aits-line-strong); border-radius: 50%; color: var(--aits-ink); cursor: pointer; transition: background var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease, color var(--t-fast, .15s) ease, transform var(--t-fast, .15s) ease; } .aits-popular[data-scrollable="1"] .aits-popular-next { display: inline-flex; } .aits-popular[data-at-end="1"] .aits-popular-next { opacity: .35; } .aits-popular-next svg { width: 15px; height: 15px; } .aits-popular-next:hover { background: var(--aits-blue); border-color: var(--aits-blue); color: #fff; transform: scale(1.06); } /* Written at (0,2,0). These are anchors now, and `.aits-home a { color: inherit }` is (0,1,1) — it out-ranks a bare `.aits-chip { color: … }` at (0,1,0) whatever the source order, which is exactly how a coloured link in here ends up ignoring the colour it was given. The surface is `--aits-card` for the same reason the badge is: a literal #FFFFFF has no dark twin to fall back on. */ .aits-home .aits-chip { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; background: var(--aits-card); border: 1px solid var(--aits-line-strong); color: var(--aits-ink); font-size: 13px; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: background var(--t-fast, .15s) ease, color var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease, transform var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease; cursor: pointer; } .aits-home .aits-chip:hover, .aits-home .aits-chip:focus-visible { background: var(--aits-blue); border-color: var(--aits-blue); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(54,128,237,.32); } .aits-home .aits-chip:active { transform: translateY(0) scale(.97); } /* Right illustration */ .aits-hero-illust { position: relative; min-height: 460px; } .aits-laptop { position: relative; max-width: 520px; margin: 0 auto; aspect-ratio: 16/10; border-radius: var(--r-xl, 18px); background: linear-gradient(180deg, #17171A 0%, #0F0F11 100%); padding: 14px 14px 22px; box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.35); } .aits-laptop-screen { width: 100%; height: 100%; border-radius: 8px; background: radial-gradient(circle at 50% 50%, #fff 0%, #F4F8FE 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; padding: 24px; } .aits-laptop-screen > picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; } .aits-laptop-icon { width: 36%; max-width: 140px; aspect-ratio: 1/1; height: auto; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 18px 34px rgba(54, 128, 237, 0.28)); border-radius: 22%; /* the mark ships as a hard square — round it like the float tiles */ } .aits-laptop-base { position: absolute; bottom: -14px; left: -32px; right: -32px; height: 14px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #2B2B2B 0%, #17171A 100%); } /* Floating glass tiles — design.md §5.2 (8 tiles, 44-62px, blur, 6s float) */ .aits-float { position: absolute; display: grid; place-items: center; border-radius: var(--r-lg, 14px); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--sh-md); border: 1px solid rgba(255, 255, 255, 0.7); animation: aitsFloat 6s ease-in-out infinite; } .aits-float svg { width: 22px; height: 22px; } .aits-float.aits-f1 { top: 0; left: 4%; width: 62px; height: 62px; background: var(--aits-blue); color:#fff; animation-delay: 0s; } .aits-float.aits-f2 { top: 18%; left: -2%; width: 46px; height: 46px; color: var(--aits-violet); animation-delay: .8s; } .aits-float.aits-f3 { top: 8%; right: 10%; width: 44px; height: 44px; color: var(--aits-mut); animation-delay: 1.4s; } .aits-float.aits-f4 { top: 45%; left: -4%; width: 58px; height: 58px; background: var(--aits-violet); color:#fff; animation-delay: 2s; } .aits-float.aits-f5 { bottom: 20%; right: -4%; width: 60px; height: 60px; background: var(--aits-blue); color:#fff; animation-delay: 1.1s; } .aits-float.aits-f6 { top: 32%; right: 2%; width: 52px; height: 52px; color: var(--aits-blue-light); animation-delay: .4s; } .aits-float.aits-f7 { bottom: 8%; left: 12%; width: 54px; height: 54px; color: var(--aits-gold); animation-delay: 2.4s; } .aits-float.aits-f8 { bottom: -4%; right: 22%; width: 50px; height: 50px; color: var(--aits-green); animation-delay: 1.8s; } /* Robot mascot */ .aits-robot { position: absolute; right: -18px; bottom: -22px; width: 150px; height: 180px; animation: aitsFloat 4s ease-in-out infinite; } @keyframes aitsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Stats row (6-tile grid) */ .aits-stats { margin-top: 44px; background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%); border-radius: 22px; padding: 22px 20px; box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 12px 32px -8px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,1); display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; border: 1px solid var(--aits-line-strong); } .aits-stat { --stc: #3680ED; --stc2: #60A4F5; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; position: relative; /* ⚠️ Declared HERE, not in a breakpoint, and it is load-bearing. `@media (max-width:720px) { .aits-hero { text-align:center } }` centres the whole mobile hero — badge, title, sub, chips — which is deliberate, but it INHERITS into these tiles, and the tile is a flex row whose text column is wider than its own label. The result was "Online AI Tools" centring itself under "2,000+" instead of lining up with it, i.e. a ragged left edge on every tile. A directly-applied value always beats an inherited one regardless of specificity, so this needs no `!important` and no breakpoint twin — and it keeps working if that hero rule ever moves. `start`, not `left`: the site ships an RTL stylesheet. */ text-align: start; transition: background var(--t-fast, .15s) ease, transform var(--t-fast, .15s) ease; } .aits-stat:hover { background: rgba(15,23,42,.02); transform: translateY(-2px); } .aits-stat:hover .aits-stat-ico { transform: scale(1.08) rotate(-4deg); } /* Per-stat colors — cycle 6 hues */ .aits-stat:nth-child(1){--stc:#3680ED; --stc2:#60A4F5} .aits-stat:nth-child(2){--stc:#7048E8; --stc2:#A78BFA} .aits-stat:nth-child(3){--stc:#F59E0B; --stc2:#FBBF24} .aits-stat:nth-child(4){--stc:#0CA678; --stc2:#22C55E} .aits-stat:nth-child(5){--stc:#EC4899; --stc2:#F472B6} .aits-stat:nth-child(6){--stc:#06B6D4; --stc2:#22D3EE} .aits-stat + .aits-stat::before { content: ''; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: linear-gradient(180deg, transparent, var(--aits-line-strong) 30%, var(--aits-line-strong) 70%, transparent); } .aits-stat-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--stc) 0%, var(--stc2) 100%); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px color-mix(in oklab, var(--stc) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.24); transition: transform var(--t-slow, .25s) var(--ease, cubic-bezier(.16,1,.3,1)); } @supports not (background: color-mix(in oklab, red, blue)) { .aits-stat-ico { box-shadow: 0 6px 14px rgba(54,128,237,.30), inset 0 1px 0 rgba(255,255,255,.24) } } .aits-stat-ico svg { width: 22px; height: 22px; } .aits-stat-num { font-family: 'Inter', system-ui, sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--aits-ink); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .aits-stat-label { font-size: 12px; color: var(--aits-mut); font-weight: 700; letter-spacing: .015em; margin-top: 2px; } /* ═════════════════════════════════════════════════════════════════ SECTION 2 — ALL TOOLS DIRECTORY (design.md §5.3) ═════════════════════════════════════════════════════════════════ */ .aits-directory { padding: 88px 0 48px; position: relative; background: radial-gradient(circle at 50% 0%, var(--aits-blue-tint-2), transparent 55%), radial-gradient(circle at 50% 100%, #F7F7F8, transparent 60%); } .aits-directory::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(54, 128, 237, 0.06) 1px, transparent 1.5px); background-size: 32px 32px; opacity: 0.35; pointer-events: none; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%); } .aits-dir-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 40px; flex-wrap: wrap; } .aits-dir-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--aits-blue-tint); color: var(--aits-blue-dark); border-radius: var(--r-pill, 999px); font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 14px; } .aits-dir-eyebrow svg { width: 14px; height: 14px; } .aits-dir-head h2 { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(1.8rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; margin: 0; color: var(--aits-ink); line-height: 1.15; } .aits-dir-head h2 .aits-h2-mute { color: var(--aits-mut); font-weight: 500; font-size: .68em; letter-spacing: -0.01em; } .aits-dir-head p { margin: 8px 0 0; color: var(--aits-mut); font-size: 15px; max-width: 520px; } /* The three "explore all tools" CTAs jump here rather than reloading /tools. The site header is STICKY, so without this the wall's first row lands underneath it — `--aits-hd-h` is the measured header height every page-level sticky on this site clears (76 / 68 / 62px by breakpoint), and the extra 18px keeps the card's shadow off the bar. */ #aits-cats{ scroll-margin-top: calc(var(--aits-hd-h, 76px) + 18px); } /* ── §DIRHEAD) The directory head's subtitle + expand-all control ───── ONE LINE ON DESKTOP. The 520px cap above is a reading measure, and it is right for a paragraph — but this is a one-line strapline, and at 15px Inter the shipped copy renders ~700px wide (measured: 770px in DejaVu Sans, which runs 8-10% wider than Inter), so 520px broke it across two lines with a four-word orphan. 760px clears the real width with headroom and still caps the measure, so longer admin copy wraps gracefully instead of running the full 1,000px the flex row would otherwise allow. 1101px is this file's own desktop boundary — the card grid drops to three columns below it. Under that the head has to fit the copy AND the button in ~1,000px, which the one-line width would not leave room for, so the 520px measure stays and the strapline wraps as before. */ @media (min-width: 1101px){ .aits-dir-head p{ max-width: 760px; } } /* ⚠️ (0,3,0), and it has to be. `[hidden]` is a UA rule at (0,1,0) and `.aits-home .aits-btn { display:inline-flex }` is (0,2,0) — so a hidden BUTTON in this head would still render. This out-ranks both rather than relying on source order, which is the same trap the card rows hit with `.aits-cat-list li[hidden]`. */ .aits-home .aits-dir-head [hidden]{ display: none; } /* The expand-all control. It is a real