/* Theme Name: Sustainable Scrap Services Theme URI: https://sustainablescrapservices.ae/ Author: E_Marketing Author URI: https://sustainablescrapservices.ae/ Description: Responsive WordPress theme for Sustainable Scrap Services (UAE IT & e-waste scrap buyers). Dark/light mode, Green/Blue colour themes, editable gallery, offers slider and testimonials, blog with categories, WhatsApp-first call to actions. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: sustainable-scrap-services Tags: blog, one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, accessibility-ready, dark-mode */ /* ===================================================================== THEME TOKENS Two independent switches set on : data-theme = "light" | "dark" data-accent = "green" | "blue" Every colour on the site comes from these variables, so changing them re-colours the whole website (buttons, cards, text, borders). ===================================================================== */ :root{ --ease: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: light; /* default = Light + Green (matches the original design exactly) */ --bg:#F5F1E8; --bg-rgb:245,241,232; --ink:#0D2318; --ink-rgb:13,35,24; --primary:#1B3B2F; --primary-rgb:27,59,47; /* buttons, filled UI */ --on-primary:#F5F1E8; /* text on buttons */ --primary-text:#1B3B2F; /* coloured text/lines */ --deep:#1B3B2F; --deep-border:transparent; /* big dark panels (stats, CTA, cities) */ --on-deep:#F5F1E8; --accent:#4C8C6B; --accent-rgb:76,140,107; --accent-text:#3A7355; /* accent used as text (AA contrast) */ --accent-glass:rgba(76,140,107,0.14); --card:rgba(255,255,255,0.5); --card-strong:rgba(255,255,255,0.65); --card-hover:rgba(255,255,255,0.72); --card-border:rgba(255,255,255,0.7); --line:rgba(13,35,24,0.12); --shadow-soft:0 20px 60px -20px rgba(13,35,24,0.35); --blob-o:0.22; --logo-a:#4C8C6B; --logo-b:#F5F1E8; --swatch:#1B3B2F; } :root[data-theme="dark"][data-accent="green"]{ color-scheme: dark; --bg:#0B1510; --bg-rgb:11,21,16; --ink:#E7F0EA; --ink-rgb:231,240,234; --primary:#2E7D5A; --primary-rgb:46,125,90; --on-primary:#FFFFFF; --primary-text:#86D4AC; --deep:#123326; --deep-border:rgba(134,212,172,0.18); --on-deep:#EAF4EE; --accent:#5FB58A; --accent-rgb:95,181,138; --accent-text:#7CCBA1; --accent-glass:rgba(95,181,138,0.16); --card:rgba(255,255,255,0.05); --card-strong:rgba(255,255,255,0.07); --card-hover:rgba(255,255,255,0.09); --card-border:rgba(255,255,255,0.10); --line:rgba(231,240,234,0.14); --shadow-soft:0 20px 60px -20px rgba(0,0,0,0.65); --blob-o:0.13; --logo-a:#A9E0C2; --logo-b:#F5F1E8; --swatch:#1B3B2F; } :root[data-theme="light"][data-accent="blue"]{ color-scheme: light; --bg:#EEF3F9; --bg-rgb:238,243,249; --ink:#0B1B2E; --ink-rgb:11,27,46; --primary:#16375F; --primary-rgb:22,55,95; --on-primary:#F2F6FB; --primary-text:#16375F; --deep:#16375F; --deep-border:transparent; --on-deep:#F2F6FB; --accent:#3B7CC0; --accent-rgb:59,124,192; --accent-text:#2A66A8; --accent-glass:rgba(59,124,192,0.14); --card:rgba(255,255,255,0.55); --card-strong:rgba(255,255,255,0.7); --card-hover:rgba(255,255,255,0.78); --card-border:rgba(255,255,255,0.8); --line:rgba(11,27,46,0.12); --shadow-soft:0 20px 60px -20px rgba(11,27,46,0.35); --blob-o:0.22; --logo-a:#6FA8E0; --logo-b:#EEF3F9; --swatch:#16375F; } :root[data-theme="dark"][data-accent="blue"]{ color-scheme: dark; --bg:#08111D; --bg-rgb:8,17,29; --ink:#E6EEF8; --ink-rgb:230,238,248; --primary:#2F6DB5; --primary-rgb:47,109,181; --on-primary:#FFFFFF; --primary-text:#8FBDF0; --deep:#10294A; --deep-border:rgba(143,189,240,0.18); --on-deep:#EAF2FB; --accent:#5B9BE0; --accent-rgb:91,155,224; --accent-text:#86B7EE; --accent-glass:rgba(91,155,224,0.16); --card:rgba(255,255,255,0.05); --card-strong:rgba(255,255,255,0.07); --card-hover:rgba(255,255,255,0.09); --card-border:rgba(255,255,255,0.10); --line:rgba(230,238,248,0.14); --shadow-soft:0 20px 60px -20px rgba(0,0,0,0.65); --blob-o:0.13; --logo-a:#A9CDF3; --logo-b:#EEF3F9; --swatch:#16375F; } /* Recolour the hard-coded colours inside inline SVGs (logo + service icons) without touching the HTML: attribute selectors beat presentation attributes. */ .logo-mark rect{ fill: var(--primary); } .logo-mark path[fill="#4C8C6B"]{ fill: var(--logo-a); } .logo-mark path[fill="#F5F1E8"]{ fill: var(--logo-b); } .icon-wrap svg [stroke="#1B3B2F"]{ stroke: var(--primary-text); } .icon-wrap svg [stroke="#4C8C6B"]{ stroke: var(--accent); } .icon-wrap svg [fill="#4C8C6B"]{ fill: var(--accent); } .city-card .pin path, .city-card .pin circle{ stroke: var(--on-deep); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background: var(--bg); color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 300; line-height: 1.6; overflow-x: hidden; } h1,h2,h3,h4, .display{ font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ink); line-height: 1.08; letter-spacing: -0.01em; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; max-width:100%; } .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; } ::selection{ background: var(--accent); color: var(--on-primary); } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- background blobs ---------- */ .blobs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .blob{ position:absolute; border-radius:50%; filter: blur(70px); opacity:var(--blob-o); } .blob.b1{ width:520px; height:520px; background: var(--accent); top:-180px; right:-140px; } .blob.b2{ width:420px; height:420px; background: var(--primary); bottom:10%; left:-160px; } .blob.b3{ width:340px; height:340px; background: var(--accent); top:55%; right:8%; opacity:calc(var(--blob-o) * 0.64); } /* ---------- navbar ---------- */ header{ position: sticky; top:0; z-index:50; background: rgba(var(--bg-rgb),0.78); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); } nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; } .logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:1.05rem; } .logo-mark{ width:34px; height:34px; } .nav-links{ display:flex; align-items:center; gap:34px; font-size:0.92rem; } .nav-links a{ position:relative; padding:4px 0; color: var(--ink); opacity:0.82; transition: opacity .25s var(--ease); } .nav-links a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background: var(--primary-text); transition: width .3s var(--ease); } .nav-links a:hover{ opacity:1; } .nav-links a:hover::after{ width:100%; } .nav-cta{ display:flex; align-items:center; gap:8px; background: var(--primary); color:var(--on-primary); padding:11px 20px; border-radius:999px; font-size:0.88rem; font-weight:500; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .nav-cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(var(--primary-rgb),0.55); } .nav-toggle{ display:none; } /* ---------- hero ---------- */ .hero{ position:relative; z-index:1; padding: 108px 0 90px; display:grid; grid-template-columns: 1.05fr 0.95fr; gap:40px; align-items:center; } .eyebrow-tag{ display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; color: var(--primary-text); background: var(--accent-glass); border:1px solid rgba(var(--accent-rgb),0.35); padding:7px 14px 7px 10px; border-radius:999px; margin-bottom: 26px; } .eyebrow-tag .dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); } .hero h1{ font-size: clamp(2.3rem, 4.1vw, 3.55rem); max-width: 620px; } .hero p.lead{ margin-top:22px; font-size:1.08rem; color: rgba(var(--ink-rgb),0.72); max-width: 480px; } .hero-ctas{ display:flex; align-items:center; gap:18px; margin-top:36px; } .btn-primary{ display:inline-flex; align-items:center; gap:10px; background: var(--primary); color: var(--on-primary); padding:16px 26px; border-radius:14px; font-size:0.96rem; font-weight:500; box-shadow: 0 14px 30px -12px rgba(var(--primary-rgb),0.55); transition: transform .25s var(--ease), box-shadow .25s var(--ease); border:none; cursor:pointer; } .btn-primary:active{ transform: translateY(2px) scale(0.99); box-shadow: 0 6px 16px -10px rgba(var(--primary-rgb),0.5); } .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 20px 38px -14px rgba(var(--primary-rgb),0.6); } .btn-ghost{ font-size:0.95rem; color: var(--ink); display:flex; align-items:center; gap:8px; border-bottom: 1px solid rgba(var(--ink-rgb),0.3); padding-bottom:3px; } .wa-icon{ width:18px; height:18px; } /* hero 3d stage */ .hero-stage{ position:relative; height: 460px; perspective: 1200px; } .stage-inner{ position:absolute; inset:0; transform-style: preserve-3d; transition: transform .15s ease-out; } .glass-panel{ position:absolute; border-radius: 26px; background: var(--card); border: 1px solid var(--card-border); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); } .gp1{ width:280px; height:280px; top:40px; left:60px; transform: translateZ(10px) rotate(-6deg); } .gp2{ width:170px; height:170px; bottom:20px; right:20px; transform: translateZ(60px) rotate(10deg); background: rgba(var(--primary-rgb),0.08); } .float-item{ position:absolute; animation: float 6s ease-in-out infinite; } .float-item.i1{ top:70px; left:90px; animation-delay:0s; } .float-item.i2{ bottom:110px; left:20px; animation-delay:1.1s; } .float-item.i3{ top:150px; right:30px; animation-delay:0.6s; } .float-item.i4{ bottom:40px; right:90px; animation-delay:1.8s; } @keyframes float{ 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(-16px); } } /* ---------- trust bar ---------- */ .trust-bar{ position:relative; z-index:1; background: var(--deep); color: var(--on-deep); border:1px solid var(--deep-border); border-radius: 22px; margin: 0 32px 100px; } .trust-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns: repeat(4,1fr); padding: 40px 20px; } .trust-item{ text-align:center; border-right: 1px solid rgba(var(--bg-rgb),0.16); padding: 0 12px; } .trust-item:last-child{ border-right:none; } .trust-item .num{ font-family:'Space Grotesk'; font-weight:700; font-size:2rem; color:#fff; } .trust-item .lbl{ font-size:0.82rem; opacity:0.72; margin-top:6px; } /* ---------- section shared ---------- */ section{ position:relative; z-index:1; padding: 90px 0; } .section-head{ max-width:640px; margin-bottom: 56px; } .section-head .kicker{ color: var(--accent-text); font-family:'Space Grotesk'; font-weight:600; font-size:0.92rem; } .section-head h2{ font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin-top:10px; } .section-head p{ margin-top:14px; color: rgba(var(--ink-rgb),0.68); font-size:1.02rem; } .reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform: translateY(0); } /* ---------- services ---------- */ .service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; } .service-card{ background: var(--card); border: 1px solid var(--card-border); backdrop-filter: blur(8px); border-radius: 20px; padding: 30px 26px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s; transform-style: preserve-3d; } .service-card:hover{ transform: translateY(-8px) translateZ(0) rotateX(2deg); box-shadow: var(--shadow-soft); background: var(--card-hover); } .service-card .icon-wrap{ width:56px; height:56px; border-radius:16px; background: var(--accent-glass); display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .service-card h3{ font-size:1.12rem; margin-bottom:8px; } .service-card p{ font-size:0.92rem; color: rgba(var(--ink-rgb),0.65); } .service-card.wide{ grid-column: span 3; display:flex; align-items:center; gap:30px; } .service-card.wide .icon-wrap{ margin-bottom:0; flex-shrink:0; } /* ---------- cities ---------- */ .city-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; } .city-card{ position:relative; border-radius:20px; overflow:hidden; background: var(--deep); color:var(--on-deep); border:1px solid var(--deep-border); padding: 34px 26px; min-height: 220px; display:flex; flex-direction:column; justify-content:flex-end; transition: transform .4s var(--ease); } .city-card:hover{ transform: translateY(-6px); } .city-card::before{ content:''; position:absolute; inset:0; opacity:0.5; background: radial-gradient(circle at 80% 0%, rgba(var(--accent-rgb),0.55), transparent 60%); } .city-card h3{ color:#fff; font-size:1.25rem; position:relative; } .city-card p{ position:relative; font-size:0.88rem; opacity:0.78; margin-top:8px; } .city-card .pin{ position:absolute; top:24px; right:24px; opacity:0.5; } /* ---------- E-E-A-T ---------- */ .eeat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; } .eeat-card{ text-align:left; border-top: 2px solid var(--primary-text); padding-top:18px; } .eeat-card .num{ font-family:'Space Grotesk'; font-weight:600; color: var(--accent-text); font-size:0.85rem; } .eeat-card h3{ font-size:1.05rem; margin: 8px 0; } .eeat-card p{ font-size:0.88rem; color: rgba(var(--ink-rgb),0.65); } /* ---------- process ---------- */ .process-track{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap:24px; } .process-track::before{ content:''; position:absolute; top:19px; left:6%; right:6%; height:2px; background: repeating-linear-gradient(90deg, rgba(var(--ink-rgb),0.22) 0 8px, transparent 8px 16px); } .process-line-fill{ position:absolute; top:19px; left:6%; height:2px; width:0%; background: var(--primary); transition: width 1.4s var(--ease); } .process-step{ position:relative; } .process-step .marker{ width:40px; height:40px; border-radius:50%; background: var(--bg); border:2px solid var(--primary-text); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; color: var(--primary-text); margin-bottom:18px; position:relative; z-index:2; } .process-step h3{ font-size:1.02rem; margin-bottom:6px; } .process-step p{ font-size:0.86rem; color: rgba(var(--ink-rgb),0.62); } /* ---------- testimonials ---------- */ .testi-stack{ position:relative; height: 300px; display:flex; align-items:center; justify-content:center; } .testi-card{ position:absolute; width: 100%; max-width:640px; background: var(--card-strong); backdrop-filter: blur(10px); border: 1px solid var(--card-border); border-radius:22px; padding: 36px 40px; box-shadow: var(--shadow-soft); transition: transform .6s var(--ease), opacity .6s var(--ease); } .testi-card .stars{ color: var(--accent-text); font-size:0.95rem; letter-spacing:2px; margin-bottom:14px; } .testi-card p.quote{ font-size:1.05rem; color: var(--ink); } .testi-card .who{ margin-top:18px; font-family:'Space Grotesk'; font-weight:600; font-size:0.9rem; } .testi-card .who span{ display:block; font-family:'Inter'; font-weight:300; color: rgba(var(--ink-rgb),0.66); font-size:0.82rem; margin-top:2px; } .testi-dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; } .testi-dots button{ width:8px; height:8px; border-radius:50%; background: rgba(var(--ink-rgb),0.2); border:none; cursor:pointer; transition: background .3s, width .3s; } .testi-dots button.active{ background: var(--primary); width:22px; border-radius:5px; } /* ---------- CTA banner ---------- */ .cta-banner{ background: var(--deep); color:#fff; border:1px solid var(--deep-border); border-radius: 28px; padding: 60px 50px; display:flex; align-items:center; justify-content:space-between; gap:30px; position:relative; overflow:hidden; } .cta-banner::after{ content:''; position:absolute; width:360px; height:360px; border-radius:50%; background: rgba(var(--accent-rgb),0.35); filter:blur(50px); right:-100px; top:-100px; } .cta-banner h2{ color:#fff; font-size: clamp(1.6rem,2.6vw,2.1rem); max-width:440px; position:relative; } .cta-banner .btn-primary{ background:#fff; color: var(--deep); position:relative; } .cta-banner .phone{ position:relative; font-size:0.88rem; opacity:0.8; margin-top:10px; display:block; } /* ---------- footer ---------- */ footer{ position:relative; z-index:1; padding: 70px 0 40px; border-top:1px solid var(--line); } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; } .footer-grid h4{ font-size:0.92rem; margin-bottom:16px; } .footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:10px; } .footer-grid ul a{ font-size:0.88rem; color: rgba(var(--ink-rgb),0.65); transition: color .25s; } .footer-grid ul a:hover{ color: var(--primary-text); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:0.82rem; color: rgba(var(--ink-rgb),0.64); border-top:1px solid var(--line); padding-top:24px; } .socials{ display:flex; gap:14px; } .socials a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition: background .25s, transform .25s; } .socials a:hover{ background: var(--primary); color:#fff; transform: translateY(-3px); } /* ---------- floating WhatsApp ---------- */ .wa-float{ position:fixed; bottom:26px; right:26px; z-index:60; width:60px; height:60px; border-radius:50%; background: var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 16px 34px -10px rgba(var(--primary-rgb),0.6); transition: transform .3s var(--ease); } .wa-float:hover{ transform: scale(1.08); } .wa-float::before{ content:''; position:absolute; inset:-6px; border-radius:50%; border: 1.5px solid var(--accent); opacity:0.6; animation: pulse 2.4s ease-out infinite; } @keyframes pulse{ 0%{ transform: scale(0.9); opacity:0.7; } 100%{ transform: scale(1.5); opacity:0; } } @media (max-width: 900px){ .hero{ grid-template-columns:1fr; padding-top:80px; } .hero-stage{ height:320px; order:-1; } .nav-links{ display:none; } .trust-inner{ grid-template-columns: repeat(2,1fr); row-gap:24px; } .trust-item:nth-child(2){ border-right:none; } .service-grid, .city-grid, .eeat-grid, .process-track{ grid-template-columns:1fr; } .service-card.wide{ grid-column:auto; flex-direction:column; align-items:flex-start; text-align:left; } /* was span 3 → created 3 phantom columns and overflowed the page */ .process-track::before, .process-line-fill{ display:none; } .footer-grid{ grid-template-columns: 1fr 1fr; } .cta-banner{ flex-direction:column; align-items:flex-start; text-align:left; } } /* ================= HERO 3D IMAGE COMPOSITION ================= */ .hero-stage{ position:relative; height: 480px; perspective: 1400px; } .stage-inner{ position:absolute; inset:0; transform-style: preserve-3d; transition: transform .15s ease-out; } .hero-img-main{ position:absolute; top:30px; left:40px; width:300px; height:380px; border-radius:26px; overflow:hidden; transform: translateZ(20px) rotate(-3deg); box-shadow: var(--shadow-soft); border: 1px solid var(--card-border); } .hero-img-main img{ width:100%; height:100%; object-fit:cover; } .hero-img-card{ position:absolute; border-radius:20px; overflow:hidden; box-shadow: 0 16px 40px -14px rgba(var(--ink-rgb),0.45); border: 1px solid var(--card-border); animation: float 6s ease-in-out infinite; } .hero-img-card img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-img-card.c1{ width:170px; height:150px; top:8px; right:10px; transform: translateZ(80px) rotate(6deg); animation-delay:0s; } .hero-img-card.c2{ width:150px; height:130px; bottom:30px; right:60px; transform: translateZ(50px) rotate(-4deg); animation-delay:1.2s; } .hero-img-card.c3{ width:130px; height:110px; bottom:-10px; left:20px; transform: translateZ(100px) rotate(4deg); animation-delay:0.6s; } .hero-badge{ position:absolute; bottom:18px; left:8px; z-index:3; background: var(--primary); color:#fff; padding:10px 16px; border-radius:14px; font-family:'Space Grotesk'; font-weight:700; font-size:0.82rem; line-height:1.3; box-shadow: 0 14px 30px -10px rgba(var(--primary-rgb),0.6); transform: translateZ(130px); display:flex; align-items:center; gap:8px; } .hero-badge .dot-pulse{ width:8px; height:8px; border-radius:50%; background:#7fe0ab; flex-shrink:0; } @media (prefers-reduced-motion: reduce){ .hero-img-card{ animation:none; } .float-item{ animation:none; } } /* ================= MOBILE NAV / HAMBURGER ================= */ .nav-toggle{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background: transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .nav-toggle span{ display:block; width:20px; height:2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .mobile-nav{ position:fixed; inset:76px 0 0 0; z-index:49; background: rgba(var(--bg-rgb),0.98); backdrop-filter: blur(16px); display:flex; flex-direction:column; padding: 30px 32px; transform: translateX(100%); transition: transform .4s var(--ease); overflow-y:auto; } .mobile-nav.open{ transform: translateX(0); } .mobile-nav a{ font-family:'Space Grotesk'; font-weight:600; font-size:1.3rem; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); } .mobile-nav .nav-cta{ margin-top:26px; justify-content:center; } body.menu-open{ overflow:hidden; } @media (max-width: 900px){ .nav-toggle{ display:flex; } .hero-img-main{ width:58%; height:260px; left:0; } .hero-img-card.c1{ width:38%; height:110px; right:0; top:0; } .hero-img-card.c2{ display:none; } .hero-img-card.c3{ width:42%; height:100px; left:5%; bottom:-14px; } } @media (max-width: 480px){ .hero-stage{ height:360px; } } /* ================= BLOG SYSTEM ================= */ .blog-hero{ padding: 150px 0 60px; position:relative; z-index:1; } .blog-hero .eyebrow-tag{ margin-bottom:20px; } .blog-hero h1{ font-size: clamp(2.1rem, 3.8vw, 3.1rem); max-width:700px; } .blog-hero p.lead{ margin-top:18px; font-size:1.05rem; color: rgba(var(--ink-rgb),0.7); max-width:560px; } .blog-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin: 34px 0 10px; } .blog-filter-bar button, .blog-filter-bar a{ font-family:'Inter'; font-size:0.86rem; padding:9px 18px; border-radius:999px; border:1px solid var(--line); background: var(--card-border); cursor:pointer; color: var(--ink); transition: all .25s var(--ease); } .blog-filter-bar button:hover, .blog-filter-bar a:hover{ border-color: var(--accent); } .blog-filter-bar button.active, .blog-filter-bar a.active{ background: var(--primary); color:#fff; border-color:var(--primary); } .featured-article{ display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:center; background: var(--card-border); border:1px solid var(--card-border); border-radius:26px; padding:20px; margin: 40px 0 60px; backdrop-filter: blur(8px); } .featured-article .img-wrap{ border-radius:18px; overflow:hidden; height:320px; } .featured-article .img-wrap img{ width:100%; height:100%; object-fit:cover; } .featured-article .content{ padding: 10px 26px 10px 4px; } .featured-article .cat-pill{ display:inline-block; font-size:0.78rem; font-weight:600; color: var(--primary-text); background: var(--accent-glass); padding:5px 12px; border-radius:999px; margin-bottom:14px; } .featured-article h2{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom:12px; } .featured-article p{ color: rgba(var(--ink-rgb),0.68); font-size:0.98rem; margin-bottom:18px; } .featured-article .meta{ font-size:0.82rem; color: rgba(var(--ink-rgb),0.66); margin-bottom:16px; } .blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; padding-bottom:80px; } .blog-card{ border-radius:20px; overflow:hidden; background: var(--card-border); border:1px solid var(--card-border); transition: transform .35s var(--ease), box-shadow .35s var(--ease); display:flex; flex-direction:column; } .blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); } .blog-card .img-wrap{ height:190px; overflow:hidden; } .blog-card .img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); } .blog-card:hover .img-wrap img{ transform: scale(1.06); } .blog-card .content{ padding:22px 22px 26px; flex:1; display:flex; flex-direction:column; } .blog-card .cat-pill{ display:inline-block; font-size:0.74rem; font-weight:600; color: var(--primary-text); background: var(--accent-glass); padding:4px 10px; border-radius:999px; margin-bottom:12px; width:fit-content; } .blog-card h3{ font-size:1.08rem; margin-bottom:10px; line-height:1.3; } .blog-card p{ font-size:0.88rem; color: rgba(var(--ink-rgb),0.65); flex:1; } .blog-card .meta{ font-size:0.78rem; color: rgba(var(--ink-rgb),0.64); margin-top:16px; display:flex; justify-content:space-between; } .blog-card[hidden]{ display:none; } /* ---- article page ---- */ .article-hero{ padding:150px 0 40px; position:relative; z-index:1; } .article-hero .cat-pill{ display:inline-block; font-size:0.8rem; font-weight:600; color: var(--primary-text); background: var(--accent-glass); padding:6px 14px; border-radius:999px; margin-bottom:20px; } .article-hero h1{ font-size: clamp(2rem, 4vw, 2.9rem); max-width:820px; } .article-hero .meta{ margin-top:20px; font-size:0.9rem; color: rgba(var(--ink-rgb),0.6); display:flex; gap:18px; flex-wrap:wrap; } .article-feat-img{ border-radius:24px; overflow:hidden; height:400px; margin: 34px 0 10px; box-shadow: var(--shadow-soft); } .article-feat-img img{ width:100%; height:100%; object-fit:cover; } .article-body{ max-width: 760px; margin: 0 auto; padding: 50px 0 30px; } .article-body h2{ font-size:1.55rem; margin: 42px 0 16px; } .article-body h3{ font-size:1.2rem; margin: 30px 0 12px; } .article-body p{ font-size:1.02rem; color: rgba(var(--ink-rgb),0.78); margin-bottom:18px; } .article-body ul, .article-body ol{ margin: 0 0 22px 22px; color: rgba(var(--ink-rgb),0.78); font-size:1.02rem; } .article-body li{ margin-bottom:8px; } .article-body table{ width:100%; border-collapse:collapse; margin: 20px 0 28px; font-size:0.94rem; } .article-body th, .article-body td{ border:1px solid var(--line); padding:11px 14px; text-align:left; } .article-body th{ background: var(--accent-glass); font-family:'Space Grotesk'; font-weight:600; } .article-body blockquote{ border-left:3px solid var(--accent); padding: 6px 0 6px 22px; margin: 26px 0; font-style:italic; color: rgba(var(--ink-rgb),0.7); } .faq-item{ border-bottom:1px solid var(--line); padding: 18px 0; } .faq-item h3{ margin:0 0 8px; font-size:1.05rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; } .faq-item p{ margin:0; color: rgba(var(--ink-rgb),0.68); } .article-cta{ background: var(--deep); color:#fff; border:1px solid var(--deep-border); border-radius:22px; padding:36px 40px; margin: 40px 0; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .article-cta h3{ color:#fff; font-size:1.25rem; max-width:400px; } .article-cta .btn-primary{ background:#fff; color:var(--deep); } .related-articles{ padding: 40px 0 90px; } .related-articles h2{ font-size:1.4rem; margin-bottom:26px; } .related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; } @media (max-width: 900px){ .featured-article{ grid-template-columns:1fr; } .featured-article .img-wrap{ height:220px; } .blog-grid, .related-grid{ grid-template-columns:1fr 1fr; } .article-feat-img{ height:240px; } } @media (max-width: 600px){ .blog-grid, .related-grid{ grid-template-columns:1fr; } .article-cta{ flex-direction:column; align-items:flex-start; } } /* ===================================================================== ADDED: THEME CONTROLS (dark/light toggle + Green/Blue colour switch) ===================================================================== */ nav.wrap{ gap:18px; } .theme-controls{ display:flex; align-items:center; gap:10px; flex:none; } .accent-switch{ display:inline-flex; align-items:center; gap:8px; padding:5px 7px; border:1px solid var(--line); border-radius:999px; background: var(--card); } .accent-btn{ position:relative; width:22px; height:22px; padding:0; border-radius:50%; border:0; cursor:pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .accent-btn::after{ content:''; position:absolute; inset:-5px; } /* bigger touch area */ .accent-btn[data-accent="green"]{ background: linear-gradient(135deg,#1B3B2F 50%,#4C8C6B 50%); } .accent-btn[data-accent="blue"]{ background: linear-gradient(135deg,#16375F 50%,#3B7CC0 50%); } .accent-btn:hover{ transform: scale(1.12); } .accent-btn[aria-checked="true"]{ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary-text); } :root[data-theme="dark"] .accent-btn[data-accent="green"]{ background: linear-gradient(135deg,#2E7D5A 50%,#86D4AC 50%); } :root[data-theme="dark"] .accent-btn[data-accent="blue"]{ background: linear-gradient(135deg,#2F6DB5 50%,#8FBDF0 50%); } .mode-toggle{ position:relative; width:40px; height:40px; border-radius:50%; overflow:hidden; border:1px solid var(--line); background: var(--card); color: var(--ink); cursor:pointer; transition: transform .25s var(--ease), background .25s; } .mode-toggle:hover{ transform: translateY(-2px); background: var(--card-hover); } .mode-toggle svg{ position:absolute; inset:0; margin:auto; width:20px; height:20px; transition: transform .5s var(--ease), opacity .3s; } /* light theme shows the moon (click = go dark); dark theme shows the sun */ .mode-toggle .icon-sun{ opacity:0; transform: rotate(-90deg) scale(.4); } .mode-toggle .icon-moon{ opacity:1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .mode-toggle .icon-sun{ opacity:1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .mode-toggle .icon-moon{ opacity:0; transform: rotate(90deg) scale(.4); } .menu-theme{ display:none; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); } .menu-theme > span{ font-family:'Space Grotesk'; font-weight:600; font-size:1.05rem; } /* smooth colour change – class is added by JS for ~0.5s while switching */ html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{ transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease, box-shadow .45s ease !important; } /* ===================================================================== ADDED: FIXES (existing bugs) ===================================================================== */ html{ scroll-padding-top: 92px; } /* sticky header no longer covers anchor targets */ .skip-link{ position:absolute; left:12px; top:-70px; z-index:100; padding:10px 16px; border-radius:10px; background: var(--primary); color: var(--on-primary); font-size:.9rem; transition: top .2s; } .skip-link:focus{ top:12px; } /* backdrop-filter on
trapped the fixed mobile menu inside a 76px box. Moving the blur onto a pseudo-element fixes the menu without changing the look. */ header{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; } header::before{ content:''; position:absolute; inset:0; z-index:-1; background: rgba(var(--bg-rgb),0.78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .mobile-nav{ background: rgba(var(--bg-rgb),0.98); visibility:hidden; transition: transform .4s var(--ease), visibility 0s linear .4s; } .mobile-nav.open{ visibility:visible; transition-delay:0s; } .hero-ctas{ flex-wrap:wrap; } .testi-stack{ height:auto; min-height:300px; display:grid; place-items:center; } .testi-card{ position:relative; grid-area:1/1; justify-self:center; } /* reveal fade was being overridden by each card's own transition – restore it */ .service-card, .city-card, .blog-card{ transition: opacity .7s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), background .4s; } .testi-dots button{ position:relative; } .testi-dots button::after{ content:''; position:absolute; inset:-9px -5px; } /* easier to tap */ .faq-item h3{ gap:16px; } .faq-item h3::after{ content:''; flex:none; width:9px; height:9px; margin-top:-4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); } .faq-item h3[aria-expanded="false"]::after{ transform: rotate(-45deg); margin-top:2px; } .faq-item h3:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; } .blog-search{ display:block; margin-top:26px; width:100%; max-width:420px; padding:13px 18px; border-radius:12px; border:1px solid var(--line); background: var(--card-strong); color: var(--ink); font-family:'Inter'; font-size:0.95rem; } .blog-search::placeholder{ color: rgba(var(--ink-rgb),0.66); } .blog-empty{ text-align:center; color: rgba(var(--ink-rgb),0.66); padding: 30px 0 80px; grid-column:1/-1; } .footer-about{ font-size:0.88rem; color: rgba(var(--ink-rgb),0.66); max-width:280px; } .footer-bottom{ gap:14px; flex-wrap:wrap; } /* ===================================================================== ADDED: GALLERY (photos of the yard) ===================================================================== */ .js img.fade-in{ opacity:0; transition: opacity .7s var(--ease), transform .7s var(--ease); } .js img.fade-in.loaded{ opacity:1; } .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; gap:18px; } .gallery-item{ position:relative; margin:0; border-radius:22px; overflow:hidden; background: var(--card); border:1px solid var(--card-border); box-shadow: var(--shadow-soft); } .gallery-item.g-main{ grid-column:1 / 3; grid-row:1 / 3; } .gallery-item.g-wide{ grid-column:3 / 5; } .lb-trigger{ display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; color:inherit; font:inherit; } .lb-trigger:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; } .gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease), opacity .7s var(--ease); } .gallery-item:hover img{ transform: scale(1.05); } .gallery-item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:48px 20px 16px; pointer-events:none; color:#fff; font-family:'Space Grotesk'; font-weight:600; font-size:0.98rem; background: linear-gradient(to top, rgba(4,12,8,0.82), rgba(4,12,8,0)); } .gallery-item figcaption span{ display:block; margin-top:2px; font-family:'Inter'; font-weight:300; font-size:0.8rem; opacity:.9; } /* ===================================================================== ADDED: LATEST OFFERS SLIDER (posters + video) ===================================================================== */ .offers-slider{ position:relative; } .offers-nav{ display:flex; gap:10px; justify-content:flex-end; margin: -28px 0 18px; } .offers-nav button{ width:44px; height:44px; border-radius:50%; cursor:pointer; display:grid; place-items:center; border:1px solid var(--line); background: var(--card-strong); color: var(--ink); transition: transform .25s var(--ease), background .25s, opacity .25s; } .offers-nav button:hover:not(:disabled){ transform: translateY(-2px); background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .offers-nav button:disabled{ opacity:.35; cursor:default; } .offers-track{ --h: 380px; display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding: 12px 4px 34px; scrollbar-width:thin; scrollbar-color: var(--accent) transparent; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } .offers-track:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:14px; } .offer-card{ flex:0 0 auto; height: var(--h); aspect-ratio:1/1; margin:0; scroll-snap-align:start; border-radius:22px; overflow:hidden; background: var(--card); border:1px solid var(--card-border); box-shadow: 0 12px 28px -14px rgba(var(--ink-rgb),0.45); transition: transform .4s var(--ease); } .offer-card:hover{ transform: translateY(-5px); } .offer-card.offer-video{ aspect-ratio: 478 / 850; background:#04140d; } .offer-card img, .offer-card video{ width:100%; height:100%; object-fit:cover; } .offer-card video{ object-fit:contain; } /* ===================================================================== ADDED: LIGHTBOX (click any gallery/offer image to enlarge) ===================================================================== */ .lightbox{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; background: rgba(3,10,7,0.9); padding: 60px 64px 30px; opacity:0; visibility:hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; } .lightbox.open{ opacity:1; visibility:visible; transition-delay:0s; } .lightbox img{ max-width:100%; max-height: calc(100vh - 150px); object-fit:contain; border-radius:14px; box-shadow:0 30px 80px -20px #000; } .lightbox .lb-caption{ color:#fff; opacity:.85; font-size:.9rem; margin-top:14px; text-align:center; } .lightbox button{ position:absolute; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color:#fff; cursor:pointer; display:grid; place-items:center; transition: background .25s; } .lightbox button:hover{ background: rgba(255,255,255,.22); } .lightbox .lb-close{ top:16px; right:16px; } .lightbox .lb-prev{ left:12px; top:50%; margin-top:-23px; } .lightbox .lb-next{ right:12px; top:50%; margin-top:-23px; } body.lb-open{ overflow:hidden; } /* ===================================================================== ADDED: RESPONSIVE + PERFORMANCE ===================================================================== */ @media (max-width:1080px){ .nav-links{ gap:20px; } } @media (max-width:900px){ .blob{ filter: blur(50px); } /* blur on many translucent cards is expensive on phones */ .service-card, .testi-card, .featured-article{ -webkit-backdrop-filter:none; backdrop-filter:none; } .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:200px; } .gallery-item.g-main{ grid-column:1 / 3; grid-row:auto / span 2; } .gallery-item.g-wide{ grid-column:1 / 3; } .offers-track{ --h: 320px; } .offers-nav{ margin-top:-12px; } } @media (max-width:640px){ .wrap{ padding-left:20px; padding-right:20px; } .trust-bar{ margin: 0 20px 70px; } section{ padding: 64px 0; } nav.wrap{ gap:10px; } nav.wrap > .nav-cta{ display:none; } /* CTA lives in the menu + floating button on phones */ .logo{ font-size:.92rem; line-height:1.15; gap:8px; min-width:0; margin-right:auto; } .logo-mark{ width:30px; height:30px; flex:none; } .mobile-nav{ padding: 24px 20px; } .testi-card{ padding: 28px 22px; } .cta-banner{ padding: 40px 26px; } .footer-grid{ grid-template-columns:1fr; } .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:auto; } .gallery-item, .gallery-item.g-main, .gallery-item.g-wide{ grid-column:auto; grid-row:auto; aspect-ratio:4/3; } .offers-track{ --h: 290px; gap:14px; } .lightbox{ padding: 64px 12px 24px; } .lightbox .lb-prev{ left:6px; } .lightbox .lb-next{ right:6px; } } @media (max-width:480px){ .theme-controls .accent-switch{ display:none; } /* colour switch moves into the mobile menu */ .menu-theme{ display:flex; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .offers-track{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; } .js img.fade-in{ transition:none; } html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{ transition:none !important; } } .blog-search{ -webkit-appearance:none; appearance:none; } /* Bug fix: `section{padding:90px 0}` and `.article-body{padding:…0}` wiped the horizontal padding of .wrap, so hero/blog/article text touched the screen edge on phones. Restore it. */ section.wrap, article.wrap{ padding-left:32px; padding-right:32px; } @media (max-width:640px){ section.wrap, article.wrap{ padding-left:20px; padding-right:20px; } } /* Navbar now holds two extra controls, so switch to the hamburger a little earlier and never let labels wrap onto two lines. */ .nav-links a, .nav-cta, .logo{ white-space:nowrap; } @media (max-width:1100px){ .nav-links{ display:none; } .nav-toggle{ display:flex; } .theme-controls{ margin-left:auto; } } @media (max-width:640px){ .logo{ white-space:normal; margin-right:0; } } /* ===================================================================== WORDPRESS-SPECIFIC ADDITIONS ===================================================================== */ .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important; } .screen-reader-text:focus{ background:var(--bg); color:var(--ink); clip:auto !important; clip-path:none; display:block; height:auto; width:auto; left:8px; top:8px; padding:12px 18px; z-index:100000; border-radius:8px; } /* logged-in admin bar: keep sticky header + mobile menu below it */ .admin-bar header{ top:32px; } .admin-bar .mobile-nav{ top:108px; } @media (max-width:782px){ .admin-bar header{ top:46px; } .admin-bar .mobile-nav{ top:122px; } } @media (max-width:600px){ .admin-bar header{ top:0; } .admin-bar .mobile-nav{ top:76px; } } /* header logo (Appearance → Customize → Site Identity) */ .logo .custom-logo-img{ height:38px; width:auto; max-width:200px; } .logo-text{ display:inline-block; } /* blog category pills are links in WordPress (not JS buttons) */ .blog-filter-bar a{ display:inline-block; font-family:'Inter'; font-size:0.86rem; padding:9px 18px; border-radius:999px; border:1px solid var(--line); background: var(--card); color: var(--ink); transition: all .25s var(--ease); } .blog-search-form{ margin-top:26px; } .blog-search-form .blog-search{ margin-top:0; } /* pagination */ .pagination{ padding: 0 0 90px; } .pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; } .pagination .page-numbers{ min-width:42px; height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid var(--line); background: var(--card); color: var(--ink); font-size:0.9rem; transition: background .25s, color .25s; } .pagination a.page-numbers:hover{ background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .pagination .page-numbers.current{ background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .pagination .dots{ border:none; background:none; } /* post / page content produced by the block editor */ .article-body .wp-block-heading{ scroll-margin-top: 100px; } .article-body .wp-block-table{ margin:0; overflow-x:auto; } .article-body .wp-block-table table{ min-width:480px; } .article-body img, .article-body video{ max-width:100%; height:auto; border-radius:16px; } .article-body figure{ margin: 26px 0; } .article-body figcaption{ font-size:0.85rem; color: rgba(var(--ink-rgb),0.66); text-align:center; margin-top:8px; } .article-body a:not(.btn-primary){ color: var(--primary-text); text-decoration: underline; text-underline-offset:3px; } .article-body .alignleft{ float:left; margin: 6px 24px 14px 0; } .article-body .alignright{ float:right; margin: 6px 0 14px 24px; } .article-body .aligncenter{ margin-left:auto; margin-right:auto; display:block; } .article-body::after{ content:''; display:table; clear:both; } .wp-caption{ max-width:100%; } .article-body pre, .article-body code{ font-size:0.9rem; background: var(--accent-glass); border-radius:8px; } .article-body pre{ padding:16px; overflow-x:auto; } .article-body code{ padding:2px 6px; } /* search / 404 */ .notice-box{ text-align:center; padding: 20px 0 100px; } .notice-box p{ color: rgba(var(--ink-rgb),0.72); margin: 14px auto 28px; max-width:520px; } .notice-box .btn-primary{ display:inline-flex; } .wp-block-image img{ height:auto; } /* mobile menu links are wrapped in a container by wp_nav_menu */ .mobile-nav-links{ display:flex; flex-direction:column; } .footer-grid ul, .footer-menu{ list-style:none; display:flex; flex-direction:column; gap:10px; } .footer-menu a{ font-size:0.88rem; color: rgba(var(--ink-rgb),0.66); transition: color .25s; } .footer-menu a:hover{ color: var(--primary-text); }