/* Theme Name: LLS Foundation Theme URI: https://mcwilliamsmedia.com/lls Author: McWilliams Media Author URI: https://mcwilliamsmedia.com Description: Local Launch System (LLS) Foundation theme. Reusable, parameterized theme for local service-business sites. Brand colors, NAP, phone, and service/location data are set via the Customizer and theme-config.php so each client is a re-skin, not a rebuild. Pilot build: Tulsa Executive Cleaning. Version: 0.1.0 Requires at least: 6.5 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: lls */ /* ============================================================ Brand tokens — defaults; overridable via Customizer (printed as an inline :root override in by lls_brand_css_vars()). Both naming sets (homepage --spruce/--brass, inner --blue/--cyan-text) are aliased so all extracted component CSS resolves. ============================================================ */ :root{ --spruce:#05508A; --blue:#05508A; /* Executive Blue */ --spruce-deep:#033A66; --blue-deep:#033A66; /* Deep Executive */ --mist:#EFF1D9; --celery:#EFF1D9; /* Celery Mist */ --paper:#FCF5ED; --cream:#FCF5ED; /* Warm Cream */ --ink:#15212C; --ink-soft:#4E5A64; --brass:#0D9ACF; --cyan-text:#0B86B5; /* text-safe cyan accent */ --brass-soft:#F9DD72; --line:#DDD9CB; --gold:#F9DD72; /* Tulsa Gold — FILL only */ --cyan:#1FB7E0; /* Sky Cyan */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Open Sans',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px} h1,h2,h3,h4{font-family:'Raleway',sans-serif;line-height:1.12;letter-spacing:-0.015em} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .eyebrow{font-family:'Raleway',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)} .skip-link{position:absolute;left:-9999px} .skip-link:focus{left:8px;top:8px;background:#fff;color:var(--spruce);padding:8px 14px;border-radius:4px;z-index:1000} /* ===== Buttons ===== */ .btn{display:inline-block;font-family:'Raleway',sans-serif;font-weight:700;font-size:15px;padding:13px 26px;border-radius:4px;transition:transform .12s ease;cursor:pointer;border:none} .btn:hover{transform:translateY(-1px)} .btn-solid,.btn-gold{background:var(--gold);color:#0A2B47} /* Primary CTA: gold fill + navy text */ .btn-ghost,.btn-line{border:2px solid var(--spruce);color:var(--spruce);background:transparent} .btn-light{background:#fff;color:var(--spruce)} .btn-blue{background:var(--blue);color:#fff} .verify{font-size:11px;font-weight:700;color:#6B5A0E;background:var(--gold);padding:1px 6px;border-radius:3px;vertical-align:middle;font-family:'Open Sans',sans-serif} /* ===== Header ===== */ header.site-header{background:#fff;border-bottom:1px solid var(--line)} .topline{background:var(--spruce-deep);color:#DFEAE5;font-size:13.5px;padding:7px 0} .topline .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .topline strong{color:#fff} .navrow{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px} .brand{display:flex;align-items:center;gap:12px} .brand img{width:54px;height:54px;border-radius:50%;object-fit:cover} .logo{font-family:'Raleway',sans-serif;font-weight:800;font-size:21px;color:var(--spruce);line-height:1.05} .logo span{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#0D9ACF} .main-nav ul{display:flex;gap:26px;list-style:none;font-weight:600;font-size:15.5px;margin:0;font-family:'Raleway',sans-serif} .main-nav a:hover{color:var(--brass)} /* ===== Hero (front page) ===== */ .hero{background:linear-gradient(160deg,var(--spruce) 0%,var(--spruce-deep) 100%);color:#fff;padding:78px 0 86px;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;border:90px solid rgba(255,255,255,.05)} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;position:relative;z-index:1} .hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;color:#fff;margin:14px 0 22px} .hero h1 em{font-style:normal;color:var(--gold)} .answer-card{background:rgba(255,255,255,.07);border-left:4px solid var(--gold);padding:22px 24px;border-radius:0 6px 6px 0;font-size:18px;color:#EAF2EE;margin-bottom:30px} .answer-card strong{color:#fff} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} .hero-aside{background:#fff;color:var(--ink);border-radius:8px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.28)} .hero-aside h3{font-size:20px;color:var(--spruce);margin-bottom:6px} .hero-aside p.small{font-size:14px;color:var(--ink-soft);margin-bottom:18px} .field{margin-bottom:12px} .field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px} .field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:4px;font:inherit;font-size:15px;background:var(--paper)} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan);border-color:var(--cyan)} .hero-aside .btn{width:100%;text-align:center;margin-top:6px} .form-note{font-size:12.5px;color:var(--ink-soft);margin-top:10px;text-align:center} /* ===== Trust bar ===== */ .trust{background:var(--mist);border-bottom:1px solid var(--line);padding:22px 0} .trust .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} .trust-item{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--spruce)} .trust-item .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none} /* ===== Generic sections ===== */ section{padding:74px 0} .sec-head{max-width:680px;margin-bottom:40px} .sec-head h2{font-size:clamp(27px,3.4vw,38px);color:var(--spruce);margin:12px 0 14px} .sec-head p{color:var(--ink-soft);font-size:17.5px} .lead-answer{border-left:4px solid var(--gold);padding:6px 0 6px 22px;font-size:18.5px;color:var(--ink);max-width:680px;margin-bottom:18px} .lead-answer strong{color:var(--spruce)} /* ===== Service grids ===== */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .svc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px;transition:border-color .15s ease, box-shadow .15s ease} .svc:hover{border-color:var(--cyan);box-shadow:0 10px 30px rgba(23,63,56,.08)} .svc h3{font-size:18.5px;color:var(--spruce);margin-bottom:8px} .svc p{font-size:15px;color:var(--ink-soft);margin-bottom:12px} .svc a{font-family:'Raleway',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--brass)} .resi,.resi-bg{background:var(--spruce);color:#fff} .resi .sec-head h2,.resi-bg .sec-head h2{color:#fff} .resi .sec-head p,.resi-bg .sec-head p{color:#CFE0D9} .resi .eyebrow,.resi-bg .eyebrow{color:var(--gold)} .resi .svc,.resi-bg .svc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .resi .svc h3,.resi-bg .svc h3{color:#fff} .resi .svc p,.resi-bg .svc p{color:#C8D8D1} .resi .svc a,.resi-bg .svc a{color:var(--gold)} /* ===== Founder / E-E-A-T — portrait supports circle OR rectangle ===== */ .founder-grid,.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center} .portrait{aspect-ratio:4/4.6;border-radius:8px;background:linear-gradient(155deg,var(--mist),#cfdfd6);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative;border:1px solid var(--line)} .portrait .ph{font-family:'Raleway',sans-serif;font-weight:700;color:var(--spruce);opacity:.45;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:24px;text-align:center} .portrait img{width:100%;height:100%;object-fit:cover} /* circular variant (default for the current Judith asset) */ .portrait.is-circle{aspect-ratio:4/4.6;background:linear-gradient(155deg,var(--mist),#cfdfd6);border:1px solid var(--line);align-items:center} .portrait.is-circle img{width:86%;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;box-shadow:0 14px 36px rgba(5,80,138,.22)} .cred-list{list-style:none;margin-top:22px;display:grid;gap:12px} .cred-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px} .cred-list .dot,.cred-list .d{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none;margin-top:8px} blockquote{border-left:3px solid var(--gold);padding-left:18px;margin-top:24px;font-style:italic;color:var(--ink-soft);font-size:17px} blockquote cite{display:block;font-style:normal;font-weight:700;color:var(--spruce);margin-top:8px;font-size:14.5px} /* ===== Values (About) ===== */ .values{background:var(--mist)} .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .val{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px} .val h3{font-size:19px;color:var(--spruce);margin-bottom:8px;font-weight:800} .val p{font-size:15px;color:var(--ink-soft)} /* ===== Locations ===== */ .loc{background:var(--mist)} .loc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .loc-grid.cols-3{grid-template-columns:repeat(3,1fr);gap:20px} .loc-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 18px;text-align:center;transition:transform .12s ease} .loc-card:hover{transform:translateY(-3px);border-color:var(--cyan)} .loc-card.hq{background:var(--spruce);border-color:var(--spruce)} .loc-card.hq h3{color:var(--gold)} .loc-card.hq p{color:#CFE3F2} .loc-card h3{font-size:17px;color:var(--spruce)} .loc-card p{font-size:13px;color:var(--ink-soft);margin-top:4px} .loc-note{margin-top:26px;font-size:15px;color:var(--ink-soft);max-width:720px} /* ===== Page banner (inner pages) ===== */ .banner{background:linear-gradient(160deg,var(--spruce),var(--spruce-deep));color:#fff;padding:60px 0 64px;position:relative;overflow:hidden} .banner::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:80px solid rgba(255,255,255,.05)} /* Hero photo variant: real photo behind a navy overlay so the H1 stays legible. */ .banner.has-hero{background-size:cover;background-position:center} .banner.has-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(5,80,138,.86),rgba(3,58,102,.93));z-index:0} .banner.has-hero .wrap{position:relative;z-index:1} .banner .crumbs{font-size:13px;color:#9CC8E8;font-weight:600;margin-bottom:10px;position:relative;z-index:1} .banner h1{font-size:clamp(32px,4.4vw,50px);font-weight:800;color:#fff;letter-spacing:-0.015em;position:relative;z-index:1} .banner p{color:#CFE3F2;font-size:18px;max-width:640px;margin-top:14px;position:relative;z-index:1} /* ===== Default page content ===== */ .page-content{padding:64px 0} .page-content .wrap{max-width:820px} .page-content h2{color:var(--spruce);font-size:clamp(24px,3vw,32px);margin:28px 0 12px} .page-content h3{color:var(--spruce);font-size:21px;margin:22px 0 10px} .page-content p{margin-bottom:16px;color:var(--ink)} .page-content ul,.page-content ol{margin:0 0 16px 22px} .page-content li{margin-bottom:8px} /* ===== Contact ===== */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px} .info-card{display:grid;gap:22px} .info-item h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-text);margin-bottom:6px;font-weight:800} .info-item p{font-size:17px;color:var(--ink)} .info-item strong{color:var(--spruce)} .map-ph{margin-top:8px;height:220px;border-radius:8px;background:linear-gradient(135deg,var(--mist),#dde6e6);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Raleway',sans-serif;font-weight:800;color:var(--spruce);opacity:.55;font-size:13px;letter-spacing:.08em;text-transform:uppercase} .form-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px 30px;box-shadow:0 16px 40px rgba(5,80,138,.07)} .form-card h3{font-size:22px;color:var(--spruce);font-weight:800;margin-bottom:6px} .form-card .sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px} .form-card .btn{width:100%;text-align:center;margin-top:4px} /* ===== FAQ ===== */ .faq-cluster{margin-bottom:14px} .faq-cluster > .eyebrow{margin-bottom:18px;display:block} .faq-item{border-bottom:1px solid var(--line);padding:22px 0;max-width:860px} .faq-item h3{font-size:18.5px;color:var(--spruce);margin-bottom:8px} .faq-item p{color:var(--ink-soft);font-size:16px} .faq-more{margin-top:26px} /* ===== CTA band ===== */ .cta-band{background:var(--spruce-deep);color:#fff;text-align:center;padding:70px 0} .cta-band h2{font-size:clamp(26px,3.4vw,38px);color:#fff;margin-bottom:14px} .cta-band p{color:#C8D8D1;max-width:560px;margin:0 auto 28px} /* ===== Footer ===== */ footer.site-footer{background:var(--ink);color:#B9C4BF;padding:56px 0 28px;font-size:14.5px} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px} .site-footer h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px} .site-footer ul{list-style:none;display:grid;gap:8px} .site-footer a:hover{color:var(--gold)} .nap{line-height:1.7} .nap strong{color:#fff;font-size:16px} .legal{border-top:1px solid #333d39;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#7f8b86} /* ===== Responsive ===== */ @media (max-width:920px){ .hero-grid,.founder-grid,.about-grid,.contact-grid{grid-template-columns:1fr} .svc-grid,.val-grid{grid-template-columns:1fr 1fr} .loc-grid,.loc-grid.cols-3{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .main-nav{display:none} } @media (max-width:560px){ .svc-grid,.loc-grid,.loc-grid.cols-3,.val-grid,.foot-grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} html{scroll-behavior:auto} }