/* 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="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="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); } .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); } .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 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; } .hero-photo { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 50px rgb(0 0 0 / 0.35); transform: rotate(var(--tilt, 0deg)); background: var(--paper); } .hero-photo:nth-child(1) { --tilt: -2deg; } .hero-photo:nth-child(2) { --tilt: 2.5deg; position: relative; top: 0.7rem; } .hero-photo:nth-child(3) { --tilt: -1.5deg; position: relative; top: -0.4rem; } .hero-photo:nth-child(4) { --tilt: 2deg; } .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); } .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; } } /* --- 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; } }