/* ──────────────────────────────────────────────────────────────── Reset + tokens (scoped to .aitshd) ──────────────────────────────────────────────────────────────── */ .aitshd, .aitshd * { box-sizing: border-box; } .aitshd { /* --hd-h-base is the resting height per breakpoint; --hd-h is what the bar actually uses, so the scrolled state can shave it. */ --hd-h-base: 76px; --hd-h: var(--hd-h-base); /* Was never defined, so every use fell back to 1280px — narrower than the 1400px the footer used to run at, and too narrow for brand + the six-item nav + the full account chip, which is what pushed the row past its container. Now matches the 1600px shell cap that seo-page's `--seo-shell-max` gives every content band, so on a 2560px monitor the header, content grid and footer all share the same edge — no 200-px shoulder on either side of the page. Drop back to 1400px if the header ever needs to tighten. */ --container-hd: 1920px; --hd-r: 20px; --hd-r-lg: 24px; --hd-glass: rgba(255,255,255,.75); --hd-glass-line: rgba(255,255,255,.45); --hd-shadow: 0 8px 32px -18px rgba(15,23,42,.14), 0 1px 0 rgba(15,23,42,.04); --hd-pop: 0 40px 80px -28px rgba(15,23,42,.28), 0 12px 32px -12px rgba(15,23,42,.14); /* Segmented action-rail surfaces. The rail is a single recessed pill; each control only earns a raised chip on hover/open, so four icons read as one object instead of four loose circles. */ --hd-rail-bg: rgba(15,23,42,.045); --hd-rail-line: rgba(15,23,42,.075); --hd-rail-chip: #FFFFFF; --hd-rail-chip-sh: 0 1px 2px rgba(15,23,42,.10), 0 8px 18px -10px rgba(15,23,42,.30); --hd-rail-inset: inset 0 1px 0 rgba(255,255,255,.6); /* Edge treatments — a flat 1px grey rule reads cheap under glass, so both bar edges fade out toward the viewport sides. */ --hd-sheen: linear-gradient(90deg, transparent, rgba(255,255,255,.75) 15%, rgba(255,255,255,.75) 85%, transparent); --hd-hairline: linear-gradient(90deg, transparent, rgba(15,23,42,.10) 12%, rgba(15,23,42,.10) 88%, transparent); --hd-wash: radial-gradient(150% 240% at 0% 0%, rgba(54,128,237,.055), transparent 58%); /* Colorful icon tint pairs (bg, ink) — soft in light mode */ --tint-blue-bg: rgba(54,128,237,.13); --tint-blue-ink: #2060C0; --tint-blue-plate: #2060C0; --tint-indigo-bg: rgba(99,102,241,.13); --tint-indigo-ink: #4338CA; --tint-indigo-plate: #4338CA; --tint-violet-bg: rgba(14,165,233,.13); --tint-violet-ink: #0369A1; --tint-violet-plate: #0284C7; --tint-emerald-bg: rgba(16,185,129,.14); --tint-emerald-ink: #047857; --tint-emerald-plate: #047857; --tint-amber-bg: rgba(245,158,11,.14); --tint-amber-ink: #B45309; --tint-amber-plate: #B45309; --tint-rose-bg: rgba(244,63,94,.13); --tint-rose-ink: #BE123C; --tint-rose-plate: #BE123C; --tint-cyan-bg: rgba(6,182,212,.14); --tint-cyan-ink: #0E7490; --tint-cyan-plate: #0E7490; --tint-pink-bg: rgba(236,72,153,.13); --tint-pink-ink: #BE185D; --tint-pink-plate: #BE185D; --tint-slate-bg: rgba(100,116,139,.14); --tint-slate-ink: #334155; --tint-slate-plate: #334155; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--aits-ink); display: block; position: relative; z-index: 60; } body.theme-dark .aitshd { --hd-glass: rgba(19,19,23,.72); --hd-glass-line: var(--dk-line-soft,rgba(255,255,255,.06)); --hd-shadow: 0 8px 32px -18px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.03); --hd-pop: 0 40px 80px -28px rgba(0,0,0,.75), 0 12px 32px -12px rgba(0,0,0,.5); --hd-rail-bg: rgba(255,255,255,.05); --hd-rail-line: var(--dk-line,rgba(255,255,255,.10)); --hd-rail-chip: rgba(255,255,255,.10); --hd-rail-chip-sh: 0 1px 2px rgba(0,0,0,.55), 0 8px 18px -10px rgba(0,0,0,.75); --hd-rail-inset: inset 0 1px 0 rgba(255,255,255,.05); --hd-sheen: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 15%, rgba(255,255,255,.10) 85%, transparent); --hd-hairline: linear-gradient(90deg, transparent, var(--dk-line,rgba(255,255,255,.10)) 12%, var(--dk-line,rgba(255,255,255,.10)) 88%, transparent); --hd-wash: radial-gradient(150% 240% at 0% 0%, rgba(54,128,237,.10), transparent 58%); --tint-blue-bg: rgba(96,164,245,.16); --tint-blue-ink: #93BEFF; --tint-blue-plate: var(--dk-tone-blue-plate, #2572DF); --tint-indigo-bg: rgba(129,140,248,.16); --tint-indigo-ink: #A5B4FC; --tint-indigo-plate: var(--dk-tone-indigo-plate, #616BCF); --tint-violet-bg: rgba(56,189,248,.16); --tint-violet-ink: #7DD3FC; --tint-violet-plate: #38BDF8; --tint-emerald-bg: rgba(52,211,153,.18); --tint-emerald-ink: #6EE7B7; --tint-emerald-plate: var(--dk-tone-emerald-plate, #098563); --tint-amber-bg: rgba(251,191,36,.18); --tint-amber-ink: #FCD34D; --tint-amber-plate: var(--dk-tone-amber-plate, #B16008); --tint-rose-bg: rgba(251,113,133,.16); --tint-rose-ink: #FDA4AF; --tint-rose-plate: var(--dk-tone-rose-plate, #DD2C51); --tint-cyan-bg: rgba(34,211,238,.16); --tint-cyan-ink: #67E8F9; --tint-cyan-plate: var(--dk-tone-cyan-plate, #0C7F9D); --tint-pink-bg: rgba(244,114,182,.16); --tint-pink-ink: #F9A8D4; --tint-pink-plate: var(--dk-tone-pink-plate, #D52694); --tint-slate-bg: rgba(148,163,184,.16); --tint-slate-ink: var(--dk-text-2,#C7CAD1); --tint-slate-plate: var(--dk-tone-slate-plate, #60769A); } /* Neutralise site-wide a:hover underline/color inside the header */ .aitshd a, .aitshd a:link, .aitshd a:visited, .aitshd a:hover, .aitshd a:focus, .aitshd a:active { text-decoration: none !important; } /* Tabler ships `a:hover { color: var(--tblr-link-hover-color) }`, which resolves to the red primary on the public site. At (0,1,1) it beats every single-class colour rule in this header, so any link whose colour comes from one class turned RED on hover — that is what made "View all providers" red while the unhovered "View all benchmarks" stayed blue. This re-asserts the brand colour at equal specificity but later in the cascade. Components that need a different hover colour already declare it with two classes (or !important on the dark surfaces), so they still win. */ .aitshd a:hover, .aitshd a:focus { color: var(--aits-blue-dark); } body.theme-dark .aitshd a:hover, body.theme-dark .aitshd a:focus { color: var(--aits-blue-light); } .aitshd button { font-family: inherit; } .aitshd :focus-visible { outline: 2px solid var(--aits-blue); outline-offset: 2px; border-radius: 8px; } /* ──────────────────────────────────────────────────────────────── Announcement bar ──────────────────────────────────────────────────────────────── */ .aitshd-ann { position: relative; background: radial-gradient(120% 180% at 8% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%), linear-gradient(105deg, var(--aits-blue) 0%, var(--aits-blue-dark) 55%, #1B347F 100%); color: #fff; display: flex; align-items: center; justify-content: center; /* Right padding always reserves the dismiss hit-area so long copy can never slide underneath it. */ padding: 10px calc(20px + var(--ann-x, 0px)) 10px 20px; isolation: isolate; } /* Hairline highlight along the bottom edge — separates the bar from the frosted header without a hard border. */ .aitshd-ann::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0)); pointer-events: none; } .aitshd-ann[data-dismissible="1"] { --ann-x: 26px; } .aitshd-ann-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; max-width: var(--container-hd, 1280px); font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; text-align: center; } .aitshd-ann-spark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 8px; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); color: #fff; } .aitshd-ann-text { color: rgba(255,255,255,.94); } /* Glass CTA pill — the arrow nudges right on hover. */ .aitshd-ann-cta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 13px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); color: #fff !important; font-weight: 600; font-size: 13px; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: background-color .2s var(--ease,ease), border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease); } .aitshd-ann-cta:hover, .aitshd-ann-cta:focus-visible { background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.96); color: var(--aits-blue-dark) !important; box-shadow: 0 8px 18px -8px rgba(2,12,45,.55); transform: translateY(-1px); } .aitshd-ann-cta:active { transform: translateY(0); } .aitshd-ann-arrow { width: 13px; height: 13px; flex: none; transition: transform .2s var(--ease,ease); } .aitshd-ann-cta:hover .aitshd-ann-arrow { transform: translateX(3px); } .aitshd-ann .aitshd-ann-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.18); padding: 0; cursor: pointer; border-radius: 999px; width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: background-color .18s var(--ease,ease), border-color .18s var(--ease,ease), transform .18s var(--ease,ease); } .aitshd-ann .aitshd-ann-x:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); } .aitshd-ann .aitshd-ann-x:active { transform: translateY(-50%) scale(.9); } .aitshd-ann :focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; } /* Tablet — trim the horizontal rhythm before anything wraps. */ @media (max-width: 900px) { .aitshd-ann { padding: 9px calc(16px + var(--ann-x, 0px)) 9px 16px; } .aitshd-ann-inner { font-size: 13px; gap: 6px 10px; } } /* Phone — sparkle stays inline with the copy (it lives inside .aitshd-ann-inner), the CTA drops to its own centered row. */ @media (max-width: 640px) { .aitshd-ann { padding: 9px calc(12px + var(--ann-x, 0px)) 9px 12px; } .aitshd-ann[data-dismissible="1"] { --ann-x: 28px; } .aitshd-ann-inner { font-size: 12.5px; gap: 6px 8px; line-height: 1.35; } .aitshd-ann-spark { width: 20px; height: 20px; border-radius: 6px; } .aitshd-ann-spark svg { width: 12px; height: 12px; } .aitshd-ann-cta { flex-basis: 100%; justify-content: center; font-size: 12.5px; padding: 4px 12px; } .aitshd-ann .aitshd-ann-x { right: 6px; width: 28px; height: 28px; } } /* Very small — drop the decorative chip, keep the message readable. */ @media (max-width: 380px) { .aitshd-ann-spark { display: none; } .aitshd-ann-inner { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .aitshd-ann-cta, .aitshd-ann-arrow, .aitshd-ann .aitshd-ann-x { transition: none; } .aitshd-ann-cta:hover { transform: none; } .aitshd-ann-cta:hover .aitshd-ann-arrow { transform: none; } } /* ──────────────────────────────────────────────────────────────── Sticky bar — glassmorphism ──────────────────────────────────────────────────────────────── */ .aitshd-bar { width: 100%; /* colour + wash are set separately so the [data-style="solid"] variant can swap the colour without dropping the gradient. */ background-color: var(--hd-glass); background-image: var(--hd-wash); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-bottom: 0; box-shadow: var(--hd-shadow); z-index: 60; } /* Both edges are fading gradient rules, not solid borders: ::before is the top sheen that sells the glass, ::after the bottom hairline that firms up once the page scrolls under it. */ .aitshd-bar::before, .aitshd-bar::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; } .aitshd-bar::before { top: 0; background: var(--hd-sheen); } .aitshd-bar::after { bottom: 0; background: var(--hd-hairline); opacity: .7; transition: opacity .25s var(--ease,ease); } .aitshd[data-scrolled="1"] .aitshd-bar::after { opacity: 1; } .aitshd-bar { position: relative; } /* Sticky sits on
, NOT on the bar. A sticky box can only travel inside its own containing block, and .aitshd-bar's is
— a normal-flow block only as tall as the announcement strip plus the bar itself. Pinned there the bar could move at most the announcement's ~40px before its parent scrolled out from under it and carried it off screen, so the header read as "not sticky at all" even though the rule was live. Sticking the HEADER at a negative offset equal to the announcement height preserves the original intent — the announcement scrolls away, the bar lands flush against the viewport top and stays. --hd-ann-h is measured at the foot of this component rather than hard-coded: the strip wraps to two lines on narrow screens and can be dismissed. It falls back to 0px so a JS-less render still pins, just with the announcement along for the ride. */ .aitshd[data-sticky="1"] { position: sticky; top: calc(-1 * var(--hd-ann-h, 0px)); } .aitshd[data-style="solid"] .aitshd-bar { background-color: var(--aits-card); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Scrolled state — deeper frost + a touch more lift, and the bar tightens by 6px so the page gains vertical room as you read. Toggled by the scroll observer at the foot of this component. */ .aitshd .aitshd-bar { transition: box-shadow .25s var(--ease,ease), background-color .25s var(--ease,ease); } .aitshd[data-scrolled="1"] { --hd-h: calc(var(--hd-h-base) - 6px); --hd-glass: rgba(255,255,255,.86); --hd-shadow: 0 10px 34px -14px rgba(15,23,42,.22), 0 1px 0 rgba(15,23,42,.05); } body.theme-dark .aitshd[data-scrolled="1"] { --hd-glass: rgba(19,19,23,.88); --hd-shadow: 0 10px 34px -14px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04); } .aitshd-inner { max-width: var(--container-hd, 1280px); margin: 0 auto; padding: 0 24px; height: var(--hd-h); /* 3-column grid keeps the nav visually centered inside the container regardless of how wide brand vs. actions get. */ display: grid; /* `1fr auto 1fr` made both side tracks equal, so the brand column was padded out to match the ACTIONS column (329px with the full account chip) — 187px of dead space that pushed the row past its own 1280px container and put a horizontal scrollbar on every page of the site. Sizing the sides to their content and letting the middle absorb the slack keeps the nav centred between them without the row ever being able to exceed the container. */ grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px; transition: height .25s var(--ease,ease); } @media (prefers-reduced-motion: reduce) { .aitshd-inner, .aitshd .aitshd-bar { transition: none; } } .aitshd-inner > .aitshd-brand { justify-self: start; min-width: 0; } .aitshd-inner > .aitshd-nav { justify-self: center; min-width: 0; } .aitshd-inner > .aitshd-actions { justify-self: end; min-width: 0; } /* Below the nav breakpoint the nav is hidden — switch to a flex row so the brand hugs left and the actions hug right cleanly. */ @media (max-width: 1279.98px) { .aitshd-inner { display: flex; justify-content: space-between; gap: 12px; } } @media (max-width: 1200px) { .aitshd-inner { padding: 0 20px; column-gap: 16px; } } /* Responsive height + gutters. Landscape notches get safe-area padding so the brand never sits under the sensor housing. */ @media (max-width: 1279.98px) { .aitshd { --hd-h-base: 68px; } } @media (max-width: 640px) { .aitshd { --hd-h-base: 62px; } .aitshd-inner { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); gap: 8px; } } @media (max-width: 380px) { .aitshd-inner { padding-left: max(11px, env(safe-area-inset-left)); padding-right: max(11px, env(safe-area-inset-right)); } } /* ──────────────────────────────────────────────────────────────── Brand lockup — renders the admin-uploaded logo at natural width when present; falls back to a gradient mark + wordmark only when no logo image has been uploaded yet. ──────────────────────────────────────────────────────────────── */ .aitshd-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--aits-ink); flex: none; min-height: 44px; } /* Uploaded logo — free-standing image, no background chip */ .aitshd-brand-logo { display: inline-flex; align-items: center; } .aitshd-brand-logo img { display: block; height: 44px; width: auto; max-width: 240px; object-fit: contain; } /* Theme-aware logo swap. BOTH images are in the DOM; CSS decides which one paints, so the lockup follows a client-side theme change with no reload and can never go stale against the cookie. Mirrors the footer's .aitsft-logo-l / .aitsft-logo-d pair. When the admin has only uploaded a light logo, .aitshd-brand-logo-d is simply absent and the `:only-child` rule keeps it visible in both themes. SPECIFICITY: every selector here qualifies the class with `img` AND the parent, giving (0,2,1)+. A bare `.aitshd-brand-logo-d` is only (0,1,0) and LOSES to `.aitshd-brand-logo img { display: block }` above at (0,1,1) — that rendered both logos side by side. Keep the `.aitshd-brand-logo img.…` shape on any rule added here. */ .aitshd-brand-logo img.aitshd-brand-logo-d { display: none; } body.theme-dark .aitshd-brand-logo img.aitshd-brand-logo-l { display: none; } body.theme-dark .aitshd-brand-logo img.aitshd-brand-logo-d { display: block; } /* Single-logo sites: never hide the only logo there is. */ body.theme-dark .aitshd-brand-logo img.aitshd-brand-logo-l:only-child { display: block; } /* Theme-toggle icon + label swap — same rationale as the logo. In light mode the button offers the moon ("go dark"); in dark mode the sun. Both are in the DOM so the button relabels itself the instant the body class flips, with no reload. The classes sit directly on the (via $aitshdIcon's 3rd arg) rather than on a wrapper span, so the `.aitshd-icon-btn > svg` direct-child rules above still match and the icon keeps its transition and its 640/380px responsive sizing. */ .aitshd-theme-ic-sun, .aitshd-theme-lbl-sun { display: none; } body.theme-dark .aitshd-theme-ic-moon, body.theme-dark .aitshd-theme-lbl-moon { display: none; } body.theme-dark .aitshd-theme-ic-sun { display: block; } body.theme-dark .aitshd-theme-lbl-sun { display: inline; } /* Fallback mark chip — used only when no admin logo is uploaded */ .aitshd-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark)); box-shadow: 0 8px 20px -6px rgba(54,128,237,.45), inset 0 1px 0 rgba(255,255,255,.35); color: #fff; flex: none; } .aitshd-brand-mark-glyph { display: inline-flex; align-items: center; justify-content: center; } .aitshd-brand-mark-glyph svg { width: 22px; height: 22px; } .aitshd-brand-copy { display: inline-flex; flex-direction: column; line-height: 1; } .aitshd-brand-name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 1px; color: var(--aits-ink); } .aitshd-brand-name .aitshd-brand-accent { color: var(--aits-blue); } .aitshd-brand-tag { display: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--aits-blue); font-weight: 700; margin-top: 4px; } @media (min-width: 1200px) { .aitshd-brand-tag { display: block; } } /* The brand is the one element allowed to shrink — actions keep their full touch targets, so the logo steps down instead of squeezing them. The min-width:0 chain is the safety valve: on a 360px screen the stepped max-widths still leave the row a couple of pixels over, and without it flex:none would push the burger off the edge. */ @media (max-width: 1279.98px) { .aitshd-brand { flex: 0 1 auto; min-width: 0; } .aitshd-brand-logo { min-width: 0; } .aitshd-brand-logo img { height: 38px; max-width: min(200px, 100%); } } @media (max-width: 640px) { .aitshd-brand { gap: 9px; min-height: 40px; } .aitshd-brand-logo img { height: 34px; max-width: min(160px, 100%); } .aitshd-brand-mark { width: 38px; height: 38px; border-radius: 11px; } .aitshd-brand-name { font-size: 18px; } } @media (max-width: 380px) { .aitshd-brand-logo img { height: 30px; max-width: min(124px, 100%); } .aitshd-brand-name { font-size: 16.5px; } } /* Pointer feedback on the lockup. A plain opacity fade reads like a broken link, so instead the mark lifts a hair and a soft brand halo blooms behind it — the wordmark itself never dims. */ .aitshd-brand { position: relative; padding: 4px 10px 4px 6px; margin-left: -6px; border-radius: 14px; transition: transform .22s var(--ease,ease); } .aitshd-brand::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--aits-blue-tint-2); opacity: 0; transform: scale(.9); transition: opacity .22s var(--ease,ease), transform .28s var(--ease,ease); } .aitshd-brand > * { position: relative; z-index: 1; } @media (hover: hover) { .aitshd-brand:hover::before { opacity: 1; transform: scale(1); } .aitshd-brand:hover .aitshd-brand-mark { transform: translateY(-1px) rotate(-4deg); box-shadow: 0 12px 26px -8px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.4); } } .aitshd-brand-mark { transition: transform .28s var(--ease,ease), box-shadow .28s var(--ease,ease); } .aitshd-brand:active { transform: scale(.982); } @media (max-width: 640px) { .aitshd-brand { padding: 4px 6px; margin-left: -4px; } } @media (prefers-reduced-motion: reduce) { .aitshd-brand, .aitshd-brand::before, .aitshd-brand-mark { transition: none; } .aitshd-brand:hover .aitshd-brand-mark, .aitshd-brand:active { transform: none; } } /* ──────────────────────────────────────────────────────────────── Primary nav ──────────────────────────────────────────────────────────────── */ .aitshd-nav { display: none; align-items: center; gap: 4px; justify-content: center; } /* 1280, not 1024. Seven pills + brand + Sign in + Get Started need ~1190px of row before any compression, so below 1280 the nav simply cannot fit and the burger + drawer carry navigation instead. The mega rules keep their own 1024 gate on purpose — a mega only opens from a nav link, so they are inert while the nav is hidden. */ @media (min-width: 1280px) { .aitshd-nav { display: flex; } } /* Tight window between the nav appearing and the row having slack. ⚠️ THE 1279px FIGURE WAS MEASURED WITH **SIX** PILLS. A seventh was added later — AI Tools · Tools · AI Models · AI Learn · Deals · Discover · Resources — and it is ~130px wide, so from ~1280 up to ~1500 the full-size nav no longer fitted. `auto minmax(0,1fr) auto` lets the middle TRACK shrink, but the pills are `white-space: nowrap`, so they overflow the track instead of compressing: the first pill ran under the brand and the last ran under the search icon. That is the reported "header truncate / menu misalignment". Whenever a nav section is added or removed, RE-MEASURE these two breakpoints — and check the longest *translated* label, not the English one, since the labels are admin- and locale-driven. */ @media (min-width: 1280px) and (max-width: 1559.98px) { .aitshd-nav { gap: 0; } } /* Drop each pill's leading glyph — 16px icon + 7px gap across seven links is ~161px, comfortably more than the worst overlap, and the label plus its caret still say everything the icon did. The caret survives: it lives inside .aitshd-caret, not here. Above 1500 the row has enough slack to keep the glyphs. */ @media (min-width: 1280px) and (max-width: 1499.98px) { .aitshd-navlink > svg { display: none; } } /* Nav pills — premium, brand-cohesive treatment that echoes the blue→violet accent used across the mega panels. Text always reads at ink weight; hover paints a soft gradient wash + a gradient underline that wipes out from centre. Open/current states firm up into a tinted pill with a persistent underline and a subtle ring. All state colors go through --aits-* so the dark-mode variants inherit automatically. */ .aitshd-navlink { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 10px; border-radius: 12px; font-size: 14.5px; font-weight: 600; letter-spacing: -.008em; color: var(--aits-ink-soft); text-decoration: none; white-space: nowrap; line-height: 1.15; transition: color .2s var(--ease,ease), transform .2s var(--ease,ease); background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; isolation: isolate; } /* Continuous compression across the same window, so a longer translated label degrades smoothly instead of falling off a cliff at one breakpoint: 1024 → 9px/13.5px · 1456 → ~12.4px/13.8px · 1560 → hands back to the base rule's 14px/14.5px. Padding shrinks before type does, because whitespace is the cheaper thing to lose. */ @media (min-width: 1280px) and (max-width: 1559.98px) { .aitshd-navlink { padding-left: clamp(9px, 0.85vw, 14px); padding-right: clamp(9px, 0.85vw, 14px); font-size: clamp(13.5px, 0.95vw, 14.5px); } } /* Hover surface — gradient blue→violet wash that scales up out of the label. Matches the mega row hover wash so hovering into a mega feels like the same interaction. Children ride above via position:relative + z-index:1. */ .aitshd-navlink::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(54,128,237,.10), rgba(1,150,253,.08)); box-shadow: inset 0 0 0 1px transparent; opacity: 0; transform: scale(.88); transition: opacity .22s var(--ease,ease), transform .3s var(--ease,ease), background .2s var(--ease,ease), box-shadow .2s var(--ease,ease); z-index: 0; } body.theme-dark .aitshd-navlink::before { background: linear-gradient(90deg, rgba(96,164,245,.14), rgba(56,189,248,.10)); } .aitshd-navlink > svg, .aitshd-navlink > span, .aitshd-navlink .aitshd-caret { position: relative; z-index: 1; } .aitshd-navlink > svg { color: var(--aits-mut); flex: none; transition: color .2s var(--ease,ease), transform .28s var(--ease,ease); } /* Gradient underline — brand blue→violet, matches the mega header accent bars so the pill and the mega read as one system. Wipes out from centre; sits low enough not to compete with descenders. */ .aitshd-navlink::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 0; height: 2.5px; border-radius: 999px; transform: translateX(-50%); background: linear-gradient(90deg, #3B82F6, #0196FD); opacity: 0; z-index: 2; transition: width .3s var(--ease,ease), opacity .2s var(--ease,ease); pointer-events: none; } @media (hover: hover) { .aitshd-navlink:hover { color: var(--aits-blue-dark); transform: translateY(-1px); } .aitshd-navlink:hover::before { opacity: 1; transform: scale(1); } .aitshd-navlink:hover::after { width: 22px; opacity: .55; } .aitshd-navlink:hover > svg { color: var(--aits-blue); transform: scale(1.1); } .aitshd-navlink:hover .aitshd-caret { opacity: 1; } } .aitshd-navlink:active { transform: scale(.97); } /* Open menu — the pill firms up into a tinted surface with a soft blue→violet ring and glow, and the underline stays visible so the pill locks onto the open panel below. */ .aitshd-navlink[aria-expanded="true"] { color: var(--aits-blue-dark); transform: none; } .aitshd-navlink[aria-expanded="true"]::before { opacity: 1; transform: scale(1); background: linear-gradient(90deg, rgba(54,128,237,.14), rgba(1,150,253,.10)); box-shadow: inset 0 0 0 1px rgba(54,128,237,.18), 0 8px 20px -12px rgba(99,102,241,.55); } body.theme-dark .aitshd-navlink[aria-expanded="true"]::before { background: linear-gradient(90deg, rgba(96,164,245,.20), rgba(56,189,248,.14)); box-shadow: inset 0 0 0 1px rgba(96,164,245,.28), 0 8px 20px -12px rgba(99,102,241,.65); } .aitshd-navlink[aria-expanded="true"] > svg { color: var(--aits-blue); } .aitshd-navlink[aria-expanded="true"]::after { width: 24px; opacity: 1; } /* Current page — same underline treatment, softer bg */ .aitshd-navlink.is-current { color: var(--aits-blue-dark); } .aitshd-navlink.is-current > svg { color: var(--aits-blue); } .aitshd-navlink.is-current::after { width: 22px; opacity: 1; } /* Dark mode: #2060C0 goes muddy on near-black — step every accent-on-tint label up to the light blue. */ body.theme-dark .aitshd-navlink { color: var(--aits-txt); } body.theme-dark .aitshd-navlink:hover, body.theme-dark .aitshd-navlink.is-current, body.theme-dark .aitshd-navlink[aria-expanded="true"] { color: var(--aits-blue-light); } body.theme-dark .aitshd-navlink:hover > svg, body.theme-dark .aitshd-navlink.is-current > svg, body.theme-dark .aitshd-navlink[aria-expanded="true"] > svg { color: var(--aits-blue-light); } .aitshd-navlink .aitshd-caret { display: inline-flex; margin-left: -2px; opacity: .5; color: var(--aits-mut); transition: transform .28s var(--ease,ease), opacity .2s var(--ease,ease), color .2s var(--ease,ease); } .aitshd-navlink:hover .aitshd-caret, .aitshd-navlink[aria-expanded="true"] .aitshd-caret { color: var(--aits-blue); } .aitshd-navlink[aria-expanded="true"] .aitshd-caret { transform: rotate(180deg); opacity: 1; } @media (prefers-reduced-motion: reduce) { .aitshd-navlink, .aitshd-navlink::before, .aitshd-navlink::after, .aitshd-navlink > svg, .aitshd-navlink .aitshd-caret { transition: none; } .aitshd-navlink:hover, .aitshd-navlink:active { transform: none; } .aitshd-navlink:hover > svg { transform: none; } } /* ──────────────────────────────────────────────────────────────── Right actions row ──────────────────────────────────────────────────────────────── */ .aitshd-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; } /* ── Segmented tool rail ────────────────────────────────────────── Search / theme / notifications / language live inside one recessed pill. At rest each control is invisible chrome; hover or open lifts a single chip out of the rail. Four identical outlined circles read as clutter — one rail reads as a control. */ .aitshd-tools { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hd-rail-bg); border: 1px solid var(--hd-rail-line); box-shadow: var(--hd-rail-inset); flex: none; } .aitshd-tools-sep { width: 1px; height: 18px; flex: none; margin: 0 3px; background: var(--hd-rail-line); } /* Config can switch off search + theme; never lead the rail with a rule. */ .aitshd-tools-sep:first-child { display: none; } .aitshd-tools .aitshd-icon-btn { width: 36px; height: 36px; background: transparent; border-color: transparent; box-shadow: none; color: var(--aits-txt); } /* Deliberately NOT gated behind @media (hover:hover): the base .aitshd-icon-btn:hover isn't gated either, so a touch tap would otherwise leave a stray outlined circle sitting inside the rail. */ .aitshd-tools .aitshd-icon-btn:hover, .aitshd-tools .aitshd-icon-btn:focus-visible, .aitshd-tools .aitshd-icon-btn.active, .aitshd-tools .aitshd-icon-btn[aria-expanded="true"] { background: var(--hd-rail-chip); border-color: transparent; box-shadow: var(--hd-rail-chip-sh); color: var(--aits-blue-dark); transform: none; /* the chip does the lifting, not a nudge */ } .aitshd-tools .aitshd-icon-btn:active { transform: scale(.9); } body.theme-dark .aitshd-tools .aitshd-icon-btn:hover, body.theme-dark .aitshd-tools .aitshd-icon-btn.active, body.theme-dark .aitshd-tools .aitshd-icon-btn[aria-expanded="true"] { color: var(--aits-blue-light); } /* Notifications + language keep their own positioning context inside the rail so their popovers still anchor to the button. */ .aitshd-tools > .aitshd-notif, .aitshd-tools > .aitshd-lang { display: inline-flex; } /* Bell + language are drawer-side controls on small screens — the bar keeps only what a thumb reaches for. */ @media (max-width: 1279.98px) { .aitshd-tools > .aitshd-notif, .aitshd-tools > .aitshd-lang, .aitshd-tools .aitshd-tools-sep { display: none; } } @media (max-width: 640px) { .aitshd-tools { padding: 2px; } .aitshd-tools .aitshd-icon-btn { width: 34px; height: 34px; } } @media (max-width: 380px) { .aitshd-tools .aitshd-icon-btn { width: 32px; height: 32px; } } /* Filled search pill (opens ezsx overlay) */ .aitshd-search { display: none; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 16px; min-width: 240px; max-width: 320px; border-radius: 999px; background: var(--aits-surface-3); border: 1px solid var(--aits-line); color: var(--aits-mut); font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color .18s, border-color .18s, box-shadow .18s; } @media (min-width: 900px) { .aitshd-search { display: inline-flex; } } @media (min-width: 1360px) { .aitshd-search { min-width: 320px; max-width: 380px; } } .aitshd-search:hover, .aitshd-search:focus { background: var(--aits-card); border-color: var(--aits-blue-line); box-shadow: 0 6px 18px -10px rgba(54,128,237,.35); } .aitshd-search-ico { color: var(--aits-mut); flex: none; } .aitshd-search:hover .aitshd-search-ico { color: var(--aits-blue); } .aitshd-search-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aitshd-search-kbd { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 8px; background: var(--aits-card); border: 1px solid var(--aits-line); font-family: var(--font-mono, ui-monospace); font-size: 11px; font-weight: 600; color: var(--aits-mut); letter-spacing: .02em; } body.theme-dark .aitshd-search-kbd { background: var(--aits-surface-2); } /* A keyboard hint on a device with no keyboard is dead pixels. The header bar only shows from 900px, but that catches tablets too. */ @media (hover: none) { .aitshd-search-kbd { display: none; } } /* ── Drawer search — the mobile one ──────────────────────────────── Full-width and touch-sized (50px clears the 44px minimum with room), with the magnifier promoted to a tinted chip and a solid brand chip on the right standing in for ⌘K. It reads as something you TAP rather than a disabled input, which is what the flat pill with a keyboard badge looked like on a phone. */ .aitshd-drawer .aitshd-search { display: flex; width: 100%; min-width: 0; max-width: none; height: 50px; margin: 0 0 14px; padding: 0 7px 0 7px; gap: 11px; border-radius: 15px; font-size: 14.5px; background: var(--aits-surface-3); border: 1px solid var(--aits-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .18s var(--ease,ease), box-shadow .18s var(--ease,ease), transform .18s var(--ease,ease); } .aitshd-drawer .aitshd-search-ico { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--aits-blue-tint); color: var(--aits-blue); box-shadow: inset 0 0 0 1px var(--aits-blue-line); } .aitshd-drawer .aitshd-search-text { font-weight: 500; color: var(--aits-mut); } .aitshd-drawer .aitshd-search-go { flex: none; width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark)); color: #fff; box-shadow: 0 6px 14px -8px var(--aits-blue-dark); transition: transform .2s var(--ease,ease); } /* :active, not :hover — this control never sees a hover. */ .aitshd-drawer .aitshd-search:active { transform: scale(.995); border-color: var(--aits-blue-line); } .aitshd-drawer .aitshd-search:active .aitshd-search-go { transform: scale(.93); } .aitshd-drawer .aitshd-search:focus-visible { outline: none; border-color: var(--aits-blue); box-shadow: 0 0 0 3px rgba(54, 128, 237, .28); } body.theme-dark .aitshd-drawer .aitshd-search { background: var(--aits-surface-2); box-shadow: none; } body.theme-dark .aitshd-drawer .aitshd-search-ico { background: rgba(96, 164, 245, .16); color: #93BEFF; box-shadow: inset 0 0 0 1px rgba(96, 164, 245, .28); } /* Icon buttons: theme toggle, notifications, language, hamburger */ .aitshd-icon-btn { width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--aits-surface-3); border: 1px solid var(--aits-line); color: var(--aits-ink-soft); cursor: pointer; text-decoration: none; position: relative; transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; } .aitshd-icon-btn:hover, .aitshd-icon-btn:focus-visible { background: var(--aits-card); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); box-shadow: 0 8px 20px -10px rgba(54,128,237,.45); transform: translateY(-1px); } /* Press feedback — reads as a physical button on touch too. */ .aitshd-icon-btn:active { transform: translateY(0) scale(.93); box-shadow: none; } .aitshd-icon-btn > svg { transition: transform .2s var(--ease,ease); } .aitshd-icon-btn:hover > svg { transform: scale(1.06); } .aitshd-icon-btn.active, .aitshd-icon-btn[aria-expanded="true"] { background: var(--aits-blue-tint); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); } body.theme-dark .aitshd-icon-btn:hover, body.theme-dark .aitshd-icon-btn:focus-visible { color: var(--aits-blue-light); } /* Coarse pointers get no hover-lift (it sticks after a tap) but keep the press state. */ @media (hover: none) { .aitshd-icon-btn:hover { transform: none; box-shadow: none; } .aitshd-icon-btn:hover > svg { transform: none; } } @media (prefers-reduced-motion: reduce) { .aitshd-icon-btn, .aitshd-icon-btn > svg { transition: none; } .aitshd-icon-btn:hover, .aitshd-icon-btn:active { transform: none; } .aitshd-icon-btn:hover > svg { transform: none; } } /* Compact on phones — 38px keeps four actions + logo on a 360px screen while staying above the 44px tap target once padding is counted. */ @media (max-width: 640px) { .aitshd-actions { gap: 6px; } .aitshd-icon-btn { width: 38px; height: 38px; } .aitshd-icon-btn > svg { width: 17px; height: 17px; } } @media (max-width: 380px) { .aitshd-actions { gap: 4px; } .aitshd-icon-btn { width: 35px; height: 35px; } .aitshd-icon-btn > svg { width: 16px; height: 16px; } } .aitshd-theme-form { display: inline-flex; margin: 0; padding: 0; border: 0; } /* Notification dot/badge */ .aitshd-icon-btn .aitshd-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #E11D48; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--aits-card); line-height: 1; } body.theme-dark .aitshd-icon-btn .aitshd-badge { box-shadow: 0 0 0 2px var(--aits-bg); } /* Sign-in / Register pills */ .aitshd-cta-outline, .aitshd-cta-primary, .aitshd-cta-coffee { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 1.2; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; } .aitshd-cta-outline { color: var(--aits-ink); background: var(--aits-card); border: 1.5px solid var(--aits-line-strong); } .aitshd-cta-outline:hover { border-color: var(--aits-blue); color: var(--aits-blue-dark); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(54,128,237,.5); } .aitshd-cta-outline svg { color: var(--aits-blue); } .aitshd-cta-primary { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark)); border: 1px solid var(--aits-blue); box-shadow: 0 10px 24px -10px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.2); } /* Light sweeps across the fill on hover — the one place in the bar that earns a flourish, because it is the single primary action. */ .aitshd-cta-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-18deg); opacity: 0; transition: left .6s var(--ease,ease), opacity .2s; pointer-events: none; } .aitshd-cta-primary > * { position: relative; z-index: 1; } .aitshd-cta-primary:hover, .aitshd-cta-primary:focus { color: #fff !important; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(54,128,237,.6), inset 0 1px 0 rgba(255,255,255,.25); } @media (hover: hover) { .aitshd-cta-primary:hover::after { left: 115%; opacity: 1; } } .aitshd-cta-primary:active { transform: translateY(0) scale(.97); } .aitshd-cta-outline:active { transform: translateY(0) scale(.97); } .aitshd-cta-primary svg, .aitshd-cta-outline svg { transition: transform .24s var(--ease,ease); } @media (hover: hover) { .aitshd-cta-primary:hover svg { transform: translateX(3px); } .aitshd-cta-outline:hover svg { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .aitshd-cta-primary, .aitshd-cta-outline, .aitshd-cta-primary::after, .aitshd-cta-primary svg, .aitshd-cta-outline svg { transition: none; } .aitshd-cta-primary:hover, .aitshd-cta-outline:hover, .aitshd-cta-primary:active, .aitshd-cta-outline:active { transform: none; } .aitshd-cta-primary:hover::after { left: -60%; opacity: 0; } .aitshd-cta-primary:hover svg, .aitshd-cta-outline:hover svg { transform: none; } } .aitshd-cta-coffee { color: #111 !important; background: linear-gradient(135deg, #FFD16A, #F09E00); border: 1px solid #F09E00; box-shadow: 0 8px 20px -8px rgba(217,119,6,.55); } .aitshd-cta-coffee:hover, .aitshd-cta-coffee:focus { color: #111 !important; transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(217,119,6,.65); } /* Hamburger only on small screens */ .aitshd-burger { display: inline-flex; } @media (min-width: 1280px) { .aitshd-burger { display: none; } } /* Language dropdown */ .aitshd-lang { position: relative; } .aitshd-lang-menu { position: absolute; right: 0; top: calc(100% + 10px); background: var(--aits-card); border: 1px solid var(--aits-line); box-shadow: var(--sh-lg); border-radius: 14px; padding: 6px; min-width: 210px; display: none; z-index: 90; } .aitshd-lang.open .aitshd-lang-menu { display: block; } .aitshd-lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--aits-ink-soft); text-decoration: none; } .aitshd-lang-menu a:hover { background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); } /* Notifications dropdown */ .aitshd-notif { position: relative; } .aitshd-notif-menu { position: absolute; right: 0; top: calc(100% + 10px); background: var(--aits-card); border: 1px solid var(--aits-line); box-shadow: var(--hd-pop); border-radius: 18px; width: 340px; padding: 8px; display: none; z-index: 90; overflow: hidden; } .aitshd-notif.open .aitshd-notif-menu { display: block; } .aitshd-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px; border-bottom: 1px solid var(--aits-line); } .aitshd-notif-head strong { font-size: 14px; font-weight: 700; color: var(--aits-ink); letter-spacing: -0.01em; } .aitshd-notif-head a { font-size: 12px; font-weight: 600; color: var(--aits-blue); } .aitshd-notif-list { padding: 6px 0; max-height: 320px; overflow-y: auto; } .aitshd-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--aits-ink-soft); transition: background-color .12s; } .aitshd-notif-item:hover { background: var(--aits-surface-2); } .aitshd-notif-item .aitshd-notif-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--aits-blue); flex: none; margin-top: 6px; } .aitshd-notif-item.read .aitshd-notif-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--aits-line-strong); } .aitshd-notif-body { flex: 1; min-width: 0; } .aitshd-notif-title { font-size: 13.5px; font-weight: 600; color: var(--aits-ink); margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-notif-meta { font-size: 11.5px; color: var(--aits-mut); display: inline-flex; align-items: center; gap: 4px; } .aitshd-notif-empty { padding: 32px 20px; text-align: center; color: var(--aits-mut); font-size: 13px; } .aitshd-notif-empty .aitshd-notif-empty-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--aits-blue-tint-2); color: var(--aits-blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; } .aitshd-notif-foot { border-top: 1px solid var(--aits-line); padding: 10px; } .aitshd-notif-foot a { display: block; text-align: center; padding: 9px 12px; border-radius: 10px; background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); font-size: 13px; font-weight: 600; } .aitshd-notif-foot a:hover { background: var(--aits-blue-tint); } /* ──────────────────────────────────────────────────────────────── Account chip + menu The signed-in control used to be a bare Tabler dropdown (raw avatar + two lines of unstyled text), which was the one element in the bar that didn't belong to the design system. It is now a first-class chip that collapses to avatar-only on small screens. ──────────────────────────────────────────────────────────────── */ .aitshd-user { position: relative; flex: none; } .aitshd-user-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 3px 14px 3px 3px; border-radius: 999px; background: var(--hd-rail-bg); border: 1px solid var(--hd-rail-line); box-shadow: var(--hd-rail-inset); color: var(--aits-ink); cursor: pointer; text-decoration: none; transition: background-color .2s var(--ease,ease), border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease); } @media (hover: hover) { .aitshd-user-btn:hover { background: var(--aits-card); border-color: var(--aits-blue-line); box-shadow: 0 10px 24px -14px rgba(54,128,237,.6); transform: translateY(-1px); } } .aitshd-user-btn:active { transform: translateY(0) scale(.97); } .aitshd-user.open > .aitshd-user-btn { background: var(--aits-blue-tint); border-color: var(--aits-blue-line); } .aitshd-user-av { position: relative; flex: none; width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark)); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.02em; box-shadow: 0 0 0 2px var(--aits-card), 0 0 0 3px var(--aits-blue-line); transition: box-shadow .24s var(--ease,ease); } .aitshd-user-av img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; } .aitshd-user-btn:hover .aitshd-user-av, .aitshd-user.open .aitshd-user-av { box-shadow: 0 0 0 2px var(--aits-card), 0 0 0 3px var(--aits-blue); } .aitshd-user-copy { display: none; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; } .aitshd-user-name { font-size: 13.5px; font-weight: 700; letter-spacing: -.012em; color: var(--aits-ink); max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-user-role { margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--aits-blue); } body.theme-dark .aitshd-user-role { color: var(--aits-blue-light); } .aitshd-user-caret { display: none; color: var(--aits-faint); margin-left: -2px; transition: transform .28s var(--ease,ease), color .2s; } .aitshd-user.open .aitshd-user-caret { transform: rotate(180deg); color: var(--aits-blue); } /* Progressive disclosure: full chip on wide desktops, avatar + caret on laptops, avatar only once the hamburger appears. */ @media (min-width: 1280px) { .aitshd-user-caret { display: inline-flex; } } /* 1460, not 1200. The name+role block adds ~132px to the actions column, and below this the 1400px container cannot hold brand + nav + chip at once — the nav would run underneath the search icon. Showing the avatar alone until there is genuinely room is what keeps the row from colliding with itself. */ @media (min-width: 1460px) { .aitshd-user-copy { display: inline-flex; } } @media (max-width: 1199px) { .aitshd-user-btn { padding-right: 8px; } } @media (max-width: 1279.98px) { .aitshd-user-btn { padding: 2px; gap: 0; height: auto; } .aitshd-user-av { width: 34px; height: 34px; font-size: 13px; } } @media (max-width: 380px) { .aitshd-user-av { width: 31px; height: 31px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .aitshd-user-btn, .aitshd-user-av, .aitshd-user-caret { transition: none; } .aitshd-user-btn:hover, .aitshd-user-btn:active { transform: none; } } /* Menu panel */ .aitshd-user-menu { position: absolute; right: 0; top: calc(100% + 12px); width: 302px; padding: 8px; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: 20px; box-shadow: var(--hd-pop); z-index: 95; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right; transition: opacity .2s var(--ease,ease), transform .26s var(--ease,ease), visibility .2s; } .aitshd-user.open .aitshd-user-menu { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: reduce) { .aitshd-user-menu { transition: none; } } .aitshd-user-card { display: flex; align-items: center; gap: 12px; padding: 13px; margin-bottom: 6px; border-radius: 15px; background: linear-gradient(135deg, var(--aits-blue-tint), var(--aits-blue-tint-2)); border: 1px solid var(--aits-blue-line); } .aitshd-user-card .aitshd-user-av { width: 42px; height: 42px; font-size: 15px; box-shadow: 0 6px 16px -8px rgba(54,128,237,.7); } .aitshd-user-card-copy { min-width: 0; flex: 1; } /* These are s — without display:block the ellipsis never kicks in on a long name or address. */ .aitshd-user-card-name { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; color: var(--aits-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-user-card-mail { display: block; margin-top: 2px; font-size: 12px; color: var(--aits-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-user-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--aits-card); border: 1px solid var(--aits-blue-line); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--aits-blue-dark); } body.theme-dark .aitshd-user-pill { color: var(--aits-blue-light); background: var(--aits-surface-2); } .aitshd-user-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 13px; font-size: 14px; font-weight: 600; color: var(--aits-ink-soft); text-decoration: none; transition: background-color .16s var(--ease,ease), color .16s var(--ease,ease); } .aitshd-user-item-ico { width: 32px; height: 32px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); transition: transform .24s var(--ease,ease); } .aitshd-user-item-ico svg { width: 17px; height: 17px; } .aitshd-user-item[data-tone="violet"] .aitshd-user-item-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-user-item[data-tone="amber"] .aitshd-user-item-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-user-item[data-tone="emerald"] .aitshd-user-item-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-user-item[data-tone="rose"] .aitshd-user-item-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-user-item-arrow { margin-left: auto; color: var(--aits-faint); flex: none; opacity: 0; transform: translateX(-5px); transition: opacity .2s var(--ease,ease), transform .24s var(--ease,ease); } @media (hover: hover) { .aitshd-user-item:hover { background: var(--aits-surface-2); color: var(--aits-ink); } .aitshd-user-item:hover .aitshd-user-item-ico { transform: scale(1.08); } .aitshd-user-item:hover .aitshd-user-item-arrow { opacity: 1; transform: none; } .aitshd-user-item[data-tone="rose"]:hover { color: var(--tint-rose-ink); } } .aitshd-user-item:active { background: var(--aits-blue-tint-2); } .aitshd-user-sep { height: 1px; margin: 6px 10px; background: var(--aits-line); } @media (prefers-reduced-motion: reduce) { .aitshd-user-item, .aitshd-user-item-ico, .aitshd-user-item-arrow { transition: none; } .aitshd-user-item:hover .aitshd-user-item-ico { transform: none; } } /* Never let a fixed 302px panel outgrow a narrow phone. */ @media (max-width: 460px) { .aitshd-user-menu { width: min(300px, calc(100vw - 24px)); right: -4px; } } /* ──────────────────────────────────────────────────────────────── MEGA MENU (Categories) — 5-column premium panel ──────────────────────────────────────────────────────────────── */ .aitshd-mega-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.14); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease,ease); z-index: 55; } body.theme-dark .aitshd-mega-backdrop { background: rgba(0,0,0,.5); } /* Every mega dims the page, not just the first two that shipped. */ .aitshd[data-mega-open="1"] .aitshd-mega-backdrop, .aitshd[data-mega-aitools-open="1"] .aitshd-mega-backdrop, .aitshd[data-mega-blog-open="1"] .aitshd-mega-backdrop, .aitshd[data-mega-models-open="1"] .aitshd-mega-backdrop, .aitshd[data-mega-learn-open="1"] .aitshd-mega-backdrop, .aitshd[data-mega-deals-open="1"] .aitshd-mega-backdrop, .aitshd[data-mega-discover-open="1"] .aitshd-mega-backdrop, .aitshd[data-mega-resources-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; } .aitshd-mega-panel { display: none; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 10px); width: min(1440px, calc(100vw - 32px)); background: var(--aits-card); border: 1px solid var(--aits-line); box-shadow: var(--hd-pop); border-radius: var(--hd-r-lg); z-index: 65; overflow: hidden; opacity: 0; transition: opacity .22s var(--ease,ease), transform .22s var(--ease,ease); } /* AI Tools panel — shown when [data-mega-open="1"] */ .aitshd[data-mega-open="1"] .aitshd-mega-panel-tools { display: block; opacity: 1; transform: translate(-50%, 12px); } /* AI Tools (external directory) panel — shares .aitshd-mega-panel- tools styling by class-composition, so nothing else here is needed to make it look identical. This selector JUST drives the open state so the tools panel doesn't show up when the aitools nav button is clicked — .aitshd-mega-panel-tools is now on BOTH panels, and the earlier rule would match either one. `:not(.aitshd-mega-panel-aitools)` on the tools rule and `.aitshd-mega-panel-aitools` scoping on the aitools rule keep each open state pinned to the panel it names. */ .aitshd[data-mega-open="1"] .aitshd-mega-panel-tools.aitshd-mega-panel-aitools { display: none; } .aitshd[data-mega-aitools-open="1"] .aitshd-mega-panel-aitools { display: block; opacity: 1; transform: translate(-50%, 12px); } /* AI Models panel — shown when [data-mega-models-open="1"] */ .aitshd[data-mega-models-open="1"] .aitshd-mega-panel-models { display: block; opacity: 1; transform: translate(-50%, 12px); } /* Backdrop covers any open mega */ .aitshd[data-mega-models-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; } .aitshd-mega-wrap { display: grid; grid-template-columns: 260px minmax(0,1fr) minmax(0,1fr) 380px; gap: 0; } @media (max-width: 1240px) { .aitshd-mega-wrap { grid-template-columns: 240px minmax(0,1fr) minmax(0,1fr) 340px; } } @media (max-width: 1080px) { .aitshd-mega-wrap { grid-template-columns: 240px minmax(0,1fr) 320px; } .aitshd-mega-col-freetools { display: none; } } @media (max-width: 900px) { .aitshd-mega-wrap { grid-template-columns: 1fr; } .aitshd-mega-featured-col { display: none; } } /* Column 1: BROWSE — big colorful items with title + subtitle */ .aitshd-mega-browse { padding: 26px 16px 20px 26px; border-right: 1px solid var(--aits-line); background: var(--aits-card); display: flex; flex-direction: column; } .aitshd-mega-browse .aitshd-mega-item + .aitshd-mega-item { margin-top: 2px; } .aitshd-mega-browse-sep { height: 1px; background: var(--aits-line); margin: 12px 4px 10px; } .aitshd-mega-browse-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aits-mut); padding: 0 8px 8px; } /* Column 1 (legacy): rail — kept for admin configs that still reference the old .aitshd-mega-rail block; unused in default layout */ .aitshd-mega-rail { padding: 24px 14px 18px 22px; border-right: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-surface-2), var(--aits-card)); } .aitshd-mega-colh { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aits-blue); padding: 4px 8px 14px; } .aitshd-mega-rail-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; user-select: none; font-size: 14px; font-weight: 500; color: var(--aits-ink-soft); text-decoration: none; transition: background-color .16s var(--ease,ease), color .16s; } .aitshd-mega-rail-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; transition: transform .18s var(--ease,ease); } .aitshd-mega-rail-item[data-tone="indigo"] .aitshd-mega-rail-icon { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-mega-rail-item[data-tone="violet"] .aitshd-mega-rail-icon { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-mega-rail-item[data-tone="emerald"] .aitshd-mega-rail-icon { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-mega-rail-item[data-tone="amber"] .aitshd-mega-rail-icon { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-mega-rail-item[data-tone="rose"] .aitshd-mega-rail-icon { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-mega-rail-item[data-tone="cyan"] .aitshd-mega-rail-icon { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-mega-rail-item[data-tone="pink"] .aitshd-mega-rail-icon { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-mega-rail-item[data-tone="slate"] .aitshd-mega-rail-icon { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-mega-rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-mega-rail-count { font-size: 11.5px; font-weight: 600; color: var(--aits-mut); padding: 3px 8px; border-radius: 999px; background: var(--aits-surface-3); border: 1px solid var(--aits-line); } .aitshd-mega-rail-item.active, .aitshd-mega-rail-item:hover { background: var(--aits-blue-tint); color: var(--aits-blue-dark); } .aitshd-mega-rail-item.active .aitshd-mega-rail-icon, .aitshd-mega-rail-item:hover .aitshd-mega-rail-icon { transform: scale(1.05); } .aitshd-mega-rail-item.active .aitshd-mega-rail-count, .aitshd-mega-rail-item:hover .aitshd-mega-rail-count { background: var(--aits-card); color: var(--aits-blue-dark); border-color: var(--aits-blue-line); } .aitshd-mega-rail-view { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 4px); margin: 14px 2px 0; padding: 11px 14px; border-radius: 12px; border: 1px dashed var(--aits-blue-line); background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color .18s, color .18s, border-color .18s; } .aitshd-mega-rail-view:hover, .aitshd-mega-rail-view:focus { background: var(--aits-blue); color: #fff !important; border-style: solid; } /* Column 2 & 3: category + use case */ .aitshd-mega-col { padding: 26px 22px 22px; min-width: 0; display: flex; flex-direction: column; } .aitshd-mega-col + .aitshd-mega-col { border-left: 1px solid var(--aits-line); } .aitshd-mega-col-cat, .aitshd-mega-col-freetools { gap: 2px; } .aitshd-mega-col .aitshd-mega-item + .aitshd-mega-item { margin-top: 1px; } .aitshd-mega-view-all-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 12px; font-size: 13px; font-weight: 600; color: var(--aits-blue-dark); text-decoration: none; border-radius: 12px; transition: background-color .16s, color .16s, padding .16s; } .aitshd-mega-view-all-link:hover { background: var(--aits-blue-tint-2); padding-left: 16px; } .aitshd-mega-view-all-link svg { transition: transform .18s; } .aitshd-mega-view-all-link:hover svg { transform: translateX(3px); } .aitshd-mega-panel-body { min-height: 0; } .aitshd-mega-subcols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; } @media (max-width: 1180px) { .aitshd-mega-subcols { grid-template-columns: 1fr 1fr; } } .aitshd-mega-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--aits-ink-soft); font-size: 13.5px; font-weight: 500; transition: background-color .18s var(--ease,ease), color .18s var(--ease,ease), transform .18s; min-width: 0; position: relative; } /* Larger, richer item used in Browse column */ .aitshd-mega-item.is-lg { padding: 12px; } .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 44px; height: 44px; border-radius: 12px; } .aitshd-mega-item-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; transition: transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease); } .aitshd-mega-item[data-tone="indigo"] .aitshd-mega-item-icon { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-mega-item[data-tone="violet"] .aitshd-mega-item-icon { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-mega-item[data-tone="emerald"] .aitshd-mega-item-icon { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-mega-item[data-tone="amber"] .aitshd-mega-item-icon { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-mega-item[data-tone="rose"] .aitshd-mega-item-icon { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-mega-item[data-tone="cyan"] .aitshd-mega-item-icon { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-mega-item[data-tone="pink"] .aitshd-mega-item-icon { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-mega-item[data-tone="slate"] .aitshd-mega-item-icon { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-mega-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .aitshd-mega-item-title { font-weight: 600; color: var(--aits-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; line-height: 1.25; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 6px; } .aitshd-mega-item.is-lg .aitshd-mega-item-title { font-size: 15px; font-weight: 700; } .aitshd-mega-item-desc { font-size: 12.5px; font-weight: 400; color: var(--aits-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; line-height: 1.35; } /* Count pill "156+" on the right of category rows */ .aitshd-mega-item-count { flex: none; font-size: 11.5px; font-weight: 700; color: var(--aits-mut); padding: 4px 10px; border-radius: 999px; background: var(--aits-surface-3); border: 1px solid var(--aits-line); letter-spacing: 0; transition: all .18s var(--ease,ease); } .aitshd-mega-item:hover .aitshd-mega-item-count { background: var(--aits-card); color: var(--aits-blue-dark); border-color: var(--aits-blue-line); } /* Right chevron on Use-Case rows */ .aitshd-mega-item-arrow { flex: none; color: var(--aits-faint); display: inline-flex; align-items: center; opacity: .5; transition: color .18s, opacity .18s, transform .18s; } .aitshd-mega-item:hover .aitshd-mega-item-arrow { color: var(--aits-blue); opacity: 1; transform: translateX(2px); } /* Inline pill badges shown inside item titles (NEW / For You / Trending) */ .aitshd-mega-badge-inline { display: inline-flex; align-items: center; flex: none; /* never grow — never steal width from the label */ white-space: nowrap; /* "For you" must never split across lines */ font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); line-height: 1; } .aitshd-mega-badge-inline[data-tone="amber"] { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-mega-badge-inline[data-tone="rose"] { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-mega-badge-inline[data-tone="violet"] { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-mega-badge-inline[data-tone="blue"] { background: var(--tint-blue-bg); color: var(--tint-blue-ink); } .aitshd-mega-badge-inline[data-tone="emerald"] { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } /* Universal title-label rule — makes the text span shrink first so a trailing badge can never wrap to its own line. Every mega uses the same markup pattern `label …`, and the base title is `display: inline-flex`. Without this, a badge in a narrow column (Discover browse rail on a 1320px laptop, Deals lanes, etc.) bumps to a new line — that was the "Recently Added / NEW / Latest tools & models" 3-row stack visible in the Discover mega. Panels that need a multi-line title (Discover, Resources) already set `white-space: normal` on the title container, so the label span will still wrap up to their `max-height` cap — only the badge is held on the last flow line. Panels that want single-line ellipsis (Tools, Models) add their own `white-space: nowrap; overflow: hidden; text-overflow: ellipsis` at (0,3,0), which wins. */ .aitshd-mega-item-title > span:first-child { flex: 1 1 auto; min-width: 0; } .aitshd-mega-item:hover { background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); } .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.06); box-shadow: 0 8px 20px -8px currentColor; } .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); } /* Column: popular tools */ .aitshd-mega-col-popular { padding: 24px 22px; border-left: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-surface-2) 0%, var(--aits-card) 60%); min-width: 0; } .aitshd-mega-col-popular .aitshd-mega-item { padding: 8px 10px; } /* Column 4: featured hero + latest article card */ .aitshd-mega-featured-col { padding: 24px 24px 22px 4px; display: flex; flex-direction: column; gap: 14px; min-width: 0; border-left: 1px solid var(--aits-line); } .aitshd-mega-hero { position: relative; display: block; border-radius: 20px; padding: 22px 22px 20px; color: #fff !important; background: radial-gradient(circle at 100% 0%, rgba(96,164,245,.55) 0%, transparent 55%), radial-gradient(circle at 0% 100%, rgba(126,34,206,.35) 0%, transparent 55%), linear-gradient(135deg, #0F172A, #1E1B4B 70%, #0B1120); box-shadow: 0 20px 40px -20px rgba(15,23,42,.5), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; text-decoration: none !important; min-height: 260px; } /* Big radial glow orb (upper-right) */ .aitshd-mega-hero::after { content: ''; position: absolute; right: -20px; top: 40%; width: 200px; height: 200px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(147,197,253,.6) 0%, rgba(59,130,246,.35) 40%, transparent 70%); filter: blur(2px); pointer-events: none; } .aitshd-mega-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; z-index: 1; } .aitshd-mega-hero-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #93BEFF; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(96,164,245,.35); background: rgba(96,164,245,.10); } .aitshd-mega-hero-pill svg { color: #FCD34D; } .aitshd-mega-hero-shield { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; color: #FCD34D; flex: none; } .aitshd-mega-hero-avatar { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; position: relative; z-index: 1; } .aitshd-mega-hero-avatar-mark { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--aits-blue-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; letter-spacing: -0.02em; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); flex: none; } .aitshd-mega-hero-avatar-name { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #fff; } .aitshd-mega-hero-verified { width: 18px; height: 18px; border-radius: 999px; background: #3B82F6; display: inline-flex; align-items: center; justify-content: center; color: #fff; } .aitshd-mega-hero-verified svg { width: 11px; height: 11px; } .aitshd-mega-hero-title { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin: 12px 0 6px; color: #fff; max-width: 75%; position: relative; z-index: 1; } .aitshd-mega-hero-sub { display: block; font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.7); line-height: 1.45; max-width: 78%; position: relative; z-index: 1; } .aitshd-mega-hero-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 16px; border-radius: 10px; background: #3B82F6; color: #fff !important; font-size: 13px; font-weight: 600; box-shadow: 0 10px 22px -10px rgba(59,130,246,.7); position: relative; z-index: 1; } .aitshd-mega-hero-cta:hover { background: var(--aits-blue-dark); } .aitshd-mega-hero-cta svg { transition: transform .18s; } .aitshd-mega-hero-cta:hover svg { transform: translateX(2px); } /* Carousel indicator dots */ .aitshd-mega-hero-dots { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; position: relative; z-index: 1; } .aitshd-mega-hero-dot { width: 22px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.24); transition: background .18s, width .18s; } .aitshd-mega-hero-dot.active { background: rgba(255,255,255,.85); width: 28px; } /* Latest Article card in the featured column */ .aitshd-mega-article { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--aits-line); background: var(--aits-card); text-decoration: none; color: var(--aits-ink); transition: border-color .18s, box-shadow .18s, transform .18s; } .aitshd-mega-article:hover { border-color: var(--aits-blue-line); box-shadow: 0 12px 24px -14px rgba(54,128,237,.35); transform: translateY(-1px); } .aitshd-mega-article-thumb { width: 84px; height: 84px; border-radius: 14px; flex: none; background: linear-gradient(135deg, rgba(54,128,237,.24), rgba(1,150,253,.22)); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); font-size: 22px; font-weight: 900; letter-spacing: -0.02em; } .aitshd-mega-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .aitshd-mega-article-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .aitshd-mega-article-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aits-blue); } .aitshd-mega-article-title { font-size: 13.5px; font-weight: 700; color: var(--aits-ink); line-height: 1.35; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-mega-article-meta { font-size: 11.5px; color: var(--aits-mut); display: inline-flex; align-items: center; gap: 6px; } .aitshd-mega-article-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .5; } .aitshd-mega-article-more { font-size: 12px; font-weight: 700; color: var(--aits-blue-dark); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; } /* ──────────────────────────────────────────────────────────────── POPULAR RIGHT NOW strip — full-width row below the mega panel ──────────────────────────────────────────────────────────────── */ .aitshd-mega-popular { border-top: 1px solid var(--aits-line); padding: 18px 24px 22px; background: linear-gradient(0deg, var(--aits-surface-2), var(--aits-card)); } .aitshd-mega-popular-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; } .aitshd-mega-popular-head strong { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aits-blue); } .aitshd-mega-popular-head a { font-size: 13px; font-weight: 600; color: var(--aits-blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .aitshd-mega-popular-head a svg { transition: transform .18s; } .aitshd-mega-popular-head a:hover svg { transform: translateX(2px); } .aitshd-mega-popular-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .aitshd-mega-pop-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s; min-width: 0; } .aitshd-mega-pop-chip:hover { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(54,128,237,.35); } .aitshd-mega-pop-chip-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; } .aitshd-mega-pop-chip[data-tone="indigo"] .aitshd-mega-pop-chip-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-mega-pop-chip[data-tone="violet"] .aitshd-mega-pop-chip-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-mega-pop-chip[data-tone="emerald"] .aitshd-mega-pop-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-mega-pop-chip[data-tone="amber"] .aitshd-mega-pop-chip-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-mega-pop-chip[data-tone="rose"] .aitshd-mega-pop-chip-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-mega-pop-chip[data-tone="cyan"] .aitshd-mega-pop-chip-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-mega-pop-chip[data-tone="pink"] .aitshd-mega-pop-chip-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-mega-pop-chip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; } /* Legacy mini-card selectors kept for backwards compat with any saved admin JSON referencing the older layout */ .aitshd-mega-mini { display: none; } /* ════════════════════════════════════════════════════════════════ AI TOOLS MEGA — premium pass EVERYTHING below is scoped to .aitshd-mega-panel-tools. The base .aitshd-mega-* classes are shared by six other megas (Models, Learn, Deals, Discover, Resources, Blog); scoping keeps this redesign from leaking into them. ════════════════════════════════════════════════════════════════ */ /* ── Pointer notch ──────────────────────────────────────────────── */ /* THE POINTER. A rotated square showing only its two upper borders, so on screen it reads as a chevron aimed at the nav item that opened the panel. Its lower half is tucked behind the panel's top edge (z-index 66 over the panel's 65) and its fill is the panel's own surface, so the two become one shape with no seam. --tip-x is written by the JS from the button's centre — measured, because the nav is centred in a fluid container — and `left` is transitioned, so the arrow SLIDES to the next item when you move along the nav. The borders are brand blue, not --aits-line: at 1px of #ECECEC on a white page the arrow was invisible and the panel looked detached from the bar. 1.5px so the two edges still read after the 45° rotation, where a 1px border lands on a diagonal and antialiases itself away. The panels that show it take a brand-tinted top border to match, so the chevron and the panel edge are one line rather than a blue mark sitting on a grey rule. */ .aitshd-mega-tip { position: absolute; top: 100%; left: var(--tip-x, 50%); width: 17px; height: 17px; border-radius: 5px 0 0 0; background: var(--aits-card); border-left: 2px solid var(--aits-blue); border-top: 2px solid var(--aits-blue); /* +4px, not +5: a 17px square has a 12.02px half-diagonal, so a centre at +12.5px lands its widest line (the two corners) on the panel's top border at +12px and its apex just under the bar. Off by a couple of pixels and the chevron either floats in the gap or steps over the panel edge. */ transform: translate(-50%, 4px) rotate(45deg) scale(.55); transform-origin: center; opacity: 0; pointer-events: none; z-index: 66; transition: left .3s var(--ease,ease), opacity .18s var(--ease,ease), transform .26s var(--ease,ease); } body.theme-dark .aitshd-mega-tip { border-left-color: #60A4F5; border-top-color: #60A4F5; } /* The panel the pointer is aimed at takes a brand top edge, so the chevron and the panel border read as one line. Scoped to the OPEN panel rather than the class, so a closed panel keeps its own. */ .aitshd[data-mega-open="1"] .aitshd-mega-panel-tools:not(.aitshd-mega-panel-aitools), .aitshd[data-mega-aitools-open="1"] .aitshd-mega-panel-aitools, .aitshd[data-mega-models-open="1"] .aitshd-mega-panel-models, .aitshd[data-mega-learn-open="1"] .aitshd-mega-panel-learn, .aitshd[data-mega-deals-open="1"] .aitshd-mega-panel-deals, .aitshd[data-mega-discover-open="1"] .aitshd-mega-panel-discover, .aitshd[data-mega-resources-open="1"] .aitshd-mega-panel-resources { border-top-color: rgb(54 128 237 / .38); } body.theme-dark .aitshd[data-mega-open="1"] .aitshd-mega-panel-tools:not(.aitshd-mega-panel-aitools), body.theme-dark .aitshd[data-mega-aitools-open="1"] .aitshd-mega-panel-aitools, body.theme-dark .aitshd[data-mega-models-open="1"] .aitshd-mega-panel-models, body.theme-dark .aitshd[data-mega-learn-open="1"] .aitshd-mega-panel-learn, body.theme-dark .aitshd[data-mega-deals-open="1"] .aitshd-mega-panel-deals, body.theme-dark .aitshd[data-mega-discover-open="1"] .aitshd-mega-panel-discover, body.theme-dark .aitshd[data-mega-resources-open="1"] .aitshd-mega-panel-resources { border-top-color: rgb(96 164 245 / .34); } .aitshd[data-mega-open="1"] .aitshd-mega-tip, .aitshd[data-mega-aitools-open="1"] .aitshd-mega-tip, .aitshd[data-mega-models-open="1"] .aitshd-mega-tip, .aitshd[data-mega-learn-open="1"] .aitshd-mega-tip, .aitshd[data-mega-deals-open="1"] .aitshd-mega-tip, .aitshd[data-mega-discover-open="1"] .aitshd-mega-tip, .aitshd[data-mega-resources-open="1"] .aitshd-mega-tip { opacity: 1; transform: translate(-50%, 4px) rotate(45deg) scale(1); } @media (max-width: 1023px) { .aitshd-mega-tip { display: none; } } @media (prefers-reduced-motion: reduce) { .aitshd-mega-tip { transition: none; } } /* ── Shell ──────────────────────────────────────────────────────── */ .aitshd-mega-panel-tools { /* A 9-category + 8-use-case panel is taller than a 1024x600 laptop viewport; cap it and let the panel scroll rather than clipping. */ max-height: calc(100vh - var(--hd-h) - 36px);max-height: calc(100dvh - var(--hd-h) - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .aitshd-mega-panel-tools::-webkit-scrollbar { width: 10px; } .aitshd-mega-panel-tools::-webkit-scrollbar-thumb { background: var(--aits-line-strong); border: 3px solid var(--aits-card); border-radius: 999px; } /* Column surfaces — the rail is recessed, the editorial column picks up a whisper of brand, so the four columns read as one composition instead of four boxes butted together. */ /* Gradient runs card → surface so the panel's whole top edge is card coloured; the pointer notch can then match it wherever it lands. */ .aitshd-mega-panel-tools .aitshd-mega-browse { padding: 24px 16px 20px 22px; background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2) 55%); } .aitshd-mega-panel-tools .aitshd-mega-col { padding: 24px 18px 20px; } .aitshd-mega-panel-tools .aitshd-mega-featured-col { padding: 24px 22px 22px 20px; gap: 12px; background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-card) 50%); } /* Solid 1px column borders read as hard seams. Replace them with a vertical rule that fades out at both ends. */ .aitshd-mega-panel-tools .aitshd-mega-browse, .aitshd-mega-panel-tools .aitshd-mega-col, .aitshd-mega-panel-tools .aitshd-mega-featured-col { position: relative; border-left: 0; border-right: 0; } .aitshd-mega-panel-tools .aitshd-mega-wrap > * + *::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, transparent, var(--aits-line) 14%, var(--aits-line) 86%, transparent); pointer-events: none; } /* Wider rail: at 260px "Trending This Week" was being clipped mid-word. */ .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 296px minmax(0,1fr) minmax(0,1fr) 384px; } @media (max-width: 1240px) { .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 274px minmax(0,1fr) minmax(0,1fr) 348px; } .aitshd-mega-panel-tools .aitshd-mega-col { padding: 22px 14px 18px; } } @media (max-width: 1080px) { .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 266px minmax(0,1fr) 336px; } } /* ── Column headings ────────────────────────────────────────────── */ .aitshd-mega-panel-tools .aitshd-mega-colh { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; } .aitshd-mega-panel-tools .aitshd-mega-colh::before { content: ''; flex: none; width: 14px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--aits-blue), var(--aits-blue-light)); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-colh { color: var(--aits-blue-light); } /* ── Rows ───────────────────────────────────────────────────────── */ /* One tone pair per row drives the icon tile AND the accent bar, so they can never drift apart the way eight duplicated rules can. */ .aitshd-mega-panel-tools .aitshd-mega-item { --it-bg: var(--tint-blue-bg); --it-ink: var(--tint-blue-ink); } .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="indigo"] { --it-bg: var(--tint-indigo-bg); --it-ink: var(--tint-indigo-ink); } .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="violet"] { --it-bg: var(--tint-violet-bg); --it-ink: var(--tint-violet-ink); } .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="emerald"] { --it-bg: var(--tint-emerald-bg); --it-ink: var(--tint-emerald-ink); } .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="amber"] { --it-bg: var(--tint-amber-bg); --it-ink: var(--tint-amber-ink); } .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="rose"] { --it-bg: var(--tint-rose-bg); --it-ink: var(--tint-rose-ink); } .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="cyan"] { --it-bg: var(--tint-cyan-bg); --it-ink: var(--tint-cyan-ink); } .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="pink"] { --it-bg: var(--tint-pink-bg); --it-ink: var(--tint-pink-ink); } .aitshd-mega-panel-tools .aitshd-mega-item[data-tone="slate"] { --it-bg: var(--tint-slate-bg); --it-ink: var(--tint-slate-ink); } .aitshd-mega-panel-tools .aitshd-mega-item { border-radius: 14px; padding: 9px 12px; transition: background-color .2s var(--ease,ease), color .2s var(--ease,ease); } .aitshd-mega-panel-tools .aitshd-mega-item.is-lg { padding: 11px 12px; } /* Accent bar lives inside the row's own left padding and is fully rounded, so it never pokes through the corner radius on the short rows in the category column. */ .aitshd-mega-panel-tools .aitshd-mega-item::before { content: ''; position: absolute; left: 3px; top: 50%; width: 3px; height: 58%; border-radius: 999px; background: var(--it-ink); transform: translateY(-50%) scaleY(0); transition: transform .26s var(--ease,ease); } .aitshd-mega-panel-tools .aitshd-mega-item-icon { border-radius: 13px; background-color: var(--it-bg); background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); color: var(--it-ink); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item-icon { background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-mega-panel-tools .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 42px; height: 42px; } .aitshd-mega-panel-tools .aitshd-mega-item-icon svg { width: 19px; height: 19px; } .aitshd-mega-panel-tools .aitshd-mega-item.is-lg .aitshd-mega-item-icon svg { width: 21px; height: 21px; } /* THE CLIPPING FIX. The title is an inline-flex box holding a label and an optional badge; with neither `min-width:0` on the label nor `flex:none` on the badge, the badge got crushed and sliced off ("For yo"). Truncation now happens on the label only. */ .aitshd-mega-panel-tools .aitshd-mega-item-title { overflow: hidden; gap: 7px; } .aitshd-mega-panel-tools .aitshd-mega-item-title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Right-edge badge (NEW / For you) — a sibling of the body, so it can never steal width from the label or be clipped by it. */ .aitshd-mega-panel-tools .aitshd-mega-badge-inline { flex: none; align-self: center; font-size: 10px; font-weight: 800; letter-spacing: .07em; padding: 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; } .aitshd-mega-panel-tools .aitshd-mega-item.is-lg .aitshd-mega-item-title { font-size: 14.5px; } .aitshd-mega-panel-tools .aitshd-mega-item-desc { font-size: 12px; margin-top: 3px; } @media (hover: hover) { .aitshd-mega-panel-tools .aitshd-mega-item:hover::before { transform: translateY(-50%) scaleY(1); } .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.08) rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 10px 22px -10px var(--it-ink); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 22px -10px var(--it-ink); } } .aitshd-mega-panel-tools .aitshd-mega-item:active { background: var(--aits-blue-tint); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover, body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); } /* Count pill */ .aitshd-mega-panel-tools .aitshd-mega-item-count { font-size: 11px; padding: 3px 9px; font-variant-numeric: tabular-nums; } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-count { color: var(--aits-blue-light); } /* Separator + "For you" group in the rail */ .aitshd-mega-panel-tools .aitshd-mega-browse-sep { background: linear-gradient(90deg, var(--aits-line), transparent); margin: 14px 6px 12px; } /* View-all footer — layout only; the button skin lives in the shared "Mega buttons" block below so both panels stay identical. */ .aitshd-mega-panel-tools .aitshd-mega-view-all-link { margin: auto 0 0; align-self: flex-start; } /* ── Editorial column: hero ─────────────────────────────────────── */ /* Brand-aligned background: the base `.aitshd-mega-hero` at line ~2517 uses a dark-navy `#0F172A → #1E1B4B → #0B1120` gradient that reads off-brand next to the light blue theme. Scoped override pushes the whole card into the brand blue family. --aits-blue-dark (#2060C0) is the mid-tone; the two edge stops keep depth without going navy. */ .aitshd-mega-panel-tools .aitshd-mega-hero { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 296px; border-radius: 22px; padding: 20px 20px 18px; background: radial-gradient(circle at 100% 0%, rgba(147,190,255,.32) 0%, transparent 60%), radial-gradient(circle at 0% 100%, rgba(37,99,235,.45) 0%, transparent 55%), linear-gradient(135deg, #1E4FB8, var(--aits-blue-dark) 55%, #143C90); box-shadow: 0 22px 44px -22px rgba(32,96,192,.55), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(147,190,255,.14); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-hero { background: radial-gradient(circle at 100% 0%, rgba(147,190,255,.28) 0%, transparent 60%), radial-gradient(circle at 0% 100%, rgba(37,99,235,.40) 0%, transparent 55%), linear-gradient(135deg, #133672, #0F2C5D 55%, #0A1E44); box-shadow: 0 22px 44px -22px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(147,190,255,.10); } /* Slow aurora that drifts on hover — the card is the one surface in the panel that can carry a flourish. */ .aitshd-mega-panel-tools .aitshd-mega-hero::before { content: ''; position: absolute; left: -25%; right: -25%; top: -35%; height: 85%; background: radial-gradient(55% 55% at 32% 45%, rgba(147,190,255,.35), transparent 72%); pointer-events: none; transition: transform .7s var(--ease,ease); } @media (hover: hover) { .aitshd-mega-panel-tools .aitshd-mega-hero:hover::before { transform: translate3d(7%, 8%, 0) scale(1.12); } .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark { transform: rotate(-5deg) scale(1.05); } } /* Decorative sparkle artwork, bled off the card's right edge. Sits under the copy (z-index 0 vs the content's 1) and is hidden from assistive tech. */ .aitshd-mega-panel-tools .aitshd-mega-hero-art { position: absolute; right: -34px; top: 50%; width: 210px; height: 210px; transform: translateY(-46%); opacity: .95; pointer-events: none; z-index: 0; transition: transform .8s var(--ease,ease), opacity .4s var(--ease,ease); } .aitshd-mega-panel-tools .aitshd-mega-hero-art svg { width: 100%; height: 100%; display: block; } @media (hover: hover) { .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-art { transform: translateY(-49%) scale(1.05) rotate(4deg); opacity: 1; } } /* Copy is capped so it never runs under the artwork. */ .aitshd-mega-panel-tools .aitshd-mega-hero-head, .aitshd-mega-panel-tools .aitshd-mega-hero-avatar, .aitshd-mega-panel-tools .aitshd-mega-hero-title { max-width: 74%; } .aitshd-mega-panel-tools .aitshd-mega-hero-head { max-width: 100%; } /* Reference shows a plain caps label, not a bordered pill. Colour lifts to a near-white blue-tint so it reads cleanly on the brand-blue background (the old #7FB2FF was designed for the darker navy). */ .aitshd-mega-panel-tools .aitshd-mega-hero-pill { padding: 0; border: 0; background: none; color: #C7DDFB; font-size: 11px; letter-spacing: .18em; font-weight: 800; } .aitshd-mega-panel-tools .aitshd-mega-hero-shield { width: 32px; height: 32px; border-radius: 9px; background: rgba(252,211,77,.18); border-color: rgba(252,211,77,.42); color: #FCD34D; } .aitshd-mega-panel-tools .aitshd-mega-hero-avatar { margin-top: 20px; align-items: center; } .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-mark { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; transition: transform .28s var(--ease,ease); } .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-name { font-size: 16px; min-width: 0; } .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-mega-panel-tools .aitshd-mega-hero-verified { flex: none; } .aitshd-mega-panel-tools .aitshd-mega-hero-count { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: rgba(147,197,253,.95); font-variant-numeric: tabular-nums; } .aitshd-mega-panel-tools .aitshd-mega-hero-title { font-size: 16px; line-height: 1.4; margin: 14px 0 0; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Anchors the CTA + dots to the bottom, so the card can stretch to the height of the taller list columns without leaving dead space. */ .aitshd-mega-panel-tools .aitshd-mega-hero-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; position: relative; z-index: 1; } /* Hero CTA — a solid white pill on the dark card. Reads as a proper button (not a dark blob on a dark card) and lifts the arrow into its own tint disc on hover. Uses brand tokens so light/dark auto- swap the arrow tint. */ .aitshd-mega-panel-tools .aitshd-mega-hero-cta { margin-top: 0; padding: 10px 12px 10px 18px; border-radius: 12px; background: #fff; color: var(--aits-blue-dark) !important; box-shadow: 0 12px 24px -12px rgba(15,23,42,.35), inset 0 -1px 0 rgba(15,23,42,.05); max-width: 100%; gap: 10px; transition: background-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease), color .2s var(--ease,ease); } .aitshd-mega-panel-tools .aitshd-mega-hero-cta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; letter-spacing: -.005em; } /* The chevron rides in a small tinted disc so the button reads as a control (label + affordance) rather than a link with a glyph. */ .aitshd-mega-panel-tools .aitshd-mega-hero-cta svg { flex: none; padding: 6px; width: 26px; height: 26px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue-dark); box-sizing: border-box; transition: transform .22s var(--ease,ease), background-color .2s var(--ease,ease); } @media (hover: hover) { .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-cta { background: #fff; transform: translateY(-1px); box-shadow: 0 18px 32px -14px rgba(15,23,42,.5), inset 0 -1px 0 rgba(15,23,42,.05); } .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-cta svg { background: var(--aits-blue); color: #fff; transform: translateX(3px); } } .aitshd-mega-panel-tools .aitshd-mega-hero-cta:active { transform: translateY(0) scale(.98); } /* One dot per category now, driven by the same hover that swaps the card — the old four were decorative and implied a carousel. */ .aitshd-mega-panel-tools .aitshd-mega-hero-dots { margin-top: 0; gap: 5px; flex-wrap: wrap; } .aitshd-mega-panel-tools .aitshd-mega-hero-dot { width: 14px; height: 3px; background: rgba(255,255,255,.24); transition: background-color .22s var(--ease,ease), width .26s var(--ease,ease); } .aitshd-mega-panel-tools .aitshd-mega-hero-dot.active { width: 26px; background: #fff; } /* ── Editorial column: latest article ───────────────────────────── */ /* Label spans the card, thumb + copy sit on the row below it. */ .aitshd-mega-panel-tools .aitshd-mega-article { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 11px; padding: 15px; border-radius: 18px; } .aitshd-mega-panel-tools .aitshd-mega-article-row { display: flex; align-items: flex-start; gap: 13px; min-width: 0; } .aitshd-mega-panel-tools .aitshd-mega-article-label { letter-spacing: .18em; font-size: 10.5px; } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-article-label { color: var(--aits-blue-light); } .aitshd-mega-panel-tools .aitshd-mega-article-title { font-size: 14px; -webkit-line-clamp: 3; } .aitshd-mega-panel-tools .aitshd-mega-article-thumb { width: 78px; height: 78px; border-radius: 13px; } /* Empty state — a branded gradient tile, not a grey initials box. */ .aitshd-mega-panel-tools .aitshd-mega-article.is-empty .aitshd-mega-article-thumb { background: linear-gradient(140deg, var(--aits-blue), var(--aits-blue-dark)); color: #fff; box-shadow: 0 10px 22px -12px rgba(54,128,237,.85), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .3s var(--ease,ease); } @media (hover: hover) { .aitshd-mega-panel-tools .aitshd-mega-article.is-empty:hover .aitshd-mega-article-thumb { transform: rotate(-4deg) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel-tools .aitshd-mega-article.is-empty .aitshd-mega-article-thumb { transition: none; } .aitshd-mega-panel-tools .aitshd-mega-article.is-empty:hover .aitshd-mega-article-thumb { transform: none; } } .aitshd-mega-panel-tools .aitshd-mega-article-thumb img { transition: transform .4s var(--ease,ease); } @media (hover: hover) { .aitshd-mega-panel-tools .aitshd-mega-article:hover .aitshd-mega-article-thumb img { transform: scale(1.07); } .aitshd-mega-panel-tools .aitshd-mega-article:hover .aitshd-mega-article-more svg { transform: translateX(3px); } } .aitshd-mega-panel-tools .aitshd-mega-article-more svg { transition: transform .22s var(--ease,ease); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-article-more { color: var(--aits-blue-light); } /* ── Popular Right Now strip ────────────────────────────────────── */ /* An inset bordered card rather than a full-bleed footer band, so the panel closes on a contained shape (reference). */ .aitshd-mega-panel-tools .aitshd-mega-popular { position: relative; border-top: 0; background: none; padding: 14px 20px 20px; } .aitshd-mega-panel-tools .aitshd-mega-popular > * { position: relative; z-index: 1; } .aitshd-mega-panel-tools .aitshd-mega-popular::before { content: ''; position: absolute; inset: 14px 20px 20px; border: 1px solid var(--aits-line); border-radius: 18px; background: linear-gradient(180deg, var(--aits-surface-2), var(--aits-card)); } .aitshd-mega-panel-tools .aitshd-mega-popular-head { padding: 16px 18px 12px; } .aitshd-mega-panel-tools .aitshd-mega-popular-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .16em; font-weight: 800; } .aitshd-mega-panel-tools .aitshd-mega-popular-head strong::before { content: ''; flex: none; width: 14px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--aits-blue), var(--aits-blue-light)); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-popular-head strong, body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-popular-head a { color: var(--aits-blue-light); } /* Flex, not grid: the trending link is the last item in the row and should size to its text instead of taking a full chip column. */ .aitshd-mega-panel-tools .aitshd-mega-popular-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 0 18px 18px; } /* Deliberately NOT nowrap like the Models strip: this row is driven by the DB `popular_limit` (8 today), and eight chips on one line leaves ~78px of label — every tool name would clip. It wraps instead. */ .aitshd-mega-panel-tools .aitshd-mega-pop-chip { flex: 1 1 186px; max-width: 300px; } /* ── Mega buttons ───────────────────────────────────────────────── One button style for every "View all …" in the Tools and Models panels — the column footers and the popular-strip tail. Scoped to the two panels because .aitshd-mega-view-all-link is also used by Learn / Deals / Discover / Resources, which are out of scope. NOTE: any new shared class must list BOTH panel scopes. Scoped to tools alone, the Models strip inherited nothing and fell back to the site's default anchor colour — that was the red "View all models →" at the end of a blue row. */ .aitshd-mega-panel-tools .aitshd-mega-pop-more, .aitshd-mega-panel-models .aitshd-mega-pop-more, .aitshd-mega-panel-tools .aitshd-mega-view-all-link, .aitshd-mega-panel-models .aitshd-mega-view-all-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; padding: 9px 10px 9px 16px; border-radius: 12px; border: 1px solid var(--aits-blue-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2)); box-shadow: 0 1px 0 rgba(15,23,42,.03), 0 8px 20px -14px rgba(54,128,237,.35), inset 0 1px 0 rgba(255,255,255,.7); font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; color: var(--aits-blue-dark); text-decoration: none; white-space: nowrap; transition: background .22s var(--ease,ease), color .2s var(--ease,ease), border-color .2s var(--ease,ease), box-shadow .22s var(--ease,ease), transform .2s var(--ease,ease); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-pop-more, body.theme-dark .aitshd-mega-panel-models .aitshd-mega-pop-more, body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-view-all-link, body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link { background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px -14px rgba(0,0,0,.6); color: var(--aits-blue-light); } /* The arrow rides in its own tinted disc so the button reads as a control (label + affordance) rather than "text and a chevron". The disc always shows; on hover the whole button flips to solid brand blue and the disc inverts to sit as a knock-out on the fill. */ .aitshd-mega-panel-tools .aitshd-mega-pop-more svg, .aitshd-mega-panel-models .aitshd-mega-pop-more svg, .aitshd-mega-panel-tools .aitshd-mega-view-all-link svg, .aitshd-mega-panel-models .aitshd-mega-view-all-link svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue-dark); box-sizing: border-box; transition: transform .24s var(--ease,ease), background-color .22s var(--ease,ease), color .2s var(--ease,ease); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-pop-more svg, body.theme-dark .aitshd-mega-panel-models .aitshd-mega-pop-more svg, body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-view-all-link svg, body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link svg { background: rgba(147,190,255,.14); color: var(--aits-blue-light); } @media (hover: hover) { .aitshd-mega-panel-tools .aitshd-mega-pop-more:hover, .aitshd-mega-panel-models .aitshd-mega-pop-more:hover, .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover { background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark)); border-color: transparent; color: #fff; box-shadow: 0 14px 26px -12px rgba(54,128,237,.85), inset 0 1px 0 rgba(255,255,255,.28); transform: translateY(-1px); } .aitshd-mega-panel-tools .aitshd-mega-pop-more:hover svg, .aitshd-mega-panel-models .aitshd-mega-pop-more:hover svg, .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover svg, .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover svg { background: rgba(255,255,255,.20); color: #fff; transform: translateX(3px); } } .aitshd-mega-panel-tools .aitshd-mega-pop-more:active, .aitshd-mega-panel-models .aitshd-mega-pop-more:active, .aitshd-mega-panel-tools .aitshd-mega-view-all-link:active, .aitshd-mega-panel-models .aitshd-mega-view-all-link:active { transform: translateY(0) scale(.97); } /* Tail button in the popular strip hugs the right edge of the row. */ .aitshd-mega-panel-tools .aitshd-mega-pop-more, .aitshd-mega-panel-models .aitshd-mega-pop-more { margin-left: auto; } @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel-tools .aitshd-mega-pop-more, .aitshd-mega-panel-models .aitshd-mega-pop-more, .aitshd-mega-panel-tools .aitshd-mega-view-all-link, .aitshd-mega-panel-models .aitshd-mega-view-all-link, .aitshd-mega-panel-tools .aitshd-mega-pop-more svg, .aitshd-mega-panel-models .aitshd-mega-pop-more svg, .aitshd-mega-panel-tools .aitshd-mega-view-all-link svg, .aitshd-mega-panel-models .aitshd-mega-view-all-link svg { transition: none; } .aitshd-mega-panel-tools .aitshd-mega-pop-more:hover, .aitshd-mega-panel-models .aitshd-mega-pop-more:hover, .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-tools .aitshd-mega-pop-more:active, .aitshd-mega-panel-models .aitshd-mega-pop-more:active, .aitshd-mega-panel-tools .aitshd-mega-view-all-link:active, .aitshd-mega-panel-models .aitshd-mega-view-all-link:active { transform: none; } .aitshd-mega-panel-tools .aitshd-mega-pop-more:hover svg, .aitshd-mega-panel-models .aitshd-mega-pop-more:hover svg, .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover svg, .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover svg { transform: none; } } .aitshd-mega-panel-tools .aitshd-mega-pop-chip { padding: 10px 12px; border-radius: 13px; gap: 11px; transition: border-color .18s var(--ease,ease), background-color .18s var(--ease,ease), color .18s var(--ease,ease), transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease); } .aitshd-mega-panel-tools .aitshd-mega-pop-chip-ico { width: 32px; height: 32px; border-radius: 10px; background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); transition: transform .24s var(--ease,ease), box-shadow .22s var(--ease,ease); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-pop-chip-ico { background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } @media (hover: hover) { /* Chip lifts onto brand-blue border ring; icon tips and drops a tone-tinted glow so the colour of the chip echoes the tile. */ .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(54,128,237,.55); } .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico { transform: scale(1.09) rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 10px 18px -10px currentColor; } } .aitshd-mega-panel-tools .aitshd-mega-pop-chip:active { transform: translateY(0) scale(.985); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover { color: var(--aits-blue-light); } @media (hover: none) { .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover { transform: none; box-shadow: none; } } /* ── Motion opt-out ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel-tools .aitshd-mega-item, .aitshd-mega-panel-tools .aitshd-mega-item::before, .aitshd-mega-panel-tools .aitshd-mega-item-icon, .aitshd-mega-panel-tools .aitshd-mega-hero::before, .aitshd-mega-panel-tools .aitshd-mega-hero-avatar-mark, .aitshd-mega-panel-tools .aitshd-mega-hero-dot, .aitshd-mega-panel-tools .aitshd-mega-article-thumb img, .aitshd-mega-panel-tools .aitshd-mega-article-more svg, .aitshd-mega-panel-tools .aitshd-mega-pop-chip-ico { transition: none; } .aitshd-mega-panel-tools .aitshd-mega-item::before { transform: translateY(-50%) scaleY(1); } .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon, .aitshd-mega-panel-tools .aitshd-mega-hero:hover::before, .aitshd-mega-panel-tools .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark, .aitshd-mega-panel-tools .aitshd-mega-article:hover .aitshd-mega-article-thumb img, .aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico { transform: none; } } /* ══════════════════════════════════════════════════════════════════ AI TOOLS MEGA — 2026-07-31 system alignment Completes the set: Resources, Discover, Deals, Learn and Models are all on this system now. The July pass already had this panel on brand blue, so this block only adds the shared behaviours and fixes the clipping the new "Free AI Tools" column would hit. Appended (not merged) on purpose: several rules below repeat a selector declared earlier at equal specificity, so source order is what makes them win. Keep this block LAST in the tools region. ══════════════════════════════════════════════════════════════════ */ .aitshd-mega-panel-tools { /* Tools is the flagship directory — pure brand ramp, same as the Models panel, so the two directory megas read as a pair. */ --tm-a1: #3680ED; --tm-a2: #60A4F5; --tm-a1-soft: rgba(54,128,237,.06); --tm-a2-soft: rgba(96,164,245,.05); max-height: calc(100vh - var(--hd-h) - 30px);max-height: calc(100dvh - var(--hd-h) - 30px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent; } body.theme-dark .aitshd-mega-panel-tools { --tm-a1: #60A4F5; --tm-a2: #93BEFF; --tm-a1-soft: rgba(96,164,245,.10); --tm-a2-soft: rgba(147,190,255,.07); } .aitshd-mega-panel-tools::-webkit-scrollbar { width: 10px; } .aitshd-mega-panel-tools::-webkit-scrollbar-thumb { background: var(--aits-blue-line); border-radius: 999px; border: 3px solid var(--aits-card); } .aitshd-mega-panel-tools::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); } /* Breakpoints aligned with the sibling megas. The Free-AI-Tools lane is the one that drops first at ≤1140 (it is the most repeatable content — every row is reachable from /tools). */ @media (max-width: 1320px) { .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 274px minmax(0,1fr) minmax(0,1fr) 348px; } } @media (max-width: 1140px) { .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 262px minmax(0,1fr) 330px; } .aitshd-mega-panel-tools .aitshd-mega-col-freetools { display: none; } } @media (max-width: 900px) { .aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 1fr; } .aitshd-mega-panel-tools .aitshd-mega-featured-col { display: none; } } /* Columns flex so the view-all pill pins to the bottom. */ .aitshd-mega-panel-tools .aitshd-mega-col, .aitshd-mega-panel-tools .aitshd-mega-browse { display: flex; flex-direction: column; min-width: 0; } /* TITLES WRAP (were nowrap + ellipsis). "Request a Free Tool", "Writing & Content" and "A–Z Tool Index" all ellipsized in a 1fr column at 1280px. */ .aitshd-mega-panel-tools .aitshd-mega-item-title { overflow: hidden; gap: 7px; flex-wrap: wrap; white-space: normal; line-height: 1.22; max-height: 2.44em; } .aitshd-mega-panel-tools .aitshd-mega-item-title > span:first-child { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; } /* DESCS clamp to 2 lines (were one nowrap line from the base rule) — "2,000+ tools · always free" and "Every tool, alphabetically" overflowed the narrower lanes. */ .aitshd-mega-panel-tools .aitshd-mega-item-desc { font-size: 11.5px; margin-top: 2px; line-height: 1.34; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; } /* The FREE pill is a right-edge sibling of the body, so it must never grow or wrap. */ .aitshd-mega-panel-tools .aitshd-mega-badge-inline { flex: none; align-self: center; font-size: 9px; padding: 3px 6px; letter-spacing: .05em; } /* Icon tiles — shared sheen + tone-glow. */ .aitshd-mega-panel-tools .aitshd-mega-item .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } @media (hover: hover) { .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.07) translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor; } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor; } } /* View-all — the shared brand pill with arrow-in-disc, pinned bottom. */ .aitshd-mega-panel-tools .aitshd-mega-view-all-link { margin: auto 0 0; align-self: stretch; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--aits-blue-dark); border: 1px solid var(--aits-blue-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2)); box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6); transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s; } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-view-all-link { color: var(--aits-blue-light); background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .aitshd-mega-panel-tools .aitshd-mega-view-all-link svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue); transition: background .2s, color .2s, transform .2s; } .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-tools .aitshd-mega-view-all-link:focus { color: var(--aits-blue-dark); border-color: var(--aits-blue); background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint)); box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7); transform: translateY(-1px); } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover, body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-view-all-link:focus { color: var(--aits-blue-light); } .aitshd-mega-panel-tools .aitshd-mega-view-all-link:hover svg { background: var(--aits-blue); color: #fff; transform: translateX(3px); } /* Popular Right Now strip — same fix as the Models popular strip: the chips + tail button only fit one line at a ~1440px panel, so at 1280px "AI Prompt Generator" clipped to "AI Prompt Genera…". The row may now wrap and each name may take two lines. */ .aitshd-mega-panel-tools .aitshd-mega-popular-row { flex-wrap: wrap; } .aitshd-mega-panel-tools .aitshd-mega-pop-chip { flex: 1 1 168px; } .aitshd-mega-panel-tools .aitshd-mega-pop-chip-title { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; } /* Category count pills go on-brand on hover, like the sibling megas. */ .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-count { background: var(--aits-blue-tint); color: var(--aits-blue-dark); border-color: transparent; } body.theme-dark .aitshd-mega-panel-tools .aitshd-mega-item:hover .aitshd-mega-item-count { color: var(--aits-blue-light); } /* ──────────────────────────────────────────────────────────────── AI MODELS mega — reuses .aitshd-mega-panel + wrap. Adds provider text-mark chips, small count numbers, popular-model cards (logo mark + name + provider subline). ──────────────────────────────────────────────────────────────── */ .aitshd-mega-models { /* Same panel styling as .aitshd-mega-panel — inherits via markup class */ } /* Provider row — text mark instead of svg icon */ .aitshd-mmg-mark { font-weight: 800; font-size: 14px; letter-spacing: -0.02em; font-family: 'Inter', system-ui, sans-serif; line-height: 1; } /* Small count number (right side, plain — no pill background) */ .aitshd-mmg-count { flex: none; font-size: 13px; font-weight: 700; color: var(--aits-mut); padding: 4px 8px; border-radius: 8px; transition: color .18s, background-color .18s; } .aitshd-mega-item:hover .aitshd-mmg-count { color: var(--aits-blue-dark); background: var(--aits-card); } /* Benchmark row description — same as item-desc, ensures wrap */ .aitshd-mmg-desc { white-space: normal !important; } /* Popular Models strip card — logo + name + provider subline */ .aitshd-mmg-pop-chip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s; min-width: 0; } .aitshd-mmg-pop-chip:hover { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(54,128,237,.35); } .aitshd-mmg-pop-mark { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); font-weight: 800; font-size: 13px; letter-spacing: -0.02em; flex: none; } .aitshd-mmg-pop-chip[data-tone="indigo"] .aitshd-mmg-pop-mark { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-mmg-pop-chip[data-tone="violet"] .aitshd-mmg-pop-mark { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-mmg-pop-chip[data-tone="emerald"] .aitshd-mmg-pop-mark { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-mmg-pop-chip[data-tone="amber"] .aitshd-mmg-pop-mark { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-mmg-pop-chip[data-tone="rose"] .aitshd-mmg-pop-mark { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-mmg-pop-chip[data-tone="cyan"] .aitshd-mmg-pop-mark { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-mmg-pop-chip[data-tone="pink"] .aitshd-mmg-pop-mark { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-mmg-pop-chip[data-tone="slate"] .aitshd-mmg-pop-mark { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-mmg-pop-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .aitshd-mmg-pop-name { font-size: 13.5px; font-weight: 700; color: var(--aits-ink); line-height: 1.2; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-mmg-pop-provider { font-size: 11.5px; font-weight: 400; color: var(--aits-mut); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-mmg-pop-arrow { color: var(--aits-mut); flex: none; transition: color .18s, transform .18s; } .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-arrow { color: var(--aits-blue); transform: translateX(2px); } .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-name { color: var(--aits-blue-dark); } /* Reuse the .aitshd-mega-popular strip container for the row */ .aitshd-mega-models-popular-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } /* ════════════════════════════════════════════════════════════════ AI MODELS MEGA — premium pass Scoped to .aitshd-mega-panel-models for the same reason the tools block is scoped: .aitshd-mega-* is shared by six other megas. ════════════════════════════════════════════════════════════════ */ /* ── Shell ──────────────────────────────────────────────────────── */ .aitshd-mega-panel-models { max-height: calc(100vh - var(--hd-h) - 36px);max-height: calc(100dvh - var(--hd-h) - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .aitshd-mega-panel-models::-webkit-scrollbar { width: 10px; } .aitshd-mega-panel-models::-webkit-scrollbar-thumb { background: var(--aits-line-strong); border: 3px solid var(--aits-card); border-radius: 999px; } /* Explore column at 260px cut "Open Source Models" to "Open Source Mode"; the copy in this mega runs longer than the tools one. */ .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 302px minmax(0,1fr) minmax(0,1fr) 380px; } @media (max-width: 1240px) { .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 278px minmax(0,1fr) minmax(0,1fr) 344px; } .aitshd-mega-panel-models .aitshd-mega-col { padding: 22px 14px 18px; } } @media (max-width: 1080px) { .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 270px minmax(0,1fr) 332px; } } .aitshd-mega-panel-models .aitshd-mega-browse { padding: 24px 16px 20px 22px; background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2) 55%); } .aitshd-mega-panel-models .aitshd-mega-col { padding: 24px 18px 20px; } .aitshd-mega-panel-models .aitshd-mega-featured-col { padding: 24px 22px 22px 20px; gap: 12px; background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-card) 50%); } .aitshd-mega-panel-models .aitshd-mega-browse, .aitshd-mega-panel-models .aitshd-mega-col, .aitshd-mega-panel-models .aitshd-mega-featured-col { position: relative; border-left: 0; border-right: 0; } .aitshd-mega-panel-models .aitshd-mega-wrap > * + *::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, transparent, var(--aits-line) 14%, var(--aits-line) 86%, transparent); pointer-events: none; } /* ── Column headings ────────────────────────────────────────────── */ .aitshd-mega-panel-models .aitshd-mega-colh { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; } .aitshd-mega-panel-models .aitshd-mega-colh::before { content: ''; flex: none; width: 14px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--aits-blue), var(--aits-blue-light)); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-colh { color: var(--aits-blue-light); } /* ── Rows ───────────────────────────────────────────────────────── */ .aitshd-mega-panel-models .aitshd-mega-item { --it-bg: var(--tint-blue-bg); --it-ink: var(--tint-blue-ink); } .aitshd-mega-panel-models .aitshd-mega-item[data-tone="indigo"] { --it-bg: var(--tint-indigo-bg); --it-ink: var(--tint-indigo-ink); } .aitshd-mega-panel-models .aitshd-mega-item[data-tone="violet"] { --it-bg: var(--tint-violet-bg); --it-ink: var(--tint-violet-ink); } .aitshd-mega-panel-models .aitshd-mega-item[data-tone="emerald"] { --it-bg: var(--tint-emerald-bg); --it-ink: var(--tint-emerald-ink); } .aitshd-mega-panel-models .aitshd-mega-item[data-tone="amber"] { --it-bg: var(--tint-amber-bg); --it-ink: var(--tint-amber-ink); } .aitshd-mega-panel-models .aitshd-mega-item[data-tone="rose"] { --it-bg: var(--tint-rose-bg); --it-ink: var(--tint-rose-ink); } .aitshd-mega-panel-models .aitshd-mega-item[data-tone="cyan"] { --it-bg: var(--tint-cyan-bg); --it-ink: var(--tint-cyan-ink); } .aitshd-mega-panel-models .aitshd-mega-item[data-tone="pink"] { --it-bg: var(--tint-pink-bg); --it-ink: var(--tint-pink-ink); } .aitshd-mega-panel-models .aitshd-mega-item[data-tone="slate"] { --it-bg: var(--tint-slate-bg); --it-ink: var(--tint-slate-ink); } .aitshd-mega-panel-models .aitshd-mega-item { border-radius: 14px; padding: 9px 12px; transition: background-color .2s var(--ease,ease), color .2s var(--ease,ease); } .aitshd-mega-panel-models .aitshd-mega-item.is-lg { padding: 11px 12px; } .aitshd-mega-panel-models .aitshd-mega-item::before { content: ''; position: absolute; left: 3px; top: 50%; width: 3px; height: 58%; border-radius: 999px; background: var(--it-ink); transform: translateY(-50%) scaleY(0); transition: transform .26s var(--ease,ease); } .aitshd-mega-panel-models .aitshd-mega-item-icon { border-radius: 13px; background-color: var(--it-bg); background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); color: var(--it-ink); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item-icon { background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-mega-panel-models .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 42px; height: 42px; } .aitshd-mega-panel-models .aitshd-mega-item-icon svg { width: 19px; height: 19px; } .aitshd-mega-panel-models .aitshd-mega-item.is-lg .aitshd-mega-item-icon svg { width: 21px; height: 21px; } /* Provider marks are text, not icons — size them to the tile. */ .aitshd-mega-panel-models .aitshd-mmg-mark { font-size: 13px; } .aitshd-mega-panel-models .aitshd-mega-item-title { overflow: hidden; gap: 7px; } .aitshd-mega-panel-models .aitshd-mega-item-title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-mega-panel-models .aitshd-mega-badge-inline { flex: none; align-self: center; font-size: 10px; font-weight: 800; letter-spacing: .07em; padding: 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; } .aitshd-mega-panel-models .aitshd-mega-item.is-lg .aitshd-mega-item-title { font-size: 14.5px; } .aitshd-mega-panel-models .aitshd-mega-item-desc { font-size: 12px; margin-top: 3px; } @media (hover: hover) { .aitshd-mega-panel-models .aitshd-mega-item:hover::before { transform: translateY(-50%) scaleY(1); } .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.08) rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 10px 22px -10px var(--it-ink); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 22px -10px var(--it-ink); } } .aitshd-mega-panel-models .aitshd-mega-item:active { background: var(--aits-blue-tint); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover, body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); } /* Provider count — a pill, matching the category counts in AI Tools, instead of a bare floating number. */ .aitshd-mega-panel-models .aitshd-mmg-count { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--aits-surface-3); border: 1px solid var(--aits-line); color: var(--aits-mut); font-variant-numeric: tabular-nums; } .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mmg-count { background: var(--aits-card); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mmg-count { color: var(--aits-blue-light); } /* Layout only — button skin comes from the shared "Mega buttons" block in the AI Tools section above. */ .aitshd-mega-panel-models .aitshd-mega-view-all-link { margin: auto 0 0; align-self: flex-start; } /* ── Editorial column: hero ─────────────────────────────────────── */ /* Same brand-blue treatment as the Tools hero, so the two editorial cards read as one family instead of dark-navy odd-ones-out. */ .aitshd-mega-panel-models .aitshd-mega-hero { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 250px; border-radius: 22px; padding: 20px 20px 18px; background: radial-gradient(circle at 100% 0%, rgba(147,190,255,.32) 0%, transparent 60%), radial-gradient(circle at 0% 100%, rgba(37,99,235,.45) 0%, transparent 55%), linear-gradient(135deg, #1E4FB8, var(--aits-blue-dark) 55%, #143C90); box-shadow: 0 22px 44px -22px rgba(32,96,192,.55), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(147,190,255,.14); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-hero { background: radial-gradient(circle at 100% 0%, rgba(147,190,255,.28) 0%, transparent 60%), radial-gradient(circle at 0% 100%, rgba(37,99,235,.40) 0%, transparent 55%), linear-gradient(135deg, #133672, #0F2C5D 55%, #0A1E44); box-shadow: 0 22px 44px -22px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(147,190,255,.10); } .aitshd-mega-panel-models .aitshd-mega-hero::before { content: ''; position: absolute; left: -25%; right: -25%; top: -35%; height: 85%; background: radial-gradient(55% 55% at 32% 45%, rgba(147,190,255,.35), transparent 72%); pointer-events: none; transition: transform .7s var(--ease,ease); } .aitshd-mega-panel-models .aitshd-mega-hero-art { position: absolute; right: -34px; top: 50%; width: 200px; height: 200px; transform: translateY(-46%); opacity: .95; pointer-events: none; z-index: 0; transition: transform .8s var(--ease,ease), opacity .4s var(--ease,ease); } .aitshd-mega-panel-models .aitshd-mega-hero-art svg { width: 100%; height: 100%; display: block; } @media (hover: hover) { .aitshd-mega-panel-models .aitshd-mega-hero:hover::before { transform: translate3d(7%, 8%, 0) scale(1.12); } .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-art { transform: translateY(-49%) scale(1.05) rotate(4deg); opacity: 1; } .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark { transform: rotate(-5deg) scale(1.05); } } .aitshd-mega-panel-models .aitshd-mega-hero-avatar, .aitshd-mega-panel-models .aitshd-mega-hero-title { max-width: 74%; } .aitshd-mega-panel-models .aitshd-mega-hero-pill { padding: 0; border: 0; background: none; color: #C7DDFB; font-size: 11px; letter-spacing: .18em; font-weight: 800; } .aitshd-mega-panel-models .aitshd-mega-hero-shield { width: 32px; height: 32px; border-radius: 9px; background: rgba(252,211,77,.18); border-color: rgba(252,211,77,.42); color: #FCD34D; } .aitshd-mega-panel-models .aitshd-mega-hero-avatar { margin-top: 18px; align-items: center; } .aitshd-mega-panel-models .aitshd-mega-hero-avatar-mark { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; transition: transform .28s var(--ease,ease); } .aitshd-mega-panel-models .aitshd-mega-hero-avatar-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .aitshd-mega-panel-models .aitshd-mega-hero-avatar-name { font-size: 16px; min-width: 0; } .aitshd-mega-panel-models .aitshd-mega-hero-avatar-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-mega-panel-models .aitshd-mega-hero-count { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: rgba(147,197,253,.95); } /* Badge sitting on the dark hero needs its own palette — this used to be an inline style attribute on the element. */ .aitshd-mega-panel-models .aitshd-mega-badge-inline.is-on-dark { background: rgba(52,211,153,.22); color: #6EE7B7; box-shadow: inset 0 0 0 1px rgba(110,231,183,.35); } .aitshd-mega-panel-models .aitshd-mega-hero-title { font-size: 16px; line-height: 1.4; margin: 14px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-mega-panel-models .aitshd-mega-hero-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-start; position: relative; z-index: 1; } /* Mirror the AI Tools hero CTA: white pill with a tinted chevron disc that fills with brand blue on hover. */ .aitshd-mega-panel-models .aitshd-mega-hero-cta { margin-top: 0; padding: 10px 12px 10px 18px; border-radius: 12px; background: #fff; color: var(--aits-blue-dark) !important; box-shadow: 0 12px 24px -12px rgba(15,23,42,.35), inset 0 -1px 0 rgba(15,23,42,.05); max-width: 100%; gap: 10px; transition: background-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease), color .2s var(--ease,ease); } .aitshd-mega-panel-models .aitshd-mega-hero-cta > span { font-weight: 700; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-mega-panel-models .aitshd-mega-hero-cta svg { flex: none; padding: 6px; width: 26px; height: 26px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue-dark); box-sizing: border-box; transition: transform .22s var(--ease,ease), background-color .2s var(--ease,ease); } @media (hover: hover) { .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-cta { background: #fff; transform: translateY(-1px); box-shadow: 0 18px 32px -14px rgba(15,23,42,.5), inset 0 -1px 0 rgba(15,23,42,.05); } .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-cta svg { background: var(--aits-blue); color: #fff; transform: translateX(3px); } } .aitshd-mega-panel-models .aitshd-mega-hero-cta:active { transform: translateY(0) scale(.98); } /* ── Editorial column: action cards ─────────────────────────────── */ /* Previously `.aitshd-mega-mini-card` etc., which have NO stylesheet rules at all — the cards rendered as bare inline spans in the site's default link red, with title and description run together. */ .aitshd-mmg-acts { display: flex; flex-direction: column; gap: 10px; } .aitshd-mmg-act { --ac-bg: var(--tint-violet-bg); --ac-ink: var(--tint-violet-ink); position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px; border-radius: 16px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; min-width: 0; transition: border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease); } .aitshd-mmg-act[data-tone="blue"] { --ac-bg: var(--tint-blue-bg); --ac-ink: var(--tint-blue-ink); } .aitshd-mmg-act[data-tone="indigo"] { --ac-bg: var(--tint-indigo-bg); --ac-ink: var(--tint-indigo-ink); } .aitshd-mmg-act[data-tone="emerald"] { --ac-bg: var(--tint-emerald-bg); --ac-ink: var(--tint-emerald-ink); } .aitshd-mmg-act[data-tone="amber"] { --ac-bg: var(--tint-amber-bg); --ac-ink: var(--tint-amber-ink); } .aitshd-mmg-act[data-tone="rose"] { --ac-bg: var(--tint-rose-bg); --ac-ink: var(--tint-rose-ink); } .aitshd-mmg-act[data-tone="cyan"] { --ac-bg: var(--tint-cyan-bg); --ac-ink: var(--tint-cyan-ink); } .aitshd-mmg-act-ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; background-color: var(--ac-bg); background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); color: var(--ac-ink); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); transition: transform .24s var(--ease,ease); } body.theme-dark .aitshd-mmg-act-ico { background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-mmg-act-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .aitshd-mmg-act-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--aits-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-mmg-act-desc { margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--aits-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-mmg-act-arrow { flex: none; margin-top: 2px; color: var(--aits-faint); transition: color .2s var(--ease,ease), transform .22s var(--ease,ease); } @media (hover: hover) { .aitshd-mmg-act:hover { border-color: var(--aits-blue-line); box-shadow: 0 14px 28px -18px rgba(54,128,237,.55); transform: translateY(-1px); } .aitshd-mmg-act:hover .aitshd-mmg-act-ico { transform: scale(1.08) rotate(-4deg); } .aitshd-mmg-act:hover .aitshd-mmg-act-arrow { color: var(--aits-blue); transform: translateX(3px); } .aitshd-mmg-act:hover .aitshd-mmg-act-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-mmg-act:hover .aitshd-mmg-act-title { color: var(--aits-blue-light); } } .aitshd-mmg-act:active { transform: translateY(0) scale(.99); } /* ── Popular Models strip ───────────────────────────────────────── */ .aitshd-mega-panel-models .aitshd-mega-popular { position: relative; border-top: 0; background: none; padding: 14px 20px 20px; } .aitshd-mega-panel-models .aitshd-mega-popular > * { position: relative; z-index: 1; } .aitshd-mega-panel-models .aitshd-mega-popular::before { content: ''; position: absolute; inset: 14px 20px 20px; border: 1px solid var(--aits-line); border-radius: 18px; background: linear-gradient(180deg, var(--aits-surface-2), var(--aits-card)); } .aitshd-mega-panel-models .aitshd-mega-popular-head { padding: 16px 18px 12px; } .aitshd-mega-panel-models .aitshd-mega-popular-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .16em; font-weight: 800; } .aitshd-mega-panel-models .aitshd-mega-popular-head strong::before { content: ''; flex: none; width: 14px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--aits-blue), var(--aits-blue-light)); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-popular-head strong { color: var(--aits-blue-light); } /* Single row, always. `flex: 1 1 0` makes all six chips share the space equally with the tail button; nowrap keeps them on one line. The budget at a 1440px panel: ~1364px of row, minus a ~150px button and 6×8px gaps, leaves ~194px per chip. With a 30px mark, 10px gap and 11px padding each side that is ~132px of label — enough for the longest name here ("Claude 3.5 Sonnet", ~123px at 13px/700). Dropping the per-chip chevron is what freed the last 24px. Redo this sum before adding a seventh chip or a longer button label. */ .aitshd-mega-panel-models .aitshd-mega-models-popular-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 0 18px 18px; } .aitshd-mega-panel-models .aitshd-mmg-pop-chip { flex: 1 1 0; min-width: 0; max-width: none; padding: 9px 11px; gap: 10px; border-radius: 13px; } .aitshd-mega-panel-models .aitshd-mmg-pop-name { font-size: 13px; } .aitshd-mega-panel-models .aitshd-mmg-pop-provider { font-size: 11px; } .aitshd-mega-panel-models .aitshd-mmg-pop-mark { width: 30px; height: 30px; border-radius: 10px; font-size: 11.5px; background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); transition: transform .24s var(--ease,ease); } body.theme-dark .aitshd-mega-panel-models .aitshd-mmg-pop-mark { background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } /* Hover: the whole chip lifts onto a brand-tinted ring, the mark tips and drops a tone-tinted glow (`currentColor` inherits the tone attribute via the mark's own ink). Gated so a tap on a touch laptop doesn't stick. */ @media (hover: hover) { .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover { border-color: var(--aits-blue-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2)); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(54,128,237,.55); } .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-mark { transform: scale(1.09) rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 10px 18px -10px currentColor; } } .aitshd-mega-panel-models .aitshd-mmg-pop-chip:active { transform: translateY(0) scale(.985); } /* The unscoped base rule lifts on :hover without a pointer guard, which sticks after a tap on a touch laptop. */ @media (hover: none) { .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover { transform: none; box-shadow: none; } } body.theme-dark .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-name { color: var(--aits-blue-light); } body.theme-dark .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover { background: var(--aits-surface-3); } /* ── Motion opt-out ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel-models .aitshd-mega-item, .aitshd-mega-panel-models .aitshd-mega-item::before, .aitshd-mega-panel-models .aitshd-mega-item-icon, .aitshd-mega-panel-models .aitshd-mega-hero::before, .aitshd-mega-panel-models .aitshd-mega-hero-art, .aitshd-mega-panel-models .aitshd-mega-hero-avatar-mark, .aitshd-mega-panel-models .aitshd-mmg-pop-mark, .aitshd-mega-panel-models .aitshd-mmg-pop-chip, .aitshd-mmg-act, .aitshd-mmg-act-ico, .aitshd-mmg-act-arrow { transition: none; } .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover, .aitshd-mega-panel-models .aitshd-mmg-pop-chip:active { transform: none; } .aitshd-mega-panel-models .aitshd-mega-item::before { transform: translateY(-50%) scaleY(1); } .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon, .aitshd-mega-panel-models .aitshd-mega-hero:hover::before, .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-art, .aitshd-mega-panel-models .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark, .aitshd-mega-panel-models .aitshd-mmg-pop-chip:hover .aitshd-mmg-pop-mark, .aitshd-mmg-act:hover, .aitshd-mmg-act:hover .aitshd-mmg-act-ico, .aitshd-mmg-act:hover .aitshd-mmg-act-arrow { transform: none; } } /* ══════════════════════════════════════════════════════════════════ AI MODELS MEGA — 2026-07-31 system alignment The July premium pass already put this panel on brand blue, so this block does NOT restyle it from scratch — it brings the four behaviours the Resources / Discover / Deals / Learn redesigns standardised on, and fixes the clipping the new "By Capability" column would otherwise hit. Appended (not merged) on purpose: every rule below repeats a selector declared earlier in this file at equal specificity, so source order is what makes it win. Keep this block LAST in the models region. ══════════════════════════════════════════════════════════════════ */ .aitshd-mega-panel-models { /* Models is the core directory, so it keeps the pure brand ramp rather than a coloured tail like its four siblings. */ --mm-a1: #3680ED; --mm-a2: #60A4F5; --mm-a1-soft: rgba(54,128,237,.06); --mm-a2-soft: rgba(96,164,245,.05); /* Dense 4-lane panel needs a scroll cap on short laptops. */ max-height: calc(100vh - var(--hd-h) - 30px);max-height: calc(100dvh - var(--hd-h) - 30px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent; } body.theme-dark .aitshd-mega-panel-models { --mm-a1: #60A4F5; --mm-a2: #93BEFF; --mm-a1-soft: rgba(96,164,245,.10); --mm-a2-soft: rgba(147,190,255,.07); } .aitshd-mega-panel-models::-webkit-scrollbar { width: 10px; } .aitshd-mega-panel-models::-webkit-scrollbar-thumb { background: var(--aits-blue-line); border-radius: 999px; border: 3px solid var(--aits-card); } .aitshd-mega-panel-models::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); } /* Breakpoints aligned with the sibling megas (was 1240 / 1080). */ @media (max-width: 1320px) { .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 278px minmax(0,1fr) minmax(0,1fr) 344px; } } @media (max-width: 1140px) { .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 262px minmax(0,1fr) 322px; } } @media (max-width: 900px) { .aitshd-mega-panel-models .aitshd-mega-wrap { grid-template-columns: 1fr; } .aitshd-mega-panel-models .aitshd-mega-featured-col { display: none; } } /* Columns become flex so the view-all pill can pin to the bottom and the three lanes end on the same baseline. */ .aitshd-mega-panel-models .aitshd-mega-col, .aitshd-mega-panel-models .aitshd-mega-browse { display: flex; flex-direction: column; min-width: 0; } /* TITLES WRAP (were nowrap+ellipsis). The By-Capability lane carries "Chat & Assistants" / "Image Generation" / "Freemium Models", which ellipsized in a 1fr column at 1280px. */ .aitshd-mega-panel-models .aitshd-mega-item-title { overflow: hidden; gap: 7px; flex-wrap: wrap; white-space: normal; line-height: 1.22; max-height: 2.44em; } .aitshd-mega-panel-models .aitshd-mega-item-title > span:first-child { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; } /* DESCS clamp to 2 lines (were a single nowrap line from the base rule) — "Voice, music & transcription", "See, read & understand images" and "Search, RAG & similarity" all overflowed. */ .aitshd-mega-panel-models .aitshd-mega-item-desc { font-size: 11.5px; margin-top: 2px; line-height: 1.34; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; } /* Icon tiles — the sheen + tone-glow the sibling megas use. */ .aitshd-mega-panel-models .aitshd-mega-item .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } @media (hover: hover) { .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.07) translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor; } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor; } } /* View-all — the shared brand pill with an arrow-in-disc, pinned to the column bottom so the lanes end level. */ .aitshd-mega-panel-models .aitshd-mega-view-all-link { margin: auto 0 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--aits-blue-dark); border: 1px solid var(--aits-blue-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2)); box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6); white-space: nowrap; transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s; } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link { color: var(--aits-blue-light); background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .aitshd-mega-panel-models .aitshd-mega-view-all-link svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue); transition: background .2s, color .2s, transform .2s; } .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-models .aitshd-mega-view-all-link:focus { color: var(--aits-blue-dark); border-color: var(--aits-blue); background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint)); box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7); transform: translateY(-1px); } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover, body.theme-dark .aitshd-mega-panel-models .aitshd-mega-view-all-link:focus { color: var(--aits-blue-light); } .aitshd-mega-panel-models .aitshd-mega-view-all-link:hover svg { background: var(--aits-blue); color: #fff; transform: translateX(3px); } /* Popular Models strip — the six chips + tail button only fit one line at a ~1440px panel; at 1280px "Claude 3.5 Sonnet" clipped to "Claude 3.5 S…". The row may now wrap and each name may take two lines, so no model name is ever truncated at any width. (Supersedes the single-line arithmetic noted in the 2026-07-25 pass.) */ .aitshd-mega-panel-models .aitshd-mega-models-popular-row { flex-wrap: wrap; } .aitshd-mega-panel-models .aitshd-mmg-pop-chip { flex: 1 1 176px; } .aitshd-mega-panel-models .aitshd-mmg-pop-name { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; } .aitshd-mega-panel-models .aitshd-mmg-pop-provider { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Provider rows keep their count pill on-brand on hover. */ .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-count { background: var(--aits-blue-tint); color: var(--aits-blue-dark); border-color: transparent; } body.theme-dark .aitshd-mega-panel-models .aitshd-mega-item:hover .aitshd-mega-item-count { color: var(--aits-blue-light); } /* ══════════════════════════════════════════════════════════════════ AI LEARN MEGA — premium learning hub (2026-07-31 redesign) Four learning lanes (Courses / Projects / Prompts / Templates) + a Featured-Course hero with side cards, then a Popular Right Now strip and a trust-badge footer. Identity: BRAND-BLUE led (#3680ED → cyan #0196FD) — the fourth sibling of the redesigned set (Resources blue→indigo, Discover blue→cyan, Deals blue→rose). Violet is the education tail; the chrome and every CTA are brand blue. Fixes shipped here (live bugs in the screenshot): · row descriptions no longer clip at one line ("Optimized for…" → "Optimized for ChatGPT"). · Popular Right Now chip names wrap instead of ellipsizing. · the hero's BESTSELLER badge can never be stranded on its own line by the wrapping title (the Discover badge trap). · view-all links pin to the column bottoms. All rules scoped under .aitshd-mega-panel-learn (or the .aitshd-lm-* / .aitshd-drawer-learn-* namespaces) so nothing leaks into the six sibling megas. ══════════════════════════════════════════════════════════════════ */ /* Panel-local accent tokens — retune the whole identity here. */ .aitshd-mega-panel-learn { --lm-a1: #3680ED; /* brand blue */ --lm-a2: #0196FD; /* brand cyan */ --lm-a1-soft: rgba(54,128,237,.06); --lm-a2-soft: rgba(1,150,253,.05); --lm-grad: linear-gradient(90deg, var(--lm-a1), var(--lm-a2)); } body.theme-dark .aitshd-mega-panel-learn { --lm-a1: #60A4F5; --lm-a2: #5CCBFF; --lm-a1-soft: rgba(96,164,245,.10); --lm-a2-soft: rgba(92,203,255,.08); } .aitshd[data-mega-learn-open="1"] .aitshd-mega-panel-learn { display: block; opacity: 1; transform: translate(-50%, 12px); } .aitshd[data-mega-learn-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; } /* Panel shell — brand-blue ambient wash toward the featured rail, scroll-capped with a branded scrollbar so four dense lanes fit a short laptop/tablet. */ .aitshd-mega-panel-learn { background: radial-gradient(120% 90% at 100% 0%, rgba(54,128,237,.05) 0%, transparent 52%), radial-gradient(90% 120% at 100% 100%, rgba(1,150,253,.045) 0%, transparent 55%), var(--aits-card); max-height: calc(100vh - var(--hd-h) - 30px);max-height: calc(100dvh - var(--hd-h) - 30px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent; } body.theme-dark .aitshd-mega-panel-learn { background: radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.10) 0%, transparent 52%), radial-gradient(90% 120% at 100% 100%, rgba(56,189,248,.07) 0%, transparent 55%), var(--aits-card); } .aitshd-mega-panel-learn::-webkit-scrollbar { width: 10px; } .aitshd-mega-panel-learn::-webkit-scrollbar-thumb { background: var(--aits-blue-line); border-radius: 999px; border: 3px solid var(--aits-card); } .aitshd-mega-panel-learn::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); } /* ── Grid — four equal lanes + the featured rail. */ .aitshd-mega-panel-learn .aitshd-mega-wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 326px; } @media (max-width: 1320px) { .aitshd-mega-panel-learn .aitshd-mega-wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 296px; } } @media (max-width: 1140px) { .aitshd-mega-panel-learn .aitshd-mega-wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 296px; } .aitshd-mega-panel-learn .aitshd-mega-col-templates { display: none; } } @media (max-width: 900px) { .aitshd-mega-panel-learn .aitshd-mega-wrap { grid-template-columns: 1fr; } .aitshd-mega-panel-learn .aitshd-mega-featured-col { display: none; } } /* Columns — flex-column so the view-all pill can pin to the bottom. */ .aitshd-mega-panel-learn .aitshd-mega-col { padding: 24px 14px 18px; position: relative; display: flex; flex-direction: column; min-width: 0; } .aitshd-mega-panel-learn .aitshd-mega-col + .aitshd-mega-col { border-left: 1px solid transparent; background-image: linear-gradient(180deg, transparent, var(--aits-line) 12%, var(--aits-line) 88%, transparent); background-repeat: no-repeat; background-size: 1px 100%; background-position: left center; } .aitshd-mega-panel-learn .aitshd-mega-featured-col { padding: 24px 22px 20px 8px; gap: 12px; } /* Column headers — brand accent bar + tidy label */ .aitshd-mega-panel-learn .aitshd-mega-colh { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); padding: 2px 6px 12px; position: relative; display: flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-colh { color: var(--aits-blue-light); } .aitshd-mega-panel-learn .aitshd-mega-colh::before { content: ''; width: 18px; height: 3px; border-radius: 999px; background: var(--lm-grad); flex: none; } /* ── Row items — accent bar wipes in, icon lifts with a tone glow, title wraps to 2 lines, desc clamps at 2 (was 1 — the clip). */ .aitshd-mega-panel-learn .aitshd-mega-item, .aitshd-mega-panel-learn .aitshd-mega-item.is-lg { padding: 9px 8px 9px 14px; gap: 10px; border-radius: 13px; align-items: center; transition: background-color .2s var(--ease,ease), transform .18s var(--ease,ease); } .aitshd-mega-panel-learn .aitshd-mega-item::before { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 22px; border-radius: 999px; background: var(--lm-grad); transform: translateY(-50%) scaleY(.2); transform-origin: center; opacity: 0; transition: transform .22s var(--ease,ease), opacity .22s var(--ease,ease); } .aitshd-mega-panel-learn .aitshd-mega-item:hover { background: linear-gradient(90deg, var(--lm-a1-soft), var(--lm-a2-soft)); } .aitshd-mega-panel-learn .aitshd-mega-item:hover::before { transform: translateY(-50%) scaleY(1); opacity: 1; } .aitshd-mega-panel-learn .aitshd-mega-item .aitshd-mega-item-icon, .aitshd-mega-panel-learn .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 38px; height: 38px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55); } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item .aitshd-mega-item-icon, body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item.is-lg .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-mega-panel-learn .aitshd-mega-item-icon svg { width: 18px; height: 18px; } .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.07) translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor; } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor; } /* Title — wraps to 2 lines; the FREE badge is held on the last flow line by the universal label-shrink rule + flex:none below. */ .aitshd-mega-panel-learn .aitshd-mega-item-title, .aitshd-mega-panel-learn .aitshd-mega-item.is-lg .aitshd-mega-item-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.22; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; max-height: 2.44em; } .aitshd-mega-panel-learn .aitshd-mega-badge-inline { flex: none; font-size: 9px; padding: 3px 6px; letter-spacing: .05em; } /* Desc — TWO-line clamp (was 1: that clipped "Optimized for ChatGPT", "Blogs, articles & more", "Plans, docs & more"). */ .aitshd-mega-panel-learn .aitshd-mega-item-desc { font-size: 11.5px; font-weight: 400; color: var(--aits-mut); line-height: 1.34; margin-top: 2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); } .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-mega-item-arrow { color: var(--aits-blue); } /* View-all — brand pill pinned to the column bottom, arrow-in-disc slides on hover. Kills the ragged column tails. */ .aitshd-mega-panel-learn .aitshd-mega-view-all-link { margin: auto 0 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--aits-blue-dark); border: 1px solid var(--aits-blue-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2)); box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6); transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s; } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-view-all-link { color: var(--aits-blue-light); background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .aitshd-mega-panel-learn .aitshd-mega-view-all-link svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue); transition: background .2s, color .2s, transform .2s; } .aitshd-mega-panel-learn .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-learn .aitshd-mega-view-all-link:focus { color: var(--aits-blue-dark); border-color: var(--aits-blue); background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint)); box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7); transform: translateY(-1px); } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-view-all-link:hover, body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-view-all-link:focus { color: var(--aits-blue-light); } .aitshd-mega-panel-learn .aitshd-mega-view-all-link:hover svg { background: var(--aits-blue); color: #fff; transform: translateX(3px); } /* Usage-count pill (10K+, 2.1K+ …) — slim capsule that promotes to brand tint on hover. */ .aitshd-lm-count { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: var(--aits-mut); padding: 3px 7px; border-radius: 999px; background: var(--aits-surface-3); border: 1px solid transparent; transition: color .2s, background-color .2s, border-color .2s, transform .2s; } .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-lm-count { background: var(--aits-blue-tint); color: var(--aits-blue-dark); border-color: var(--aits-blue-line); transform: translateX(-2px); } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-item:hover .aitshd-lm-count { color: var(--aits-blue-light); } /* ═══════ Featured Course hero ═══════ Deep-navy glass in the shared hero family (same base as the Resources / Discover / Deals heroes) with a brand-blue halo and a violet education glow. */ .aitshd-mega-panel-learn .aitshd-mega-hero { padding: 22px; min-height: 276px; background: radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.42) 0%, transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(56,189,248,.36) 0%, transparent 55%), linear-gradient(140deg, #0E1B3A 0%, #122152 52%, #0B1226 100%); box-shadow: 0 24px 48px -22px rgba(15,23,42,.55), inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.05); } .aitshd-mega-panel-learn .aitshd-mega-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 14px 14px; opacity: .06; pointer-events: none; } .aitshd-mega-panel-learn .aitshd-mega-hero::after { right: -40px; top: 30%; width: 240px; height: 240px; background: radial-gradient(circle at 30% 30%, rgba(147,197,253,.42) 0%, rgba(96,164,245,.20) 45%, transparent 72%); } .aitshd-mega-panel-learn .aitshd-mega-hero-head { align-items: center; gap: 8px; flex-wrap: wrap; } .aitshd-mega-panel-learn .aitshd-mega-hero-pill { padding: 6px 11px; font-size: 10px; letter-spacing: .16em; background: linear-gradient(135deg, rgba(147,190,255,.18), rgba(56,189,248,.12)); border-color: rgba(147,190,255,.32); color: #BFE0FF; backdrop-filter: blur(6px); } .aitshd-mega-panel-learn .aitshd-mega-hero-shield { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, rgba(252,211,77,.22), rgba(251,146,60,.18)); border-color: rgba(252,211,77,.35); } .aitshd-mega-panel-learn .aitshd-mega-hero-avatar { margin-top: 22px; align-items: center; min-width: 0; } .aitshd-mega-panel-learn .aitshd-mega-hero-avatar-mark { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #ffffff, #EAF2FD); color: var(--aits-blue-dark); box-shadow: 0 10px 24px -8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .28s var(--ease,ease); } .aitshd-mega-panel-learn .aitshd-mega-hero:hover .aitshd-mega-hero-avatar-mark { transform: scale(1.05) rotate(-3deg); } /* NO flex-wrap here — with wrap on, the flex algorithm wraps the badge to its own line BEFORE it will shrink the label, which is exactly what stranded "BESTSELLER" under the title (the Discover badge trap, re-hit here). Single flex line + a shrinkable label lets the TEXT reflow internally while the badge stays inline. */ .aitshd-mega-panel-learn .aitshd-mega-hero-avatar-name { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 7px; min-width: 0; line-height: 1.18; } .aitshd-mega-panel-learn .aitshd-mega-hero-avatar-name > span:first-child { flex: 1 1 auto; min-width: 0; } /* Hero CTA — the BRAND gradient, matching every other mega's primary button. */ .aitshd-mega-panel-learn .aitshd-mega-hero-cta { margin-top: 18px; padding: 12px 20px; border-radius: 12px; background: linear-gradient(135deg, #3680ED, #4F46E5); font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; box-shadow: 0 14px 28px -10px rgba(54,128,237,.62), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .2s, box-shadow .2s, background .2s, filter .2s; } .aitshd-mega-panel-learn .aitshd-mega-hero-cta:hover, .aitshd-mega-panel-learn .aitshd-mega-hero:hover .aitshd-mega-hero-cta { background: linear-gradient(135deg, #2060C0, #4338CA); transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 20px 32px -12px rgba(54,128,237,.78), inset 0 1px 0 rgba(255,255,255,.26); } .aitshd-mega-panel-learn .aitshd-mega-hero-cta svg { transition: transform .2s; } .aitshd-mega-panel-learn .aitshd-mega-hero-cta:hover svg, .aitshd-mega-panel-learn .aitshd-mega-hero:hover .aitshd-mega-hero-cta svg { transform: translateX(4px); } /* ═══════ Stacked side cards (Trending Project / Popular Prompt) ═══════ */ .aitshd-lm-side { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 15px; border-radius: 16px; border: 1px solid var(--aits-line); background: var(--aits-card); text-decoration: none; color: var(--aits-ink); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; } .aitshd-lm-side::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tint-blue-ink), rgba(1,150,253,.6)); opacity: .5; transition: opacity .2s; } .aitshd-lm-side[data-tone="violet"]::before { background: linear-gradient(90deg, var(--tint-violet-ink), rgba(14,165,233,.6)); } .aitshd-lm-side[data-tone="emerald"]::before { background: linear-gradient(90deg, var(--tint-emerald-ink), rgba(16,185,129,.6)); } .aitshd-lm-side[data-tone="amber"]::before { background: linear-gradient(90deg, var(--tint-amber-ink), rgba(245,158,11,.6)); } .aitshd-lm-side[data-tone="rose"]::before { background: linear-gradient(90deg, var(--tint-rose-ink), rgba(244,63,94,.6)); } .aitshd-lm-side:hover { border-color: var(--aits-blue-line); box-shadow: 0 16px 30px -18px rgba(54,128,237,.42); transform: translateY(-2px); } .aitshd-lm-side:hover::before { opacity: 1; } .aitshd-lm-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); } body.theme-dark .aitshd-lm-side-head { color: var(--aits-blue-light); } .aitshd-lm-side-head svg { flex: none; color: var(--aits-faint); transition: color .2s, transform .2s; } .aitshd-lm-side:hover .aitshd-lm-side-head svg { color: var(--aits-blue); transform: translateX(4px); } .aitshd-lm-side-body { display: flex; gap: 12px; align-items: flex-start; } .aitshd-lm-side-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s, box-shadow .2s; } body.theme-dark .aitshd-lm-side-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-lm-side:hover .aitshd-lm-side-ico { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor; } .aitshd-lm-side[data-tone="violet"] .aitshd-lm-side-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-lm-side[data-tone="emerald"] .aitshd-lm-side-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-lm-side[data-tone="amber"] .aitshd-lm-side-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-lm-side[data-tone="rose"] .aitshd-lm-side-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-lm-side-title { font-size: 13.5px; font-weight: 700; color: var(--aits-ink); line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-lm-side:hover .aitshd-lm-side-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-lm-side:hover .aitshd-lm-side-title { color: var(--aits-blue-light); } .aitshd-lm-side-desc { font-size: 11.5px; font-weight: 400; color: var(--aits-mut); line-height: 1.4; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ═══════ Popular Right Now strip ═══════ */ .aitshd-mega-panel-learn .aitshd-mega-popular { padding: 18px 24px 20px; background: linear-gradient(0deg, var(--aits-surface-2) 0%, var(--aits-card) 80%); } .aitshd-mega-panel-learn .aitshd-mega-popular-head { padding: 0 4px 14px; gap: 12px; flex-wrap: wrap; } .aitshd-mega-panel-learn .aitshd-mega-popular-head strong { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); display: inline-flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-popular-head strong { color: var(--aits-blue-light); } .aitshd-mega-panel-learn .aitshd-mega-popular-head strong::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--aits-blue); box-shadow: 0 0 0 3px rgba(54,128,237,.22); animation: aitshdLmPulse 2.2s ease-in-out infinite; } @keyframes aitshdLmPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(54,128,237,.22); } 50% { box-shadow: 0 0 0 6px rgba(54,128,237,.05); } } @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel-learn .aitshd-mega-popular-head strong::before { animation: none; } } .aitshd-mega-panel-learn .aitshd-mega-popular-head a { font-size: 12.5px; font-weight: 700; color: var(--aits-blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; transition: background .18s, color .18s; } body.theme-dark .aitshd-mega-panel-learn .aitshd-mega-popular-head a { color: var(--aits-blue-light); } .aitshd-mega-panel-learn .aitshd-mega-popular-head a:hover { background: var(--aits-blue-tint); } .aitshd-mega-panel-learn .aitshd-mega-popular-head a svg { transition: transform .2s; } .aitshd-mega-panel-learn .aitshd-mega-popular-head a:hover svg { transform: translateX(3px); } .aitshd-lm-pop-chip { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; min-width: 0; box-shadow: 0 1px 0 rgba(15,23,42,.03); } .aitshd-lm-pop-chip:hover { border-color: var(--aits-blue-line); transform: translateY(-2px); box-shadow: 0 16px 28px -18px rgba(54,128,237,.42), 0 2px 4px rgba(15,23,42,.04); } .aitshd-lm-pop-mark { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); font-weight: 900; font-size: 14px; letter-spacing: -0.02em; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s, box-shadow .2s; } body.theme-dark .aitshd-lm-pop-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-lm-pop-chip:hover .aitshd-lm-pop-mark { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor; } .aitshd-lm-pop-chip[data-tone="indigo"] .aitshd-lm-pop-mark { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-lm-pop-chip[data-tone="violet"] .aitshd-lm-pop-mark { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-lm-pop-chip[data-tone="emerald"] .aitshd-lm-pop-mark { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-lm-pop-chip[data-tone="amber"] .aitshd-lm-pop-mark { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-lm-pop-chip[data-tone="rose"] .aitshd-lm-pop-mark { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-lm-pop-chip[data-tone="cyan"] .aitshd-lm-pop-mark { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-lm-pop-chip[data-tone="pink"] .aitshd-lm-pop-mark { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-lm-pop-chip[data-tone="slate"] .aitshd-lm-pop-mark { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-lm-pop-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } /* Name wraps to 2 lines — "AI Image Generator Prompts" and "Midjourney Prompt Pack" ellipsized at 220px chip width. */ .aitshd-lm-pop-name { font-size: 13px; font-weight: 700; color: var(--aits-ink); line-height: 1.22; letter-spacing: -0.01em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-lm-pop-chip:hover .aitshd-lm-pop-name { color: var(--aits-blue-dark); } body.theme-dark .aitshd-lm-pop-chip:hover .aitshd-lm-pop-name { color: var(--aits-blue-light); } .aitshd-lm-pop-meta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 500; color: var(--aits-mut); margin-top: 3px; } .aitshd-lm-pop-meta svg { color: #F59E0B; width: 12px; height: 12px; flex: none; } .aitshd-lm-pop-meta .rating { font-weight: 700; color: var(--aits-ink); } .aitshd-lm-popular-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 10px; } /* ═══════ Trust badges strip ═══════ */ .aitshd-lm-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; padding: 16px 24px 20px; border-top: 1px solid var(--aits-line); background: linear-gradient(0deg, var(--aits-surface-2), var(--aits-card)); } .aitshd-lm-trust-item { display: flex; align-items: center; gap: 12px; padding: 6px 20px; font-size: 13px; font-weight: 600; color: var(--aits-ink); position: relative; } .aitshd-lm-trust-item + .aitshd-lm-trust-item::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--aits-line); } .aitshd-lm-trust-item:first-child { padding-left: 4px; } .aitshd-lm-trust-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); } body.theme-dark .aitshd-lm-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-lm-trust-item[data-tone="emerald"] .aitshd-lm-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-lm-trust-item[data-tone="amber"] .aitshd-lm-trust-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-lm-trust-item[data-tone="violet"] .aitshd-lm-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-lm-trust-item[data-tone="rose"] .aitshd-lm-trust-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-lm-trust-item[data-tone="pink"] .aitshd-lm-trust-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-lm-trust-item[data-tone="cyan"] .aitshd-lm-trust-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-lm-trust-item[data-tone="indigo"] .aitshd-lm-trust-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } /* ═══════ Mobile drawer — AI Learn section ═══════ On-brand rebuild for phones/tablets (<1024px, where the mega is unreachable): chip grid, wrap-capable chip titles. */ .aitshd-drawer-learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; } .aitshd-drawer-learn-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; font-size: 12.5px; font-weight: 600; min-width: 0; transition: border-color .18s, background-color .18s, transform .18s; } .aitshd-drawer-learn-chip:hover, .aitshd-drawer-learn-chip:active { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); transform: translateY(-1px); } .aitshd-drawer-learn-chip-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; } .aitshd-drawer-learn-chip[data-tone="indigo"] .aitshd-drawer-learn-chip-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-drawer-learn-chip[data-tone="violet"] .aitshd-drawer-learn-chip-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-learn-chip[data-tone="emerald"] .aitshd-drawer-learn-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-learn-chip[data-tone="amber"] .aitshd-drawer-learn-chip-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-learn-chip[data-tone="rose"] .aitshd-drawer-learn-chip-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-learn-chip[data-tone="cyan"] .aitshd-drawer-learn-chip-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-drawer-learn-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } /* Chip titles wrap to 2 lines — same fix as the Discover/Deals chips. */ .aitshd-drawer-learn-chip-title { font-size: 13px; font-weight: 700; color: var(--aits-ink); white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-drawer-learn-chip-count { font-size: 10.5px; font-weight: 600; color: var(--aits-mut); margin-top: 2px; letter-spacing: .02em; } /* ══════════════════════════════════════════════════════════════════ DEALS MEGA — premium savings hub (2026-07-31 redesign) Browse Deals rail + promo / By Category / By Discount / Popular Deals + a Deal-of-the-Day hero, mini grid, alerts, quicklinks, then a full-width trust strip. Identity: BRAND-BLUE led (#3680ED → rose #F43F5E) — blue-first chrome so Deals reads unmistakably AIToolsay, with a rose tail for commerce heat. Semantic color stays semantic: the discount ladder (rose→slate pct pills), the OFF pills, and the red countdown pulse keep their meaning-carrying warm hues. Fixes shipped here (live bugs in the screenshot): · popular deal cards no longer clip ("Jaspe…", "SEMru…", "$89.95/mo 9.95/m…") — the always-on arrow left the grid (now a hover reveal), the mark slimmed 48→40px, names may wrap 2 lines and the price row wraps instead of clipping. · the Deal-of-the-Day countdown ("12h : 45m : 3…") wraps below the pill on narrow rails instead of running off. · category labels ("AI Productivity") + browse descs ("Browse all 150+ deals") wrap instead of ellipsizing. · view-all links pin to the column bottoms. All rules scoped under .aitshd-mega-panel-deals (or the .aitshd-dm-* / .aitshd-drawer-deals-* namespaces). ══════════════════════════════════════════════════════════════════ */ /* Panel-local accent tokens. Light: brand blue → rose. Dark: lifted twins so accents glow on the dark surface. */ .aitshd-mega-panel-deals { --dm-a1: #3680ED; /* brand blue */ --dm-a2: #F43F5E; /* rose */ --dm-a1-soft: rgba(54,128,237,.06); --dm-a2-soft: rgba(244,63,94,.045); --dm-grad: linear-gradient(90deg, var(--dm-a1), var(--dm-a2)); } body.theme-dark .aitshd-mega-panel-deals { --dm-a1: #60A4F5; --dm-a2: #FB7185; --dm-a1-soft: rgba(96,164,245,.10); --dm-a2-soft: rgba(251,113,133,.07); } .aitshd[data-mega-deals-open="1"] .aitshd-mega-panel-deals { display: block; opacity: 1; transform: translate(-50%, 12px); } .aitshd[data-mega-deals-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; } /* Panel shell — blue ambient wash with a rose counter-glow, scroll- capped with a branded scrollbar so the dense hub fits short laptops/tablets. */ .aitshd-mega-panel-deals { background: radial-gradient(120% 90% at 100% 0%, rgba(54,128,237,.05) 0%, transparent 52%), radial-gradient(90% 120% at 0% 100%, rgba(244,63,94,.04) 0%, transparent 55%), var(--aits-card); max-height: calc(100vh - var(--hd-h) - 30px);max-height: calc(100dvh - var(--hd-h) - 30px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent; } body.theme-dark .aitshd-mega-panel-deals { background: radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.10) 0%, transparent 52%), radial-gradient(90% 120% at 0% 100%, rgba(251,113,133,.06) 0%, transparent 55%), var(--aits-card); } .aitshd-mega-panel-deals::-webkit-scrollbar { width: 10px; } .aitshd-mega-panel-deals::-webkit-scrollbar-thumb { background: var(--aits-blue-line); border-radius: 999px; border: 3px solid var(--aits-card); } .aitshd-mega-panel-deals::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); } /* ── Grid — browse rail + 3 lanes + hero rail. */ .aitshd-mega-panel-deals .aitshd-mega-wrap { grid-template-columns: 258px minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) 352px; } @media (max-width: 1320px) { .aitshd-mega-panel-deals .aitshd-mega-wrap { grid-template-columns: 240px minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) 318px; } } @media (max-width: 1140px) { .aitshd-mega-panel-deals .aitshd-mega-wrap { grid-template-columns: 236px minmax(0,1fr) minmax(0,1fr) 300px; } .aitshd-mega-panel-deals .aitshd-mega-col-deals-popular { display: none; } } @media (max-width: 900px) { .aitshd-mega-panel-deals .aitshd-mega-wrap { grid-template-columns: 1fr; } .aitshd-mega-panel-deals .aitshd-mega-featured-col { display: none; } } /* Fading hairline column dividers */ .aitshd-mega-panel-deals .aitshd-mega-col + .aitshd-mega-col { border-left: 1px solid transparent; background-image: linear-gradient(180deg, transparent, var(--aits-line) 12%, var(--aits-line) 88%, transparent); background-repeat: no-repeat; background-size: 1px 100%; background-position: left center; } .aitshd-mega-panel-deals .aitshd-mega-browse { padding: 24px 14px 18px 20px; display: flex; flex-direction: column; min-width: 0; } .aitshd-mega-panel-deals .aitshd-mega-col { padding: 24px 14px 18px; display: flex; flex-direction: column; min-width: 0; } .aitshd-mega-panel-deals .aitshd-mega-featured-col { padding: 24px 22px 20px 8px; gap: 12px; } /* Column headers — brand accent bar + tidy label */ .aitshd-mega-panel-deals .aitshd-mega-colh { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); padding: 2px 6px 12px; display: flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-colh { color: var(--aits-blue-light); } .aitshd-mega-panel-deals .aitshd-mega-colh::before { content: ''; width: 18px; height: 3px; border-radius: 999px; background: var(--dm-grad); flex: none; } /* ── Row items — accent bar wipes in, icon lifts with a tone glow, titles + descs wrap instead of ellipsizing. */ .aitshd-mega-panel-deals .aitshd-mega-item, .aitshd-mega-panel-deals .aitshd-mega-item.is-lg { padding: 9px 8px 9px 14px; border-radius: 13px; transition: background-color .2s var(--ease,ease), transform .18s var(--ease,ease); } .aitshd-mega-panel-deals .aitshd-mega-item::before { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 22px; border-radius: 999px; background: var(--dm-grad); transform: translateY(-50%) scaleY(.2); transform-origin: center; opacity: 0; transition: transform .22s var(--ease,ease), opacity .22s var(--ease,ease); } .aitshd-mega-panel-deals .aitshd-mega-item:hover { background: linear-gradient(90deg, var(--dm-a1-soft), var(--dm-a2-soft)); } .aitshd-mega-panel-deals .aitshd-mega-item:hover::before { transform: translateY(-50%) scaleY(1); opacity: 1; } .aitshd-mega-panel-deals .aitshd-mega-item .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55); } body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-item .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.07) translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor; } body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor; } /* Titles wrap to 2 lines everywhere in this panel — kills the "AI Productivi" clip; the badge label span still shrinks first per the universal base rule. */ .aitshd-mega-panel-deals .aitshd-mega-item-title, .aitshd-mega-panel-deals .aitshd-mega-item.is-lg .aitshd-mega-item-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.22; font-size: 13.5px; font-weight: 700; letter-spacing: -0.012em; max-height: 2.44em; } /* Descs (browse rail) wrap to 2 lines — "Browse all 150+ deals" / "Recently added deals" read in full. */ .aitshd-mega-panel-deals .aitshd-mega-item-desc { font-size: 11.5px; font-weight: 400; color: var(--aits-mut); line-height: 1.34; margin-top: 2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); } .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-count { background: var(--aits-blue-tint); color: var(--aits-blue-dark); border-color: transparent; } body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-item:hover .aitshd-mega-item-count { color: var(--aits-blue-light); } /* Category rows — slim chrome so 2-word labels + count pills share the row comfortably. */ .aitshd-mega-panel-deals .aitshd-mega-col .aitshd-mega-item { gap: 10px; } .aitshd-mega-panel-deals .aitshd-mega-col .aitshd-mega-item-icon { width: 34px; height: 34px; border-radius: 10px; } .aitshd-mega-panel-deals .aitshd-mega-item-count { padding: 3px 8px; font-size: 10.5px; font-weight: 800; } /* ── Discount rows — the pct ladder KEEPS its semantic heat gradient (rose = deepest cut → slate = smallest); hover adds a scale + deeper glow in the pill's own tone. */ .aitshd-dm-pct-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 34px; padding: 0 8px; border-radius: 10px; background: linear-gradient(135deg, #F43F5E, #E11D48); color: #fff; font-weight: 900; font-size: 11.5px; letter-spacing: -0.02em; flex: none; box-shadow: 0 8px 18px -10px rgba(244,63,94,.5), inset 0 0 0 1px rgba(255,255,255,.14); transition: transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease); } .aitshd-mega-item[data-tone="rose"] .aitshd-dm-pct-badge { background: linear-gradient(135deg, #F43F5E, #E11D48); box-shadow: 0 8px 18px -10px rgba(244,63,94,.5), inset 0 0 0 1px rgba(255,255,255,.14); } .aitshd-mega-item[data-tone="amber"] .aitshd-dm-pct-badge { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 18px -10px rgba(245,158,11,.5), inset 0 0 0 1px rgba(255,255,255,.14); } .aitshd-mega-item[data-tone="emerald"] .aitshd-dm-pct-badge { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 18px -10px rgba(16,185,129,.5), inset 0 0 0 1px rgba(255,255,255,.14); } .aitshd-mega-item[data-tone="blue"] .aitshd-dm-pct-badge { background: linear-gradient(135deg, #3680ED, #2060C0); box-shadow: 0 8px 18px -10px rgba(54,128,237,.5), inset 0 0 0 1px rgba(255,255,255,.14); } .aitshd-mega-item[data-tone="slate"] .aitshd-dm-pct-badge { background: linear-gradient(135deg, #64748B, #334155); box-shadow: 0 8px 18px -10px rgba(100,116,139,.45), inset 0 0 0 1px rgba(255,255,255,.14); } .aitshd-mega-item:hover .aitshd-dm-pct-badge { transform: scale(1.06); } .aitshd-mega-panel-deals .aitshd-mega-item:has(.aitshd-dm-pct-badge) { align-items: center; } /* View-all — brand pill pinned to each column's bottom. */ .aitshd-mega-panel-deals .aitshd-mega-view-all-link { margin: auto 0 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--aits-blue-dark); border: 1px solid var(--aits-blue-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2)); box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6); transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s; } body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-view-all-link { color: var(--aits-blue-light); background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .aitshd-mega-panel-deals .aitshd-mega-view-all-link svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue); transition: background .2s, color .2s, transform .2s; } .aitshd-mega-panel-deals .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-deals .aitshd-mega-view-all-link:focus { color: var(--aits-blue-dark); border-color: var(--aits-blue); background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint)); box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7); transform: translateY(-1px); } body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-view-all-link:hover, body.theme-dark .aitshd-mega-panel-deals .aitshd-mega-view-all-link:focus { color: var(--aits-blue-light); } .aitshd-mega-panel-deals .aitshd-mega-view-all-link:hover svg { background: var(--aits-blue); color: #fff; transform: translateX(3px); } /* ═══════ "Have a Deal to Share?" promo (browse-rail tail) ═══════ Gradient-border card, brand chip + CTA; pinned to the rail's bottom so the column never leaves dead space. */ .aitshd-dm-promo { position: relative; margin-top: auto; padding: 16px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(var(--aits-card), var(--aits-card)) padding-box, linear-gradient(135deg, rgba(54,128,237,.55), rgba(244,63,94,.45)) border-box; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 24px -18px rgba(54,128,237,.4); overflow: hidden; } .aitshd-dm-promo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(140% 100% at 100% 0%, rgba(54,128,237,.09), transparent 55%), radial-gradient(140% 100% at 0% 100%, rgba(244,63,94,.06), transparent 55%); pointer-events: none; } .aitshd-dm-promo > * { position: relative; z-index: 1; } .aitshd-dm-promo-ico { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #3680ED, #4F46E5); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 18px -8px rgba(54,128,237,.6), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .3s var(--ease,ease); } .aitshd-dm-promo:hover .aitshd-dm-promo-ico { transform: rotate(-6deg) scale(1.05); } .aitshd-dm-promo-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .aitshd-dm-promo-title { font-size: 13.5px; font-weight: 800; color: var(--aits-ink); line-height: 1.3; letter-spacing: -0.01em; } .aitshd-dm-promo-desc { font-size: 11.5px; font-weight: 400; color: var(--aits-mut); line-height: 1.45; } .aitshd-dm-promo-cta { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 9px 14px; border-radius: 10px; background: linear-gradient(135deg, #3680ED, #4F46E5); color: #fff !important; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; text-decoration: none; box-shadow: 0 10px 20px -8px rgba(54,128,237,.6), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .2s, box-shadow .2s, background .2s; } .aitshd-dm-promo-cta:hover { background: linear-gradient(135deg, #2060C0, #4338CA); transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(54,128,237,.75), inset 0 1px 0 rgba(255,255,255,.24); } .aitshd-dm-promo-cta svg { transition: transform .2s; } .aitshd-dm-promo-cta:hover svg { transform: translateX(3px); } /* ═══════ Popular Deals — pricing cards ═══════ THE CLIPPING FIX: the always-on 30px arrow left the grid flow (it now floats in bottom-right and reveals on hover), the mark slimmed 48→40px, names may wrap to 2 lines, and the price row wraps so "$89.95/mo $139.95/mo" can never overflow the card. */ .aitshd-dm-deal { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 11px; padding: 12px; border-radius: 16px; border: 1px solid var(--aits-line); background: var(--aits-card); text-decoration: none; color: var(--aits-ink); transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s; box-shadow: 0 1px 0 rgba(15,23,42,.03); } .aitshd-dm-deal + .aitshd-dm-deal { margin-top: 6px; } .aitshd-dm-deal:hover { border-color: var(--aits-blue-line); background: linear-gradient(90deg, var(--dm-a1-soft, rgba(54,128,237,.04)), var(--dm-a2-soft, rgba(244,63,94,.03))); transform: translateY(-2px); box-shadow: 0 14px 24px -18px rgba(54,128,237,.32), 0 2px 4px rgba(15,23,42,.04); } .aitshd-dm-deal-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--tint-blue-bg); color: var(--tint-blue-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; letter-spacing: -0.02em; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s, box-shadow .2s; } body.theme-dark .aitshd-dm-deal-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-dm-deal:hover .aitshd-dm-deal-mark { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor; } .aitshd-dm-deal[data-tone="rose"] .aitshd-dm-deal-mark { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-dm-deal[data-tone="amber"] .aitshd-dm-deal-mark { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-dm-deal[data-tone="violet"] .aitshd-dm-deal-mark { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-dm-deal[data-tone="emerald"] .aitshd-dm-deal-mark { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-dm-deal[data-tone="pink"] .aitshd-dm-deal-mark { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-dm-deal[data-tone="cyan"] .aitshd-dm-deal-mark { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-dm-deal-body { display: flex; flex-direction: column; min-width: 0; gap: 3px; } .aitshd-dm-deal-name { font-size: 13.5px; font-weight: 700; color: var(--aits-ink); line-height: 1.2; letter-spacing: -0.01em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-dm-deal:hover .aitshd-dm-deal-name { color: var(--aits-blue-dark); } body.theme-dark .aitshd-dm-deal:hover .aitshd-dm-deal-name { color: var(--aits-blue-light); } .aitshd-dm-deal-price-row { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 12.5px; font-weight: 500; min-width: 0; } .aitshd-dm-deal-price { color: var(--aits-ink); font-weight: 800; letter-spacing: -0.01em; } .aitshd-dm-deal-was { color: var(--aits-mut); text-decoration: line-through; font-weight: 500; } .aitshd-dm-deal-off { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #F43F5E, #E11D48); color: #fff; line-height: 1; width: fit-content; margin-top: 3px; box-shadow: 0 6px 12px -6px rgba(244,63,94,.5); } /* Arrow floats bottom-right, revealed on hover — no longer steals ~40px of every row's width. */ .aitshd-dm-deal-arrow { position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--aits-blue); color: #fff; opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease,ease), transform .2s var(--ease,ease); box-shadow: 0 6px 12px -6px rgba(54,128,237,.5); pointer-events: none; } .aitshd-dm-deal:hover .aitshd-dm-deal-arrow { opacity: 1; transform: translateX(0); } /* ═══════ 2×2 mini card grid ═══════ */ .aitshd-dm-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .aitshd-dm-mini-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; } .aitshd-dm-mini-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--tint-blue-ink), rgba(54,128,237,.6)); opacity: .5; transition: opacity .2s; } .aitshd-dm-mini-card[data-tone="amber"]::before { background: linear-gradient(90deg, var(--tint-amber-ink), rgba(245,158,11,.6)); } .aitshd-dm-mini-card[data-tone="emerald"]::before { background: linear-gradient(90deg, var(--tint-emerald-ink), rgba(16,185,129,.6)); } .aitshd-dm-mini-card[data-tone="violet"]::before { background: linear-gradient(90deg, var(--tint-violet-ink), rgba(14,165,233,.6)); } .aitshd-dm-mini-card[data-tone="rose"]::before { background: linear-gradient(90deg, var(--tint-rose-ink), rgba(244,63,94,.6)); } .aitshd-dm-mini-card:hover { border-color: var(--aits-blue-line); transform: translateY(-2px); box-shadow: 0 14px 24px -16px rgba(54,128,237,.4); } .aitshd-dm-mini-card:hover::before { opacity: 1; } .aitshd-dm-mini-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s, box-shadow .2s; } body.theme-dark .aitshd-dm-mini-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-dm-mini-card:hover .aitshd-dm-mini-ico { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 16px -8px currentColor; } .aitshd-dm-mini-card[data-tone="amber"] .aitshd-dm-mini-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-dm-mini-card[data-tone="emerald"] .aitshd-dm-mini-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-dm-mini-card[data-tone="violet"] .aitshd-dm-mini-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-dm-mini-card[data-tone="rose"] .aitshd-dm-mini-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-dm-mini-body { display: flex; flex-direction: column; min-width: 0; } .aitshd-dm-mini-title { font-size: 12.5px; font-weight: 800; color: var(--aits-ink); line-height: 1.2; letter-spacing: -0.01em; } .aitshd-dm-mini-card:hover .aitshd-dm-mini-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-dm-mini-card:hover .aitshd-dm-mini-title { color: var(--aits-blue-light); } .aitshd-dm-mini-sub { font-size: 11px; font-weight: 500; color: var(--aits-mut); margin-top: 2px; } .aitshd-dm-mini-arrow { margin-left: auto; color: var(--aits-mut); flex: none; transition: color .2s, transform .2s; } .aitshd-dm-mini-card:hover .aitshd-dm-mini-arrow { color: var(--aits-blue); transform: translateX(3px); } /* ═══════ Deal alerts tile ═══════ */ .aitshd-dm-alerts { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: linear-gradient(var(--aits-card), var(--aits-card)) padding-box, linear-gradient(135deg, rgba(54,128,237,.55), rgba(244,63,94,.40)) border-box; text-decoration: none !important; transition: transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease); } .aitshd-dm-alerts:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -16px rgba(54,128,237,.45); } .aitshd-dm-alerts-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3680ED, #4F46E5); color: #fff; flex: none; box-shadow: 0 6px 14px -6px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.28); } .aitshd-dm-alerts-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; } .aitshd-dm-alerts-title { font-size: 12.5px; font-weight: 800; color: var(--aits-ink); letter-spacing: -0.01em; line-height: 1.2; } .aitshd-dm-alerts-sub { font-size: 10.5px; font-weight: 500; color: var(--aits-mut); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-dm-alerts-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .01em; color: var(--aits-blue-dark); padding: 6px 10px; border-radius: 8px; background: var(--aits-blue-tint-2); border: 1px solid var(--aits-blue-line); flex: none; white-space: nowrap; transition: background-color .2s var(--ease,ease), color .2s var(--ease,ease), border-color .2s var(--ease,ease), transform .2s var(--ease,ease); } body.theme-dark .aitshd-dm-alerts-cta { color: var(--aits-blue-light); background: var(--aits-blue-tint-2); border-color: var(--aits-blue-line); } .aitshd-dm-alerts:hover .aitshd-dm-alerts-cta { background: linear-gradient(135deg, #3680ED, #4F46E5); color: #fff; border-color: transparent; } .aitshd-dm-alerts-cta svg { transition: transform .2s; } .aitshd-dm-alerts:hover .aitshd-dm-alerts-cta svg { transform: translateX(2px); } /* ═══════ Quick-access chip row ═══════ */ .aitshd-dm-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .aitshd-dm-quick-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); font-size: 11px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: border-color .18s var(--ease,ease), transform .18s var(--ease,ease), background-color .18s var(--ease,ease), color .18s var(--ease,ease); } .aitshd-dm-quick-chip:hover { transform: translateY(-1px); border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); } body.theme-dark .aitshd-dm-quick-chip:hover { color: var(--aits-blue-light); } .aitshd-dm-quick-ico { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; transition: transform .18s var(--ease,ease); } .aitshd-dm-quick-chip:hover .aitshd-dm-quick-ico { transform: scale(1.06); } .aitshd-dm-quick-chip[data-tone="rose"] .aitshd-dm-quick-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-dm-quick-chip[data-tone="amber"] .aitshd-dm-quick-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-dm-quick-chip[data-tone="emerald"] .aitshd-dm-quick-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-dm-quick-chip[data-tone="blue"] .aitshd-dm-quick-ico { background: var(--tint-blue-bg); color: var(--tint-blue-ink); } .aitshd-dm-quick-chip[data-tone="violet"] .aitshd-dm-quick-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-dm-quick-label { min-width: 0; } /* ═══════ Assurance rail (trust strip) — 2026-08-02 premium rebuild ═══════ The old band was flat dividers, and its title + desc were two INLINE spans inside an inline body, so every promise rendered as one run-on paragraph ("100% Safe Deals All deals are verified and authentic") with the desc's margin-top silently a no-op. Each promise is now a glass card: block title over a wrapping desc (no clamp anywhere — nothing is ever hidden), a tone-tinted medallion with a sheen sweep and a tone-matched glow, the shared brand accent-bar wipe on hover, and a staggered rise when the panel opens. Losing the hairlines also kills the orphan divider that hung in space on a wrapped row. */ .aitshd-dm-trust { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--aits-line); background: radial-gradient(120% 180% at 0% 0%, var(--dm-a1-soft), transparent 58%), radial-gradient(120% 180% at 100% 100%, var(--dm-a2-soft), transparent 58%), linear-gradient(0deg, var(--aits-surface-2), var(--aits-card)); } /* Brand hairline riding the band's top edge — blue→rose, faded at both ends. */ .aitshd-dm-trust::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--dm-a1) 20%, var(--dm-a2) 80%, transparent); opacity: .5; pointer-events: none; } .aitshd-dm-trust-item { position: relative; display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 12px 13px 13px; border-radius: 14px; border: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); overflow: hidden; transition: transform .26s var(--ease,ease), border-color .2s var(--ease,ease), box-shadow .26s var(--ease,ease); } body.theme-dark .aitshd-dm-trust-item { background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* Accent bar wipe — the signature shared by every card in this pass. */ .aitshd-dm-trust-item::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--dm-grad); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: transform .38s var(--ease,ease), opacity .22s var(--ease,ease); pointer-events: none; } .aitshd-dm-trust-ico { position: relative; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease,ease); } .aitshd-dm-trust-ico > svg { position: relative; z-index: 1; } body.theme-dark .aitshd-dm-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } /* Sheen that sweeps the medallion on hover (parked off-frame at rest). */ .aitshd-dm-trust-ico::after { content: ''; position: absolute; inset: -25%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); transform: translateX(-130%); opacity: 0; pointer-events: none; } body.theme-dark .aitshd-dm-trust-ico::after { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%); } .aitshd-dm-trust-item[data-tone="emerald"] .aitshd-dm-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-dm-trust-item[data-tone="amber"] .aitshd-dm-trust-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-dm-trust-item[data-tone="violet"] .aitshd-dm-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-dm-trust-item[data-tone="rose"] .aitshd-dm-trust-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-dm-trust-item[data-tone="pink"] .aitshd-dm-trust-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-dm-trust-item[data-tone="cyan"] .aitshd-dm-trust-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-dm-trust-item[data-tone="indigo"] .aitshd-dm-trust-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-dm-trust-item[data-tone="slate"] .aitshd-dm-trust-ico { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } /* The body was an inline span — the whole reason title and desc ran together. It is a column now, so each part owns its own line. */ .aitshd-dm-trust-body { min-width: 0; display: flex; flex-direction: column; padding-top: 1px; } .aitshd-dm-trust-title { display: block; font-size: 13px; font-weight: 800; color: var(--aits-ink); line-height: 1.25; letter-spacing: -0.01em; white-space: normal; transition: color .18s var(--ease,ease); } .aitshd-dm-trust-desc { display: block; font-size: 11.5px; font-weight: 500; color: var(--aits-mut); line-height: 1.45; margin-top: 4px; white-space: normal; overflow-wrap: break-word; } @media (hover: hover) { .aitshd-dm-trust-item:hover { transform: translateY(-3px); border-color: var(--aits-blue-line); box-shadow: 0 20px 34px -24px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.7); } body.theme-dark .aitshd-dm-trust-item:hover { box-shadow: 0 20px 34px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08); } .aitshd-dm-trust-item:hover::after { transform: scaleX(1); opacity: 1; } .aitshd-dm-trust-item:hover .aitshd-dm-trust-ico { transform: translateY(-2px) scale(1.07) rotate(-4deg); /* currentColor is the tone ink, so each medallion glows its own hue. */ box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 20px -12px currentColor; } body.theme-dark .aitshd-dm-trust-item:hover .aitshd-dm-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 22px -12px currentColor; } .aitshd-dm-trust-item:hover .aitshd-dm-trust-ico::after { opacity: 1; transform: translateX(130%); transition: transform .7s var(--ease,ease), opacity .2s var(--ease,ease); } .aitshd-dm-trust-item:hover .aitshd-dm-trust-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-dm-trust-item:hover .aitshd-dm-trust-title { color: var(--aits-blue-light); } } /* Staggered rise as the panel opens — the band lands last, so the eye finishes on the reassurance instead of arriving to a static footer. */ @keyframes aitshdDmTrustIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item { animation: aitshdDmTrustIn .46s var(--ease,ease) backwards; } .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(1) { animation-delay: .05s; } .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(2) { animation-delay: .10s; } .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(3) { animation-delay: .15s; } .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(4) { animation-delay: .20s; } .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item:nth-child(5) { animation-delay: .25s; } /* Responsive ladder 5 → 3+2 → 2 → 1. The 3+2 step runs on a 6-track grid so the trailing pair splits its row evenly instead of hanging left; the quantity guards keep that trick to the exact-5 case. */ @media (max-width: 1280px) { .aitshd-dm-trust { grid-template-columns: repeat(6, minmax(0, 1fr)); } .aitshd-dm-trust-item { grid-column: span 2; } .aitshd-dm-trust-item:nth-child(4):nth-last-child(2), .aitshd-dm-trust-item:nth-child(5):nth-last-child(1) { grid-column: span 3; } } /* 1023 and below the burger has already taken over and this band is unreachable — the 2-up and 1-up steps are defensive only, which is why 3+2 is allowed to run all the way down to the 1024 mega floor (a 992px panel still gives each of the three ~310px). */ @media (max-width: 1023px) { .aitshd-dm-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px 18px; } .aitshd-dm-trust-item, .aitshd-dm-trust-item:nth-child(4):nth-last-child(2), .aitshd-dm-trust-item:nth-child(5):nth-last-child(1) { grid-column: auto; } } @media (max-width: 720px) { .aitshd-dm-trust { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .aitshd-dm-trust-item, .aitshd-dm-trust-item::after, .aitshd-dm-trust-ico, .aitshd-dm-trust-ico::after, .aitshd-dm-trust-title { transition: none; } .aitshd[data-mega-deals-open="1"] .aitshd-dm-trust-item { animation: none; } .aitshd-dm-trust-item:hover { transform: none; } .aitshd-dm-trust-item:hover .aitshd-dm-trust-ico { transform: none; } } /* ═══════ Featured Deals strip (replaced the Deals trust band) ═══════ 2026-09-14. Same band shell as the old .aitshd-dm-trust (grid, tinted ground, brand hairline on the top edge) so the mega footer keeps its proportion, but each cell is now a real deal: plate, name, price and a discount pill. The plate takes a TONE tint rather than the deal's own `accent` — two of the live accents are near-black (#0F0F12, #1B1F3B) and would disappear against the dark surface. */ .aitshd-dm-feat { position: relative; padding: 14px 20px 18px; border-top: 1px solid var(--aits-line); background: radial-gradient(120% 180% at 0% 0%, var(--dm-a1-soft), transparent 58%), radial-gradient(120% 180% at 100% 100%, var(--dm-a2-soft), transparent 58%), linear-gradient(0deg, var(--aits-surface-2), var(--aits-card)); } .aitshd-dm-feat::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--dm-a1) 20%, var(--dm-a2) 80%, transparent); opacity: .5; pointer-events: none; } .aitshd-dm-feat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; } .aitshd-dm-feat-h { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--aits-mut); } .aitshd-dm-feat-all { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--aits-blue-dark); text-decoration: none; transition: gap .2s var(--ease,ease), color .2s var(--ease,ease); } body.theme-dark .aitshd-dm-feat-all { color: var(--aits-blue-light); } .aitshd-dm-feat-all:hover { gap: 7px; } .aitshd-dm-feat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .aitshd-dm-feat-card { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); text-decoration: none; overflow: hidden; transition: transform .26s var(--ease,ease), border-color .2s var(--ease,ease), box-shadow .26s var(--ease,ease); } body.theme-dark .aitshd-dm-feat-card { background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* Shared accent-bar wipe — the signature every card in this kit carries. */ .aitshd-dm-feat-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--dm-grad); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: transform .38s var(--ease,ease), opacity .22s var(--ease,ease); pointer-events: none; } .aitshd-dm-feat-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--tint-blue-bg); color: var(--tint-blue-ink); box-shadow: inset 0 0 0 1px rgba(15,23,42,.04); overflow: hidden; transition: transform .3s var(--ease,ease); } body.theme-dark .aitshd-dm-feat-mark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-dm-feat-mark b { font-size: 15px; font-weight: 800; line-height: 1; } /* FULL-BLEED brand logo. §RAILX already states the contract — "on the Deals rail the logo fills the plate at `border-radius: inherit`, so an inset ring paints underneath it" — and that is why the plate's ring moved OUTSIDE. The img rule was never brought along: it kept `contain` + 5px of padding, so the one live logo (Perplexity) sat as a small square inside the plate with a ring of plate tint showing all the way around it. `cover`, no padding, inherited radius: the plate now reads as that brand's app icon, clipped by the `overflow: hidden` on the plate itself. Matches the AI Directory's popular-tool chips, which have shipped this inline since they were built. */ .aitshd-dm-feat-mark img { display: block; width: 100%; height: 100%; padding: 0; object-fit: cover; border-radius: inherit; } .aitshd-dm-feat-card[data-tone="violet"] .aitshd-dm-feat-mark { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-dm-feat-card[data-tone="emerald"] .aitshd-dm-feat-mark { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-dm-feat-card[data-tone="amber"] .aitshd-dm-feat-mark { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-dm-feat-card[data-tone="rose"] .aitshd-dm-feat-mark { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-dm-feat-body { display: flex; flex-direction: column; min-width: 0; gap: 3px; flex: 1 1 auto; } .aitshd-dm-feat-name { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--aits-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s var(--ease,ease); } .aitshd-dm-feat-card:hover .aitshd-dm-feat-name { color: var(--aits-blue-dark); } body.theme-dark .aitshd-dm-feat-card:hover .aitshd-dm-feat-name { color: var(--aits-blue-light); } .aitshd-dm-feat-prices { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-size: 12px; min-width: 0; } .aitshd-dm-feat-price { color: var(--aits-ink); font-weight: 800; letter-spacing: -0.01em; } .aitshd-dm-feat-was { color: var(--aits-mut); font-weight: 500; } .aitshd-dm-feat-off { flex: none; align-self: flex-start; display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: linear-gradient(135deg, #F43F5E, #E11D48); color: #fff; line-height: 1; box-shadow: 0 6px 12px -6px rgba(244,63,94,.5); } @media (hover: hover) { .aitshd-dm-feat-card:hover { transform: translateY(-3px); border-color: var(--aits-blue-line); box-shadow: 0 20px 34px -24px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.7); } body.theme-dark .aitshd-dm-feat-card:hover { box-shadow: 0 20px 34px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08); } .aitshd-dm-feat-card:hover::after { transform: scaleX(1); opacity: 1; } .aitshd-dm-feat-card:hover .aitshd-dm-feat-mark { transform: translateY(-1px) scale(1.06); } } /* The mega itself is desktop-only, but it renders down to 1024px where five 5-column cards would each be ~150px — too tight for a two-line name beside a plate and a pill. */ @media (max-width: 1280px) { .aitshd-dm-feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .aitshd-dm-feat-card, .aitshd-dm-feat-card::after, .aitshd-dm-feat-mark, .aitshd-dm-feat-name { transition: none; } .aitshd-dm-feat-card:hover { transform: none; } .aitshd-dm-feat-card:hover .aitshd-dm-feat-mark { transform: none; } } /* A third-party brand mark must never sit on a tinted plate — the one live deal logo (Perplexity) is a near-black glyph and vanished on the dark surface. Brand marks get a neutral plate in BOTH themes so a dark OR a light logo always reads (§PLATICO: never tint a brand mark). */ .aitshd-dm-feat-mark.is-logo, .aitshd-drawer-deals-feat-mark.is-logo { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(15,23,42,.10); } body.theme-dark .aitshd-dm-feat-mark.is-logo, body.theme-dark .aitshd-drawer-deals-feat-mark.is-logo { background: #F2F5FA; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } /* Drawer twin — stacked rows, same data. */ .aitshd-drawer-deals-feat { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 4px; } .aitshd-drawer-deals-feat-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--aits-line); background: var(--aits-card); text-decoration: none; min-width: 0; } body.theme-dark .aitshd-drawer-deals-feat-item { background: rgba(255,255,255,.03); } .aitshd-drawer-deals-feat-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tint-blue-bg); color: var(--tint-blue-ink); overflow: hidden; } .aitshd-drawer-deals-feat-mark b { font-size: 13px; font-weight: 800; line-height: 1; } /* The drawer is the same strip under 1024px — same plate contract. */ .aitshd-drawer-deals-feat-mark img { display: block; width: 100%; height: 100%; padding: 0; object-fit: cover; border-radius: inherit; } .aitshd-drawer-deals-feat-item[data-tone="violet"] .aitshd-drawer-deals-feat-mark { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-deals-feat-item[data-tone="emerald"] .aitshd-drawer-deals-feat-mark { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-deals-feat-item[data-tone="amber"] .aitshd-drawer-deals-feat-mark { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-deals-feat-item[data-tone="rose"] .aitshd-drawer-deals-feat-mark { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-deals-feat-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; flex: 1 1 auto; } .aitshd-drawer-deals-feat-title { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--aits-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-drawer-deals-feat-desc { font-size: 11.5px; color: var(--aits-mut); display: inline-flex; gap: 6px; align-items: baseline; } .aitshd-drawer-deals-feat-desc b { color: var(--aits-ink); font-weight: 800; } .aitshd-drawer-deals-feat-off { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: linear-gradient(135deg, #F43F5E, #E11D48); color: #fff; line-height: 1; } /* ═══════ Mobile drawer — Deals section ═══════ On-brand rebuild: chip grid with blue chip hovers. Red/rose stays only where it means "deal". */ .aitshd-drawer-deals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; } .aitshd-drawer-deals-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; font-size: 12.5px; font-weight: 600; min-width: 0; transition: border-color .18s, background-color .18s, transform .18s; } .aitshd-drawer-deals-chip:hover, .aitshd-drawer-deals-chip:active { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); transform: translateY(-1px); } .aitshd-drawer-deals-chip-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; } .aitshd-drawer-deals-chip[data-tone="rose"] .aitshd-drawer-deals-chip-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-deals-chip[data-tone="amber"] .aitshd-drawer-deals-chip-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-deals-chip[data-tone="emerald"] .aitshd-drawer-deals-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-deals-chip[data-tone="violet"] .aitshd-drawer-deals-chip-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-deals-chip[data-tone="pink"] .aitshd-drawer-deals-chip-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-drawer-deals-chip[data-tone="cyan"] .aitshd-drawer-deals-chip-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-drawer-deals-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } /* Chip titles wrap to 2 lines — same fix as the Discover chips. */ .aitshd-drawer-deals-chip-title { font-size: 13px; font-weight: 700; color: var(--aits-ink); white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-drawer-deals-chip-count { font-size: 10.5px; font-weight: 700; color: var(--aits-blue-dark); margin-top: 2px; letter-spacing: .02em; } body.theme-dark .aitshd-drawer-deals-chip-count { color: var(--aits-blue-light); } .aitshd-drawer-deals-chip[data-tone="amber"] .aitshd-drawer-deals-chip-count { color: var(--tint-amber-ink); } .aitshd-drawer-deals-chip[data-tone="emerald"] .aitshd-drawer-deals-chip-count { color: var(--tint-emerald-ink); } .aitshd-drawer-deals-chip[data-tone="violet"] .aitshd-drawer-deals-chip-count { color: var(--tint-violet-ink); } .aitshd-drawer-deals-chip[data-tone="rose"] .aitshd-drawer-deals-chip-count { color: var(--tint-rose-ink); } /* ── Drawer assurance rail — the mega's trust band restacked for touch. The mega is desktop-only (burger takes over under 1024px), so without this the whole mobile + tablet funnel lost the reassurance. Stays 1-up at every width on purpose: the drawer sheet caps at 390px from 430px viewport upward, so a viewport-driven 2-up would hand each card ~170px and wrap "Your payment information is always protected" over three lines on a tablet. The accent bar and lift fire on :active so touch gets the feedback hover gives on desktop. The --dm-* tokens live on the mega panel, so the gradient is spelled out here exactly like the drawer hero's brand CTA above. */ .aitshd-drawer-deals-trust { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 8px 0 4px; } .aitshd-drawer-deals-trust-item { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px 11px; border-radius: 12px; border: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2)); overflow: hidden; transition: border-color .18s var(--ease,ease), transform .18s var(--ease,ease); } body.theme-dark .aitshd-drawer-deals-trust-item { background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)); } .aitshd-drawer-deals-trust-item::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #3680ED, #F43F5E); transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ease,ease); pointer-events: none; } body.theme-dark .aitshd-drawer-deals-trust-item::after { background: linear-gradient(90deg, #60A4F5, #FB7185); } .aitshd-drawer-deals-trust-item:active, .aitshd-drawer-deals-trust-item:hover { border-color: var(--aits-blue-line); transform: translateY(-1px); } .aitshd-drawer-deals-trust-item:active::after, .aitshd-drawer-deals-trust-item:hover::after { transform: scaleX(1); } .aitshd-drawer-deals-trust-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: transform .24s cubic-bezier(.34,1.56,.64,1); } body.theme-dark .aitshd-drawer-deals-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-drawer-deals-trust-item:active .aitshd-drawer-deals-trust-ico, .aitshd-drawer-deals-trust-item:hover .aitshd-drawer-deals-trust-ico { transform: scale(1.08); } .aitshd-drawer-deals-trust-item[data-tone="emerald"] .aitshd-drawer-deals-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-deals-trust-item[data-tone="amber"] .aitshd-drawer-deals-trust-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-deals-trust-item[data-tone="violet"] .aitshd-drawer-deals-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-deals-trust-item[data-tone="rose"] .aitshd-drawer-deals-trust-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-deals-trust-item[data-tone="pink"] .aitshd-drawer-deals-trust-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-drawer-deals-trust-item[data-tone="cyan"] .aitshd-drawer-deals-trust-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-drawer-deals-trust-item[data-tone="indigo"] .aitshd-drawer-deals-trust-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-drawer-deals-trust-item[data-tone="slate"] .aitshd-drawer-deals-trust-ico { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-drawer-deals-trust-copy { min-width: 0; display: flex; flex-direction: column; } .aitshd-drawer-deals-trust-title { display: block; font-size: 12.5px; font-weight: 800; color: var(--aits-ink); line-height: 1.25; letter-spacing: -0.01em; white-space: normal; } .aitshd-drawer-deals-trust-desc { display: block; font-size: 11px; font-weight: 500; color: var(--aits-mut); line-height: 1.4; margin-top: 3px; white-space: normal; overflow-wrap: break-word; } @media (prefers-reduced-motion: reduce) { .aitshd-drawer-deals-trust-item, .aitshd-drawer-deals-trust-item::after, .aitshd-drawer-deals-trust-ico { transition: none; } .aitshd-drawer-deals-trust-item:active, .aitshd-drawer-deals-trust-item:hover { transform: none; } } /* ══════════════════════════════════════════════════════════════════ DISCOVER MEGA — premium exploration hub (2026-07-31 redesign) Explore Directory rail + promo / Compare & Alternatives / Curated Collections / Community & Insights + Trending-Collection hero and the VS compare card, then Trending Searches + trust footer. Identity: BRAND-BLUE led (#3680ED → cyan #06B6D4) — blue-first so Discover reads unmistakably AIToolsay, with a cyan tail for the "exploration" register. Sibling of the Resources blue→indigo pass. Fixes shipped here (live bugs in the screenshot): · descriptions no longer clip at one line ("Side-by-side tool…", "Curated GPT…", "Use without…") — clamp is now 2 lines. · NEW badges no longer wrap onto their own line — moved out of the wrapping title to the row's right edge (markup change). · view-all links pin to the column bottoms, killing the dead space under short columns (Curated Collections). All rules scoped under .aitshd-mega-panel-discover (or the .aitshd-dc-* / .aitshd-drawer-disc-* namespaces) so nothing leaks into the six sibling megas. ══════════════════════════════════════════════════════════════════ */ /* Panel-local accent tokens — retune the whole identity here. Light: brand blue → cyan. Dark: lifted twins so accents glow. */ .aitshd-mega-panel-discover { --dc-a1: #3680ED; /* brand blue */ --dc-a2: #06B6D4; /* cyan */ --dc-a1-soft: rgba(54,128,237,.06); --dc-a2-soft: rgba(6,182,212,.05); --dc-grad: linear-gradient(90deg, var(--dc-a1), var(--dc-a2)); } body.theme-dark .aitshd-mega-panel-discover { --dc-a1: #60A4F5; --dc-a2: #22D3EE; --dc-a1-soft: rgba(96,164,245,.10); --dc-a2-soft: rgba(34,211,238,.08); } .aitshd[data-mega-discover-open="1"] .aitshd-mega-panel-discover { display: block; opacity: 1; transform: translate(-50%, 12px); } .aitshd[data-mega-discover-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; } /* Panel shell — brand-blue ambient wash toward the featured rail, scroll-capped with a slim branded scrollbar so the dense hub can never run off a short laptop/tablet. */ .aitshd-mega-panel-discover { background: radial-gradient(120% 90% at 100% 0%, rgba(54,128,237,.05) 0%, transparent 52%), radial-gradient(90% 120% at 0% 100%, rgba(6,182,212,.045) 0%, transparent 55%), var(--aits-card); max-height: calc(100vh - var(--hd-h) - 30px);max-height: calc(100dvh - var(--hd-h) - 30px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent; } body.theme-dark .aitshd-mega-panel-discover { background: radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.10) 0%, transparent 52%), radial-gradient(90% 120% at 0% 100%, rgba(34,211,238,.07) 0%, transparent 55%), var(--aits-card); } .aitshd-mega-panel-discover::-webkit-scrollbar { width: 10px; } .aitshd-mega-panel-discover::-webkit-scrollbar-thumb { background: var(--aits-blue-line); border-radius: 999px; border: 3px solid var(--aits-card); } .aitshd-mega-panel-discover::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); } /* ── Grid — explore rail + 3 lanes + featured rail. Browse rail is wide enough that "AI Models Directory" + a NEW badge fit. */ .aitshd-mega-panel-discover .aitshd-mega-wrap { grid-template-columns: 268px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 316px; } @media (max-width: 1320px) { .aitshd-mega-panel-discover .aitshd-mega-wrap { grid-template-columns: 248px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 298px; } } @media (max-width: 1140px) { .aitshd-mega-panel-discover .aitshd-mega-wrap { grid-template-columns: 236px minmax(0,1fr) minmax(0,1fr) 292px; } .aitshd-mega-panel-discover .aitshd-mega-col-usecase { display: none; } } @media (max-width: 900px) { .aitshd-mega-panel-discover .aitshd-mega-wrap { grid-template-columns: 1fr; } .aitshd-mega-panel-discover .aitshd-mega-featured-col { display: none; } } /* Fading hairline column dividers */ .aitshd-mega-panel-discover .aitshd-mega-col + .aitshd-mega-col { border-left: 1px solid transparent; background-image: linear-gradient(180deg, transparent, var(--aits-line) 12%, var(--aits-line) 88%, transparent); background-repeat: no-repeat; background-size: 1px 100%; background-position: left center; } .aitshd-mega-panel-discover .aitshd-mega-browse { padding: 24px 12px 18px 18px; display: flex; flex-direction: column; min-width: 0; } .aitshd-mega-panel-discover .aitshd-mega-col { padding: 24px 14px 18px; display: flex; flex-direction: column; min-width: 0; } .aitshd-mega-panel-discover .aitshd-mega-featured-col { padding: 24px 22px 20px 8px; gap: 14px; } /* Column headers — brand accent bar + tidy label */ .aitshd-mega-panel-discover .aitshd-mega-colh { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); padding: 2px 6px 12px; display: flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-colh { color: var(--aits-blue-light); } .aitshd-mega-panel-discover .aitshd-mega-colh::before { content: ''; width: 18px; height: 3px; border-radius: 999px; background: var(--dc-grad); flex: none; } /* ── Row items — accent bar wipes in, icon lifts with a tone glow, title wraps to 2 lines, desc clamps at 2 (was 1 — the clip). */ .aitshd-mega-panel-discover .aitshd-mega-item, .aitshd-mega-panel-discover .aitshd-mega-item.is-lg { padding: 9px 8px 9px 14px; gap: 10px; border-radius: 13px; align-items: center; transition: background-color .2s var(--ease,ease), transform .18s var(--ease,ease); } .aitshd-mega-panel-discover .aitshd-mega-item::before { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 22px; border-radius: 999px; background: var(--dc-grad); transform: translateY(-50%) scaleY(.2); transform-origin: center; opacity: 0; transition: transform .22s var(--ease,ease), opacity .22s var(--ease,ease); } .aitshd-mega-panel-discover .aitshd-mega-item:hover { background: linear-gradient(90deg, var(--dc-a1-soft), var(--dc-a2-soft)); } .aitshd-mega-panel-discover .aitshd-mega-item:hover::before { transform: translateY(-50%) scaleY(1); opacity: 1; } .aitshd-mega-panel-discover .aitshd-mega-item .aitshd-mega-item-icon, .aitshd-mega-panel-discover .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 38px; height: 38px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55); } body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-item .aitshd-mega-item-icon, body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-item.is-lg .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-mega-panel-discover .aitshd-mega-item-icon svg { width: 18px; height: 18px; } .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.07) translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor; } body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor; } /* Title — wraps to 2 lines (badges now live OUTSIDE at the right edge, so the wrap can never strand a pill on its own line). */ .aitshd-mega-panel-discover .aitshd-mega-item-title, .aitshd-mega-panel-discover .aitshd-mega-item.is-lg .aitshd-mega-item-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.22; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; max-height: 2.44em; } /* Desc — TWO-line clamp (was 1: that clipped "Side-by-side tool comparison", "Curated GPT shortlists", "Use without registration"). */ .aitshd-mega-panel-discover .aitshd-mega-item-desc { font-size: 11.5px; font-weight: 400; color: var(--aits-mut); line-height: 1.34; margin-top: 2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Right-edge badge — compact so it never crowds the arrow */ .aitshd-mega-panel-discover .aitshd-mega-badge-inline { flex: none; font-size: 9px; padding: 3px 6px; letter-spacing: .05em; } /* When a row carries a badge, the badge IS the right-edge affordance — hide the chevron so the body keeps the ~24px it needs and "AI extensions for your browser" / "Recent product launches" fit their 2-line clamp instead of ellipsizing. */ .aitshd-mega-panel-discover .aitshd-mega-badge-inline + .aitshd-mega-item-arrow { display: none; } .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); } .aitshd-mega-panel-discover .aitshd-mega-item:hover .aitshd-mega-item-arrow { color: var(--aits-blue); } /* View-all — brand pill pinned to the column bottom, arrow-in-disc slides on hover. Kills the dead space under short columns. */ .aitshd-mega-panel-discover .aitshd-mega-view-all-link { margin: auto 0 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--aits-blue-dark); border: 1px solid var(--aits-blue-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2)); box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6); transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s; } body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-view-all-link { color: var(--aits-blue-light); background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .aitshd-mega-panel-discover .aitshd-mega-view-all-link svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue); transition: background .2s, color .2s, transform .2s; } .aitshd-mega-panel-discover .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-discover .aitshd-mega-view-all-link:focus { color: var(--aits-blue-dark); border-color: var(--aits-blue); background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint)); box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7); transform: translateY(-1px); } body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-view-all-link:hover, body.theme-dark .aitshd-mega-panel-discover .aitshd-mega-view-all-link:focus { color: var(--aits-blue-light); } .aitshd-mega-panel-discover .aitshd-mega-view-all-link:hover svg { background: var(--aits-blue); color: #fff; transform: translateX(3px); } /* ═══════ "List Your AI Tool" promo tile (browse-rail tail) ═══════ Gradient-border CTA card in brand blue→cyan; rocket chip nudges up-right on hover like it's about to launch. */ .aitshd-dc-promo { position: relative; margin-top: auto; padding: 16px 16px 14px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(var(--aits-card), var(--aits-card)) padding-box, linear-gradient(135deg, rgba(54,128,237,.55), rgba(6,182,212,.45)) border-box; overflow: hidden; box-shadow: 0 10px 24px -18px rgba(54,128,237,.4); } .aitshd-dc-promo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(140% 100% at 100% 0%, rgba(54,128,237,.10), transparent 55%), radial-gradient(140% 100% at 0% 100%, rgba(6,182,212,.07), transparent 55%); pointer-events: none; } .aitshd-dc-promo::after { content: ''; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; background: radial-gradient(circle at 30% 30%, rgba(96,164,245,.30) 0%, transparent 65%); border-radius: 999px; pointer-events: none; } .aitshd-dc-promo > * { position: relative; z-index: 1; } .aitshd-dc-promo-body { position: relative; z-index: 1; } .aitshd-dc-promo-title { font-size: 13.5px; font-weight: 800; color: var(--aits-ink); line-height: 1.25; letter-spacing: -0.01em; } .aitshd-dc-promo-desc { font-size: 11.5px; font-weight: 500; color: var(--aits-mut); line-height: 1.4; margin-top: 4px; max-width: 72%; } .aitshd-dc-promo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(135deg, #3680ED, #06B6D4); color: #fff !important; font-size: 12.5px; font-weight: 800; letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 12px 22px -8px rgba(54,128,237,.6), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .2s, box-shadow .2s, background .2s, filter .2s; position: relative; z-index: 1; } .aitshd-dc-promo-cta:hover { background: linear-gradient(135deg, #2060C0, #0891B2); transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 16px 28px -10px rgba(54,128,237,.75), inset 0 1px 0 rgba(255,255,255,.26); } .aitshd-dc-promo-cta svg { transition: transform .2s; } .aitshd-dc-promo-cta:hover svg { transform: translateX(3px); } .aitshd-dc-promo-rocket { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, #3680ED, #06B6D4); color: #fff; box-shadow: 0 10px 20px -8px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.28); z-index: 2; transition: transform .3s var(--ease,ease); } .aitshd-dc-promo:hover .aitshd-dc-promo-rocket { transform: translate(2px, -2px) rotate(-8deg); } /* ═══════ Popular Comparison card — dual avatar + VS ═══════ Gradient border warms to brand on hover; the avatars pull apart and the rose VS pill pops — the head-to-head lands physically. */ .aitshd-dc-compare { position: relative; display: block; padding: 18px 18px 16px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(var(--aits-card), var(--aits-card)) padding-box, linear-gradient(135deg, var(--aits-line), var(--aits-line)) border-box; text-decoration: none; color: var(--aits-ink); transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; text-align: center; overflow: hidden; } .aitshd-dc-compare::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 100%, rgba(54,128,237,.06), transparent 55%); pointer-events: none; } .aitshd-dc-compare > * { position: relative; z-index: 1; } .aitshd-dc-compare:hover { transform: translateY(-2px); background: linear-gradient(var(--aits-card), var(--aits-card)) padding-box, linear-gradient(135deg, rgba(54,128,237,.55), rgba(6,182,212,.45)) border-box; box-shadow: 0 18px 32px -18px rgba(54,128,237,.4); } .aitshd-dc-compare-label { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); text-align: left; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-dc-compare-label { color: var(--aits-blue-light); } .aitshd-dc-compare-label::before { content: ''; width: 14px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #3680ED, #06B6D4); flex: none; } .aitshd-dc-compare-versus { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; position: relative; } .aitshd-dc-compare-avatar { width: 58px; height: 58px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; box-shadow: 0 8px 18px -8px rgba(15,23,42,.20), inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .2s, box-shadow .2s; } body.theme-dark .aitshd-dc-compare-avatar { box-shadow: 0 8px 18px -8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); } .aitshd-dc-compare:hover .aitshd-dc-compare-avatar:first-of-type { transform: translateX(-3px) scale(1.04); box-shadow: 0 10px 22px -8px currentColor, inset 0 0 0 1px rgba(255,255,255,.4); } .aitshd-dc-compare:hover .aitshd-dc-compare-avatar:last-of-type { transform: translateX(3px) scale(1.04); box-shadow: 0 10px 22px -8px currentColor, inset 0 0 0 1px rgba(255,255,255,.4); } .aitshd-dc-compare-versus [data-tone="emerald"] { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-dc-compare-versus [data-tone="amber"] { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-dc-compare-versus [data-tone="violet"] { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-dc-compare-versus [data-tone="rose"] { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-dc-compare-versus [data-tone="blue"] { background: var(--tint-blue-bg); color: var(--tint-blue-ink); } .aitshd-dc-compare-versus [data-tone="cyan"] { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-dc-compare-vs { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(135deg, #F43F5E, #E11D48); color: #fff; font-weight: 900; font-size: 10.5px; letter-spacing: 0.06em; box-shadow: 0 8px 16px -6px rgba(244,63,94,.6), inset 0 1px 0 rgba(255,255,255,.2); margin: 0 -8px; z-index: 2; transition: transform .2s; } .aitshd-dc-compare:hover .aitshd-dc-compare-vs { transform: scale(1.12); } .aitshd-dc-compare-title { display: block; font-size: 16px; font-weight: 800; color: var(--aits-ink); letter-spacing: -0.02em; line-height: 1.2; } .aitshd-dc-compare:hover .aitshd-dc-compare-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-dc-compare:hover .aitshd-dc-compare-title { color: var(--aits-blue-light); } .aitshd-dc-compare-sub { display: block; font-size: 12px; font-weight: 400; color: var(--aits-mut); line-height: 1.4; margin-top: 4px; margin-bottom: 12px; } .aitshd-dc-compare-cta { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--aits-blue-dark); background: var(--aits-blue-tint); transition: background .2s, color .2s; } body.theme-dark .aitshd-dc-compare-cta { color: var(--aits-blue-light); background: var(--aits-blue-tint); } .aitshd-dc-compare:hover .aitshd-dc-compare-cta { background: var(--aits-blue); color: #fff; } .aitshd-dc-compare-cta svg { transition: transform .2s; } .aitshd-dc-compare:hover .aitshd-dc-compare-cta svg { transform: translateX(4px); } /* ═══════ Trending Searches strip ═══════ Live-pulse dot on the label, chips lift with an icon tone-glow, hot flames tilt with heat. */ .aitshd-dc-trending { border-top: 1px solid var(--aits-line); padding: 18px 24px 20px; background: linear-gradient(0deg, var(--aits-surface-2) 0%, var(--aits-card) 80%); } .aitshd-dc-trending-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 4px 14px; } .aitshd-dc-trending-head strong { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); display: inline-flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-dc-trending-head strong { color: var(--aits-blue-light); } .aitshd-dc-trending-head strong::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--aits-blue); box-shadow: 0 0 0 3px rgba(54,128,237,.22); animation: aitshdDcPulse 2.2s ease-in-out infinite; } @keyframes aitshdDcPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(54,128,237,.22); } 50% { box-shadow: 0 0 0 6px rgba(54,128,237,.05); } } @media (prefers-reduced-motion: reduce) { .aitshd-dc-trending-head strong::before { animation: none; } } .aitshd-dc-trending-head a { font-size: 12.5px; font-weight: 700; color: var(--aits-blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; transition: background .18s, color .18s; } body.theme-dark .aitshd-dc-trending-head a { color: var(--aits-blue-light); } .aitshd-dc-trending-head a:hover { background: var(--aits-blue-tint); } .aitshd-dc-trending-head a svg { transition: transform .2s; } .aitshd-dc-trending-head a:hover svg { transform: translateX(3px); } .aitshd-dc-trending-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 10px; } .aitshd-dc-trending-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .2s, transform .2s, box-shadow .2s; min-width: 0; box-shadow: 0 1px 0 rgba(15,23,42,.03); } .aitshd-dc-trending-chip:hover { border-color: var(--aits-blue-line); transform: translateY(-2px); color: var(--aits-blue-dark); box-shadow: 0 14px 24px -16px rgba(54,128,237,.4), 0 2px 4px rgba(15,23,42,.04); } body.theme-dark .aitshd-dc-trending-chip:hover { color: var(--aits-blue-light); } .aitshd-dc-trending-ico { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s, box-shadow .2s; } body.theme-dark .aitshd-dc-trending-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-dc-trending-chip[data-tone="emerald"] .aitshd-dc-trending-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-dc-trending-chip[data-tone="amber"] .aitshd-dc-trending-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-dc-trending-chip[data-tone="violet"] .aitshd-dc-trending-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-dc-trending-chip[data-tone="rose"] .aitshd-dc-trending-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-dc-trending-chip[data-tone="pink"] .aitshd-dc-trending-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-dc-trending-chip[data-tone="cyan"] .aitshd-dc-trending-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-dc-trending-chip[data-tone="indigo"] .aitshd-dc-trending-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-dc-trending-chip:hover .aitshd-dc-trending-ico { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor; } .aitshd-dc-trending-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; } .aitshd-dc-trending-hot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(244,63,94,.14)); color: #F97316; flex: none; transition: transform .3s var(--ease,ease), color .2s; } .aitshd-dc-trending-chip:hover .aitshd-dc-trending-hot { color: #EA580C; transform: rotate(-8deg) scale(1.1); } /* ═══════ Assurance rail (trust footer) — 2026-08-02 premium rebuild ═══════ Same rebuild the Deals band got, in Discover's blue→cyan identity. The bug fixed here is the one all four trust strips shipped with: the title and desc were inline spans inside an inline body whose only rule was min-width, so each promise rendered as one run-on paragraph ("Unbiased & Independent 100% unbiased tool reviews") and the desc's margin-top did nothing. Card layout also retires the hairline dividers, and with them the orphan divider on a wrapped row. */ .aitshd-dc-trust { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--aits-line); background: radial-gradient(120% 180% at 0% 0%, var(--dc-a1-soft), transparent 58%), radial-gradient(120% 180% at 100% 100%, var(--dc-a2-soft), transparent 58%), linear-gradient(0deg, var(--aits-surface-2), var(--aits-card)); } /* Brand hairline riding the band's top edge — blue→cyan, faded at both ends. */ .aitshd-dc-trust::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--dc-a1) 20%, var(--dc-a2) 80%, transparent); opacity: .5; pointer-events: none; } .aitshd-dc-trust-item { position: relative; display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 12px 13px 13px; border-radius: 14px; border: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); overflow: hidden; transition: transform .26s var(--ease,ease), border-color .2s var(--ease,ease), box-shadow .26s var(--ease,ease); } body.theme-dark .aitshd-dc-trust-item { background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .aitshd-dc-trust-item::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--dc-grad); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: transform .38s var(--ease,ease), opacity .22s var(--ease,ease); pointer-events: none; } .aitshd-dc-trust-ico { position: relative; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease,ease); } .aitshd-dc-trust-ico > svg { position: relative; z-index: 1; } body.theme-dark .aitshd-dc-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-dc-trust-ico::after { content: ''; position: absolute; inset: -25%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); transform: translateX(-130%); opacity: 0; pointer-events: none; } body.theme-dark .aitshd-dc-trust-ico::after { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%); } .aitshd-dc-trust-item[data-tone="emerald"] .aitshd-dc-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-dc-trust-item[data-tone="amber"] .aitshd-dc-trust-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-dc-trust-item[data-tone="rose"] .aitshd-dc-trust-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-dc-trust-item[data-tone="violet"] .aitshd-dc-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-dc-trust-item[data-tone="pink"] .aitshd-dc-trust-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-dc-trust-item[data-tone="cyan"] .aitshd-dc-trust-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-dc-trust-item[data-tone="indigo"] .aitshd-dc-trust-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-dc-trust-item[data-tone="slate"] .aitshd-dc-trust-ico { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } /* Inline body → column, so title and desc stop sharing a line. */ .aitshd-dc-trust-body { min-width: 0; display: flex; flex-direction: column; padding-top: 1px; } .aitshd-dc-trust-title { display: block; font-size: 13px; font-weight: 800; color: var(--aits-ink); line-height: 1.25; letter-spacing: -0.01em; white-space: normal; transition: color .18s var(--ease,ease); } .aitshd-dc-trust-desc { display: block; font-size: 11.5px; font-weight: 500; color: var(--aits-mut); line-height: 1.45; margin-top: 4px; white-space: normal; overflow-wrap: break-word; } @media (hover: hover) { .aitshd-dc-trust-item:hover { transform: translateY(-3px); border-color: var(--aits-blue-line); box-shadow: 0 20px 34px -24px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.7); } body.theme-dark .aitshd-dc-trust-item:hover { box-shadow: 0 20px 34px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08); } .aitshd-dc-trust-item:hover::after { transform: scaleX(1); opacity: 1; } .aitshd-dc-trust-item:hover .aitshd-dc-trust-ico { transform: translateY(-2px) scale(1.07) rotate(-4deg); /* currentColor is the tone ink, so each medallion glows its own hue. */ box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 20px -12px currentColor; } body.theme-dark .aitshd-dc-trust-item:hover .aitshd-dc-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 22px -12px currentColor; } .aitshd-dc-trust-item:hover .aitshd-dc-trust-ico::after { opacity: 1; transform: translateX(130%); transition: transform .7s var(--ease,ease), opacity .2s var(--ease,ease); } .aitshd-dc-trust-item:hover .aitshd-dc-trust-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-dc-trust-item:hover .aitshd-dc-trust-title { color: var(--aits-blue-light); } } /* Staggered rise as the panel opens, so the eye finishes on the reassurance instead of arriving to a static footer. */ @keyframes aitshdDcTrustIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item { animation: aitshdDcTrustIn .46s var(--ease,ease) backwards; } .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item:nth-child(1) { animation-delay: .05s; } .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item:nth-child(2) { animation-delay: .11s; } .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item:nth-child(3) { animation-delay: .17s; } .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item:nth-child(4) { animation-delay: .23s; } /* Responsive ladder 4 → 2×2 → 1. Four promises halve cleanly, so this band needs no span trick — it steps at 1140 with the panel's own column drop. 1023 and below the burger owns the header and this band is unreachable, so the 1-up step is defensive only. */ @media (max-width: 1140px) { .aitshd-dc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1023px) { .aitshd-dc-trust { padding: 14px 16px 18px; } } @media (max-width: 720px) { .aitshd-dc-trust { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .aitshd-dc-trust-item, .aitshd-dc-trust-item::after, .aitshd-dc-trust-ico, .aitshd-dc-trust-ico::after, .aitshd-dc-trust-title { transition: none; } .aitshd[data-mega-discover-open="1"] .aitshd-dc-trust-item { animation: none; } .aitshd-dc-trust-item:hover { transform: none; } .aitshd-dc-trust-item:hover .aitshd-dc-trust-ico { transform: none; } } /* ═══════ Mobile drawer — Discover section ═══════ On-brand blue rebuild for phones/tablets (<1024px, where the mega is unreachable): 2-col chip grid, VS compare tile, trending pills. Opt-in via .aitshd-drawer-disc-*. */ .aitshd-drawer-disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; } .aitshd-drawer-disc-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; font-size: 12.5px; font-weight: 600; min-width: 0; transition: border-color .18s, background-color .18s, transform .18s; } .aitshd-drawer-disc-chip:hover, .aitshd-drawer-disc-chip:active { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); transform: translateY(-1px); } .aitshd-drawer-disc-chip-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; } .aitshd-drawer-disc-chip[data-tone="cyan"] .aitshd-drawer-disc-chip-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-drawer-disc-chip[data-tone="violet"] .aitshd-drawer-disc-chip-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-disc-chip[data-tone="emerald"] .aitshd-drawer-disc-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-disc-chip[data-tone="amber"] .aitshd-drawer-disc-chip-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-disc-chip[data-tone="rose"] .aitshd-drawer-disc-chip-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-disc-chip[data-tone="pink"] .aitshd-drawer-disc-chip-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-drawer-disc-chip[data-tone="indigo"] .aitshd-drawer-disc-chip-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-drawer-disc-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } /* Title wraps to 2 lines — "Explore Directory" clipped to "Explore Direct…" in a ~150px chip under nowrap-ellipsis. */ .aitshd-drawer-disc-chip-title { font-size: 13px; font-weight: 700; color: var(--aits-ink); white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-drawer-disc-chip-sub { font-size: 10.5px; font-weight: 600; color: var(--aits-mut); margin-top: 2px; letter-spacing: .02em; } /* Mobile compare card — compact horizontal VS layout */ .aitshd-drawer-disc-compare { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: linear-gradient(var(--aits-card), var(--aits-card)) padding-box, linear-gradient(135deg, rgba(54,128,237,.45), rgba(6,182,212,.35)) border-box; text-decoration: none; color: var(--aits-ink); } .aitshd-drawer-disc-compare-avs { display: inline-flex; align-items: center; gap: 4px; flex: none; } .aitshd-drawer-disc-compare-avs > span { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; letter-spacing: -0.02em; background: var(--tint-blue-bg); color: var(--tint-blue-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } body.theme-dark .aitshd-drawer-disc-compare-avs > span { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .aitshd-drawer-disc-compare-avs [data-tone="emerald"] { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-disc-compare-avs [data-tone="amber"] { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-disc-compare-avs [data-tone="violet"] { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-disc-compare-avs [data-tone="rose"] { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-disc-compare-vs { font-size: 9.5px; font-weight: 900; color: #fff; padding: 3px 7px; border-radius: 999px; background: linear-gradient(135deg, #F43F5E, #E11D48); letter-spacing: .06em; box-shadow: 0 4px 10px -4px rgba(244,63,94,.5); } .aitshd-drawer-disc-compare-copy { flex: 1; min-width: 0; } .aitshd-drawer-disc-compare-title { font-size: 13px; font-weight: 800; color: var(--aits-ink); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-drawer-disc-compare-sub { font-size: 11.5px; font-weight: 500; color: var(--aits-mut); margin-top: 2px; line-height: 1.3; } /* Trending searches — inline flex-wrap pill row */ .aitshd-drawer-disc-trending { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; } .aitshd-drawer-disc-trending > a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px 6px 8px; border-radius: 999px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; font-size: 11.5px; font-weight: 700; transition: border-color .18s, background-color .18s; } .aitshd-drawer-disc-trending > a:hover, .aitshd-drawer-disc-trending > a:active { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); } body.theme-dark .aitshd-drawer-disc-trending > a:hover, body.theme-dark .aitshd-drawer-disc-trending > a:active { color: var(--aits-blue-light); } .aitshd-drawer-disc-trending svg { flex: none; } .aitshd-drawer-disc-trending .hot { color: #F97316; } /* ── Drawer assurance rail — the mega's trust band restacked for touch. The mega never renders under 1024px, so mobile and tablet had none of these promises. Deliberately 1-up at every width: .aitshd-drawer-panel caps at 390px from a 430px viewport up, so a viewport-driven 2-up would leave each card ~170px and wrap the descs to three lines. The --dc-* tokens live on the mega panel, so the gradient is spelled out here the same way the drawer hero's brand CTA is. */ .aitshd-drawer-disc-trust { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 8px 0 4px; } .aitshd-drawer-disc-trust-item { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px 11px; border-radius: 12px; border: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2)); overflow: hidden; transition: border-color .18s var(--ease,ease), transform .18s var(--ease,ease); } body.theme-dark .aitshd-drawer-disc-trust-item { background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)); } .aitshd-drawer-disc-trust-item::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #3680ED, #06B6D4); transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ease,ease); pointer-events: none; } body.theme-dark .aitshd-drawer-disc-trust-item::after { background: linear-gradient(90deg, #60A4F5, #22D3EE); } .aitshd-drawer-disc-trust-item:active, .aitshd-drawer-disc-trust-item:hover { border-color: var(--aits-blue-line); transform: translateY(-1px); } .aitshd-drawer-disc-trust-item:active::after, .aitshd-drawer-disc-trust-item:hover::after { transform: scaleX(1); } .aitshd-drawer-disc-trust-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: transform .24s cubic-bezier(.34,1.56,.64,1); } body.theme-dark .aitshd-drawer-disc-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-drawer-disc-trust-item:active .aitshd-drawer-disc-trust-ico, .aitshd-drawer-disc-trust-item:hover .aitshd-drawer-disc-trust-ico { transform: scale(1.08); } .aitshd-drawer-disc-trust-item[data-tone="emerald"] .aitshd-drawer-disc-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-disc-trust-item[data-tone="amber"] .aitshd-drawer-disc-trust-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-disc-trust-item[data-tone="rose"] .aitshd-drawer-disc-trust-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-disc-trust-item[data-tone="violet"] .aitshd-drawer-disc-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-disc-trust-item[data-tone="pink"] .aitshd-drawer-disc-trust-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-drawer-disc-trust-item[data-tone="cyan"] .aitshd-drawer-disc-trust-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-drawer-disc-trust-item[data-tone="indigo"] .aitshd-drawer-disc-trust-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-drawer-disc-trust-item[data-tone="slate"] .aitshd-drawer-disc-trust-ico { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-drawer-disc-trust-copy { min-width: 0; display: flex; flex-direction: column; } .aitshd-drawer-disc-trust-title { display: block; font-size: 12.5px; font-weight: 800; color: var(--aits-ink); line-height: 1.25; letter-spacing: -0.01em; white-space: normal; } .aitshd-drawer-disc-trust-desc { display: block; font-size: 11px; font-weight: 500; color: var(--aits-mut); line-height: 1.4; margin-top: 3px; white-space: normal; overflow-wrap: break-word; } @media (prefers-reduced-motion: reduce) { .aitshd-drawer-disc-trust-item, .aitshd-drawer-disc-trust-item::after, .aitshd-drawer-disc-trust-ico { transition: none; } .aitshd-drawer-disc-trust-item:active, .aitshd-drawer-disc-trust-item:hover { transform: none; } } /* ══════════════════════════════════════════════════════════════════ RESOURCES MEGA — premium reference library (2026-07-31 redesign) 4 reference lanes (Learn & Read / Tools & Help / Community / Legal & Policies) + a newsletter + Popular Resources rail, then a Featured Guides strip and a trust footer. Identity: BRAND-BLUE led (#3680ED → indigo #6366F1) so Resources reads unmistakably as AIToolsay — no off-brand green. Every accent bar, hover wash, view-all pill and CTA is on-brand in BOTH themes. Fixes shipped here (were live bugs in the screenshot): · titles no longer ellipsis-clip ("AI Tools Commu…" etc.) — the base .aitshd-mega-item-title is nowrap+ellipsis and Resources never overrode it. It now wraps to 2 clean lines. · descriptions wrap to 2 lines instead of truncating mid-word. · Popular Resources titles wrap ("ChatGPT Prompts Libr…" fixed). All rules are scoped under .aitshd-mega-panel-resources (or the .aitshd-rc-* / .aitshd-drawer-res-* namespaces) so nothing leaks into the six sibling megas. ══════════════════════════════════════════════════════════════════ */ /* Panel-local accent tokens — one place to retune the whole identity. Light: brand blue → indigo. Dark: lifted twins so accents glow. */ .aitshd-mega-panel-resources { --rc-a1: #3680ED; /* brand blue */ --rc-a2: #6366F1; /* indigo */ --rc-a1-soft: rgba(54,128,237,.06); --rc-a2-soft: rgba(99,102,241,.05); --rc-grad: linear-gradient(90deg, var(--rc-a1), var(--rc-a2)); } body.theme-dark .aitshd-mega-panel-resources { --rc-a1: #60A4F5; --rc-a2: #818CF8; --rc-a1-soft: rgba(96,164,245,.10); --rc-a2-soft: rgba(129,140,248,.08); } .aitshd[data-mega-resources-open="1"] .aitshd-mega-panel-resources { display: block; opacity: 1; transform: translate(-50%, 12px); } .aitshd[data-mega-resources-open="1"] .aitshd-mega-backdrop { opacity: 1; pointer-events: auto; } /* Panel shell — brand-blue ambient wash toward the featured rail, capped in height with a slim branded scrollbar so a dense library can never run off a short laptop/tablet. */ .aitshd-mega-panel-resources { background: radial-gradient(120% 90% at 100% 0%, rgba(54,128,237,.05) 0%, transparent 52%), radial-gradient(90% 120% at 0% 100%, rgba(99,102,241,.045) 0%, transparent 55%), var(--aits-card); max-height: calc(100vh - var(--hd-h) - 30px);max-height: calc(100dvh - var(--hd-h) - 30px); overflow-y: auto; overscroll-behavior: contain; } body.theme-dark .aitshd-mega-panel-resources { background: radial-gradient(120% 90% at 100% 0%, rgba(96,164,245,.10) 0%, transparent 52%), radial-gradient(90% 120% at 0% 100%, rgba(129,140,248,.08) 0%, transparent 55%), var(--aits-card); } .aitshd-mega-panel-resources::-webkit-scrollbar { width: 10px; } .aitshd-mega-panel-resources::-webkit-scrollbar-thumb { background: var(--aits-blue-line); border-radius: 999px; border: 3px solid var(--aits-card); } .aitshd-mega-panel-resources::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-light); } .aitshd-mega-panel-resources { scrollbar-width: thin; scrollbar-color: var(--aits-blue-line) transparent; } /* ── Grid — 4 reference lanes + a wider featured rail. Steps down cleanly from a 1440px desktop to a 1024px touch tablet (where the panel opens on tap, not hover). */ .aitshd-mega-panel-resources .aitshd-mega-wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 344px; } @media (max-width: 1320px) { .aitshd-mega-panel-resources .aitshd-mega-wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 312px; } } @media (max-width: 1140px) { .aitshd-mega-panel-resources .aitshd-mega-wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 300px; } .aitshd-mega-panel-resources .aitshd-mega-col-legal { display: none; } } @media (max-width: 900px) { .aitshd-mega-panel-resources .aitshd-mega-wrap { grid-template-columns: 1fr; } .aitshd-mega-panel-resources .aitshd-mega-featured-col { display: none; } } /* Column dividers — fading hairlines pull the lanes into one sheet. */ .aitshd-mega-panel-resources .aitshd-mega-col + .aitshd-mega-col { border-left: 1px solid transparent; background-image: linear-gradient(180deg, transparent, var(--aits-line) 12%, var(--aits-line) 88%, transparent); background-repeat: no-repeat; background-size: 1px 100%; background-position: left center; } .aitshd-mega-panel-resources .aitshd-mega-col { padding: 24px 16px 18px; display: flex; flex-direction: column; min-width: 0; } .aitshd-mega-panel-resources .aitshd-mega-featured-col { padding: 24px 22px 20px 8px; gap: 14px; } /* Column headers — brand accent bar + tidy label. */ .aitshd-mega-panel-resources .aitshd-mega-colh { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); padding: 2px 6px 12px; display: flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-colh { color: var(--aits-blue-light); } .aitshd-mega-panel-resources .aitshd-mega-colh::before { content: ''; width: 18px; height: 3px; border-radius: 999px; background: var(--rc-grad); flex: none; } /* ── Row items — the heart of the fix. A left accent bar wipes in on hover, the icon tile lifts with a tone-tinted glow, and the title/desc WRAP instead of clipping. */ .aitshd-mega-panel-resources .aitshd-mega-item, .aitshd-mega-panel-resources .aitshd-mega-item.is-lg { padding: 9px 11px 9px 15px; border-radius: 13px; align-items: flex-start; transition: background-color .2s var(--ease,ease), transform .18s var(--ease,ease); } .aitshd-mega-panel-resources .aitshd-mega-item::before { content: ''; position: absolute; left: 5px; top: 50%; width: 3px; height: 22px; border-radius: 999px; background: var(--rc-grad); transform: translateY(-50%) scaleY(.2); transform-origin: center; opacity: 0; transition: transform .22s var(--ease,ease), opacity .22s var(--ease,ease); } .aitshd-mega-panel-resources .aitshd-mega-item:hover { background: linear-gradient(90deg, var(--rc-a1-soft), var(--rc-a2-soft)); } body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item:hover { background: linear-gradient(90deg, var(--rc-a1-soft), var(--rc-a2-soft)); } .aitshd-mega-panel-resources .aitshd-mega-item:hover::before { transform: translateY(-50%) scaleY(1); opacity: 1; } /* Icon tile — sits at the top of the (now possibly 2-line) row. */ .aitshd-mega-panel-resources .aitshd-mega-item .aitshd-mega-item-icon, .aitshd-mega-panel-resources .aitshd-mega-item.is-lg .aitshd-mega-item-icon { width: 40px; height: 40px; border-radius: 11px; margin-top: 1px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.55); } body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item .aitshd-mega-item-icon, body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item.is-lg .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-mega-panel-resources .aitshd-mega-item-icon svg { width: 19px; height: 19px; } .aitshd-mega-panel-resources .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: scale(1.07) translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px currentColor; } body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item:hover .aitshd-mega-item-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px -8px currentColor; } /* THE CLIPPING FIX — titles wrap to 2 lines (badge stays inline), matching how Learn/Discover already behave. */ .aitshd-mega-panel-resources .aitshd-mega-item-title, .aitshd-mega-panel-resources .aitshd-mega-item.is-lg .aitshd-mega-item-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal; overflow: hidden; text-overflow: clip; font-size: 13.5px; font-weight: 700; line-height: 1.24; letter-spacing: -0.01em; max-height: 2.5em; } .aitshd-mega-panel-resources .aitshd-mega-item-desc { font-size: 11.5px; font-weight: 400; color: var(--aits-mut); line-height: 1.34; margin-top: 2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-mega-panel-resources .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--aits-blue-light); } /* View-all footer link — pushed to the bottom of each lane, brand pill with an arrow-in-disc that slides on hover. */ .aitshd-mega-panel-resources .aitshd-mega-view-all-link { margin: auto 0 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--aits-blue-dark); border: 1px solid var(--aits-blue-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-blue-tint-2)); box-shadow: 0 1px 0 rgba(15,23,42,.03), inset 0 1px 0 rgba(255,255,255,.6); transition: background .22s var(--ease,ease), border-color .2s, box-shadow .22s, color .2s, transform .18s; } body.theme-dark .aitshd-mega-panel-resources .aitshd-mega-view-all-link { color: var(--aits-blue-light); background: linear-gradient(180deg, var(--aits-surface-3), var(--aits-blue-tint-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .aitshd-mega-panel-resources .aitshd-mega-view-all-link svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue); transition: background .2s, color .2s, transform .2s; } .aitshd-mega-panel-resources .aitshd-mega-view-all-link:hover { border-color: var(--aits-blue); background: linear-gradient(180deg, var(--aits-blue-tint-2), var(--aits-blue-tint)); box-shadow: 0 10px 22px -14px rgba(54,128,237,.55), inset 0 1px 0 rgba(255,255,255,.7); transform: translateY(-1px); } .aitshd-mega-panel-resources .aitshd-mega-view-all-link:hover svg { background: var(--aits-blue); color: #fff; transform: translateX(3px); } /* ═══════ Popular Resources compact list ═══════ */ .aitshd-rc-popular { padding: 16px 14px; border-radius: 18px; border: 1px solid var(--aits-line); background: var(--aits-card); display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(15,23,42,.03); } .aitshd-rc-popular-h { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); padding: 0 4px 10px; display: flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-rc-popular-h { color: var(--aits-blue-light); } .aitshd-rc-popular-h::before { content: ''; width: 14px; height: 3px; border-radius: 999px; background: var(--rc-grad, linear-gradient(90deg,#3680ED,#6366F1)); flex: none; } .aitshd-rc-popular-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: var(--aits-ink); transition: background-color .2s, transform .18s; } .aitshd-rc-popular-item + .aitshd-rc-popular-item { border-top: 1px solid var(--aits-line-soft, var(--aits-line)); } .aitshd-rc-popular-item:hover { background: linear-gradient(90deg, rgba(54,128,237,.07), rgba(99,102,241,.05)); } body.theme-dark .aitshd-rc-popular-item:hover { background: linear-gradient(90deg, rgba(96,164,245,.11), rgba(129,140,248,.08)); } .aitshd-rc-popular-ico { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); } body.theme-dark .aitshd-rc-popular-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-rc-popular-item[data-tone="amber"] .aitshd-rc-popular-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-rc-popular-item[data-tone="rose"] .aitshd-rc-popular-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-rc-popular-item[data-tone="violet"] .aitshd-rc-popular-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-rc-popular-item[data-tone="emerald"] .aitshd-rc-popular-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-rc-popular-item[data-tone="cyan"] .aitshd-rc-popular-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-rc-popular-item[data-tone="pink"] .aitshd-rc-popular-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-rc-popular-item[data-tone="indigo"] .aitshd-rc-popular-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-rc-popular-item:hover .aitshd-rc-popular-ico { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 18px -8px currentColor; } .aitshd-rc-popular-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .aitshd-rc-popular-title { font-size: 13px; font-weight: 700; color: var(--aits-ink); line-height: 1.24; letter-spacing: -0.01em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-rc-popular-desc { font-size: 11.5px; font-weight: 400; color: var(--aits-mut); margin-top: 2px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-rc-popular-arrow { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--aits-faint); flex: none; transition: background .2s, color .2s, transform .2s; } .aitshd-rc-popular-item:hover .aitshd-rc-popular-arrow { color: var(--aits-blue); background: var(--aits-blue-tint); transform: translateX(3px); } body.theme-dark .aitshd-rc-popular-item:hover .aitshd-rc-popular-arrow { color: var(--aits-blue-light); background: var(--aits-blue-tint); } .aitshd-rc-popular-item:hover .aitshd-rc-popular-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-rc-popular-item:hover .aitshd-rc-popular-title { color: var(--aits-blue-light); } /* ═══════ Featured Guides strip ═══════ Guide cards with a brand top-accent line; lift + glow on hover. */ .aitshd-rc-guides { border-top: 1px solid var(--aits-line); padding: 20px 24px 22px; background: linear-gradient(0deg, var(--aits-surface-2) 0%, var(--aits-card) 80%); } .aitshd-rc-guides-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 4px 14px; } .aitshd-rc-guides-head strong { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aits-blue-dark); display: inline-flex; align-items: center; gap: 8px; } body.theme-dark .aitshd-rc-guides-head strong { color: var(--aits-blue-light); } .aitshd-rc-guides-head strong::before { content: ''; width: 14px; height: 3px; border-radius: 999px; background: var(--rc-grad, linear-gradient(90deg,#3680ED,#6366F1)); flex: none; } .aitshd-rc-guides-head a { font-size: 12.5px; font-weight: 700; color: var(--aits-blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; transition: background .18s, color .18s; } body.theme-dark .aitshd-rc-guides-head a { color: var(--aits-blue-light); } .aitshd-rc-guides-head a:hover { background: var(--aits-blue-tint); } .aitshd-rc-guides-head a svg { transition: transform .2s; } .aitshd-rc-guides-head a:hover svg { transform: translateX(3px); } .aitshd-rc-guides-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; } .aitshd-rc-guide { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; min-width: 0; box-shadow: 0 1px 0 rgba(15,23,42,.03); } .aitshd-rc-guide::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tint-blue-ink), rgba(99,102,241,.6)); opacity: .5; transition: opacity .2s; } .aitshd-rc-guide[data-tone="emerald"]::before { background: linear-gradient(90deg, var(--tint-emerald-ink), rgba(16,185,129,.6)); } .aitshd-rc-guide[data-tone="amber"]::before { background: linear-gradient(90deg, var(--tint-amber-ink), rgba(245,158,11,.6)); } .aitshd-rc-guide[data-tone="violet"]::before { background: linear-gradient(90deg, var(--tint-violet-ink), rgba(14,165,233,.6)); } .aitshd-rc-guide[data-tone="rose"]::before { background: linear-gradient(90deg, var(--tint-rose-ink), rgba(244,63,94,.6)); } .aitshd-rc-guide[data-tone="pink"]::before { background: linear-gradient(90deg, var(--tint-pink-ink), rgba(236,72,153,.6)); } .aitshd-rc-guide[data-tone="cyan"]::before { background: linear-gradient(90deg, var(--tint-cyan-ink), rgba(6,182,212,.6)); } .aitshd-rc-guide:hover { border-color: var(--aits-blue-line); transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(54,128,237,.42), 0 2px 4px rgba(15,23,42,.04); } .aitshd-rc-guide:hover::before { opacity: 1; } .aitshd-rc-guide-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .2s, box-shadow .2s; } body.theme-dark .aitshd-rc-guide-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-rc-guide[data-tone="emerald"] .aitshd-rc-guide-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-rc-guide[data-tone="amber"] .aitshd-rc-guide-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-rc-guide[data-tone="violet"] .aitshd-rc-guide-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-rc-guide[data-tone="rose"] .aitshd-rc-guide-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-rc-guide[data-tone="pink"] .aitshd-rc-guide-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-rc-guide[data-tone="cyan"] .aitshd-rc-guide-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-rc-guide:hover .aitshd-rc-guide-ico { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 20px -10px currentColor; } .aitshd-rc-guide-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .aitshd-rc-guide-title { font-size: 13.5px; font-weight: 800; color: var(--aits-ink); line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-rc-guide:hover .aitshd-rc-guide-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-rc-guide:hover .aitshd-rc-guide-title { color: var(--aits-blue-light); } .aitshd-rc-guide-desc { font-size: 11.5px; font-weight: 500; color: var(--aits-mut); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* ═══════ Assurance rail (trust footer) — 2026-08-02 premium rebuild ═══════ Third and last of the trust-band rebuilds (after Deals and Discover), in Resources' blue→indigo identity. The bug all three shipped with: the title and desc were inline spans inside an inline body whose only rule was min-width, so each promise rendered as one run-on paragraph ("100% Free Resources No paywalls, ever") and the desc's margin-top was a no-op. Cards also retire the hairline dividers, and with them the orphan divider that hung in space on a wrapped row. */ .aitshd-rc-trust { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--aits-line); background: radial-gradient(120% 180% at 0% 0%, var(--rc-a1-soft), transparent 58%), radial-gradient(120% 180% at 100% 100%, var(--rc-a2-soft), transparent 58%), linear-gradient(0deg, var(--aits-surface-2), var(--aits-card)); } /* Brand hairline riding the band's top edge — blue→indigo, faded at both ends. */ .aitshd-rc-trust::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--rc-a1) 20%, var(--rc-a2) 80%, transparent); opacity: .5; pointer-events: none; } .aitshd-rc-trust-item { position: relative; display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 12px 13px 13px; border-radius: 14px; border: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); overflow: hidden; transition: transform .26s var(--ease,ease), border-color .2s var(--ease,ease), box-shadow .26s var(--ease,ease); } body.theme-dark .aitshd-rc-trust-item { background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .aitshd-rc-trust-item::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rc-grad); transform: scaleX(0); transform-origin: left center; opacity: 0; transition: transform .38s var(--ease,ease), opacity .22s var(--ease,ease); pointer-events: none; } .aitshd-rc-trust-ico { position: relative; width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease,ease); } .aitshd-rc-trust-ico > svg { position: relative; z-index: 1; } body.theme-dark .aitshd-rc-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-rc-trust-ico::after { content: ''; position: absolute; inset: -25%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); transform: translateX(-130%); opacity: 0; pointer-events: none; } body.theme-dark .aitshd-rc-trust-ico::after { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%); } .aitshd-rc-trust-item[data-tone="emerald"] .aitshd-rc-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-rc-trust-item[data-tone="amber"] .aitshd-rc-trust-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-rc-trust-item[data-tone="rose"] .aitshd-rc-trust-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-rc-trust-item[data-tone="violet"] .aitshd-rc-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-rc-trust-item[data-tone="pink"] .aitshd-rc-trust-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-rc-trust-item[data-tone="cyan"] .aitshd-rc-trust-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-rc-trust-item[data-tone="indigo"] .aitshd-rc-trust-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-rc-trust-item[data-tone="slate"] .aitshd-rc-trust-ico { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } /* Inline body → column, so title and desc stop sharing a line. */ .aitshd-rc-trust-body { min-width: 0; display: flex; flex-direction: column; padding-top: 1px; } .aitshd-rc-trust-title { display: block; font-size: 13px; font-weight: 800; color: var(--aits-ink); line-height: 1.25; letter-spacing: -0.01em; white-space: normal; transition: color .18s var(--ease,ease); } .aitshd-rc-trust-desc { display: block; font-size: 11.5px; font-weight: 500; color: var(--aits-mut); line-height: 1.45; margin-top: 4px; white-space: normal; overflow-wrap: break-word; } @media (hover: hover) { .aitshd-rc-trust-item:hover { transform: translateY(-3px); border-color: var(--aits-blue-line); box-shadow: 0 20px 34px -24px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.7); } body.theme-dark .aitshd-rc-trust-item:hover { box-shadow: 0 20px 34px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08); } .aitshd-rc-trust-item:hover::after { transform: scaleX(1); opacity: 1; } .aitshd-rc-trust-item:hover .aitshd-rc-trust-ico { transform: translateY(-2px) scale(1.07) rotate(-4deg); /* currentColor is the tone ink, so each medallion glows its own hue. */ box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 20px -12px currentColor; } body.theme-dark .aitshd-rc-trust-item:hover .aitshd-rc-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 22px -12px currentColor; } .aitshd-rc-trust-item:hover .aitshd-rc-trust-ico::after { opacity: 1; transform: translateX(130%); transition: transform .7s var(--ease,ease), opacity .2s var(--ease,ease); } .aitshd-rc-trust-item:hover .aitshd-rc-trust-title { color: var(--aits-blue-dark); } body.theme-dark .aitshd-rc-trust-item:hover .aitshd-rc-trust-title { color: var(--aits-blue-light); } } /* Staggered rise as the panel opens, so the eye finishes on the reassurance instead of arriving to a static footer. */ @keyframes aitshdRcTrustIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item { animation: aitshdRcTrustIn .46s var(--ease,ease) backwards; } .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(1) { animation-delay: .05s; } .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(2) { animation-delay: .10s; } .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(3) { animation-delay: .15s; } .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(4) { animation-delay: .20s; } .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item:nth-child(5) { animation-delay: .25s; } /* Responsive ladder 5 → 3+2 → 2 → 1. Five promises do not halve, so the 3+2 step runs on a 6-track grid (span 2 ×3, then span 3 ×2) and the trailing pair splits its row evenly instead of hanging left; the quantity guards keep that to the exact-5 case. 1023 and below the burger owns the header, so those steps are defensive only. */ @media (max-width: 1280px) { .aitshd-rc-trust { grid-template-columns: repeat(6, minmax(0, 1fr)); } .aitshd-rc-trust-item { grid-column: span 2; } .aitshd-rc-trust-item:nth-child(4):nth-last-child(2), .aitshd-rc-trust-item:nth-child(5):nth-last-child(1) { grid-column: span 3; } } @media (max-width: 1023px) { .aitshd-rc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px 18px; } .aitshd-rc-trust-item, .aitshd-rc-trust-item:nth-child(4):nth-last-child(2), .aitshd-rc-trust-item:nth-child(5):nth-last-child(1) { grid-column: auto; } } @media (max-width: 720px) { .aitshd-rc-trust { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .aitshd-rc-trust-item, .aitshd-rc-trust-item::after, .aitshd-rc-trust-ico, .aitshd-rc-trust-ico::after, .aitshd-rc-trust-title { transition: none; } .aitshd[data-mega-resources-open="1"] .aitshd-rc-trust-item { animation: none; } .aitshd-rc-trust-item:hover { transform: none; } .aitshd-rc-trust-item:hover .aitshd-rc-trust-ico { transform: none; } } /* ═══════ Mobile drawer — Resources section ═══════ On-brand blue rebuild for phones/tablets (<1024px, where the mega is unreachable): 2-col chip grid, Popular list, Featured Guides. Opt-in via .aitshd-drawer-res-* so nothing leaks. */ .aitshd-drawer-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; } .aitshd-drawer-res-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; font-size: 12.5px; font-weight: 600; min-width: 0; transition: border-color .18s, background-color .18s, transform .18s; } .aitshd-drawer-res-chip:hover, .aitshd-drawer-res-chip:active { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); transform: translateY(-1px); } .aitshd-drawer-res-chip-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; } .aitshd-drawer-res-chip[data-tone="emerald"] .aitshd-drawer-res-chip-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-res-chip[data-tone="violet"] .aitshd-drawer-res-chip-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-res-chip[data-tone="amber"] .aitshd-drawer-res-chip-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-res-chip[data-tone="rose"] .aitshd-drawer-res-chip-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-res-chip[data-tone="cyan"] .aitshd-drawer-res-chip-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-drawer-res-chip[data-tone="pink"] .aitshd-drawer-res-chip-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-drawer-res-chip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .aitshd-drawer-res-chip-title { font-size: 13px; font-weight: 700; color: var(--aits-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-drawer-res-chip-sub { font-size: 10.5px; font-weight: 600; color: var(--aits-mut); margin-top: 2px; letter-spacing: .02em; } /* ── Drawer assurance rail — the mega's trust band restacked for touch. The mega never renders under 1024px, so mobile and tablet had none of these promises. Deliberately 1-up at every width: .aitshd-drawer-panel caps at 390px from a 430px viewport up, so a viewport-driven 2-up would leave each card ~170px and wrap the descs to three lines. The --rc-* tokens live on the mega panel, so the gradient is spelled out here the same way the drawer hero's brand CTA is. */ .aitshd-drawer-res-trust { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 8px 0 4px; } .aitshd-drawer-res-trust-item { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px 11px; border-radius: 12px; border: 1px solid var(--aits-line); background: linear-gradient(180deg, var(--aits-card), var(--aits-surface-2)); overflow: hidden; transition: border-color .18s var(--ease,ease), transform .18s var(--ease,ease); } body.theme-dark .aitshd-drawer-res-trust-item { background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)); } .aitshd-drawer-res-trust-item::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #3680ED, #6366F1); transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ease,ease); pointer-events: none; } body.theme-dark .aitshd-drawer-res-trust-item::after { background: linear-gradient(90deg, #60A4F5, #818CF8); } .aitshd-drawer-res-trust-item:active, .aitshd-drawer-res-trust-item:hover { border-color: var(--aits-blue-line); transform: translateY(-1px); } .aitshd-drawer-res-trust-item:active::after, .aitshd-drawer-res-trust-item:hover::after { transform: scaleX(1); } .aitshd-drawer-res-trust-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: transform .24s cubic-bezier(.34,1.56,.64,1); } body.theme-dark .aitshd-drawer-res-trust-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .aitshd-drawer-res-trust-item:active .aitshd-drawer-res-trust-ico, .aitshd-drawer-res-trust-item:hover .aitshd-drawer-res-trust-ico { transform: scale(1.08); } .aitshd-drawer-res-trust-item[data-tone="emerald"] .aitshd-drawer-res-trust-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-drawer-res-trust-item[data-tone="amber"] .aitshd-drawer-res-trust-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-drawer-res-trust-item[data-tone="rose"] .aitshd-drawer-res-trust-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-drawer-res-trust-item[data-tone="violet"] .aitshd-drawer-res-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-drawer-res-trust-item[data-tone="pink"] .aitshd-drawer-res-trust-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-drawer-res-trust-item[data-tone="cyan"] .aitshd-drawer-res-trust-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-drawer-res-trust-item[data-tone="indigo"] .aitshd-drawer-res-trust-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-drawer-res-trust-item[data-tone="slate"] .aitshd-drawer-res-trust-ico { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-drawer-res-trust-copy { min-width: 0; display: flex; flex-direction: column; } .aitshd-drawer-res-trust-title { display: block; font-size: 12.5px; font-weight: 800; color: var(--aits-ink); line-height: 1.25; letter-spacing: -0.01em; white-space: normal; } .aitshd-drawer-res-trust-desc { display: block; font-size: 11px; font-weight: 500; color: var(--aits-mut); line-height: 1.4; margin-top: 3px; white-space: normal; overflow-wrap: break-word; } @media (prefers-reduced-motion: reduce) { .aitshd-drawer-res-trust-item, .aitshd-drawer-res-trust-item::after, .aitshd-drawer-res-trust-ico { transition: none; } .aitshd-drawer-res-trust-item:active, .aitshd-drawer-res-trust-item:hover { transform: none; } } /* Full-width footer bar: trust strip */ .aitshd-mega-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 16px 24px 20px; border-top: 1px solid var(--aits-line); background: linear-gradient(0deg, var(--aits-surface-2), var(--aits-card)); } .aitshd-mega-trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; } .aitshd-mega-trust-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); flex: none; } .aitshd-mega-trust-item:nth-child(2) .aitshd-mega-trust-ico { background: var(--tint-blue-bg); color: var(--tint-blue-ink); } .aitshd-mega-trust-item:nth-child(3) .aitshd-mega-trust-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-mega-trust-item:nth-child(4) .aitshd-mega-trust-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-mega-trust-item strong { color: var(--aits-ink); font-weight: 700; display: block; font-size: 13.5px; line-height: 1.2; } .aitshd-mega-trust-item span { color: var(--aits-mut); font-size: 12px; } /* Category-panel toggles (drives per-cat subcol swap) */ .aitshd-mega-panel-cat { display: none; } .aitshd-mega-panel-cat.active { display: block; } .aitshd-mega-panel-cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--aits-line); } .aitshd-mega-panel-cat-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--aits-ink); text-transform: uppercase; letter-spacing: .1em; } .aitshd-mega-badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--aits-blue-tint); color: var(--aits-blue-dark); font-weight: 700; letter-spacing: .04em; } .aitshd-mega-panel-cat-empty { padding: 14px 12px; color: var(--aits-mut); font-size: 13.5px; border-radius: 12px; background: var(--aits-surface-2); border: 1px dashed var(--aits-line); } /* ──────────────────────────────────────────────────────────────── BLOG MEGA — editorial 3-column dropdown ──────────────────────────────────────────────────────────────── */ .aitshd-mega-blog { display: none; position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px); width: min(1440px, calc(100vw - 32px)); margin-top: 0; background: var(--aits-card); border: 1px solid var(--aits-line); border-radius: var(--hd-r-lg); box-shadow: var(--hd-pop); overflow: hidden; z-index: 65; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease,ease), transform .22s var(--ease,ease); } .aitshd[data-mega-blog-open="1"] .aitshd-mega-blog { display: block; opacity: 1; transform: translate(-50%, 12px); pointer-events: auto; } /* Editorial 4-col grid — matches AI Tools mega grammar */ .aitshd-bmg-grid { display: grid; grid-template-columns: 260px minmax(0,1fr) minmax(0,1fr) 360px; gap: 0; align-items: stretch; } @media (max-width: 1240px) { .aitshd-bmg-grid { grid-template-columns: 240px minmax(0,1fr) minmax(0,1fr) 340px; } } @media (max-width: 1080px) { .aitshd-bmg-grid { grid-template-columns: 240px minmax(0,1fr) 320px; } .aitshd-bmg-col-popular { display: none; } } .aitshd-bmg-col { padding: 26px 22px 22px; border-right: 1px solid var(--aits-line); min-width: 0; display: flex; flex-direction: column; } .aitshd-bmg-col:last-child { border-right: 0; } .aitshd-bmg-col-browse { background: var(--aits-card); } .aitshd-bmg-col-featured { padding: 24px 24px 22px 4px; gap: 14px; border-right: 0; } .aitshd-bmg-colh { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aits-blue); padding: 0 8px 12px; } .aitshd-bmg-h { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aits-blue); margin: 0 0 14px; } .aitshd-bmg-h-ico { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, var(--aits-blue), var(--aits-blue-dark)); color: #fff; display: grid; place-items: center; flex: 0 0 auto; } .aitshd-bmg-h-ico svg { width: 12px; height: 12px; } .aitshd-bmg-cats { display: flex; flex-direction: column; gap: 3px; } .aitshd-bmg-cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--aits-ink); font-size: 13.5px; font-weight: 500; transition: all .16s var(--ease,ease); cursor: pointer; } .aitshd-bmg-cat:hover, .aitshd-bmg-cat.active { background: var(--aits-blue-tint); color: var(--aits-blue-dark); } .aitshd-bmg-cat-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--tint-blue-bg); color: var(--tint-blue-ink); display: grid; place-items: center; flex: 0 0 auto; transition: all .16s var(--ease,ease); } .aitshd-bmg-cat[data-tone="indigo"] .aitshd-bmg-cat-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-bmg-cat[data-tone="violet"] .aitshd-bmg-cat-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-bmg-cat[data-tone="emerald"] .aitshd-bmg-cat-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-bmg-cat[data-tone="amber"] .aitshd-bmg-cat-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-bmg-cat[data-tone="rose"] .aitshd-bmg-cat-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-bmg-cat[data-tone="cyan"] .aitshd-bmg-cat-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-bmg-cat[data-tone="pink"] .aitshd-bmg-cat-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-bmg-cat[data-tone="slate"] .aitshd-bmg-cat-ico { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-bmg-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-bmg-cat-count { font-size: 11.5px; font-weight: 600; color: var(--aits-mut); background: var(--aits-surface-3); padding: 3px 8px; border-radius: 999px; transition: all .16s; } .aitshd-bmg-cat.active .aitshd-bmg-cat-count, .aitshd-bmg-cat:hover .aitshd-bmg-cat-count { background: var(--aits-card); color: var(--aits-blue-dark); } .aitshd-bmg-cat-arrow { opacity: 0; transform: translateX(-4px); transition: all .16s var(--ease,ease); color: var(--aits-blue); display: inline-flex; } .aitshd-bmg-cat:hover .aitshd-bmg-cat-arrow, .aitshd-bmg-cat.active .aitshd-bmg-cat-arrow { opacity: 1; transform: translateX(0); } .aitshd-bmg-viewall { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; margin-top: 8px; border-radius: 12px; border: 1px dashed var(--aits-blue-line); background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); font-weight: 600; font-size: 12.5px; text-decoration: none; transition: all .16s; } .aitshd-bmg-viewall:hover { background: var(--aits-blue); color: #fff !important; border-style: solid; border-color: var(--aits-blue); } .aitshd-bmg-panel { display: none; } .aitshd-bmg-panel[data-active="1"] { display: block; } .aitshd-bmg-posts { display: flex; flex-direction: column; gap: 4px; } .aitshd-bmg-post { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--aits-ink); transition: background-color .12s; } .aitshd-bmg-post:hover { background: var(--aits-surface-2); } .aitshd-bmg-post-thumb { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); font-weight: 700; font-size: 14px; flex: 0 0 auto; overflow: hidden; } .aitshd-bmg-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .aitshd-bmg-post-body { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 3px; } .aitshd-bmg-post-title { font-size: 13.5px; font-weight: 600; color: var(--aits-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-bmg-post-meta { font-size: 11.5px; color: var(--aits-mut); display: inline-flex; align-items: center; gap: 4px; } .aitshd-bmg-post-arrow { color: var(--aits-mut); flex: none; } .aitshd-bmg-post:hover .aitshd-bmg-post-arrow { color: var(--aits-blue); } .aitshd-bmg-viewpop { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--aits-blue-dark); text-decoration: none; } .aitshd-bmg-viewpop:hover { background: var(--aits-blue-tint-2); } .aitshd-bmg-empty { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--aits-mut); border-radius: 14px; background: var(--aits-surface-2); } .aitshd-bmg-empty a { color: var(--aits-blue-dark); font-weight: 600; } .aitshd-bmg-featured { position: relative; display: block; border-radius: 20px; overflow: hidden; padding: 22px; color: #fff !important; text-decoration: none !important; min-height: 220px; background: radial-gradient(circle at 100% 0%, rgba(96,164,245,.55) 0%, transparent 55%), radial-gradient(circle at 0% 100%, rgba(126,34,206,.35) 0%, transparent 55%), linear-gradient(135deg, #0F172A, #1E1B4B 70%, #0B1120); box-shadow: 0 20px 40px -20px rgba(15,23,42,.5), inset 0 1px 0 rgba(255,255,255,.08); } .aitshd-bmg-featured.has-media { background: linear-gradient(135deg, rgba(15,23,42,.72), rgba(30,27,75,.7)), var(--aitshd-bmg-feat-img) center/cover no-repeat; } .aitshd-bmg-featured-mark { position: absolute; right: -12px; top: -12px; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(147,197,253,.55) 0%, rgba(59,130,246,.35) 40%, transparent 70%); font-size: 36px; font-weight: 900; letter-spacing: -0.02em; color: rgba(255,255,255,.4); pointer-events: none; } .aitshd-bmg-featured-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FCD34D; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); } .aitshd-bmg-featured-title { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; margin: 14px 0 6px; color: #fff; max-width: 90%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aitshd-bmg-featured-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.45; max-width: 92%; } .aitshd-bmg-featured-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: rgba(255,255,255,.7); } .aitshd-bmg-featured-meta span { display: inline-flex; align-items: center; gap: 5px; } .aitshd-bmg-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; } .aitshd-bmg-value { padding: 14px; border-radius: 14px; border: 1px solid var(--aits-line); background: var(--aits-card); } .aitshd-bmg-value-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--aits-blue-tint); color: var(--aits-blue-dark); margin-bottom: 10px; } .aitshd-bmg-value-title { font-size: 13px; font-weight: 700; color: var(--aits-ink); margin-bottom: 3px; } .aitshd-bmg-value-desc { font-size: 11.5px; color: var(--aits-mut); line-height: 1.4; } .aitshd-bmg-quick { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--aits-line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .aitshd-bmg-quick-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--aits-mut); margin-right: 4px; } .aitshd-bmg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--aits-surface-2); border: 1px solid var(--aits-line); font-size: 12px; font-weight: 600; color: var(--aits-ink); text-decoration: none; transition: all .16s; } .aitshd-bmg-chip:hover { background: var(--aits-blue-tint-2); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); transform: translateY(-1px); } .aitshd-bmg-chip svg { width: 13px; height: 13px; color: var(--aits-blue); } /* Rich item row shared by Browse / By Category / By Use Case columns */ .aitshd-bmg-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--aits-ink-soft); font-size: 13.5px; font-weight: 500; transition: background-color .18s var(--ease,ease), color .18s; min-width: 0; } .aitshd-bmg-row.is-lg { padding: 12px; } .aitshd-bmg-row-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue-bg); color: var(--tint-blue-ink); flex: none; transition: transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease); } .aitshd-bmg-row.is-lg .aitshd-bmg-row-ico { width: 44px; height: 44px; } .aitshd-bmg-row[data-tone="indigo"] .aitshd-bmg-row-ico { background: var(--tint-indigo-bg); color: var(--tint-indigo-ink); } .aitshd-bmg-row[data-tone="violet"] .aitshd-bmg-row-ico { background: var(--tint-violet-bg); color: var(--tint-violet-ink); } .aitshd-bmg-row[data-tone="emerald"] .aitshd-bmg-row-ico { background: var(--tint-emerald-bg); color: var(--tint-emerald-ink); } .aitshd-bmg-row[data-tone="amber"] .aitshd-bmg-row-ico { background: var(--tint-amber-bg); color: var(--tint-amber-ink); } .aitshd-bmg-row[data-tone="rose"] .aitshd-bmg-row-ico { background: var(--tint-rose-bg); color: var(--tint-rose-ink); } .aitshd-bmg-row[data-tone="cyan"] .aitshd-bmg-row-ico { background: var(--tint-cyan-bg); color: var(--tint-cyan-ink); } .aitshd-bmg-row[data-tone="pink"] .aitshd-bmg-row-ico { background: var(--tint-pink-bg); color: var(--tint-pink-ink); } .aitshd-bmg-row[data-tone="slate"] .aitshd-bmg-row-ico { background: var(--tint-slate-bg); color: var(--tint-slate-ink); } .aitshd-bmg-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .aitshd-bmg-row-title { font-weight: 600; color: var(--aits-ink); font-size: 14.5px; line-height: 1.25; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .aitshd-bmg-row.is-lg .aitshd-bmg-row-title { font-size: 15px; font-weight: 700; } .aitshd-bmg-row-desc { font-size: 12.5px; font-weight: 400; color: var(--aits-mut); margin-top: 2px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-bmg-row-count { flex: none; font-size: 11.5px; font-weight: 700; color: var(--aits-mut); padding: 4px 10px; border-radius: 999px; background: var(--aits-surface-3); border: 1px solid var(--aits-line); transition: all .18s var(--ease,ease); } .aitshd-bmg-row:hover { background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); } .aitshd-bmg-row:hover .aitshd-bmg-row-ico { transform: scale(1.06); } .aitshd-bmg-row:hover .aitshd-bmg-row-title { color: var(--aits-blue-dark); } .aitshd-bmg-row:hover .aitshd-bmg-row-count { background: var(--aits-card); color: var(--aits-blue-dark); border-color: var(--aits-blue-line); } /* Popular posts column — vertical list of thumb + meta */ .aitshd-bmg-col-popular-body { display: flex; flex-direction: column; gap: 4px; } .aitshd-bmg-col-popular .aitshd-bmg-post { padding: 10px 10px; border-radius: 14px; } .aitshd-bmg-view-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 12px; font-size: 13px; font-weight: 600; color: var(--aits-blue-dark); text-decoration: none; border-radius: 12px; transition: background-color .16s, padding .16s; } .aitshd-bmg-view-all:hover { background: var(--aits-blue-tint-2); padding-left: 16px; } .aitshd-bmg-view-all svg { transition: transform .18s; } .aitshd-bmg-view-all:hover svg { transform: translateX(3px); } /* Readers Also Liked strip beneath the blog mega */ .aitshd-bmg-popular { border-top: 1px solid var(--aits-line); padding: 18px 24px 22px; background: linear-gradient(0deg, var(--aits-surface-2), var(--aits-card)); } .aitshd-bmg-popular-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; } .aitshd-bmg-popular-head strong { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aits-blue); } .aitshd-bmg-popular-head a { font-size: 13px; font-weight: 600; color: var(--aits-blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .aitshd-bmg-popular-head a svg { transition: transform .18s; } .aitshd-bmg-popular-head a:hover svg { transform: translateX(2px); } .aitshd-bmg-popular-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .aitshd-bmg-pop-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--aits-line); background: var(--aits-card); color: var(--aits-ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s; min-width: 0; } .aitshd-bmg-pop-chip:hover { border-color: var(--aits-blue-line); background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(54,128,237,.35); } .aitshd-bmg-pop-chip-thumb { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, var(--aits-blue-tint), var(--tint-violet-bg)); color: var(--aits-blue-dark); font-weight: 800; font-size: 12px; flex: none; } .aitshd-bmg-pop-chip-thumb img { width: 100%; height: 100%; object-fit: cover; } .aitshd-bmg-pop-chip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; } @media (max-width: 900px) { .aitshd-mega-blog { display: none !important; } } /* ──────────────────────────────────────────────────────────────── Mobile drawer ──────────────────────────────────────────────────────────────── */ .aitshd-drawer { position: fixed; inset: 0; z-index: 90; display: none; } .aitshd[data-drawer-open="1"] .aitshd-drawer { display: block; } .aitshd-drawer-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } body.theme-dark .aitshd-drawer-backdrop { background: rgba(0,0,0,.7); } .aitshd-drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(390px, 92vw); background: var(--aits-card); background-image: var(--hd-wash); border-radius: 26px 0 0 26px; box-shadow: var(--hd-pop); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s var(--ease,ease); /* Notched phones in landscape put the panel under the sensor bar. */ padding-right: env(safe-area-inset-right); } .aitshd[data-drawer-open="1"] .aitshd-drawer-panel { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .aitshd-drawer-panel { transition: none; } } .aitshd-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--aits-line-soft); } .aitshd-drawer-body { padding: 14px 14px 6px; overflow-y: auto; flex: 1; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Account block — mirrors the desktop chip so a signed-in phone user gets the same entry points instead of a lone "My Account" button. */ .aitshd-drawer-acct { display: flex; align-items: center; gap: 12px; padding: 13px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient(135deg, var(--aits-blue-tint), var(--aits-blue-tint-2)); border: 1px solid var(--aits-blue-line); text-decoration: none; } .aitshd-drawer-acct .aitshd-user-av { width: 42px; height: 42px; font-size: 15px; } .aitshd-drawer-acct-copy { min-width: 0; flex: 1; } .aitshd-drawer-acct-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--aits-ink); letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-drawer-acct-role { display: block; margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--aits-blue); } body.theme-dark .aitshd-drawer-acct-role { color: var(--aits-blue-light); } .aitshd-drawer-acct-go { color: var(--aits-blue); flex: none; } /* Quick-actions strip — theme, language and notifications relocate here from the bar so the phone header keeps only three controls. */ .aitshd-drawer-quick { /* auto-flow:column gives however many chips render an equal share without hard-coding a count (language can be switched off). */ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 4px; } .aitshd-drawer-quick > form { display: block; margin: 0; } .aitshd-drawer-qbtn { width: 100%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border-radius: 15px; background: var(--aits-surface-3); border: 1px solid var(--aits-line); color: var(--aits-ink-soft); font-size: 11.5px; font-weight: 700; letter-spacing: -.005em; cursor: pointer; text-decoration: none; transition: background-color .18s var(--ease,ease), border-color .18s var(--ease,ease), color .18s var(--ease,ease); } .aitshd-drawer-qbtn svg { color: var(--aits-blue); } .aitshd-drawer-qbtn img { border-radius: 3px; } .aitshd-drawer-qbtn:hover, .aitshd-drawer-qbtn:focus-visible { background: var(--aits-blue-tint-2); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); } body.theme-dark .aitshd-drawer-qbtn:hover { color: var(--aits-blue-light); } .aitshd-drawer-qbtn:active { transform: scale(.96); } .aitshd-drawer-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: 14.5px; font-weight: 600; color: var(--aits-ink-soft); text-decoration: none; transition: background-color .16s var(--ease,ease), color .16s var(--ease,ease); } /* Brand accent bar echoes the desktop mega rows — a tiny vertical rule inside the row's own left padding, revealed on hover. Fully rounded so it never pokes through the row's own corner radius. */ .aitshd-drawer-link::before { content: ''; position: absolute; left: 3px; top: 50%; width: 3px; height: 58%; border-radius: 999px; background: var(--aits-blue); transform: translateY(-50%) scaleY(0); transition: transform .24s var(--ease,ease); pointer-events: none; } .aitshd-drawer-link:hover::before, .aitshd-drawer-link:focus-visible::before { transform: translateY(-50%) scaleY(1); } /* A SOLID tone fill with a white glyph, so a long list of links stays scannable — the same plate the homepage bands carry. The per-tone rules below therefore set the tile to `--tint-*-INK` (the saturated hue) rather than `--tint-*-BG` (the pale wash), and the glyph goes white instead of taking the hue. */ .aitshd-drawer-link-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--tint-blue-plate, var(--tint-blue-ink)); color: #fff; background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 12px -7px currentColor; transition: transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease); } /* The dark `--tint-*-ink` twins are LIGHTENED so they can serve as ink on a dark surface — white on #93BEFF measures 2.0:1 — so the fill takes a scrim. .52, not the homepage's .45: these glyphs are 18px strokes in a 34px tile, and .45 left four of the nine tones short of AA (cyan 4.06:1). At .52 the worst is 4.94:1. */ body.theme-dark .aitshd-drawer-link-ico { background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 12px -7px rgba(0,0,0,.8); } /* `currentColor` is now WHITE, so it can no longer tint the glow the way it did on a tinted tile — the hue has to come from the fill. */ .aitshd-drawer-link:hover .aitshd-drawer-link-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 9px 18px -9px rgba(15,23,42,.5); } body.theme-dark .aitshd-drawer-link:hover .aitshd-drawer-link-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 9px 18px -9px rgba(0,0,0,.9); } .aitshd-drawer-link-ico svg { width: 18px; height: 18px; } .aitshd-drawer-link-ico[data-tone="indigo"] { background-color: var(--tint-indigo-plate, var(--tint-indigo-ink)); } .aitshd-drawer-link-ico[data-tone="violet"] { background-color: var(--tint-violet-plate, var(--tint-violet-ink)); } .aitshd-drawer-link-ico[data-tone="emerald"] { background-color: var(--tint-emerald-plate, var(--tint-emerald-ink)); } .aitshd-drawer-link-ico[data-tone="amber"] { background-color: var(--tint-amber-plate, var(--tint-amber-ink)); } .aitshd-drawer-link-ico[data-tone="rose"] { background-color: var(--tint-rose-plate, var(--tint-rose-ink)); } .aitshd-drawer-link-ico[data-tone="cyan"] { background-color: var(--tint-cyan-plate, var(--tint-cyan-ink)); } .aitshd-drawer-link-ico[data-tone="pink"] { background-color: var(--tint-pink-plate, var(--tint-pink-ink)); } .aitshd-drawer-link-ico[data-tone="slate"] { background-color: var(--tint-slate-plate, var(--tint-slate-ink)); } .aitshd-drawer-link .aitshd-drawer-link-label { flex: 1; min-width: 0; } /* Two-line drawer row — used by the AI Tools quick-access lanes, which carry the same title + subtitle as the desktop mega. */ .aitshd-drawer-sub { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--aits-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-drawer-link:hover .aitshd-drawer-sub { color: var(--aits-mut); } .aitshd-drawer-link .aitshd-mega-badge-inline { flex: none; } /* Use-case chips — a two-up grid keeps eight lanes to four rows. */ .aitshd-drawer-uc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 2px; } .aitshd-drawer-ucchip { --uc-bg: var(--tint-blue-bg); --uc-ink: var(--tint-blue-ink); display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--aits-line); background: var(--aits-surface-3); font-size: 12.5px; font-weight: 600; color: var(--aits-ink-soft); text-decoration: none; transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), color .16s var(--ease,ease); } .aitshd-drawer-ucchip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-drawer-ucchip[data-tone="indigo"] { --uc-bg: var(--tint-indigo-bg); --uc-ink: var(--tint-indigo-ink); } .aitshd-drawer-ucchip[data-tone="violet"] { --uc-bg: var(--tint-violet-bg); --uc-ink: var(--tint-violet-ink); } .aitshd-drawer-ucchip[data-tone="emerald"] { --uc-bg: var(--tint-emerald-bg); --uc-ink: var(--tint-emerald-ink); } .aitshd-drawer-ucchip[data-tone="amber"] { --uc-bg: var(--tint-amber-bg); --uc-ink: var(--tint-amber-ink); } .aitshd-drawer-ucchip[data-tone="rose"] { --uc-bg: var(--tint-rose-bg); --uc-ink: var(--tint-rose-ink); } .aitshd-drawer-ucchip[data-tone="cyan"] { --uc-bg: var(--tint-cyan-bg); --uc-ink: var(--tint-cyan-ink); } .aitshd-drawer-ucchip[data-tone="pink"] { --uc-bg: var(--tint-pink-bg); --uc-ink: var(--tint-pink-ink); } .aitshd-drawer-ucchip-ico { width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--uc-bg); color: var(--uc-ink); background-image: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); transition: transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease); } body.theme-dark .aitshd-drawer-ucchip-ico { background-image: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } /* Provider chips carry a text mark ("OA", "DS") rather than an icon. */ .aitshd-drawer-ucchip-ico.is-mark { font-size: 10.5px; font-weight: 800; letter-spacing: -.02em; } .aitshd-drawer-ucchip { transition: background-color .18s var(--ease,ease), border-color .18s var(--ease,ease), color .18s var(--ease,ease), transform .18s var(--ease,ease), box-shadow .22s var(--ease,ease); } .aitshd-drawer-ucchip:hover, .aitshd-drawer-ucchip:focus-visible { background: var(--aits-card); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); transform: translateY(-1px); box-shadow: 0 10px 18px -12px rgba(54,128,237,.45); } .aitshd-drawer-ucchip:hover .aitshd-drawer-ucchip-ico, .aitshd-drawer-ucchip:focus-visible .aitshd-drawer-ucchip-ico { transform: scale(1.07) rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 6px 14px -8px var(--uc-ink); } body.theme-dark .aitshd-drawer-ucchip:hover { color: var(--aits-blue-light); } body.theme-dark .aitshd-drawer-ucchip:hover, body.theme-dark .aitshd-drawer-ucchip:focus-visible { background: var(--aits-surface-3); } .aitshd-drawer-ucchip:active { transform: translateY(0) scale(.985); background: var(--aits-blue-tint); } @media (hover: none) { .aitshd-drawer-ucchip:hover { transform: none; box-shadow: none; } .aitshd-drawer-ucchip:hover .aitshd-drawer-ucchip-ico { transform: none; box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); } } .aitshd-drawer-count { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--aits-surface-3); border: 1px solid var(--aits-line); font-size: 11px; font-weight: 700; color: var(--aits-mut); font-variant-numeric: tabular-nums; transition: background-color .18s var(--ease,ease), border-color .18s var(--ease,ease), color .18s var(--ease,ease); } .aitshd-drawer-link:hover .aitshd-drawer-count { background: var(--aits-card); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); } body.theme-dark .aitshd-drawer-link:hover .aitshd-drawer-count { color: var(--aits-blue-light); } .aitshd-drawer-link:hover, .aitshd-drawer-link:focus-visible { background: var(--aits-blue-tint-2); color: var(--aits-blue-dark); } .aitshd-drawer-link:hover .aitshd-drawer-link-ico { transform: scale(1.06); } body.theme-dark .aitshd-drawer-link:hover { color: var(--aits-blue-light); } .aitshd-drawer-link:active { background: var(--aits-blue-tint); } .aitshd-drawer-chev { flex: none; color: var(--aits-faint); display: inline-flex; opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease,ease), transform .22s var(--ease,ease); } .aitshd-drawer-link:hover .aitshd-drawer-chev, .aitshd-drawer-link:focus-visible .aitshd-drawer-chev { opacity: 1; transform: none; } /* Touch has no hover — show the affordance permanently instead. */ @media (hover: none) { .aitshd-drawer-chev { opacity: .5; transform: none; } } /* Language list — the bar's flag dropdown relocates here on mobile. */ .aitshd-drawer-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .aitshd-drawer-lang { display: inline-flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--aits-line); background: var(--aits-surface-3); font-size: 13px; font-weight: 600; color: var(--aits-ink-soft); text-decoration: none; min-width: 0; transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), color .16s var(--ease,ease); } .aitshd-drawer-lang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitshd-drawer-lang img { border-radius: 3px; flex: none; } .aitshd-drawer-lang:hover { background: var(--aits-blue-tint-2); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); } .aitshd-drawer-lang.is-current { background: var(--aits-blue-tint); border-color: var(--aits-blue-line); color: var(--aits-blue-dark); } body.theme-dark .aitshd-drawer-lang:hover, body.theme-dark .aitshd-drawer-lang.is-current { color: var(--aits-blue-light); } .aitshd-drawer-section { display: flex; align-items: center; gap: 10px; margin: 18px 6px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--aits-blue); font-weight: 800; white-space: nowrap; } body.theme-dark .aitshd-drawer-section { color: var(--aits-blue-light); } /* Rule that runs out from the label to the panel edge. */ .aitshd-drawer-section::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--aits-blue-line), transparent); } .aitshd-drawer-cta { display: flex; gap: 8px; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--aits-line-soft); background: var(--aits-card); } .aitshd-drawer-cta > * { flex: 1; justify-content: center; } @media (prefers-reduced-motion: reduce) { .aitshd-drawer-link, .aitshd-drawer-link-ico, .aitshd-drawer-qbtn { transition: none; } .aitshd-drawer-link:hover .aitshd-drawer-link-ico, .aitshd-drawer-qbtn:active { transform: none; } } /* Hosted search-box livewire wrapper — keep the internal icon hidden so only the pill trigger is visible; the ezsx overlay is what actually opens. */ .aitshd-search-host { display: none !important; } .aitshd-search-host .btn.btn-icon { width: 42px; height: 42px; border-radius: 999px !important; background: var(--aits-surface-3); border: 1px solid var(--aits-line); color: var(--aits-ink-soft); } /* Print/reset */ @media print { .aitshd { display: none; } } /* Dark-mode surface polish */ body.theme-dark .aitshd-mega-panel, body.theme-dark .aitshd-mega-blog { background: var(--aits-card); } body.theme-dark .aitshd-bmg-post-thumb { background: linear-gradient(135deg, var(--aits-surface-3), var(--aits-bg-deep)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } body.theme-dark .aitshd-cta-outline { background: var(--aits-surface-2); } /* ═════════════════════════════════════════════════════════════════ AI TOOLS mega — bespoke premium reskin ----------------------------------------------------------------- Scoped to .aitshd-mega-panel-aitools only, so the sibling "Tools" panel and every other mega keep their current design. Zero markup changes — the reskin runs entirely on CSS overrides that transform the four generic columns into four distinctly-styled zones: 1. BROWSE → glass "quick launch" pill tiles 2. BY CATEGORY→ full-width stacked rows with corner count pills 3. BY PRICING → vertical list with a walking left-accent bar 4. EDITOR PICK→ aurora-glass spotlight card 5. POPULAR → numbered leaderboard chips (rank medals) ═════════════════════════════════════════════════════════════════ */ .aitshd-mega-panel-aitools { /* Mesh-gradient stage — three soft radial glows in the BRAND-BLUE family (matches the sibling Tools hero at line ~3367). No violet/indigo — the site's brand palette is `--aits-blue*` only. */ background: radial-gradient(56% 60% at 6% 4%, rgba(54, 128, 237, .13), transparent 62%), radial-gradient(50% 55% at 96% 4%, rgba(96, 164, 245, .11), transparent 60%), radial-gradient(48% 58% at 100% 100%, rgba(30, 79, 184, .12), transparent 62%), var(--aits-card) !important; overflow: hidden; } body.theme-dark .aitshd-mega-panel-aitools { background: radial-gradient(56% 60% at 6% 4%, rgba(96, 164, 245, .18), transparent 62%), radial-gradient(50% 55% at 96% 4%, rgba(147, 190, 255, .14), transparent 60%), radial-gradient(48% 58% at 100% 100%, rgba(96, 164, 245, .12),transparent 62%), var(--aits-card) !important; } /* Constellation of tiny stars floating in the top-right corner — purely decorative, generated in CSS. Tinted with brand blue. */ .aitshd-mega-panel-aitools::before { content: ''; position: absolute; top: 8px; right: 18px; width: 220px; height: 90px; pointer-events: none; opacity: .55; z-index: 0; background-image: radial-gradient(circle at 12% 40%, currentColor 1px, transparent 1.4px), radial-gradient(circle at 34% 68%, currentColor .8px, transparent 1.2px), radial-gradient(circle at 58% 28%, currentColor 1.2px, transparent 1.6px), radial-gradient(circle at 78% 62%, currentColor .8px, transparent 1.2px), radial-gradient(circle at 92% 40%, currentColor 1.1px, transparent 1.4px); color: rgba(54, 128, 237, .45); } body.theme-dark .aitshd-mega-panel-aitools::before { color: rgba(147, 190, 255, .55); } .aitshd-mega-panel-aitools .aitshd-mega-wrap { position: relative; z-index: 1; grid-template-columns: 280px minmax(0,1fr) minmax(0,1fr) 360px; } @media (max-width: 1240px) { .aitshd-mega-panel-aitools .aitshd-mega-wrap { grid-template-columns: 240px minmax(0,1fr) minmax(0,1fr) 320px; } } /* ── Icon tiles — boost the tone opacity from the base 13-14% to ~30% so the mesh-gradient panel background doesn't drown out the icon tiles. Applies to EVERY icon in this panel: Browse tiles, category tiles, pricing rows. Keeps the same tone tokens (--tint-*-ink) so brand colours stay consistent. */ .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="blue"] .aitshd-mega-item-icon { background: rgba(37, 99, 235, .16); color: #2060C0; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .20); } .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="indigo"] .aitshd-mega-item-icon { background: rgba(99, 102, 241, .18); color: #4338CA; box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .24); } .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="violet"] .aitshd-mega-item-icon { background: rgba(1, 150, 253, .14); color: #0B5ED7; box-shadow: inset 0 0 0 1px rgba(14, 165, 233, .22); } .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="emerald"] .aitshd-mega-item-icon { background: rgba(16, 185, 129, .18); color: #047857; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .24); } .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="amber"] .aitshd-mega-item-icon { background: rgba(245, 158, 11, .18); color: #B45309; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .26); } .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="rose"] .aitshd-mega-item-icon { background: rgba(244, 63, 94, .18); color: #BE123C; box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .24); } .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="cyan"] .aitshd-mega-item-icon { background: rgba(6, 182, 212, .18); color: #0E7490; box-shadow: inset 0 0 0 1px rgba(6, 182, 212, .26); } .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="pink"] .aitshd-mega-item-icon { background: rgba(236, 72, 153, .16); color: #BE185D; box-shadow: inset 0 0 0 1px rgba(236, 72, 153, .22); } .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="slate"] .aitshd-mega-item-icon { background: rgba(100, 116, 139, .16); color: #334155; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .22); } /* Default (no data-tone) — blue. NOTE: `.aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon` used to be grouped into this selector. It has the same specificity (0,4,0) as the per-tone rules above but sits LATER in the sheet, so it won every tie and painted all nine category tiles brand blue — while the Browse column beside it cycled nine colours. The category rows already carry a real `data-tone`; they just needed to be let through. Do not re-add a blanket colour here. */ .aitshd-mega-panel-aitools .aitshd-mega-item:not([data-tone]) .aitshd-mega-item-icon { background: rgba(37, 99, 235, .16); color: #2060C0; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .20); } /* Force the SVG glyphs to render solid: some icons (send, sparkles) use `currentColor` for their stroke — ensuring the color inherits makes them fully visible instead of ghosted. */ .aitshd-mega-panel-aitools .aitshd-mega-item-icon svg { color: inherit; stroke: currentColor; } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="blue"] .aitshd-mega-item-icon { background: rgba(96, 164, 245, .22); color: #93BEFF; box-shadow: inset 0 0 0 1px rgba(96, 164, 245, .30); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="indigo"] .aitshd-mega-item-icon { background: rgba(129, 140, 248, .22); color: #A5B4FC; box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .30); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="violet"] .aitshd-mega-item-icon { background: rgba(167, 139, 250, .22); color: #7DD3FC; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .30); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="emerald"] .aitshd-mega-item-icon { background: rgba(52, 211, 153, .24); color: #6EE7B7; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .32); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="amber"] .aitshd-mega-item-icon { background: rgba(251, 191, 36, .24); color: #FCD34D; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .32); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="rose"] .aitshd-mega-item-icon { background: rgba(251, 113, 133, .22); color: #FDA4AF; box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .30); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="cyan"] .aitshd-mega-item-icon { background: rgba(34, 211, 238, .22); color: #67E8F9; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .30); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="pink"] .aitshd-mega-item-icon { background: rgba(244, 114, 182, .22); color: #F9A8D4; box-shadow: inset 0 0 0 1px rgba(244, 114, 182, .30); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-item[data-tone="slate"] .aitshd-mega-item-icon { background: rgba(148, 163, 184, .22); color: var(--dk-text-2,#C7CAD1); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .30); } /* The "For you" and "NEW" inline badges also need a brand-brighter background so they read like buttons rather than faint watermarks. */ .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="emerald"] { background: rgba(16, 185, 129, .16); color: #047857; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .35); } .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="amber"] { background: rgba(245, 158, 11, .16); color: #B45309; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .38); } .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="rose"] { background: rgba(244, 63, 94, .16); color: #BE123C; box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .35); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="emerald"] { background: rgba(52, 211, 153, .18); color: #6EE7B7; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .40); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-badge-inline[data-tone="amber"] { background: rgba(251, 191, 36, .18); color: #FCD34D; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .40); } /* ── 1–3. BROWSE / BY CATEGORY / BY PRICING ───────────────────── The per-zone reskin that used to live here — three separate column treatments, each with its own tile, icon, count-pill and hover ladder — was retired on 2026-09-18. Every one of its rules was either already outranked by §6 PREMIUM TILE SYSTEM below (shared with the six sibling megas) or is now restated, in one place and in one voice, by §AITX at the end of this file. §AITX owns everything specific to this panel: column tracks and chrome, column heads, tile metrics and type scale, the one-row-per -category index, the rule that nothing in these three columns may clamp or ellipsize, the CTA bar, and the open choreography. §4 EDITOR SPOTLIGHT — the sponsored column — is NOT part of that and is left exactly as it was. */ /* ── 4. EDITOR SPOTLIGHT — brand-blue hero ─────────────────── */ .aitshd-mega-panel-aitools .aitshd-mega-featured-col { padding: 22px 22px 22px 18px; border-left: 1px solid var(--aits-blue-line) !important; display: flex; flex-direction: column; gap: 14px; } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-featured-col { border-left-color: rgba(96, 164, 245, .18) !important; } /* Same base gradient as the sibling Tools mega hero (line ~3367) — two glow overlays + a mid-blue linear base. Keeps the AI Tools panel's spotlight card 100% on-brand blue while my other zone changes (numbered leaderboard, glass Browse tiles, capability grid) still make the panel read as premium and distinct. */ .aitshd-mega-panel-aitools .aitshd-mega-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; padding: 20px 20px 18px; background: radial-gradient(circle at 100% 0%, rgba(147, 190, 255, .32) 0%, transparent 60%), radial-gradient(circle at 0% 100%, rgba(37, 99, 235, .45) 0%, transparent 55%), linear-gradient(135deg, #1E4FB8, var(--aits-blue-dark) 55%, #143C90) !important; box-shadow: 0 22px 44px -22px rgba(32, 96, 192, .55), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(147, 190, 255, .14); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-hero { background: radial-gradient(circle at 100% 0%, rgba(147, 190, 255, .28) 0%, transparent 60%), radial-gradient(circle at 0% 100%, rgba(37, 99, 235, .40) 0%, transparent 55%), linear-gradient(135deg, #133672, #0F2C5D 55%, #0A1E44) !important; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(147, 190, 255, .10); } /* Aurora bokeh — two slow-drifting soft blue circles behind the content (kept in brand blue family only — no violet). */ .aitshd-mega-panel-aitools .aitshd-mega-hero::before, .aitshd-mega-panel-aitools .aitshd-mega-hero::after { content: ''; position: absolute; z-index: -1; border-radius: 999px; filter: blur(30px); pointer-events: none; animation: aitsAitAurora 14s ease-in-out infinite alternate; } .aitshd-mega-panel-aitools .aitshd-mega-hero::before { top: -40px; right: -20px; width: 160px; height: 160px; background: rgba(147, 190, 255, .40); } .aitshd-mega-panel-aitools .aitshd-mega-hero::after { bottom: -50px; left: -30px; width: 160px; height: 160px; background: rgba(37, 99, 235, .40); animation-delay: -6s; } @keyframes aitsAitAurora { 0% { transform: translate(0, 0) scale(1); opacity: .8; } 100% { transform: translate(14px, -8px) scale(1.15); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel-aitools .aitshd-mega-hero::before, .aitshd-mega-panel-aitools .aitshd-mega-hero::after { animation: none !important; } } /* The existing SVG artwork blends nicely against the blue — keep it at full opacity now that the palette matches. */ .aitshd-mega-panel-aitools .aitshd-mega-hero-art { opacity: .55; } /* Retint the "Editor's Pick" chip so it reads as a bright inline pill over the blue hero. */ .aitshd-mega-panel-aitools .aitshd-mega-hero-pill { background: rgba(255, 255, 255, .22) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .28) !important; color: #fff !important; } .aitshd-mega-panel-aitools .aitshd-mega-hero-shield { color: #FDE68A !important; } .aitshd-mega-panel-aitools .aitshd-mega-hero-avatar-mark { background: rgba(255, 255, 255, .96) !important; color: var(--aits-blue-dark) !important; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35), inset 0 -3px 0 rgba(0, 0, 0, .08); } .aitshd-mega-panel-aitools .aitshd-mega-hero-avatar-name, .aitshd-mega-panel-aitools .aitshd-mega-hero-title { color: #fff !important; } .aitshd-mega-panel-aitools .aitshd-mega-hero-count { color: rgba(255, 255, 255, .85) !important; } /* Primary CTA — matches the site's blue pill (`#3B82F6` / hover to --aits-blue-dark) exactly like the sibling Tools hero CTA at line ~2987. */ .aitshd-mega-panel-aitools .aitshd-mega-hero-cta { background: #fff !important; color: var(--aits-blue-dark) !important; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .55); } .aitshd-mega-panel-aitools .aitshd-mega-hero:hover .aitshd-mega-hero-cta { transform: translateX(2px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); } .aitshd-mega-panel-aitools .aitshd-mega-hero-dot { background: rgba(255, 255, 255, .35) !important; } .aitshd-mega-panel-aitools .aitshd-mega-hero-dot.active { background: #fff !important; } /* Second featured tile — dashed outline in the brand blue family. */ .aitshd-mega-panel-aitools .aitshd-mega-article.is-empty { border: 1.5px dashed var(--aits-blue-line) !important; background: linear-gradient(180deg, var(--aits-blue-tint), var(--aits-blue-tint-2) 60%, transparent) !important; border-radius: 16px; padding: 14px 14px 12px !important; transition: border-color .2s, background .2s, transform .2s; } .aitshd-mega-panel-aitools .aitshd-mega-article.is-empty:hover { border-color: var(--aits-blue) !important; transform: translateY(-2px); } body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-article.is-empty { border-color: rgba(96, 164, 245, .30) !important; background: linear-gradient(180deg, rgba(96, 164, 245, .12), rgba(96, 164, 245, .06) 60%, transparent) !important; } .aitshd-mega-panel-aitools .aitshd-mega-article-label { font-size: 10px !important; font-weight: 900 !important; letter-spacing: .11em !important; text-transform: uppercase !important; color: var(--aits-blue-dark) !important; } .aitshd-mega-panel-aitools .aitshd-mega-article-thumb { background: linear-gradient(140deg, var(--aits-blue), var(--aits-blue-dark)) !important; color: #fff !important; box-shadow: 0 8px 18px -10px var(--aits-blue-dark); } .aitshd-mega-panel-aitools .aitshd-mega-article-more { color: var(--aits-blue-dark) !important; font-weight: 800; } /* ── 5. POPULAR RIGHT NOW ────────────────────────────────────── Retired 2026-09-18. Every rule that lived here — the tinted band and its dark twin, the pulsing label dot, the chip card, the 24px logo pill and the blue CTA — is restated by §AITX-8 at the end of this file, which owns the strip outright. It could not simply be left to lose on source order: its dark `body.theme-dark .aitshd-mega-panel-aitools .aitshd-mega-popular` rule was (0,3,1), one element selector above §AITX's (0,3,0), so after dark the old gradient band kept painting underneath the new tray. The `aitsAitPulse` keyframes went with it — nothing else in the file referenced them. §AITX-8 briefly replaced the dot with a box-shadow ping; the mark was dropped entirely on 2026-09-18, so the head is now label + rule with nothing before it. */ /* ═══════════════════════════════════════════════════════════════ 6. PREMIUM TILE SYSTEM — every mega panel, every list row ═══════════════════════════════════════════════════════════════ Applies to all seven panels: Tools, AI Tools (directory), AI Models, AI Learn, Deals, Discover and Resources. Each had grown its own row treatment — the AI Tools mega alone ran three, and Learn/Deals/Discover/Resources were flat link rows with a single panel-gradient accent bar. This section makes every row in every panel ONE component with one hover language, driven by the row's own `data-tone` (already present on 100% of rows in all panels, so nothing in the markup changed). SELECTOR SHAPE — read before editing: .aitshd-mega-panel:is(<7 panel classes>) ← compound, TWO classes :is(.aitshd-mega-browse, .aitshd-mega-col) ← every row container .aitshd-mega-item That lands the base rules at (0,4,0) and their :hover variants at (0,5,0). Both numbers are deliberate: each panel still ships a `body.theme-dark .aitshd-mega-panel-X .aitshd-mega-item:hover` rule at (0,4,1), and a (0,4,0) hover would silently lose to it in dark mode only. Do not "simplify" the compound panel selector to a single class without re-checking those. A new mega panel must be added to the :is() list to inherit this. How the colour works — three custom properties per tone, nothing else. Every surface below derives from them, so adding a tone or retuning a hue is a one-line change instead of a hunt through nine hard-coded rgba() rules: --t brand RGB triplet, space separated, so any alpha can be mixed on the fly with rgb(var(--t) / .18) --t-ink glyph/label colour — the DARK end of the ramp in light mode, the LIGHT end in dark mode, so it always reads against the card surface --t-on ink that sits ON a solid --t-ink fill (hover pill) --t-ink is deliberately never used as a fill and --t is never used as ink: that inversion is exactly what put 24 buttons below AA in the ai-contrast-fix pass. Amber and cyan are the tones that punish getting this backwards. */ /* ── 6a. Tone ramps ───────────────────────────────────────────── `:is()` so the column tiles and the Popular-strip chips share ONE ramp — specificity is unchanged (both arms are a single class), so nothing downstream shifts by adding the chip here. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip) { --t: 37 99 235; --t-ink: #1D4ED8; --t-on: #fff; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="indigo"] { --t: 99 102 241; --t-ink: #4338CA; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="violet"] { --t: 139 92 246; --t-ink: #0369A1; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="emerald"] { --t: 16 185 129; --t-ink: #047857; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="amber"] { --t: 245 158 11; --t-ink: #B45309; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="rose"] { --t: 244 63 94; --t-ink: #BE123C; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="cyan"] { --t: 6 182 212; --t-ink: #0E7490; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="pink"] { --t: 236 72 153; --t-ink: #BE185D; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="slate"] { --t: 100 116 139; --t-ink: #334155; } /* Dark mode swaps to the light end of each ramp. --t-on flips to near-black because a solid --t-ink fill is now a BRIGHT colour. */ body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip) { --t: 96 164 245; --t-ink: #A9CCFF; --t-on: #0A1020; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="indigo"] { --t: 129 140 248; --t-ink: #BFC7FE; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="violet"] { --t: 167 139 250; --t-ink: #D3C6FE; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="emerald"] { --t: 52 211 153; --t-ink: #8CF0C4; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="amber"] { --t: 251 191 36; --t-ink: #FDDC7A; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="rose"] { --t: 251 113 133; --t-ink: #FEBAC3; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="cyan"] { --t: 34 211 238; --t-ink: #8FEDFA; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="pink"] { --t: 244 114 182; --t-ink: #FBBCDA; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-item,.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)[data-tone="slate"] { --t: 148 163 184; --t-ink: #D6DEE8; } /* ── 6b. The tile ─────────────────────────────────────────────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item { position: relative; overflow: hidden; isolation: isolate; background-color: var(--aits-card); background-image: linear-gradient(135deg, rgb(var(--t) / .07), rgb(var(--t) / 0) 58%); border: 1px solid var(--aits-line); border-radius: 15px !important; transition: transform .26s cubic-bezier(.22,.61,.36,1), border-color .26s var(--ease,ease), box-shadow .26s var(--ease,ease), background-image .26s var(--ease,ease); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover { transform: translateY(-3px); border-color: rgb(var(--t) / .48); background-image: linear-gradient(135deg, rgb(var(--t) / .14), rgb(var(--t) / 0) 62%); box-shadow: 0 18px 32px -20px rgb(var(--t) / .85), 0 3px 10px -6px rgb(var(--t) / .35); } /* Keyboard parity — the mega is fully tabbable and the hover state was previously invisible to it. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible { outline: none; transform: translateY(-3px); border-color: rgb(var(--t) / .65); box-shadow: 0 0 0 3px rgb(var(--t) / .30), 0 18px 32px -20px rgb(var(--t) / .85); } /* Left accent bar — grows out of the tone on hover/focus. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item::before { content: ''; position: absolute; left: 0; top: 16%; bottom: 16%; width: 3px; height: auto; background: var(--t-ink); border-radius: 0 999px 999px 0; opacity: 0; transform: scaleY(.35); transform-origin: center; transition: opacity .24s var(--ease,ease), transform .24s var(--ease,ease); z-index: 2; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover::before, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible::before { opacity: 1; transform: scaleY(1); } /* Sheen sweep. Pinned to z-index 0 with the content lifted to 1 — the old Browse-only version painted a 45%-white bar OVER the label, dropping it under AA for the length of the sweep. It now travels behind the text and is half the strength. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 52%; background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.26) 50%, transparent 82%); transform: skewX(-18deg); pointer-events: none; transition: left .62s var(--ease,ease); z-index: 0; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item::after { background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.07) 50%, transparent 82%); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover::after { left: 135%; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item-icon, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item-body, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item-count, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-rail-count, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-badge-inline { position: relative; z-index: 1; } /* ── 6c. Icon tile ────────────────────────────────────────────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-icon { background-color: rgb(var(--t) / .15); background-image: linear-gradient(158deg, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); color: var(--t-ink); box-shadow: inset 0 0 0 1px rgb(var(--t) / .26); transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .24s var(--ease,ease), box-shadow .24s var(--ease,ease); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-icon { background-color: rgb(var(--t) / .20); background-image: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,0) 62%); box-shadow: inset 0 0 0 1px rgb(var(--t) / .34); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover .aitshd-mega-item-icon, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible .aitshd-mega-item-icon { transform: translateY(-1px) scale(1.07) rotate(-4deg); background-color: rgb(var(--t) / .26); box-shadow: inset 0 0 0 1px rgb(var(--t) / .42), 0 9px 18px -11px rgb(var(--t) / .95); } /* ── 6d. Type ─────────────────────────────────────────────────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover .aitshd-mega-item-title { color: var(--t-ink); } /* ── 6e. Count pill — tone-matched, solid on hover ────────────── */ /* Every column, not just By Category — the Models By-Company and Deals By-Category/By-Discount pills were the last grey chips left in the system. Colour only; the corner positioning below stays col-cat specific because only that column has a description line to keep clear of. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item :is(.aitshd-mega-item-count,.aitshd-mega-rail-count) { background: rgb(var(--t) / .14) !important; color: var(--t-ink) !important; border: 1px solid rgb(var(--t) / .30) !important; transition: background-color .22s var(--ease,ease), color .22s var(--ease,ease), border-color .22s var(--ease,ease), transform .22s var(--ease,ease); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover :is(.aitshd-mega-item-count,.aitshd-mega-rail-count), .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible :is(.aitshd-mega-item-count,.aitshd-mega-rail-count) { background: var(--t-ink) !important; color: var(--t-on) !important; border-color: transparent !important; transform: scale(1.06); } /* ── 6f. By Category — layout that lets the text breathe ────────── The previous rules here were built for a one-line "capability grid": 30px tiles, 12.5px titles and `white-space: nowrap` + ellipsis on the label. Now that each row carries a description, the title is allowed to wrap instead of being cut — a category name must never arrive as "AI Transcription & Subtit…". */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item { display: flex; align-items: center; gap: 11px; padding: 10px 42px 10px 11px !important; /* right lane = count pill */ /* The column is a flex box with a max-height (below), which makes every tile a shrinkable flex item — they collapsed to 48px and their own 38px icon overflowed the padding box. Tiles keep their intrinsic height and the COLUMN scrolls instead. */ flex: 0 0 auto; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-colh, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-view-all-link { flex: 0 0 auto; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon { width: 36px !important; height: 36px !important; border-radius: 11px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon svg { width: 19px !important; height: 19px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title { font-size: 13px !important; font-weight: 700 !important; display: block !important; transition: color .2s var(--ease,ease); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title > span:first-child, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-rail-label { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: block !important; line-height: 1.3 !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-desc { font-size: 11.5px !important; line-height: 1.38 !important; margin-top: 3px !important; } /* The count pill keeps its own corner lane so a long category name gets the full row width instead of the sliver a flex sibling would leave it. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-count, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-rail-count { position: absolute; top: 8px; right: 8px; font-size: 10px !important; font-weight: 800 !important; padding: 2px 7px !important; border-radius: 999px; } /* Tall taxonomies scroll inside the column rather than pushing the panel past the fold — rail_limit is admin-editable and this mega sits under a 68px sticky header. */ @media (min-width: 1024px) { .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat { /* Viewport-derived, not a fixed cap: a laptop scrolls, a desktop shows all nine rows outright. The absolute ceiling only stops a 4K screen from rendering an absurdly tall panel once rail_limit is raised. */ max-height: min(860px, calc(100vh - 196px));max-height: min(860px, calc(100dvh - 196px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(var(--aits-blue-rgb, 54 128 237) / .45) transparent; padding-right: 12px; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat::-webkit-scrollbar { width: 8px; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat::-webkit-scrollbar-track { background: transparent; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat::-webkit-scrollbar-thumb { background: rgba(54,128,237,.28); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat:hover::-webkit-scrollbar-thumb { background: rgba(54,128,237,.5); background-clip: content-box; } /* Keeps the CTA reachable without scrolling to the bottom. The spread shadow paints an opaque gutter in the panel's own surface colour, so rows sliding underneath are masked instead of ghosting through the pill's translucent tint. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-view-all-link { position: sticky; bottom: -2px; z-index: 3; margin-top: 8px !important; box-shadow: 0 0 0 6px var(--aits-card), 0 -10px 16px -6px var(--aits-card); } } /* ── 6g. Responsive ────────────────────────────────────────────── The mega grid already reflows at 1240 / 1080 / 900 and the whole header collapses to the drawer at 1023. These steps keep the tiles legible as their column narrows — they shrink the chrome, never the text, and no rule here hides a label. */ @media (max-width: 1240px) { .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item { padding: 10px 38px 10px 11px !important; gap: 10px; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon { width: 34px !important; height: 34px !important; border-radius: 10px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-icon svg { width: 17px !important; height: 17px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title { font-size: 12.5px !important; } /* 314px is the narrowest this column ever gets — the grid runs `240px 1fr 1fr 340px` here, and below 1080 By Pricing is hidden so the column gets WIDER again, not narrower. Two descriptions need a third line at exactly this width; giving it to them means nothing is clamped away at any real breakpoint. The column scrolls, so the extra height costs nothing. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-desc { -webkit-line-clamp: 3; } } @media (max-width: 1080px) { /* By Pricing is hidden at this width, so By Category inherits the freed space and can run two tiles per row. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat .aitshd-mega-colh, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-view-all-link { grid-column: 1 / -1; } } @media (max-width: 900px) { /* Single-column mega — full-width tiles read better than a cramped 2-up, and the sticky-scroll cap is pointless once the panel itself is the scrolling surface. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat { grid-template-columns: 1fr; max-height: none; overflow: visible; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col-cat > .aitshd-mega-view-all-link { position: static; } } /* Coarse pointers get no hover transform — it fires on tap and leaves the tile stuck in its lifted state until the next paint. */ @media (hover: none) { .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover { transform: none; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: none; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item::after { display: none; } } @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item-icon { transition: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item:hover { transform: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item:hover .aitshd-mega-item-icon { transform: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-item::after { display: none !important; } } /* ── 6h. Mobile drawer — same tone language, tile treatment ───── Below 1023px the mega is gone and these rows ARE the navigation, so they get the card + tone rather than being left as flat links. */ .aitshd-drawer .aitshd-drawer-link { border-radius: 12px; transition: background-color .2s var(--ease,ease), border-color .2s var(--ease,ease), transform .2s var(--ease,ease); } .aitshd-drawer .aitshd-drawer-link:active { transform: scale(.985); } .aitshd-drawer .aitshd-drawer-link-ico { transition: transform .24s cubic-bezier(.34,1.56,.64,1); } .aitshd-drawer .aitshd-drawer-link:active .aitshd-drawer-link-ico { transform: scale(1.06); } /* ═══════════════════════════════════════════════════════════════ 6j. BESPOKE POPULAR-STRIP CHIPS — the other five panels ═══════════════════════════════════════════════════════════════ Only Tools and AI Tools use `.aitshd-mega-pop-chip`. AI Models, AI Learn, Deals and Discover each grew their own chip class with its own mark/label children. All four already carry `data-tone` on every chip, so they only ever needed wiring — nothing in the markup changed here either. chip .aitshd-{mmg,lm}-pop-chip · .aitshd-dm-quick-chip .aitshd-dc-trending-chip mark -pop-mark · -quick-ico · -trending-ico label -pop-name · -quick-label · -trending-label */ .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip) { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--aits-line) !important; border-radius: 14px !important; background-color: var(--aits-card) !important; background-image: linear-gradient(135deg, rgb(var(--t) / .08), rgb(var(--t) / 0) 60%) !important; transition: transform .26s cubic-bezier(.22,.61,.36,1), border-color .26s var(--ease,ease), box-shadow .26s var(--ease,ease), background-image .26s var(--ease,ease) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover, .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):focus-visible { transform: translateY(-3px); border-color: rgb(var(--t) / .48) !important; background-image: linear-gradient(135deg, rgb(var(--t) / .16), rgb(var(--t) / 0) 64%) !important; box-shadow: 0 16px 30px -18px rgb(var(--t) / .85), 0 3px 10px -6px rgb(var(--t) / .35) !important; outline: none; } /* Accent bar + sheen */ .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: var(--t-ink); border-radius: 0 999px 999px 0; opacity: 0; transform: scaleY(.35); transition: opacity .24s var(--ease,ease), transform .24s var(--ease,ease); z-index: 2; } .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover::before { opacity: 1; transform: scaleY(1); } /* Mark / logo pill — tone tint, ring, and the same spring on hover. */ .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dc-trending-ico) { background-color: rgb(var(--t) / .15) !important; color: var(--t-ink) !important; box-shadow: inset 0 0 0 1px rgb(var(--t) / .26) !important; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .24s var(--ease,ease), box-shadow .24s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dc-trending-ico) { background-color: rgb(var(--t) / .20) !important; box-shadow: inset 0 0 0 1px rgb(var(--t) / .34) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover :is(.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dc-trending-ico) { transform: translateY(-1px) scale(1.08) rotate(-4deg); background-color: rgb(var(--t) / .26) !important; box-shadow: inset 0 0 0 1px rgb(var(--t) / .42), 0 8px 16px -10px rgb(var(--t) / .95) !important; } /* Label takes the tone on hover, same as every other row. */ .aitshd-mega-panel:is(.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover) :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover :is(.aitshd-mmg-pop-name,.aitshd-lm-pop-name,.aitshd-dm-quick-label,.aitshd-dc-trending-label) { color: var(--t-ink) !important; } @media (hover: none) { .aitshd-mega-panel :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip), .aitshd-mega-panel :is(.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dc-trending-ico) { transition: none !important; } .aitshd-mega-panel :is(.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════ 6k. METRIC NORMALISATION — one size system across all panels ═══════════════════════════════════════════════════════════════ Giving every panel the same tile made the SIZING differences obvious: the treatment matched but the measurements did not. Measured before this block — six icon sizes (34/36/38/40/42/44), four icon radii (10/11/12/13), four glyph sizes (18–21), three title sizes (13/13.5/14.5) at two weights (600/700), and row heights from 54px to 73.6px. The worst offender was `padding: 9px 8px 9px 14px` on Learn, Deals, Discover and Resources. That 14-left / 8-right asymmetry was correct for their OLD flat rows, where a `left: 4px` accent bar needed clearance and there was no border to sit inside. On a bordered card it just reads as content shoved right and cramped against the right edge. TWO TIERS, keyed on the column — not on `.is-lg`, which the panels apply inconsistently (Learn/Resources/Discover put it on every row, Deals only on Browse). What actually distinguishes a row is whether it carries a description, and that correlates 1:1 with the column it lives in: lead tile — .aitshd-mega-browse 42px icon · 14.5px title row tile — every other column 36px icon · 13px title `.aitshd-mega-col-cat` is EXCLUDED: §6f already gives it this exact metric set plus the 42px right lane its absolutely positioned count pill needs, and a blanket padding here would collapse that lane and drop the pill onto the title. */ /* ── Row tile — every column except By Category ────────────────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item { padding: 10px 12px !important; gap: 11px !important; align-items: center !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item .aitshd-mega-item-icon { width: 36px !important; height: 36px !important; border-radius: 11px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item .aitshd-mega-item-icon svg { width: 19px !important; height: 19px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item .aitshd-mega-item-title { font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; } /* ── Lead tile — the Browse rail ───────────────────────────────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-browse .aitshd-mega-item { padding: 10px 12px !important; gap: 12px !important; align-items: center !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-icon svg { width: 21px !important; height: 21px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-title { font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.25 !important; } /* ── Description — one scale everywhere ───────────────────────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-desc { font-size: 11.5px !important; line-height: 1.38 !important; margin-top: 3px !important; } /* Inline count pills sit in the flex row here (only By Category floats one into the corner), so they need their own breathing room rather than inheriting the corner treatment. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col:not(.aitshd-mega-col-cat) .aitshd-mega-item :is(.aitshd-mega-item-count,.aitshd-mega-rail-count) { font-size: 10.5px !important; font-weight: 800 !important; padding: 3px 8px !important; border-radius: 999px !important; } /* ═══════════════════════════════════════════════════════════════ 6m. CARD SPACING — one gap across every mega ═══════════════════════════════════════════════════════════════ Once the rows became bordered cards they needed air between them, and they had almost none: measured 1px in most columns (a bare `.aitshd-mega-item + .aitshd-mega-item { margin-top: 1px }`), 2px in the Browse rails, 3px in By Pricing and 6px only in the AI Tools By Category column. Cards that close to each other read as one continuous block instead of a stack. Every column is already `display: flex` (verified across all seven panels), so `gap` is the single mechanism — and the legacy per-item `margin-top` is zeroed so the two cannot compound into an uneven 8/9/14px depending on which column you land in. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col,.aitshd-mega-subcols) { gap: 8px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-browse,.aitshd-mega-col,.aitshd-mega-subcols) .aitshd-mega-item { margin-top: 0 !important; margin-bottom: 0 !important; } /* ═══════════════════════════════════════════════════════════════ 6i. POPULAR RIGHT NOW — same tile language as the columns ═══════════════════════════════════════════════════════════════ The strip was the last flat surface in the panel: plain white chips on a plain panel, one shared blue hover, no relationship to the nine-tone system running directly above it. It now reuses the SAME --t / --t-ink / --t-on ramp, so a chip and a category tile are visibly the same component at two sizes. */ /* Panel — brand-tinted glass with a hairline top highlight rather than a flat two-stop gradient. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-popular::before { background: radial-gradient(120% 180% at 100% 0%, rgba(54,128,237,.10), transparent 62%), radial-gradient(90% 160% at 0% 100%, rgba(1,150,253,.07), transparent 58%), linear-gradient(180deg, var(--aits-surface-2), var(--aits-card)); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-popular::before { background: radial-gradient(120% 180% at 100% 0%, rgba(96,164,245,.14), transparent 62%), radial-gradient(90% 160% at 0% 100%, rgba(56,189,248,.10), transparent 58%), linear-gradient(180deg, var(--aits-surface-2), var(--aits-card)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* Chip */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip { position: relative; overflow: hidden; isolation: isolate; padding: 11px 13px !important; gap: 11px !important; border-radius: 14px !important; border: 1px solid var(--aits-line) !important; background-color: var(--aits-card) !important; background-image: linear-gradient(135deg, rgb(var(--t) / .08), rgb(var(--t) / 0) 60%) !important; transition: transform .26s cubic-bezier(.22,.61,.36,1), border-color .26s var(--ease,ease), box-shadow .26s var(--ease,ease), background-image .26s var(--ease,ease); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible { transform: translateY(-3px); border-color: rgb(var(--t) / .48) !important; background-image: linear-gradient(135deg, rgb(var(--t) / .16), rgb(var(--t) / 0) 64%) !important; box-shadow: 0 16px 30px -18px rgb(var(--t) / .85), 0 3px 10px -6px rgb(var(--t) / .35) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--t) / .30), 0 16px 30px -18px rgb(var(--t) / .85) !important; } /* Accent bar + sheen, matching the column tiles. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: var(--t-ink); border-radius: 0 999px 999px 0; opacity: 0; transform: scaleY(.35); transition: opacity .24s var(--ease,ease), transform .24s var(--ease,ease); z-index: 2; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover::before, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible::before { opacity: 1; transform: scaleY(1); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 52%; background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.26) 50%, transparent 82%); transform: skewX(-18deg); pointer-events: none; transition: left .62s var(--ease,ease); z-index: 0; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::after { background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.07) 50%, transparent 82%); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover::after { left: 135%; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-ico, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-title { position: relative; z-index: 1; } /* Logo pill. The tint only shows for the single-letter fallback — a real logo covers it edge to edge — so the ring is what actually reads on branded chips, and it carries the tone. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-ico { width: 30px !important; height: 30px !important; border-radius: 9px !important; font-size: 12.5px !important; font-weight: 800 !important; background-color: rgb(var(--t) / .15) !important; color: var(--t-ink) !important; box-shadow: inset 0 0 0 1px rgb(var(--t) / .26), 0 1px 2px rgba(15,23,42,.06) !important; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .24s var(--ease,ease), background-color .24s var(--ease,ease); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-ico { background-color: rgb(var(--t) / .20) !important; box-shadow: inset 0 0 0 1px rgb(var(--t) / .34) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible .aitshd-mega-pop-chip-ico { transform: translateY(-1px) scale(1.08) rotate(-4deg); background-color: rgb(var(--t) / .26) !important; box-shadow: inset 0 0 0 1px rgb(var(--t) / .42), 0 8px 16px -10px rgb(var(--t) / .95) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-title { font-size: 12.5px; font-weight: 700; transition: color .2s var(--ease,ease); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-title, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:focus-visible .aitshd-mega-pop-chip-title { color: var(--t-ink); } /* "View all trending" — brand CTA with an arrow that leads. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more { border-radius: 13px !important; font-weight: 800 !important; transition: transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s var(--ease,ease), filter .24s var(--ease,ease) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:hover { transform: translateY(-3px); filter: saturate(1.12); box-shadow: 0 18px 30px -14px var(--aits-blue-dark) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more svg { transition: transform .24s var(--ease,ease); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:hover svg { transform: translateX(3px); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(54,128,237,.35), 0 18px 30px -14px var(--aits-blue-dark) !important; } @media (hover: none) { .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover { transform: none; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico { transform: none; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::after { display: none; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip-ico, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more { transition: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-more:hover { transform: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-pop-chip::after { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ §MEGX — ONE DESIGN ACROSS ALL SEVEN MEGA PANELS (2026-09-18) ═══════════════════════════════════════════════════════════════ The AI Directory panel was redesigned first (§AITX below) and the owner then asked for the other six to match. Everything in that redesign that is not tied to the directory's own content lives here instead, scoped to the seven-panel `:is()` list §6 already uses: Tools, AI Directory (which also carries .panel-tools), AI Models, AI Learn, Deals, Discover, Resources. WHAT IS SHARED (here): no mark before a heading; the heading's trailing rule; tile metrics and type scale; the hover language; the never-clamped label rule; icon plate sizes; the CTA skin; the bottom strips' hover; the open choreography; the pointer notch. WHAT STAYS PER PANEL (§AITX and each panel's own section): column track widths, and anything that depends on what a column holds — the directory's category index, its pricing lane, its Popular cards. Those columns hold different things in each panel and forcing one layout on them would be matching the wrong thing. SPECIFICITY. §6l/§6m restate padding, gap, icon size and type size for all seven with `!important` at up to (0,7,0), so every selector here carries `.aitshd-mega-wrap` to reach the same weight, and the block sits after them. §AITX follows this block and is one step more specific, so the directory keeps its own values where it needs them. Keep that order. */ /* ── MEGX-1. No mark before any heading ────────────────────────── */ /* Each panel shipped its own: a 14×3px gradient bar before every column head, and a pulsing dot before the Popular / Trending labels. Removed on request. They cannot be deleted one by one — seven panels define them and the directory also inherits the tools bar — so the pseudo-element is switched off for the family. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-colh::before, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-popular-head strong::before, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dc-trending-head,.aitshd-dm-quick-head,.aitshd-dm-feat-head,.aitshd-lm-pop-head,.aitshd-mmg-pop-head,.aitshd-rc-guides-head,.aitshd-rc-pop-head) :is(strong,.aitshd-dm-feat-h)::before, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dc-compare-label,.aitshd-rc-popular-h)::before { content: none !important; } /* ── MEGX-2. Column heads ──────────────────────────────────────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-colh { display: flex !important; align-items: center; gap: 10px; margin: 0 2px 6px !important; padding: 0 !important; font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--aits-blue-dark); } /* Hairline from the label to the column edge — the detail that makes a row of lists read as one composition. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-colh::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgb(54 128 237 / .30), rgb(54 128 237 / 0)); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-colh { color: #93BEFF; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-colh::after { background: linear-gradient(90deg, rgb(147 190 255 / .26), rgb(147 190 255 / 0)); } /* ── MEGX-3/4. The tile and the hover language ─────────────────── */ /* THE HOVER, IN ONE LINE: the row does not move — its icon lights up. §6's version (a 3px lift, a white sheen bar skewed across the tile and an icon that rotates as it springs) was rejected: three things animating at once, and the lift makes a whole column twitch as the pointer crosses it. All three are switched off below. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item { align-items: center !important; gap: 11px !important; margin: 0 !important; padding: 12px !important; border-radius: 15px !important; border: 1px solid var(--aits-line); background-color: var(--aits-card); background-image: none; box-shadow: 0 1px 2px rgb(15 23 42 / .035); transform: none !important; transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), box-shadow .16s var(--ease,ease); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item { border-color: rgb(255 255 255 / .085); background-color: rgb(255 255 255 / .035); box-shadow: none; } /* OFF: §6b's left accent bar (::before) and sheen sweep (::after). */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item::before, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item::after { display: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible { background-color: rgb(var(--t) / .09); background-image: none; border-color: rgb(var(--t) / .38); box-shadow: 0 8px 20px -14px rgb(var(--t) / .75); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover, body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible { background-color: rgb(var(--t) / .14); border-color: rgb(var(--t) / .42); box-shadow: none; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--t) / .30); } /* A dark RESTING rule carries one element selector, so an equal-class light :hover LOSES to it. Every hover state in this block needs a dark twin — drop one and that state silently dies after dark. */ body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible { box-shadow: 0 0 0 3px rgb(var(--t) / .42); } /* The icon plate carries the whole hover: tone tint at rest, solid --t-ink with the glyph knocked out in --t-on on hover. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-icon { background-color: rgb(var(--t) / .14); background-image: none; color: var(--t-ink); box-shadow: inset 0 0 0 1px rgb(var(--t) / .24); transition: background-color .18s var(--ease,ease), color .18s var(--ease,ease), box-shadow .18s var(--ease,ease), transform .22s cubic-bezier(.34,1.4,.64,1); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-icon { background-color: rgb(var(--t) / .18); box-shadow: inset 0 0 0 1px rgb(var(--t) / .30); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover .aitshd-mega-item-icon, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible .aitshd-mega-item-icon { background-color: var(--t-ink); background-image: linear-gradient(158deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 58%); color: var(--t-on); transform: scale(1.04); box-shadow: inset 0 0 0 1px rgb(var(--t) / .55), 0 6px 14px -8px rgb(var(--t) / .95); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:hover .aitshd-mega-item-icon, body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item:focus-visible .aitshd-mega-item-icon { background-color: var(--t-ink); box-shadow: inset 0 0 0 1px rgb(var(--t) / .55), 0 6px 16px -9px rgb(0 0 0 / .75); } /* ── MEGX-5. Nothing in a column may be cut ────────────────────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item :is(.aitshd-mega-item-title,.aitshd-mega-item-desc), .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item :is(.aitshd-mega-item-title > span:not(.aitshd-mega-badge-inline),.aitshd-mega-rail-label) { display: block !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; overflow-wrap: break-word; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-title { font-size: 13.6px !important; font-weight: 700 !important; line-height: 1.28 !important; letter-spacing: -.012em; color: var(--aits-ink); transition: color .16s var(--ease,ease); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-title { font-size: 14.5px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-desc { font-size: 11.6px !important; line-height: 1.38 !important; margin-top: 2px !important; color: var(--aits-mut) !important; } /* ── MEGX-6. Icon plates: 42px lead lane, 36px index lanes ─────── */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-icon { width: 42px !important; height: 42px !important; border-radius: 13px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-icon svg { width: 20px !important; height: 20px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-col .aitshd-mega-item .aitshd-mega-item-icon { width: 36px !important; height: 36px !important; border-radius: 12px !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-col .aitshd-mega-item .aitshd-mega-item-icon svg { width: 18px !important; height: 18px !important; } /* ── MEGX-7. CTA bars ──────────────────────────────────────────── */ /* Skin only — `margin` is left alone because several panels pin the CTA to the bottom of a flex column with `margin: auto 0 0`. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px !important; border-radius: 14px !important; font-size: 12.8px !important; font-weight: 800 !important; letter-spacing: .005em; position: static !important; transform: none !important; color: var(--aits-blue-dark) !important; background-color: rgb(54 128 237 / .10) !important; background-image: none !important; border: 1px solid var(--aits-blue-line) !important; box-shadow: none !important; transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), color .16s var(--ease,ease), box-shadow .16s var(--ease,ease); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link:hover, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link:focus-visible { padding: 12px 14px !important; color: #fff !important; background-color: #2A6FD6 !important; border-color: #2A6FD6 !important; box-shadow: 0 10px 22px -16px rgb(32 96 192 / .90) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(54 128 237 / .32) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link { color: #A9CCFF !important; background-color: rgb(96 164 245 / .12) !important; border-color: rgb(96 164 245 / .28) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link:hover, body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link:focus-visible { color: #fff !important; background-color: #2A6FD6 !important; border-color: #2A6FD6 !important; box-shadow: none !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link:focus-visible { box-shadow: 0 0 0 3px rgb(96 164 245 / .40) !important; } /* ── MEGX-8. The bottom strips ─────────────────────────────────── */ /* Every panel closes with a chip rail under a different class name. They take the ONE brand ring, not the nine-tone wash the columns use: a chip's tone is assigned by loop index, so it says nothing about the tool, and a pastel wash fights the brand logo sitting inside the chip. No lift, no sheen, no colour per chip. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip) { background-image: none !important; transform: none !important; transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), box-shadow .16s var(--ease,ease) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)::before, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip)::after { display: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):focus-visible { background-color: var(--aits-card) !important; background-image: none !important; border-color: rgb(54 128 237 / .55) !important; box-shadow: 0 0 0 3px rgb(54 128 237 / .12), 0 8px 20px -14px rgb(15 23 42 / .40) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):hover, body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dc-trending-chip):focus-visible { background-color: rgb(255 255 255 / .085) !important; border-color: rgb(96 164 245 / .48) !important; box-shadow: 0 0 0 3px rgb(96 164 245 / .16) !important; } /* ── MEGX-9. Open choreography ─────────────────────────────────── */ /* Rows fade up 16ms apart as a panel opens. No open-state attribute needed: the panels are `display:none` until opened and a CSS animation starts when an element becomes rendered, so this fires once per open, for whichever panel opened. `backwards`, never `forwards`/`both`: a filled animation keeps applying its last keyframe forever, and animations outrank normal declarations, so every row would be pinned to that transform for the life of the page. */ @keyframes megxRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > * { animation: megxRise .30s var(--ease, cubic-bezier(.16,1,.3,1)) backwards; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > *:nth-child(2) { animation-delay: 16ms; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > *:nth-child(3) { animation-delay: 32ms; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > *:nth-child(4) { animation-delay: 48ms; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > *:nth-child(5) { animation-delay: 64ms; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > *:nth-child(6) { animation-delay: 80ms; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > *:nth-child(7) { animation-delay: 96ms; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > *:nth-child(n+8) { animation-delay: 112ms; } /* ── MEGX-11. The closing rail, on every panel ─────────────────── */ /* Each panel ends with a strip under a different name — Popular Right Now, Featured Deals, Trending, Popular Guides — and each had grown its own surface, head and card. They are one component now, built from the AI Directory's version: container .aitshd-mega-popular · .aitshd-dm-feat .aitshd-dc-trending · .aitshd-rc-guides head …-head (label · fading rule · link) row …-row / …-grid (each keeps its own track count) card the eight chip classes below The TRAY is the container itself, not a pseudo-element. Four of the seven painted theirs with an absolutely-positioned `::before` inset to match that panel's padding, and those paddings ranged from 14/20/20 to 18/24/20 — one inset could not fit them all. The pseudo-tray is switched off and the container carries the surface, so the geometry is identical everywhere. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular,.aitshd-dm-feat,.aitshd-dc-trending,.aitshd-rc-guides) { position: relative; margin: 2px 20px 18px !important; padding: 0 !important; border: 1px solid rgb(54 128 237 / .12) !important; border-radius: 20px !important; background: radial-gradient(130% 220% at 100% 0%, rgb(54 128 237 / .10), transparent 60%), linear-gradient(180deg, #F3F7FD, #EDF2FA) !important; box-shadow: inset 0 2px 4px rgb(15 23 42 / .045), inset 0 -1px 0 rgb(255 255 255 / .7) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular,.aitshd-dm-feat,.aitshd-dc-trending,.aitshd-rc-guides) { border-color: rgb(147 190 255 / .10) !important; background: radial-gradient(130% 220% at 100% 0%, rgb(96 164 245 / .12), transparent 60%), linear-gradient(180deg, rgb(0 0 0 / .26), rgb(0 0 0 / .14)) !important; box-shadow: inset 0 2px 5px rgb(0 0 0 / .35), inset 0 -1px 0 rgb(255 255 255 / .04) !important; } /* The old pseudo-trays, off. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular,.aitshd-dm-feat,.aitshd-dc-trending,.aitshd-rc-guides)::before { display: none !important; } /* Head: label · fading rule · link. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) { display: flex !important; align-items: center; gap: 14px; padding: 14px 18px 12px !important; margin: 0 !important; border: 0 !important; background: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) :is(strong,.aitshd-dm-feat-h) { display: inline-flex !important; align-items: center; gap: 9px; /* Stretches so its ::after rule runs to the link. A rule on the HEAD's ::after would land after the link instead of before. */ flex: 1 1 auto; min-width: 0; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--aits-blue-dark) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) :is(strong,.aitshd-dm-feat-h) { color: #93BEFF !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) :is(strong,.aitshd-dm-feat-h)::after { content: ''; flex: 1 1 auto; height: 1px; margin-left: 3px; background: linear-gradient(90deg, rgb(54 128 237 / .26), rgb(54 128 237 / 0)); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) :is(strong,.aitshd-dm-feat-h)::after { background: linear-gradient(90deg, rgb(147 190 255 / .22), rgb(147 190 255 / 0)); } /* The head's link: a text link with the arrow in a disc, never a filled button — the cards below are what the eye should land on. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 2px 5px 8px !important; border: 0 !important; border-radius: 8px !important; background: none !important; box-shadow: none !important; transform: none !important; filter: none !important; font-size: 12.4px !important; font-weight: 700 !important; letter-spacing: 0; white-space: nowrap; color: var(--aits-blue-dark) !important; transition: color .16s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) a { color: #93BEFF !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) a:hover { background: none !important; color: var(--aits-blue) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) a svg { width: 13px; height: 13px; box-sizing: content-box; padding: 4px; border-radius: 999px; background: rgb(54 128 237 / .12); transition: transform .18s var(--ease,ease), background-color .18s var(--ease,ease); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) a svg { background: rgb(96 164 245 / .16); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) a:hover svg { transform: translateX(3px); background: rgb(54 128 237 / .22); } /* Row: padding only — each panel keeps its own track count. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-row,.aitshd-mega-models-popular-row,.aitshd-lm-popular-row,.aitshd-dm-feat-grid,.aitshd-dc-trending-row,.aitshd-rc-guides-row) { padding: 0 18px 18px !important; gap: 10px !important; } /* Card: one surface for all eight flavours. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide) { padding: 10px 12px !important; border-radius: 14px !important; border: 1px solid rgb(15 23 42 / .06) !important; background-color: var(--aits-card) !important; background-image: none !important; box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 6px 14px -12px rgb(15 23 42 / .28) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide) { background-color: rgb(255 255 255 / .055) !important; border-color: rgb(255 255 255 / .09) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05) !important; } /* The card's mark/logo plate: one size, and its ring is an OUTER shadow because a logo fills the plate and would paint over an inset one. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { width: 36px !important; height: 36px !important; border-radius: 11px !important; flex: none; background-color: rgb(54 128 237 / .08) !important; background-image: none !important; color: var(--aits-blue-dark) !important; box-shadow: 0 0 0 1px rgb(15 23 42 / .09) !important; transform: none !important; transition: box-shadow .16s var(--ease,ease), background-color .16s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { background-color: rgb(96 164 245 / .12) !important; color: #93BEFF !important; box-shadow: 0 0 0 1px rgb(255 255 255 / .12) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { background-color: rgb(54 128 237 / .14) !important; box-shadow: 0 0 0 1px rgb(54 128 237 / .45) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { background-color: rgb(96 164 245 / .20) !important; box-shadow: 0 0 0 1px rgb(96 164 245 / .45) !important; } /* Card type: name over a muted second line, nothing truncated. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-title,.aitshd-mmg-pop-name,.aitshd-lm-pop-name,.aitshd-dm-quick-label,.aitshd-dc-trending-label,.aitshd-rc-guide-title) { display: block; white-space: normal; overflow: visible; text-overflow: clip; font-size: 13.2px !important; font-weight: 700 !important; line-height: 1.22; letter-spacing: -.012em; color: var(--aits-ink) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-title,.aitshd-mmg-pop-name,.aitshd-lm-pop-name,.aitshd-dm-quick-label,.aitshd-dc-trending-label,.aitshd-rc-guide-title) { color: var(--aits-blue-dark) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-title,.aitshd-mmg-pop-name,.aitshd-lm-pop-name,.aitshd-dm-quick-label,.aitshd-dc-trending-label,.aitshd-rc-guide-title) { color: #A9CCFF !important; } /* ── MEGX-10. Motion guard ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > * { animation: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-item,.aitshd-mega-view-all-link), .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-item .aitshd-mega-item-icon { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════ §AITX — AI DIRECTORY MEGA, premium composition (2026-09-18) ═══════════════════════════════════════════════════════════════ Owns the three editorial columns of #aitshd-mega-aitools — BROWSE, BY CATEGORY, BY PRICING — and their hover language. It takes the tone ramps (--t / --t-ink / --t-on) and the count- pill flip from §6 PREMIUM TILE SYSTEM and replaces the rest of §6's hover: the 3px card lift, the diagonal white sheen sweep and the icon's rotate-and-spring are all switched OFF here (§6b ::before / ::after, §6c transform). See §AITX-3. NOT IN SCOPE. The fourth column, .aitshd-mega-featured-col — the sponsored unit and the "List Your AI Tool" tile (§4 above) — keeps its own padding, border and card design. No rule here selects it. WHY THIS BLOCK IS LAST IN THE FILE. §6l (row/lead tile metrics) and §6m (card gap) restate padding, gap, icon size and type size for all seven panels with `!important` at up to (0,7,0). A panel that wants its own scale has to answer at the same specificity AND later in source. Every selector here is therefore built as .aitshd-mega-panel-aitools.aitshd-mega-panel-tools → 2 classes .aitshd-mega-wrap → +1 :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item → +2 which ties or beats the §6l shape, and the block is appended at the end of the file so ties fall this way. The panel genuinely carries both panel classes (see the blade) and .aitshd-mega-wrap genuinely is the columns' parent — neither is a specificity hack bolted on for the sake of it. If you add rules here, keep the same chain or they will silently lose to §6l. LIVE WIDTH RANGE. The desktop nav — the only thing that can open a mega — is `display:none` below 1280px (see "Primary nav"), so this panel is never seen below that. The real range is a 1248px panel at a 1280px viewport up to the 1440px cap. The ≤1279 step at the end is defensive, for the day that gate moves. NOTHING IS CLAMPED. §AITX-3 removes every ellipsis, `nowrap` and -webkit-line-clamp inside these three columns: labels and blurbs wrap to as many lines as they need, and the tracks in §AITX-1 are sized so the longest category description (114 characters) lands on two lines at the 1440px cap. */ /* ── AITX-1. Stage: tracks + column chrome ─────────────────────── */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap { /* By Category takes most of the fluid space: it is the only column carrying a full sentence per row, and every extra 40px here is one less wrapped line × six rows. By Pricing needs little — its longest blurb is 25 characters. Browse is fixed at a width that keeps "Saved Tools" beside its FOR YOU pill on one line. */ grid-template-columns: 286px minmax(0, 1.28fr) minmax(0, .72fr) 360px; } /* The tools family drops By Pricing at ≤1140 and the base mega does it again at ≤1080 — both were written for a 3-column panel. This one keeps four tracks wherever it can be opened, so the column has to be put back: three children in four tracks would leave a hole where the sponsored unit belongs. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-freetools { display: flex !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse { padding: 18px 16px 18px 22px; gap: 8px !important; border-right: 0; background-image: linear-gradient(180deg, rgb(54 128 237 / .055), rgb(54 128 237 / 0) 54%); } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse { background-image: linear-gradient(180deg, rgb(96 164 245 / .07), rgb(96 164 245 / 0) 54%); } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col { padding: 18px; gap: 8px !important; /* Seams are drawn by the wrap's fading hairline below, not by a hard 1px border on each column. */ border-left: 0 !important; border-right: 0 !important; } /* Brand-tinted seam that fades out at both ends, in place of the flat grey rule the tools family paints. The fourth child is the sponsored column: its own `border-left` is left untouched. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap > * + *::before { top: 18px; bottom: 18px; background: linear-gradient(180deg, rgb(54 128 237 / 0), rgb(54 128 237 / .20) 18%, rgb(54 128 237 / .20) 82%, rgb(54 128 237 / 0)); } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap > * + *::before { background: linear-gradient(180deg, rgb(147 190 255 / 0), rgb(147 190 255 / .16) 18%, rgb(147 190 255 / .16) 82%, rgb(147 190 255 / 0)); } /* ── AITX-4. BROWSE — the shortcut lane ────────────────────────── */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item { gap: 12px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-title { font-size: 14.5px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse-sep { height: 1px; margin: 6px 4px 4px; background: linear-gradient(90deg, rgb(54 128 237 / .22), rgb(54 128 237 / 0)); } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse-sep { background: linear-gradient(90deg, rgb(147 190 255 / .18), rgb(147 190 255 / 0)); } /* NEW / FOR YOU pills — kept narrow on purpose: the pill and the title share one ~170px lane, and "Saved Tools" wraps if the pill takes more than about 64px. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-badge-inline { flex: none; align-self: center; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .05em; text-transform: uppercase; padding: 3px 6px !important; border-radius: 999px !important; line-height: 1.1; white-space: nowrap; } /* ── AITX-5. BY CATEGORY — one row per category, with its blurb ── */ /* The blurbs are back (owner, 2026-09-18) and they are NOT clamped, so this column's height is now driven by how many lines they wrap to — which is why §AITX-1 hands this lane most of the fluid space. At the 1440px cap the longest (114 characters) sits on two lines and the column still finishes inside the sponsored column; at a 1248px panel it takes a third line and the panel grows by roughly 40px. Anything that narrows this track — a wider Browse, a wider By Pricing — costs a line × six rows, so re-measure the tracks rather than shrinking the type if this has to get shorter. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat { display: grid !important; grid-template-columns: minmax(0, 1fr); align-content: start; /* Cancels §6f's viewport cap: no scroll surface inside the menu. */ max-height: none !important; overflow: visible !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-colh, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link { grid-column: 1 / -1; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-item { padding: 12px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title { font-size: 13.6px !important; } /* No count pill in this column any more (owner, 2026-09-18): the markup stopped emitting .aitshd-mega-item-count here, so §6f's absolute corner placement and the 44px lane the title used to yield for it are both gone. `$cat['total']` is still in the payload if it is ever wanted back. */ /* Zone signature: a chevron that slides out of the name on hover — the affordance that says "this opens a listing". Drawn from two borders so it inherits the tone colour the title takes on hover. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-rail-label::after { content: ''; display: inline-block; vertical-align: middle; width: 5px; height: 5px; margin: -2px 0 0 8px; border-top: 1.7px solid currentColor; border-right: 1.7px solid currentColor; opacity: 0; transform: translateX(-4px) rotate(45deg); transition: opacity .18s var(--ease,ease), transform .18s var(--ease,ease); } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-item:hover .aitshd-mega-rail-label::after, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-item:focus-visible .aitshd-mega-rail-label::after { opacity: .9; transform: translateX(0) rotate(45deg); } /* ── AITX-6. BY PRICING — the filter lane ──────────────────────── */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-freetools .aitshd-mega-item .aitshd-mega-item-title { font-size: 13.6px !important; } /* ── AITX-7. "View all N categories" — the CTA bar ─────────────── */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 6px 0 0 !important; padding: 12px 14px !important; border-radius: 14px !important; font-size: 12.8px !important; font-weight: 800 !important; letter-spacing: .005em; position: static !important; transform: none !important; color: var(--aits-blue-dark) !important; background-color: rgb(54 128 237 / .10) !important; background-image: none !important; border: 1px solid var(--aits-blue-line) !important; box-shadow: none !important; transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), color .16s var(--ease,ease), box-shadow .16s var(--ease,ease); } /* Same language as the rows: no lift, the surface fills instead. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link:hover, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link:focus-visible { /* padding restated: the base rule slides padding-left to 16px on hover, which would shunt the label sideways inside a bar. */ padding: 12px 14px !important; color: #fff !important; background-color: #2A6FD6 !important; border-color: #2A6FD6 !important; box-shadow: 0 10px 22px -16px rgb(32 96 192 / .90) !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(54 128 237 / .32) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link { color: #A9CCFF !important; background-color: rgb(96 164 245 / .12) !important; border-color: rgb(96 164 245 / .28) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link:hover, body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link:focus-visible { color: #fff !important; background-color: #2A6FD6 !important; border-color: #2A6FD6 !important; box-shadow: none !important; } /* Same trap as the tiles: the dark hover rule above outranks the light keyboard ring, so the ring is restated for dark here. */ body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-view-all-link:focus-visible { box-shadow: 0 0 0 3px rgb(96 164 245 / .40) !important; } /* ── AITX-8. POPULAR RIGHT NOW — the trending rail ─────────────── */ /* Third pass, 2026-09-18, and this one changes the composition, not just the paint. What was wrong with the previous two: white chips on a white tray have no separation, six equal boxes holding a 30px logo and one short word are mostly air, and a solid blue block in the row outweighed the six tools it points at. What it is now: · the tray is RECESSED — a cool wash below the panel surface with an inset top shadow, so white cards sit ON it; · the CTA has moved into the head (see the blade), where it is a text link with a travelling arrow, leaving the row to the tools; · each card carries a real second line — the view count it is actually ranked by — so the row states why these six are here instead of asking for trust. */ /* Band: no surface of its own, just the separator. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular { padding: 14px 20px 18px !important; background: none !important; border-top: 1px solid var(--aits-line) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular { border-top-color: rgb(255 255 255 / .07) !important; } /* The tray, recessed: a cool blue-grey wash a step BELOW the panel's white, an inset top shadow instead of a highlight, and a hairline that leans blue. That contrast is the whole reason the white cards read as objects. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular::before { inset: 14px 20px 18px; border-radius: 20px; border: 1px solid rgb(54 128 237 / .12); background: radial-gradient(130% 220% at 100% 0%, rgb(54 128 237 / .10), transparent 60%), linear-gradient(180deg, #F3F7FD, #EDF2FA); box-shadow: inset 0 2px 4px rgb(15 23 42 / .045), inset 0 -1px 0 rgb(255 255 255 / .7); } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular::before { border-color: rgb(147 190 255 / .10); background: radial-gradient(130% 220% at 100% 0%, rgb(96 164 245 / .12), transparent 60%), linear-gradient(180deg, rgb(0 0 0 / .26), rgb(0 0 0 / .14)); box-shadow: inset 0 2px 5px rgb(0 0 0 / .35), inset 0 -1px 0 rgb(255 255 255 / .04); } /* Head: live dot · label · fading rule · "View all trending →" */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px 12px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular-head strong { display: inline-flex; align-items: center; gap: 9px; /* Stretches so its ::after rule can run to the CTA. A rule on the HEAD's ::after would land after the link instead of before it. */ flex: 1 1 auto; min-width: 0; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .16em !important; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--aits-blue-dark) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular-head strong { color: #93BEFF !important; } /* No mark before this label either (owner, 2026-09-18) — the red "live" dot and its radar ping are gone. As with the column heads it has to be switched OFF rather than deleted: the tools family, which this panel also belongs to, paints its own 14×3px gradient bar at `.aitshd-mega-panel-tools .aitshd-mega-popular-head strong::before` (line ~2337), so dropping the rule would leave a dash behind. The `aitxLivePing` keyframes went with it. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular-head strong::before { content: none !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular-head strong::after { content: ''; flex: 1 1 auto; height: 1px; margin-left: 3px; background: linear-gradient(90deg, rgb(54 128 237 / .26), rgb(54 128 237 / 0)); } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular-head strong::after { background: linear-gradient(90deg, rgb(147 190 255 / .22), rgb(147 190 255 / 0)); } /* The CTA is a link again, not a block — it belongs to the heading, and the six cards below are what the eye should land on. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 2px 5px 8px !important; border: 0 !important; border-radius: 8px !important; background: none !important; box-shadow: none !important; transform: none !important; filter: none !important; font-size: 12.4px !important; font-weight: 700 !important; letter-spacing: 0; white-space: nowrap; color: var(--aits-blue-dark) !important; transition: color .16s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more { color: #93BEFF !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more:hover, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more:focus-visible { transform: none !important; background: none !important; box-shadow: none !important; color: var(--aits-blue) !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(54 128 237 / .30) !important; } /* The arrow rides in its own disc so the link still reads as a control at 12px without needing a filled button. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more svg { width: 13px; height: 13px; box-sizing: content-box; padding: 4px; border-radius: 999px; background: rgb(54 128 237 / .12); transition: transform .18s var(--ease,ease), background-color .18s var(--ease,ease); } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more svg { background: rgb(96 164 245 / .16); } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more:hover svg { transform: translateX(3px); background: rgb(54 128 237 / .22); } /* The rail: six equal cards, nothing else competing for the row. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-popular-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 10px; padding: 0 18px 18px; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip { display: flex; align-items: center; justify-content: flex-start; gap: 11px !important; min-width: 0; padding: 10px 12px !important; border-radius: 14px !important; background-color: var(--aits-card) !important; background-image: none !important; border: 1px solid rgb(15 23 42 / .06) !important; box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 6px 14px -12px rgb(15 23 42 / .28) !important; transform: none !important; transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), box-shadow .16s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip { background-color: rgb(255 255 255 / .055) !important; border-color: rgb(255 255 255 / .09) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05) !important; } /* OFF: §6i's accent bar and sheen sweep, as on the column tiles. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip::before, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip::after { display: none !important; } /* HOVER — 2026-09-18, third attempt, and the reasoning matters: this strip does NOT take the columns' tonal hover. The nine-tone ramp is meaningful in By Category — a category owns its colour and wears it at rest. Here the tone is assigned by LOOP INDEX (`$aitshdTones[($tIdx + 2) % count]`), so it says nothing about the tool, and washing a card green because Midjourney happens to be third fights the tool's own brand mark sitting right next to it. Six different pastel washes across one row read as decoration, which is what the owner rejected. So: one brand ring, the same on all six. No tint, no movement, no per-card colour — the card is ringed and lifted out of the tray by light, and the tools keep their own colours. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:focus-visible { background-color: var(--aits-card) !important; background-image: none !important; border-color: rgb(54 128 237 / .55) !important; box-shadow: 0 0 0 3px rgb(54 128 237 / .12), 0 8px 20px -14px rgb(15 23 42 / .40) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover, body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:focus-visible { background-color: rgb(255 255 255 / .085) !important; border-color: rgb(96 164 245 / .48) !important; box-shadow: 0 0 0 3px rgb(96 164 245 / .16) !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:focus-visible { outline: none; } /* Logo plate. The tint only shows behind a single-letter fallback — a real logo covers it edge to edge — and it is a neutral brand wash here rather than the row's tone, for the same reason the hover is: an index-assigned colour next to a real brand mark is noise. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip-ico { width: 36px !important; height: 36px !important; border-radius: 11px !important; flex: none; font-size: 14px !important; /* The ring has to be an OUTER shadow, not §6i's inset one: the logo fills the plate at `border-radius: inherit`, so an inset ring paints underneath it and a white-background logo (ChatGPT, Sora, Llama) ends up with no edge at all against a white card. */ background-color: rgb(54 128 237 / .08) !important; color: var(--aits-blue-dark) !important; box-shadow: 0 0 0 1px rgb(15 23 42 / .09) !important; transform: none !important; transition: box-shadow .16s var(--ease,ease), background-color .16s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip-ico { background-color: rgb(96 164 245 / .12) !important; color: #93BEFF !important; box-shadow: 0 0 0 1px rgb(255 255 255 / .12) !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:focus-visible .aitshd-mega-pop-chip-ico { transform: none !important; background-color: rgb(54 128 237 / .14) !important; box-shadow: 0 0 0 1px rgb(54 128 237 / .45) !important; } /* §6i ships a dark RESTING plate rule at (0,4,1); a hover at (0,4,0) loses to it, so the dark states are always restated. */ body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-ico, body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:focus-visible .aitshd-mega-pop-chip-ico { background-color: rgb(96 164 245 / .20) !important; box-shadow: 0 0 0 1px rgb(96 164 245 / .45) !important; } /* Two-line body: name over the view count it is ranked by. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip-title { display: block; white-space: normal; overflow: visible; text-overflow: clip; font-size: 13.2px; font-weight: 700; line-height: 1.22; letter-spacing: -.012em; color: var(--aits-ink); } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip-meta { display: block; font-size: 10.8px; font-weight: 600; line-height: 1.3; letter-spacing: .005em; color: var(--aits-mut); transition: color .16s var(--ease,ease); } /* §6i turns the title --t-ink on hover; overridden to brand so the whole strip answers in one colour. The view count deliberately stays muted — two lines changing colour at once is the busyness this pass is removing. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-title, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:focus-visible .aitshd-mega-pop-chip-title { color: var(--aits-blue-dark) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:hover .aitshd-mega-pop-chip-title, body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip:focus-visible .aitshd-mega-pop-chip-title { color: #A9CCFF !important; } /* ── AITX-10. Responsive ───────────────────────────────────────── */ /* 1280–1471px viewport → a 1248–1440px panel. Browse and the sponsored track give back 18px and 20px, and By Pricing loses a little of its share, all of it handed to the category lane so its blurbs wrap as few times as the width allows. */ @media (max-width: 1471.98px) { .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 268px minmax(0, 1.22fr) minmax(0, .78fr) 340px; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse { padding: 16px 14px 16px 20px; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col { padding: 16px; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-desc { font-size: 11.4px !important; } } /* Defensive only — the nav that opens this panel is hidden below 1280px today. If that gate ever moves, the panel arrives already dressed for the narrower shell instead of bursting its lanes. */ @media (max-width: 1279.98px) { .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap { grid-template-columns: 240px minmax(0, 1.26fr) minmax(0, .74fr) 312px; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item { gap: 9px !important; padding: 10px !important; border-radius: 14px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-item { padding: 10px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-item :is(.aitshd-mega-item-count,.aitshd-mega-rail-count) { top: 9px !important; right: 9px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-icon { width: 38px !important; height: 38px !important; border-radius: 12px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col .aitshd-mega-item .aitshd-mega-item-icon { width: 34px !important; height: 34px !important; border-radius: 11px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-title { font-size: 13.8px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-freetools .aitshd-mega-item .aitshd-mega-item-title { font-size: 13.2px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-col-cat > .aitshd-mega-item .aitshd-mega-item-title { font-size: 13px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) .aitshd-mega-item .aitshd-mega-item-desc { font-size: 11.2px !important; } /* The rail is flex now, so the narrow step tunes the chip basis rather than a grid track. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip { flex-basis: 132px; padding: 8px 10px !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-more { padding: 8px 13px !important; } } /* ── AITX-11. Motion guard ─────────────────────────────────────── */ /* No coarse-pointer guard is needed any more: the hover language has no transform left to get stuck after a tap. */ @media (prefers-reduced-motion: reduce) { .aitshd[data-mega-aitools-open="1"] .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col) > * { animation: none !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap :is(.aitshd-mega-item,.aitshd-mega-view-all-link), .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-item .aitshd-mega-item-icon, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-rail-label::after, .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-pop-chip { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════ §MEGFIT — the panels fit the room they actually have (2026-09-18) ═══════════════════════════════════════════════════════════════ THE BUG. Every panel capped itself at max-height: calc(100dvh - var(--hd-h) - 30px) which assumes the bar starts at the top of the viewport. It often does not — the announcement strip and the verify-email banner sit above it and push the panels down by up to ~80px — so the cap believed in room that was not there and the last thing in each panel, the Popular / Featured / Trending rail, was cut off at the bottom edge. THE FIX, in two halves: 1. the blade's fitPanels() measures the real gap between the bar's bottom and the viewport floor, publishes it as --mega-max-h, and buckets it into data-mega-fit = roomy | snug (<800px) | tight (<700px). It re-runs on open, on resize and on scroll, because the banners scroll away and the room grows back; 2. the cap below reads that measurement, and the two buckets compact spacing so the rail still fits instead of being clipped or handed a scrollbar. WHAT COMPACTS, IN ORDER: padding and gaps first (snug), then the type and icon scale (tight). Nothing is hidden, no column is dropped and the composition is identical — the panel just draws tighter when the window is short. On a roomy screen not one of these rules applies. Specificity: `.aitshd[data-mega-fit="…"]` is (0,2,0) before the panel chain even starts, so these land above §MEGX and §AITX without needing !important on every line. Keep this block last. */ /* The measured cap, with the old formula as the fallback for the first paint before fitPanels() has run. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) { max-height: var(--mega-max-h, calc(100dvh - var(--hd-h) - 30px)); } /* ═══════════════════════════════════════════════════════════════ §MEGAIR — one continuous spacing scale, solved per panel ═══════════════════════════════════════════════════════════════ REPLACES the snug / tight buckets and the two squeeze levels that used to live here (§MEGFIT-2 … §MEGFIT-5, deleted 2026-09-18). WHY THEY HAD TO GO. Those five steps quantised the room. The ladder measured on the AI Directory panel was roomy 856px · snug 766 · tight 658 · +sq1 588 · +sq2 571 so a window with 760px of allowance fell to `tight` — it drew at 658px and threw away 102px of room it actually had. That is what "congested with no space and gaps" looks like: not a spacing scale that is too small, a scale that jumps in ~90px steps and always lands on the small side of the one you could afford. WHAT REPLACES IT. Every spacing value below is a linear ramp on one inherited number, `--mega-air`, 0 … 1: padding: calc(4px + 22px * var(--mgas)); At 1 the panel is airier than the old `roomy` ever was (column padding 26 vs 18, row gap 14 vs 8, tile padding 14 vs 12); at 0 it is the old squeeze level 2 exactly, so nothing is lost at the bottom of the range. The blade solves the value on open: it measures the panel at air 1 and at air 0 and interpolates the largest value that still fits the measured cap, then corrects once. Every window gets the most air its height allows instead of the nearest bucket below it. WHAT DOES NOT SCALE. The sponsored unit (`.adx`) is untouched, as always — only the padding of the column around it moves. No row is hidden, no column dropped, no label clamped; this is the same composition drawn tighter or looser. `--mega-fit` is still published by the blade and still keys the prefix here, so these rules keep the (0,7,0) specificity the old bucket rules needed to clear §6l/§6m and §MEGX. The bucket VALUE (roomy/snug/tight) is now only a debugging label — nothing reads it. Keep this block last but one; §AITX-9 follows it and owns the AI Directory's Browse CTA on the same ramp. THE FLOOR IS LOAD-BEARING. air = 0 has to be at least as tight as the squeeze level 2 it replaced, or a window that used to fit starts showing a scrollbar. It was 7px looser on the first pass and Deals — the densest panel, 803px of content in one column — overflowed by 5px at a 635px cap. Column padding 3, row gap 2, tile padding 4: measured, not guessed. Raise any of these and re-measure Deals at a 635px allowance before believing it. THE TOP OF THE RAMP IS CAPPED BY THE TEXT LANE, not by taste. The Browse rail is a fixed 286px. Every horizontal pixel spent on column padding, tile padding, the icon plate or the icon-to-text gap comes straight out of the label's width, and the rows that also carry a badge ("Newest Tools" + NEW) are the first to break. THE ROW GAP IS DELIBERATELY SMALL — 2px to 6px, not 2 to 14. The first pass took it to 14px at air 1 and the owner called the cards too far apart (2026-09-18, second look). The air that the panels gained is meant to live in the COLUMN padding and the tile's own breathing room, not in the space between tiles: at a 72px card a 14px gap reads as five separate widgets, a 6px gap reads as one list. The browse-rail divider was trimmed with it — at air 1 it was opening a 45px hole (10 + 7 + two card gaps). At padding-x 23 / tile-x 16 / plate 44 / gap 14 the lane fell to 160px and "Recently added tools" wrapped to two lines. Backing off fixed Tools but Discover — four fluid columns of long second lines — still went from 3 wrapped labels at air 0.6 to 17 at air 1. So the ramp is now DELIBERATELY ASYMMETRIC. Air 1's HORIZONTAL metrics land on the old `roomy` values (column padding-x 19, tile padding-x 12, plate 36/42, second line 11.6px) — no label has less room than it used to have, anywhere on the ramp. All of the new air is VERTICAL, which is what was actually asked for: column padding 26 against 18, row gap 14 against 8, heading gap 14 against 6. Spend a horizontal pixel here and you are taking it from a label; spend a vertical one and you are taking it from the solve, which will just hand you a lower air number. */ /* The ramp's carrier. Declared on the panel so every descendant inherits it, with 1 as the fallback for the first paint before the blade has solved anything. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) { /* Three carriers off one solved number, because the eye does not read all spacing the same. --mgaf (fast, air^0.6) drives what SEPARATES things: column padding, the gap between rows, the rail's insets. --mgas (slow, air^1.6) drives what things are MADE OF: tile padding, icon plates, type. So when a short window forces air down to 0.3, the gaps keep 49% of their travel while the tiles keep 14% — the panel reads as spaced small cards instead of a solid block. Both ends are identical to the linear ramp (0 and 1 map to 0 and 1), so the tightest state is unchanged and the no-scrollbar floor still holds. */ --mga: var(--mega-air, 1); --mgaf: var(--mega-air-fast, 1); --mgas: var(--mega-air-slow, 1); } /* The solve sets --mega-air twice in one tick and reads the height between them. Several kits in this sheet carry `transition: all`, which would hand the second read a half-animated padding and put the interpolation out by tens of pixels. The blade adds this class for the duration of the measurement only. */ .aitshd-mega-panel.is-air-solving, .aitshd-mega-panel.is-air-solving * { transition: none !important; animation: none !important; } /* ── Columns ───────────────────────────────────────────────────── */ .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col,.aitshd-mega-subcols) { padding: calc(3px + 23px * var(--mgaf)) calc(10px + 9px * var(--mgaf)) !important; gap: calc(2px + 4px * var(--mgaf)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-colh { margin-bottom: calc(2px + 12px * var(--mgaf)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-browse-sep { margin: calc(1px + 4px * var(--mgaf)) 4px calc(1px + 3px * var(--mgaf)) !important; } /* ── Rows ──────────────────────────────────────────────────────── */ .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap :is(.aitshd-mega-browse,.aitshd-mega-col,.aitshd-mega-subcols) .aitshd-mega-item { padding: calc(4px + 10px * var(--mgas)) calc(8px + 4px * var(--mgas)) !important; gap: calc(8px + 4px * var(--mgas)) !important; border-radius: calc(12px + 4px * var(--mgas)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-icon { width: calc(28px + 14px * var(--mgas)) !important; height: calc(28px + 14px * var(--mgas)) !important; border-radius: calc(9px + 4px * var(--mgas)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-col .aitshd-mega-item .aitshd-mega-item-icon { width: calc(24px + 12px * var(--mgas)) !important; height: calc(24px + 12px * var(--mgas)) !important; border-radius: calc(8px + 4px * var(--mgas)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-item .aitshd-mega-item-icon svg { width: calc(15px + 4px * var(--mgas)) !important; height: calc(15px + 4px * var(--mgas)) !important; } /* Type moves on a deliberately NARROW ramp. It has to move — the old `tight` bucket only worked because it scaled type — but a wide ramp changes where labels wrap, and a line appearing or disappearing mid-solve is what would make the interpolation non-linear. 1.4px of travel keeps every label on the same number of lines across the whole range. */ .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-item .aitshd-mega-item-title { font-size: calc(12.8px + 1.4px * var(--mgas)) !important; line-height: 1.26 !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-item .aitshd-mega-item-title { font-size: calc(13.4px + 1.4px * var(--mgas)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-item .aitshd-mega-item-desc { font-size: calc(11.2px + .4px * var(--mgas)) !important; line-height: 1.32 !important; margin-top: calc(1px + 1px * var(--mgas)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap .aitshd-mega-view-all-link { padding: calc(8px + 5px * var(--mgas)) calc(11px + 5px * var(--mgas)) !important; font-size: calc(12.2px + .8px * var(--mgas)) !important; margin-top: calc(3px + 5px * var(--mgas)) !important; } /* ── Sponsored column: the COLUMN's padding only ───────────────── */ /* The `.adx` unit inside it is a fixed 437px and is not ours to touch; this is the gutter around it. */ .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-featured-col { padding: calc(10px + 12px * var(--mgaf)) calc(14px + 8px * var(--mgaf)) calc(10px + 12px * var(--mgaf)) calc(12px + 6px * var(--mgaf)) !important; gap: calc(8px + 6px * var(--mgaf)) !important; } /* ── The closing rail (Popular / Featured / Trending / Guides) ─── */ .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular,.aitshd-dm-feat,.aitshd-dc-trending,.aitshd-rc-guides) { margin: 0 calc(10px + 12px * var(--mgaf)) calc(2px + 14px * var(--mgaf)) !important; border-radius: calc(14px + 4px * var(--mgas)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-head,.aitshd-dm-feat-head,.aitshd-dc-trending-head,.aitshd-rc-guides-head) { padding: calc(3px + 9px * var(--mgaf)) calc(10px + 8px * var(--mgaf)) calc(3px + 5px * var(--mgaf)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-popular-row,.aitshd-mega-models-popular-row,.aitshd-lm-popular-row,.aitshd-dm-feat-grid,.aitshd-dc-trending-row,.aitshd-rc-guides-row) { padding: 0 calc(10px + 8px * var(--mgaf)) calc(4px + 12px * var(--mgaf)) !important; gap: calc(5px + 7px * var(--mgaf)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-quick-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide) { padding: calc(5px + 6px * var(--mgas)) calc(8px + 5px * var(--mgas)) !important; border-radius: calc(11px + 3px * var(--mgas)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-quick-ico,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { width: calc(24px + 10px * var(--mgas)) !important; height: calc(24px + 10px * var(--mgas)) !important; border-radius: calc(8px + 2px * var(--mgas)) !important; } .aitshd[data-mega-fit] .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-title,.aitshd-mmg-pop-name,.aitshd-lm-pop-name,.aitshd-dm-quick-label,.aitshd-dc-trending-label,.aitshd-rc-guide-title) { font-size: calc(12px + 1.4px * var(--mgas)) !important; line-height: 1.22 !important; } /* ═══════════════════════════════════════════════════════════════ §AITX-9 — "List Your AI Tool" as the Browse rail's tail card ─────────────────────────────────────────────────────────────── 2026-09-18, owner request: the CTA tile moved out of the sponsored column and into Column 1, under the shortcuts. Nothing about the card's IDENTITY changes — it keeps the dashed brand-blue border and tinted gradient from §AITX (line ~8424), the uppercase blue label, the gradient rocket plate and the "Submit Now →" link with its sliding arrow. Only the METRICS change, and they have to: the lane is 242px here (280px track less 22+16 padding) against 318px in the sponsored column, so the 78px plate the old slot used would leave the headline about 120px and break "Get your AI tool listed in front of thousands of users." over five lines. A 46px plate keeps it at three. Its metrics ride §MEGAIR's --mga ramp like everything else in the panel, so it loosens and tightens with its neighbours instead of staying a fixed size while the rail around it breathes. The margin above it is a FIXED ramp value, NOT `margin-top: auto`, NOT `margin-top: auto`. Auto was the first attempt — it pins the card to the column floor the way .aitshd-dc-promo does in the Discover mega, and logged IN that reads well (18px of air). But a signed-out visitor has no "Saved Tools" row and no separator, so the rail loses 61px and the auto margin opens a 79px hole in the middle of Column 1 while By Category beside it is still full. Measured in Chrome, both states. By Pricing already ends ~90px above the panel floor, so a rail that stops short is the house pattern here; a hole in the middle of one is not. Specificity: (0,5,0) + !important, and last in the file, so it clears §6l/§6m and §MEGX. It deliberately stays BELOW the §MEGFIT-5 squeeze rules at (0,6,0) — when a short window forces level 2, the squeeze must still be able to take the plate to 32px and the padding to 8px. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article { margin-top: calc(6px + 6px * var(--mgaf)) !important; padding: calc(8px + 6px * var(--mgas)) calc(8px + 5px * var(--mgas)) calc(7px + 5px * var(--mgas)) !important; gap: calc(5px + 4px * var(--mgas)) !important; border-radius: calc(13px + 3px * var(--mgas)) !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article-label { font-size: 9.5px !important; letter-spacing: .1em !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article-row { gap: calc(7px + 4px * var(--mgas)) !important; align-items: center !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article-thumb { width: calc(32px + 14px * var(--mgas)) !important; height: calc(32px + 14px * var(--mgas)) !important; border-radius: calc(10px + 3px * var(--mgas)) !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article-thumb svg { width: calc(17px + 5px * var(--mgas)) !important; height: calc(17px + 5px * var(--mgas)) !important; } /* NOT CLAMPED. The base card is a -webkit-box with line-clamp 2/3; in this lane the headline needs three lines and the owner's rule for this panel is that no label is ever cut. Switching `display` off -webkit-box is what disables the clamp — removing the line-clamp alone leaves the box intact. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article-title { display: block !important; overflow: visible !important; -webkit-line-clamp: none !important; font-size: calc(12.2px + .7px * var(--mgas)) !important; line-height: 1.38 !important; font-weight: 800 !important; } .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article-more { font-size: calc(11px + .5px * var(--mgas)) !important; margin-top: calc(3px + 2px * var(--mgas)) !important; } /* NO NARROW BRANCH, ON PURPOSE. The rail steps 286 → 268 → 240px at §AITX-1's 1471.98 / 1279.98 breakpoints, and the headline goes from two lines to three below 1472px. Measured in Chrome at 1440 / 1400 / 1248 panel widths: nothing clips and nothing overflows sideways at any of them, and a 42px plate with a 12.5px headline was tried and changed neither the line count nor the 129px height — three lines of text are taller than the plate either way, so the card's height is set by the copy, not by the chrome. One set of metrics for the whole reachable range (1280px up; the nav is display:none below that) is the simpler thing to keep true. */ /* Dark twins. §AITX pins the label and the "Submit Now" link to --aits-blue-dark (#2060C0) with !important, which outranks the tools family's own dark rules at (0,3,1) — so after dark both read as navy-on-near-black. Measured in Chrome: label and link both computed rgb(32,96,192) on a #17171B card. Restate them in --aits-blue-light, the same twin the rest of this panel uses. */ body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article :is(.aitshd-mega-article-label,.aitshd-mega-article-more) { color: var(--aits-blue-light) !important; } /* Hover: NOTHING MOVES. §AITX's rule for this card still lifts it 2px (it was written when the card lived alone in the sponsored column). In the Browse rail it now sits under five shortcut tiles that §AITX deliberately holds still — the owner rejected the lift/sheen/rotate language twice — so a card that jumps while its neighbours do not is the odd one out. Same response as the rest of the panel instead: the border warms to brand and a soft brand halo comes up under it. */ .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article:hover { transform: none !important; border-color: var(--aits-blue) !important; box-shadow: 0 0 0 3px rgb(54 128 237 / .10), 0 10px 22px -16px rgb(15 23 42 / .30) !important; } body.theme-dark .aitshd-mega-panel-aitools.aitshd-mega-panel-tools .aitshd-mega-wrap .aitshd-mega-browse .aitshd-mega-article:hover { border-color: rgb(96 164 245 / .70) !important; box-shadow: 0 0 0 3px rgb(96 164 245 / .12), 0 10px 22px -16px rgb(0 0 0 / .55) !important; } /* The plate keeps its own §6 rotate-and-scale on hover; that one is a 46px chip reacting to the pointer, not the row shifting under it, and it is the same gesture the Discover promo's rocket makes. */ /* ── Badges never stretch ────────────────────────────────────── §MEGX-5 un-clamps labels with `display: block !important` on `.aitshd-mega-item-title > span`. Four rows nested the badge inside the title, so that rule caught it as well and turned a "FREE" pill into a full-width bar under the heading (AI Learn's Free AI Courses row, and the same shape in Deals, Resources and the Blog mega). Those three mega rows now put the badge on the row's right edge like every other panel, and §MEGX-5 skips it — but this is the backstop, because the next row someone adds will nest it again. A badge is always a shrink-to-fit pill. */ .aitshd-mega-panel .aitshd-mega-badge-inline, .aitshd-bmg-row .aitshd-mega-badge-inline { display: inline-flex !important; width: auto !important; flex: 0 0 auto !important; align-self: center !important; } /* ═══════════════════════════════════════════════════════════════ §MEGBG — one surface for all seven panels (2026-09-18) ═══════════════════════════════════════════════════════════════ Owner: the AI Directory's blue gradient background, on every other mega menu, light and dark. Supersedes §DEALX, which did this for the Deals panel alone a few hours earlier. WHAT THE SIX WERE DOING INSTEAD, measured: · Tools and AI Models had NO panel background at all — just `--tm-*` / `--mm-*` accent tokens and the flat card colour. That is why they read as plain white next to the directory. · AI Learn, Discover and Resources each had a wash a tenth of the strength (.05/.045 against .13/.11/.12) with an off-palette tail — cyan on Learn and Discover, indigo on Resources. This family's palette is `--aits-blue*` only. · None of them had the constellation. · Column seams were flat `--aits-line` grey, which reads as a hard rule once the panel behind it is tinted. SURFACE ONLY. Spacing is §MEGAIR's, and a padding here would either lose on the next open or win and break the fit. These panels all keep their own `overflow-y: auto` safety valve, so unlike `.aitshd-mega-panel-aitools` they must NOT take `overflow: hidden` — the constellation is clipped to the padding box anyway, which is what we want. The `:is()` list contains `.aitshd-mega-panel-tools`, which the AI Directory panel also carries, so these rules land on it too and outrank §AITX's own (0,3,0) against (0,1,0)). Every value here is copied from §AITX for exactly that reason: on that one panel this block has to be a no-op. Change a number here and change it in §AITX, or the two drift apart silently. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) { background: radial-gradient(56% 60% at 6% 4%, rgba(54, 128, 237, .13), transparent 62%), radial-gradient(50% 55% at 96% 4%, rgba(96, 164, 245, .11), transparent 60%), radial-gradient(48% 58% at 100% 100%, rgba(30, 79, 184, .12), transparent 62%), var(--aits-card) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) { background: radial-gradient(56% 60% at 6% 4%, rgba(96, 164, 245, .18), transparent 62%), radial-gradient(50% 55% at 96% 4%, rgba(147, 190, 255, .14), transparent 60%), radial-gradient(48% 58% at 100% 100%, rgba(96, 164, 245, .12), transparent 62%), var(--aits-card) !important; } /* Constellation, top-right. Decorative, generated, brand-tinted. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)::before { content: ''; position: absolute; top: 8px; right: 18px; width: 220px; height: 90px; pointer-events: none; opacity: .55; z-index: 0; background-image: radial-gradient(circle at 12% 40%, currentColor 1px, transparent 1.4px), radial-gradient(circle at 34% 68%, currentColor .8px, transparent 1.2px), radial-gradient(circle at 58% 28%, currentColor 1.2px, transparent 1.6px), radial-gradient(circle at 78% 62%, currentColor .8px, transparent 1.2px), radial-gradient(circle at 92% 40%, currentColor 1.1px, transparent 1.4px); color: rgba(54, 128, 237, .45); } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources)::before { color: rgba(147, 190, 255, .55); } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap { position: relative; z-index: 1; } /* Seams. Learn, Discover, Resources and Deals drew theirs as a background-image on the column itself, which cannot fade the way a pseudo-element can; Tools and Models already had the pseudo but in flat grey. Kill the first, restate the second in brand blue. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col + .aitshd-mega-col { background-image: none !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-browse, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-col, .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-featured-col { position: relative; border-left: 0 !important; border-right: 0 !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap > * + *::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; pointer-events: none; background: linear-gradient(180deg, rgb(54 128 237 / 0), rgb(54 128 237 / .20) 18%, rgb(54 128 237 / .20) 82%, rgb(54 128 237 / 0)) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap > * + *::before { background: linear-gradient(180deg, rgb(147 190 255 / 0), rgb(147 190 255 / .16) 18%, rgb(147 190 255 / .16) 82%, rgb(147 190 255 / 0)) !important; } /* Wash down the first column, so the lead rail reads as the lead rail. Keyed on :first-child rather than .aitshd-mega-browse because AI Learn's first column is a plain .aitshd-mega-col — it has no browse rail — and would otherwise be the one panel missing it. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap > :first-child { background-image: linear-gradient(180deg, rgb(54 128 237 / .055), rgb(54 128 237 / 0) 54%) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) .aitshd-mega-wrap > :first-child { background-image: linear-gradient(180deg, rgb(96 164 245 / .07), rgb(96 164 245 / 0) 54%) !important; } /* ── §MEGAIR-2. The two in-column cards that are not standard rows ── §MEGAIR ramps `.aitshd-mega-item`, which is every row in six of the seven panels. Two blocks sit inside a column and are NOT that: Deals' five `.aitshd-dm-deal` cards and Discover's `.aitshd-dc-promo`. Leaving them off the ramp was actively harmful, not just a missed opportunity. The solve lowers air until the TALLEST column fits; an uncompressible column means air keeps falling while only the other columns give way. Deals showed it exactly: at air 0.16 the Browse rail was squeezed to 44px rows and stopped 170px short of the panel floor, while the Popular column next to it still drew five fixed 84px cards. Everything that shares a panel has to compress together or the panel tears. (`.adx` is the sponsored unit and is never touched.) */ .aitshd-mega-panel-deals .aitshd-mega-wrap .aitshd-dm-deal { padding: calc(5px + 9px * var(--mgas)) calc(7px + 5px * var(--mgas)) !important; gap: calc(7px + 4px * var(--mgas)) !important; border-radius: calc(12px + 4px * var(--mgas)) !important; grid-template-columns: calc(28px + 12px * var(--mgas)) minmax(0, 1fr) !important; } /* The column's own gap already separates these; the extra margin was double-spacing them and cost 30px at the floor for nothing. */ .aitshd-mega-panel-deals .aitshd-mega-wrap .aitshd-dm-deal + .aitshd-dm-deal { margin-top: 0 !important; } .aitshd-mega-panel-deals .aitshd-mega-wrap .aitshd-dm-deal-mark { width: calc(28px + 12px * var(--mgas)) !important; height: calc(28px + 12px * var(--mgas)) !important; border-radius: calc(9px + 3px * var(--mgas)) !important; font-size: calc(12px + 2px * var(--mgas)) !important; } .aitshd-mega-panel-discover .aitshd-mega-wrap .aitshd-dc-promo { padding: calc(9px + 7px * var(--mgas)) calc(10px + 6px * var(--mgas)) calc(8px + 6px * var(--mgas)) !important; border-radius: calc(14px + 4px * var(--mgas)) !important; } .aitshd-mega-panel-discover .aitshd-mega-wrap .aitshd-dc-promo-rocket { width: calc(32px + 12px * var(--mgas)) !important; height: calc(32px + 12px * var(--mgas)) !important; } .aitshd-mega-panel-discover .aitshd-mega-wrap .aitshd-dc-promo-cta { margin-top: calc(6px + 6px * var(--mgas)) !important; padding: calc(5px + 4px * var(--mgas)) calc(11px + 5px * var(--mgas)) !important; } /* ═══════════════════════════════════════════════════════════════ §RAILX — Featured Deals and Featured Guides speak §AITX-8 ═══════════════════════════════════════════════════════════════ Owner, 2026-09-18: redesign the closing rails of the Deals and Resources panels. Both are now the card the owner accepted on the AI Directory's POPULAR RIGHT NOW strip, on its third attempt — so this is not a new design, it is the house one finally applied to the last two rails that predate it. WHAT THE HOUSE CARD IS, and why each part of it: · flat card surface, 1px hairline, two-part shadow — the card is lifted out of the tray by light, not by a tint; · NOTHING MOVES on hover. The lift + the accent-bar wipe were rejected twice on the AI Directory strip: five cards in a row twitching as the pointer crosses them is the busyness the owner keeps asking to remove; · ONE brand ring for all five cards. Both rails had a per-card `data-tone` assigned by LOOP INDEX, which means it says nothing about the guide or the deal, and five pastel washes next to five real brand logos is noise. The tone attributes stay in the markup, they just stop painting; · a neutral brand plate with an OUTER ring. Never `inset` — on the Deals rail the logo fills the plate at `border-radius: inherit`, so an inset ring paints underneath it and a white-background logo ends up edgeless. Spacing is NOT here. §MEGAIR already ramps both rails' margins, head, row padding, card padding and plate size; a fixed padding in this block would fight the fit solve. Paint only. */ /* ── Card surface ─────────────────────────────────────────────── */ .aitshd-mega-panel-deals .aitshd-dm-feat-card, .aitshd-mega-panel-resources .aitshd-rc-guide { display: flex !important; align-items: center !important; min-width: 0; border-radius: 14px !important; background-color: var(--aits-card) !important; background-image: none !important; border: 1px solid rgb(15 23 42 / .06) !important; box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 6px 14px -12px rgb(15 23 42 / .28) !important; transform: none !important; overflow: hidden; transition: background-color .16s var(--ease,ease), border-color .16s var(--ease,ease), box-shadow .16s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel-deals .aitshd-dm-feat-card, body.theme-dark .aitshd-mega-panel-resources .aitshd-rc-guide { background-color: rgb(255 255 255 / .055) !important; border-color: rgb(255 255 255 / .09) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05) !important; } /* OFF: the Deals accent-bar wipe and the Guides tone strip. */ .aitshd-mega-panel-deals .aitshd-dm-feat-card::after, .aitshd-mega-panel-resources .aitshd-rc-guide::before { display: none !important; content: none !important; } /* ── Hover: one ring, no movement ─────────────────────────────── */ .aitshd-mega-panel-deals .aitshd-dm-feat-card:hover, .aitshd-mega-panel-deals .aitshd-dm-feat-card:focus-visible, .aitshd-mega-panel-resources .aitshd-rc-guide:hover, .aitshd-mega-panel-resources .aitshd-rc-guide:focus-visible { transform: none !important; background-color: var(--aits-card) !important; border-color: rgb(54 128 237 / .55) !important; box-shadow: 0 0 0 3px rgb(54 128 237 / .12), 0 8px 20px -14px rgb(15 23 42 / .40) !important; outline: none; } body.theme-dark .aitshd-mega-panel-deals .aitshd-dm-feat-card:hover, body.theme-dark .aitshd-mega-panel-deals .aitshd-dm-feat-card:focus-visible, body.theme-dark .aitshd-mega-panel-resources .aitshd-rc-guide:hover, body.theme-dark .aitshd-mega-panel-resources .aitshd-rc-guide:focus-visible { background-color: rgb(255 255 255 / .085) !important; border-color: rgb(96 164 245 / .48) !important; box-shadow: 0 0 0 3px rgb(96 164 245 / .16) !important; } /* ── Plate ────────────────────────────────────────────────────── */ .aitshd-mega-panel-deals .aitshd-dm-feat-mark, .aitshd-mega-panel-resources .aitshd-rc-guide-ico { flex: none; border-radius: 11px !important; background-color: rgb(54 128 237 / .08) !important; background-image: none !important; color: var(--aits-blue-dark) !important; box-shadow: 0 0 0 1px rgb(15 23 42 / .09) !important; transform: none !important; transition: box-shadow .16s var(--ease,ease), background-color .16s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel-deals .aitshd-dm-feat-mark, body.theme-dark .aitshd-mega-panel-resources .aitshd-rc-guide-ico { background-color: rgb(96 164 245 / .12) !important; color: #93BEFF !important; box-shadow: 0 0 0 1px rgb(255 255 255 / .12) !important; } .aitshd-mega-panel-deals .aitshd-dm-feat-card:hover .aitshd-dm-feat-mark, .aitshd-mega-panel-resources .aitshd-rc-guide:hover .aitshd-rc-guide-ico { transform: none !important; background-color: rgb(54 128 237 / .14) !important; box-shadow: 0 0 0 1px rgb(54 128 237 / .45) !important; } body.theme-dark .aitshd-mega-panel-deals .aitshd-dm-feat-card:hover .aitshd-dm-feat-mark, body.theme-dark .aitshd-mega-panel-resources .aitshd-rc-guide:hover .aitshd-rc-guide-ico { background-color: rgb(96 164 245 / .20) !important; box-shadow: 0 0 0 1px rgb(96 164 245 / .45) !important; } /* ── Copy ─────────────────────────────────────────────────────── */ .aitshd-mega-panel-deals .aitshd-dm-feat-body, .aitshd-mega-panel-resources .aitshd-rc-guide-body { display: flex !important; flex-direction: column !important; min-width: 0; gap: 2px !important; } /* NOT CLAMPED. The guide title was a 2-line -webkit-box and the category line a 1-line one; this panel's rule is that no label is ever cut, and switching `display` off -webkit-box is what disables a clamp — dropping line-clamp alone leaves the box. */ .aitshd-mega-panel-deals .aitshd-dm-feat-name, .aitshd-mega-panel-resources .aitshd-rc-guide-title { display: block !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; -webkit-line-clamp: none !important; font-size: 13.2px !important; font-weight: 700 !important; line-height: 1.22 !important; letter-spacing: -.012em; color: var(--aits-ink); transition: color .16s var(--ease,ease); } .aitshd-mega-panel-resources .aitshd-rc-guide-desc { display: block !important; overflow: visible !important; -webkit-line-clamp: none !important; margin-top: 0 !important; font-size: 10.8px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--aits-mut) !important; } .aitshd-mega-panel-deals .aitshd-dm-feat-prices { font-size: 10.8px !important; line-height: 1.3; gap: 2px 6px !important; } .aitshd-mega-panel-deals .aitshd-dm-feat-card:hover .aitshd-dm-feat-name, .aitshd-mega-panel-resources .aitshd-rc-guide:hover .aitshd-rc-guide-title { color: var(--aits-blue-dark) !important; } body.theme-dark .aitshd-mega-panel-deals .aitshd-dm-feat-card:hover .aitshd-dm-feat-name, body.theme-dark .aitshd-mega-panel-resources .aitshd-rc-guide:hover .aitshd-rc-guide-title { color: #A9CCFF !important; } /* ── The discount pill ────────────────────────────────────────── */ /* It now sits INSIDE the price line (blade change), so it no longer needs align-self and no longer lands on the deal name. Kept rose because a saving is real data and rose is what this site marks a saving with — but flattened to a tint pill. The gradient and the coloured drop shadow made five stickers shout over five prices. */ .aitshd-mega-panel-deals .aitshd-dm-feat-off { align-self: baseline !important; background: var(--tint-rose-bg) !important; color: var(--tint-rose-ink) !important; box-shadow: none !important; font-size: 9.5px !important; padding: 2px 6px !important; letter-spacing: .05em; } body.theme-dark .aitshd-mega-panel-deals .aitshd-dm-feat-off { background: rgb(244 63 94 / .18) !important; color: #FDA4AF !important; } /* ═══════════════════════════════════════════════════════════════ §RAILICO — the closing rails' plates take the column tones ═══════════════════════════════════════════════════════════════ Owner, 2026-09-18: the icon plates in Popular Right Now, Popular Models, Featured Deals, Trending Searches and Featured Guides should be coloured like the AI Directory's BROWSE column icons, not the one flat brand blue they all shared. Six rails, seven panels, one rule set. It rides §MEGX's existing `--t` / `--t-ink` tone tokens, so there is ONE palette in this file and the rails cannot drift from the columns. §MEGX's token list missed two of the six rail cards (.aitshd-dm-feat-card and .aitshd-rc-guide), so they are added below with the same values rather than given a second palette of their own. THE RING IS AN OUTER SHADOW, never `inset`. The Browse column uses inset and can: its icon is an inline SVG. Three of these rails put a real logo in the plate at `border-radius: inherit`, and an inset ring paints UNDERNEATH it — a white-background logo (ChatGPT, Sora, Llama) ends up with no edge at all. Same trap §AITX-8 hit. A PLATE HOLDING A REAL BRAND LOGO STAYS NEUTRAL. `data-tone` on these cards is assigned by LOOP INDEX — it says nothing about the tool — and an arbitrary amber ring around OpenAI's mark is the noise the owner rejected twice on this very strip. The tint behind a full-bleed is invisible anyway, so the tone would buy nothing there and cost that. `:has(img)` is the guard; every plate that draws OUR glyph or monogram — which is most of them — takes the tone. */ /* Tone tokens for the two rail cards §MEGX's list did not name. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide) { --t: 37 99 235; --t-ink: #1D4ED8; --t-on: #fff; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="indigo"] { --t: 99 102 241; --t-ink: #4338CA; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="violet"] { --t: 139 92 246; --t-ink: #0369A1; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="emerald"] { --t: 16 185 129; --t-ink: #047857; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="amber"] { --t: 245 158 11; --t-ink: #B45309; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="rose"] { --t: 244 63 94; --t-ink: #BE123C; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="cyan"] { --t: 6 182 212; --t-ink: #0E7490; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="pink"] { --t: 236 72 153; --t-ink: #BE185D; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="slate"] { --t: 100 116 139; --t-ink: #334155; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide) { --t: 96 164 245; --t-ink: #A9CCFF; --t-on: #0A1020; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="indigo"] { --t: 129 140 248; --t-ink: #BFC7FE; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="violet"] { --t: 167 139 250; --t-ink: #D3C6FE; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="emerald"] { --t: 52 211 153; --t-ink: #8CF0C4; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="amber"] { --t: 251 191 36; --t-ink: #FDDC7A; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="rose"] { --t: 251 113 133; --t-ink: #FEBAC3; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="cyan"] { --t: 34 211 238; --t-ink: #8FEDFA; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="pink"] { --t: 244 114 182; --t-ink: #FBBCDA; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-dm-feat-card,.aitshd-rc-guide)[data-tone="slate"] { --t: 148 163 184; --t-ink: #D6DEE8; } /* The plate. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { background-color: rgb(var(--t, 37 99 235) / .18) !important; background-image: none !important; color: var(--t-ink, #1D4ED8) !important; box-shadow: 0 0 0 1px rgb(var(--t, 37 99 235) / .26) !important; transform: none !important; transition: background-color .16s var(--ease,ease), box-shadow .16s var(--ease,ease) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { background-color: rgb(var(--t, 96 164 245) / .22) !important; /* The INK has to be restated after dark or it is not the tone. Several earlier blocks pin these plates to #93BEFF at (0,4,1); a light rule at (0,4,0) loses to them however late it sits, so leaving `color` out of this twin silently painted every plate brand blue at night while its background was correctly toned. Measured: violet plate, bg rgba(167,139,250,.22), ink #93BEFF. */ color: var(--t-ink, #A9CCFF) !important; box-shadow: 0 0 0 1px rgb(var(--t, 96 164 245) / .32) !important; } /* Hover deepens the card's OWN tone. Jumping to brand blue here would read as a bug now that the resting plate is coloured. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico), .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):focus-visible :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { transform: none !important; background-color: rgb(var(--t, 37 99 235) / .26) !important; box-shadow: 0 0 0 1px rgb(var(--t, 37 99 235) / .48) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico), body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):focus-visible :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico) { background-color: rgb(var(--t, 96 164 245) / .30) !important; box-shadow: 0 0 0 1px rgb(var(--t, 96 164 245) / .50) !important; } /* Real brand logo: neutral plate, neutral ring. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img) { background-color: var(--aits-card) !important; box-shadow: 0 0 0 1px rgb(15 23 42 / .10) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img) { background-color: rgb(255 255 255 / .10) !important; box-shadow: 0 0 0 1px rgb(255 255 255 / .14) !important; } .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img), .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):focus-visible :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img) { box-shadow: 0 0 0 1px rgb(54 128 237 / .45) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img), body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):focus-visible :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img) { box-shadow: 0 0 0 1px rgb(96 164 245 / .45) !important; } /* ── A hovered plate that holds a real logo keeps its NEUTRAL background. The resting `:has(img)` rule above already says so, but the generic hover lands at (0,4,0) against its (0,3,1) and painted the card's loop-index tone straight back in — which the logo's own transparent corners then showed as a ring of colour around the mark (measured: violet behind Perplexity on hover). These twins are (0,4,1) and last, so the plate stays neutral and only the ring answers the pointer. */ .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img), .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):focus-visible :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img) { background-color: var(--aits-card) !important; } body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):hover :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img), body.theme-dark .aitshd-mega-panel:is(.aitshd-mega-panel-tools,.aitshd-mega-panel-models,.aitshd-mega-panel-learn,.aitshd-mega-panel-deals,.aitshd-mega-panel-discover,.aitshd-mega-panel-resources) :is(.aitshd-mega-pop-chip,.aitshd-mmg-pop-chip,.aitshd-lm-pop-chip,.aitshd-dm-feat-card,.aitshd-dc-trending-chip,.aitshd-rc-guide):focus-visible :is(.aitshd-mega-pop-chip-ico,.aitshd-mmg-pop-mark,.aitshd-lm-pop-mark,.aitshd-dm-feat-mark,.aitshd-dc-trending-ico,.aitshd-rc-guide-ico):has(img) { background-color: rgb(255 255 255 / .10) !important; }