@charset "UTF-8"; /* ========================================================================== STACKLIST — hero.css The home-page hero, made to feel like a directory people actually browse: a masked dot field with a warm orange bloom, a search bar that types real queries at you, counters that run up, and a wall of live listings that staggers in with a beam travelling around the sponsored card. Loaded AFTER css/style.css. Same palette, same type scale, same radii — this file only adds motion and one new component (the listing wall). -------------------------------------------------------------------------- THE NO-BLANK-HERO RULE Nothing here hides content unless carries `sl-js`, which a two-line inline script in adds. With JavaScript off — or if a script throws — the hero renders complete, the search form still submits, the counters read their final values and the typewriter shows its static placeholder. js/hero.js also sets `sl-safe` after four seconds as a second line of defence. -------------------------------------------------------------------------- CONTENTS 01. No-blank safety net (also repairs the site-wide [data-reveal]) 02. Backdrop: dots, bloom, drifting orbs 03. Entrance choreography 04. Search bar: halo, focus state, typed placeholder 05. Live counters 06. The listing wall (+ border beam on the sponsored card) 07. Reduced motion 08. Small screens ========================================================================== */ /* ========================================================================== 01. NO-BLANK SAFETY NET -------------------------------------------------------------------------- css/style.css starts [data-reveal] at opacity 0 and lets JS put it back. These rules flip the dependency so the page is readable with no JS at all. ========================================================================== */ [data-reveal] { opacity: 1; transform: none; } html.sl-js [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(16px); } /* The watchdog, set by js/hero.js after four seconds no matter what. */ html.sl-safe [data-reveal], html.sl-safe .hero--live [data-hero], html.sl-safe .hero-word, html.sl-safe .hero-wall__card, html.sl-safe .hero-stat { opacity: 1 !important; transform: none !important; } /* ========================================================================== 02. BACKDROP -------------------------------------------------------------------------- .hero::before (warm wash) and .hero::after (masked grid) already exist in style.css. This adds a dot field on top of the grid, a bloom that breathes behind the headline, and two very slow orbs that keep the corners alive. All decorative, all aria-hidden, all transform/opacity only. ========================================================================== */ .hero--live { isolation: isolate; } .hero-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* -- Dot field, masked so it dissolves before it reaches the copy -------- */ .hero-fx__dots { position: absolute; inset: 0; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 22px 22px; color: color-mix(in srgb, var(--ink) 26%, transparent); opacity: 0.8; -webkit-mask-image: radial-gradient(58% 60% at 50% 18%, #000 8%, transparent 72%); mask-image: radial-gradient(58% 60% at 50% 18%, #000 8%, transparent 72%); } /* -- The orange bloom behind the headline -------------------------------- */ .hero-fx__bloom { position: absolute; left: 50%; top: -18%; width: min(1100px, 130%); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50%; /* Held in custom properties because sl-breathe animates `opacity` — an opacity override could never win against a running animation, so the dark-theme boost has to change the colour instead. */ --bloom-1: 26%; --bloom-2: 6%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) var(--bloom-1), transparent), color-mix(in srgb, var(--brand) var(--bloom-2), transparent) 55%, transparent 78%); filter: blur(24px); animation: sl-breathe 8s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes sl-breathe { 0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } } /* -- Two slow orbs, one brand, one accent -------------------------------- */ .hero-fx__orb { position: absolute; width: 38vw; max-width: 520px; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: 0.4; } .hero-fx__orb--a { left: -16%; top: -12%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 30%, transparent), transparent 72%); animation: sl-drift-a 26s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } .hero-fx__orb--b { right: -18%; top: 8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 32%, transparent), transparent 72%); animation: sl-drift-b 34s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } @keyframes sl-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7%, 9%, 0) scale(1.12); } } @keyframes sl-drift-b { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-9%, 6%, 0) scale(1); } } /* Dark needs more of everything: a wash that reads at 8% on paper disappears entirely on near-black, so the bloom and orbs are pushed up here. Declared twice — once for the system preference, once for the explicit toggle — exactly the way style.css handles its own dark palette. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-fx__bloom { --bloom-1: 46%; --bloom-2: 13%; filter: blur(34px); } :root:not([data-theme="light"]) .hero-fx__orb { opacity: 0.7; } :root:not([data-theme="light"]) .hero-fx__dots { opacity: 0.5; } :root:not([data-theme="light"]) .searchbar-halo { --halo-1: 52%; } } :root[data-theme="dark"] .hero-fx__bloom { --bloom-1: 46%; --bloom-2: 13%; filter: blur(34px); } :root[data-theme="dark"] .hero-fx__orb { opacity: 0.7; } :root[data-theme="dark"] .hero-fx__dots { opacity: 0.5; } :root[data-theme="dark"] .searchbar-halo { --halo-1: 52%; } /* ========================================================================== 03. ENTRANCE CHOREOGRAPHY -------------------------------------------------------------------------- `both` fill again: the pre-state lives inside the animation, so an element whose animation never runs is simply visible. ========================================================================== */ html.sl-js .hero--live [data-hero] { animation: sl-rise 700ms var(--ease-out) both; } html.sl-js .hero--live [data-hero="1"] { animation-delay: 40ms; } html.sl-js .hero--live [data-hero="3"] { animation-delay: 400ms; } html.sl-js .hero--live [data-hero="4"] { animation-delay: 500ms; } html.sl-js .hero--live [data-hero="5"] { animation-delay: 600ms; } html.sl-js .hero--live [data-hero="6"] { animation-delay: 680ms; } html.sl-js .hero--live [data-hero="7"] { animation-delay: 760ms; } @keyframes sl-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } /* -- Headline, one word at a time ---------------------------------------- js/hero.js wraps each word of the h1 in a span, keeping the and the punctuation exactly where they were, so the heading's accessible name is unchanged. Nothing is hidden until those spans exist. */ .hero-word { display: inline-block; will-change: transform, opacity, filter; } /* Punctuation folded onto the end of a word by js/hero.js. */ .hero-punct { font-style: normal; } html.sl-js .hero-word { animation: sl-word 780ms var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 48ms); } @keyframes sl-word { from { opacity: 0; transform: translate3d(0, 0.3em, 0); filter: blur(8px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } } /* ========================================================================== 04. SEARCH BAR -------------------------------------------------------------------------- The bar itself is untouched — same markup, same GET to browse.html. What is added is a halo behind it and a placeholder that types real queries. The