/* Wright Windows — Classic palette overrides * * Activated by adding `palette-classic` to the class. The palette * mimics the existing wrightwindows.ie site: * - Primary CTA: brighter pure red #D81E2F (was #C8102E) * - Brand dark: deep navy / indigo #1E2670 (was #0A0A0A ink) * * Used only for live A/B demos with Ted & Pat. Toggle on/off via the URL * parameter `?palette=classic` (sticks for the session via localStorage), * or click the floating "Classic colours" / "New colours" pill at the * bottom-left of every page. */ body.palette-classic { /* CSS custom property overrides — apply to anything that uses var(--…) */ --wp--preset--color--primary: #D81E2F; --wp--preset--color--ink: #1E2670; --palette-classic-primary: #D81E2F; --palette-classic-navy: #1E2670; --palette-classic-navy-light: #3C4FB5; /* lighter blue from logo tagline */ --palette-classic-navy-hover: #141A55; --palette-classic-red-hover: #B01524; } /* Nav link hover + mega menu eyebrows pick up the lighter blue accent */ body.palette-classic .wright-header__nav a:hover { color: #3C4FB5 !important; } body.palette-classic .wright-mega__col-title { color: #B3BBE8 !important; } body.palette-classic .wright-footer a:hover { color: #B3BBE8 !important; } /* ---- Header (top bar + main nav) ---- */ body.palette-classic .wright-header__topbar { background-color: #D81E2F !important; } body.palette-classic .wright-header__main { background-color: #1E2670 !important; } body.palette-classic .wright-header__topnav a.wright-header__topbar-highlight { color: #D81E2F !important; } body.palette-classic .wright-header__topnav a.wright-header__topbar-highlight:hover { background: #1E2670 !important; color: #FFFFFF !important; } body.palette-classic .wright-header__cta { background-color: #D81E2F !important; color: #FFFFFF !important; } body.palette-classic .wright-header__cta:hover { background-color: #B01524 !important; } body.palette-classic .wright-header__mobile-cta { background-color: #D81E2F !important; } /* ---- Mega menu (dark panel uses ink, swap to navy) ---- */ body.palette-classic .wright-mega { background-color: #1E2670 !important; } body.palette-classic .wright-mega__col-title { color: #FFB3B6 !important; } body.palette-classic .wright-mega__link:hover, body.palette-classic .wright-mega__link:focus-visible{ color: #FFFFFF !important; } body.palette-classic .wright-mega__featured-overlay { background: linear-gradient(135deg, rgba(43,46,131,0.85) 0%, rgba(15,16,46,0.5) 60%, rgba(15,16,46,0) 100%) !important; } /* ---- Mobile bottom bar ---- */ body.palette-classic .wright-mobile-bar__call { background-color: #1E2670 !important; } body.palette-classic .wright-mobile-bar__quote { background-color: #D81E2F !important; } /* ---- Footer ---- */ body.palette-classic .wright-footer { background-color: #1E2670 !important; } body.palette-classic .wright-footer h3 { color: #FFFFFF !important; } body.palette-classic .wright-footer a:hover { color: #FF6970 !important; } /* ---- Generic buttons (theme buttons + wp:button blocks with primary bg) ---- */ body.palette-classic .wright-btn--primary, body.palette-classic .has-primary-background-color { background-color: #D81E2F !important; color: #FFFFFF !important; } body.palette-classic .wright-btn--primary:hover { background-color: #B01524 !important; } /* ---- Hero / dark backgrounds (broch/SEAI/why-wright all use #0A0A0A inline) ---- */ body.palette-classic .broch-hero, body.palette-classic .seai-hero, body.palette-classic .ww-hero, body.palette-classic .post-hero, body.palette-classic .ww-section--ink, body.palette-classic .seai-section--ink, body.palette-classic .broch-thanks { background-color: #1E2670 !important; } /* SEAI grant strip uses primary red as a solid band */ body.palette-classic .seai-stats { background-color: #D81E2F !important; } /* CTA bands at the bottom of templates (red bg with white text) */ body.palette-classic .seai-cta-band, body.palette-classic .ww-cta-band, body.palette-classic .post-cta-band { background-color: #D81E2F !important; } body.palette-classic .seai-cta-band .wright-btn--primary, body.palette-classic .ww-cta-band .wright-btn--primary, body.palette-classic .post-cta-band .wright-btn--primary { background: #FFFFFF !important; color: #D81E2F !important; } /* ---- Eyebrows and accent text ---- */ body.palette-classic .seai-eyebrow, body.palette-classic .wright-eyebrow, body.palette-classic .broch-tile__eyebrow, body.palette-classic .seai-route__tag, body.palette-classic .seai-card__amount, body.palette-classic .post-back a, body.palette-classic .ww-stats__num { color: #D81E2F !important; } /* SEAI hero pill */ body.palette-classic .seai-hero__eyebrow { background: #D81E2F !important; } body.palette-classic .broch-hero__eyebrow { background: #D81E2F !important; } /* SEAI hero title accent */ body.palette-classic .seai-hero__title em { color: #FFB3B6 !important; } /* ---- Card / step elements with red borders/checks ---- */ body.palette-classic .seai-checklist li::before, body.palette-classic .broch-inside li::before, body.palette-classic .post-body blockquote { background: #D81E2F !important; } body.palette-classic .post-body blockquote { border-color: #D81E2F !important; background: transparent !important; } body.palette-classic .seai-step { border-left-color: #D81E2F !important; } body.palette-classic .seai-faq summary::after { color: #D81E2F !important; } /* ---- Forms ---- */ body.palette-classic .broch-form__input:focus, body.palette-classic .broch-form__select:focus { border-color: #D81E2F !important; } body.palette-classic .broch-form__submit { background: #D81E2F !important; } body.palette-classic .broch-form__submit:hover:not(:disabled) { background: #1E2670 !important; } /* ---- Trustindex stars — Classic palette red #D81E2F ---- * Stars are , recoloured via filter chain (see main.css for explanation). */ body.palette-classic .wright-reviews__widget img.ti-star, body.palette-classic .wright-reviews__widget .ti-widget img.ti-star, body.palette-classic .wright-reviews__widget .ti-widget .ti-stars img { filter: brightness(0) saturate(100%) invert(15%) sepia(98%) saturate(5000%) hue-rotate(348deg) brightness(105%) contrast(95%) !important; -webkit-filter: brightness(0) saturate(100%) invert(15%) sepia(98%) saturate(5000%) hue-rotate(348deg) brightness(105%) contrast(95%) !important; } /* ---- The palette toggle pill itself (always visible) ---- */ .wright-palette-toggle { position: fixed; bottom: 18px; left: 18px; z-index: 9999; background: rgba(255, 255, 255, 0.96); color: #0A0A0A; border: 1px solid rgba(0,0,0,0.08); padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } .wright-palette-toggle:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,0.22); } .wright-palette-toggle__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--primary, #C8102E); margin-right: 0.55rem; vertical-align: -1px; border: 1px solid rgba(0,0,0,0.1); } @media (max-width: 760px) { .wright-palette-toggle { bottom: 80px; /* clear of mobile sticky bar */ font-size: 0.72rem; padding: 0.4rem 0.75rem; } } /* ---- Three-way palette switch (Default / Classic / Premium) ---- */ .wright-palette-toggle--multi { padding: 4px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; display: inline-flex; align-items: center; position: fixed; bottom: 18px; left: 18px; z-index: 9999; } .wright-palette-toggle__btn { appearance: none; background: transparent; border: 0; color: #4A4A4A; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .wright-palette-toggle__btn:hover { color: #0A0A0A; } .wright-palette-toggle__btn.is-active { background: #0A0A0A; color: #FFFFFF; } .wright-palette-toggle__btn[data-palette="classic"].is-active { background: #1E2670; } .wright-palette-toggle__btn[data-palette="premium"].is-active { background: #A11D2A; } @media (max-width: 760px) { .wright-palette-toggle--multi { bottom: 80px; padding: 3px; } .wright-palette-toggle__btn { font-size: 0.68rem; padding: 0.35rem 0.65rem; } }