/* 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. */ :root { --ink: #1c2126; --paper: #ffffff; --muted: #5c6670; --line: #e3e6e9; --radius: 12px; --shadow: 0 10px 30px rgb(20 24 28 / 0.08); --font-display: Georgia, "Times New Roman", serif; --font-body: -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="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 { padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3.5rem, 8vw, 6rem); } .hero-kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--brand); font-weight: 600; margin-bottom: 0.9rem; } .hero-title { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.08; max-width: 18ch; text-wrap: balance; } .hero-tagline { margin-top: 1.1rem; font-size: clamp(1.05rem, 2.4vw, 1.3rem); max-width: 46ch; color: var(--hero-ink); opacity: 0.82; } .hero-actions { margin-top: 2rem; display: flex; gap: 0.9rem; flex-wrap: wrap; } .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); } /* --- 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; } /* --- 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: 720px) { .contact-grid { grid-template-columns: 1fr; } .nav { gap: 1rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .map-skeleton { animation: none; } }