/* * SavvyRest Affiliate Portal — standalone brand skin. * * The AffiliateWP Affiliate Portal takes over the page entirely when an active * affiliate visits /affiliate-area/. Rather than fighting the takeover, we * commit to it: theme the Portal SPA as a SavvyRest-branded workspace. * * Scope strategy: * - `.portal` is the unique root the Portal addon emits at * wp-content/plugins/affiliatewp-affiliate-portal/includes/template.php:37. * We scope our overrides under `.portal` for the SPA, which doesn't leak * because that class only appears on the Portal page. * - `body.savvyrest-affiliate-area` is the body class our mu-plugin adds on * the LOGGED-OUT /affiliate-area/ page (where WP renders the normal page * template and body_class() fires). That scope is used for the login card. * * Design doc: docs/plans/2026-05-21-affiliate-area-brand-integration-design.md */ /* ============================================================ * Brand tokens (apply at :root so they're available everywhere * we cascade into, including inside .portal). * ============================================================ */ :root { --sr-plum: #9160A2; --sr-plum-light: #A173B2; --sr-plum-deep: #7A4E8C; --sr-plum-wash: #ECE3F0; --sr-plum-tint: #F7F1FA; --sr-ink: #1A111D; --sr-ink-soft: #2A1D2F; --sr-muted: #7C7B8C; --sr-muted-soft: #B0AEBA; --sr-surface: #FBFAFC; --sr-surface-warm:#FAF6F6; --sr-rule: #E8E5EE; --sr-rule-soft: #F1EEF4; --sr-green: #9fc28e; --sr-green-deep: #6F9F5E; } /* ============================================================ * Portal SPA — full-screen standalone treatment * ============================================================ */ /* Brand typography across the entire Portal tree. * The body itself uses Tailwind's font-sans (= Inter); we override on body * AND on every .portal descendant so the cascade is comprehensive. */ body.antialiased.font-sans, .portal, .portal * { font-family: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif !important; } /* Body / page background — soft branded wash instead of gray-100 */ body.antialiased.font-sans { background: radial-gradient(ellipse 1200px 600px at 20% 0%, var(--sr-plum-tint) 0%, transparent 60%), var(--sr-surface); min-height: 100vh; } /* Portal root: full-screen, transparent (background painted on ). * By default we keep Tailwind's flex-row layout so the page works even if * our shell JS fails. When the shell installs the top bar wrapper, it adds * the .savvyrest-portal-shelled class which flips the root to flex-column * with the top bar above the sidebar+content row. */ .portal.h-screen { height: 100vh !important; background: transparent !important; } .portal.h-screen.savvyrest-portal-shelled { display: flex !important; flex-direction: column !important; } /* Body wrapper that the shell JS creates around the existing sidebar+main row */ .savvyrest-portal-body { display: flex; flex: 1 1 auto; min-height: 0; } /* ============================================================ * Branded top bar (injected by affiliate-portal-shell.js) * ============================================================ */ .savvyrest-portal-topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 1.5rem; background: #FFFFFF; border-bottom: 1px solid var(--sr-rule); box-shadow: 0 1px 0 rgba(26, 17, 29, 0.02); flex-shrink: 0; } .savvyrest-portal-topbar__brand { display: flex; align-items: center; gap: 0.75rem; } .savvyrest-portal-topbar__logo { height: 32px; width: auto; } .savvyrest-portal-topbar__label { font-size: 0.875rem; font-weight: 500; color: var(--sr-muted); letter-spacing: 0.04em; text-transform: uppercase; border-left: 1px solid var(--sr-rule); padding-left: 0.875rem; margin-left: 0.25rem; } .savvyrest-portal-topbar__right { display: flex; align-items: center; gap: 1.25rem; } .savvyrest-portal-topbar__greeting { font-size: 0.875rem; color: var(--sr-muted); } .savvyrest-portal-topbar__greeting strong { color: var(--sr-ink); font-weight: 600; } .savvyrest-portal-topbar__back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; color: var(--sr-plum); text-decoration: none; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--sr-plum); background: transparent; transition: background 0.15s ease, color 0.15s ease; } .savvyrest-portal-topbar__back:hover { background: var(--sr-plum); color: #FFFFFF; } .savvyrest-portal-topbar__back svg { width: 14px; height: 14px; } /* ============================================================ * Sidebar — light, my-account-style, refined * ============================================================ */ .portal [class*="bg-gray-800"], .portal aside, .portal nav.bg-gray-800, .portal [class*="md:flex-shrink-0"] [class*="bg-gray"] { background: #FFFFFF !important; border-right: 1px solid var(--sr-rule) !important; } /* Sidebar nav row text */ .portal a[class*="text-gray-300"], .portal a[class*="text-gray-400"], .portal span[class*="text-white"] { color: var(--sr-ink) !important; } /* Sidebar nav rows — refine spacing + interaction surface */ .portal nav a, .portal aside a { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; border-radius: 0 !important; transition: background 0.12s ease, color 0.12s ease; } /* Active rail item — plum left border, soft plum wash */ .portal a[class*="bg-gray-900"], .portal a.bg-gray-900, .portal [aria-current="page"] { background: var(--sr-plum-wash) !important; color: var(--sr-plum-deep) !important; border-left: 4px solid var(--sr-plum) !important; padding-left: calc(0.5rem - 4px) !important; font-weight: 600; } /* Sidebar hover */ .portal nav a:hover, .portal aside a:hover { background: var(--sr-rule-soft) !important; color: var(--sr-plum-deep) !important; } /* Sidebar icons */ .portal nav svg, .portal aside svg { color: var(--sr-muted) !important; } .portal nav a[aria-current="page"] svg, .portal aside a[aria-current="page"] svg, .portal nav a:hover svg, .portal aside a:hover svg { color: var(--sr-plum) !important; } /* Sidebar logo area at top — hide it on desktop because our top bar already * carries the SavvyRest mark. On mobile (≤768px) the desktop sidebar itself * is hidden by Tailwind so this rule is moot there. The Portal renders the * logo as the first child of .flex.flex-col.w-64 with classes * .items-center.h-16.flex-shrink-0.flex.px-4.bg-gray-800. */ .portal .flex.flex-col.w-64 > .items-center.h-16.flex-shrink-0.flex.px-4 { display: none !important; } /* The "Back to site" link block (sibling immediately after the logo) — give * it a bit more top padding now that it leads the sidebar. */ .portal .flex.flex-col.w-64 > .bg-gray-800.pl-2 { padding-top: 0.75rem !important; padding-bottom: 0.5rem !important; } /* ============================================================ * Portal's own inner top bar (above main content) — merge with * the page surface so it doesn't read as a second header. Keep * the user-menu button visible for Settings / Sign out access. * ============================================================ */ .savvyrest-portal-body .relative.z-10.flex-shrink-0.flex.h-16.bg-white { background: transparent !important; border-bottom: none !important; box-shadow: none !important; height: 56px !important; padding-right: 1rem; } .savvyrest-portal-body .relative.z-10.flex-shrink-0.flex.h-16 button[aria-label="User menu"] { background: transparent !important; color: var(--sr-muted) !important; border: 1px solid var(--sr-rule) !important; border-radius: 999px !important; padding: 0.35rem !important; transition: border-color 0.15s ease, color 0.15s ease; } .savvyrest-portal-body .relative.z-10.flex-shrink-0.flex.h-16 button[aria-label="User menu"]:hover { color: var(--sr-plum) !important; border-color: var(--sr-plum) !important; } /* ============================================================ * Main content area background — match the soft warm wash * ============================================================ */ .portal #portal-content-wrap, .portal main { background: transparent !important; } #affiliate-portal-content { padding-top: 1.5rem; padding-bottom: 3rem; } /* ============================================================ * Headings — restrained, ink, generous breathing * ============================================================ */ .portal h1, .portal h2, .portal h3 { color: var(--sr-ink) !important; font-weight: 600 !important; letter-spacing: -0.005em; } .portal h1 { font-size: 1.875rem !important; margin-bottom: 1.5rem !important; } /* Section headings ("Last 30 days", "All-time", "Recent referral activity") */ .portal [class*="font-medium"] { color: var(--sr-ink) !important; } .portal h3[class*="text-lg"], .portal .text-lg { font-size: 0.875rem !important; font-weight: 600 !important; color: var(--sr-muted) !important; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.75rem !important; } /* ============================================================ * Stat cards — white, soft border, no shadow halo * ============================================================ */ .portal [class*="bg-white"], .portal [class*="rounded-lg"] { background: #FFFFFF !important; border: 1px solid var(--sr-rule) !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(26, 17, 29, 0.02) !important; } /* Big stat number — tabular figures for visual rhythm */ .portal [class*="text-3xl"], .portal [class*="text-2xl"] { color: var(--sr-ink) !important; font-weight: 600 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* Stat label */ .portal [class*="text-gray-500"], .portal [class*="text-gray-600"] { color: var(--sr-muted) !important; } .portal dt[class*="text-sm"], .portal [class*="text-sm"][class*="text-gray"] { font-size: 0.8125rem !important; letter-spacing: 0.01em; } /* The "View all" footer of stat cards — subtle tinted bottom */ .portal [class*="bg-gray-50"] { background: var(--sr-rule-soft) !important; border-top: 1px solid var(--sr-rule) !important; } /* ============================================================ * Links — plum everywhere * ============================================================ */ .portal a, .portal a[class*="text-indigo"], .portal a[class*="text-blue"] { color: var(--sr-plum) !important; } .portal a:hover { color: var(--sr-plum-deep) !important; } /* ============================================================ * Buttons — pill, plum, white text * ============================================================ */ .portal button:not([aria-label="Close sidebar"]):not([aria-label="Open sidebar"]):not(.portal-no-skin), .portal a[role="button"], .portal input[type="submit"], .portal [class*="bg-indigo"], .portal [class*="bg-blue"] { background: var(--sr-plum) !important; color: #FFFFFF !important; border: 1px solid var(--sr-plum) !important; border-radius: 999px !important; padding: 0.5rem 1.25rem !important; font-weight: 500 !important; transition: background 0.15s ease, border-color 0.15s ease; } .portal button:hover, .portal a[role="button"]:hover { background: var(--sr-plum-deep) !important; border-color: var(--sr-plum-deep) !important; } /* Secondary / outline buttons — light bg, plum border + text */ .portal button[class*="bg-white"], .portal button[class*="border-gray"] { background: #FFFFFF !important; color: var(--sr-plum) !important; border: 1px solid var(--sr-plum) !important; } /* Icon-only buttons (open/close sidebar, user menu) — keep them subtle */ .portal button[aria-label="Open sidebar"], .portal button[aria-label="Close sidebar"] { background: transparent !important; color: var(--sr-muted) !important; border: none !important; padding: 0.5rem !important; } /* ============================================================ * Tables — clean, branded headers, tabular numbers * ============================================================ */ .portal table { background: #FFFFFF; border: 1px solid var(--sr-rule); border-radius: 12px; overflow: hidden; width: 100%; } .portal table thead, .portal table thead tr, .portal table thead th { background: var(--sr-rule-soft) !important; color: var(--sr-muted) !important; font-weight: 600 !important; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; } .portal table tbody tr { border-top: 1px solid var(--sr-rule); } .portal table tbody td { color: var(--sr-ink) !important; font-variant-numeric: tabular-nums; } /* Empty table state — when tbody is empty, render a friendly message. * The Portal renders empty tables as a header row only; we use a CSS trick * to surface a branded empty-state message after the table. The JS shell * also adds .savvyrest-empty-state markers for richer styling. */ .savvyrest-empty-state { padding: 2.5rem 1.5rem; text-align: center; background: #FFFFFF; border: 1px dashed var(--sr-rule); border-radius: 12px; color: var(--sr-muted); } .savvyrest-empty-state__icon { width: 44px; height: 44px; margin: 0 auto 0.75rem; display: flex; align-items: center; justify-content: center; background: var(--sr-plum-tint); color: var(--sr-plum); border-radius: 999px; } .savvyrest-empty-state__icon svg { width: 22px; height: 22px; } .savvyrest-empty-state__title { color: var(--sr-ink) !important; font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem; } .savvyrest-empty-state__body { font-size: 0.875rem; margin: 0; line-height: 1.5; } /* ============================================================ * Pagination — plum active state * ============================================================ */ .affwp-pagination a, .affwp-pagination span { color: var(--sr-muted) !important; border: 1px solid var(--sr-rule) !important; border-radius: 6px !important; } .affwp-pagination .current, .affwp-pagination [aria-current] { background: var(--sr-plum) !important; color: #FFFFFF !important; border-color: var(--sr-plum) !important; } /* ============================================================ * Logged-out login card (separate path — body class scope works * because the page renders through regular WP, not Portal SPA) * ============================================================ */ body.savvyrest-affiliate-area .savvyrest-affiliate-login-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 900px; margin: 3rem auto; background: #FFFFFF; border: 1px solid var(--sr-rule); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(26, 17, 29, 0.06); } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__visual { background: linear-gradient(135deg, var(--sr-plum) 0%, var(--sr-plum-light) 100%); color: #FFFFFF; padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__visual h2 { color: #FFFFFF !important; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 600; font-size: 1.75rem; margin: 0 0 0.75rem; } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__visual p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; margin: 0; line-height: 1.5; } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__form { padding: 3rem 2.5rem; } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__form .affwp-login-form input[type="text"], body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__form .affwp-login-form input[type="password"] { width: 100%; padding: 0.6rem 0.85rem; border: 1px solid var(--sr-rule); border-radius: 8px; font-family: 'Cabinet Grotesk', sans-serif; } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__form .affwp-login-form input:focus { border-color: var(--sr-plum); outline: 2px solid rgba(145, 96, 162, 0.15); } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__form .affwp-login-form .button, body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__form .affwp-login-form input[type="submit"] { background: var(--sr-plum); color: #FFFFFF; border: 1px solid var(--sr-plum); border-radius: 999px; padding: 0.6rem 1.5rem; font-weight: 500; cursor: pointer; } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__form .affwp-login-form .button:hover { background: var(--sr-plum-deep); } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__form .affwp-lost-password a { color: var(--sr-plum); } /* ============================================================ * Mobile (≤ 768px) * ============================================================ */ @media (max-width: 768px) { /* Login card stacks 1-col */ body.savvyrest-affiliate-area .savvyrest-affiliate-login-card { grid-template-columns: 1fr; } body.savvyrest-affiliate-area .savvyrest-affiliate-login-card__visual { padding: 2rem; } /* Portal SPA: stack the top bar's right group, hide the desktop sidebar, collapse the main column to full width */ .savvyrest-portal-topbar { padding: 0 1rem; } .savvyrest-portal-topbar__label, .savvyrest-portal-topbar__greeting { display: none; } .portal > .hidden.md\:flex.md\:flex-shrink-0, .portal aside.hidden.md\:flex, .savvyrest-portal-body > .hidden.md\:flex.md\:flex-shrink-0 { display: none !important; } .portal > .flex.flex-col.w-0, .savvyrest-portal-body > .flex.flex-col.w-0 { width: 100% !important; max-width: 100% !important; } /* Stat cards stack 1-col */ .portal [class*="grid-cols-1"][class*="md:grid-cols-2"], .portal [class*="md:grid-cols-3"], .portal [class*="md:grid-cols-4"] { grid-template-columns: 1fr !important; } /* Tables — horizontal scroll inside container */ .portal table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; max-width: 100% !important; } .portal .inline-block.min-w-full, .portal [class*="inline-block"][class*="min-w-full"] { display: block !important; max-width: 100% !important; overflow-x: auto !important; } /* Tighter padding on mobile */ .portal #portal-content-wrap { padding-left: 1rem !important; padding-right: 1rem !important; } } /* ============================================================ * Tier B — SavvyRest moments * Welcome hero panel, notification bell, hero money cards, * empty-state CTA, icon chips, card hover, plum hairline. * ============================================================ */ /* ---------- Welcome hero panel ---------- */ .savvyrest-welcome-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; background: linear-gradient(135deg, #FFFFFF 0%, var(--sr-plum-tint) 100%); border: 1px solid var(--sr-rule); border-radius: 16px !important; padding: 1.75rem 2rem; margin-bottom: 2rem; box-shadow: 0 4px 16px rgba(26, 17, 29, 0.04); } .savvyrest-welcome-hero__copy { min-width: 0; } .savvyrest-welcome-hero__eyebrow { font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sr-plum) !important; margin: 0 0 0.4rem !important; } .portal .savvyrest-welcome-hero h1.savvyrest-welcome-hero__title, .savvyrest-welcome-hero__title { font-size: 1.875rem !important; font-weight: 600 !important; color: var(--sr-ink) !important; margin: 0 0 0.4rem !important; letter-spacing: -0.015em; } .savvyrest-welcome-hero__tagline { font-size: 1rem !important; color: var(--sr-muted) !important; margin: 0 !important; line-height: 1.5; } .savvyrest-welcome-hero__link { min-width: 0; } .savvyrest-welcome-hero__link-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sr-muted); margin-bottom: 0.55rem; } .savvyrest-welcome-hero__link-row { display: flex; gap: 0.5rem; } .savvyrest-welcome-hero__link-input { flex: 1 1 auto; min-width: 0; padding: 0.65rem 0.85rem !important; border: 1px solid var(--sr-rule) !important; border-radius: 999px !important; background: #FFFFFF !important; font-size: 0.875rem !important; color: var(--sr-ink) !important; font-family: 'Cabinet Grotesk', sans-serif !important; } .savvyrest-welcome-hero__link-input:focus { border-color: var(--sr-plum) !important; outline: 2px solid rgba(145, 96, 162, 0.15) !important; } .savvyrest-welcome-hero__copy-btn { flex-shrink: 0; background: var(--sr-plum) !important; color: #FFFFFF !important; border: 1px solid var(--sr-plum) !important; border-radius: 999px !important; padding: 0.65rem 1.5rem !important; font-size: 0.875rem !important; font-weight: 500 !important; font-family: 'Cabinet Grotesk', sans-serif !important; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; box-shadow: none !important; } .savvyrest-welcome-hero__copy-btn:hover { background: var(--sr-plum-deep) !important; border-color: var(--sr-plum-deep) !important; } .savvyrest-welcome-hero__copy-btn:active { transform: scale(0.97); } .savvyrest-welcome-hero__copy-btn.is-copied { background: var(--sr-green-deep) !important; border-color: var(--sr-green-deep) !important; } @media (max-width: 768px) { .savvyrest-welcome-hero { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.25rem; } } /* ---------- Notification bell in top bar ---------- */ .savvyrest-portal-topbar__bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--sr-muted) !important; border: 1px solid var(--sr-rule); border-radius: 999px; background: transparent; transition: color 0.15s ease, border-color 0.15s ease; text-decoration: none; flex-shrink: 0; } .savvyrest-portal-topbar__bell:hover { color: var(--sr-plum) !important; border-color: var(--sr-plum); } .savvyrest-portal-topbar__bell svg { width: 16px; height: 16px; } .savvyrest-portal-topbar__bell-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--sr-plum) !important; color: #FFFFFF !important; font-size: 0.625rem; font-weight: 600; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; font-variant-numeric: tabular-nums; line-height: 1; } /* ---------- Top bar plum hairline (restraint — just a hint) ---------- */ .savvyrest-portal-topbar { position: relative; } .savvyrest-portal-topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(to right, transparent 0%, var(--sr-plum-light) 30%, var(--sr-plum) 50%, var(--sr-plum-light) 70%, transparent 100%); opacity: 0.4; pointer-events: none; } /* ---------- Stat-card icon chips ---------- */ /* The Portal renders icons as

. * Turn that wrapping div into a plum-tint circular chip, and recolor the svg * to plum. */ .portal [class*="bg-white"] > div > [class*="flex-shrink-0"][class*="text-gray-400"] { background: var(--sr-plum-tint) !important; color: var(--sr-plum) !important; border-radius: 999px; padding: 0.5rem; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .portal [class*="bg-white"] > div > [class*="flex-shrink-0"][class*="text-gray-400"] > svg { color: var(--sr-plum) !important; width: 20px; height: 20px; } /* ---------- Card hover lift (subtle) ---------- */ .portal [class*="bg-white"][class*="rounded-lg"] { transition: transform 0.15s ease, box-shadow 0.15s ease; } .portal [class*="bg-white"][class*="rounded-lg"]:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26, 17, 29, 0.06) !important; } /* ---------- Hero money cards (Unpaid Earnings + Total Earnings) ---------- */ /* JS adds .savvyrest-money-card to cards whose big number starts with "$". * Give them a soft plum-tint gradient + a deeper, larger plum number. */ .portal .savvyrest-money-card { background: linear-gradient(135deg, #FFFFFF 0%, var(--sr-plum-tint) 100%) !important; } .portal .savvyrest-money-card [class*="text-3xl"], .portal .savvyrest-money-card [class*="text-2xl"] { font-size: 2rem !important; color: var(--sr-plum-deep) !important; } /* ---------- Empty-state CTA (Copy my affiliate link) ---------- */ /* Specificity here intentionally outranks `.portal a` (0,1,1) and the * generic `.portal button` chain so the white text reads correctly. */ .portal a.savvyrest-empty-state__cta, .savvyrest-empty-state__cta { display: inline-block; margin-top: 1rem; background: var(--sr-plum) !important; color: #FFFFFF !important; padding: 0.55rem 1.4rem !important; border-radius: 999px !important; font-size: 0.875rem; font-weight: 500; text-decoration: none; border: 1px solid var(--sr-plum) !important; font-family: 'Cabinet Grotesk', sans-serif !important; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .portal a.savvyrest-empty-state__cta:hover, .savvyrest-empty-state__cta:hover { background: var(--sr-plum-deep) !important; border-color: var(--sr-plum-deep) !important; color: #FFFFFF !important; } .portal a.savvyrest-empty-state__cta.is-copied, .savvyrest-empty-state__cta.is-copied { background: var(--sr-green-deep) !important; border-color: var(--sr-green-deep) !important; color: #FFFFFF !important; }