AURELIO — Cinematic Hero (cinematic-dark-warm)
Cinematic dark-warm hero section: a full-bleed dusk cityscape photo graded toward amber, layered with a warm sepia wash, an amber atmosphere bloom and a heavy vignette, under a translucent blurred sticky nav. Space Grotesk display + Inter body on near-black #0a0a0c with an amber #f0a868 accent and cream #f5f1ea text; a huge clamp headline with an amber gradient word, a live-showreel pill, an amber gradient CTA + ghost watch button, a trust row, and a bottom showreel control bar with a scroll cue.
Summary
A cinematic, dark-warm full-bleed hero section for an AI product-design agent ("Aurelio"). A dusk cityscape photograph is graded toward amber dusk and stacked with warm-tone, amber-bloom and dark-vignette overlay layers plus a faint film-grain, sitting under a translucent blurred sticky nav. Near-black ink base (#0a0a0c) with a single amber accent (#f0a868) and cream text (#f5f1ea). Type is Space Grotesk for display/UI and Inter for body. Top-down: a fixed glass nav (wordmark + center links + search/sign-in + a cream pill CTA); a top meta strip with a pulsing 'Live showreel' pill and a film timecode; the copy pushed to the lower third — an amber eyebrow with a short rule, a huge clamp headline ('Design at the speed of thought.') where 'thought.' is an amber gradient, a cream sub-paragraph, an amber gradient primary CTA + a ghost 'Watch the reel' button, and a trust row of three amber-check items; then a hairline and a bottom bar pairing a bobbing scroll cue (left) with showreel transport controls + a 01/03 progress readout (right).
Style
Cinematic dark-warm 'dusk' aesthetic for a single full-bleed hero. A photographic city background is darkened and warmed (saturate ~1.16, contrast ~1.06, brightness ~0.62, scaled 1.08) then built up with four stacked full-bleed layers: a warm sepia gradient wash on soft-light blend, a radial amber 'sun-burst' atmosphere bloom on screen blend anchored behind the headline, a dark cinematic grade (top/bottom darkening + a left copy-scrim + a radial vignette), and a faint SVG fractal-noise film grain on overlay blend so flat areas don't band. Near-black ink base #0a0a0c; a single warm amber accent #f0a868 (with lighter #ffd9a8 and deeper #d97b3a / #e08b46 / #c46028 stops for gradients) over cream text #f5f1ea at varying opacities. Space Grotesk (700/600/500) for headings, the wordmark, eyebrows and buttons with very tight -0.035em headline tracking and 0.92 line-height; Inter for body and microcopy. Translucent glass nav (backdrop blur+saturate over rgba(10,10,12,0.32)), soft text-shadows on overlay text for legibility, amber CTA glow shadows, and an amber selection color. Mood: premium, filmic, confident, warm-dark — never flat or generic.
Layout & Structure
One full-bleed hero section (min-height 100svh, overflow hidden, flex column) with all foreground content centered in a max-w-[1240px] container with px-6/px-8 gutters. Layer order bottom-up: the scaled photo, the warm-tone wash, the amber bloom, the dark grade, a narrow-viewport copy-scrim (off at >=lg), then the film grain; foreground sits at z-10. Vertical flow: a fixed glass sticky header (h-68px) overlapping the top; just under it a top meta strip (pulsing 'Live showreel' pill on the left, film timecode on the right, hidden on mobile); a flex-1 spacer that pushes the copy down to the lower third like a film still; the overlay copy block (max-w-[860px]): an amber uppercase eyebrow with a short rule, the huge clamp headline with a gradient word, a max-w-[560px] cream sub-paragraph, a CTA row (amber gradient primary + ghost watch button, stacking on mobile), and a wrap-friendly trust row of three amber-check items; then a full-width hairline divider and a bottom bar that splits a bobbing scroll cue (left) from showreel transport controls + a 01/03 progress readout (right, hidden on mobile). Responsive: nav center links and the right search/sign-in collapse below lg/sm, the headline line-break and clamp scale down, CTAs stack, the photo is darkened harder at <=1023px and <=480px and the copy-scrim turns on so body text stays legible over the bright window band.
Sticky glass nav
Top meta strip
Spacer
Hero copy block
Bottom showreel bar
Special Notes
Fonts loaded from Google Fonts: Space Grotesk (400/500/600/700, display + UI + buttons + eyebrows) and Inter (400/500/600, body + microcopy). Styled with Tailwind via CDN using a custom theme: colors base #0a0a0c, amber #f0a868, cream #f5f1ea; fontFamily display = Space Grotesk, sans = Inter. Iconify (ph:* / Phosphor set). The section is a single full-bleed hero (min-height 100svh, overflow-hidden) — the entire mood is carried by the four stacked overlay layers over one photo, so swap the photo but keep the warm-tone + amber-bloom + dark-grade + grain stack and the amber/cream/ink palette. On narrow viewports the photo is darkened harder and the copy-scrim turns on so the lower-third copy keeps >=4.5:1 contrast over the sun-lit window band. Keep the single-amber-accent discipline: amber for the eyebrow, the headline accent word, the primary CTA, the status dot and the check icons; everything else is cream-on-ink. In the original the background is a local hero photo; in this self-contained artifact it is inlined as a base64 data URI.