/* ========================================================================== Morning Bites — stylesheet Palette is built around a fried egg: yolk yellow, warm shell, deep brown. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* Yolk */ --yolk: #FFC93C; --yolk-deep: #F5A623; --yolk-rich: #E8890B; --yolk-soft: #FFDE7D; /* Shell / white of the egg */ --shell: #FFF3D0; --shell-warm: #FFE9B0; --white-egg: #FFFBF0; --cream: #FFF8E7; /* Ink */ --ink: #33240F; --ink-soft: #6B5638; --ink-faint: #7E6845; /* >= 4.5:1 on every cream/shell surface */ /* Accents */ --bacon: #D9603C; --leaf: #5A8A4A; /* Surfaces */ --line: rgba(51, 36, 15, .12); --line-strong: rgba(51, 36, 15, .22); --shadow-sm: 0 2px 8px rgba(120, 82, 20, .08); --shadow-md: 0 10px 30px rgba(120, 82, 20, .12); --shadow-lg: 0 26px 60px rgba(120, 82, 20, .18); /* Type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Metrics */ --wrap: 1200px; --radius: 22px; --radius-sm: 14px; --header-h: 78px; --promo-h: 44px; /* set to 0 by .promo-off on when dismissed */ /* Motion */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--promo-h) + var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } html.promo-off { --promo-h: 0px; } body { margin: 0; font-family: var(--font-body); font-size: clamp(16px, .55vw + 14.4px, 17.5px); line-height: 1.65; color: var(--ink); background: var(--shell); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } button { font: inherit; color: inherit; } a { color: inherit; } ::selection { background: var(--yolk); color: var(--ink); } :focus-visible { outline: 3px solid var(--yolk-rich); outline-offset: 3px; border-radius: 6px; } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } /* ---------- 3. Egg cursor ---------- */ /* Base: a real CSS cursor so the page looks right before JS boots and if JS never runs. JS then sets .has-eggcursor and takes over with a DOM element, which lets the egg squash, wobble and crack on click. */ @media (pointer: fine) { body { cursor: url("../assets/cursor-egg.svg") 6 6, auto; } a, button, .tab, input, [role="tab"], .quote, .mitem { cursor: url("../assets/cursor-egg-hover.svg") 8 8, pointer; } } body.has-eggcursor, body.has-eggcursor a, body.has-eggcursor button, body.has-eggcursor input, body.has-eggcursor .tab, body.has-eggcursor .mitem { cursor: none; } .eggcursor { position: fixed; top: 0; left: 0; width: 44px; height: 40px; z-index: 10000; pointer-events: none; opacity: 0; will-change: transform; transform: translate3d(-100px, -100px, 0); transition: opacity .25s ease; } .eggcursor.is-on { opacity: 1; } .eggcursor__svg { width: 100%; height: 100%; overflow: visible; transform-origin: 20px 18px; transition: transform .28s var(--ease-spring); filter: drop-shadow(0 3px 5px rgba(120, 82, 20, .3)); animation: eggJiggle 5s ease-in-out infinite; } .eggcursor__white { fill: #FFFDF6; stroke: rgba(51,36,15,.16); stroke-width: 1.1; } .eggcursor__yolk { fill: var(--yolk); transition: r .3s var(--ease-spring), fill .25s ease; } .eggcursor__shine { fill: rgba(255,255,255,.75); } /* grows and deepens over anything clickable */ body.is-hovering .eggcursor__svg { transform: scale(1.35) rotate(-8deg); } body.is-hovering .eggcursor__yolk { fill: var(--yolk-rich); } /* squashes on press */ body.is-pressing .eggcursor__svg { transform: scale(.78) rotate(6deg); transition-duration: .1s; } @keyframes eggJiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } } /* warm glow trailing behind the egg */ .eggcursor-glow { position: fixed; top: 0; left: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; z-index: 9998; pointer-events: none; opacity: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,201,60,.32) 0%, rgba(255,201,60,0) 62%); will-change: transform; transition: opacity .4s ease; } .eggcursor-glow.is-on { opacity: 1; } /* click splat */ .splat { position: fixed; z-index: 9999; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--yolk); box-shadow: 0 0 0 2px rgba(255,255,255,.85); animation: splatFly .62s var(--ease-out) forwards; } @keyframes splatFly { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0; } } .ring { position: fixed; z-index: 9997; pointer-events: none; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid var(--yolk-deep); animation: ringPop .55s var(--ease-out) forwards; } @keyframes ringPop { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } } /* ---------- 4. Loader ---------- */ .loader { position: fixed; inset: 0; z-index: 10001; display: grid; place-content: center; justify-items: center; gap: 1.2rem; background: var(--yolk); transition: opacity .55s ease, visibility .55s; } .loader.is-done { opacity: 0; visibility: hidden; } .loader__egg { position: relative; width: 96px; height: 120px; } .loader__shell { width: 100%; height: 100%; overflow: visible; } .loader__top, .loader__bottom { fill: var(--white-egg); } .loader__top { animation: shellTop 1.5s var(--ease-out) infinite; transform-origin: 60px 60px; } .loader__bottom { animation: shellBottom 1.5s var(--ease-out) infinite; transform-origin: 60px 90px; } .loader__yolk { position: absolute; left: 50%; top: 46%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--yolk-deep); box-shadow: inset -3px -3px 0 rgba(0,0,0,.07); animation: yolkPeek 1.5s var(--ease-out) infinite; } @keyframes shellTop { 0%, 30% { transform: translateY(0) rotate(0deg); } 55% { transform: translateY(-14px) rotate(-9deg); } 80%,100% { transform: translateY(0) rotate(0deg); } } @keyframes shellBottom { 0%, 30% { transform: translateY(0) rotate(0deg); } 55% { transform: translateY(4px) rotate(3deg); } 80%,100% { transform: translateY(0) rotate(0deg); } } @keyframes yolkPeek { 0%, 30% { transform: scale(.4); opacity: 0; } 58% { transform: scale(1.12); opacity: 1; } 80%,100% { transform: scale(.4); opacity: 0; } } .loader__text { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em; color: var(--ink); animation: pulseText 1.5s ease-in-out infinite; } @keyframes pulseText { 0%,100% { opacity: .55; } 50% { opacity: 1; } } /* ---------- 5. Scroll progress ---------- */ .progress { position: fixed; inset: var(--promo-h) 0 auto 0; /* sits just under the announcement bar */ height: 4px; z-index: 999; background: transparent; } .progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--yolk-soft), var(--yolk), var(--yolk-rich)); box-shadow: 0 0 12px rgba(232,137,11,.5); transition: width .08s linear; } /* ---------- 6. New location banner ---------- */ .promo { position: fixed; inset: 0 0 auto 0; z-index: 950; height: var(--promo-h); overflow: hidden; background: var(--ink); color: var(--shell); font-size: .855rem; } html.promo-off .promo { display: none; } /* slow yolk sheen sweeping across the bar */ .promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 22%, rgba(255,201,60,.2) 46%, transparent 70%); transform: translateX(-100%); animation: promoSheen 8s ease-in-out infinite; pointer-events: none; } @keyframes promoSheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .promo__inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: .65rem; padding-right: 2rem; /* room for the close button */ } .promo__tag { flex: none; padding: .2rem .6rem; border-radius: 999px; background: var(--yolk); color: var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .promo__text { margin: 0; min-width: 0; line-height: 1.25; color: rgba(255,243,208,.82); } .promo__addr { color: var(--shell); font-weight: 500; } .promo__dot { margin: 0 .12rem; opacity: .5; } .promo__when { color: var(--yolk); font-weight: 600; } .promo__map { flex: none; color: var(--yolk); font-weight: 600; text-decoration: none; white-space: nowrap; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease-out); } .promo__map:hover { background-size: 100% 1.5px; } .promo__close { position: absolute; right: 0; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(255,243,208,.55); font-size: 1.25rem; line-height: 1; display: grid; place-items: center; transition: color .25s ease, background .25s ease, transform .3s var(--ease-spring); } .promo__close:hover { color: var(--ink); background: var(--yolk); transform: rotate(90deg); } /* ---------- 7. Header ---------- */ .header { position: fixed; inset: calc(var(--promo-h) + 4px) 0 auto 0; z-index: 900; transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; } .header__inner { height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; transition: height .35s var(--ease-out); } .header.is-stuck { background: rgba(255, 243, 208, .82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 var(--line), var(--shadow-sm); } .header.is-stuck .header__inner { height: 62px; } .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; } .brand__egg { width: 40px; height: 36px; flex: none; } .brand__egg svg { overflow: visible; transition: transform .5s var(--ease-spring); } .brand__white { fill: var(--white-egg); stroke: rgba(51,36,15,.16); stroke-width: 1.2; } .brand__yolk { fill: var(--yolk); transition: fill .3s ease; } .brand:hover .brand__egg svg { transform: rotate(-14deg) scale(1.1); } .brand:hover .brand__yolk { fill: var(--yolk-rich); } .brand__text { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: -.035em; line-height: 1; } .brand__text em { font-style: normal; color: var(--yolk-rich); } .nav { position: relative; display: flex; gap: .35rem; } .nav__link { position: relative; z-index: 1; padding: .5rem .95rem; border-radius: 999px; font-weight: 500; font-size: .96rem; text-decoration: none; transition: color .25s ease; } .nav__link.is-active { color: var(--ink); font-weight: 600; } .nav__pill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: var(--yolk); box-shadow: var(--shadow-sm); opacity: 0; transition: transform .45s var(--ease-spring), width .45s var(--ease-spring), opacity .3s ease; } .nav__pill.is-on { opacity: 1; } .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white-egg); padding: 0; place-content: center; gap: 5px; } .burger span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s ease; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- 8. Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.5rem; border: none; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 600; font-size: .96rem; text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease-spring), box-shadow .3s ease; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yolk); transform: translateY(101%); transition: transform .42s var(--ease-out); } .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .btn:hover::before { transform: translateY(0); } .btn:hover .btn__label { color: var(--ink); } .btn:active { transform: translateY(-1px) scale(.98); } .btn__label { position: relative; transition: color .3s ease; } .btn--sm { padding: .58rem 1.15rem; font-size: .9rem; } .btn--lg { padding: 1rem 2rem; font-size: 1.02rem; } .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); } .btn--ghost::before { background: var(--ink); } .btn--ghost:hover .btn__label { color: var(--cream); } .btn--dark { background: var(--ink); color: var(--cream); } .btn--dark::before { background: var(--white-egg); } .btn--ghostdark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px rgba(51,36,15,.4); } .btn--ghostdark::before { background: var(--white-egg); } /* ---------- 9. Shared section furniture ---------- */ .section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; } .h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4.4vw, 3.35rem); line-height: 1.06; letter-spacing: -.035em; margin: .35rem 0 1.1rem; text-wrap: balance; } .kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--yolk-rich); } .kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; } .section__head { max-width: 58ch; margin-bottom: 3rem; } .section__head--center { margin-inline: auto; text-align: center; } .section__head--center .kicker { justify-content: center; } .section__lede { color: var(--ink-soft); font-size: 1.08rem; margin: 0; } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.3rem; padding: .42rem 1rem .42rem .7rem; border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--line); font-size: .85rem; font-weight: 500; color: var(--ink-soft); backdrop-filter: blur(6px); } .eyebrow__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yolk-rich); box-shadow: 0 0 0 4px rgba(232,137,11,.2); animation: blink 2.4s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- 10. Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--promo-h) + var(--header-h) + 2.5rem) 0 4.5rem; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, var(--yolk-soft) 0%, var(--shell) 55%, var(--shell) 100%); } /* the yolk sun */ .hero__sun { position: absolute; top: -16vw; left: 50%; width: 58vw; height: 58vw; max-width: 760px; max-height: 760px; margin-left: -29vw; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #FFE27A 0%, var(--yolk) 46%, var(--yolk-deep) 100%); filter: blur(2px); opacity: .55; animation: sunRise 1.8s var(--ease-out) .25s both, sunFloat 11s ease-in-out 2s infinite; } @keyframes sunRise { from { transform: translateY(70px) scale(.86); opacity: 0; } to { transform: translateY(0) scale(1); opacity: .55; } } @keyframes sunFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -22px; } } .hero__rays { position: absolute; top: -30vw; left: 50%; width: 130vw; height: 130vw; margin-left: -65vw; background: repeating-conic-gradient( from 0deg, rgba(255,255,255,.28) 0deg 5deg, transparent 5deg 17deg ); mask-image: radial-gradient(circle, #000 12%, transparent 55%); -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 55%); opacity: .55; animation: spin 90s linear infinite; pointer-events: none; } @keyframes spin { to { rotate: 360deg; } } /* rising bubbles */ .hero__bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .hero__bubbles span { position: absolute; bottom: -60px; left: var(--x); width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: inset -2px -2px 0 rgba(255,201,60,.4); scale: var(--s); animation: bubbleUp 13s linear var(--d) infinite; } @keyframes bubbleUp { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .85; } 85% { opacity: .5; } 100% { transform: translateY(-108svh) translateX(38px); opacity: 0; } } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.2rem, 9.5vw, 7.2rem); line-height: .93; letter-spacing: -.045em; margin: 0 0 1.4rem; } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; transform: translateY(105%); transition: transform .95s var(--ease-out); } .hero__title .line.is-in > span { transform: translateY(0); } .hero__title .line:nth-child(2) > span { transition-delay: .1s; } .hero__title .line:nth-child(3) > span { transition-delay: .2s; } .line--accent > span { background: linear-gradient(100deg, var(--yolk-rich), var(--yolk) 55%, var(--yolk-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__lede { max-width: 46ch; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-soft); margin: 0 0 2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.8rem; } .status { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem .45rem .8rem; border-radius: 999px; background: var(--white-egg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); font-size: .9rem; font-weight: 600; } .status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); transition: background .3s ease, box-shadow .3s ease; } .status.is-open .status__dot { background: var(--leaf); box-shadow: 0 0 0 0 rgba(90,138,74,.55); animation: ping 2s ease-out infinite; } .status.is-closed .status__dot { background: var(--bacon); } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(90,138,74,.55); } 70% { box-shadow: 0 0 0 9px rgba(90,138,74,0); } 100% { box-shadow: 0 0 0 0 rgba(90,138,74,0); } } /* the pan */ .hero__art { position: relative; display: grid; place-items: center; } .pan { position: relative; width: min(100%, 520px); animation: panFloat 6.5s ease-in-out infinite; } @keyframes panFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(-1.2deg); } } .pan__svg { /* viewBox alone gives no intrinsic size, so it collapses inside any shrink-to-fit parent — pin the ratio and let width drive it. */ width: 100%; height: auto; aspect-ratio: 320 / 250; overflow: visible; filter: drop-shadow(0 24px 34px rgba(120,82,20,.22)); } .pan__shadow { fill: rgba(120,82,20,.13); } .pan__body { fill: #4A3A2A; } .pan__inner { fill: #2E241A; } .pan__handle { fill: #3A2C1E; } .egg__white { fill: #FFFDF6; stroke: rgba(51,36,15,.1); stroke-width: 1.4; } .egg__yolk { fill: var(--yolk); } .egg__shine { fill: rgba(255,255,255,.7); } .egg--1 { animation: eggWobble 4.2s ease-in-out infinite; transform-origin: 118px 128px; } .egg--2 { animation: eggWobble 4.2s ease-in-out .8s infinite; transform-origin: 188px 126px; } @keyframes eggWobble { 0%,100% { transform: scale(1) rotate(0deg); } 40% { transform: scale(1.035, .97) rotate(1.4deg); } 70% { transform: scale(.98, 1.02) rotate(-1deg); } } .sizzle circle { fill: rgba(255,255,255,.65); } .sizzle circle:nth-child(1) { animation: sizzle 1.6s ease-out infinite; } .sizzle circle:nth-child(2) { animation: sizzle 1.6s ease-out .3s infinite; } .sizzle circle:nth-child(3) { animation: sizzle 1.6s ease-out .65s infinite; } .sizzle circle:nth-child(4) { animation: sizzle 1.6s ease-out .95s infinite; } .sizzle circle:nth-child(5) { animation: sizzle 1.6s ease-out 1.25s infinite; } @keyframes sizzle { 0% { transform: translateY(0) scale(.4); opacity: 0; } 35% { opacity: .9; } 100% { transform: translateY(-26px) scale(1.2); opacity: 0; } } .pan__steam { position: absolute; top: 6%; left: 50%; translate: -50% 0; display: flex; gap: 26px; } .pan__steam i { display: block; width: 10px; height: 62px; border-radius: 999px; background: linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(4px); animation: steam 3.4s ease-in-out infinite; } .pan__steam i:nth-child(2) { animation-delay: .9s; height: 82px; } .pan__steam i:nth-child(3) { animation-delay: 1.7s; } @keyframes steam { 0% { transform: translateY(14px) scaleY(.6); opacity: 0; } 40% { opacity: .85; } 100% { transform: translateY(-46px) scaleY(1.25) translateX(10px); opacity: 0; } } .scrollcue { position: absolute; bottom: 1.8rem; left: 50%; translate: -50% 0; width: 26px; height: 44px; border-radius: 999px; border: 2px solid var(--line-strong); z-index: 2; } .scrollcue__egg { position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 8px; height: 10px; border-radius: 50% 50% 48% 48%; background: var(--yolk-rich); animation: cueDrop 2s var(--ease-out) infinite; } @keyframes cueDrop { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 75% { transform: translateY(18px); opacity: 0; } 100% { transform: translateY(18px); opacity: 0; } } /* ---------- 11. Marquee ---------- */ .marquee { background: var(--ink); color: var(--yolk); padding: .95rem 0; overflow: hidden; white-space: nowrap; border-block: 3px solid var(--yolk); } .marquee__track { display: inline-flex; align-items: center; gap: 1.6rem; padding-left: 1.6rem; animation: marquee 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee span { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; } .marquee b { color: var(--yolk-deep); font-size: .6rem; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- 12. Story ---------- */ .story { background: var(--cream); } .story__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .story__copy p { color: var(--ink-soft); max-width: 52ch; } .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.4rem; padding-top: 2rem; border-top: 1px dashed var(--line-strong); } .stat__num { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -.04em; color: var(--yolk-rich); } .stat__label { display: block; margin-top: .4rem; font-size: .87rem; line-height: 1.35; color: var(--ink-soft); } .story__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } .fcard { padding: 1.6rem 1.4rem; border-radius: var(--radius); background: var(--white-egg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); transform-style: preserve-3d; transition: transform .35s var(--ease-out), box-shadow .35s ease; } .fcard:hover { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); } .fcard:nth-child(even) { margin-top: 1.8rem; } .fcard h3 { font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem; } .fcard p { margin: 0; font-size: .93rem; color: var(--ink-soft); line-height: 1.5; } .fcard__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1rem; border-radius: 16px; background: var(--shell-warm); transition: transform .45s var(--ease-spring), background .3s ease; } .fcard:hover .fcard__icon { transform: rotate(-10deg) scale(1.08); background: var(--yolk); } .fcard__icon svg { width: 30px; height: 30px; } .i-w { fill: var(--white-egg); stroke: var(--ink); stroke-width: 1.6; } .i-y { fill: var(--yolk-rich); } /* ---------- 13. Menu ---------- */ .menu { background: var(--shell); } .menu::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(232,137,11,.09) 1.5px, transparent 1.6px); background-size: 26px 26px; pointer-events: none; } .menu > .wrap { position: relative; } .menu__tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; position: sticky; top: calc(var(--header-h) - 8px); z-index: 50; padding: .7rem; border-radius: 999px; background: rgba(255, 251, 240, .88); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); } .tabs { position: relative; display: flex; flex-wrap: wrap; gap: .2rem; } .tab { position: relative; z-index: 1; padding: .55rem 1.05rem; border: none; border-radius: 999px; background: transparent; font-size: .92rem; font-weight: 500; color: var(--ink-soft); transition: color .25s ease; white-space: nowrap; } .tab.is-active { color: var(--ink); font-weight: 600; } .tabs__pill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: var(--yolk); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease-spring), width .45s var(--ease-spring); } .search { position: relative; display: flex; align-items: center; flex: 0 1 260px; } .search__icon { position: absolute; left: .9rem; width: 17px; height: 17px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .search input { width: 100%; padding: .6rem 1rem .6rem 2.5rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white-egg); font: inherit; font-size: .92rem; color: var(--ink); transition: border-color .25s ease, box-shadow .25s ease; } .search input::placeholder { color: var(--ink-faint); } .search input:focus { outline: none; border-color: var(--yolk-deep); box-shadow: 0 0 0 4px rgba(255,201,60,.3); } .menu__grid { columns: 3; column-gap: 1.4rem; } .mcat { break-inside: avoid; margin: 0 0 1.4rem; padding: 1.7rem 1.6rem 1.4rem; border-radius: var(--radius); background: var(--white-egg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); transition: box-shadow .35s ease, transform .35s var(--ease-out), opacity .35s ease; } .mcat:hover { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line-strong); } .mcat.is-hidden { display: none; } .mcat--feature { background: linear-gradient(160deg, var(--yolk) 0%, var(--yolk-soft) 100%); box-shadow: var(--shadow-md); } .mcat--feature .mitem__price { background: rgba(255,255,255,.55); } .mcat--feature .mitem__dots { border-color: rgba(51,36,15,.28); } .mcat__title { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.025em; } .mcat__title--sub { margin-top: 1.6rem; } .mcat__mark { width: 15px; height: 13px; flex: none; border-radius: 60% 60% 55% 55%; background: var(--white-egg); box-shadow: inset 0 0 0 1.5px rgba(51,36,15,.22); position: relative; } .mcat__mark::after { content: ""; position: absolute; inset: 3px 5px 3.5px 3px; border-radius: 50%; background: var(--yolk-rich); } .mcat__note { margin: -.55rem 0 1rem; font-size: .87rem; color: var(--ink-soft); font-style: italic; } .mcat--feature .mcat__note { color: rgba(51,36,15,.72); } .mlist { list-style: none; margin: 0; padding: 0; } .mlist--cols { columns: 2; column-gap: 1.6rem; } .mitem { display: flex; align-items: baseline; gap: .5rem; padding: .42rem .5rem; margin-inline: -.5rem; border-radius: 10px; break-inside: avoid; transition: background .22s ease, transform .28s var(--ease-out); } .mitem:hover { background: var(--shell-warm); transform: translateX(5px); } .mcat--feature .mitem:hover { background: rgba(255,255,255,.42); } .mitem.is-hidden { display: none; } .mitem__name { font-size: .96rem; font-weight: 500; } .mitem__dots { flex: 1; min-width: 12px; border-bottom: 1.5px dotted var(--line-strong); transform: translateY(-3px); } .mitem__price { font-family: var(--font-display); font-weight: 700; font-size: .96rem; padding: .1rem .45rem; border-radius: 7px; background: var(--shell-warm); transition: transform .3s var(--ease-spring), background .25s ease, color .25s ease; } .mitem:hover .mitem__price { transform: scale(1.12); background: var(--yolk-rich); color: var(--white-egg); } .mitem__price--ask { font-size: .82rem; font-weight: 600; font-family: var(--font-body); color: var(--ink-faint); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); } mark { background: var(--yolk); color: var(--ink); border-radius: 4px; padding: 0 2px; } .menu__empty { text-align: center; padding: 3rem 1rem; font-size: 1.05rem; color: var(--ink-soft); } .menu__footnote { margin: 2.2rem auto 0; max-width: 70ch; text-align: center; font-size: .88rem; color: var(--ink-faint); } .menu__footnote em { color: var(--ink-soft); } /* ---------- 14. Reviews ---------- */ .reviews { background: var(--cream); } .quotes { max-width: 800px; margin-inline: auto; } .quotes__viewport { position: relative; min-height: 300px; } .quotes__track { list-style: none; margin: 0; padding: 0; } .quote { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.6rem 2rem; border-radius: var(--radius); background: var(--white-egg); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translateY(22px) scale(.97); transition: opacity .55s ease, transform .55s var(--ease-out), visibility .55s; } .quote.is-active { opacity: 1; visibility: visible; transform: none; } .quote__mark { font-family: var(--font-display); font-size: 4.5rem; line-height: .6; color: var(--yolk); margin-bottom: .6rem; } .quote blockquote { margin: 0 0 1.4rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.45; letter-spacing: -.015em; text-wrap: balance; } .quote footer { display: flex; flex-direction: column; align-items: center; gap: .3rem; } .quote__stars { color: var(--yolk-deep); letter-spacing: .15em; font-size: .95rem; } .quote cite { font-style: normal; font-weight: 600; font-size: .93rem; color: var(--ink-soft); } .quotes__nav { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.8rem; } .qbtn { width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--white-egg); font-size: 1.05rem; display: grid; place-items: center; transition: transform .3s var(--ease-spring), background .25s ease, border-color .25s ease; } .qbtn:hover { background: var(--yolk); border-color: var(--yolk); transform: scale(1.12); } .qbtn:active { transform: scale(.94); } .qdots { display: flex; gap: .5rem; } .qdot { width: 11px; height: 13px; padding: 0; border: none; border-radius: 50% 50% 48% 48%; background: var(--line-strong); transition: background .3s ease, transform .35s var(--ease-spring); } .qdot.is-active { background: var(--yolk-rich); transform: scale(1.3); } /* ---------- 15. Visit ---------- */ .visit { background: var(--shell); } .visit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .hours { list-style: none; margin: 1.4rem 0 1.2rem; padding: 0; } .hours li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .95rem; border-radius: 12px; border-bottom: 1px dashed var(--line); transition: background .3s ease, transform .3s var(--ease-out); } .hours li:last-child { border-bottom: none; } .hours li:hover { background: var(--white-egg); transform: translateX(5px); } .hours li span { font-weight: 500; } .hours li b { font-family: var(--font-display); font-weight: 700; font-size: .96rem; } .hours li.is-today { background: var(--yolk); box-shadow: var(--shadow-sm); border-bottom-color: transparent; } .hours li.is-today span::after { content: "Today"; margin-left: .6rem; padding: .1rem .45rem; border-radius: 6px; background: var(--ink); color: var(--yolk); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; } .hours__note { font-size: .88rem; color: var(--ink-faint); margin: 0; } .vcard { display: grid; gap: 1.5rem; padding: 2rem 1.8rem; border-radius: var(--radius); background: var(--white-egg); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); transform-style: preserve-3d; transition: transform .35s var(--ease-out), box-shadow .35s ease; } .vcard__row { display: flex; gap: 1.1rem; align-items: flex-start; } .vcard__ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--shell-warm); transition: background .3s ease, transform .4s var(--ease-spring); } .vcard__row:hover .vcard__ico { background: var(--yolk); transform: rotate(-9deg) scale(1.07); } .vcard__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; } .vcard h3 { margin: 0 0 .2rem; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; } .vcard p { margin: 0 0 .35rem; font-size: .93rem; color: var(--ink-soft); line-height: 1.5; } .link { display: inline-block; font-weight: 600; font-size: .93rem; color: var(--yolk-rich); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease-out); } .link:hover { background-size: 100% 2px; } /* ---------- 16. Long read ---------- */ .writeup { background: var(--white-egg); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); } .writeup__grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; max-width: 980px; margin-inline: auto; } /* sticky table of contents, tracks the section you are reading */ .writeup__toc { position: sticky; top: calc(var(--promo-h) + var(--header-h) + 1.6rem); padding-left: 1rem; border-left: 2px solid var(--line); } .writeup__toc-title { margin: 0 0 .7rem; padding-left: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); } .writeup__toc ol { list-style: none; margin: 0; padding: 0; } .writeup__toc a { display: block; padding: .34rem .6rem; border-radius: 9px; font-size: .9rem; line-height: 1.35; color: var(--ink-soft); text-decoration: none; transition: background .25s ease, color .25s ease, transform .3s var(--ease-out); } .writeup__toc a:hover { background: var(--shell-warm); transform: translateX(3px); } .writeup__toc a.is-current { background: var(--yolk); color: var(--ink); font-weight: 600; } /* the article column */ .writeup__body { max-width: 68ch; } .writeup__body .link { display: inline; } .writeup__lede { margin: 0 0 2.5rem; font-size: 1.12rem; line-height: 1.6; } .writeup__lede::first-letter { float: left; margin: .08em .1em 0 0; font-family: var(--font-display); font-weight: 900; font-size: 3.4em; line-height: .78; color: var(--yolk-rich); } .writeup__block + .writeup__block { margin-top: 2.6rem; } .writeup__block h3 { position: relative; margin: 0 0 .8rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; } /* same egg silhouette as the review dots, sitting out in the gutter */ .writeup__block h3::before { content: ""; position: absolute; left: -1.7rem; top: .4em; width: 12px; height: 14px; border-radius: 50% 50% 48% 48%; background: var(--yolk); } .writeup__block p { margin: 0 0 1.05rem; color: var(--ink-soft); } .writeup__block p:last-child { margin-bottom: 0; } /* ---------- 17. CTA ---------- */ .cta { position: relative; padding: clamp(4rem, 8vw, 6.5rem) 0; background: linear-gradient(135deg, var(--yolk) 0%, var(--yolk-soft) 50%, var(--yolk-deep) 100%); overflow: hidden; text-align: center; } .cta__eggs { position: absolute; inset: 0; pointer-events: none; } .cta__eggs i { position: absolute; width: 44px; height: 40px; border-radius: 52% 48% 45% 55%; background: rgba(255,255,255,.36); animation: drift 17s ease-in-out infinite; } .cta__eggs i:nth-child(1) { top: 12%; left: 6%; animation-delay: 0s; scale: 1.4; } .cta__eggs i:nth-child(2) { top: 68%; left: 14%; animation-delay: -3s; scale: .8; } .cta__eggs i:nth-child(3) { top: 22%; left: 82%; animation-delay: -6s; scale: 1.7; } .cta__eggs i:nth-child(4) { top: 74%; left: 90%; animation-delay: -9s; scale: 1; } .cta__eggs i:nth-child(5) { top: 48%; left: 46%; animation-delay: -12s; scale: 2.1; opacity: .5; } .cta__eggs i:nth-child(6) { top: 8%; left: 60%; animation-delay: -15s; scale: .9; } @keyframes drift { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(30px,-26px) rotate(22deg); } 66% { transform: translate(-22px,18px) rotate(-16deg); } } .cta__inner { position: relative; z-index: 1; } .cta h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.04em; margin: 0 auto 2rem; max-width: 20ch; text-wrap: balance; } .cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; } /* ---------- 18. Footer ---------- */ .footer { background: var(--ink); color: var(--shell); padding: 3.5rem 0 2rem; } .footer__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 2rem; align-items: start; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,243,208,.16); } .footer .brand__text { font-size: 1.5rem; color: var(--shell); } .footer .brand__text em { color: var(--yolk); } .footer__brand p { margin: .7rem 0 0; max-width: 38ch; font-size: .93rem; color: rgba(255,243,208,.62); } .footer__nav { display: flex; flex-direction: column; gap: .55rem; } .footer__nav a { font-size: .94rem; text-decoration: none; color: rgba(255,243,208,.75); width: fit-content; transition: color .25s ease, transform .3s var(--ease-out); } .footer__nav a:hover { color: var(--yolk); transform: translateX(5px); } .footer__social { display: flex; gap: .6rem; } .footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,243,208,.22); transition: background .3s ease, transform .35s var(--ease-spring), border-color .3s ease; } .footer__social a:hover { background: var(--yolk); border-color: var(--yolk); transform: translateY(-4px) rotate(-8deg); } .footer__social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; } .footer__social a:hover svg { stroke: var(--ink); } .footer__social a:first-child svg { fill: currentColor; stroke: none; } .footer__social a:first-child:hover svg { fill: var(--ink); } .footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-top: 1.4rem; font-size: .85rem; color: rgba(255,243,208,.5); } .footer__legal p { margin: 0; } .footer__legal a { color: var(--yolk); text-decoration: none; } .footer__legal a:hover { text-decoration: underline; } /* ---------- 19. Back to top ---------- */ .totop { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 800; width: 52px; height: 52px; border: none; border-radius: 50% 50% 47% 47%; background: var(--yolk); box-shadow: var(--shadow-md); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(18px) scale(.85); transition: opacity .35s ease, transform .45s var(--ease-spring), visibility .35s, background .25s ease; } .totop.is-on { opacity: 1; visibility: visible; transform: none; } .totop:hover { background: var(--yolk-rich); transform: translateY(-4px) scale(1.06); } .totop svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 20. Scroll reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } [data-reveal].is-in { opacity: 1; transform: none; } .hero__title .line[data-reveal] { opacity: 1; transform: none; } /* ---------- 21. Responsive ---------- */ @media (max-width: 1080px) { .menu__grid { columns: 2; } /* the banner is a fixed height, so shed the lead-in well before it would wrap */ .promo__lead { display: none; } } @media (max-width: 900px) { .promo__map { display: none; } .hero__inner, .story__grid, .visit__grid { grid-template-columns: 1fr; } .hero { min-height: auto; } .hero__art { order: -1; width: 100%; max-width: 420px; margin-inline: auto; } .story__cards { margin-top: 1rem; } .footer__inner { grid-template-columns: 1fr 1fr; } .footer__social { grid-column: 1 / -1; } /* the sticky sidebar becomes a row of chips above the article */ .writeup__grid { grid-template-columns: 1fr; } .writeup__toc { position: static; padding: 1rem 1.1rem; margin-bottom: 2.2rem; border-left: none; border-radius: var(--radius-sm); background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); } .writeup__toc-title { padding-left: 0; } .writeup__toc ol { display: flex; flex-wrap: wrap; gap: .4rem; } .writeup__toc a { padding: .34rem .85rem; background: var(--white-egg); box-shadow: inset 0 0 0 1px var(--line); } .writeup__toc a:hover { transform: none; } .writeup__body { max-width: none; } .writeup__block h3::before { position: static; display: inline-block; margin-right: .55rem; vertical-align: baseline; } } @media (max-width: 780px) { .header__cta { display: none; } .burger { display: grid; } .nav { position: fixed; inset: calc(var(--promo-h) + var(--header-h) + 6px) 1rem auto 1rem; flex-direction: column; gap: .1rem; padding: .7rem; border-radius: var(--radius); background: var(--white-egg); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.98); transition: opacity .3s ease, transform .35s var(--ease-out), visibility .3s; } .nav.is-open { opacity: 1; visibility: visible; transform: none; } .nav__link { padding: .8rem 1rem; font-size: 1.05rem; } .nav__pill { display: none; } .menu__tools { position: static; border-radius: var(--radius); flex-direction: column; align-items: stretch; } .tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; } .tabs__pill { display: none; } .tab.is-active { background: var(--yolk); } .search { flex: 1 1 auto; } .promo__pc { display: none; } } @media (max-width: 700px) { /* banner goes two-line: the tag above, the address and date below */ :root { --promo-h: 56px; } .promo { font-size: .8rem; } .promo__inner { flex-wrap: wrap; gap: .15rem .5rem; padding-right: 1.9rem; } .promo__text { width: 100%; text-align: center; line-height: 1.3; } } @media (max-width: 640px) { .menu__grid { columns: 1; } .mlist--cols { columns: 1; } .story__cards { grid-template-columns: 1fr; } .fcard:nth-child(even) { margin-top: 0; } .stats { grid-template-columns: 1fr; gap: 1.2rem; text-align: left; } .footer__inner { grid-template-columns: 1fr; } .quotes__viewport { min-height: 380px; } .quote { padding: 2rem 1.3rem; } } @media (max-width: 380px) { :root { --promo-h: 64px; } /* the address wraps to a third line down here */ } /* ---------- 22. Motion & print preferences ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .hero__title .line > span { transform: none !important; } .eggcursor, .eggcursor-glow { display: none; } body.has-eggcursor, body.has-eggcursor * { cursor: auto; } } @media print { .header, .totop, .loader, .eggcursor, .eggcursor-glow, .progress, .marquee, .cta, .hero__art, .scrollcue, .menu__tools, .quotes__nav, .writeup__toc { display: none !important; } :root { --promo-h: 0px; } .promo { position: static; height: auto; color: #000; background: none; } .promo__close { display: none; } body { background: #fff; color: #000; } .menu__grid { columns: 2; } [data-reveal] { opacity: 1 !important; transform: none !important; } }