@charset "UTF-8"; /* ========================================================================== EMBER & OAK — hero.css The cinematic home-page hero: candlelight bloom, drifting haze, rising embers, a plated dish that assembles itself, and a serif headline that arrives one word at a time. Loaded AFTER css/style.css, so everything here is an amplification of the existing palette — no new colours, no new typefaces. -------------------------------------------------------------------------- THE NO-BLANK-HERO RULE Nothing in this file hides content unless `html.eo-js` is present, and that class is added by a two-line inline script in . With JavaScript off, or if a script fails, every element renders in its final state. js/hero.js additionally adds `html.eo-safe` after four seconds, which forces the whole composition visible no matter what happened before. -------------------------------------------------------------------------- CONTENTS 01. No-blank safety net (also repairs the site-wide .reveal utility) 02. Atmosphere: bloom, haze, embers, vignette 03. Entrance choreography 04. Split-word headline 05. The plated dish 06. Steam 07. Reservation CTA sheen 08. Reduced motion ========================================================================== */ /* ========================================================================== 01. NO-BLANK SAFETY NET -------------------------------------------------------------------------- css/style.css hides .reveal elements with opacity: 0 and relies on JS to put them back. That is fine right up until JS does not run. These rules invert the dependency: the element is visible by default and only hidden once JS has proved it is alive. ========================================================================== */ .reveal { opacity: 1; transform: none; } html.eo-js .reveal:not(.is-visible) { opacity: 0; transform: translateY(20px); } html.eo-js .reveal--scale:not(.is-visible) { transform: translateY(14px) scale(0.985); } html.eo-js .reveal--left:not(.is-visible) { transform: translateX(-24px); } html.eo-js .reveal--right:not(.is-visible) { transform: translateX(24px); } html.eo-js .reveal--fade:not(.is-visible) { transform: none; } /* The watchdog. js/hero.js sets this after 4s whatever else has happened. */ html.eo-safe .reveal { opacity: 1 !important; transform: none !important; } html.eo-safe .hero-word, html.eo-safe .hero--ember [data-hero], html.eo-safe .hero-layer, html.eo-safe .hero-art .ph-dish, html.eo-safe .hero-art .ph-scene, html.eo-safe .hero-dish > span { opacity: 1 !important; } /* ========================================================================== 02. ATMOSPHERE -------------------------------------------------------------------------- Four decorative layers sit behind the copy, all of them aria-hidden and pointer-events: none, all of them animating transform/opacity only. ========================================================================== */ .hero--ember { isolation: isolate; } /* -- Candlelight bloom: the slow breath of a room lit by fire ------------- */ .hero-bloom { position: absolute; inset: -30% -12%; z-index: -2; pointer-events: none; background-image: radial-gradient(26% 30% at 26% 76%, rgba(255, 170, 90, 0.30), transparent 66%), radial-gradient(20% 24% at 62% 24%, rgba(255, 132, 60, 0.14), transparent 70%), radial-gradient(46% 50% at 40% 60%, rgba(198, 86, 34, 0.11), transparent 74%); filter: blur(16px); mix-blend-mode: screen; animation: eo-breathe 9s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes eo-breathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.045); } } /* A second, faster and much weaker flicker layered on top of the breath. Two out-of-phase cycles is what stops it reading as a CSS pulse. */ .hero-bloom::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(26% 30% at 30% 72%, rgba(255, 196, 128, 0.16), transparent 62%); animation: eo-flicker 4.3s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes eo-flicker { 0%, 100% { opacity: 0.35; } 38% { opacity: 0.9; } 62% { opacity: 0.5; } } /* -- Warm haze drifting across the room ---------------------------------- */ .hero-haze { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .hero-haze i { position: absolute; display: block; left: -30%; width: 56%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 182, 0.085), transparent 74%); filter: blur(26px); animation: eo-haze 44s linear infinite; } .hero-haze i:nth-child(1) { top: 14%; animation-duration: 46s; } .hero-haze i:nth-child(2) { top: 46%; animation-duration: 62s; animation-delay: -18s; opacity: 0.75; } .hero-haze i:nth-child(3) { top: 68%; animation-duration: 54s; animation-delay: -36s; opacity: 0.55; } @keyframes eo-haze { from { transform: translate3d(0, 0, 0) scaleX(1); } 50% { transform: translate3d(120%, -3%, 0) scaleX(1.16); } to { transform: translate3d(240%, 0, 0) scaleX(1); } } /* -- Embers lifting off the hearth --------------------------------------- */ .hero-embers { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .hero-embers i { position: absolute; bottom: -4%; display: block; width: 3px; height: 3px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 218, 158, 0.95), rgba(255, 138, 60, 0.5) 55%, transparent 74%); opacity: 0; animation: eo-ember 20s linear infinite; } .hero-embers i:nth-child(1) { left: 9%; animation-duration: 21s; animation-delay: -2s; } .hero-embers i:nth-child(2) { left: 17%; animation-duration: 26s; animation-delay: -9s; } .hero-embers i:nth-child(3) { left: 31%; animation-duration: 23s; animation-delay: -15s; } .hero-embers i:nth-child(4) { left: 44%; animation-duration: 28s; animation-delay: -5s; } .hero-embers i:nth-child(5) { left: 58%; animation-duration: 24s; animation-delay: -19s; } .hero-embers i:nth-child(6) { left: 71%; animation-duration: 30s; animation-delay: -11s; } .hero-embers i:nth-child(7) { left: 84%; animation-duration: 22s; animation-delay: -24s; } @keyframes eo-ember { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); } 10% { opacity: 0.7; } 70% { opacity: 0.45; } 100% { opacity: 0; transform: translate3d(28px, -72vh, 0) scale(1.15); } } /* -- Vignette: pulls the eye to the middle of the frame ------------------- */ .hero-vignette { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(122% 92% at 50% 42%, transparent 40%, rgba(12, 8, 5, 0.42) 100%); } /* ========================================================================== 03. ENTRANCE CHOREOGRAPHY -------------------------------------------------------------------------- Every entrance uses `both` fill, so the pre-state comes from the animation itself rather than from a standing `opacity: 0` rule. If the animation never runs, the element is simply visible. ========================================================================== */ html.eo-js .hero--ember [data-hero] { animation: eo-rise 900ms var(--ease-out) both; } html.eo-js .hero--ember [data-hero="1"] { animation-delay: 100ms; } html.eo-js .hero--ember [data-hero="2"] { animation-delay: 760ms; } html.eo-js .hero--ember [data-hero="3"] { animation-delay: 900ms; } html.eo-js .hero--ember [data-hero="4"] { animation-delay: 1040ms; } @keyframes eo-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } } @keyframes eo-fade-in { from { opacity: 0; } to { opacity: 1; } } /* The two art layers. Parallax is applied by JS through the independent `translate` property, which composes with — rather than fights — the transform-based entrance below. */ .hero-layer { position: absolute; inset: 0; pointer-events: none; } html.eo-js .hero-layer--scene { animation: eo-pop-in 1100ms var(--ease-out) 60ms both; } html.eo-js .hero-layer--dish { animation: eo-pop-in 1000ms var(--ease-out) 300ms both; } @keyframes eo-pop-in { from { transform: translate3d(0, 22px, 0) scale(0.93); } to { transform: none; } } /* The scene and the dish fade separately from the layers they live in, so the float animation on their transform is never interrupted. */ html.eo-js .hero-art .ph-scene { animation: eo-fade-in 820ms var(--ease-out) 80ms both, float-slow 11s var(--ease) 1.2s infinite alternate; } html.eo-js .hero-art .ph-dish { animation: eo-fade-in 700ms var(--ease-out) 320ms both, float-slow 9s var(--ease) 1.6s infinite alternate-reverse; } /* The badge stamps itself on and then sways. (style.css spins it a full 360°, which leaves "EST. 2016" upside down for half of every cycle — a slow sway keeps the movement and keeps the type readable.) */ .hero-badge { animation: eo-badge-sway 9s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; } html.eo-js .hero-badge { animation: eo-stamp 900ms var(--ease-out) 1250ms both, eo-badge-sway 9s cubic-bezier(0.45, 0, 0.55, 1) 2.2s infinite alternate; } @keyframes eo-stamp { from { opacity: 0; transform: scale(0.6) rotate(-24deg); } to { opacity: 1; transform: rotate(-5deg); } } @keyframes eo-badge-sway { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-7px); } } html.eo-js .scroll-cue { animation: eo-rise 800ms var(--ease-out) 1800ms both; } /* ========================================================================== 04. SPLIT-WORD HEADLINE -------------------------------------------------------------------------- js/hero.js wraps each word of the h1 in , keeping the and all punctuation exactly where they were — so the heading's accessible name is unchanged and screen readers still announce one clean sentence. Nothing is hidden until the spans exist. ========================================================================== */ .hero-word { display: inline-block; will-change: transform, opacity, filter; } /* Punctuation folded into the end of a word (see js/hero.js) — kept upright when the word it joined is italic, so "Irish oak," renders exactly as the source markup did. */ .hero-punct { font-style: normal; } html.eo-js .hero-word { animation: eo-word 1000ms var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 82ms); } @keyframes eo-word { from { opacity: 0; transform: translate3d(0, 0.4em, 0); filter: blur(10px); } 55% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } } /* ========================================================================== 05. THE PLATED DISH -------------------------------------------------------------------------- The hero dish is a richer build than the .ph-dish used in the cards: the generic three-blob food layer is switched off and replaced with a sauce swoosh, three charred pieces, roasted vegetables, a scatter of micro-herbs and a slow specular sweep across the glaze. Every measurement is in cqmin, so the whole plate scales from the shorter edge of its container. ========================================================================== */ .hero-halo { position: absolute; left: -22%; bottom: -18%; width: 86%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 176, 96, 0.30), rgba(255, 140, 70, 0.10) 52%, transparent 74%); mix-blend-mode: screen; animation: eo-breathe 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite; } /* Retire the generic food disc — the layers below take its place. */ .hero-dish::after { display: none; } /* A deeper, better-lit plate: two rim steps and a soft inner shadow. */ .hero-dish::before { width: 82cqmin; background-image: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.92), transparent 54%), radial-gradient(circle at 50% 50%, var(--plate) 0 51%, rgba(206, 190, 166, 0.55) 52% 54%, var(--plate) 55% 71%, var(--plate-2) 72% 76.5%, var(--plate) 77.5% 100%); box-shadow: 0 26px 48px -18px rgba(48, 30, 14, 0.62), inset 0 0 0 1px rgba(90, 66, 40, 0.10); } .hero-dish > span { position: absolute; left: 50%; top: 50%; display: block; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); } /* -- Sauce swoosh --------------------------------------------------------- */ .hero-dish__sauce { --rot: -17deg; left: 45%; top: 55%; width: 56cqmin; height: 35cqmin; border-radius: 52% 48% 62% 38% / 56% 44% 56% 44%; background: radial-gradient(62% 72% at 42% 46%, rgba(112, 38, 14, 0.9), rgba(112, 38, 14, 0.42) 56%, rgba(112, 38, 14, 0) 76%); filter: blur(2.5px); } /* -- Three charred pieces ------------------------------------------------- */ .hero-dish__main { width: 50cqmin; height: 44cqmin; } .hero-dish__main i { position: absolute; display: block; border-radius: 46% 54% 42% 58% / 52% 46% 54% 48%; background-image: repeating-linear-gradient(74deg, rgba(38, 18, 8, 0.34) 0 2.5px, rgba(38, 18, 8, 0) 2.5px 11px), radial-gradient(72% 62% at 34% 26%, rgba(255, 202, 146, 0.45), transparent 64%), linear-gradient(150deg, color-mix(in srgb, var(--f1) 88%, #fff) 0%, var(--f1) 46%, color-mix(in srgb, var(--f1) 60%, #000) 100%); box-shadow: 0 5px 11px -4px rgba(44, 22, 8, 0.62), inset 0 1px 0 rgba(255, 222, 184, 0.32); } .hero-dish__main i:nth-child(1) { left: 1%; top: 12%; width: 52%; height: 39%; transform: rotate(-15deg); } .hero-dish__main i:nth-child(2) { left: 37%; top: 1%; width: 50%; height: 37%; transform: rotate(10deg); } .hero-dish__main i:nth-child(3) { left: 17%; top: 41%; width: 55%; height: 42%; transform: rotate(-4deg); } /* -- Roasted vegetables and burnt-lemon ---------------------------------- */ .hero-dish__veg { --rot: 4deg; width: 50cqmin; height: 46cqmin; background-image: radial-gradient(circle at 79% 29%, color-mix(in srgb, var(--f2) 90%, #fff) 0 3.4%, var(--f2) 5% 8%, transparent 9.2%), radial-gradient(circle at 87% 45%, var(--f2) 0 5.4%, transparent 6.6%), radial-gradient(circle at 15% 71%, color-mix(in srgb, var(--f3) 92%, #fff) 0 4%, var(--f3) 5.5% 8.4%, transparent 9.6%), radial-gradient(circle at 29% 86%, var(--f3) 0 4.4%, transparent 5.6%), radial-gradient(circle at 66% 83%, color-mix(in srgb, var(--f2) 66%, #000) 0 3.6%, transparent 4.7%), radial-gradient(circle at 8% 44%, color-mix(in srgb, var(--f4) 88%, #fff) 0 2.8%, var(--f4) 4% 6%, transparent 7%); } /* -- Micro-herbs, sea salt and beads of oil ------------------------------- */ .hero-dish__garnish { width: 52cqmin; height: 48cqmin; background-image: radial-gradient(circle at 41% 23%, rgba(228, 242, 208, 0.95) 0 1%, transparent 1.7%), radial-gradient(circle at 62% 35%, rgba(158, 196, 108, 0.95) 0 1.3%, transparent 2%), radial-gradient(circle at 30% 52%, rgba(198, 226, 160, 0.90) 0 1.1%, transparent 1.8%), radial-gradient(circle at 72% 61%, rgba(228, 242, 208, 0.85) 0 0.9%, transparent 1.5%), radial-gradient(circle at 50% 70%, rgba(158, 196, 108, 0.80) 0 1.2%, transparent 1.9%), radial-gradient(circle at 24% 34%, rgba(255, 246, 218, 0.75) 0 0.7%, transparent 1.2%), radial-gradient(circle at 80% 47%, rgba(255, 246, 218, 0.60) 0 0.6%, transparent 1.1%), radial-gradient(circle at 57% 18%, rgba(255, 246, 218, 0.55) 0 0.5%, transparent 1%); } /* -- Specular sweep across the glaze -------------------------------------- */ .hero-dish__gloss { width: 82cqmin; height: 82cqmin; border-radius: 50%; background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0.04) 55%, transparent 68%); mix-blend-mode: screen; animation: eo-gloss 28s linear infinite; } @keyframes eo-gloss { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* -- Assembly: plate, then food, then garnish ----------------------------- */ html.eo-js .hero-dish::before { animation: eo-plate-in 840ms var(--ease-out) 520ms both; } html.eo-js .hero-dish__sauce { animation: eo-food-in 720ms var(--ease-out) 880ms both; } html.eo-js .hero-dish__main { animation: eo-food-in 720ms var(--ease-out) 1010ms both; } html.eo-js .hero-dish__veg { animation: eo-food-in 720ms var(--ease-out) 1140ms both; } html.eo-js .hero-dish__garnish { animation: eo-garnish-in 780ms var(--ease-out) 1340ms both; } html.eo-js .hero-dish__gloss { animation: eo-fade-in 1200ms var(--ease) 1500ms both, eo-gloss 28s linear 1.5s infinite; } html.eo-js .hero-halo { animation: eo-fade-in 1400ms var(--ease) 260ms both, eo-breathe 6.5s cubic-bezier(0.45, 0, 0.55, 1) 1.4s infinite; } @keyframes eo-plate-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.72); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes eo-food-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 9px)) rotate(calc(var(--rot, 0deg) - 9deg)) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); } } @keyframes eo-garnish-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.62); filter: blur(3px); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } } /* ========================================================================== 06. STEAM -------------------------------------------------------------------------- Three blurred wisps rising out of the plate and dissolving. They sit outside the dish's circular clip so they can drift into the room behind. ========================================================================== */ .hero-steam { position: absolute; left: 1%; bottom: 27%; width: 42%; height: 46%; pointer-events: none; } .hero-steam i { position: absolute; bottom: 0; display: block; width: 22%; height: 100%; background: linear-gradient(to top, rgba(255, 238, 216, 0) 0%, rgba(255, 238, 216, 0.17) 32%, rgba(255, 238, 216, 0.06) 70%, transparent 100%); filter: blur(9px); opacity: 0; animation: eo-steam 12s cubic-bezier(0.45, 0, 0.55, 1) infinite; } .hero-steam i:nth-child(1) { left: 20%; animation-delay: 1.2s; } .hero-steam i:nth-child(2) { left: 42%; animation-delay: 5.1s; animation-duration: 14s; } .hero-steam i:nth-child(3) { left: 63%; animation-delay: 8.6s; animation-duration: 13s; } @keyframes eo-steam { 0% { opacity: 0; transform: translate3d(0, 12%, 0) scaleX(0.7) skewX(0deg); } 22% { opacity: 0.55; } 60% { opacity: 0.32; transform: translate3d(-6%, -26%, 0) scaleX(1.05) skewX(-5deg); } 100% { opacity: 0; transform: translate3d(5%, -58%, 0) scaleX(1.35) skewX(5deg); } } /* ========================================================================== 07. RESERVATION CTA -------------------------------------------------------------------------- A slow sheen that crosses the button roughly every five seconds, plus a warm bed of light underneath it. The existing hover sweep on .btn::after is untouched, so hovering still gives the faster glint. ========================================================================== */ .hero-cta { box-shadow: 0 12px 34px -14px rgba(196, 82, 34, 0.72), var(--shadow-sm); } .hero-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 26%, rgba(255, 240, 220, 0.42) 46%, transparent 66%); transform: translateX(-130%) skewX(-14deg); animation: eo-sheen 5.4s var(--ease-out) 2.4s infinite; } @keyframes eo-sheen { 0% { transform: translateX(-130%) skewX(-14deg); } 24% { transform: translateX(130%) skewX(-14deg); } 100% { transform: translateX(130%) skewX(-14deg); } } .hero-cta:hover { box-shadow: 0 16px 40px -14px rgba(196, 82, 34, 0.85), var(--shadow-md); } /* ========================================================================== 08. REDUCED MOTION -------------------------------------------------------------------------- style.css already flattens durations globally; these rules make sure the *result* of that flattening is the correct final state rather than the tail end of a fade-out. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hero-bloom, .hero-bloom::after, .hero-halo, .hero-haze i, .hero-embers i, .hero-steam i, .hero-dish__gloss, .hero-cta::before { animation: none !important; } .hero-embers, .hero-steam { display: none; } .hero-bloom { opacity: 0.85; } .hero-halo { opacity: 1; } .hero-cta::before { display: none; } .hero-word, .hero--ember [data-hero], .hero-layer, .hero-art .ph-dish, .hero-art .ph-scene, .hero-badge, .scroll-cue, .hero-dish > span { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } /* The plate and the plated layers keep their centring transform. */ .hero-dish::before { animation: none !important; opacity: 1 !important; } .hero-dish > span { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) !important; } .hero-dish__main i { transform: none; } .hero-dish__main i:nth-child(1) { transform: rotate(-15deg); } .hero-dish__main i:nth-child(2) { transform: rotate(10deg); } .hero-dish__main i:nth-child(3) { transform: rotate(-4deg); } } /* ========================================================================== 09. SMALL SCREENS ========================================================================== */ @media (max-width: 940px) { .hero-halo { left: -18%; bottom: -14%; width: 78%; } .hero-steam { left: 0; bottom: 26%; width: 38%; } } @media (max-width: 560px) { .hero-embers { display: none; } .hero-bloom { inset: -20% -6%; } }