/* ========================================================================== WEBSITE MODIFIER — every look-and-feel choice in Appearance -------------------------------------------------------------------------- One block per choice. Every rule is scoped to an ancestor class, which the site puts on and the admin puts on each preview tile — so the same file styles the live website and the picker, and the two can never drift. .bs-* button design .cs-* colour scheme .cd-* card style .hf-* heading font .hl-* header layout The base look lives in style.css and is entirely token-driven, so a colour scheme only has to restate the tokens; nothing here repeats a rule. -------------------------------------------------------------------------- THEME-CSS-VERSION: 2 diagnostics.php and the Appearance page look for that marker. If this file is missing or older than the PHP expects, they say so in plain words rather than letting a chosen option quietly do nothing. ========================================================================== */ /* -------------------------------------------------------------------------- 1. ROUNDED — soft corners, gentle lift, coloured glow -------------------------------------------------------------------------- */ .bs-rounded .btn{border-radius:var(--r-sm)} .bs-rounded .btn:hover{transform:translateY(-1px)} .bs-rounded .btn:active{transform:translateY(0)} /* -------------------------------------------------------------------------- 2. SHARP — square corners, spaced uppercase label, bar draws in on hover -------------------------------------------------------------------------- */ .bs-sharp .btn{ position:relative;z-index:0; border-radius:0; text-transform:uppercase;letter-spacing:.09em;font-weight:600;font-size:.8rem; padding:13px 28px; } .bs-sharp .btn-sm{padding:9px 18px;font-size:.72rem} .bs-sharp .btn-lg{padding:16px 36px;font-size:.88rem} .bs-sharp .btn::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:currentColor; transform:scaleX(0);transform-origin:left center; transition:transform .28s ease; } .bs-sharp .btn:hover{transform:none;box-shadow:none} .bs-sharp .btn:hover::after{transform:scaleX(1)} .bs-sharp .btn:active{transform:translateY(1px)} .bs-sharp .btn-pill{border-radius:0} /* -------------------------------------------------------------------------- 3. PILL — capsule, rises on a wide soft shadow -------------------------------------------------------------------------- */ .bs-pill .btn{border-radius:var(--r-pill);padding:12px 30px} .bs-pill .btn-sm{padding:8px 20px} .bs-pill .btn-lg{padding:15px 38px} .bs-pill .btn:hover{transform:translateY(-3px)} .bs-pill .btn-accent:hover{box-shadow:0 14px 30px rgba(var(--cta-rgb),.40)} .bs-pill .btn-primary:hover{box-shadow:0 14px 30px rgba(var(--primary-rgb),.34)} .bs-pill .btn-outline:hover, .bs-pill .btn-outline-gold:hover, .bs-pill .btn-white:hover, .bs-pill .btn-wa:hover{box-shadow:0 14px 30px rgba(var(--primary-rgb),.24)} .bs-pill .btn-outline-light:hover{box-shadow:0 14px 30px rgba(0,0,0,.28)} .bs-pill .btn:active{transform:translateY(-1px)} /* -------------------------------------------------------------------------- 4. RAISED — solid offset shadow, presses down into it on hover -------------------------------------------------------------------------- */ .bs-raised .btn{ --btn-off:rgba(var(--primary-deep-rgb),.92); border-radius:8px; box-shadow:4px 4px 0 var(--btn-off); transition:transform .14s ease,box-shadow .14s ease,background-color .18s ease,color .18s ease,border-color .18s ease; } .bs-raised .btn-white, .bs-raised .btn-outline-light{--btn-off:rgba(255,255,255,.45)} .bs-raised .btn-accent{--btn-off:rgba(var(--primary-deep-rgb),.75)} .bs-raised .btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--btn-off)} .bs-raised .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--btn-off)} /* the glow shadows from style.css would fight the solid one */ .bs-raised .btn-accent:hover, .bs-raised .btn-primary:hover{box-shadow:1px 1px 0 var(--btn-off)} /* -------------------------------------------------------------------------- 5. SHEEN — gradient fill, band of light sweeps across on hover -------------------------------------------------------------------------- */ .bs-sheen .btn{position:relative;z-index:0;overflow:hidden;border-radius:12px} .bs-sheen .btn-accent{background-image:linear-gradient(135deg,var(--cta) 0%,rgba(var(--cta-rgb),.72) 100%)} .bs-sheen .btn-primary{background-image:linear-gradient(135deg,var(--primary) 0%,rgba(var(--primary-rgb),.78) 100%)} .bs-sheen .btn-wa{background-image:linear-gradient(135deg,#25D366 0%,#12A150 100%)} .bs-sheen .btn::after{ content:"";position:absolute;top:-10%;left:-70%;width:45%;height:120%;z-index:-1; background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%); transform:skewX(-18deg); transition:left .6s cubic-bezier(.22,.61,.36,1); pointer-events:none; } .bs-sheen .btn:hover::after{left:125%} .bs-sheen .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(var(--primary-rgb),.22)} .bs-sheen .btn-accent:hover{box-shadow:0 12px 26px rgba(var(--cta-rgb),.34)} .bs-sheen .btn:active{transform:translateY(0)} /* an outline button has no fill to shine through, so it fills in instead */ .bs-sheen .btn-outline::after, .bs-sheen .btn-outline-gold::after, .bs-sheen .btn-outline-light::after{background:linear-gradient(115deg,transparent,rgba(255,255,255,.28),transparent)} /* -------------------------------------------------------------------------- Respect the operating system's "reduce motion" setting in every design. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .bs-rounded .btn,.bs-sharp .btn,.bs-pill .btn,.bs-raised .btn,.bs-sheen .btn, .bs-sharp .btn::after,.bs-sheen .btn::after{transition:none} .bs-rounded .btn:hover,.bs-pill .btn:hover,.bs-raised .btn:hover,.bs-sheen .btn:hover{transform:none} .bs-sharp .btn:hover::after{transform:scaleX(1)} .bs-sheen .btn:hover::after{left:-70%} } /* -------------------------------------------------------------------------- Keyboard focus must stay obvious whichever design is chosen. -------------------------------------------------------------------------- */ .bs-rounded .btn:focus-visible, .bs-sharp .btn:focus-visible, .bs-pill .btn:focus-visible, .bs-raised .btn:focus-visible, .bs-sheen .btn:focus-visible{outline:3px solid var(--cta);outline-offset:3px} /* ========================================================================== COLOUR SCHEME -------------------------------------------------------------------------- Each scheme restates the brand tokens only. Everything else in style.css is written against those tokens, so one block below repaints the entire site — headings, links, gradients, tints, shadows and focus rings included. Every palette keeps the same job for each token: --primary headings, navigation, the dark furniture --cta the one colour that means "act" — buttons and accents --cta-text ink on the action colour, chosen for contrast --primary-light a pale wash of the primary, for tinted rows and icons --hero-* the three stops of the hero gradient --band-* the three stops of the dark bands further down the page ========================================================================== */ /* The five palettes themselves are NOT here — they are written from theme_modifiers() in includes/theme.php straight into every page's . A palette that lives in a stylesheet is only as fresh as the copy on the server and the copy in the visitor's cache; coming from PHP it is always whatever the admin last chose. See theme_palette_css(). */ /* An action colour with white ink needs the outline button to match, or the label sits on its own colour at half strength. */ .cs-graphite .btn-outline-gold, .cs-indigo .btn-outline-gold{color:var(--cta)} .cs-graphite .btn-outline-gold:hover, .cs-indigo .btn-outline-gold:hover{background:var(--cta);color:var(--cta-text)} /* ========================================================================== HEADING FONT -------------------------------------------------------------------------- Only the display face changes. Body copy stays on Inter and the interface labels stay on Poppins, so line lengths and reading rhythm do not move. The optical size of each face differs, so the heading scale is nudged to keep every option printing at the same apparent size. ========================================================================== */ .hf-playfair { --font-display:"Playfair Display", Georgia, "Times New Roman", serif; } .hf-montserrat{ --font-display:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .hf-lora { --font-display:"Lora", Georgia, "Times New Roman", serif; } .hf-space { --font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .hf-poppins { --font-display:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Sans faces read larger than a serif at the same size; pull them back a little and tighten the letter spacing so headlines stay compact. */ .hf-montserrat h1,.hf-montserrat h2,.hf-montserrat .hero-title, .hf-space h1,.hf-space h2,.hf-space .hero-title, .hf-poppins h1,.hf-poppins h2,.hf-poppins .hero-title{letter-spacing:-.015em} .hf-space h1,.hf-space .hero-title{letter-spacing:-.03em} .hf-lora h1,.hf-lora h2,.hf-lora .hero-title{letter-spacing:-.005em} /* ========================================================================== CARD STYLE -------------------------------------------------------------------------- The site draws three kinds of box with the same intent — .card (services, features), .bcard (insights) and .tcard (testimonials). All three follow the choice, so the page stays consistent from top to bottom. ========================================================================== */ /* --- 1. Lifted (default) -------------------------------------------------- */ .cd-lifted .card{border:1.5px solid var(--border);box-shadow:var(--shadow-sm);border-radius:var(--r-lg)} .cd-lifted .card:hover, .cd-lifted .bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} /* --- 2. Flat -------------------------------------------------------------- */ .cd-flat .card, .cd-flat .bcard, .cd-flat .tcard{box-shadow:none;border:1.5px solid var(--border);border-radius:var(--r-md)} .cd-flat .card::before{display:none} .cd-flat .card:hover, .cd-flat .bcard:hover{transform:none;box-shadow:none;border-color:var(--primary);background:var(--primary-light)} .cd-flat .bcard:hover{background:var(--card)} /* --- 3. Elevated ---------------------------------------------------------- */ .cd-elevated .card, .cd-elevated .bcard, .cd-elevated .tcard{border:0;border-radius:var(--r-lg);box-shadow:0 10px 30px rgba(var(--primary-rgb),.13)} .cd-elevated .card::before{display:none} .cd-elevated .card:hover, .cd-elevated .bcard:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(var(--primary-rgb),.20)} .cd-elevated .tcard::before{opacity:.55} /* --- 4. Top line ---------------------------------------------------------- */ .cd-topline .card, .cd-topline .bcard, .cd-topline .tcard{ border:1px solid var(--border);border-top:4px solid var(--cta); border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--shadow-sm); } .cd-topline .card::before{display:none} .cd-topline .card:hover, .cd-topline .bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-top-color:var(--primary)} /* --- 5. Framed ------------------------------------------------------------ */ .cd-framed .card, .cd-framed .bcard, .cd-framed .tcard{border:2px solid var(--primary);border-radius:0;box-shadow:none} .cd-framed .card::before{height:4px;background:var(--primary)} .cd-framed .card:hover, .cd-framed .bcard:hover{transform:none;box-shadow:6px 6px 0 rgba(var(--primary-rgb),.13)} .cd-framed .card-ic{border-radius:0} .cd-framed .bcard-img{border-bottom:2px solid var(--primary)} /* ========================================================================== HEADER LAYOUT -------------------------------------------------------------------------- The markup is the same in all five; only the arrangement changes, so no layout can lose the phone number, the sign-in link or the disclaimer ticker. Below 992px every layout falls back to the standard compact bar with the menu button, because that is the only arrangement that works on a phone — the rules here are deliberately desktop-only. ========================================================================== */ /* The utility strip that only some layouts use: it lives in the navigation row and carries what the contact bar would otherwise show. */ .nav-utils{display:none;align-items:center;gap:14px;margin-left:14px;padding-left:16px; border-left:1px solid var(--border);font-family:var(--font-ui);font-size:.76rem;font-weight:600} .nav-utils a{color:var(--primary);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap} .nav-utils a:hover{color:var(--cta-hover)} @media (min-width:992px){ /* --- 1. Classic (default) — three strips, nothing to change ------------- */ /* --- 2. Compact — contact bar folded into the navigation row ----------- Folding only happens when the navigation row can actually hold the extra items. On a narrower desktop the contact strip simply stays where it is, so nothing is ever dropped to make the layout fit. */ .hl-compact{--nav-h:64px} .hl-compact .main-nav a.nav-link{padding-block:22px} .hl-compact .main-nav a.nav-link::after{bottom:14px} .hl-compact .brand img{height:40px} /* --- 3. Centred — logo on its own line, menu centred beneath ----------- */ .hl-centered .main-navbar .container{flex-direction:column;gap:0;padding-block:14px 0} .hl-centered .brand{margin-inline:auto;text-align:center} .hl-centered .brand-text{text-align:left} .hl-centered .main-nav{margin-inline:auto} .hl-centered .main-nav a.nav-link{padding-block:16px} .hl-centered .main-nav a.nav-link::after{bottom:9px} .hl-centered .dropdown{left:50%;transform:translate(-50%,8px)} .hl-centered .has-drop:hover > .dropdown, .hl-centered .has-drop.open > .dropdown{transform:translate(-50%,0)} /* --- 4. Dark bar — see the block after this media query, because this one is the only layout that also changes the bar on a phone ----------- */ .hl-dark .main-nav a.nav-link{color:rgba(255,255,255,.92)} .hl-dark .main-nav a.nav-link:hover{color:#fff} .hl-dark .main-nav li.active > a.nav-link{color:var(--cta)} .hl-dark .nav-utils{border-left-color:rgba(255,255,255,.22)} .hl-dark .nav-utils a{color:rgba(255,255,255,.92)} .hl-dark .nav-utils a:hover{color:var(--cta)} /* --- 5. Floating — the navigation sits in a panel over the page -------- */ .hl-floating .site-header{background:var(--bg);padding-block:14px 0} .hl-floating .main-navbar{background:transparent;border-bottom:0;box-shadow:none} .hl-floating .main-navbar .container{ background:#fff;border-radius:var(--r-xl);padding-inline:26px; box-shadow:0 14px 34px rgba(var(--primary-rgb),.16); border:1px solid var(--border); } .hl-floating .main-navbar.scrolled .container{box-shadow:0 18px 42px rgba(var(--primary-rgb),.24)} .hl-floating .main-nav a.nav-link{padding-block:22px} .hl-floating .main-nav a.nav-link::after{bottom:14px} .hl-floating .dropdown{border-radius:var(--r-md);margin-top:6px} .hl-floating .ticker-bar{margin-top:14px} } /* The fold itself. Everything the contact strip carried has to fit beside a seven-item menu and the call to action, so the row is tightened and the sign-in link shows as its padlock alone — nothing is dropped. Below the breakpoint the contact strip simply stays where it is. */ @media (min-width:1200px){ .hl-compact,.hl-floating{--topbar-h:0px} .hl-compact .topbar,.hl-floating .topbar{display:none} .hl-compact .nav-utils,.hl-floating .nav-utils{display:inline-flex} .hl-compact .main-nav a.nav-link, .hl-floating .main-nav a.nav-link{padding-inline:9px;font-size:.72rem} .hl-compact .main-nav a.nav-link::after, .hl-floating .main-nav a.nav-link::after{left:9px;right:9px} .hl-compact .nav-utils,.hl-floating .nav-utils{gap:12px;margin-left:11px;padding-left:13px;font-size:.72rem} .hl-compact .nav-utils .u-label,.hl-floating .nav-utils .u-label{ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; } .hl-compact .nav-cta,.hl-floating .nav-cta{margin-left:10px} .hl-compact .nav-cta .btn,.hl-floating .nav-cta .btn{padding:9px 15px} /* the strapline would push the row past the container; it is still on the hero badge and in the footer of every page */ .hl-compact .brand-sub,.hl-floating .brand-sub{display:none} } /* --- Dark bar, at every width -------------------------------------------- Unlike the other four, this layout keeps its dark bar on a phone as well: a white bar with a white logo would be unreadable the moment the window narrowed. The slide-out menu panel stays white, so its links are put back to the brand colour below the breakpoint. */ .hl-dark .topbar{background:var(--primary-deep)} .hl-dark .main-navbar{background:var(--primary);border-bottom-color:rgba(255,255,255,.14); box-shadow:0 2px 14px rgba(var(--primary-deep-rgb),.30)} .hl-dark .main-navbar.scrolled{box-shadow:0 8px 26px rgba(var(--primary-deep-rgb),.42)} .hl-dark .brand-name{color:#fff} .hl-dark .brand-sub{color:rgba(255,255,255,.62)} .hl-dark .brand-mark{background:rgba(255,255,255,.10)} .hl-dark .nav-toggle{color:#fff} .hl-dark .ticker-bar{background:var(--primary-dark)} @media (max-width:991px){ .hl-dark .main-nav{background:#fff} .hl-dark .main-nav a.nav-link{color:var(--primary)} .hl-dark .main-nav a.nav-link:hover{color:var(--primary-dark)} .hl-dark .main-nav li.active > a.nav-link{color:var(--primary)} } /* The dark bar carries the footer logo — the light version — so a dark logo cannot vanish on it. If no footer logo was uploaded the website logo is used with the same white plate the footer falls back to. */ .hl-dark .brand .brand-logo.on-dark-plate{background:#fff;border-radius:8px;padding:5px 9px}