/* ========================================================================== Golden Key Financial — Dark Luxury (Brand Pack v2) Deep navy + teal, "golden key" wordmark. Dark, premium, panelled. Palette sampled from the logo: navy #1F1D4C, teal #46B9B6. NOTE ON VARIABLE NAMES: the accent tokens are still called --gold / --gold-2 / --gold-deep / --gold-soft. They now hold TEAL. The names are kept deliberately so the ~200 references across this file and the templates did not all have to be rewritten — rename them only as a separate, deliberate pass, never halfway. ========================================================================== */ :root{ /* Brand palette — deep navy + teal */ --bg: #16143a; /* page base (deep navy) */ --surface: #201e52; /* lifted panels / alt sections */ --surface-2: #2a2764; /* cards on panels / hover */ --deep: #0f0e2b; /* deepest — header/footer/hero base */ --gold: #46b9b6; /* primary accent — brand teal */ --gold-2: #6fd6d3; /* bright teal (hover/accents) */ --gold-deep: #2f918f; /* deeper teal */ --gold-soft: rgba(70,185,182,0.16); --cream: #eaf4f4; /* headings / bright text */ --text: #b9c0dc; /* body text on navy */ --muted: #8189b0; /* muted cool */ --line: rgba(70,185,182,0.26); /* teal hairline */ --line-soft: rgba(255,255,255,0.08); --shadow-sm: 0 2px 12px rgba(0,0,0,0.30); --shadow-md: 0 20px 46px rgba(0,0,0,0.42); --shadow-lg: 0 34px 80px rgba(0,0,0,0.55); --radius: 4px; --radius-lg: 8px; --maxw: 1200px; --gutter: clamp(20px, 5vw, 56px); --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.72; font-size:16.5px; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:var(--gold); text-decoration:none; transition:color .25s var(--ease); } a:hover{ color:var(--gold-2); } ul{ margin:0; padding:0; } ::selection{ background:var(--gold); color:var(--deep); } /* ---------- Typography ---------- */ h1,h2,h3,h4{ font-family:var(--font-display); color:var(--cream); margin:0 0 .5em; line-height:1.14; font-weight:800; letter-spacing:-0.01em; } h1{ font-size:clamp(2.3rem, 5vw, 3.8rem); line-height:1.07; } h2{ font-size:clamp(1.85rem, 3.6vw, 2.8rem); } h3{ font-size:clamp(1.2rem, 2vw, 1.5rem); font-weight:700; } h4{ font-size:1.1rem; font-weight:700; } p{ margin:0 0 1.1em; } /* Mixed-weight headings (light base + teal key words) */ .mixed{ font-weight:300; } .mixed strong, .mixed b{ font-weight:800; color:var(--gold); } .lead{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--text); font-weight:400; line-height:1.62; } .eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0 0 1.1em; display:inline-block; } .eyebrow.on-navy, .eyebrow.muted{ color:var(--gold); } /* ========================================================================== Line breaking — no words stranded on a line of their own A block that spills its last word onto a line by itself ("...your next / move?") reads as a mistake. Two properties fix it, and which one a block gets depends entirely on how LONG that block can grow. `balance` evens out every line, so nothing is left short. Ideal for display text — headings, labels, badges, section intros, list items. `pretty` leaves the rag alone and only rescues the last line. Right for running paragraphs. --------------------------------------------------------------------------- THE TRAP, and why the two lists are split the way they are: Browsers stop balancing past a handful of lines (Chrome: six). Past that limit `balance` silently becomes plain wrapping — and because the element asked for `balance`, it does NOT get `pretty` either, so its last line is left completely unprotected. A block that is four lines on desktop and eight on a narrow card is therefore WORSE with `balance` than with `pretty`. So: only put something in the `balance` list if it stays short at EVERY width. Anything that can run long — card copy, testimonials, leads, legal text — belongs in the `pretty` list. Testimonial quotes were briefly in the balance list and hit exactly this: seven lines at 1024px, unprotected. --------------------------------------------------------------------------- Both properties are progressive: a browser without them wraps exactly as it does today, so there is nothing to polyfill. Deliberately CSS-only. The traditional fix — JavaScript that glues the last two words together with a non-breaking space — rewrites the very DOM text that PM Visual Editor makes click-to-edit, so it can bake stray   entities into the client's saved content the first time they edit a heading. Never add a widont script to this theme. ========================================================================== */ /* Always short, at every width: even every line out. */ h1, h2, h3, h4, h5, .eyebrow, .section-head .lead, .section-head .lead p, .usp__n, .usp__l, .media-badge .n, .media-badge .l, .stat-lg .label, .testi-card .who, .quote cite, .svc-card .tag, .post-cat, .post-date, .footer-col h5, .footer-about, .check-list li, .step p, .contact-detail h4, .contact-detail p, .field label, .case__fact .n, .case__fact .l, .shot figcaption, .creds li, .breadcrumb{ text-wrap: balance; } /* Can run long: keep the rag, rescue only the last line. */ p, .lead, .lead p, .svc-card p, .card p, .post-body p, .testi-card p, .quote blockquote, .footer-legal p, .risk-warning, .case__body p, .case-note p, .entry-content p, .entry-content li{ text-wrap: pretty; } /* ---------- Layout ---------- */ .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); } .container-narrow{ max-width:840px; } .section{ padding-block:clamp(60px, 8vw, 116px); } .section-sm{ padding-block:clamp(44px,6vw,76px); } .bg-cream-2{ background:var(--surface); } /* legacy name → lifted panel */ .bg-paper{ background:var(--surface); } .bg-dark{ background:var(--deep); } .text-center{ text-align:center; } .section-head{ max-width:720px; margin-bottom:clamp(38px,5vw,60px); } .section-head.center{ margin-inline:auto; text-align:center; } /* Flourish — teal rule */ .flourish{ display:flex; align-items:center; gap:0; margin:0 0 1.3em; } .flourish::before{ content:""; height:2px; width:54px; background:var(--gold); } .flourish.center{ justify-content:center; } .flourish.center::after{ content:""; height:2px; width:54px; background:var(--gold); } .flourish .dot{ display:none; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:1.05em 2.1em; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; transition:all .28s var(--ease); white-space:nowrap; } .btn-primary{ background:var(--gold); color:var(--deep); } .btn-primary:hover{ background:var(--gold-2); color:var(--deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(70,185,182,.30); } .btn-outline{ background:transparent; color:var(--cream); border-color:var(--line); } .btn-outline:hover{ border-color:var(--gold); color:var(--deep); background:var(--gold); } .btn-ghost-light{ background:transparent; color:var(--cream); border-color:rgba(234,244,244,.4); } .btn-ghost-light:hover{ background:var(--gold); color:var(--deep); border-color:var(--gold); } .btn-navy{ background:var(--gold); color:var(--deep); } .btn-navy:hover{ background:var(--gold-2); color:var(--deep); transform:translateY(-2px); } .btn-lg{ padding:1.15em 2.5em; } .btn .arrow{ transition:transform .3s var(--ease); } .btn:hover .arrow{ transform:translateX(4px); } .link-more{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.5em; white-space:nowrap; } .link-more .arrow{ transition:transform .3s var(--ease); } .link-more:hover{ color:var(--gold-2); } .link-more:hover .arrow{ transform:translateX(4px); } /* ========================================================================== Header ========================================================================== */ .topbar{ background:var(--deep); color:var(--muted); font-size:.8rem; border-bottom:1px solid var(--line-soft); } .topbar-inner{ display:flex; align-items:center; justify-content:flex-end; gap:26px; height:40px; } .topbar a{ color:var(--text); letter-spacing:.02em; } .topbar a:hover{ color:var(--gold); } .topbar .tb-phone{ color:var(--cream); font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap; } .topbar .tb-sep{ width:1px; height:16px; background:var(--line-soft); } .site-header{ position:sticky; top:0; z-index:100; background:rgba(15,14,43,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); transition:box-shadow .3s var(--ease), background .3s var(--ease); } .site-header.scrolled{ box-shadow:var(--shadow-sm); background:rgba(15,14,43,.97); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:80px; } /* * The logo must NEVER be compressed. It is a flex item, so by default it will * shrink when the nav and the CTA want more room than the header has — and * because the reset sets img{max-width:100%}, the wordmark squashes * horizontally inside it rather than the row simply overflowing. That is not a * subtle effect: at seven nav items it rendered 26px wide instead of 136px. * flex:0 0 auto stops the shrink; max-width:none stops the squash. */ .logo{ display:flex; align-items:center; flex:0 0 auto; } .logo img{ height:30px; width:auto; max-width:none; display:block; } /* * NAV SIZING IS DELIBERATELY TIGHT AT EVERY WIDTH, not just on small screens. * * .container caps at 1200px with a 56px gutter each side, so the header row * never has more than 1088px to play with however wide the monitor is. There * is therefore no "roomy desktop" case to style for — only the one width that * matters. At the previous 30px gap and .82rem nav text, seven menu items * needed 1232px and pushed the page into horizontal overflow on a 1440px * screen. These values fit seven items in 1044px with room to spare. * * Measured, not guessed: assets are rendered locally at 1440 / 1320 / 1240 / * 1221px before this is changed. If a menu item is ever added, re-measure — * the failure mode is a page that scrolls sideways, or (before the flex fix * above) a squashed logo, and neither announces itself. */ .nav{ display:flex; align-items:center; gap:18px; } .nav a{ font-size:.76rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--cream); position:relative; padding:6px 0; white-space:nowrap; } .nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold); transition:width .3s var(--ease); } .nav a:hover, .nav a.active{ color:var(--gold); } .nav a:hover::after, .nav a.active::after{ width:100%; } .header-cta{ display:flex; align-items:center; gap:18px; } .header-cta .btn{ padding:1.05em 1.4em; font-size:.72rem; } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; } .nav-toggle span{ display:block; width:26px; height:2px; background:var(--cream); margin:5px 0; transition:.3s var(--ease); } /* * The burger breakpoint is deliberately separate from the 960px layout * breakpoint below: the nav bar runs out of room before the page grids do, and * tying the two together is what forced the logo to shrink in the first place. */ @media (max-width:1060px){ .nav{ display:none; } .nav-toggle{ display:block; } .header-cta .btn{ display:none; } } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; background:var(--deep); color:var(--text); overflow:hidden; } .hero::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(100deg, rgba(15,14,43,.95) 0%, rgba(15,14,43,.80) 42%, rgba(15,14,43,.55) 100%), radial-gradient(90% 80% at 88% 12%, rgba(70,185,182,.22), transparent 60%); } .hero-photo{ position:absolute; inset:0; z-index:0; opacity:.7; background-size:cover; background-position:center; } .hero-skyline{ display:none; } .hero-inner{ position:relative; z-index:2; padding-block:clamp(78px,11vw,150px); max-width:960px; text-align:left; } .hero .eyebrow{ color:var(--gold); } .hero h1{ color:var(--cream); margin-bottom:.4em; font-size:clamp(2.4rem,5.2vw,4.1rem); max-width:16ch; } .hero h1 em{ font-style:normal; color:var(--gold); font-weight:800; } .hero .lead{ color:var(--text); max-width:640px; margin-bottom:2.2em; } .hero-actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; } /* ========================================================================== USP bar (overlapping, navy panel with teal) ========================================================================== */ .usp-wrap{ position:relative; z-index:5; margin-top:-46px; } .usp-bar{ background:var(--surface-2); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; } .usp{ padding:26px 30px; display:flex; gap:16px; align-items:center; position:relative; } .usp + .usp::before{ content:""; position:absolute; left:0; top:22%; height:56%; width:1px; background:var(--line); } .usp__icon{ width:36px; height:36px; flex:none; color:var(--gold); } .usp__icon svg{ width:100%; height:100%; } .usp__n{ font-size:1.55rem; font-weight:800; color:var(--cream); line-height:1; letter-spacing:-0.01em; } .usp__l{ font-size:.82rem; color:var(--muted); font-weight:500; margin-top:3px; } /* ========================================================================== Split (image + text) ========================================================================== */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,76px); align-items:center; } .split.reverse .split__media{ order:2; } .split__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; background:var(--surface); border:1px solid var(--line); } .split__media img{ width:100%; height:100%; object-fit:cover; } .split__media .placeholder{ position:absolute; inset:0; display:grid; place-items:center; color:var(--gold); } .split__media .placeholder svg{ width:72px; height:72px; opacity:.6; } .media-badge{ position:absolute; left:0; bottom:24px; background:var(--gold); padding:14px 24px; max-width:min(78%, 260px); } .media-badge .n{ font-size:1.5rem; font-weight:800; color:var(--deep); line-height:1; } .media-badge .l{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(15,14,43,.8); margin-top:3px; font-weight:600; line-height:1.35; } .check-list{ list-style:none; margin:1.6em 0; display:grid; gap:13px; } .check-list li{ position:relative; padding-left:34px; color:var(--text); font-size:1rem; } .check-list li::before{ content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%; background:var(--gold); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f0e2b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:11px; } /* ========================================================================== Grids + service cards (navy panels, teal titles) ========================================================================== */ .grid{ display:grid; gap:clamp(18px,2vw,26px); } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .svc-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(28px,3vw,38px); height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .svc-card::after{ content:""; position:absolute; left:0; top:0; width:0; height:3px; background:var(--gold); transition:width .4s var(--ease); } .svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--gold); } .svc-card:hover::after{ width:100%; } .svc-card .tag{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:14px; display:block; } .svc-card .svc-icon{ width:48px; height:48px; margin-bottom:20px; color:var(--gold); } .svc-card .svc-icon svg{ width:100%; height:100%; } .svc-card h3{ color:var(--gold); margin-bottom:.5em; } .svc-card p{ color:var(--text); font-size:.96rem; margin-bottom:1.4em; } .svc-card .link-more{ color:var(--cream); margin-top:auto; } .svc-card .link-more:hover{ color:var(--gold); } /* Light/misc card */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,3vw,36px); height:100%; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--gold); } .card h3{ color:var(--cream); } .card p{ color:var(--text); } .card__icon{ width:50px; height:50px; margin-bottom:20px; color:var(--gold); } .card__icon svg{ width:100%; height:100%; } /* ========================================================================== Case studies Layout is deliberately photo-first: the before/after shots run the full width of the panel, because the whole point of these blocks is that someone can see what the building looked like and what it became. Squeezing the pair into a half-width column next to the copy shrinks each shot to about 280px, at which point a shopfront is unreadable. .case__shots uses auto-fit rather than a fixed two-column grid so a project with only an "after" photograph renders as one full-bleed image instead of a lonely half with a gap beside it. ========================================================================== */ .case{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); } .case + .case{ margin-top:clamp(34px,4vw,58px); } .case__shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--line); } .shot{ margin:0; position:relative; background:var(--deep); aspect-ratio:16/9; overflow:hidden; } .shot img{ width:100%; height:100%; object-fit:cover; } .shot figcaption{ position:absolute; left:16px; top:16px; background:var(--deep); color:var(--gold); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:7px 13px; border-radius:3px; border:1px solid var(--line); } .case__body{ padding:clamp(28px,3.4vw,48px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,52px); align-items:start; } .case__body h2{ font-size:clamp(1.45rem,2.3vw,2rem); margin-bottom:.5em; } .case__body .lead{ margin-bottom:0; } .case__body p:last-child{ margin-bottom:0; } .case__body h4{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:2em 0 0; } .case__body .check-list{ margin-top:1.1em; margin-bottom:0; } .case__body .check-list li{ font-size:.95rem; } .case__facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; padding:clamp(22px,2.6vw,30px) clamp(28px,3.4vw,48px); border-top:1px solid var(--line); background:var(--deep); } .case__fact .n{ font-size:1.45rem; font-weight:800; color:var(--gold); line-height:1.1; letter-spacing:-0.01em; } .case__fact .l{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:8px; line-height:1.5; } /* Standing note under the case studies — who these projects belong to. */ .case-note{ border:1px solid var(--line-soft); border-left:3px solid var(--gold); border-radius:var(--radius); background:var(--surface); padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px); } .case-note p{ margin:0; font-size:.88rem; line-height:1.75; color:var(--muted); } /* Credential pills — awards and credentials, on the About page. */ .creds{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:1.9em 0 0; padding:0; } .creds li{ list-style:none; display:inline-flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:100px; padding:9px 18px; font-size:.82rem; font-weight:600; color:var(--cream); line-height:1.45; } .creds li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; } /* ========================================================================== Process steps ========================================================================== */ .steps{ counter-reset:step; display:grid; gap:clamp(18px,2vw,26px); } .step{ position:relative; padding:clamp(26px,3vw,34px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); } .step__num{ counter-increment:step; font-size:2rem; font-weight:800; color:var(--gold); line-height:1; display:block; margin-bottom:12px; } .step__num::before{ content:"0" counter(step); } .step h4{ margin-bottom:.4em; color:var(--cream); } .step p{ color:var(--muted); font-size:.94rem; margin:0; } /* ========================================================================== Stats band ========================================================================== */ .stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; } .stat-lg .num{ font-size:clamp(2.4rem,4.2vw,3.4rem); font-weight:800; color:var(--gold); line-height:1; letter-spacing:-0.01em; } .stat-lg .label{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:10px; } /* ========================================================================== Testimonials ========================================================================== */ .testi-band{ background:var(--surface); border-block:1px solid var(--line); } .testi-band .eyebrow{ color:var(--gold); } .testi-band h2{ color:var(--cream); } .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:clamp(38px,5vw,56px); align-items:start; } .testi-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 30px; box-shadow:var(--shadow-sm); } .testi-card:nth-child(2){ margin-top:-24px; } .testi-card p{ color:var(--text); font-style:italic; font-size:1.02rem; line-height:1.7; } .testi-card .who{ color:var(--gold); font-weight:700; font-size:.9rem; font-style:normal; margin-top:14px; } .testi-stars{ color:var(--gold); letter-spacing:2px; margin-bottom:12px; font-size:.9rem; } .quote{ max-width:840px; margin-inline:auto; text-align:center; } .quote__mark{ font-size:4rem; font-weight:800; color:var(--gold); line-height:.7; height:.5em; display:block; opacity:.7; } .quote blockquote{ font-size:clamp(1.4rem,2.6vw,1.95rem); font-weight:700; line-height:1.4; color:var(--cream); margin:0 0 .8em; } .quote cite{ font-style:normal; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; } /* ========================================================================== News / insights cards ========================================================================== */ .post-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .post-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--gold); } .post-thumb{ position:relative; aspect-ratio:16/10; background:var(--deep); display:grid; place-items:center; color:var(--gold); } .post-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .post-thumb svg{ width:52px; height:52px; opacity:.5; } .post-date{ position:absolute; top:14px; right:14px; background:var(--deep); color:var(--gold); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:7px 12px; border-radius:3px; border:1px solid var(--line); z-index:2; white-space:nowrap; } .post-body{ padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; } .post-cat{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px; } .post-body h3{ font-size:1.16rem; margin-bottom:.7em; color:var(--cream); } .post-body .link-more{ margin-top:auto; } /* ========================================================================== Page hero (interior) ========================================================================== */ .page-hero{ position:relative; background:var(--deep); color:var(--text); overflow:hidden; } .page-hero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(15,14,43,.94), rgba(15,14,43,.72) 70%, rgba(42,39,100,.5)); } .page-hero-inner{ position:relative; z-index:2; padding-block:clamp(66px,9vw,104px); max-width:780px; } .page-hero h1{ color:var(--cream); font-size:clamp(2.2rem,4.4vw,3.3rem); } .page-hero .lead{ color:var(--text); } .breadcrumb{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1.4em; } .breadcrumb a{ color:var(--muted); } .breadcrumb a:hover{ color:var(--gold); } .breadcrumb span{ color:var(--gold); } /* ========================================================================== CTA strip (teal) ========================================================================== */ .cta-strip{ background:linear-gradient(100deg, var(--gold), var(--gold-2)); } .cta-strip .container{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-block:clamp(36px,4vw,52px); } .cta-strip h2{ color:var(--deep); margin:0; max-width:24ch; font-size:clamp(1.5rem,2.6vw,2.1rem); } .cta-strip .mixed strong{ color:var(--deep); } .cta-strip .btn-navy{ background:var(--deep); color:var(--gold); } .cta-strip .btn-navy:hover{ background:#08071a; color:var(--gold-2); } .cta-band{ position:relative; overflow:hidden; } .cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .cta-inner h2{ max-width:18ch; margin:0; } /* ========================================================================== Contact ========================================================================== */ .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,68px); align-items:start; } .form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(28px,4vw,44px); box-shadow:var(--shadow-md); } .field{ margin-bottom:20px; } .field label{ display:block; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-weight:700; } .field input,.field select,.field textarea{ width:100%; padding:13px 15px; font-family:var(--font); font-size:1rem; color:var(--cream); background:var(--deep); border:1.5px solid var(--line); border-radius:var(--radius); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .field input::placeholder,.field textarea::placeholder{ color:var(--muted); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(70,185,182,.22); } .field textarea{ resize:vertical; min-height:130px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .contact-detail{ display:flex; gap:18px; margin-bottom:26px; align-items:flex-start; } .contact-detail__icon{ width:46px; height:46px; flex:none; border-radius:6px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); } .contact-detail__icon svg{ width:20px; height:20px; } .contact-detail h4{ margin:0 0 3px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; } .contact-detail p{ margin:0; font-size:1.06rem; color:var(--cream); font-weight:600; overflow-wrap:break-word; } .contact-detail a{ color:var(--cream); } .contact-detail a:hover{ color:var(--gold); } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:var(--deep); color:var(--muted); padding-block:clamp(54px,7vw,78px) 0; border-top:1px solid var(--line); } .footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line-soft); } .footer-brand .logo img{ height:30px; max-width:none; } .footer-about{ margin-top:18px; font-size:.92rem; max-width:34ch; color:var(--muted); } .footer-col h5{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; font-weight:700; } .footer-col ul{ list-style:none; display:grid; gap:11px; } .footer-col a{ color:var(--muted); font-size:.93rem; overflow-wrap:break-word; } .footer-col a:hover{ color:var(--cream); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-block:24px; font-size:.8rem; color:var(--muted); } .footer-legal{ max-width:1000px; font-size:.77rem; line-height:1.7; color:#7a82ab; padding-block:22px; border-top:1px solid var(--line-soft); } .risk-warning{ font-size:.78rem; color:#9aa3c8; margin-bottom:14px; line-height:1.7; } /* ---------- Reveal ---------- */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1100px){ /* Three service cards inside a 1200px container leave a ~290px column, which is what forces six- and seven-line paragraphs and the awkward breaks that come with them. Two up keeps the measure readable. */ .grid-3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } .stats-band{ grid-template-columns:repeat(2,1fr); gap:36px 24px; } .usp-bar{ grid-template-columns:repeat(2,1fr); } .usp:nth-child(3)::before{ display:none; } .testi-grid{ grid-template-columns:1fr; } .testi-card:nth-child(2){ margin-top:0; } .split{ grid-template-columns:1fr; } .split.reverse .split__media{ order:0; } .case__body{ grid-template-columns:1fr; } .contact-grid{ grid-template-columns:1fr; } .footer-top{ grid-template-columns:1fr 1fr; gap:34px; } .topbar-inner{ justify-content:center; } .hero h1{ max-width:20ch; } .cta-strip h2, .cta-inner h2{ max-width:100%; } } @media (max-width:600px){ body{ font-size:16px; } .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } .usp-bar{ grid-template-columns:1fr; } .usp + .usp::before{ display:none; } .usp{ border-top:1px solid var(--line); } .usp:first-child{ border-top:none; } .footer-top{ grid-template-columns:1fr; } .cta-strip .container{ flex-direction:column; align-items:flex-start; } .form-row{ grid-template-columns:1fr; } .topbar .tb-hide{ display:none; } .hero h1{ max-width:100%; } .footer-about{ max-width:100%; } .case__facts{ grid-template-columns:1fr; gap:18px; } } /* Mobile nav */ .mobile-nav{ position:fixed; inset:0 0 0 auto; width:min(84vw,360px); background:var(--deep); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .4s var(--ease); z-index:200; padding:30px 26px; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line); } .mobile-nav.open{ transform:translateX(0); } .mobile-nav a{ font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--cream); padding:14px 0; border-bottom:1px solid var(--line-soft); } .mobile-nav a:hover{ color:var(--gold); } .mobile-nav .btn{ margin-top:18px; justify-content:center; } .mobile-nav__close{ align-self:flex-end; background:none; border:none; font-size:1.8rem; color:var(--cream); cursor:pointer; margin-bottom:10px; } .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:.3s var(--ease); z-index:150; } .backdrop.open{ opacity:1; visibility:visible; } /* ========================================================================== WordPress integration ========================================================================== */ .nav-list{ display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0; } .nav-list li{ list-style:none; } .nav .current-menu-item > a, .nav .current_page_item > a{ color:var(--gold); } .nav .current-menu-item > a::after, .nav .current_page_item > a::after{ width:100%; } .mobile-nav .nav-list{ flex-direction:column; align-items:stretch; gap:0; width:100%; } .mobile-nav .nav-list a{ display:block; font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--cream); padding:14px 0; border-bottom:1px solid var(--line-soft); } .mobile-nav .nav-list a:hover{ color:var(--gold); } .footer-col ul li{ list-style:none; } .site-footer .footer-bottom a{ color:var(--muted); } .site-footer .footer-bottom a:hover{ color:var(--gold); } .post-body h3 a{ color:inherit; } .post-body h3 a:hover{ color:var(--gold); } /* Enquiry form states */ .form-alert{ padding:14px 18px; border-radius:var(--radius); margin-bottom:22px; font-size:.95rem; border:1px solid var(--line); } .form-alert--ok{ background:rgba(70,185,182,.14); color:var(--cream); border-color:var(--gold); } .form-alert--err{ background:rgba(200,80,90,.16); color:#f4d9dd; border-color:rgba(210,95,105,.55); } .gkf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Editor / generic WP content */ .entry-content{ color:var(--text); } .entry-content h2, .entry-content h3{ margin-top:1.6em; } .entry-content a{ color:var(--gold); text-decoration:underline; } .entry-content ul, .entry-content ol{ padding-left:1.3em; margin:0 0 1.2em; } .entry-content li{ margin-bottom:.5em; } .entry-content img{ border-radius:var(--radius-lg); margin:1.6em 0; } .entry-content blockquote{ border-left:3px solid var(--gold); padding-left:22px; margin:1.6em 0; color:var(--cream); font-style:italic; } .pager{ margin-top:44px; text-align:center; } .pager .page-numbers{ display:inline-block; padding:10px 15px; margin:0 3px; border:1px solid var(--line); border-radius:var(--radius); color:var(--cream); } .pager .page-numbers.current, .pager .page-numbers:hover{ background:var(--gold); color:var(--deep); border-color:var(--gold); } .screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); } /* Admin bar offset for the sticky header */ body.admin-bar .site-header{ top:32px; } @media screen and (max-width:782px){ body.admin-bar .site-header{ top:46px; } } /* Keep the PM Visual Editor's own UI unaffected by theme resets */ .pmve-editable:focus{ outline:2px solid var(--gold); outline-offset:3px; } /* -------------------------------------------------------------------------- Pure Marketing footer signature — white/mono treatment. The partial ships two modes: 'dark' (full-colour logo, for dark footers) and 'light' (mono BLACK, for light footers). Neither gives a white mark, so we render one here with a CSS filter — brightness(0) flattens the artwork to black, invert(1) flips it to white. Deliberately a filter and NOT an edit to the SVG: its elements use white to mean "show this area", so recolouring the file breaks the masking. Specificity is .site-footer + class so it beats the plugin's inline