/* T.W. Pearse Cork — style.css Single stylesheet for the whole site. See CLAUDE.md for project notes. Colours/fonts sampled from the live Wix site (2026-08-20) via computed styles: - Body/heading colour: #2A7C6F (teal) - Accent teal (nav/questions): #2C8D7E - Page background: #FFFEFC - Headings used Brandon Grotesque Light (licensed) -> substituted with Jost - Body used Avenir/Helvetica Neue Light -> substituted with Work Sans Jost/Work Sans are loaded via + preconnect in each page's , not @import here -- avoids the render-blocking delay an in-CSS @import adds. */ :root { --teal: #2a7c6f; --teal-accent: #2c8d7e; --bg: #fffefc; --border: rgba(42, 124, 111, 0.35); --heading-font: 'Jost', sans-serif; --body-font: 'Work Sans', sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--body-font); font-weight: 300; color: var(--teal); background: var(--bg); line-height: 1.6; text-align: center; } h1, h2 { font-family: var(--heading-font); font-weight: 400; color: var(--teal-accent); margin: 0; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } main { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Header */ .site-header { padding: 40px 24px 0; } .brand { display: inline-block; font-family: var(--heading-font); font-weight: 300; font-size: 2.75rem; letter-spacing: 0.02em; color: var(--teal); } .tagline { margin: 10px 0 0; font-family: var(--body-font); font-size: 0.85rem; font-weight: 300; letter-spacing: 0.03em; color: var(--teal-accent); } .header-divider { max-width: 1200px; margin: 32px auto 0; border: none; border-top: 1px solid var(--border); } .primary-nav { display: flex; justify-content: center; gap: 24px; padding: 18px 0; position: relative; } .primary-nav a { font-family: var(--body-font); font-size: 0.85rem; color: var(--teal-accent); } .menu-toggle { display: none; } /* Hero */ .hero { padding: 48px 0 0; } .hero-photo { width: 285px; height: 285px; border-radius: 50%; overflow: hidden; margin: 0 auto 40px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--teal); } .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-copy p { max-width: 680px; margin: 0 auto 18px; font-size: 1rem; } .call-cta { display: block; margin-top: 12px; font-family: var(--heading-font); font-weight: 300; } .call-cta .call-number, .call-cta .call-hours { display: block; font-size: 1.9rem; color: var(--teal); } .eyebrow { display: none; /* not present on the live site; kept out to match */ } /* Brands */ .brands { margin: 56px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); } .brands-logos { display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .brands-logos img { max-width: 100%; height: auto; } .brands-callout { background: var(--teal); color: var(--bg); padding: 48px 32px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .brands-callout h2 { color: var(--bg); font-size: 1.8rem; } .brands-callout p { color: var(--bg); font-size: 0.95rem; margin: 0; } /* Page hero (FAQs) */ .page-hero { padding: 56px 0 40px; } .page-hero h2 { font-size: 2rem; text-transform: uppercase; letter-spacing: 0.02em; } /* FAQ grid */ .faq-list { padding: 8px 0 64px; } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border); } .faq-item { padding: 32px; text-align: left; border-bottom: 1px solid var(--border); } .faq-item:nth-child(odd) { border-right: 1px solid var(--border); } .faq-item h2 { font-size: 1.15rem; text-transform: uppercase; color: var(--teal-accent); margin-bottom: 14px; } .faq-item p { font-size: 0.9rem; margin: 0 0 10px; } .issue-list { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; padding: 0; margin: 10px 0 0; } .issue-list li { font-size: 0.8rem; color: var(--teal-accent); } .issue-list li::after { content: ','; } .issue-list li:last-child::after { content: ''; } /* Footer */ .site-footer { padding: 24px; font-size: 0.8rem; color: var(--teal); } /* Mobile */ @media (max-width: 760px) { .brand { font-size: 1.9rem; } .call-cta .call-number, .call-cta .call-hours { font-size: 1.3rem; } .hero-photo { width: 220px; height: 220px; } .brands { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } .faq-item:nth-child(odd) { border-right: none; } .primary-nav { gap: 18px; } }