/* ============================================================================= AIToolsay — Tool page hero ----------------------------------------------------------------------------- The coloured band at the top of every tool card: icon tile + H1 + subtitle. Markup lives in livewire/public/pages.blade.php (the `type == 'tool'` branch) and carries `.aits-tool-hero`. COLOUR-AGNOSTIC BY DESIGN — read before editing. The band's fill comes from an ADMIN SETTING (Settings → Background for Heading Section), which prints a Tabler class like `.bg-red` onto the header. Those classes set `background-color … !important`, so nothing here may set a background-color: the admin's choice would either be ignored or fought. Everything below builds depth out of `background-image` (white/black alpha gradients) plus `currentColor`, which layers over ANY base hue. Change the setting to purple and this still reads correctly. (Site quirk: the live value is `bg-red`, which paints BLUE — the whole Tabler palette is remapped to the brand in custom.ltr.css. Don't "fix" the name.) Specificity note: the H1 is pinned by premium-article.css at `#tool-box .card > .card-header .card-title` (1,3,0) **!important**, so the title rule here needs both !important and a higher count — hence the extra `.aits-tool-hero` in the chain, giving (1,4,0). ========================================================================== */ #tool-box > .card > .card-header.aits-tool-hero { position: relative; overflow: hidden; isolation: isolate; padding: 22px 24px; border: 0; /* Match the card it caps. */ border-radius: 10px 10px 0 0; /* THE DEPTH. A soft light source at the top-left, a gentle shade at the bottom. Pure alpha, so it enhances whatever colour sits underneath. */ background-image: radial-gradient(125% 150% at 8% -35%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 58%), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .13)); transition: background-image .35s ease; } /* Decorative bloom on the trailing edge — clipped by overflow, and inert. */ #tool-box > .card > .card-header.aits-tool-hero::after { content: ""; position: absolute; z-index: -1; inset-block-start: -60%; inset-inline-end: -8%; inline-size: 320px; block-size: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 68%); pointer-events: none; transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .4s ease; } /* ── ICON TILE ──────────────────────────────────────────────────────────── */ /* .text-white .tool-lucide already gives it a flat rgba(255,255,255,.16). This makes it glass: brighter fill, inner top highlight, cast shadow. */ #tool-box > .card > .card-header.aits-tool-hero .tool-lucide { inline-size: 52px; block-size: 52px; border-radius: 15px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 8px 18px -8px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, box-shadow .25s ease; } #tool-box > .card > .card-header.aits-tool-hero .tool-lucide svg { inline-size: 26px; block-size: 26px; } /* ── TYPE ───────────────────────────────────────────────────────────────── */ /* !important + (1,4,0) to clear premium-article.css — see the header note. */ #tool-box > .card > .card-header.aits-tool-hero .card-title { margin: 0 0 4px !important; font-size: clamp(1.35rem, 1.1rem + 1.35vw, 1.9rem) !important; font-weight: 800 !important; line-height: 1.18 !important; letter-spacing: -.02em !important; color: #fff !important; /* Tool names run long ("AI Emergency Preparedness Kit List") — wrap, never clip. There is no ellipsis anywhere in this component on purpose. */ overflow-wrap: anywhere; text-wrap: balance; } #tool-box > .card > .card-header.aits-tool-hero p { font-size: 13.5px; font-weight: 500; line-height: 1.5; /* Stepped back from pure white so the H1 leads — still ~11:1 on the brand fill, well past AA. !important because the header also carries Bootstrap's `.text-white`, which is `color:#fff !important` and would otherwise flatten the hierarchy back out. */ color: rgba(255, 255, 255, .84) !important; overflow-wrap: anywhere; } #tool-box > .card > .card-header.aits-tool-hero .tool-header-flex { gap: 16px; } #tool-box > .card > .card-header.aits-tool-hero .tool-lucide.me-3 { margin-inline-end: 0 !important; } /* ── HOVER ────────────────────────────────────────────────────────────────── Restrained on purpose: the band is not a control, so it must not imply one. The light source warms and the tile lifts — a sign of life, not an affordance. */ @media (hover: hover) and (pointer: fine) { #tool-box > .card > .card-header.aits-tool-hero:hover { background-image: radial-gradient(125% 150% at 8% -35%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .12)); } #tool-box > .card > .card-header.aits-tool-hero:hover::after { transform: translate3d(-26px, 14px, 0) scale(1.08); opacity: .85; } #tool-box > .card > .card-header.aits-tool-hero:hover .tool-lucide { transform: translateY(-2px) scale(1.04); background: rgba(255, 255, 255, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 12px 24px -10px rgba(0, 0, 0, .45); } } /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { #tool-box > .card > .card-header.aits-tool-hero { padding: 18px 16px; } #tool-box > .card > .card-header.aits-tool-hero .tool-header-flex { gap: 13px; } #tool-box > .card > .card-header.aits-tool-hero .tool-lucide { inline-size: 44px; block-size: 44px; border-radius: 13px; } #tool-box > .card > .card-header.aits-tool-hero .tool-lucide svg { inline-size: 22px; block-size: 22px; } #tool-box > .card > .card-header.aits-tool-hero p { font-size: 12.5px; } #tool-box > .card > .card-header.aits-tool-hero::after { inline-size: 220px; block-size: 220px; } } /* No stacking breakpoint. It was tried at <400px and removed: even at 360px the icon + gap take 57px, leaving ~270px for the title, which wraps happily beside it. Stacking only made the band taller and pushed the tool itself further down the fold. The icon centres against a 2- or 3-line title fine. */ @media (prefers-reduced-motion: reduce) { #tool-box > .card > .card-header.aits-tool-hero, #tool-box > .card > .card-header.aits-tool-hero::after, #tool-box > .card > .card-header.aits-tool-hero .tool-lucide { transition: none; } #tool-box > .card > .card-header.aits-tool-hero:hover::after { transform: none; } #tool-box > .card > .card-header.aits-tool-hero:hover .tool-lucide { transform: none; } } /* ── DARK ─────────────────────────────────────────────────────────────────── The band keeps its brand fill on dark — it is the page's one block of colour. Only the overlay changes: less top glare, a touch more bottom shade, so it sits on the dark canvas instead of glowing off it. */ body.theme-dark #tool-box > .card > .card-header.aits-tool-hero { background-image: radial-gradient(125% 150% at 8% -35%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 58%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .22)); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3); } @media (hover: hover) and (pointer: fine) { body.theme-dark #tool-box > .card > .card-header.aits-tool-hero:hover { background-image: radial-gradient(125% 150% at 8% -35%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .20)); } } body.theme-dark #tool-box > .card > .card-header.aits-tool-hero .tool-lucide { background: rgba(255, 255, 255, .16); border-color: var(--dk-line-strong,rgba(255,255,255,.16)); }