, so a
bare .sub rule here would leak onto every landing hero. */
.gpr-landing .subtiles {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.gpr-landing .subtile {display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;
padding:18px 22px;text-decoration:none;color:var(--teal-2);font-weight:700;font-size:1.05rem;box-shadow:var(--shadow);transition:transform .14s ease, box-shadow .14s ease, color .14s ease}
.gpr-landing .subtile:hover {transform:translateY(-2px);box-shadow:0 12px 30px rgba(40,40,40,.12);color:var(--clay-d)}
.gpr-landing .subtile svg {flex:none;color:var(--teal);transition:transform .14s ease}
.gpr-landing .subtile:hover svg {transform:translateX(3px);color:var(--clay-d)}
@media(max-width:760px){.gpr-landing .subtiles{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.gpr-landing .subtiles{grid-template-columns:1fr}}
/* ---- MODALITIES GRID (facility / how-we-treat) ---- */
.gpr-landing .modgrid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media(max-width:760px){.gpr-landing .modgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gpr-landing .modgrid{grid-template-columns:1fr}}
.gpr-landing .mod {background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:var(--shadow)}
.gpr-landing .mod .ab {font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--clay-d);margin:0 0 .35em}
.gpr-landing .mod h3 {font-size:1.06rem;margin:0 0 .3em}
.gpr-landing .mod p {font-size:.9rem;margin:0;color:var(--muted)}
/* ---- ACCREDITATION STRIP ---- */
.gpr-landing .creds {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.gpr-landing .creds .crd {display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.gpr-landing .creds .crd svg {flex:none;width:44px;height:44px;padding:9px;border-radius:11px;background:var(--teal-soft);box-sizing:border-box}
.gpr-landing .creds .crd b {display:block;font-size:1rem;color:var(--teal-2);line-height:1.25}
.gpr-landing .creds .crd span {display:block;font-size:.86rem;color:var(--ink);margin-top:2px}
@media(max-width:760px){.gpr-landing .creds{grid-template-columns:1fr}}
/* ---- LOCATIONS GRID (locations hub) ---- */
.gpr-landing .loc-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.gpr-landing .loc-card {display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:14px;
padding:24px;box-shadow:var(--shadow);transition:transform .14s ease, box-shadow .14s ease}
.gpr-landing .loc-card:hover {transform:translateY(-3px);box-shadow:0 12px 30px rgba(40,40,40,.12)}
.gpr-landing .loc-card h3 {display:flex;align-items:center;gap:8px;margin:0 0 .45em}
.gpr-landing .loc-card h3 svg {flex:none}
.gpr-landing .loc-card p {font-size:.92rem;color:var(--muted);margin:0 0 1.2em;line-height:1.55}
.gpr-landing .loc-card .more {margin-top:auto;font-weight:700;font-size:.92rem;color:var(--teal);text-decoration:none;white-space:nowrap}
.gpr-landing .loc-card .more:hover {color:var(--clay-d)}
.gpr-landing .loc-card .more svg {display:inline-block;vertical-align:-3px;margin-left:5px;transition:transform .14s ease}
.gpr-landing .loc-card:hover .more svg {transform:translateX(3px)}
@media(max-width:860px) {.gpr-landing .loc-grid {grid-template-columns:1fr 1fr}}
@media(max-width:560px) {.gpr-landing .loc-grid {grid-template-columns:1fr}}
/* ---- DECISION HELPER (pillar) ---- */
.gpr-landing .decide {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.gpr-landing .decide .dcard {background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:24px;display:flex;flex-direction:column}
.gpr-landing .decide .dcard h3 {font-size:1.08rem}
.gpr-landing .decide .dcard p {font-size:.93rem;margin:0 0 .8em}
.gpr-landing .decide .dcard a {font-weight:700;text-decoration:none;color:var(--teal);margin-top:auto;padding-top:.5em;line-height:1.35}
@media(max-width:760px) {
.gpr-landing .decide {grid-template-columns:1fr}
}
/* ---- SPLIT (image + text) ---- */
.gpr-landing .split {display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.gpr-landing .split.rev .txt {order:2}
.gpr-landing ul.checks {list-style:none;padding:0;margin:1.2em 0 0}
.gpr-landing ul.checks li {position:relative;padding:0 0 .9em 32px;font-size:1rem}
.gpr-landing ul.checks li:before {content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
background:var(--sage);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center}
.gpr-landing ul.checks li b {color:var(--teal-2)}
.gpr-landing .feature-img {border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:var(--teal-2);aspect-ratio:5/4}
.gpr-landing .gmap {border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--teal-2);aspect-ratio:5/4}
.gpr-landing .gmap iframe {display:block;width:100%;height:100%;border:0}
.gpr-landing .feature-img svg {display:block;width:100%;height:auto}
.gpr-landing .feature-img img {display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:760px) {
.gpr-landing .split {grid-template-columns:1fr;gap:28px}
.gpr-landing .split.rev .txt {order:0}
}
/* ---- PROCESS / DAY (dark teal band) ---- */
.gpr-landing .day {background:var(--teal-2);color:#fff}
.gpr-landing .day h2 {color:#fff}
.gpr-landing .day .lede {color:#d7e4e1}
.gpr-landing .timeline {display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);margin-top:36px;border-radius:14px;overflow:hidden}
.gpr-landing .timeline .slot {background:var(--teal-2);padding:22px 20px}
.gpr-landing .timeline .slot .t {font-family:var(--serif);font-size:1.25rem;color:#fff;margin:0 0 .25em}
.gpr-landing .timeline .slot .d {font-size:.88rem;color:#cfe0dd;margin:0}
@media(max-width:760px) {
.gpr-landing .timeline {grid-template-columns:1fr 1fr}
}
@media(max-width:440px) {
.gpr-landing .timeline {grid-template-columns:1fr}
}
/* ---- STEPS ---- */
.gpr-landing .steps {counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.gpr-landing .stepbox {position:relative;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:28px 24px 24px}
.gpr-landing .stepbox:before {counter-increment:s;content:counter(s);position:absolute;top:-18px;left:24px;width:38px;height:38px;
background:var(--clay);color:#fff;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.15rem;box-shadow:0 4px 12px rgba(191,98,56,.35)}
.gpr-landing .stepbox h3 {margin-top:.5em}
.gpr-landing .stepbox p {font-size:.95rem;margin:0}
@media(max-width:760px) {
.gpr-landing .steps {grid-template-columns:1fr}
}
/* ---- CTA BAND ---- */
.gpr-landing .ctaband {background:var(--clay);color:#fff;text-align:center}
.gpr-landing .ctaband h2 {color:#fff;margin-bottom:.3em}
.gpr-landing .ctaband p {color:#ffe9dd;max-width:52ch;margin:0 auto 1.5em;font-size:1.1rem}
.gpr-landing .ctaband .actions {display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
/* ---- INSURANCE ---- */
.gpr-landing .ins {background:var(--cream)}
/* ---- CONTACT ---- */
.gpr-landing .contact {background:var(--teal);color:#fff}
.gpr-landing .contact h2 {color:#fff}
.gpr-landing .contact .grid {display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.gpr-landing .contact .info p {color:#d7e4e1}
.gpr-landing .contact .info a {color:#fff}
.gpr-landing .contact .bigform {background:var(--cream);color:var(--ink);border-radius:16px;padding:30px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.gpr-landing .contact .bigform label {display:block;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 5px}
.gpr-landing .contact .bigform input, .gpr-landing .contact .bigform select, .gpr-landing .contact .bigform textarea {width:100%;padding:.72em .8em;margin:0 0 15px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.95rem;background:#fff}
.gpr-landing .contact .bigform input:focus, .gpr-landing .contact .bigform select:focus, .gpr-landing .contact .bigform textarea:focus {outline:2px solid var(--clay);border-color:var(--clay)}
.gpr-landing .contact .bigform .btn {width:100%;justify-content:center}
@media(max-width:760px) {
.gpr-landing .contact .grid {grid-template-columns:1fr;gap:28px}
}
/* ---- FAQ ---- */
.gpr-landing .faq details {border-bottom:1px solid var(--line);padding:6px 0}
.gpr-landing .faq summary {cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-family:var(--serif);
font-size:1.18rem;font-weight:600;color:var(--teal-2)}
.gpr-landing .faq summary::-webkit-details-marker {display:none}
.gpr-landing .faq summary:after {content:"+";position:absolute;right:6px;top:13px;font-size:1.5rem;color:var(--clay);font-family:var(--sans);transition:transform .2s}
.gpr-landing .faq details[open] summary:after {content:"\2013"}
.gpr-landing .faq details p {margin:0 0 18px;max-width:70ch}
/* ---- CRISIS ---- */
.gpr-landing .crisis {background:var(--sand)}
.gpr-landing .crisis .box {background:var(--cream);border:1px solid var(--line);border-left:5px solid var(--clay);border-radius:12px;padding:26px 30px}
.gpr-landing .crisis ul {margin:.6em 0 0;padding-left:1.2em}
.gpr-landing .crisis li {margin:0 0 .5em}
/* ---- mobile sticky call (theme provides #bottom-phone-bar; this is a fallback, off by default) ---- */
/* ============================================================
Theme-compatibility overrides
Neutralize greatplains-2024 globals that would otherwise leak in:
theme sets p,li { color:#fff } + a reset forcing font-weight:bold,
and ul { padding-left:5% }.
============================================================ */
.gpr-landing p,
.gpr-landing li { color: var(--ink); font-weight: 400; }
.gpr-landing ul { padding-left: 0; }
/* ============================================================
Host-theme header on the landing templates only.
The theme header.php renders a built-in "grass field" banner for any
internal page, with the nav floating over it. These pages bring their
own hero, so we drop that banner and pin the nav as a compact white bar
flush above .hero. This stylesheet is enqueued ONLY on the landing
templates (detox / php / treatment / facility), so these element
selectors are naturally scoped to those pages.
============================================================ */
body.gpr-landing-page .header-bg-container > img:not(.mountain-range),
body.gpr-landing-page .header-bg-container .mountain-range { display:none !important; }
body.gpr-landing-page .header-bg-container {
height:100px;
background:#fff;
box-shadow:0 1px 0 #e3ddd0;
}
body.gpr-landing-page #desktop-header,
body.gpr-landing-page #desktop-header.header-with-background {
position:fixed; top:0; left:0; width:100%;
height:100px; background:#fff; z-index:30; box-shadow:0 1px 0 #e3ddd0;
}
body.gpr-landing-page #desktop-header .top-nav { height:100px; justify-content:space-between; }
body.gpr-landing-page #desktop-header .top-nav a.logo-link img { height:68px; max-height:68px; }
body.gpr-landing-page .social-container { padding-bottom:0; }
body.gpr-landing-page .header-right-side { margin-bottom:0; }
/* ============================================================
Mobile menu open: drop the page header with the rest of the page,
leaving only the close (X) toggler floating over the slid-in menu.
header.php's JS adds body.disable-scroll when the menu opens. This
stylesheet loads only on the landing templates, so the rule is
naturally scoped to them.
============================================================ */
body.disable-scroll .header-bg-container,
body.disable-scroll #desktop-header,
body.disable-scroll #desktop-header.header-with-background{
background:transparent !important;
box-shadow:none !important;
}
body.disable-scroll #desktop-header .logo-link,
body.disable-scroll #desktop-header .social-container,
body.disable-scroll #desktop-header .contact-container,
body.disable-scroll #desktop-header .header-phone{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none;
}
/* keep the X clickable above the full-screen menu */
body.disable-scroll #desktop-header .menu-icon-wrapper{ z-index:1000; }
/* ============================================================
Gravity Forms submit buttons.
The generic `.bigform input` / `.quickcard input` rules above also match
, painting it like a text field. Re-style the GF
submit (.gform_button) as the brand clay pill instead.
============================================================ */
.gpr-landing .quickcard .gform_button,
.gpr-landing .contact .bigform .gform_button{
width:100%;
margin:6px 0 0;
padding:.9em 1.5em;
border:2px solid transparent;
border-radius:999px;
background:var(--clay);
color:#fff;
font-family:var(--sans);
font-weight:700;
font-size:1rem;
line-height:1.2;
cursor:pointer;
transition:background .12s ease, transform .12s ease;
}
.gpr-landing .quickcard .gform_button:hover,
.gpr-landing .contact .bigform .gform_button:hover{
background:var(--clay-d);
transform:translateY(-1px);
}
.gpr-landing .quickcard .gform_wrapper,
.gpr-landing .contact .bigform .gform_wrapper{ margin:0; }
/* Brand-colored substance blocks (Addiction Rehab pillar "what we treat" grid) */
.gpr-landing .subgrid {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:34px}
.gpr-landing .subblock {display:flex;flex-direction:column;background:var(--teal-2);color:#fff;border-radius:14px;padding:24px 22px;text-decoration:none;border-top:3px solid var(--amber);box-shadow:var(--shadow);transition:transform .14s ease,box-shadow .14s ease}
.gpr-landing .subblock:hover {transform:translateY(-3px);box-shadow:0 16px 38px rgba(41,70,76,.30)}
.gpr-landing .subblock h3 {color:#fff;margin:0 0 .3em;font-size:1.16rem}
.gpr-landing .subblock p {margin:0;color:#cfe0dd;font-size:.92rem;line-height:1.5}
.gpr-landing .subblock .go {margin-top:auto;padding-top:1em;font-weight:700;color:var(--amber);display:inline-flex;align-items:center;gap:.35em}
/* Addiction Rehab page: 5 substance blocks as 3 + 2 with the last row centered */
.gpr-landing.gpr-addiction .subgrid {display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.gpr-landing.gpr-addiction .subgrid .subblock {flex:0 1 calc(33.333% - 11px);max-width:calc(33.333% - 11px)}
@media(max-width:760px){.gpr-landing.gpr-addiction .subgrid .subblock {flex-basis:calc(50% - 8px);max-width:calc(50% - 8px)}}
@media(max-width:480px){.gpr-landing.gpr-addiction .subgrid .subblock {flex-basis:100%;max-width:100%}}
/* Meet the Team */
.gpr-landing.gpr-team .hero {background-image:url("/wp-content/uploads/2024/11/Front-of-Great-Plains-Recovery.jpg")}
.gpr-landing .team-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.gpr-landing .team-card {background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.gpr-landing .team-card .photo {aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.gpr-landing .team-card .photo img {width:100%;height:100%;object-fit:cover;display:block}
.gpr-landing .team-card .photo--ph {display:grid;place-items:center;background:var(--teal-soft)}
.gpr-landing .team-card .photo--ph svg {width:40%;height:40%;color:var(--teal);opacity:.38}
.gpr-landing .team-card .body {padding:22px;display:flex;flex-direction:column;flex:1}
.gpr-landing .team-card h3 {margin:0 0 .15em;color:var(--teal-2)}
.gpr-landing .team-card .cred {color:var(--clay-d);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .25em}
.gpr-landing .team-card .role {color:var(--muted);margin:0 0 .6em;font-size:.98rem}
.gpr-landing .team-card .bio-open {margin-top:auto;align-self:flex-start;border:0;background:none;cursor:pointer;font:inherit;font-weight:700;color:var(--teal);border-top:1px solid var(--line);width:100%;text-align:left;padding:.85em 0 0;display:inline-flex;align-items:center;gap:.4em}
.gpr-landing .team-card .bio-open span {font-size:1.15em;line-height:1}
.gpr-landing .team-card .bio-open:hover {color:var(--clay-d)}
@media(max-width:860px){.gpr-landing .team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gpr-landing .team-grid{grid-template-columns:1fr}}
/* Blog index: grid of post cards + numbered pagination */
.gpr-landing.gpr-blog .hero {background-image:url("/wp-content/uploads/2024/05/GPR_Oklahoma_Cityscape.jpg")}
.gpr-landing .blog-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gpr-landing .blog-card {background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .14s ease,box-shadow .14s ease}
.gpr-landing .blog-card:hover {transform:translateY(-4px);box-shadow:0 16px 40px rgba(41,70,76,.16)}
.gpr-landing .blog-card .thumb {display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sand)}
.gpr-landing .blog-card .thumb img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gpr-landing .blog-card:hover .thumb img {transform:scale(1.04)}
.gpr-landing .blog-card .bc-body {padding:22px;display:flex;flex-direction:column;flex:1}
.gpr-landing .blog-card .bc-date {color:var(--clay-d);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5em}
.gpr-landing .blog-card h2 {font-family:var(--serif);font-weight:700;letter-spacing:-.01em;font-size:1.2rem;line-height:1.28;margin:0 0 .45em}
.gpr-landing .blog-card h2 a {color:var(--teal-2);text-decoration:none}
.gpr-landing .blog-card h2 a:hover {color:var(--clay-d)}
.gpr-landing .blog-card .excerpt {color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 0 1.1em}
.gpr-landing .blog-card .more {margin-top:auto;align-self:flex-start;font-weight:700;color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:.35em}
.gpr-landing .blog-card .more:hover {color:var(--clay-d)}
@media(max-width:860px){.gpr-landing .blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gpr-landing .blog-grid{grid-template-columns:1fr}}
.gpr-landing .gpr-pagination {margin-top:46px}
.gpr-landing .gpr-pagination .nav-links {display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.gpr-landing .gpr-pagination .page-numbers {display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border-radius:11px;border:1px solid var(--line);color:var(--teal-2);text-decoration:none;font-weight:700;background:#fff}
.gpr-landing .gpr-pagination a.page-numbers:hover {background:var(--cream);border-color:var(--teal)}
.gpr-landing .gpr-pagination .page-numbers.current {background:var(--teal);color:#fff;border-color:var(--teal)}
.gpr-landing .gpr-pagination .page-numbers.dots {border-color:transparent;background:none;min-width:24px}
/* Meet the Team bio modal */
dialog.bio-modal {max-width:620px;width:calc(100% - 32px);max-height:85vh;overflow:auto;border:0;border-radius:16px;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.4);color:var(--ink)}
dialog.bio-modal::backdrop {background:rgba(20,30,32,.55)}
dialog.bio-modal .bio-close {position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:var(--sand);color:var(--teal-2);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
dialog.bio-modal .bio-close:hover {background:var(--line)}
dialog.bio-modal .bio-modal-head {display:flex;gap:18px;align-items:center;padding:28px 26px 0}
dialog.bio-modal .bio-modal-photo {width:96px;height:96px;border-radius:12px;object-fit:cover;flex:none}
dialog.bio-modal .bio-modal-photo--ph {display:grid;place-items:center;background:var(--teal-soft)}
dialog.bio-modal .bio-modal-photo--ph svg {width:54px;height:54px;color:var(--teal);opacity:.38}
dialog.bio-modal h3 {margin:0 0 .12em;color:var(--teal-2);font-family:var(--display)}
dialog.bio-modal .cred {color:var(--clay-d);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .2em}
dialog.bio-modal .role {color:var(--muted);margin:0}
dialog.bio-modal .bio {padding:18px 26px 30px;line-height:1.62}
dialog.bio-modal .bio p {margin:0 0 .85em}
@media(max-width:520px){dialog.bio-modal .bio-modal-head{flex-direction:column;text-align:center}}
/* Mobile: swap tiny SVG charts for a readable "by the numbers" list (only where a .bynum fallback exists) */
.gpr-landing figure.tufte .bynum {display:none}
@media (max-width:768px){
.gpr-landing figure.tufte:has(.bynum) > svg {display:none}
.gpr-landing figure.tufte .bynum {display:block;margin:4px 0 10px}
.gpr-landing figure.tufte .bynum .bn {display:flex;align-items:baseline;gap:.6em;padding:.55em 0;border-bottom:1px solid var(--line)}
.gpr-landing figure.tufte .bynum .bn:last-child {border-bottom:0}
.gpr-landing figure.tufte .bynum .big {font-family:var(--display);font-weight:700;font-size:1.85rem;color:var(--clay);line-height:1;flex:none}
.gpr-landing figure.tufte .bynum .lab {color:var(--ink);font-size:.95rem;line-height:1.35}
}
/* ============================================================
Homepage hero — modernized to match the gpr-landing heroes.
Background image, mountain divider, and nav stay in header.php; this only
restyles the ACF headline/subheading + buttons front-page.php drops into
#home-hero, plus a soft readability scrim. Scoped to body.home so it never
touches the internal-page header banner. (:root tokens are global.)
============================================================ */
body.home .header-bg-container::after {
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to bottom, rgba(25,38,40,.30) 0%, rgba(25,38,40,0) 24%, rgba(25,38,40,.58) 73%, rgba(25,38,40,0) 93%);
}
body.home #desktop-header {z-index:50} /* fixed nav must sit ABOVE the hero copy so the headline slides behind it on scroll */
body.home #home-hero {z-index:2} /* hero copy: above the scrim, below the nav */
body.home #home-hero .content-wrapper {max-width:1120px;margin:0 auto;padding:0 24px}
body.home #home-hero .hh-inner {max-width:680px;margin:0 auto;text-align:center}
body.home section#home-hero h2.hh-title {
font-family:var(--display);font-weight:400;
font-size:clamp(2.7rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:.005em;
color:#fff;margin:0 0 .12em;filter:none;text-shadow:0 2px 26px rgba(0,0,0,.5);
}
body.home section#home-hero .hh-sub {
font-family:var(--sans);font-weight:600;
font-size:clamp(1.05rem,2vw,1.5rem);line-height:1.32;letter-spacing:.005em;
color:#eaf2f0;margin:0 0 1.5em;filter:none;text-shadow:0 1px 14px rgba(0,0,0,.45);
}
body.home #home-hero .hh-actions {display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin:0}
body.home #home-hero .hh-btn {
display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);
font-weight:700;font-size:1rem;padding:.85em 1.5em;border-radius:999px;
text-decoration:none;border:2px solid transparent;line-height:1;margin:0;
transition:transform .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
}
body.home #home-hero .hh-btn:hover {transform:translateY(-1px)}
body.home #home-hero .hh-btn-call {background:var(--amber);color:var(--ink);box-shadow:0 6px 18px rgba(245,164,78,.4)}
body.home #home-hero .hh-btn-call:hover {background:#e0912f;color:var(--ink)}
body.home #home-hero .hh-btn-ghost {background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.75)}
body.home #home-hero .hh-btn-ghost:hover {background:#fff;color:var(--teal-2);border-color:#fff}
body.home #home-hero .hh-btn svg {flex:none}
@media (max-width:1000px){
/* Give the homepage hero a real, deterministic height and treat the ACF photo
as a cover background so the headline + CTAs have room to breathe. The base
markup keeps the in normal flow (desktop); here everything is absolute
so the hero is a fixed 500px band regardless of the photo's aspect ratio. */
body.home .header-bg-container {min-height:500px;overflow:hidden}
body.home .header-bg-container > img:not(.mountain-range) {
position:absolute;top:0;left:0;width:100%;height:100%;
object-fit:cover;object-position:50% 32%;
}
body.home .header-bg-container > img.mountain-range {display:none}
/* match the internal (gpr-landing) pages' logo size while keeping the header
transparent over the photo; the hamburger is already the same size */
body.home #desktop-header .top-nav a.logo-link img {height:68px;max-height:68px}
/* scrim: keep the top (logo/sky) light and darken through the vertically
centered copy so the headline + both buttons stay legible over the photo */
body.home .header-bg-container::after {
background:linear-gradient(to bottom, rgba(25,38,40,.28) 0%, rgba(25,38,40,.12) 22%, rgba(25,38,40,.48) 55%, rgba(25,38,40,.72) 100%);
}
/* vertically center the hero copy in the band below the header */
body.home #home-hero {position:absolute;left:0;right:0;top:100px;bottom:0;display:flex;align-items:center;z-index:3}
body.home #home-hero .content-wrapper {width:100%;padding:0 22px}
body.home #home-hero .hh-inner {max-width:none}
body.home section#home-hero h2.hh-title {
text-align:center;max-width:none;font-size:clamp(2rem,8.2vw,2.7rem);line-height:1.06;margin-bottom:.18em;
}
body.home section#home-hero .hh-sub {text-align:center;max-width:none;font-size:1.06rem;margin-bottom:1.2em}
body.home #home-hero .hh-actions {flex-direction:column;gap:12px;align-items:center}
body.home #home-hero .hh-btn {width:100%;max-width:300px;justify-content:center}
}
/* ---- Facility photo carousel (Swiper): full slides, controls below ---- */
.gpr-landing .gpr-gallery-wrap {margin-top:34px}
.gpr-landing .gpr-gallery {overflow:hidden;border-radius:16px}
.gpr-landing .gpr-gallery .swiper-slide img {display:block;width:100%;height:400px;object-fit:cover;border-radius:16px;box-shadow:var(--shadow)}
.gpr-landing .gpr-gallery-controls {display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px;position:relative}
.gpr-landing .gpr-nav {display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--teal-2);box-shadow:var(--shadow);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease}
.gpr-landing .gpr-nav:hover {background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-1px)}
.gpr-landing .gpr-nav.swiper-button-disabled {opacity:.4;cursor:default;transform:none;background:#fff;color:var(--teal-2);border-color:var(--line)}
.gpr-landing .gpr-gallery-controls .swiper-pagination {position:static !important;width:auto !important;display:flex;align-items:center;gap:8px;margin:0;inset:auto}
.gpr-landing .gpr-gallery-pagination .swiper-pagination-bullet {background:var(--teal-2);opacity:.3;width:9px;height:9px;margin:0;transition:opacity .15s ease}
.gpr-landing .gpr-gallery-pagination .swiper-pagination-bullet-active {background:var(--clay);opacity:1}
@media(max-width:600px){.gpr-landing .gpr-gallery .swiper-slide img {height:280px}}
/* ---- Legal pages (Privacy Policy, Terms of Service): sticky TOC + readable body ---- */
.gpr-landing.gpr-legal .hero {background-image:url("/wp-content/uploads/2024/05/GPR_Tulsa_Oklahoma-min.jpg")}
.gpr-landing.gpr-legal .hero .hero-inner {min-height:404px;align-content:center}
.gpr-landing .legal-layout {display:grid;grid-template-columns:250px 1fr;gap:48px;align-items:start}
.gpr-landing .legal-toc {position:sticky;top:120px;align-self:start}
.gpr-landing .legal-toc .toc-label {font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700;color:var(--clay-d);margin:0 0 .8em}
.gpr-landing .legal-toc nav {display:block;height:auto;padding:0;position:static;background:none;backdrop-filter:none;z-index:auto;border-left:2px solid var(--line)}
.gpr-landing .legal-toc nav a {display:block;font-size:.9rem;line-height:1.35;color:var(--muted);text-decoration:none;padding:.42em 0 .42em 14px;margin-left:-2px;border-left:2px solid transparent;transition:color .12s ease,border-color .12s ease}
.gpr-landing .legal-toc nav a:hover {color:var(--teal-2)}
.gpr-landing .legal-toc nav a.active {color:var(--teal-2);font-weight:700;border-left-color:var(--clay)}
.gpr-landing .legal-toc .toc-help {margin-top:22px;font-size:.92rem;padding:.7em 1.2em}
.gpr-landing .legal-body.prose {max-width:none;text-align:justify;font-size:16px;line-height:1.65}
.gpr-landing .legal-body.prose p,
.gpr-landing .legal-body.prose li {font-size:16px;line-height:1.65}
.gpr-landing .legal-note p {font-size:15px}
.gpr-landing .legal-body h2,.gpr-landing .legal-body h3,.gpr-landing .legal-meta {text-align:left}
.gpr-landing .legal-body h2 {scroll-margin-top:120px;margin-top:1.9em}
.gpr-landing .legal-body h2:first-of-type {margin-top:.4em}
.gpr-landing .legal-meta {font-size:.85rem;color:var(--muted);margin:0 0 1.6em}
.gpr-landing .legal-note {background:var(--cream);border-left:4px solid var(--teal);border-radius:10px;padding:15px 20px;margin:1.1em 0 1.5em;font-size:15px;line-height:1.55;text-align:left}
.gpr-landing .legal-note strong {color:var(--teal-2)}
@media(max-width:900px){
.gpr-landing .legal-layout {grid-template-columns:1fr;gap:6px}
.gpr-landing .legal-toc {position:static;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
}
/* ============================================================
Single blog post (single.php) — article read view
============================================================ */
.gpr-landing.gpr-single .post-hero .hero-inner {max-width:840px;padding-top:82px;padding-bottom:90px}
.gpr-landing.gpr-single .hero h1 {font-size:clamp(2rem,4.2vw,3rem);max-width:20ch;margin-left:auto;margin-right:auto}
.gpr-landing.gpr-single .post-meta {font-size:.95rem;color:#cfe0dd;margin:1.2em 0 0}
.gpr-landing .post-body {padding:60px 0 56px}
.gpr-landing .prose {font-size:1.075rem;line-height:1.78;color:var(--ink)}
.gpr-landing .prose > *:first-child {margin-top:0}
.gpr-landing .prose h2 {font-family:var(--serif);font-weight:700;letter-spacing:-.01em;font-size:clamp(1.45rem,2.6vw,1.92rem);margin:1.75em 0 .5em;color:var(--teal-2)}
.gpr-landing .prose h3 {font-size:1.3rem;margin:1.5em 0 .4em;color:var(--teal-2)}
.gpr-landing .prose h4 {font-size:1.08rem;margin:1.4em 0 .35em;color:var(--teal-2);font-family:var(--serif);font-weight:700}
.gpr-landing .prose p {margin:0 0 1.25em}
.gpr-landing .prose a {color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.gpr-landing .prose a:hover {color:var(--clay-d)}
.gpr-landing .prose strong, .gpr-landing .prose b {font-weight:700;color:var(--ink)}
.gpr-landing .prose ul, .gpr-landing .prose ol {margin:0 0 1.25em;padding-left:1.4em}
.gpr-landing .prose li {margin:0 0 .5em;padding-left:.2em}
.gpr-landing .prose ul li {list-style:disc}
.gpr-landing .prose ol li {list-style:decimal}
.gpr-landing .prose img {max-width:100%;height:auto;border-radius:14px;margin:1.6em 0;box-shadow:var(--shadow)}
.gpr-landing .prose figure {margin:1.6em 0}
.gpr-landing .prose figure img {margin:0}
.gpr-landing .prose figcaption {font-size:.85rem;color:var(--muted);margin-top:.6em;text-align:center}
.gpr-landing .prose blockquote {margin:1.7em 0;padding:.5em 0 .5em 1.4em;border-left:4px solid var(--clay);color:var(--teal-2);font-size:1.16rem;font-style:italic;line-height:1.6}
.gpr-landing .prose blockquote p:last-child {margin-bottom:0}
.gpr-landing .prose h2 a, .gpr-landing .prose h3 a {text-decoration:none}
.gpr-landing .prose hr {border:0;border-top:1px solid var(--line);margin:2.2em 0}
/* Tables in blog content (plain
| markup; first row = header, first column = labels) */ .gpr-landing .prose table {width:100%;border-collapse:collapse;margin:1.7em 0;font-size:.97rem;line-height:1.5} .gpr-landing .prose table td {padding:.72em .95em;border:1px solid var(--line);vertical-align:top;text-align:left;overflow-wrap:break-word} .gpr-landing .prose table tr:nth-child(even) td {background:var(--cream)} .gpr-landing .prose table td:first-child {font-weight:700;color:var(--teal-2)} .gpr-landing .prose table tr:first-child td {background:var(--teal-2);color:#fff;font-weight:700;border-color:var(--teal-2)} .gpr-landing .prose table tr:first-child td b {color:#fff} .gpr-landing .prose table tr:first-child td:first-child {color:#fff} @media (max-width:600px){ .gpr-landing .prose table {display:block;overflow-x:auto;white-space:normal} } .gpr-landing .post-tags {margin:2.4em 0 0;display:flex;flex-wrap:wrap;gap:9px} .gpr-landing .post-tags a {font-size:.8rem;font-weight:600;text-decoration:none;color:var(--teal-2);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:.4em 1em} .gpr-landing .post-tags a:hover {background:var(--sand);color:var(--clay-d)} .gpr-landing .post-foot {display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:2.4em;padding-top:1.8em;border-top:1px solid var(--line)} .gpr-landing .post-foot .back-to-blog {font-weight:700;color:var(--teal);text-decoration:none} .gpr-landing .post-foot .back-to-blog:hover {color:var(--clay-d)} /* Article TOC layout (single.php) — reuses the .legal-toc aside styles above. Default is a centered single column (also the no-JS fallback); the script adds .has-toc once it has built the link list from the post's h2s. */ .gpr-landing .post-layout .post-main {max-width:760px;margin:0 auto} .gpr-landing .post-layout.has-toc {display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start} .gpr-landing .post-layout.has-toc .post-main {margin:0} .gpr-landing .prose h2 {scroll-margin-top:120px} @media(max-width:900px){ .gpr-landing .post-layout.has-toc {display:block} .gpr-landing .post-layout.has-toc .post-main {margin:0 auto} } /* Mid-post CTA (auto-inserted between h2 sections by gpr_midpost_cta_html()) */ .gpr-landing .prose .gpr-midpost-cta {background:var(--cream);border:1px solid var(--line);border-left:5px solid var(--clay);border-radius:14px;padding:26px 28px;margin:2.3em 0;text-align:center;box-shadow:var(--shadow)} .gpr-landing .prose .gpr-midpost-cta h3 {margin:0 0 .35em;color:var(--teal-2)} .gpr-landing .prose .gpr-midpost-cta p {margin:0 auto 1.15em;max-width:52ch;font-size:1rem;color:var(--muted)} .gpr-landing .prose .gpr-midpost-cta .actions {display:flex;justify-content:center;flex-wrap:wrap;gap:12px} /* the .prose a underline/link-color rules must not restyle the buttons */ .gpr-landing .prose .gpr-midpost-cta .btn {text-decoration:none} .gpr-landing .prose .gpr-midpost-cta .btn-call {color:var(--ink)} .gpr-landing .prose .gpr-midpost-cta .btn-ghost {color:var(--teal)} .gpr-landing .prose .gpr-midpost-cta .btn-ghost:hover {color:#fff} /* Homepage: the hero JPG has a baked-in white "mountain" bottom edge that needs white beneath it. Give the home body a white base and drop the teal trust bar down so the peaks melt into white instead of colliding with teal. */ .gpr-landing.gpr-home {background:#fff} /* Homepage: white trust cards so the hero's white silhouette flows straight into them as one continuous white field (no teal band chopping the mountains off). */ .gpr-landing.gpr-home .trust {background:#fff;margin-top:0} .gpr-landing.gpr-home .trust .row {background:var(--line)} .gpr-landing.gpr-home .trust .cell {background:#fff;padding-top:26px} .gpr-landing.gpr-home .trust .cell b {color:var(--teal-2)} .gpr-landing.gpr-home .trust .cell span {color:var(--muted)} /* ============================================================ RESIDENTIAL LANDING PAGE (.gpr-residential) Merged in from the former residential-landing.css. Scoped to .gpr-residential (and the residential body-template class) so it never affects the .gpr-landing pages above. Shared palette tokens, @font-face, and the site-wide body.disable-scroll rules are NOT repeated here (they live in this file above and in main.css). ============================================================ */ .gpr-residential * {box-sizing:border-box} .gpr-residential {scroll-behavior:smooth} .gpr-residential { margin:0; font-family:var(--sans); color:var(--ink); background:var(--sand); line-height:1.65; font-size:17px; -webkit-font-smoothing:antialiased; } .gpr-residential h1, .gpr-residential h2, .gpr-residential h3 {font-family:var(--serif);line-height:1.16;font-weight:700;letter-spacing:-.01em;text-align:inherit} .gpr-residential h2 {font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0 0 .6em;color:var(--teal-2);font-weight:800} .gpr-residential h3 {font-size:1.22rem;margin:0 0 .4em;color:var(--teal-2);font-weight:700} .gpr-residential p {margin:0 0 1.1em;text-align:inherit} .gpr-residential a {color:var(--teal);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .gpr-residential a:hover {color:var(--clay-d)} .gpr-residential .wrap {max-width:1080px;margin:0 auto;padding:0 24px} .gpr-residential .narrow {max-width:760px} .gpr-residential section {padding:64px 0} .gpr-residential .eyebrow {font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;color:var(--clay-d);margin:0 0 .8em} .gpr-residential .btn {display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:700;font-size:1rem; padding:.85em 1.5em;border-radius:999px;text-decoration:none;cursor:pointer;border:2px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;white-space:nowrap} .gpr-residential .btn:hover {transform:translateY(-1px)} .gpr-residential .btn-call {background:var(--amber);color:var(--ink);box-shadow:0 6px 18px rgba(245,164,78,.4)} .gpr-residential .btn-call:hover {background:#e0912f;color:var(--ink)} .gpr-residential .btn-ghost {background:transparent;color:var(--teal);border-color:var(--teal)} .gpr-residential .btn-ghost:hover {background:var(--teal);color:#fff} .gpr-residential .btn-light {background:#fff;color:var(--teal-2);border-color:rgba(255,255,255,.6)} .gpr-residential .btn-light:hover {background:var(--cream);color:var(--teal-2)} .gpr-residential header.site {position:sticky;top:0;z-index:50;background:rgba(251,248,242,.94); backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)} .gpr-residential .topbar {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;max-width:1180px;margin:0 auto} .gpr-residential .brand {display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--teal-2)} .gpr-residential .brand .logo {height:50px;width:auto;display:block} .gpr-residential .brand .mark {width:38px;height:38px;flex:none} @media(max-width:560px) { .gpr-residential .brand .logo {height:40px} } .gpr-residential .brand .name {font-family:var(--serif);font-weight:600;font-size:1.16rem;line-height:1.05} .gpr-residential .brand .name small {display:block;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.13em; text-transform:uppercase;color:var(--clay-d);margin-top:2px} .gpr-residential .nav {display:flex;align-items:center;gap:22px} .gpr-residential .nav a.lnk {font-size:.92rem;color:var(--ink);text-decoration:none;font-weight:600} .gpr-residential .nav a.lnk:hover {color:var(--clay-d)} .gpr-residential .header-cta {display:flex;align-items:center;gap:14px} .gpr-residential .phone-block {text-align:right;line-height:1.1} .gpr-residential .phone-block .lbl {font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700} .gpr-residential .phone-block a {font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--teal-2);text-decoration:none} @media(max-width:960px) { .gpr-residential .nav {display:none} } @media(max-width:560px) { .gpr-residential .phone-block .lbl {display:none} .gpr-residential .brand .name {font-size:1rem} } .gpr-residential .hero {position:relative;overflow:hidden;color:#fff; background:#29464c url("/wp-content/uploads/2024/05/GPR_Red_Clay_Mountains-min.jpg") center 35%/cover no-repeat} .gpr-residential .hero:before {content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(102deg, rgba(25,38,40,.93) 0%, rgba(25,38,40,.78) 40%, rgba(25,38,40,.34) 72%, rgba(25,38,40,.12) 100%)} .gpr-residential .hero-inner {position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:78px 24px 90px; display:grid;grid-template-columns:1.2fr .85fr;gap:48px;align-items:center} .gpr-residential .hero h1 {font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,5.2vw,3.7rem);line-height:1.04; letter-spacing:.005em;margin:0 0 .35em;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.4)} .gpr-residential .hero .sub {font-size:1.18rem;color:#eaf2f0;max-width:38ch;margin:0 0 1.6em} .gpr-residential .hero .actions {display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1.5em} .gpr-residential .hero .reassure {font-size:.95rem;color:#cfe0dd;display:flex;align-items:center;gap:8px} .gpr-residential .hero .reassure svg {flex:none} .gpr-residential .quickcard {background:#fff;color:var(--ink);border-radius:16px;padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.28)} .gpr-residential .quickcard h3 {margin:0 0 .15em;color:var(--teal-2)} .gpr-residential .quickcard .small {font-size:.86rem;color:var(--muted);margin:0 0 16px} .gpr-residential .quickcard label {display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 5px} .gpr-residential .quickcard input, .gpr-residential .quickcard select, .gpr-residential .quickcard textarea {width:100%;padding:.7em .8em;margin:0 0 13px;border:1px solid var(--line); border-radius:9px;font:inherit;font-size:.95rem;background:#fff;color:var(--ink)} .gpr-residential .quickcard input:focus, .gpr-residential .quickcard select:focus, .gpr-residential .quickcard textarea:focus {outline:2px solid var(--teal);border-color:var(--teal)} .gpr-residential .quickcard .btn {width:100%;justify-content:center} .gpr-residential .formnote {font-size:.74rem;color:var(--muted);margin:10px 0 0;line-height:1.45} .gpr-residential .form-ok {display:none;background:var(--teal-soft);border:1px solid var(--teal);border-radius:10px;padding:14px;font-size:.92rem;color:var(--teal-2)} @media(max-width:860px) { .gpr-residential .hero-inner {grid-template-columns:1fr;gap:34px;padding:54px 24px 64px} } .gpr-residential .trust {background:var(--teal);color:#fff;padding:0} .gpr-residential .trust .row {display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.12)} .gpr-residential .trust .cell {background:var(--teal);padding:20px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px} .gpr-residential .trust .cell svg {opacity:.95} .gpr-residential .trust .cell b {font-size:.95rem;font-weight:700} .gpr-residential .trust .cell span {font-size:.78rem;color:#cfe0dd;line-height:1.35} @media(max-width:860px) { .gpr-residential .trust .row {grid-template-columns:repeat(2,1fr)} .gpr-residential .trust .cell:last-child {grid-column:1/-1} } .gpr-residential .data {background:var(--cream)} .gpr-residential .data .lede {font-size:1.15rem;max-width:62ch;color:var(--ink)} .gpr-residential .figgrid {display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:42px} .gpr-residential figure.tufte {margin:0;background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:24px 24px 18px} .gpr-residential figure.tufte.full {grid-column:1/-1} .gpr-residential figure.tufte h3 {font-size:1.08rem;margin-bottom:.15em} .gpr-residential figure.tufte .kick {font-size:.82rem;color:var(--muted);margin:0 0 14px} .gpr-residential figure.tufte svg {display:block;width:100%;height:auto;overflow:visible} .gpr-residential figure.tufte figcaption {font-size:.83rem;color:var(--muted);margin-top:12px;line-height:1.5;border-top:1px solid var(--line);padding-top:11px} .gpr-residential figure.tufte figcaption a {color:var(--teal)} .gpr-residential .src-note {font-size:.78rem;color:var(--muted);margin-top:26px} .gpr-residential text {font-family:var(--sans)} /* Mobile: swap the tiny SVG charts for a readable "by the numbers" list (mirrors gpr-landing.css; residential uses its own stylesheet so it needs its own copy, otherwise the raw .bn rows collide, e.g. "+77%rise"). */ .gpr-residential figure.tufte .bynum {display:none} @media(max-width:760px) { .gpr-residential .figgrid {grid-template-columns:1fr} .gpr-residential figure.tufte:has(.bynum) > svg {display:none} .gpr-residential figure.tufte .bynum {display:block;margin:4px 0 10px} .gpr-residential figure.tufte .bynum .bn {display:flex;align-items:baseline;gap:.6em;padding:.55em 0;border-bottom:1px solid var(--line)} .gpr-residential figure.tufte .bynum .bn:last-child {border-bottom:0} .gpr-residential figure.tufte .bynum .big {font-family:var(--display);font-weight:700;font-size:1.85rem;color:var(--clay);line-height:1;flex:none} .gpr-residential figure.tufte .bynum .lab {color:var(--ink);font-size:.95rem;line-height:1.35} } .gpr-residential .cards {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px} .gpr-residential .card {background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--shadow);position:relative} .gpr-residential .card .step {font-family:var(--serif);font-size:.85rem;color:var(--clay-d);font-weight:700;letter-spacing:.04em;text-transform:uppercase} .gpr-residential .card h3 {margin:.35em 0 .2em} .gpr-residential .card .dur {font-size:.82rem;color:var(--muted);font-weight:600;margin-bottom:.7em} .gpr-residential .card p {font-size:.95rem;margin:0} @media(max-width:760px) { .gpr-residential .cards {grid-template-columns:1fr} } .gpr-residential .split {display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .gpr-residential .split.rev .txt {order:2} .gpr-residential ul.checks {list-style:none;padding:0;margin:1.2em 0 0} .gpr-residential ul.checks li {position:relative;padding:0 0 .9em 32px;font-size:1rem} .gpr-residential ul.checks li:before {content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%; background:var(--sage);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center} .gpr-residential ul.checks li b {color:var(--teal-2)} .gpr-residential .feature-img {border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:var(--teal-2);aspect-ratio:5/4} .gpr-residential .feature-img svg {display:block;width:100%;height:auto} .gpr-residential .feature-img img {display:block;width:100%;height:100%;object-fit:cover} @media(max-width:760px) { .gpr-residential .split {grid-template-columns:1fr;gap:28px} .gpr-residential .split.rev .txt {order:0} } .gpr-residential .day {background:var(--teal-2);color:#fff} .gpr-residential .day h2 {color:#fff} .gpr-residential .day .lede {color:#d7e4e1;max-width:60ch} .gpr-residential .timeline {display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);margin-top:36px;border-radius:14px;overflow:hidden} .gpr-residential .timeline .slot {background:var(--teal-2);padding:22px 20px} .gpr-residential .timeline .slot .t {font-family:var(--serif);font-size:1.25rem;color:#fff;margin:0 0 .25em} .gpr-residential .timeline .slot .d {font-size:.88rem;color:#cfe0dd;margin:0} @media(max-width:760px) { .gpr-residential .timeline {grid-template-columns:1fr 1fr} } @media(max-width:440px) { .gpr-residential .timeline {grid-template-columns:1fr} } .gpr-residential .steps {counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px} .gpr-residential .stepbox {position:relative;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:28px 24px 24px} .gpr-residential .stepbox:before {counter-increment:s;content:counter(s);position:absolute;top:-18px;left:24px;width:38px;height:38px; background:var(--clay);color:#fff;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.15rem;box-shadow:0 4px 12px rgba(191,98,56,.35)} .gpr-residential .stepbox h3 {margin-top:.5em} .gpr-residential .stepbox p {font-size:.95rem;margin:0} @media(max-width:760px) { .gpr-residential .steps {grid-template-columns:1fr} } .gpr-residential .ctaband {background:var(--clay);color:#fff;text-align:center} .gpr-residential .ctaband h2 {color:#fff;margin-bottom:.3em} .gpr-residential .ctaband p {color:#ffe9dd;max-width:52ch;margin:0 auto 1.5em;font-size:1.1rem} .gpr-residential .ctaband .actions {display:flex;justify-content:center;flex-wrap:wrap;gap:14px} .gpr-residential .ins {background:var(--cream)} .gpr-residential .logos {display:flex;flex-wrap:wrap;gap:14px;margin-top:24px} .gpr-residential .logos .chip {background:var(--sand);border:1px solid var(--line);border-radius:8px;padding:10px 18px;font-weight:700;color:var(--teal-2);font-size:.92rem} .gpr-residential .contact {background:var(--teal);color:#fff} .gpr-residential .contact h2 {color:#fff} .gpr-residential .contact .grid {display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .gpr-residential .contact .info p {color:#d7e4e1} .gpr-residential .contact .info a {color:#fff} .gpr-residential .contact .bigform {background:var(--cream);color:var(--ink);border-radius:16px;padding:30px;box-shadow:0 18px 50px rgba(0,0,0,.25)} .gpr-residential .contact .bigform .two {display:grid;grid-template-columns:1fr 1fr;gap:14px} .gpr-residential .contact .bigform label {display:block;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 5px} .gpr-residential .contact .bigform input, .gpr-residential .contact .bigform select, .gpr-residential .contact .bigform textarea {width:100%;padding:.72em .8em;margin:0 0 15px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.95rem;background:#fff} .gpr-residential .contact .bigform input:focus, .gpr-residential .contact .bigform select:focus, .gpr-residential .contact .bigform textarea:focus {outline:2px solid var(--clay);border-color:var(--clay)} .gpr-residential .contact .bigform .btn {width:100%;justify-content:center} @media(max-width:760px) { .gpr-residential .contact .grid {grid-template-columns:1fr;gap:28px} .gpr-residential .contact .bigform .two {grid-template-columns:1fr} } .gpr-residential .faq details {border-bottom:1px solid var(--line);padding:6px 0} .gpr-residential .faq summary {cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-family:var(--serif); font-size:1.18rem;font-weight:600;color:var(--teal-2)} .gpr-residential .faq summary::-webkit-details-marker {display:none} .gpr-residential .faq summary:after {content:"+";position:absolute;right:6px;top:13px;font-size:1.5rem;color:var(--clay);font-family:var(--sans);transition:transform .2s} .gpr-residential .faq details[open] summary:after {content:"\2013"} .gpr-residential .faq details p {margin:0 0 18px;max-width:70ch} .gpr-residential .crisis {background:var(--sand)} .gpr-residential .crisis .box {background:var(--cream);border:1px solid var(--line);border-left:5px solid var(--clay);border-radius:12px;padding:26px 30px} .gpr-residential .crisis ul {margin:.6em 0 0;padding-left:1.2em} .gpr-residential .crisis li {margin:0 0 .5em} .gpr-residential footer.site {background:var(--teal-2);color:#cfe0dd;padding:54px 0 30px;font-size:.92rem} .gpr-residential footer.site .cols {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px} .gpr-residential footer.site h4 {color:#fff;font-family:var(--serif);font-size:1.05rem;margin:0 0 .7em} .gpr-residential footer.site a {color:#cfe0dd} .gpr-residential footer.site a:hover {color:#fff} .gpr-residential footer.site .nap {font-style:normal} .gpr-residential footer.site ul {list-style:none;padding:0;margin:0} .gpr-residential footer.site li {margin:0 0 .5em} .gpr-residential .legit {display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); border-radius:8px;padding:8px 12px;font-size:.78rem;color:#eaf2f0;margin-top:14px} .gpr-residential footer .fine {border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:18px;font-size:.78rem;color:#9fb6b3;line-height:1.6} @media(max-width:760px) { .gpr-residential footer.site .cols {grid-template-columns:1fr;gap:26px} } .gpr-residential .mobicall {display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--clay); padding:10px 14px;box-shadow:0 -4px 18px rgba(0,0,0,.2)} .gpr-residential .mobicall a {display:flex;justify-content:center;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem} @media(max-width:680px) { .gpr-residential .mobicall {display:block} .gpr-residential {padding-bottom:60px} } /* ============================================================ Theme-compatibility overrides Neutralize greatplains-2024 globals that would otherwise leak in: theme sets p,li { color:#fff } + a reset forcing font-weight:bold, and ul { padding-left:5% }. Headings/links are already handled by the scoped rules above (higher specificity than the theme's bare elements). ============================================================ */ .gpr-residential p, .gpr-residential li { color: var(--ink); font-weight: 400; } .gpr-residential ul { padding-left: 0; } /* ============================================================ Host-theme header on THIS template only. The theme header.php renders a built-in "grass field" banner (internal_hero.jpg + the Mountains-1.png torn edge) for any non-front/internal page, with the nav floating over it. This page brings its own hero, so we drop that banner and pin the nav as the theme's compact white bar, flush above .hero. (Not scoped to .gpr-residential — the nav lives outside the wrapper — but this stylesheet is enqueued only on this page.) ============================================================ */ body.page-template-template-residential-landing .header-bg-container > img:not(.mountain-range), body.page-template-template-residential-landing .mountain-range { display:none !important; } /* Banner container becomes a slim white strip that reserves the nav's height */ body.page-template-template-residential-landing .header-bg-container{ height:90px; background:#fff; box-shadow:0 1px 0 #e3ddd0; } /* Compact white nav at every scroll position (matches the theme's scrolled state) */ body.page-template-template-residential-landing #desktop-header, body.page-template-template-residential-landing #desktop-header.header-with-background{ position:fixed; top:0; left:0; width:100%; height:90px; background:#fff; z-index:30; box-shadow:0 1px 0 #e3ddd0; } body.page-template-template-residential-landing #desktop-header .top-nav{ height:90px; justify-content:space-between; } body.page-template-template-residential-landing #desktop-header .top-nav a.logo-link img{ height:64px; max-height:64px; } body.page-template-template-residential-landing .social-container{ padding-bottom:0; } body.page-template-template-residential-landing .header-right-side{ margin-bottom:0; } /* ------------------------------------------------------------ Gravity Forms submit buttons. The generic `.bigform input` / `.quickcard input` rules above also match , painting it like a text field (white box, invisible white label). Re-style the GF submit (.gform_button) as the brand clay pill instead. ------------------------------------------------------------ */ .gpr-residential .quickcard .gform_button, .gpr-residential .contact .bigform .gform_button{ width:100%; margin:6px 0 0; padding:.9em 1.5em; border:2px solid transparent; border-radius:999px; background:var(--clay); color:#fff; font-family:var(--sans); font-weight:700; font-size:1rem; line-height:1.2; cursor:pointer; transition:background .12s ease, transform .12s ease; } .gpr-residential .quickcard .gform_button:hover, .gpr-residential .contact .bigform .gform_button:hover{ background:var(--clay-d); transform:translateY(-1px); } /* GF wrappers shouldn't add their own max-width/margins inside our cards */ .gpr-residential .quickcard .gform_wrapper, .gpr-residential .contact .bigform .gform_wrapper{ margin:0; } |