/* ============================================================= Snap Zap Media โ€” site styles tokens.css is loaded FIRST and owns every colour, the type scale, the buttons, .wrap and the sticky masthead. Nothing in this file declares a hex value. Where a translucent tint is needed it is derived from a token with color-mix(), so the palette still lives in exactly one place. Surfaces are flat and bordered. Depth comes from a 1px hairline and a change of ground colour, never from a shadow. ============================================================= */ *{ box-sizing:border-box } /* No horizontal scrolling, at any width. On body ONLY. Setting overflow-x on makes it a scroll container and silently kills position:sticky on the masthead โ€” the same class of ancestor-overflow bug the hero script's own comment warns about. */ body{ overflow-x:hidden } html{ scroll-behavior:auto } img{ max-width:100%; height:auto } /* ---------- screen-reader-only text ---------- */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* ---------- skip link ---------- */ .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--surface); color:var(--ink); padding:.75rem 1.1rem; border:1px solid var(--surface-alt); border-radius:var(--radius); text-decoration:none; } .skip:focus{ left:1rem; top:1rem } /* ---------- masthead ---------- tokens.css makes .site-head sticky. DESIGN-SYSTEM ยง8 says the header is NOT sticky on mobile, so the single 880px breakpoint below releases it. The booking CTA is never sticky anywhere. */ /* Direct child only โ€” the mobile menu below has its own .wrap and must not inherit the masthead's flex row, which would shrink the links to content. */ .site-head > .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:.85rem; } .brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:800; font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap; } .brand-mark{ width:30px; height:30px; display:block; border-radius:5px; flex:none } .brand span{ color:var(--accent) } .site-nav{ display:flex; gap:1.6rem; flex-wrap:wrap } .site-nav a{ color:var(--ink-muted); text-decoration:none; font-size:var(--step--1); padding-block:.2rem; border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease; } .site-nav a:hover, .site-nav a:focus-visible{ color:var(--ink); border-bottom-color:var(--accent-deep) } .site-nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent) } /* ---------- mobile menu ---------- */ .nav-toggle{ display:none; background:transparent; color:var(--ink); border:1px solid var(--hairline-2); border-radius:var(--radius); padding:.72rem .78rem; cursor:pointer; line-height:0; transition:border-color .18s ease, color .18s ease; } .nav-toggle:hover, .nav-toggle:focus-visible{ border-color:var(--accent-deep); color:var(--accent) } .nav-toggle svg{ width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square } .nav-toggle .bar-x{ display:none } .nav-toggle[aria-expanded="true"] .bar-x{ display:block } .nav-toggle[aria-expanded="true"] .bar-lines{ display:none } .mobile-nav{ display:none; border-top:1px solid var(--hairline); background:var(--ground) } .mobile-nav[data-open="true"]{ display:block } .mobile-nav ul{ list-style:none; margin:0; padding:.5rem 0 1.1rem } .mobile-nav a{ display:block; padding:.85rem .2rem; color:var(--ink-muted); text-decoration:none; font-size:var(--step-0); border-bottom:1px solid var(--hairline); } .mobile-nav a:hover, .mobile-nav a:focus-visible{ color:var(--accent) } .mobile-nav a[aria-current="page"]{ color:var(--ink) } @media (max-width:880px){ .site-head{ position:static } .site-nav{ display:none } .nav-toggle{ display:inline-flex } } /* ---------- page rhythm ---------- */ .section{ padding-block:clamp(3.25rem,7vw,6rem); border-top:1px solid var(--hairline) } .section:first-of-type{ border-top:0 } .section > h2{ margin:0 0 .9rem } .page-head{ padding-block:clamp(2.75rem,6vw,4.5rem) clamp(1.5rem,3vw,2.25rem) } .page-head h1{ margin:0 } .lede{ font-size:var(--step-1); line-height:1.5; margin:1.1rem 0 0 } .section-intro{ margin:0 0 2.25rem } .label{ display:block; margin:0 0 .75rem } /* ---------- sequential steps (How It Works, Getting Started) ---------- */ .steps-list{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:1px; background:var(--hairline) } .steps-list > li{ background:var(--ground); padding:1.6rem 0 } .steps-list h3{ margin:0 0 .55rem } .steps-list p{ margin:0 0 .8rem } .steps-list p:last-child{ margin-bottom:0 } /* ---------- two-column inclusions table ---------- */ .inclusions{ width:100%; border-collapse:collapse; margin-top:1.5rem } .inclusions th, .inclusions td{ text-align:left; vertical-align:top; padding:1.15rem 1.25rem; border-top:1px solid var(--hairline) } .inclusions tr:nth-child(odd) th, .inclusions tr:nth-child(odd) td{ background:var(--surface) } .inclusions th{ font-family:var(--display); font-weight:700; font-size:var(--step-0); letter-spacing:-.015em; color:var(--ink); width:34%; white-space:normal } .inclusions td{ color:var(--ink-muted) } .inclusions td p{ margin:0; max-width:none } @media (max-width:700px){ .inclusions th,.inclusions td{ display:block; width:auto } .inclusions td{ border-top:0; padding-top:0 } } /* ---------- package cards ---------- */ .cards{ display:grid; gap:1.25rem; margin-top:2rem; grid-template-columns:repeat(3,minmax(0,1fr)) } @media (max-width:880px){ .cards{ grid-template-columns:1fr } } .card{ border:1px solid var(--surface-alt); background:var(--surface); border-radius:var(--radius); padding:1.9rem 1.6rem; position:relative } .card h2,.card h3{ margin:0 } .card .card-sub{ color:var(--accent); margin:.35rem 0 1rem; font-family:var(--display); font-weight:500; font-size:var(--step-0) } .card p{ margin:0 } .card[data-recommended="true"]{ border-color:var(--accent) } .rec-flag{ position:absolute; top:0; right:1.25rem; transform:translateY(-50%); background:var(--accent); color:var(--ground); border-radius:var(--radius); font-family:var(--body); font-weight:600; font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; padding:.3rem .6rem; line-height:1.4 } /* ---------- feature matrix ---------- */ .matrix{ width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:var(--step-0) } .matrix th,.matrix td{ text-align:left; padding:.95rem 1rem; border-top:1px solid var(--hairline) } .matrix thead th{ font-family:var(--display); font-weight:700; color:var(--ink); border-top:0; border-bottom:1px solid var(--hairline-2) } .matrix thead th:not(:first-child), .matrix tbody td{ text-align:center } .matrix tbody th{ font-weight:400; color:var(--ink-muted); font-family:var(--body) } .matrix tbody tr:nth-child(odd) th, .matrix tbody tr:nth-child(odd) td{ background:var(--surface) } .matrix .yes{ color:var(--accent) } .matrix .no{ color:var(--ink-muted) } /* --ink-faint on --surface is 4.37:1, under AA */ @media (max-width:700px){ .matrix thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) } .matrix tbody tr{ display:block; border:1px solid var(--hairline); margin-bottom:-1px; padding:.35rem 0 } .matrix tbody th,.matrix tbody td{ display:flex; justify-content:space-between; gap:1rem; border-top:0; background:transparent!important; text-align:left!important; padding:.5rem 1rem } .matrix tbody th{ font-family:var(--display); font-weight:700; color:var(--ink); border-bottom:1px solid var(--hairline); margin-bottom:.25rem } .matrix tbody td::before{ content:attr(data-col); color:var(--ink-faint); font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase } } /* ---------- the pre-post approval block ---------- Given real visual weight: it is the strongest line on the site. */ .approval{ margin-top:2rem; border:1px solid var(--accent); background:var(--surface); border-radius:var(--radius); padding:1.9rem 1.75rem; position:relative; overflow:hidden } .approval::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%); pointer-events:none } .approval .label{ color:var(--accent); position:relative } .approval p{ margin:0; color:var(--ink); font-size:var(--step-1); line-height:1.5; max-width:60ch; position:relative } /* ---------- pricing ---------- */ .pricing{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:1px; background:var(--hairline); border-block:1px solid var(--hairline) } .pricing li{ background:var(--ground); display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline; justify-content:space-between; padding:1.05rem .25rem } .pricing .plan{ font-family:var(--display); font-weight:700; font-size:var(--step-2); letter-spacing:-.025em; color:var(--ink) } .pricing .figure{ font-family:var(--display); font-weight:700; font-size:var(--step-2); letter-spacing:-.025em; color:var(--accent); font-variant-numeric:tabular-nums } .onboarding-price{ margin-top:1.5rem; padding:1.25rem 1.4rem; border:1px solid var(--surface-alt); background:var(--surface); border-radius:var(--radius); font-family:var(--display); font-weight:700; font-size:var(--step-2); letter-spacing:-.025em; color:var(--ink) } .onboarding-price strong{ font-weight:700 } /* ---------- CTA rows ---------- */ .cta-row{ display:flex; flex-wrap:wrap; gap:.9rem 1rem; align-items:center; margin-top:2.25rem } /* ---------- inline links in prose ---------- */ .prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px } .prose a:hover,.prose a:focus-visible{ color:var(--ink) } .arrow-link{ display:inline-block; margin-top:1rem; color:var(--accent); text-decoration:none; font-weight:500; border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-bottom:.15rem; transition:color .18s ease, border-color .18s ease } .arrow-link:hover,.arrow-link:focus-visible{ color:var(--ink); border-bottom-color:var(--ink) } /* ---------- preview blocks (homepage) ---------- */ .preview-pair{ display:grid; gap:1.25rem; margin-top:2.25rem; grid-template-columns:repeat(2,minmax(0,1fr)) } @media (max-width:880px){ .preview-pair{ grid-template-columns:1fr } } .preview-pair > div{ border:1px solid var(--hairline); background:var(--surface); border-radius:var(--radius); padding:1.75rem 1.6rem } .preview-pair h3{ margin:0 0 .5rem } .preview-pair p{ margin:0 } /* ---------- portfolio ---------- */ .grid-work{ display:grid; gap:1.25rem; margin-top:1.75rem; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)) } .piece{ position:relative; border:1px solid var(--hairline); background:var(--surface); border-radius:var(--radius); aspect-ratio:4/5; display:grid; place-items:center } .spec-flag{ position:absolute; top:.75rem; left:.75rem; z-index:2; background:var(--ground); color:var(--accent); border:1px solid var(--accent); border-radius:var(--radius); font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; padding:.28rem .55rem; line-height:1.4 } /* ---------- testimonial ---------- */ .testimonial{ margin:2rem 0 0; border-left:1px solid var(--accent); background:var(--surface); border-radius:var(--radius); padding:2rem clamp(1.4rem,3vw,2.5rem) } .testimonial p{ color:var(--ink-muted); max-width:68ch } .testimonial p:first-child{ margin-top:0 } .testimonial footer{ margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid var(--hairline); color:var(--ink); font-size:var(--step-0) } .testimonial footer strong{ font-family:var(--display); font-weight:700 } /* ---------- founder wrap (/about) ---------- Ruled 2026-09-14: small portrait, beside the text, never above it. Its job is trust, not presence. */ .founder{ margin-top:2.5rem } .founder-wrap{ display:flex; align-items:flex-start; gap:clamp(1.5rem,3vw,2.5rem) } .founder-photo{ flex:none; width:200px; position:relative } .founder-photo::after{ content:""; position:absolute; inset:-22%; background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); z-index:0; pointer-events:none } .founder-photo img{ position:relative; z-index:1; display:block; width:100%; height:auto; border:1px solid var(--accent); border-radius:12px } .founder-statement{ margin:0; font-size:var(--step-1); line-height:1.55; color:var(--ink-muted) } .founder-statement strong{ color:var(--ink); font-family:var(--display); font-weight:700 } .founder-after{ margin-top:2.25rem } .founder-after .lead-in{ margin:0 0 .75rem } .closing{ font-family:var(--display); font-weight:700; font-size:var(--step-2); letter-spacing:-.025em; color:var(--ink); margin:0; max-width:32ch; text-wrap:balance } @media (max-width:880px){ .founder-wrap{ flex-direction:column; align-items:center; text-align:center } .founder-statement{ text-align:left } } /* ---------- privacy ---------- */ .legal h2{ margin:2.25rem 0 .6rem; font-size:var(--step-2) } .legal > :first-child{ margin-top:0 } .legal p{ margin:0 } /* ---------- build placeholders ---------- Deliberately visible. Each one marks something that does not exist yet. None of them ships to production as-is. */ .todo{ border:1px dashed var(--accent); background:var(--surface); border-radius:var(--radius); padding:1.75rem 1.6rem; margin-top:1.75rem } .todo .label{ color:var(--accent) } .todo p{ margin:0; max-width:64ch } .todo p + p{ margin-top:.6rem } /* ---------- footer ---------- */ .site-foot{ border-top:1px solid var(--hairline); padding-block:clamp(2.5rem,5vw,4rem) } .foot-grid{ display:flex; flex-wrap:wrap; gap:2rem clamp(3rem,9vw,7rem) } .site-foot h2{ font-family:var(--body); font-weight:600; font-size:var(--step--1); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .9rem } .site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem } .site-foot a{ color:var(--ink-muted); text-decoration:none; font-size:var(--step-0) } .site-foot a:hover,.site-foot a:focus-visible{ color:var(--accent) } .foot-legal{ margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:baseline; justify-content:space-between } .foot-legal p{ margin:0; color:var(--ink-faint); font-size:var(--step--1) } /* ---------- 404 ---------- nf-link is the only link on the page: no nav, no footer. */ .nf{ min-height:100svh; display:grid; align-content:center; padding-block:3rem } .nf .brand-mark{ width:38px; height:38px; margin-bottom:2rem } .nf h1{ margin:0 0 1rem } .nf p{ margin:0 0 2rem; font-size:var(--step-1) } /* ---------- motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important } }