/* ============================================================ Service Pages — Palette Override ------------------------------------------------------------ Scoped to body.single-service, so only service pages carry the new colour combination while the rest of the site stays on the azure/sky brand until each page is converted in turn. Colours are sampled, not invented: · #C62052 → #280071 SBI YONO Business hero band + Login button · #A5235A its top header band · #9234F7 / #DB3EC0 Hero reference: button gradient · #010027 · #5A0858 · #C81E5F Hero reference: background ramp To roll this palette out site-wide later, move these values into :root in base/_variables.css and delete this file. ============================================================ */ body.single-service { /* ── Brand ─────────────────────────────────────────────── */ --color-primary: #C62052; /* magenta — buttons, links */ --color-primary-dark: #A5235A; /* hover */ --color-primary-light: #FDECF2; /* magenta tint background */ --color-primary-rgb: 198, 32, 82; --color-dark: #280071; /* deep purple — headings, bands */ --color-dark-2: #3D0F8C; --color-dark-rgb: 40, 0, 113; --color-accent: #9234F7; /* violet — highlights, hovers */ --color-accent-dark: #7B23DB; --color-accent-light: #F3E9FF; --color-accent-rgb: 146, 52, 247; --gradient-brand: linear-gradient(65deg, #C62052 0%, #280071 100%); /* Brighter pair for gradient text and glows — the deep purple end of the brand gradient reads as near-black at small type sizes. */ --gradient-bright: linear-gradient(100deg, #DB3EC0 0%, #9234F7 100%); /* Hero background ramp, straight off the reference */ --gradient-hero: linear-gradient(105deg, #010027 0%, #180235 30%, #5A0858 62%, #B01A5C 88%, #E02261 100%); /* ── Neutral ───────────────────────────────────────────── */ --color-bg: #F8F5FB; /* page background (cool lilac) */ --color-bg-dark: #14002F; /* dark section background */ --color-text: #2B2340; --color-text-muted: #64607A; --color-border: #EAE3F3; --color-border-dark: #3A1263; /* ── Shadows — retinted from navy to plum ──────────────── */ --shadow-sm: 0 1px 3px rgba(30, 5, 60, .06), 0 1px 2px rgba(30, 5, 60, .04); --shadow-md: 0 4px 16px rgba(30, 5, 60, .08), 0 2px 4px rgba(30, 5, 60, .04); --shadow-lg: 0 8px 32px rgba(30, 5, 60, .10), 0 4px 8px rgba(30, 5, 60, .04); --shadow-xl: 0 20px 60px rgba(30, 5, 60, .14), 0 8px 16px rgba(30, 5, 60, .06); --shadow-blue: 0 8px 32px rgba(198, 32, 82, .28); --shadow-gold: 0 8px 24px rgba(146, 52, 247, .28); /* ── Hero accent ramp ────────────────────────────────────── Read by every accent inside the hero (see _service-hero.css and the variant sheets). Declared HERE on , never on .svc-hero — a value set on the hero element itself would shadow the family override below, leaving the accents magenta while only the background changed hue. These defaults are the original magenta/violet pair, so the orbit hero renders exactly as it always has. */ --svc-hot: #FF4D8D; /* lightest — badge mark */ --svc-a: #EF2B83; /* hot end of icon gradients */ --svc-b: #9234F7; /* cool end */ --svc-c: #DB3EC0; /* mid — CTA and mock chrome */ --svc-light: #FF7AB8; /* small marks on the dark ramp */ --svc-title-grad: linear-gradient(100deg, #FF4DA6 0%, #B478FF 100%); --svc-glow-1: rgba(224, 34, 97, 0.55); --svc-glow-2: rgba(146, 52, 247, 0.40); --svc-cta-glow: rgba(180, 40, 200, 0.35); --svc-cta-glow-hi: rgba(180, 40, 200, 0.50); /* ── Buttons ─────────────────────────────────────────────── The hover gradient and both shadows used to be hard-coded magenta down in the button rules, which left a re-themed family carrying buttons from another palette. These defaults are those exact values, so every family that does not override them renders unchanged. */ --btn-brand-hover: linear-gradient(65deg, #A5235A 0%, #1E0055 100%); --btn-brand-shadow: 0 6px 20px rgba(198, 32, 82, 0.28); --btn-brand-shadow-hi: 0 10px 28px rgba(198, 32, 82, 0.38); } /* ============================================================ Service families — accent overrides ------------------------------------------------------------ Each hero variant marks with .svc-family--{layout} (see inc/helpers/helper-service-hero.php). As a rule only the ACCENT ramp moves: --color-dark stays #280071 and the hero background still opens on the same near-black indigo, so the families read as one site rather than four microsites. 'metrics' is the standing exception — it runs on the client logo's own palette, darks included. See the note on its block. The two-class selector deliberately outweighs the single-class block above, so these win regardless of source order. 'orbit' has no block here — it IS the base palette. 'banners' has none either, on purpose: that hero is the editor's own artwork, and tinting the page to match art we have not seen would fight it. ============================================================ */ /* ── Metrics — brand blue. SEO, Google Ads, Meta Ads ──────────── Sampled straight off the client logo, not invented: · #0b61b5 primary blue — the logo's dominant colour · #0a4086 deep navy — headings, dark bands, gradient base · #29b6c1 teal — the logo's second colour, used as a spark only (dot, bar tips, glows) · #bebdbd · #adadad greys → the neutral ramp below This is the one family that also moves --color-dark: the deep purple shared by the other families reads as a bruise next to this blue, and the logo supplies its own dark end. Reverting is one block — nothing outside here knows the family is blue. */ body.single-service.svc-family--metrics { --color-primary: #0b61b5; --color-primary-dark: #0a4086; --color-primary-light: #EAF2FB; --color-primary-rgb: 11, 97, 181; --color-dark: #0a4086; --color-dark-2: #0b61b5; --color-dark-rgb: 10, 64, 134; /* The logo teal is too light for 0.7rem label text (2.5:1 on white), so the flat colour is a darkened teal while the *-rgb tints below stay on the bright logo value, where opacity does the work. */ --color-accent: #0E8A94; --color-accent-dark: #0B717A; --color-accent-light: #E6F7F9; --color-accent-rgb: 41, 182, 193; --gradient-brand: linear-gradient(65deg, #0b61b5 0%, #0a4086 100%); --gradient-bright: linear-gradient(100deg, #29b6c1 0%, #4A9BE8 100%); --gradient-hero: linear-gradient(105deg, #01142B 0%, #04223F 30%, #0a4086 62%, #0b61b5 88%, #29b6c1 100%); /* ── Neutral — the lilac ramp retinted to the logo's cool greys ── */ --color-bg: #F5F8FC; --color-bg-dark: #051B33; --color-text: #22303F; --color-text-muted: #5F6B77; --color-border: #DFE5EB; /* #bebdbd, lightened for hairlines */ --color-border-dark: #12406B; --shadow-sm: 0 1px 3px rgba(5, 27, 51, .06), 0 1px 2px rgba(5, 27, 51, .04); --shadow-md: 0 4px 16px rgba(5, 27, 51, .08), 0 2px 4px rgba(5, 27, 51, .04); --shadow-lg: 0 8px 32px rgba(5, 27, 51, .10), 0 4px 8px rgba(5, 27, 51, .04); --shadow-xl: 0 20px 60px rgba(5, 27, 51, .14), 0 8px 16px rgba(5, 27, 51, .06); --shadow-blue: 0 8px 32px rgba(11, 97, 181, .28); --shadow-gold: 0 8px 24px rgba(41, 182, 193, .28); /* Hero accent ramp — see _service-hero.css. a → b is navy → blue, so every icon and badge gradient stays blue; teal enters only through --svc-hot and --svc-c, which are the small marks (badge dot, chart dot, the tip of each ranking bar). */ --svc-hot: #29b6c1; --svc-a: #0a4086; --svc-b: #0b61b5; --svc-c: #29b6c1; --svc-light: #7FC4EC; --svc-title-grad: linear-gradient(100deg, #6FD8E0 0%, #79B4FF 100%); --svc-glow-1: rgba(11, 97, 181, 0.50); --svc-glow-2: rgba(41, 182, 193, 0.34); --svc-cta-glow: rgba(11, 97, 181, 0.38); --svc-cta-glow-hi: rgba(11, 97, 181, 0.55); --btn-brand-hover: linear-gradient(65deg, #0a4086 0%, #06294F 100%); --btn-brand-shadow: 0 6px 20px rgba(11, 97, 181, 0.28); --btn-brand-shadow-hi: 0 10px 28px rgba(11, 97, 181, 0.38); /* ── Section accents ─────────────────────────────────────── The section sheets used to hard-code the magenta pair. They read these now, each with its old value as the var() fallback, so only this family moves. */ --svc-line: linear-gradient(90deg, #29b6c1, #0b61b5); /* eyebrow underline */ --svc-icon-end: #0a4086; /* card icon gradient */ --svc-blob-1: #0b61b5; /* testimonial washes */ --svc-blob-2: #29b6c1; --svc-chip-grad: linear-gradient(135deg, #0b61b5, #0a4086); /* problem/solution */ --svc-ring-grad: linear-gradient(140deg, #0b61b5, #29b6c1); /* The problem panel keeps its crimson in every family — that red is the meaning, not the brand. Only the solution panel follows. */ --svc-solution: #0b61b5; --svc-solution-rgb: 11, 97, 181; --svc-solution-grad: linear-gradient(140deg, #2E86D6, #0a4086); /* ── Dark bands (Benefits, CTA) ─────────────────────────── Same shape as the plum ramp they replace: two corner washes over a diagonal base, opening on the near-black the hero opens on. */ --svc-band-bg: radial-gradient(120% 120% at 12% 0%, #0F5C9E 0%, transparent 55%), radial-gradient(120% 120% at 100% 100%, #1B87A4 0%, transparent 52%), linear-gradient(160deg, #072B4F 0%, #0A3D6E 55%, #0C4C86 100%); /* Glass on that band has to work harder than it did on plum: same hue as the ground, so 5% white simply vanished. */ --svc-glass: rgba(255, 255, 255, 0.12); --svc-glass-edge: rgba(255, 255, 255, 0.26); --svc-band-title: linear-gradient(100deg, #6FD8E0 0%, #79B4FF 100%); --svc-band-glow-1: rgba(41, 182, 193, 0.42); --svc-band-glow-2: rgba(11, 97, 181, 0.42); --svc-band-mark-rgb: 95, 211, 220; --svc-wash-rgb: 41, 182, 193; /* soft wash behind FAQ / Included */ /* ── Process ────────────────────────────────────────────── Its band is navy in every family; only the rail and the right-hand wash carried violet. */ --svc-rail: linear-gradient(90deg, #0b61b5 0%, #2E86D6 55%, #29b6c1 100%); --svc-band-wash: rgba(41, 182, 193, 0.20); /* The base band is near-black navy, which the old azure→orchid steps lit up. A blue family cannot: its steps are the same hue as the ground, so the band lifts to a blue navy and the top wash brightens — otherwise the whole section reads as one dark smear. */ --svc-proc-bg: linear-gradient(160deg, #0A3160 0%, #0F4E88 55%, #12609F 100%); --svc-proc-wash: rgba(46, 134, 214, 0.30); /* Carousel focus ring and arrow hover — on the dark band, so the lead blue would sink into it; the logo teal carries. */ --svc-mark-rgb: 41, 182, 193; } /* ── Canvas — amber. UI/UX Design, Branding ────────────────── */ body.single-service.svc-family--canvas { --color-primary: #D97706; --color-primary-dark: #B45309; --color-primary-light: #FEF3E2; --color-primary-rgb: 217, 119, 6; --color-accent: #F0596B; --color-accent-dark: #D93E52; --color-accent-light: #FEECEE; --color-accent-rgb: 240, 89, 107; --gradient-brand: linear-gradient(65deg, #D97706 0%, #280071 100%); --gradient-bright: linear-gradient(100deg, #FFB547 0%, #FF7A8A 100%); --gradient-hero: linear-gradient(105deg, #010027 0%, #200A2E 30%, #5E2A1E 62%, #B5651A 88%, #E89428 100%); --shadow-blue: 0 8px 32px rgba(217, 119, 6, .28); --shadow-gold: 0 8px 24px rgba(240, 89, 107, .28); --svc-hot: #FFC46B; --svc-a: #F0596B; --svc-b: #D97706; --svc-c: #FFA33D; --svc-light: #FFC98A; --svc-title-grad: linear-gradient(100deg, #FFC46B 0%, #FF8FA0 100%); --svc-glow-1: rgba(232, 148, 40, 0.50); --svc-glow-2: rgba(240, 89, 107, 0.34); --svc-cta-glow: rgba(217, 119, 6, 0.38); --svc-cta-glow-hi: rgba(217, 119, 6, 0.55); } /* ── Assurance — violet. Website Maintenance, Support ──────── */ body.single-service.svc-family--assurance { --color-primary: #6D3BEF; --color-primary-dark: #5A2BD6; --color-primary-light: #F0EAFF; --color-primary-rgb: 109, 59, 239; --color-accent: #22A0E8; --color-accent-dark: #1785C7; --color-accent-light: #E4F4FD; --color-accent-rgb: 34, 160, 232; --gradient-brand: linear-gradient(65deg, #6D3BEF 0%, #280071 100%); --gradient-bright: linear-gradient(100deg, #A78BFA 0%, #67D3F5 100%); --gradient-hero: linear-gradient(105deg, #010027 0%, #12063A 30%, #2E1A78 62%, #5B37C9 88%, #7C4DFF 100%); --shadow-blue: 0 8px 32px rgba(109, 59, 239, .28); --shadow-gold: 0 8px 24px rgba(34, 160, 232, .28); --svc-hot: #A78BFA; --svc-a: #7C4DFF; --svc-b: #6D3BEF; --svc-c: #22A0E8; --svc-light: #B9A2FF; --svc-title-grad: linear-gradient(100deg, #B79BFF 0%, #67D3F5 100%); --svc-glow-1: rgba(124, 77, 255, 0.50); --svc-glow-2: rgba(34, 160, 232, 0.34); --svc-cta-glow: rgba(109, 59, 239, 0.38); --svc-cta-glow-hi: rgba(109, 59, 239, 0.55); } /* Guard: never let a section's decorative bleed or an inner rail drag the whole page sideways on mobile. `clip` (not `hidden`) so it creates no scroll container and leaves sticky/position behaviour intact. */ .site-main.single-service { overflow-x: clip; } /* ── Buttons — same treatment as the reference site ──────────── Primary: the brand gradient, hover and shadow read from the --btn-brand-* vars so a re-themed family follows. Outline: white fill inside a gradient border (two stacked backgrounds clipped to padding-box / border-box). */ body.single-service .btn--primary { background: var(--gradient-brand); border-color: transparent; box-shadow: var(--btn-brand-shadow); } body.single-service .btn--primary:hover { background: var(--btn-brand-hover); border-color: transparent; box-shadow: var(--btn-brand-shadow-hi); } body.single-service .btn--outline { background-image: linear-gradient(#fff, #fff), var(--gradient-brand); background-origin: border-box; background-clip: padding-box, border-box; border-color: transparent; color: var(--color-dark); } body.single-service .btn--outline:hover { background-image: var(--gradient-brand), var(--gradient-brand); color: #fff; } /* Gradient text uses the brighter magenta → violet pair so highlighted words stay legible instead of fading into the near-black purple. */ body.single-service .gradient-text { background: var(--gradient-bright); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }