/* Theme Name: Angel Brigade Theme URI: https://www.angelbrigade.co.za Author: Angel Brigade Author URI: https://www.angelbrigade.co.za Description: A compassionate, dignified custom WordPress theme for Angel Brigade Pet Cremation Services. Converted from a bespoke single-page HTML design, preserving the original layout, typography, animations and interactions while adding full WordPress content management, translation-readiness, accessibility support, editable service pricing placeholders, testimonials with Google Reviews integration, a POPIA privacy policy page, and WhatsApp conversion-tracking hooks for Google Tag Manager. Version: 1.0.4 Requires at least: 6.0 Tested up to: 6.6 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: angel-brigade Tags: custom-colors, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, accessibility-ready Angel Brigade WordPress Theme, Copyright 2026 Angel Brigade is distributed under the terms of the GNU GPL. This theme bundles the Cormorant Garamond and Mulish fonts served via Google Fonts (https://fonts.google.com), used under the SIL Open Font License, 1.1: https://scripts.sil.org/OFL */ :root{ --ink:#1E2C38; --ink-soft:#4B5960; --gold:#C6963F; --gold-deep:#A87B31; --gold-soft:#E2C48F; --taupe:#D3BBA7; --mist:#B6B6B8; --cream:#FAF6F1; --cream-deep:#F1E6DA; --paper:#FFFDFB; --line: rgba(30,44,56,0.12); --shadow: 0 20px 50px -25px rgba(30,44,56,0.35); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Mulish', sans-serif; color:var(--ink-soft); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} .wrap{max-width:1140px; margin:0 auto; padding:0 28px;} h1,h2,h3{ font-family:'Cormorant Garamond', serif; color:var(--ink); font-weight:600; letter-spacing:0.01em; } .eyebrow{ font-family:'Mulish', sans-serif; font-size:12.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-deep); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; border-radius:100px; font-family:'Mulish', sans-serif; font-weight:700; font-size:14.5px; letter-spacing:0.03em; cursor:pointer; border:1px solid transparent; transition: all .25s ease; white-space:nowrap; flex-shrink:0; } .btn-primary{ background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); color:#fff; box-shadow: 0 12px 24px -10px rgba(166,122,45,0.55); } .btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 16px 28px -10px rgba(166,122,45,0.65); } .btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--line); } .btn-outline:hover{ border-color:var(--gold); color:var(--gold-deep); } /* ---------- NAV ---------- */ header{ position:sticky; top:0; z-index:50; background:rgba(250,246,241,0.9); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } /* * flex-wrap:nowrap + a minimum gap of 24px between the three groups * (brand / nav-links / nav-cta) is deliberate: justify-content:space-between * alone can collapse to ~0px between groups once the row is full width, * which is exactly what made the last nav link ("Contact") visually run * into the phone number next to it. The explicit gap guarantees some * breathing room always remains, on every screen size. */ nav.wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:24px; height:84px; } .brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; } /* * Logo emblem: fixed at its correct native aspect ratio (900x419 -> * 2.147971:1) so it always renders at exactly 94.51px x 44px, on every * screen size, instead of relying on "width:auto" (which can be * overridden by a mismatched width/height on the itself, e.g. if * the Custom Logo control's recommended crop guide doesn't match the * image's real proportions). object-fit:contain is a second safety net * against any stretching/squishing, and !important is used deliberately * here (and only here) so this fixed brand-mark size can't be silently * overridden by a caching/page-builder plugin's "Additional CSS", by a * higher-specificity selector elsewhere, or by a stale style rule left * behind from an earlier deploy. */ .brand img, .brand img.custom-logo, a.brand .custom-logo-link img{ height:44px !important; width:94.51px !important; max-width:94.51px !important; max-height:44px !important; object-fit:contain; flex-shrink:0; } /* * .brand-text's two children ("name" and "sub") must stack as two * separate lines, matching the original design. The theme outputs them * as elements (so the WordPress Site Title field can be used * instead of hard-coded text) -- a is inline by default and * will NOT stack unless explicitly made a flex column here, which is * what was missing and caused "PET CREMATION SERVICES" to run onto the * same line as the name and wrap awkwardly. white-space:nowrap on each * line stops that wrapping happening ever again, on any screen size. */ .brand-text{ display:flex; flex-direction:column; justify-content:center; font-family:'Cormorant Garamond', serif; line-height:1.05; } /* * text-transform:uppercase guarantees the brand name always renders as * "ANGEL BRIGADE" exactly like the original design, regardless of how * the WordPress Site Title field happens to be capitalised. */ .brand-text .name{ font-size:20px; font-weight:600; color:var(--ink); letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; } .brand-text .sub{ font-size:10.5px; font-weight:500; letter-spacing:0.22em; color:var(--gold-deep); text-transform:uppercase; white-space:nowrap; } .nav-links{ display:flex; align-items:center; gap:38px; font-size:14.5px; font-weight:600; color:var(--ink-soft); flex-shrink:0; } /* * WordPress's wp_nav_menu() renders a standard