/* ============================================================ bt-main.css — Guardian Pest Control Deferred via . bt-critical.css (inlined in ) handles all CLS-critical layout. This file is loaded after first paint — 1-year cacheable. What is NOT here (already in bt-critical.css): — CSS custom properties (:root tokens) — Reset (*, body margin, img, ul/ol) — Base body font + a color — .gpc-container — .gpc-btn display/padding/border-radius/font/cursor/border/line-height — .gpc-btn--primary and .gpc-btn--outline background/color/border — CTA row display:flex for all hero CTAs — .gpc-hero__bg-img absolute positioning — Hero inner z-index — All hero section padding/background/color/overflow/h1/sub text — Breadcrumb flex layout — Mobile hero responsive rules ============================================================ */ /* ─── Shadow tokens (visual — no layout impact) ──────────────────────────── */ :root { --shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); --shadow-lg: 0 10px 25px rgba(0,0,0,.12); } /* ─── Base ───────────────────────────────────────────────────────────────── */ a:hover { text-decoration: underline; } /* ─── Buttons — transitions, hover states, additional variants ───────────── */ .gpc-btn { transition: all .2s ease; } .gpc-btn--primary:hover { background: #c62e39; border-color: #c62e39; color: #fff; text-decoration: none; } .gpc-btn--outline:hover { background: #fff; color: var(--brand-primary); border-color: #fff; text-decoration: none; } .gpc-btn--phone { background: transparent; color: var(--brand-accent); border-color: var(--brand-accent); display: block; text-align: center; margin-top: 10px; font-size: .875rem; padding: 11px 20px; } .gpc-btn--phone:hover { background: var(--brand-accent); color: #fff; text-decoration: none; } .gpc-btn--white { background: #fff; color: var(--brand-primary); border-color: #fff; } .gpc-btn--white:hover { background: var(--bg-light); border-color: var(--bg-light); color: var(--brand-primary); text-decoration: none; } /* ─── Section headers ────────────────────────────────────────────────────── */ .gpc-section-label { font-family: var(--font-heading); font-size: .8rem; font-weight: 700; color: var(--brand-accent); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; display: block; } .gpc-section-heading { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--brand-primary); margin-bottom: 14px; line-height: 1.2; } .gpc-section-sub { font-size: 1.05rem; color: var(--text-muted); max-width: 620px; margin-bottom: 44px; line-height: 1.7; } /* ─── Breadcrumb — hover + dark-background variant ───────────────────────── */ .gpc-breadcrumb li a:hover { color: #fff; } .gpc-breadcrumb--dark li { color: var(--text-muted); } .gpc-breadcrumb--dark li a { color: var(--brand-accent); } .gpc-breadcrumb--dark li + li::before { color: var(--text-muted); } .gpc-breadcrumb--dark li[aria-current="page"] { color: var(--text-dark); } /* ─── Trust badge bar ────────────────────────────────────────────────────── */ .gpc-trust-bar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; padding: 20px 16px; margin: 28px 0; border-top: 1px solid #dde3ea; border-bottom: 1px solid #dde3ea; background: var(--bg-light); border-radius: 4px; } .gpc-trust-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 80px; } .gpc-trust-logo { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 10px; font-family: var(--font-heading); font-size: .58em; font-weight: 800; text-align: center; line-height: 1.25; letter-spacing: .3px; text-transform: uppercase; } .gpc-trust-label { font-family: var(--font-heading); font-size: .68em; color: var(--text-muted); text-align: center; font-weight: 600; line-height: 1.3; } .gpc-trust-logo.wsda { background: #0f3460; color: #fff; } .gpc-trust-logo.insured { background: #1a5276; color: #fff; } .gpc-trust-logo.guar { background: #e63946; color: #fff; } .gpc-trust-logo.epa { background: #2e7d32; color: #fff; } .gpc-trust-logo.npma { background: #1565c0; color: #fff; } .gpc-trust-logo.bbb { background: #0077b6; color: #fff; } /* ─── Hero — non-CLS visual extras ──────────────────────────────────────── */ .gpc-hero__inner { max-width: 820px; } .gpc-hero__stats li { text-align: left; } /* ─── Service body — 2-column layout ────────────────────────────────────── */ .gpc-svc-body { padding: 60px 0 80px; background: var(--bg-light); } .gpc-svc-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; } /* Main content card */ .gpc-svc-content { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 44px 48px; font-size: 1rem; line-height: 1.8; color: var(--text-body); } .gpc-svc-content h2 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--brand-primary); margin-top: 48px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--bg-light); } .gpc-svc-content h2:first-child { margin-top: 0; } .gpc-svc-content h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-top: 28px; margin-bottom: 10px; } .gpc-svc-content p { margin-bottom: 16px; } .gpc-svc-content p:last-child { margin-bottom: 0; } .gpc-svc-content ul { list-style: none; padding: 0; margin: 0 0 20px; } .gpc-svc-content ul li { position: relative; padding-left: 24px; margin-bottom: 10px; line-height: 1.7; } .gpc-svc-content ul li::before { content: '\2713'; position: absolute; left: 0; color: var(--brand-accent); font-weight: 700; } .gpc-svc-content ol { list-style: decimal; padding-left: 22px; margin: 0 0 20px; } .gpc-svc-content ol li { margin-bottom: 10px; line-height: 1.7; } .gpc-svc-content strong { font-weight: 700; color: var(--text-dark); } .gpc-svc-content a { color: var(--brand-accent); } .gpc-svc-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .9rem; } .gpc-svc-content table th { background: var(--brand-primary); color: #fff; padding: 10px 14px; text-align: left; font-family: var(--font-heading); } .gpc-svc-content table td { padding: 10px 14px; border-bottom: 1px solid var(--border); } .gpc-svc-content table tr:nth-child(even) td { background: var(--bg-light); } .gpc-svc-content blockquote { border-left: 4px solid var(--brand-accent); padding: 16px 20px; background: var(--bg-light); border-radius: 0 var(--radius) var(--radius) 0; margin: 24px 0; font-style: italic; } /* Service sidebar */ .gpc-svc-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; } .gpc-svc-cta-card { background: var(--brand-primary); border-radius: 12px; padding: 26px; } .gpc-svc-cta-card__eyebrow { font-family: var(--font-heading); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.5); margin-bottom: 6px; } .gpc-svc-cta-card h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4; } .gpc-svc-cta-card p { font-size: .875rem; color: rgba(255,255,255,.75); line-height: 1.65; margin-bottom: 18px; } .gpc-svc-cta-card .gpc-btn--primary { display: block; text-align: center; font-size: .875rem; padding: 12px 20px; } .gpc-svc-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 22px; } .gpc-svc-card__label { font-family: var(--font-heading); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--brand-accent); margin-bottom: 14px; display: block; } .gpc-svc-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .gpc-svc-checklist li { font-size: .875rem; color: var(--text-body); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } .gpc-svc-checklist li::before { content: '\2713'; color: var(--brand-accent); font-weight: 700; flex-shrink: 0; margin-top: 1px; } .gpc-svc-hours { list-style: none; padding: 0; margin: 0; } .gpc-svc-hours li { display: flex; justify-content: space-between; font-size: .875rem; padding: 8px 0; border-bottom: 1px solid var(--border); gap: 12px; } .gpc-svc-hours li:last-child { border-bottom: none; } .gpc-svc-hours span { color: var(--text-muted); } .gpc-svc-hours strong { color: var(--text-dark); font-weight: 600; } .gpc-svc-link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .gpc-svc-link-list a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; color: var(--text-dark); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .gpc-svc-link-list a:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); text-decoration: none; } .gpc-svc-link-icon { font-size: .95rem; flex-shrink: 0; } .gpc-svc-link-arrow { margin-left: auto; color: var(--text-muted); font-size: .8rem; flex-shrink: 0; } .gpc-svc-link-list a:hover .gpc-svc-link-arrow { color: rgba(255,255,255,.6); } /* ─── Hub / category body ────────────────────────────────────────────────── */ .gpc-hub-body { padding: 64px 0 80px; background: var(--bg-light); } .gpc-hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; margin-top: 40px; } .gpc-hub-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 28px; text-decoration: none; color: var(--text-dark); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s, transform .2s; } .gpc-hub-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; } .gpc-hub-card__icon { font-size: 2rem; line-height: 1; } .gpc-hub-card h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--brand-primary); margin: 0; } .gpc-hub-card p { font-size: .875rem; color: var(--text-muted); margin: 0; flex: 1; line-height: 1.6; } .gpc-hub-card__cta { font-family: var(--font-heading); font-size: .875rem; font-weight: 600; color: var(--brand-accent); margin-top: auto; } /* ─── Pest library body ──────────────────────────────────────────────────── */ .gpc-pest-body { padding: 48px 0 72px; } .gpc-pest-body .gpc-container h2 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--brand-primary); border-bottom: 2px solid var(--brand-accent); padding-bottom: 6px; margin-top: 36px; } .gpc-pest-body .gpc-container h3 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--brand-dark); margin-top: 20px; } .gpc-pest-body .gpc-container p { margin-bottom: 16px; line-height: 1.75; } .gpc-pest-body .gpc-container ul { padding-left: 20px; margin-bottom: 20px; } .gpc-pest-body .gpc-container li { margin-bottom: 8px; line-height: 1.7; } .gpc-pest-body .gpc-container strong { color: var(--text-dark); } .gpc-pest-body .gpc-container em { font-style: italic; } .gpc-pest-body .gpc-container table, .gpc-pest-body .id-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .95rem; } .gpc-pest-body .gpc-container table th, .gpc-pest-body .id-table th { background: var(--brand-primary); color: #fff; padding: 10px 12px; text-align: left; font-family: var(--font-heading); } .gpc-pest-body .gpc-container table td, .gpc-pest-body .id-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); } .gpc-pest-body .gpc-container table tr:nth-child(even) td, .gpc-pest-body .id-table tr:nth-child(even) td { background: var(--bg-light); } .gpc-pest-body .cta-box { background: var(--bg-tinted); border-left: 4px solid var(--brand-accent); padding: 18px 22px; margin: 32px 0; border-radius: 0 var(--radius) var(--radius) 0; } .gpc-pest-body .cta-box strong { display: block; font-size: 1.05rem; margin-bottom: 6px; color: var(--text-dark); } .gpc-pest-body .warning-box { background: #fff3f3; border-left: 4px solid var(--brand-accent); padding: 16px 20px; margin: 24px 0; border-radius: 0 var(--radius) var(--radius) 0; } .gpc-pest-body .note { font-size: .85rem; color: var(--text-muted); font-style: italic; margin-top: 32px; } /* ─── Homepage service cards ─────────────────────────────────────────────── */ .gpc-home-services { padding: 72px 0; background: var(--bg-white); } .gpc-svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; } .gpc-svc-card-link { background: var(--bg-light); border: 1px solid var(--border); border-top: 4px solid var(--brand-accent); border-radius: var(--radius); padding: 28px 24px; text-decoration: none; color: var(--text-dark); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s, transform .2s; } .gpc-svc-card-link:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; } .gpc-svc-card-link__icon { font-size: 2rem; line-height: 1; } .gpc-svc-card-link h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--brand-primary); margin: 0; } .gpc-svc-card-link p { font-size: .875rem; color: var(--text-muted); margin: 0; line-height: 1.6; flex: 1; } .gpc-svc-card-link__more { font-family: var(--font-heading); font-size: .85rem; font-weight: 600; color: var(--brand-accent); } /* ─── Why Us grid ────────────────────────────────────────────────────────── */ .gpc-why-us { padding: 72px 0; background: var(--bg-light); } .gpc-why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; margin-top: 40px; } .gpc-why-item { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 28px; } .gpc-why-item__icon { font-size: 2rem; margin-bottom: 14px; display: block; } .gpc-why-item h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--brand-primary); margin-bottom: 8px; } .gpc-why-item p { font-size: .9rem; color: var(--text-muted); margin: 0; line-height: 1.65; } /* ─── How It Works ───────────────────────────────────────────────────────── */ .gpc-how-it-works { padding: 72px 0; background: var(--bg-white); } .gpc-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .gpc-step-card { background: var(--bg-light); border-radius: 10px; padding: 28px 24px; border-top: 4px solid var(--brand-accent); } .gpc-step-num { width: 46px; height: 46px; background: var(--brand-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; flex-shrink: 0; } .gpc-step-card h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--brand-primary); margin-bottom: 10px; } .gpc-step-card p { font-size: .9rem; color: var(--text-muted); margin: 0; line-height: 1.65; } /* ─── FAQ ────────────────────────────────────────────────────────────────── */ .gpc-faq-section { padding: 72px 0; background: var(--bg-light); } .gpc-faq-list { max-width: 800px; margin: 48px auto 0; } .gpc-faq-item { border-bottom: 1px solid var(--border); overflow: hidden; } .gpc-faq-q { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--text-dark); cursor: pointer; padding: 22px 48px 22px 0; position: relative; margin: 0; user-select: none; list-style: none; } .gpc-faq-q::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--brand-accent); font-weight: 300; line-height: 1; transition: transform .2s; } .gpc-faq-item.is-open .gpc-faq-q::after { transform: translateY(-50%) rotate(45deg); } .gpc-faq-a { font-size: .95rem; color: var(--text-body); line-height: 1.75; padding-bottom: 20px; display: none; } .gpc-faq-item.is-open .gpc-faq-a { display: block; } /* ─── CTA strip ──────────────────────────────────────────────────────────── */ .gpc-cta-strip { background: var(--brand-primary); padding: 72px 0; text-align: center; } .gpc-cta-strip h2 { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: #fff; margin-bottom: 16px; } .gpc-cta-strip p { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 580px; margin: 0 auto 32px; line-height: 1.7; } .gpc-cta-strip__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ─── About / Story / Team ───────────────────────────────────────────────── */ .gpc-story-section { padding: 64px 0; background: var(--bg-white); } .gpc-story-box { background: var(--brand-primary); color: #fff; border-radius: 12px; padding: 40px 44px; max-width: 820px; margin: 0 auto; } .gpc-story-box h2 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: 16px; } .gpc-story-box p { color: rgba(255,255,255,.88); line-height: 1.8; margin-bottom: 14px; font-size: 1rem; } .gpc-story-box p:last-child { margin-bottom: 0; } .gpc-team-section { padding: 64px 0; background: var(--bg-light); } .gpc-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; margin-top: 44px; } .gpc-team-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 32px 28px; } .gpc-team-photo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; flex-shrink: 0; display: block; } .gpc-team-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--brand-primary); color: #fff; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; } .gpc-team-role { font-family: var(--font-heading); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--brand-accent); margin-bottom: 4px; display: block; } .gpc-team-name { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; color: var(--brand-primary); margin-bottom: 14px; } .gpc-team-bio { font-size: .9rem; color: var(--text-body); line-height: 1.7; margin-bottom: 14px; } .gpc-team-credentials { font-size: .82rem; color: var(--text-muted); font-style: italic; } /* ─── Booking page ───────────────────────────────────────────────────────── */ .gpc-book-body { padding: 60px 0 80px; background: var(--bg-light); } .gpc-book-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; } .gpc-book-form-wrap { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 40px 44px; } .gpc-book-form-wrap h2 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: var(--brand-primary); margin-bottom: 24px; } .gpc-form label { display: block; font-family: var(--font-heading); font-size: .875rem; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; } .gpc-form input, .gpc-form select, .gpc-form textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: .95rem; color: var(--text-dark); background: var(--bg-white); transition: border-color .15s; margin-bottom: 18px; appearance: auto; } .gpc-form input:focus, .gpc-form select:focus, .gpc-form textarea:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(230,57,70,.12); } .gpc-form textarea { min-height: 110px; resize: vertical; } .gpc-form .gpc-btn--primary { width: 100%; text-align: center; padding: 15px; font-size: 1rem; border: none; cursor: pointer; font-family: var(--font-heading); } .gpc-book-sidebar { display: flex; flex-direction: column; gap: 20px; } .gpc-book-trust-card { background: var(--brand-primary); border-radius: 12px; padding: 28px; color: #fff; } .gpc-book-trust-card h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 18px; } .gpc-book-trust-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .gpc-book-trust-list li { font-size: .875rem; color: rgba(255,255,255,.85); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .gpc-book-trust-list li::before { content: '\2713'; color: #6fcf97; font-weight: 700; flex-shrink: 0; } .gpc-book-hours { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 22px; } .gpc-book-hours h3 { font-family: var(--font-heading); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--brand-accent); margin-bottom: 14px; } .gpc-book-hours table { width: 100%; font-size: .875rem; border-collapse: collapse; } .gpc-book-hours td { padding: 7px 0; border-bottom: 1px solid var(--border); } .gpc-book-hours tr:last-child td { border-bottom: none; } .gpc-book-hours td:last-child { text-align: right; font-weight: 600; color: var(--brand-primary); } /* ─── Careers page ───────────────────────────────────────────────────────── */ .gpc-careers-body { padding: 64px 0 80px; background: var(--bg-light); } .gpc-careers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 56px; } .gpc-role-card { background: var(--bg-white); border: 1px solid var(--border); border-top: 4px solid var(--brand-accent); border-radius: 10px; padding: 28px; } .gpc-role-card h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--brand-primary); margin-bottom: 8px; } .gpc-role-pay { font-family: var(--font-heading); font-size: .875rem; font-weight: 700; color: var(--brand-accent); margin-bottom: 12px; display: block; } .gpc-role-card p { font-size: .875rem; color: var(--text-muted); margin: 0; line-height: 1.65; } .gpc-careers-form-wrap { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 44px 48px; max-width: 680px; } .gpc-careers-form-wrap h2 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: var(--brand-primary); margin-bottom: 8px; } .gpc-careers-form-wrap p { font-size: .9rem; color: var(--text-muted); margin-bottom: 28px; } /* ─── Article / Blog Post template ──────────────────────────────────────── */ /* Category badge in the dark hero */ .gpc-article-category-badge { display: inline-block; background: rgba(230,57,70,.2); color: rgba(255,255,255,.92); border: 1px solid rgba(230,57,70,.4); border-radius: 100px; padding: 4px 14px; font-family: var(--font-heading); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; } /* Author + date + reading time row inside the hero */ .gpc-article-meta { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); } .gpc-article-meta__avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-family: var(--font-heading); font-size: .82rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gpc-article-meta__text { display: flex; flex-direction: column; gap: 3px; } .gpc-article-meta__name { font-family: var(--font-heading); font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.9); } .gpc-article-meta__sub { font-family: var(--font-heading); font-size: .78rem; color: rgba(255,255,255,.55); } /* Article body wrapper */ .gpc-article-body { padding: 56px 0 72px; background: var(--bg-light); } /* Centred narrow column — reading-optimised width */ .gpc-article-layout { max-width: 760px; margin: 0 auto; } /* Featured image card above the prose */ .gpc-article-feature-img { margin: 0 0 36px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); } .gpc-article-feature-img img { width: 100%; height: auto; display: block; } /* Article prose — inherits gpc-svc-content for typography; override only layout */ .gpc-article-content { border-radius: 12px; padding: 44px 48px; } /* Editor-droppable callout blocks — paste a Custom HTML block with class="cta-box" or class="warning-box" anywhere in the content. These also apply to content written in the WordPress block editor. */ .gpc-article-content .cta-box { background: var(--bg-tinted); border-left: 4px solid var(--brand-accent); padding: 18px 22px; margin: 32px 0; border-radius: 0 var(--radius) var(--radius) 0; } .gpc-article-content .cta-box strong { display: block; font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: var(--text-dark); } .gpc-article-content .warning-box { background: #fff3f3; border-left: 4px solid var(--brand-accent); padding: 16px 20px; margin: 24px 0; border-radius: 0 var(--radius) var(--radius) 0; } .gpc-article-content .warning-box strong { display: block; font-size: 1rem; font-weight: 700; color: var(--brand-accent); margin-bottom: 6px; } /* Mid-article CTA box — injected after paragraph 2 */ .gpc-article-cta-mid { background: var(--bg-tinted); border-left: 4px solid var(--brand-accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; margin: 32px 0; font-family: var(--font-heading); font-size: .93rem; color: var(--text-body); line-height: 1.65; } .gpc-article-cta-mid strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--brand-primary); margin-bottom: 8px; } .gpc-article-cta-mid__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } /* Dark-on-light outline button — used inside the mid-article CTA */ .gpc-btn--outline-dark { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); } .gpc-btn--outline-dark:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); text-decoration: none; } /* Author byline card */ .gpc-article-author { display: flex; gap: 20px; align-items: flex-start; background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 28px; margin-top: 40px; } .gpc-article-author__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-primary); color: #fff; font-family: var(--font-heading); font-size: 1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gpc-article-author__body { display: flex; flex-direction: column; gap: 4px; } .gpc-article-author__eyebrow { font-family: var(--font-heading); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--brand-accent); margin: 0; } .gpc-article-author__name { font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--brand-primary); margin: 2px 0 0; } .gpc-article-author__title { font-family: var(--font-heading); font-size: .78rem; color: var(--text-muted); margin: 0; } .gpc-article-author__bio { font-size: .88rem; color: var(--text-body); line-height: 1.65; margin: 10px 0 0; } .gpc-article-author__credentials { font-size: .8rem; color: var(--text-muted); font-style: italic; margin: 6px 0 0; } /* Related services section */ .gpc-article-related { padding: 64px 0; background: var(--bg-white); } /* ─── Contact info strip ─────────────────────────────────────────────────── */ .gpc-contact-strip { background: var(--bg-tinted); border-bottom: 1px solid var(--border); } .gpc-contact-strip__grid { display: flex; flex-wrap: wrap; } .gpc-contact-strip__item { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; padding: 18px 24px; border-right: 1px solid var(--border); } .gpc-contact-strip__item:last-child { border-right: none; } .gpc-contact-strip__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; } .gpc-contact-strip__label { font-family: var(--font-heading); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--brand-accent); margin: 0 0 3px; } .gpc-contact-strip__value { font-family: var(--font-heading); font-size: .95rem; font-weight: 600; color: var(--text-dark); text-decoration: none; margin: 0; display: block; } a.gpc-contact-strip__value:hover { color: var(--brand-accent); text-decoration: none; } @media (max-width: 680px) { .gpc-contact-strip__item { border-right: none; border-bottom: 1px solid var(--border); } .gpc-contact-strip__item:last-child { border-bottom: none; } } /* ─── Standard / generic page template ──────────────────────────────────── */ .gpc-standard-body { padding: 56px 0 72px; background: var(--bg-light); } /* .gpc-standard-content stacks on top of .gpc-svc-content to inherit all typography rules — only override is max-width and centering. */ .gpc-standard-content { max-width: 840px; margin: 0 auto; } @media (max-width: 680px) { .gpc-standard-content { padding: 24px 20px; } } /* ─── Reviews page ───────────────────────────────────────────────────────── */ .gpc-reviews-body { padding: 56px 0 64px; background: var(--bg-light); } /* Aggregate rating box */ .gpc-review-aggregate { text-align: center; padding: 36px 24px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 48px; } .gpc-review-aggregate__score { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 900; color: var(--brand-primary); line-height: 1; margin-bottom: 10px; } .gpc-review-aggregate__stars { font-size: 1.8rem; color: #f59e0b; letter-spacing: 2px; margin-bottom: 10px; display: block; } .gpc-review-aggregate__sub { font-family: var(--font-heading); font-size: .875rem; color: var(--text-muted); margin: 0; } /* Review card — stacks inside .gpc-hub-cards grid */ .gpc-review-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; } .gpc-review-card__stars { font-size: 1.1rem; color: #f59e0b; letter-spacing: 2px; } .gpc-review-card__text { font-size: .95rem; color: var(--text-body); line-height: 1.75; flex: 1; font-style: italic; margin: 0; } .gpc-review-card__meta { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); } .gpc-review-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary); color: #fff; font-family: var(--font-heading); font-size: .8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gpc-review-card__info { display: flex; flex-direction: column; gap: 2px; } .gpc-review-card__name { font-family: var(--font-heading); font-size: .875rem; font-weight: 700; color: var(--text-dark); } .gpc-review-card__date { font-size: .78rem; color: var(--text-muted); } /* Leave-a-review section */ .gpc-reviews-leave { text-align: center; margin-top: 56px; padding: 40px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; } .gpc-reviews-leave h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--brand-primary); margin-bottom: 12px; } .gpc-reviews-leave > p { font-size: 1rem; color: var(--text-muted); max-width: 520px; margin: 0 auto 24px; line-height: 1.7; } /* ─── Header — logo + nav + dropdown + mobile ────────────────────────────── */ /* Logo component — shared between header (white bg) and footer (dark bg) */ .gpc-header__logo, .gpc-footer__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .gpc-logo-mark { width: 38px; height: 38px; background: var(--brand-accent); color: #fff; border-radius: 8px; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -.5px; } .gpc-logo-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; } .gpc-logo-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--brand-primary); letter-spacing: -.3px; } .gpc-logo-tagline { font-family: var(--font-heading); font-size: .62rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; } /* Desktop nav */ .gpc-nav { flex: 1; margin: 0 20px; overflow: visible; } .gpc-nav__list { display: flex; list-style: none; padding: 0; margin: 0; align-items: center; } .gpc-nav__item { position: relative; } .gpc-nav__item > a { display: flex; align-items: center; gap: 4px; padding: 0 14px; height: 72px; font-family: var(--font-heading); font-size: .875rem; font-weight: 600; color: var(--text-dark); text-decoration: none; transition: color .15s; white-space: nowrap; } .gpc-nav__item > a:hover { color: var(--brand-accent); text-decoration: none; } .gpc-nav__chevron { font-size: .65rem; color: var(--text-muted); transition: transform .15s; line-height: 1; } .gpc-nav__item--has-sub:hover .gpc-nav__chevron { transform: rotate(180deg); } /* Dropdown */ .gpc-nav__sub { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--brand-accent); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); list-style: none; padding: 8px 0; margin: 0; min-width: 220px; z-index: 200; } .gpc-nav__item--has-sub:hover .gpc-nav__sub { display: block; } .gpc-nav__sub li { margin: 0; } .gpc-nav__sub li a { display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-family: var(--font-heading); font-size: .875rem; font-weight: 500; color: var(--text-dark); text-decoration: none; transition: background .12s, color .12s; height: auto; } .gpc-nav__sub li a:hover { background: var(--bg-light); color: var(--brand-accent); text-decoration: none; } /* Header actions */ .gpc-header__actions { display: flex; align-items: center; gap: 0; flex-shrink: 0; } .gpc-header__phone { display: flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: .82rem; font-weight: 700; color: var(--brand-primary); text-decoration: none; margin-right: 14px; white-space: nowrap; transition: color .15s; } .gpc-header__phone:hover { color: var(--brand-accent); text-decoration: none; } .gpc-header__phone-icon { font-size: .9rem; line-height: 1; } .gpc-header__book-btn { padding: 9px 18px; font-size: .82rem; white-space: nowrap; } /* Hamburger button */ .gpc-hamburger { background: none; border: none; padding: 8px; cursor: pointer; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius); transition: background .15s; margin-left: auto; } .gpc-hamburger:hover { background: var(--bg-tinted); } .gpc-hamburger__bar { width: 22px; height: 2px; background: var(--brand-primary); border-radius: 2px; display: block; transition: opacity .2s; } /* Mobile nav drawer */ .gpc-mobile-nav { background: var(--brand-dark); border-top: 1px solid rgba(255,255,255,.08); padding: 10px 0 20px; } .gpc-mobile-nav__list { list-style: none; padding: 0; margin: 0; } .gpc-mobile-nav__list li > a { display: block; padding: 12px 24px; font-family: var(--font-heading); font-size: .95rem; font-weight: 500; color: rgba(255,255,255,.85); text-decoration: none; transition: background .12s, color .12s; height: auto; } .gpc-mobile-nav__list li > a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; } .gpc-mobile-nav__divider { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 8px 0; } .gpc-mobile-nav__cta-row { padding: 12px 24px 0; display: flex; flex-direction: column; gap: 10px; } .gpc-mobile-nav__cta-row .gpc-btn { text-align: center; } .gpc-btn--mobile-phone { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); padding: 12px 20px; font-size: .9rem; } .gpc-btn--mobile-phone:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); text-decoration: none; } /* Header scroll shadow — added by JS on scroll */ .gpc-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.10); } /* ─── Footer ─────────────────────────────────────────────────────────────── */ .gpc-footer { background: var(--brand-dark); color: rgba(255,255,255,.8); } .gpc-footer__top { padding: 64px 0 48px; border-bottom: 1px solid rgba(255,255,255,.08); } .gpc-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; } /* Footer logo overrides — text must be white on dark bg */ .gpc-footer__logo .gpc-logo-name { color: #fff; } .gpc-footer__logo .gpc-logo-tagline { color: rgba(255,255,255,.5); } .gpc-footer__brand-sub { font-size: .875rem; color: rgba(255,255,255,.55); line-height: 1.7; margin: 16px 0 18px; max-width: 300px; } .gpc-footer__phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #fff; text-decoration: none; margin-bottom: 18px; transition: color .15s; } .gpc-footer__phone:hover { color: var(--brand-accent); text-decoration: none; } .gpc-footer__hours { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid rgba(255,255,255,.1); } .gpc-footer__hours li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .875rem; } .gpc-footer__hours span { color: rgba(255,255,255,.45); } .gpc-footer__hours strong { color: #fff; font-weight: 600; } .gpc-footer__book-btn { font-size: .875rem; padding: 12px 22px; } .gpc-footer__col-heading { font-family: var(--font-heading); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-accent); margin-bottom: 18px; } .gpc-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .gpc-footer__links a { font-size: .875rem; color: rgba(255,255,255,.65); text-decoration: none; transition: color .15s; } .gpc-footer__links a:hover { color: #fff; text-decoration: none; } /* Footer bottom bar */ .gpc-footer__bottom { padding: 20px 0; } .gpc-footer__bottom .gpc-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .gpc-footer__copy { font-family: var(--font-heading); font-size: .8rem; color: rgba(255,255,255,.35); margin: 0; } .gpc-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; } .gpc-footer__legal a { font-family: var(--font-heading); font-size: .8rem; color: rgba(255,255,255,.35); text-decoration: none; transition: color .15s; } .gpc-footer__legal a:hover { color: rgba(255,255,255,.7); text-decoration: none; } /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .gpc-svc-grid { grid-template-columns: 1fr; } .gpc-svc-sidebar { position: static; } .gpc-book-grid { grid-template-columns: 1fr; } } @media (max-width: 680px) { .gpc-svc-content { padding: 24px 20px; } .gpc-book-form-wrap { padding: 24px 20px; } .gpc-story-box { padding: 28px 24px; } .gpc-steps-grid { grid-template-columns: 1fr; } .gpc-cta-strip__btns .gpc-btn { display: block; width: 100%; text-align: center; } .gpc-careers-form-wrap { padding: 24px 20px; } /* Article */ .gpc-article-content { padding: 24px 20px; } .gpc-article-author { flex-direction: column; } .gpc-article-cta-mid__btns .gpc-btn { display: block; width: 100%; text-align: center; } .gpc-article-meta { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 480px) { .gpc-container { padding: 0 16px; } .gpc-svc-cards { grid-template-columns: 1fr; } .gpc-hub-cards { grid-template-columns: 1fr; } .gpc-team-grid { grid-template-columns: 1fr; } .gpc-careers-grid { grid-template-columns: 1fr; } } /* Footer responsive */ @media (max-width: 900px) { .gpc-footer__grid { grid-template-columns: 1fr 1fr; } .gpc-footer__col--brand { grid-column: 1 / -1; } .gpc-footer__brand-sub { max-width: 100%; } } @media (max-width: 560px) { .gpc-footer__grid { grid-template-columns: 1fr; } .gpc-footer__col--brand { grid-column: auto; } .gpc-footer__bottom .gpc-container { flex-direction: column; text-align: center; } .gpc-footer__legal { justify-content: center; } }