/* Wright Windows — Premium palette overrides * * Activated by adding `palette-premium` to the class. The palette * pushes the site toward an editorial / luxury manufacturer feel without * touching layout structure. It changes four things at once so we can A/B * with the client: * 1. Typography — Fraunces (variable serif, optical sizing) for display * 2. Colour — deeper warmer red, off-black, warm cream background * 3. Whitespace — generous section padding, lighter rules * 4. Motion — scroll-reveal + slow Ken Burns (see premium-motion.js) * * Toggle via the URL parameter `?palette=premium` (sticks for the session * via localStorage), or the floating pill bottom-left. */ body.palette-premium { /* ---------- Colour tokens ---------- */ --wp--preset--color--primary: #A11D2A; /* deeper, warmer red */ --wp--preset--color--ink: #1A1A1A; /* off-black, never #000 */ --wp--preset--color--background: #F5F1ED; /* warm cream */ --palette-premium-primary: #A11D2A; --palette-premium-primary-deep: #7A1622; --palette-premium-ink: #1A1A1A; --palette-premium-cream: #F5F1ED; --palette-premium-brass: #B8956A; /* hairline accent */ --palette-premium-warm-grey: #E8E2DA; --palette-premium-charcoal: #2A2622; /* ---------- Typography tokens ---------- */ --wp--preset--font-family--display: "Fraunces", Georgia, "Times New Roman", serif; --palette-premium-display: "Fraunces", Georgia, serif; --palette-premium-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* ---------- Spacing tokens ---------- */ --palette-premium-section-pad: clamp(4.5rem, 8vw, 8rem); } /* ---------- Page baseline ---------- */ body.palette-premium { background-color: var(--palette-premium-cream) !important; color: var(--palette-premium-ink); font-feature-settings: "ss01", "cv11"; } body.palette-premium ::selection { background: var(--palette-premium-primary); color: #FFFFFF; } /* ---------- Typography ---------- */ body.palette-premium h1, body.palette-premium h2, body.palette-premium h3, body.palette-premium .wright-hero__title, body.palette-premium .seai-hero__title, body.palette-premium .broch-hero__title, body.palette-premium .ww-hero__title, body.palette-premium .post-hero__title, body.palette-premium .wright-mega__featured-title, body.palette-premium .broch-tile__title { font-family: var(--palette-premium-display) !important; font-variation-settings: "opsz" 144, "SOFT" 30; font-weight: 500 !important; letter-spacing: -0.022em !important; line-height: 1.04 !important; } body.palette-premium h2 { font-weight: 500 !important; letter-spacing: -0.018em !important; } body.palette-premium h3 { font-weight: 600 !important; letter-spacing: -0.012em !important; } body.palette-premium .wright-hero__title, body.palette-premium .seai-hero__title, body.palette-premium .broch-hero__title, body.palette-premium .ww-hero__title { font-size: clamp(2.6rem, 5.5vw, 4.6rem) !important; } /* Italic accent inside hero titles reads as editorial */ body.palette-premium .wright-hero__title em, body.palette-premium .seai-hero__title em, body.palette-premium .ww-hero__title em { font-style: italic !important; color: var(--palette-premium-primary) !important; font-variation-settings: "opsz" 144, "SOFT" 100; } /* Eyebrows — taller, finer, more letter-spacing */ body.palette-premium .wright-eyebrow, body.palette-premium .seai-eyebrow, body.palette-premium .broch-tile__eyebrow, body.palette-premium .broch-hero__eyebrow, body.palette-premium .seai-hero__eyebrow, body.palette-premium .wright-mega__col-title, body.palette-premium .wright-mega__featured-eyebrow, body.palette-premium .wright-mega__grants-eyebrow { font-family: var(--palette-premium-body) !important; letter-spacing: 0.22em !important; font-weight: 600 !important; font-size: 0.68rem !important; text-transform: uppercase !important; } body.palette-premium .wright-mega__col-title { color: var(--palette-premium-brass) !important; } /* Body / paragraph rhythm — DO NOT force colour here, dark sections need to win */ body.palette-premium p { line-height: 1.7 !important; } body.palette-premium .post-body p, body.palette-premium .ww-section p, body.palette-premium .seai-section p, body.palette-premium .broch-section p { font-size: 1.06rem !important; } /* On the warm-cream surface only, soften body text to charcoal */ body.palette-premium > main p, body.palette-premium .ww-section--surface p, body.palette-premium .seai-section--surface p, body.palette-premium .broch-section--surface p { color: var(--palette-premium-charcoal); } /* Display numbers — feature stats and U-values like editorial */ body.palette-premium .ww-stats__num, body.palette-premium .seai-card__amount, body.palette-premium .ww-uvalue__num { font-family: var(--palette-premium-display) !important; font-variation-settings: "opsz" 144; font-weight: 400 !important; letter-spacing: -0.04em !important; color: var(--palette-premium-primary) !important; } /* ---------- Header ---------- */ body.palette-premium .wright-header__topbar { background-color: var(--palette-premium-ink) !important; } body.palette-premium .wright-header__main { background-color: var(--palette-premium-ink) !important; } body.palette-premium .wright-header__nav a:hover{ color: var(--palette-premium-brass) !important; } body.palette-premium .wright-header__topnav a.wright-header__topbar-highlight { color: var(--palette-premium-primary) !important; background: rgba(255,255,255,0.04) !important; } body.palette-premium .wright-header__topnav a.wright-header__topbar-highlight:hover { background: var(--palette-premium-primary) !important; color: #FFFFFF !important; } body.palette-premium .wright-header__cta { background-color: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.4) !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } body.palette-premium .wright-header__cta:hover { background-color: #FFFFFF !important; border-color: #FFFFFF !important; color: var(--palette-premium-ink) !important; } /* ---------- Mega menu — quieter, with brass hairlines ---------- */ body.palette-premium .wright-mega { background-color: #0F0E0D !important; } body.palette-premium .wright-mega__link { border-bottom: 1px solid rgba(184,149,106,0.10) !important; transition: color 0.2s ease, padding-left 0.2s ease, border-color 0.2s ease; } body.palette-premium .wright-mega__link:hover, body.palette-premium .wright-mega__link:focus-visible { color: var(--palette-premium-brass) !important; border-bottom-color: var(--palette-premium-brass) !important; } body.palette-premium .wright-mega__featured-overlay { background: linear-gradient(135deg, rgba(161,29,42,0.78) 0%, rgba(15,14,13,0.55) 65%, rgba(15,14,13,0) 100%) !important; } /* SEAI banner inside mega menu — restrained: black with red chip */ body.palette-premium .wright-mega__grants { background: #0F0E0D !important; border-top: 1px solid rgba(184,149,106,0.15) !important; color: #FFFFFF !important; } body.palette-premium .wright-mega__grants:hover { background: #1A1A1A !important; } body.palette-premium .wright-mega__grants-eyebrow { background: var(--palette-premium-primary) !important; color: #FFFFFF !important; } body.palette-premium .wright-mega__grants-cta { color: var(--palette-premium-brass) !important; } /* ---------- Buttons — refined hover, arrow shift ---------- */ body.palette-premium .wright-btn--primary, body.palette-premium .has-primary-background-color { background-color: var(--palette-premium-primary) !important; color: #FFFFFF !important; border-radius: 2px; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-size: 0.86rem !important; font-weight: 700 !important; padding: 1rem 1.6rem !important; transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; position: relative; } body.palette-premium .wright-btn--primary:hover { background-color: var(--palette-premium-primary-deep) !important; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(161,29,42,0.25); } body.palette-premium .wright-btn--ghost, body.palette-premium .wright-btn--secondary { background: transparent !important; border: 1px solid var(--palette-premium-ink) !important; color: var(--palette-premium-ink) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-weight: 700 !important; border-radius: 2px !important; transition: background-color 0.25s ease, color 0.25s ease; } body.palette-premium .wright-btn--ghost:hover, body.palette-premium .wright-btn--secondary:hover { background: var(--palette-premium-ink) !important; color: #FFFFFF !important; } /* ---------- Sections — generous whitespace, warm tints ---------- */ body.palette-premium .ww-section, body.palette-premium .seai-section, body.palette-premium .post-body, body.palette-premium .broch-section { padding-top: var(--palette-premium-section-pad) !important; padding-bottom: var(--palette-premium-section-pad) !important; } /* Surface sections shift from light grey to warm cream */ body.palette-premium .ww-section--surface, body.palette-premium .seai-section--surface, body.palette-premium .broch-section--surface { background-color: var(--palette-premium-warm-grey) !important; } /* Dark sections — graphite, not pure black */ body.palette-premium .ww-section--ink, body.palette-premium .seai-section--ink, body.palette-premium .broch-hero, body.palette-premium .seai-hero, body.palette-premium .ww-hero, body.palette-premium .post-hero, body.palette-premium .broch-thanks { background-color: var(--palette-premium-ink) !important; } /* SEAI grant strip — quieter, with brass hairline */ body.palette-premium .seai-stats { background-color: var(--palette-premium-ink) !important; border-top: 1px solid var(--palette-premium-brass) !important; border-bottom: 1px solid var(--palette-premium-brass) !important; } /* ---------- Bottom CTA bands ---------- */ body.palette-premium .seai-cta-band, body.palette-premium .ww-cta-band, body.palette-premium .post-cta-band { background-color: var(--palette-premium-ink) !important; border-top: 1px solid var(--palette-premium-brass) !important; } body.palette-premium .seai-cta-band .wright-btn--primary, body.palette-premium .ww-cta-band .wright-btn--primary, body.palette-premium .post-cta-band .wright-btn--primary { background: var(--palette-premium-primary) !important; color: #FFFFFF !important; } body.palette-premium .seai-cta-band .wright-btn--primary:hover, body.palette-premium .ww-cta-band .wright-btn--primary:hover, body.palette-premium .post-cta-band .wright-btn--primary:hover { background: #FFFFFF !important; color: var(--palette-premium-ink) !important; } /* ---------- Eyebrows / accent text use new red ---------- */ body.palette-premium .seai-eyebrow, body.palette-premium .wright-eyebrow, body.palette-premium .broch-tile__eyebrow, body.palette-premium .seai-route__tag, body.palette-premium .post-back a, body.palette-premium .wright-mega__featured-eyebrow { color: var(--palette-premium-primary) !important; } body.palette-premium .seai-hero__eyebrow, body.palette-premium .broch-hero__eyebrow { background: var(--palette-premium-primary) !important; color: #FFFFFF !important; letter-spacing: 0.22em !important; } body.palette-premium .seai-hero__title em { color: var(--palette-premium-brass) !important; } /* ---------- Cards — hairline brass top accent on hover ---------- */ body.palette-premium .broch-tile, body.palette-premium .ww-card, body.palette-premium .seai-card { background: #FFFFFF !important; border: 1px solid rgba(26,26,26,0.06); border-radius: 2px !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; position: relative; overflow: hidden; } body.palette-premium .broch-tile::before, body.palette-premium .ww-card::before, body.palette-premium .seai-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--palette-premium-brass); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s ease; } body.palette-premium .broch-tile:hover, body.palette-premium .ww-card:hover, body.palette-premium .seai-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(26,26,26,0.10); border-color: rgba(184,149,106,0.3); } body.palette-premium .broch-tile:hover::before, body.palette-premium .ww-card:hover::before, body.palette-premium .seai-card:hover::before { transform: scaleX(1); } /* ---------- Checklists with red ticks ---------- */ body.palette-premium .seai-checklist li::before, body.palette-premium .broch-inside li::before { background: var(--palette-premium-primary) !important; } body.palette-premium .seai-step { border-left-color: var(--palette-premium-primary) !important; } body.palette-premium .seai-faq summary::after { color: var(--palette-premium-primary) !important; } /* ---------- Pull-quotes / blockquotes — editorial ---------- */ body.palette-premium .post-body blockquote { border-left: 2px solid var(--palette-premium-brass) !important; background: transparent !important; font-family: var(--palette-premium-display) !important; font-style: italic !important; font-size: 1.45rem !important; line-height: 1.4 !important; padding: 0.5rem 0 0.5rem 1.75rem !important; color: var(--palette-premium-ink) !important; } /* ---------- Forms — quiet underline focus, not heavy box-shadow ---------- */ body.palette-premium .broch-form__input, body.palette-premium .broch-form__select { border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.3) !important; background: transparent !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; transition: border-color 0.25s ease !important; } body.palette-premium .broch-form__input:focus, body.palette-premium .broch-form__select:focus { border-color: var(--palette-premium-brass) !important; box-shadow: none !important; outline: none !important; } body.palette-premium .broch-form__submit { background: var(--palette-premium-primary) !important; border-radius: 2px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-size: 0.86rem !important; } body.palette-premium .broch-form__submit:hover:not(:disabled) { background: var(--palette-premium-primary-deep) !important; } /* ---------- Footer — graphite + brass divider ---------- */ body.palette-premium .wright-footer { background-color: #0F0E0D !important; border-top: 1px solid var(--palette-premium-brass) !important; } body.palette-premium .wright-footer h3 { font-family: var(--palette-premium-display) !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: #FFFFFF !important; } body.palette-premium .wright-footer a:hover { color: var(--palette-premium-brass) !important; } /* ---------- Mobile bottom bar ---------- */ body.palette-premium .wright-mobile-bar__call { background-color: var(--palette-premium-ink) !important; } body.palette-premium .wright-mobile-bar__quote { background-color: var(--palette-premium-primary) !important; } /* ---------- Subtle film-grain texture on dark hero sections ---------- */ body.palette-premium .broch-hero, body.palette-premium .seai-hero, body.palette-premium .ww-hero, body.palette-premium .post-hero { position: relative; } body.palette-premium .broch-hero::after, body.palette-premium .seai-hero::after, body.palette-premium .ww-hero::after, body.palette-premium .post-hero::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; opacity: 0.06; pointer-events: none; mix-blend-mode: overlay; z-index: 1; } /* Make hero content sit above the grain */ body.palette-premium .broch-hero > *, body.palette-premium .seai-hero > *, body.palette-premium .ww-hero > *, body.palette-premium .post-hero > * { position: relative; z-index: 2; } /* ---------- Scroll-reveal animation (added by premium-motion.js) ---------- */ body.palette-premium .reveal-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; } body.palette-premium .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } body.palette-premium .reveal-on-scroll.delay-1 { transition-delay: 0.08s; } body.palette-premium .reveal-on-scroll.delay-2 { transition-delay: 0.16s; } body.palette-premium .reveal-on-scroll.delay-3 { transition-delay: 0.24s; } /* Slow Ken Burns drift on hero-style background images */ @keyframes premium-ken-burns { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.10) translate(-1.5%, 1.5%); } } body.palette-premium .wright-mega__featured-media, body.palette-premium [data-ken-burns], body.palette-premium .ww-hero__media, body.palette-premium .post-hero__media { animation: premium-ken-burns 22s ease-in-out infinite alternate; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { body.palette-premium .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; } body.palette-premium .wright-mega__featured-media, body.palette-premium [data-ken-burns], body.palette-premium .ww-hero__media, body.palette-premium .post-hero__media { animation: none !important; } } /* ---------- Anti-flash for header (read before paint) ---------- */ html.palette-premium-html .wright-header__main { background-color: #1A1A1A; } html.palette-premium-html .wright-header__topbar { background-color: #1A1A1A; } html.palette-premium-html body { background-color: #F5F1ED; } /* ============================================================ * Dark-section legibility overrides * ------------------------------------------------------------ * Every dark surface in the site (hero panels, ink bands, CTA * bands, footer, mega menu) gets explicit white-family text so * the off-black body colour from the premium baseline can't * leak in and make headings/paragraphs invisible. * ============================================================ */ /* Headings + base text on dark surfaces */ body.palette-premium .broch-hero, body.palette-premium .seai-hero, body.palette-premium .ww-hero, body.palette-premium .post-hero, body.palette-premium .broch-thanks, body.palette-premium .ww-section--ink, body.palette-premium .seai-section--ink, body.palette-premium .seai-cta-band, body.palette-premium .ww-cta-band, body.palette-premium .post-cta-band, body.palette-premium .seai-stats, body.palette-premium .wright-footer, body.palette-premium .wright-mega { color: #FFFFFF; } body.palette-premium .broch-hero h1, body.palette-premium .broch-hero h2, body.palette-premium .broch-hero h3, body.palette-premium .seai-hero h1, body.palette-premium .seai-hero h2, body.palette-premium .seai-hero h3, body.palette-premium .ww-hero h1, body.palette-premium .ww-hero h2, body.palette-premium .ww-hero h3, body.palette-premium .post-hero h1, body.palette-premium .post-hero h2, body.palette-premium .post-hero h3, body.palette-premium .ww-section--ink h1, body.palette-premium .ww-section--ink h2, body.palette-premium .ww-section--ink h3, body.palette-premium .seai-section--ink h1, body.palette-premium .seai-section--ink h2, body.palette-premium .seai-section--ink h3, body.palette-premium .seai-cta-band h1, body.palette-premium .seai-cta-band h2, body.palette-premium .seai-cta-band h3, body.palette-premium .ww-cta-band h1, body.palette-premium .ww-cta-band h2, body.palette-premium .ww-cta-band h3, body.palette-premium .post-cta-band h1, body.palette-premium .post-cta-band h2, body.palette-premium .post-cta-band h3, body.palette-premium .wright-footer h1, body.palette-premium .wright-footer h2, body.palette-premium .wright-footer h3, body.palette-premium .wright-footer h4 { color: #FFFFFF !important; } body.palette-premium .broch-hero p, body.palette-premium .seai-hero p, body.palette-premium .ww-hero p, body.palette-premium .post-hero p, body.palette-premium .broch-thanks p, body.palette-premium .ww-section--ink p, body.palette-premium .seai-section--ink p, body.palette-premium .seai-cta-band p, body.palette-premium .ww-cta-band p, body.palette-premium .post-cta-band p, body.palette-premium .seai-stats p, body.palette-premium .wright-footer p, body.palette-premium .wright-footer a, body.palette-premium .wright-footer li, body.palette-premium .wright-mega p, body.palette-premium .wright-mega li { color: rgba(255,255,255,0.88) !important; } /* Hero sub-copy is slightly louder than body */ body.palette-premium .broch-hero__sub, body.palette-premium .seai-hero__sub, body.palette-premium .ww-hero__sub, body.palette-premium .post-hero__sub { color: rgba(255,255,255,0.94) !important; } /* "Inside the brochure" checklist inside the dark hero */ body.palette-premium .broch-hero .broch-inside, body.palette-premium .broch-hero .broch-inside li, body.palette-premium .broch-hero .broch-hero__meta { color: rgba(255,255,255,0.92) !important; } /* Ghost / secondary buttons sitting on dark hero need to flip to white border */ body.palette-premium .broch-hero .wright-btn--ghost, body.palette-premium .broch-hero .wright-btn--secondary, body.palette-premium .seai-hero .wright-btn--ghost, body.palette-premium .seai-hero .wright-btn--secondary, body.palette-premium .ww-hero .wright-btn--ghost, body.palette-premium .ww-hero .wright-btn--secondary, body.palette-premium .post-hero .wright-btn--ghost, body.palette-premium .post-hero .wright-btn--secondary, body.palette-premium .ww-section--ink .wright-btn--ghost, body.palette-premium .seai-section--ink .wright-btn--ghost, body.palette-premium .seai-cta-band .wright-btn--ghost, body.palette-premium .ww-cta-band .wright-btn--ghost, body.palette-premium .post-cta-band .wright-btn--ghost { border: 1px solid rgba(255,255,255,0.5) !important; color: #FFFFFF !important; } body.palette-premium .broch-hero .wright-btn--ghost:hover, body.palette-premium .seai-hero .wright-btn--ghost:hover, body.palette-premium .ww-hero .wright-btn--ghost:hover, body.palette-premium .post-hero .wright-btn--ghost:hover, body.palette-premium .ww-section--ink .wright-btn--ghost:hover, body.palette-premium .seai-section--ink .wright-btn--ghost:hover, body.palette-premium .seai-cta-band .wright-btn--ghost:hover, body.palette-premium .ww-cta-band .wright-btn--ghost:hover, body.palette-premium .post-cta-band .wright-btn--ghost:hover { background: #FFFFFF !important; color: var(--palette-premium-ink) !important; } /* Brochure form lives inside a dark hero — labels, inputs and legal text * all need to be white-on-dark to stay legible. */ body.palette-premium .broch-hero .broch-form__title, body.palette-premium .broch-hero .broch-form__intro, body.palette-premium .broch-hero .broch-form__label, body.palette-premium .broch-hero .broch-form__legal, body.palette-premium .broch-hero .broch-form__legal a { color: rgba(255,255,255,0.92) !important; } body.palette-premium .broch-hero .broch-form__input, body.palette-premium .broch-hero .broch-form__select { color: #FFFFFF !important; background: transparent !important; } body.palette-premium .broch-hero .broch-form__input::placeholder { color: rgba(255,255,255,0.45) !important; } body.palette-premium .broch-hero .broch-form__select option { color: var(--palette-premium-ink); /* dropdown overlay uses OS colours */ background: #FFFFFF; } /* Brochure form OUTSIDE of dark hero (rare, but possible) — keep dark text */ body.palette-premium main > .broch-form .broch-form__input, body.palette-premium main > .broch-form .broch-form__select { color: var(--palette-premium-ink) !important; border-bottom-color: rgba(26,26,26,0.25) !important; } /* SEAI grant strip — the numbers stay primary red, surrounding text white */ body.palette-premium .seai-stats h2, body.palette-premium .seai-stats h3, body.palette-premium .seai-stats p, body.palette-premium .seai-stats span { color: #FFFFFF !important; } /* Pull-quote / blockquote: was set to ink; on dark sections force white */ body.palette-premium .ww-section--ink .post-body blockquote, body.palette-premium .post-hero .post-body blockquote { color: #FFFFFF !important; } /* Mega menu small text — keep grey-tone hierarchy readable */ body.palette-premium .wright-mega__link small { color: rgba(255,255,255,0.65) !important; } /* Reviews accent strip — brass in the premium palette (was Wright red). * The Trustindex widget itself is greyscaled by main.css; we just retint * the hairline accent above it. */ body.palette-premium .wright-reviews__widget::before { background: var(--palette-premium-brass) !important; width: 40px; } /* Slightly warmer card surface in the cream palette to avoid the harsh * pure-white-on-cream contrast. */ body.palette-premium .wright-reviews__widget .ti-widget .ti-review-item { background: #FFFFFF !important; border-color: rgba(184,149,106,0.15) !important; box-shadow: 0 8px 24px rgba(26,26,26,0.06) !important; } /* Trustindex stars — Premium palette deeper red #A11D2A */ body.palette-premium .wright-reviews__widget img.ti-star, body.palette-premium .wright-reviews__widget .ti-widget img.ti-star, body.palette-premium .wright-reviews__widget .ti-widget .ti-stars img { filter: brightness(0) saturate(100%) invert(12%) sepia(88%) saturate(3800%) hue-rotate(340deg) brightness(90%) contrast(95%) !important; -webkit-filter: brightness(0) saturate(100%) invert(12%) sepia(88%) saturate(3800%) hue-rotate(340deg) brightness(90%) contrast(95%) !important; }