/* ========== Lafayette Handyman Theme (black + white, site-wide BG) ========== */ :root{ --bg:#ffffff; --text:#000000; --muted:#333333; /* Black/white palette like the reference */ --primary:#000000; /* black */ --primary-600:#000000; --primary-700:#000000; --accent:#ffffff; /* white */ --accent-700:#f5f5f5; --light:#ffffff; /* white content sections */ --border:#d3d3d3; /* light gray lines */ --shadow: 0 8px 24px rgba(0,0,0,.12); } /* Default site background (can be overridden via ) */ body{ --site-bg: url('../img/bg-site.jpg'); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif} img{max-width:100%;display:block} a{color:inherit} /* ===== site-wide background image behind EVERYTHING ===== */ body::before{ content:""; position:fixed; inset:0; background-image: var(--site-bg); background-size: cover; background-position: center; background-attachment: fixed; opacity:.18; /* background visible but subtle */ filter: saturate(.9) contrast(1.05); z-index:-1; } /* Ensure all site sections render above the background image */ .topbar, .site-header, main, .site-footer { position: relative; z-index: 1; } /* Containers & grids */ .container{width:min(1120px,92%);margin:0 auto} .row{display:flex;gap:1rem} .row.between{justify-content:space-between} .row.middle{align-items:center} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem} @media (max-width:992px){.grid-cards{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}} .center{text-align:center} .narrow{max-width:800px;margin-inline:auto} /* Topbar (optional) */ .topbar{background:#d3d3d3;color:#000;font-size:.9rem} .topbar a{color:#000;text-decoration:none} .topbar .topbar-phone{font-weight:700} /* ================= Header (match reference) ================= */ .site-header{ position:sticky;top:0;z-index:50; background:#d3d3d3; /* light gray like the reference */ border:0; box-shadow:6px 6px 8px #000000; /* reference-style shadow */ } .brand{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:inherit} .logo{height:42px;width:auto} .brand-text{font-weight:800;font-size:1.1rem} .main-nav{display:flex;gap:.6rem;align-items:center} .main-nav a{ padding:.5rem .6rem;text-decoration:none;color:#000; border-radius:4px;font-weight:700; } .main-nav a:hover, .main-nav a.active{ background:#000;color:#fff; /* black hover/active with white text */ } /* Services dropdown */ .dropdown{position:relative} .dropbtn{ background:transparent;border:0;font:inherit;color:#000; font-weight:800;cursor:pointer;padding:.5rem .6rem;border-radius:4px; } .dropbtn:hover{background:#000;color:#fff} .dropdown-content{ display:none;position:absolute;right:0;top:calc(100% + 6px); background:#d3d3d3; /* same light gray as header */ border:1px solid var(--border);box-shadow:var(--shadow); min-width:240px;padding:.5rem;border-radius:.6rem } .dropdown:hover .dropdown-content{display:block} .dropdown-content a{ display:block;padding:.5rem;border-radius:.4rem;color:#000;text-decoration:none } .dropdown-content a:hover{background:#000;color:#fff} /* Call button */ .phone-btn{ background:#000;color:#fff;padding:.6rem 1rem;border-radius:.6rem; text-decoration:none;font-weight:800;border:3px solid #000; } .phone-btn:hover{background:#fff;color:#000} /* ===== Mobile nav: keep nav always visible; toggle removed ===== */ .nav-toggle{display:none !important;} @media (max-width:860px){ .main-nav{ display:flex !important; position:static;flex-wrap:wrap;gap:.35rem; background:transparent;border:0;box-shadow:none; } .phone-btn{display:inline-flex;} } /* ================= Hero ================= */ .hero{ position:relative;min-height:62vh;display:grid;place-items:center;overflow:hidden; border-bottom:1px solid var(--border); background-image: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)), url('../img/hero.jpg'); background-size:cover;background-position:center; } .hero .hero-inner{position:relative;color:#fff;text-align:center;padding:3.5rem 0} .hero h1{font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;margin:0 0 .6rem} .hero .accent{color:#fff} .hero-sub{opacity:.95;max-width:780px;margin:0 auto 1.25rem} .hero-cta{display:flex;gap:.75rem;justify-content:center} .btn{display:inline-block;padding:.75rem 1.15rem;border-radius:.65rem;text-decoration:none;font-weight:800;border:2px solid transparent} .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)} /* white CTA like the reference */ .btn-accent{background:#fff;color:#000;border-color:#fff} .btn-accent:hover{background:#000;color:#fff;border-color:#000} .btn-light{background:#fff;color:#000} .btn-outline{background:transparent;color:#000;border-color:#000} /* ================= Sections ================= */ .section{padding:3.5rem 0} .section.light{background:var(--light)} .section-title{margin:0 0 1rem;font-size:clamp(1.5rem,2.2vw,2rem)} /* “Page panel” — white card behind content so the site BG peeks around it */ .page-panel{ background: rgba(255,255,255,.96); border:1px solid var(--border); border-radius:.9rem; box-shadow: var(--shadow); padding:1.25rem; } /* ================= Pills ================= */ .pill-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem} .pill{background:#fff;border:1px solid var(--border);padding:.4rem .7rem;border-radius:999px;color:#111} /* ================= Cards ================= */ .card{background:#fff;border:1px solid var(--border);border-radius:.9rem;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .18s ease, box-shadow .18s ease} .card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.14)} .card img{height:170px;width:100%;object-fit:cover} .card-body{padding:1rem} .card h3{margin:.2rem 0 .35rem;font-size:1.05rem} .card .link{color:#000;font-weight:700} /* ================= CTA strip ================= */ .cta-strip{background:#000;color:#fff;padding:1.75rem 0} .cta-actions .btn{margin-left:.5rem} /* “Proudly Serving” parallax section (optional background image) */ .proud{ background-image: url('../img/proud.jpg'); /* add this if you want that section */ background-size: cover; background-position: center; background-attachment: fixed; color:#fff; text-shadow: 2px 2px 4px rgba(0,0,0,.4); } /* Optional vertical separators like the reference */ .vl{ border-left:1px solid #ffffff; height:600px; } @media (max-width:1200px){ .vl{ border-left:none; height:0; } } /* ================= Footer ================= */ .site-footer{background:#000;color:#e5e7eb;margin-top:2rem} .site-footer h4{color:#fff;margin:0 0 .6rem} .site-footer a{color:#e5e7eb;text-decoration:none} .site-footer a:hover{color:#fff} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin:.3rem 0} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:1.5rem;padding:1rem 0} .footer-bottom img{height:46px;opacity:.9} /* Image fallback styling (pair with tiny onerror JS that adds .img-placeholder) */ img.img-placeholder { object-fit: cover; background: linear-gradient(135deg, #000, #555); } .cta-strip{ margin-bottom:0; } .site-footer{ margin-top:0; }