/* ===================================================================== JUST SHIRTS — STYLESHEET --------------------------------------------------------------------- Brand: CMYK-loud screen-print shop. Cyan / magenta / yellow / black on white. Heavy condensed display sans (Anton) for headlines, humanist sans (Inter) for body. Energetic, blue-collar, "stress-free, all about YOU." Not editorial, not minimalist. ===================================================================== */ /* ========================================================= TOKENS ========================================================= */ :root{ /* Brand palette (sampled from logo + ad + FB banner) */ --cyan: #00B8D4; --magenta: #E91E8C; --yellow: #FFD600; --ink: #0A0A0A; --ink-soft: #3A3A3A; --ink-mute: #6B6B6B; --bg: #FFFFFF; --surface: #F6F6F6; /* light grey card / banner surface */ --rule: rgba(0,0,0,.10); --rule-strong: rgba(0,0,0,.22); /* Type stacks. Async-loaded Google Fonts in ; system fallbacks keep things readable before the web fonts arrive. */ --display: "Anton", "Impact", "Oswald", "Arial Narrow", sans-serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Layout */ --maxw: 1280px; --gut: clamp(20px, 4vw, 56px); --nav-h: 76px; } /* ========================================================= RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; border: 0; background: none; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--magenta); } h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 400; /* Anton ships at 400 */ margin: 0; letter-spacing: 0.005em; line-height: 1.02; text-transform: uppercase; } /* ========================================================= BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; font-family: var(--body); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; border: 2px solid transparent; transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--magenta); color: #fff; } .btn-primary:hover { background: #c91478; color: #fff; } .btn-secondary { background: var(--ink); color: #fff; } .btn-secondary:hover { background: #000; color: #fff; } .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-outline:hover { background: var(--ink); color: #fff; } .btn-outline-light { background: transparent; color: #fff; border-color: #fff; } .btn-outline-light:hover { background: #fff; color: var(--ink); } /* ========================================================= SPANISH-LANGUAGE TOP BAR Small inky strip above the main nav. Quiet enough not to fight the logo, but high-contrast so a Spanish-speaking visitor can spot it. ========================================================= */ .topbar { background: var(--ink); color: #fff; font-family: var(--body); font-size: 13px; letter-spacing: 0.02em; } .topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 6px var(--gut); display: flex; align-items: center; justify-content: flex-end; gap: 8px; line-height: 1.3; } .topbar-text { color: rgba(255,255,255,.78); } .topbar-phone { color: var(--yellow); font-weight: 700; letter-spacing: 0.04em; transition: color .15s ease; } .topbar-phone:hover { color: #fff; } /* On mobile the top bar disappears entirely; the Spanish-language line moves into the bottom of the hamburger menu instead so the top of the page stays clean. Desktop keeps the bar. */ @media (max-width: 768px) { .topbar { display: none; } } /* ========================================================= NAV ========================================================= */ .nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--rule); height: var(--nav-h); } .nav-inner { max-width: var(--maxw); margin: 0 auto; height: 100%; padding: 0 var(--gut); display: flex; align-items: center; gap: 24px; } .nav .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .nav .brand img { /* Tightly-cropped rectangle logo (no internal whitespace), so it can run large in the nav without the old max-width crop hack. */ height: 60px; width: auto; object-fit: contain; object-position: left center; } .nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .15s ease, color .15s ease; } .nav-links a:hover { color: var(--magenta); border-color: var(--magenta); } .nav-links a[aria-current="page"] { border-color: var(--magenta); } /* Phone-in-CTA: the primary nav CTA is now a tel: link with the number embedded, so the most common conversion action (call) is the most visually prominent element in the bar. */ .nav .btn.nav-cta { margin-left: 8px; font-family: var(--display); /* Anton only ships at 400 — explicitly setting it here turns off the browser's synthetic-bold faking that the base .btn rule (700) triggers. */ font-weight: 400; font-size: 18px; letter-spacing: 0.03em; padding: 10px 18px; } .nav-cta-icon { width: 16px; height: 16px; flex-shrink: 0; } /* Mobile-only Call Now button (sits to the left of the hamburger). Hidden on desktop; shown via the 768px media query below. */ .nav-call-mobile { display: none; font-family: var(--display); font-size: 15px; letter-spacing: 0.04em; padding: 9px 14px; margin-left: auto; gap: 6px; } .nav-call-mobile svg { width: 15px; height: 15px; flex-shrink: 0; } /* In-menu Spanish-language line. Hidden on desktop (the .topbar covers that), shown as the last item inside the open hamburger panel on mobile. */ .nav-spanish { display: none; } /* Mobile menu toggle */ .nav-toggle { display: none; position: relative; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--rule-strong); border-radius: 4px; align-items: center; justify-content: center; color: var(--ink); } .nav-toggle-bars, .nav-toggle-x { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .15s ease; } .nav-toggle-bars { width: 20px; height: 2px; background: var(--ink); margin: auto; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); } .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; } .nav-toggle-x { opacity: 0; pointer-events: none; } .nav-toggle-x svg { width: 22px; height: 22px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-x { opacity: 1; } @media (max-width: 768px) { .nav-toggle { display: inline-flex; } /* Mobile shows: logo (left) → Call Now (right of logo, pushed by ml:auto) → hamburger. The desktop phone CTA hides. */ .nav .btn.nav-cta { display: none; } .nav-call-mobile { display: inline-flex; } /* The brand no longer needs auto-margin on mobile since the Call Now button claims it instead and the hamburger anchors to the right. */ .nav .brand { margin-right: 0; } .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--rule); padding: 8px 0; } .nav-links.is-open { display: flex; } .nav-links li { width: 100%; /* Reset the list-item box; older browsers can render
  • bullets even inside a flex column unless explicitly cleared. */ list-style: none; } .nav-links a { /* Block-level so the hairline border draws cleanly at the bottom of the link box. As inline (the default for ), the border tracks the text baseline and visually slices through the next link's text. */ display: block; padding: 14px var(--gut); border-bottom: 1px solid var(--rule); } /* Spanish line shown as the final menu item on mobile. It's a list item wrapping a label + a tel: link, styled distinctively so it reads as a service note rather than another nav destination. */ .nav-links .nav-spanish { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gut); background: var(--ink); color: #fff; border-bottom: 0; font-family: var(--body); font-size: 13px; letter-spacing: 0.02em; } .nav-links .nav-spanish-text { color: rgba(255,255,255,.78); } .nav-links .nav-spanish-phone { color: var(--yellow); font-weight: 700; letter-spacing: 0.04em; padding: 0; border: 0; display: inline; } .nav-links .nav-spanish-phone:hover { color: #fff; } } /* ========================================================= HERO — bold CMYK-themed intro block ========================================================= */ .hero { position: relative; background: var(--ink); overflow: hidden; padding: clamp(64px, 11vw, 128px) var(--gut) clamp(72px, 12vw, 140px); } /* Full-bleed ambient photo behind the hero copy */ .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04) brightness(.62); } /* CMYK-tinted wash so the headline stays crisp and on-brand */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.78) 100%), radial-gradient(circle at 12% 18%, rgba(0,184,212,.34), transparent 55%), radial-gradient(circle at 88% 82%, rgba(233,30,140,.34), transparent 55%); } .hero-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 760px); gap: clamp(32px, 5vw, 64px); align-items: center; position: relative; z-index: 1; } .hero-eyebrow { font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; } .hero-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--yellow); display: inline-block; } .hero h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: 1; margin: 0 0 24px; color: #fff; } .hero h1 .accent-c { color: var(--cyan); } .hero h1 .accent-m { color: var(--magenta); } .hero-lede { font-size: clamp(17px, 1.6vw, 19px); color: rgba(255,255,255,.82); margin: 0 0 32px; max-width: 52ch; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; } .hero-trust { display: flex; gap: 32px; flex-wrap: wrap; font-family: var(--body); font-size: 13px; color: rgba(255,255,255,.7); align-items: center; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18); margin-top: 4px; } .hero-trust > div { display: flex; align-items: baseline; gap: 10px; } .hero-trust strong { font-family: var(--display); font-size: 24px; color: #fff; line-height: 1; } /* On the dark hero photo the outline button needs the light treatment */ .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); } .hero .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } } /* ========================================================= SECTION BASE ========================================================= */ .section { padding: clamp(64px, 9vw, 112px) var(--gut); } .section-inner { max-width: var(--maxw); margin: 0 auto; } .section.surface { background: var(--surface); } .section.dark { background: var(--ink); color: #fff; } .section.dark .section-eyebrow { color: var(--yellow); } .section.dark .section-eyebrow::before { background: var(--yellow); } .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 56px; align-items: end; } .section-eyebrow { font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--magenta); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 10px; } .section-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--magenta); } .section-head h2 { font-size: clamp(36px, 5vw, 64px); line-height: 0.98; margin: 0; color: inherit; } .section-head p { font-size: 17px; color: var(--ink-soft); margin: 0; max-width: 48ch; } .section.dark .section-head p { color: rgba(255,255,255,.78); } @media (max-width: 768px) { .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; } } /* ========================================================= SERVICES GRID — four CMYK tiles (cyan / magenta / yellow / key) ========================================================= */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .svc { position: relative; padding: 36px 28px 32px; border-radius: 14px; min-height: 320px; display: flex; flex-direction: column; color: #fff; overflow: hidden; isolation: isolate; } /* Photo sits at the very bottom of the tile's stacking context */ .svc-bg { position: absolute; inset: 0; z-index: -2; } .svc-bg img { width: 100%; height: 100%; object-fit: cover; /* Mono so the color wash stays a clean CMYK tint; only lightly darkened so the photo reads clearly through the semi-transparent color on top. */ filter: grayscale(1) contrast(1.08) brightness(.62); } /* CMYK tint: a semi-transparent flat color (set per modifier below) over the mono photo keeps the print-shop palette while letting the image show. A bottom-weighted dark gradient keeps the heading and copy readable. */ .svc::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6; } .svc::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 55%), linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%); } .svc > *:not(.svc-bg) { position: relative; z-index: 1; } /* Number pinned to top; the heading + copy block starts at a fixed offset below it, so the heading baseline is identical across all three tiles regardless of paragraph length (grid already equalizes tile heights). */ .svc > div:not(.svc-bg) { margin-top: clamp(40px, 6vw, 72px); } .svc-c::after { background: var(--cyan); } .svc-m::after { background: var(--magenta); } .svc-y::after { background: var(--yellow); } /* Key (black) tile: deeper wash so the photo reads as moody print-shop texture and the headline stays high-contrast white. */ .svc-k::after { background: var(--ink); opacity: .78; } .svc-num { font-family: var(--display); font-size: clamp(72px, 9vw, 112px); line-height: 0.85; color: rgba(255,255,255,.22); margin: 0; } .svc h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1; margin: 0 0 8px; } .svc p { font-size: 15px; line-height: 1.55; margin: 0; color: rgba(255,255,255,.92); } .svc-c { background: var(--cyan); } .svc-m { background: var(--magenta); } /* Yellow stays the tint color via .svc-y::after, but the photo + dark bottom gradient now sit behind the text, so white copy is the readable choice here too (dark ink would fail against the darkened image). */ .svc-y { background: var(--yellow); } .svc-k { background: var(--ink); } @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } .svc { min-height: 260px; } } /* ========================================================= ABOUT TEASER ========================================================= */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .about-visual { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; /* CMYK gradient frame accent showing as a thin border around the photo */ background: linear-gradient(135deg, var(--cyan), var(--magenta) 50%, var(--yellow)); padding: 6px; } .about-visual picture { display: block; width: 100%; height: 100%; } .about-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 9px; } .about-content h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1; margin: 0 0 20px; } .about-content p { font-size: 17px; margin: 0 0 18px; color: var(--ink-soft); } .about-content .signature { margin-top: 24px; } .about-content .signature small { display: block; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); } @media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about-visual { max-width: 480px; aspect-ratio: 16 / 10; } } /* ========================================================= CUSTOMER TYPES — quick four-up ========================================================= */ .types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .type { padding: 28px 22px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .type:hover { transform: translateY(-2px); } /* Hover highlight matches each tile's icon color so the accent reads as the same family as the icon (small biz → cyan, teams → magenta, events → yellow*, personal → ink). *Yellow uses the WCAG-friendly darkened variant since pure --yellow fails contrast on white. */ .type:nth-child(1):hover { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); } .type:nth-child(2):hover { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); } .type:nth-child(3):hover { border-color: #B38F00; box-shadow: 0 0 0 1px #B38F00; } .type:nth-child(4):hover { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .type .type-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px; background: rgba(0,0,0,.04); } .type .type-icon svg { width: 26px; height: 26px; } .type:nth-child(1) .type-icon { color: var(--cyan); } .type:nth-child(2) .type-icon { color: var(--magenta); } /* Yellow fails contrast on the light icon chip, so this position uses a darker yellow tint that still reads as the brand yellow. */ .type:nth-child(3) .type-icon { color: #B38F00; } .type:nth-child(4) .type-icon { color: var(--ink); } .type h3 { font-size: 22px; line-height: 1.05; margin: 0 0 8px; color: var(--ink); } .type p { font-size: 14px; color: var(--ink-soft); margin: 0; } @media (max-width: 900px) { .types-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .types-grid { grid-template-columns: 1fr; } } /* ========================================================= TESTIMONIAL SLIDER Two slides cross-fade on a 5s interval. Slides are stacked absolutely inside a relatively-positioned track; the track's height is reserved by the tallest slide via a min-height fallback (the JS doesn't measure). ========================================================= */ .testimonial-slider { max-width: 900px; margin: 0 auto; text-align: center; } .testimonial-slider .quote-mark { font-family: var(--display); font-size: 96px; line-height: 1; color: var(--magenta); margin: 0 0 8px; } .testimonial-track { /* Grid-stacking: all slides occupy the same cell, so the track grows to the tallest slide automatically (no manual min-height bookkeeping per viewport, no overlap between an absolutely-positioned slide and the dots that sit below the track). */ display: grid; grid-template-areas: "slide"; } .testimonial-slide { grid-area: slide; opacity: 0; transition: opacity .6s ease; pointer-events: none; } .testimonial-slide.is-active { opacity: 1; pointer-events: auto; } .testimonial-slide blockquote { font-family: var(--body); font-size: clamp(18px, 2vw, 24px); font-weight: 500; line-height: 1.45; margin: 0 0 20px; color: #fff; } .testimonial-slide cite { display: block; font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); font-style: normal; } .testimonial-dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; } .testimonial-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.28); border: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; } .testimonial-dot:hover { background: rgba(255,255,255,.55); } .testimonial-dot.is-active { background: var(--magenta); transform: scale(1.15); } .testimonial-dot:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; } /* ========================================================= RECENT WORK GALLERY ========================================================= */ .gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gal-grid .ph { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--surface); border: 1px solid var(--rule); } /* The wrapper must fill the figure, otherwise height:100% on the resolves against the picture's intrinsic size (not the 4:3 figure) and leaves a gap at the bottom of the tile. */ .gal-grid .ph picture { display: block; width: 100%; height: 100%; } .gal-grid .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; } /* Landscape shots whose subject sits high in the frame: bias the cover crop upward so the product stays prominent and dead space (e.g. an empty tabletop) is what gets trimmed instead. */ .gal-grid .ph-top img { object-position: center 28%; } .gal-grid .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,10,10,.12) 100%); opacity: 0; transition: opacity .25s ease; } .gal-grid .ph:hover img, .gal-grid .ph:focus-visible img { transform: scale(1.05); } .gal-grid .ph:hover::after, .gal-grid .ph:focus-visible::after { opacity: 1; } .gal-grid .ph:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; } @media (max-width: 900px) { .gal-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .gal-grid { grid-template-columns: 1fr; } } /* ========================================================= LIGHTBOX ========================================================= */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: clamp(16px, 5vw, 64px); background: rgba(10,10,10,.92); } .lightbox[data-open="true"] { display: flex; } .lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .lb-close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); width: 48px; height: 48px; font-size: 32px; line-height: 1; color: #fff; background: rgba(255,255,255,.12); border-radius: 50%; transition: background .15s ease; } .lb-close:hover { background: var(--magenta); color: #fff; } body.lb-open { overflow: hidden; } /* ========================================================= QUOTE FORM ========================================================= */ .form-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .form-intro h2 { font-size: clamp(36px, 5vw, 64px); line-height: 0.98; margin: 0 0 20px; } .form-intro p { font-size: 17px; color: var(--ink-soft); margin: 0 0 20px; } .form-intro ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; } .form-intro li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); } /* Colored disc with a white checkmark. The check is a data-URI SVG so it inherits no color; the disc keeps the CMYK rotation. */ .form-intro li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; } .form-intro li:nth-child(2)::before { background-color: var(--magenta); } /* Brand yellow disc would wash out a white check, so this one uses a dark ink check via an alternate data-URI. */ .form-intro li:nth-child(3)::before { background-color: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); } .form-intro li:nth-child(4)::before { background-color: var(--ink); } .quote-form { padding: 32px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; } .quote-form iframe { display: block; width: 100%; min-height: 320px; } @media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } } /* ========================================================= FOOTER ========================================================= */ .foot { background: var(--ink); color: #fff; padding: 72px var(--gut) 32px; } .foot-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .foot-brand img { /* All-white SVG with a transparent background; no padding/white card needed (the previous JPG was multi-color and required a white tile to stay legible on the black footer). */ height: 96px; width: auto; } .foot-brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 32ch; } .foot h3 { font-size: 18px; letter-spacing: 0.04em; margin: 0 0 18px; color: var(--yellow); } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .foot a { color: rgba(255,255,255,.78); font-size: 14px; transition: color .15s ease; } .foot a:hover { color: var(--magenta); } .foot .bottom { grid-column: 1 / -1; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 12px; color: rgba(255,255,255,.55); } .foot .bottom a { color: rgba(255,255,255,.55); } .foot .bottom a:hover { color: #fff; } .foot-credit { display: inline-flex; margin-left: auto; opacity: .6; transition: opacity .15s ease; } .foot-credit:hover { opacity: 1; } .foot-credit img { display: block; width: 160px; height: 40px; } @media (max-width: 768px) { .foot-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .foot-brand { grid-column: 1 / -1; } /* Stacked footer bottom row: center each item instead of right-justifying the Page1Design credit on its own line. */ .foot .bottom { justify-content: center; text-align: center; } .foot-credit { margin-left: 0; } } /* ========================================================= PRIVACY POLICY page (body.privacy-page) ========================================================= */ body.privacy-page { padding: 0; } body.privacy-page main.prose { max-width: 72ch; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gut); } body.privacy-page .eyebrow { font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--magenta); margin: 0 0 14px; } body.privacy-page h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1; margin: 0 0 8px; } body.privacy-page .lede { font-family: var(--body); font-size: 14px; color: var(--ink-mute); margin: 0 0 40px; } body.privacy-page h2 { font-size: clamp(22px, 2.5vw, 28px); margin: 36px 0 12px; } body.privacy-page p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); } body.privacy-page a { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; } body.privacy-page .back { margin-top: 48px; font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; } body.privacy-page footer.cs-foot { border-top: 1px solid var(--rule); padding: 24px var(--gut); text-align: center; font-size: 12px; color: var(--ink-mute); } body.privacy-page .cs-foot a { color: var(--ink-mute); }