/* PitchSite design system. Hand-crafted, deliberate. Each business category gets its own palette and type voice via the data-category attribute on ; they share one engineered layout, not one look. */ /* Fonts are self-hosted variable fonts (no external requests, no keys): Fraunces — a warm, characterful display serif with a soft bakery feel; Nunito Sans — a friendly, rounded body face. One file per family, the weight axis is variable. */ @font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap; } @font-face { font-family: "Nunito Sans"; src: url("assets/fonts/nunito.woff2") format("woff2"); font-style: normal; font-weight: 200 1000; font-display: swap; } :root { --ink: #1c2126; --paper: #ffffff; --muted: #5c6670; --line: #e3e6e9; --radius: 14px; --shadow: 0 14px 40px rgb(20 24 28 / 0.1); --font-display: "Fraunces", Georgia, serif; --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* --- category themes ------------------------------------------------- */ html[data-category="restaurant"] { --brand: #a8321f; --brand-soft: #f7e9e4; --hero-bg: #2a1510; --hero-ink: #fdf3ee; } html[data-category="pizza"] { --brand: #b53a17; --brand-soft: #f9e9e2; --hero-bg: #261209; --hero-ink: #fdf1ea; --accent: #d9a441; } html[data-category="mexican"] { --brand: #b3202a; --brand-soft: #fae8e7; --hero-bg: #210f0d; --hero-ink: #fdf1ef; --accent: #2e8b57; } html[data-category="diner"] { --brand: #c05621; --brand-soft: #f9ece2; --hero-bg: #191319; --hero-ink: #f7eff2; --accent: #4a5d82; } html[data-category="bar"] { --brand: #a85c1f; --brand-soft: #f8ecdc; --hero-bg: #1c1410; --hero-ink: #faf1e4; --accent: #7d9a3c; } html[data-category="italian"] { --brand: #b3452b; --brand-soft: #f8e9e2; --hero-bg: #1f140e; --hero-ink: #faf2e8; --accent: #5a8f3c; } html[data-category="shawarma"] { --brand: #bf5b1e; --brand-soft: #f8ecdd; --hero-bg: #231609; --hero-ink: #fbf2e4; --accent: #5a8f3c; } html[data-category="froyo"] { --brand: #d65a8a; --brand-soft: #fdeef4; --hero-bg: #2a1220; --hero-ink: #fdf1f6; --accent: #f5a8c3; } html[data-category="cafe"] { --brand: #6f4e2e; --brand-soft: #f3ead9; --hero-bg: #241a10; --hero-ink: #f8f1e4; } html[data-category="donut"] { --brand: #b3506a; --brand-soft: #faeef2; --hero-bg: #311722; --hero-ink: #fdf1f5; --accent: #d98e3d; } html[data-category="bakery"] { --brand: #a86b1f; --brand-soft: #f7efdd; --hero-bg: #2b1c0e; --hero-ink: #faf3e4; --accent: #7c4a12; } html[data-category="salon"] { --brand: #a84a6e; --brand-soft: #f9e9ef; --hero-bg: #2a1220; --hero-ink: #fdf0f5; } html[data-category="barber"] { --brand: #b3392f; --brand-soft: #fbeae7; --hero-bg: #1d1412; --hero-ink: #f7eeea; } html[data-category="plumber"] { --brand: #1d5c8f; --brand-soft: #e6eef6; --hero-bg: #10233a; --hero-ink: #eef4fa; } html[data-category="electrician"] { --brand: #b47d12; --brand-soft: #faf0d8; --hero-bg: #241d0a; --hero-ink: #faf4e2; } html[data-category="auto"] { --brand: #c34a2c; --brand-soft: #f8e8e2; --hero-bg: #191313; --hero-ink: #f6efec; } html[data-category="contractor"] { --brand: #b5792a; --brand-soft: #f7ecdc; --hero-bg: #241c10; --hero-ink: #faf3e8; } html[data-category="cleaning"] { --brand: #0e7c6b; --brand-soft: #e3f2ef; --hero-bg: #0b2420; --hero-ink: #eaf6f3; } html[data-category="retail"] { --brand: #3f4ba8; --brand-soft: #e9ebf9; --hero-bg: #161a33; --hero-ink: #eff0fb; } html[data-category="medical"] { --brand: #2a6f97; --brand-soft: #e6f0f7; --hero-bg: #122b3c; --hero-ink: #eef6fb; } html[data-category="dental"] { --brand: #2e7d6b; --brand-soft: #e5f2ee; --hero-bg: #10231e; --hero-ink: #eef7f4; } html[data-category="fitness"] { --brand: #7a8c10; --brand-soft: #f0f4dd; --hero-bg: #14160a; --hero-ink: #f4f7e6; } html[data-category="realtor"] { --brand: #8a6d1d; --brand-soft: #f6efdc; --hero-bg: #20190a; --hero-ink: #f8f2e2; } html[data-category="legal"] { --brand: #3d5c4c; --brand-soft: #e8efeb; --hero-bg: #16211b; --hero-ink: #edf3ef; } html[data-category="hotel"] { --brand: #7d2a32; --brand-soft: #f6e7e9; --hero-bg: #241114; --hero-ink: #f9eff0; } html[data-category="other"] { --brand: #44505c; --brand-soft: #e9edf1; --hero-bg: #181d23; --hero-ink: #eff2f5; } /* --- base ------------------------------------------------------------ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; } .container { width: min(1080px, 92%); margin-inline: auto; } a { color: var(--brand); } img, iframe { max-width: 100%; display: block; } /* --- header ---------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 10; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.9rem; } .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--ink); } .nav { display: flex; gap: 1.4rem; } .nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; } .nav a:hover { color: var(--brand); } /* --- hero ------------------------------------------------------------ */ .hero { background: var(--hero-bg); color: var(--hero-ink); perspective: 1200px; overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 8vw, 5.5rem); will-change: transform; } .hero-kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--brand); font-weight: 700; margin-bottom: 0.9rem; } .hero-title { font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 4.1rem); font-weight: 650; line-height: 1.06; max-width: 16ch; text-wrap: balance; } .hero-tagline { margin-top: 1.1rem; font-size: clamp(1.05rem, 2.2vw, 1.28rem); max-width: 44ch; color: var(--hero-ink); opacity: 0.85; } .hero-actions { margin-top: 2rem; display: flex; gap: 0.9rem; flex-wrap: wrap; } .hero-address { margin-top: 1.4rem; display: flex; align-items: center; gap: 0.55rem; color: var(--hero-ink); opacity: 0.92; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; } .hero-hours { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.55rem; color: var(--hero-ink); opacity: 0.85; font-size: 1rem; } /* The 3D hero scene: a self-hosted Three.js canvas that floats below the copy. Transparent background so the hero photo shows through; pointer-events none so it never blocks the call button. The scene pauses when off-screen and honors prefers-reduced-motion (3d-hero.js). */ .hero-3d { position: relative; height: clamp(220px, 30vw, 300px); margin-top: 1.6rem; pointer-events: none; filter: drop-shadow(0 14px 30px rgb(0 0 0 / 0.35)); } .hero-3d canvas { display: block; width: 100%; height: 100%; } /* Hero photos: a hand-placed collage of the shop's real photos — visible on the front page, right in the hero. */ .hero-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.9rem; transform-style: preserve-3d; } /* Each photo sits at its own depth, so the cursor tilt reads as real 3D separation (the collage was already hand-arranged; this layers depth under the existing arrangement). */ .hero-photo { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 50px rgb(0 0 0 / 0.35); transform: translateZ(var(--depth, 0px)) rotate(var(--tilt, 0deg)); background: var(--paper); will-change: transform; } .hero-photo:nth-child(1) { --tilt: -2deg; --depth: 0px; } .hero-photo:nth-child(2) { --tilt: 2.5deg; --depth: 34px; position: relative; top: 0.7rem; } .hero-photo:nth-child(3) { --tilt: -1.5deg; --depth: 52px; position: relative; top: -0.4rem; } .hero-photo:nth-child(4) { --tilt: 2deg; --depth: 18px; } .hero-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* Hero with a real shop-front photo as a full-bleed background. */ .hero-photo-bg { position: relative; isolation: isolate; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1; filter: saturate(1.05); transform: scale(1.2); will-change: transform; } .hero-photo-bg::after { /* Darken the photo so cream text stays readable on any storefront. */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.55) 45%, var(--hero-bg) 100%); } /* --- instagram reel ---------------------------------------------------- */ .reel-frame { position: relative; width: min(100%, 440px); margin: 1.8rem auto 0; aspect-ratio: 9 / 16; max-height: 640px; border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: 0 18px 50px rgb(0 0 0 / 0.2); } .reel-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); } .btn { display: inline-block; padding: 0.85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 0.98rem; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { box-shadow: 0 8px 22px rgb(0 0 0 / 0.25); } .btn-secondary { border: 1px solid currentColor; color: var(--hero-ink); } .btn-secondary:hover { background: rgb(255 255 255 / 0.08); } .btn-social { border: 1px solid rgb(255 255 255 / 0.4); color: var(--hero-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; } .btn-social::before { content: ""; width: 1.05em; height: 1.05em; background: currentColor; mask: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202.2c3.2%200%203.6%200%204.8.1%201.2.1%201.9.2%202.3.4.6.2%201%20.5%201.4.9.4.4.7.8.9%201.4.2.4.4%201.1.4%202.3.1%201.2.1%201.6.1%204.8s0%203.6-.1%204.8c-.1%201.2-.2%201.9-.4%202.3-.2.6-.5%201-.9%201.4-.4.4-.8.7-1.4.9-.4.2-1.1.4-2.3.4-1.2.1-1.6.1-4.8.1s-3.6%200-4.8-.1c-1.2-.1-1.9-.2-2.3-.4a3.8%203.8%200%200%201-1.4-.9%203.8%203.8%200%200%201-.9-1.4c-.2-.4-.4-1.1-.4-2.3-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.9.4-2.3.2-.6.5-1%20.9-1.4.4-.4.8-.7%201.4-.9.4-.2%201.1-.4%202.3-.4%201.2-.1%201.6-.1%204.8-.1zm0-2.2C8.7%200%208.3%200%207%20.1%205.8.1%204.9.3%204.2.5c-.9.3-1.6.7-2.4%201.4C1.1%202.6.7%203.3.4%204.2.2%204.9%200%205.8%200%207%200%208.3%200%208.7%200%2012s0%203.7.1%205c.1%201.2.3%202.1.5%202.8.3.9.7%201.6%201.4%202.4.8.8%201.5%201.1%202.4%201.4.7.2%201.6.4%202.8.4%201.3.1%201.7.1%205%20.1s3.7%200%205-.1c1.2-.1%202.1-.3%202.8-.5.9-.3%201.6-.7%202.4-1.4.8-.8%201.1-1.5%201.4-2.4.2-.7.4-1.6.4-2.8.1-1.3.1-1.7.1-5s0-3.7-.1-5c-.1-1.2-.3-2.1-.5-2.8-.3-.9-.7-1.6-1.4-2.4C21.4%201.1%2020.7.7%2019.8.4%2019.1.2%2018.2%200%2017%200%2013.7%200%2013.3%200%2012%200zm0%205.8A6.2%206.2%200%201%200%2018.2%2012%206.2%206.2%200%200%200%2012%205.8zm0%2010.3A4.1%204.1%200%201%201%2016.1%2012%204.1%204.1%200%200%201%2012%2016.1zm6.4-10.5a1.5%201.5%200%201%200%201.5%201.5%201.5%201.5%200%200%200-1.5-1.5z%22/%3E%3C/svg%3E) center / contain no-repeat; } .btn-social:hover { background: rgb(255 255 255 / 0.12); } /* --- sections -------------------------------------------------------- */ .section { padding-block: clamp(3rem, 7vw, 5.5rem); } .section-alt { background: var(--brand-soft); } .section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 1rem; text-wrap: balance; } .section-body { max-width: 68ch; } .section-meta { margin-top: 1rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: baseline; } .icon { width: 1.1em; height: 1.1em; fill: var(--brand); flex: none; position: relative; top: 0.12em; } /* --- services -------------------------------------------------------- */ .services { list-style: none; display: grid; gap: 0.8rem; margin-top: 1.2rem; } .service { display: flex; align-items: center; gap: 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.95rem 1.1rem; box-shadow: var(--shadow); } .service .icon { width: 1.25em; height: 1.25em; top: 0; } /* --- gallery --------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .gallery-item { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); } .gallery-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.25s ease; } .gallery-item:hover img { transform: scale(1.03); } .gallery-more { margin-top: 1.25rem; color: var(--muted); font-size: 0.95rem; } .gallery-more a { font-weight: 600; color: var(--brand); text-decoration: none; } .gallery-more a:hover { text-decoration: underline; } @media (max-width: 560px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; } } /* --- contact --------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.5rem; align-items: start; } .contact-row { margin-bottom: 0.6rem; display: flex; gap: 0.5rem; align-items: baseline; } .contact-row a { font-weight: 600; text-decoration: none; } .contact-row a:hover { text-decoration: underline; } /* Map embeds load async: a shimmer skeleton stays in place until the iframe fires load, then the skeleton is removed. That is the only loading treatment this design uses. */ .map-skeleton { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(100deg, rgb(0 0 0 / 0.06) 40%, rgb(255 255 255 / 0.5) 50%, rgb(0 0 0 / 0.06) 60%) var(--brand-soft); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } .map-skeleton .map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.3s ease; } .map-skeleton.loaded { animation: none; background: var(--brand-soft); } .map-skeleton.loaded .map { opacity: 1; } @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } } /* --- pinned GLB scroll scene (shared by every GLB site) ---------------- */ /* NOTE: no overflow:hidden here — non-visible overflow on an ancestor breaks position:sticky and the pinned scroll scene never pins. */ .assemble-section { position: relative; } .assemble-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(127, 127, 127, 0.14) 1px, transparent 1.4px); background-size: 22px 22px; pointer-events: none; } .assemble-tall { height: 320vh; } .assemble-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; overflow: hidden; } .assemble-headline { font-size: clamp(1.7rem, 3.6vw, 2.8rem); margin-bottom: 0.6rem; } .assemble-text { max-width: 36rem; margin: 0 auto 1.2rem; } .assemble-hint { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; margin-bottom: 0.9rem; } /* The 3D stage in the pinned scroll scene gets an explicit, centered size on every screen (the old unstyled div sized itself differently per device and let the models drift past the frame edges). */ .scroll-3d { width: min(560px, 94%); height: clamp(280px, 38vh, 380px); margin: 0.2rem auto 0; position: relative; } .scroll-3d canvas { display: block; width: 100%; height: 100%; } @media (max-width: 720px) { .assemble-tall { height: 240vh; } .assemble-sticky { padding: 0.6rem; } } @media (prefers-reduced-motion: reduce) { .assemble-tall { height: auto; } .assemble-sticky { position: static; height: auto; padding: 3rem 1rem; } } /* --- footer ---------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding-block: 1.4rem; color: var(--muted); font-size: 0.92rem; } /* --- responsive ------------------------------------------------------ */ @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .hero-photos { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } .nav { gap: 1rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .map-skeleton { animation: none; } .hero-bg { transform: none; } .hero-inner { transform: none; } .hero-photos { transform: none; } .hero-photo { transform: translateZ(var(--depth, 0px)) rotate(var(--tilt, 0deg)); } }