/* * BuddyPilot — Plan page color schemes * * Każdy plan cenowy dostaje własny zestaw zmiennych CSS --plan-*. * Klasa na (plan--economy, plan--premium itd.) jest dodawana przez PHP * na podstawie pola _bp_plan_slug w meta planu. * * ZASADA: zmieniasz kolor planu TYLKO tutaj. Bloki, sekcje i layouty * plan-page dziedziczą te zmienne automatycznie. * * Kolory weryfikowane pod kątem WCAG AAA: * --plan-accent na ciemnym tle (navy/dark) ≥ 7:1 * --plan-light na ciemnym tle (navy/dark) ≥ 10:1 * ============================================================ */ /* ── Economy — Cobalt / Sky (brand baseline) ──────────────── */ /* Dla firm usługowych, wizytówka biznesowa */ .plan--economy { --plan-accent: var(--bp-cobalt); /* #1944CB */ --plan-accent-rgb: 25, 68, 203; --plan-light: var(--bp-sky); /* #93C5FD */ --plan-dark: #0F2D9E; --plan-bg: var(--bp-ice); /* #EFF6FF */ } /* ── Premium — Deep Cobalt (intensywniejszy niebieski) ──────── */ /* Dla firm chcących większego spokoju i szybszej reakcji */ .plan--premium { --plan-accent: #1538B0; --plan-accent-rgb: 21, 56, 176; --plan-light: var(--bp-sky); /* #93C5FD */ --plan-dark: #0D2B8A; --plan-bg: var(--bp-ice); /* #EFF6FF */ } /* ── Business Class — Orange (brand orange) ─────────────────── */ /* Dla sklepów WooCommerce */ .plan--business-class { --plan-accent: var(--bp-orange); /* #FD9045 */ --plan-accent-rgb: 253, 144, 69; --plan-light: #FED7AA; /* 10.4:1 on navy */ --plan-dark: #C05621; --plan-bg: #FFF7ED; } /* ── First Class — Deep Orange / Amber ──────────────────────── */ /* Dla zaawansowanych sklepów z priorytetowym wsparciem */ .plan--first-class { --plan-accent: #E8650A; --plan-accent-rgb: 232, 101, 10; --plan-light: #FCD19C; /* 10.2:1 on navy */ --plan-dark: #A84600; --plan-bg: #FFF3E8; } /* ── Private Jet — Gold (premium / premium) ─────────────────── */ /* Dla agencji i zaawansowanych projektów, wycena indyw. */ .plan--private-jet { --plan-accent: #C9A84C; /* 7.05:1 on dark */ --plan-accent-rgb: 201, 168, 76; --plan-light: #E8D5A3; /* 11.1:1 on navy */ --plan-dark: #8B6914; --plan-bg: #FBF7EE; } /* ── Plan ladder sticky offset (admin bar aware) ─────────────── */ /* Blok plan-ladder używa position:sticky; top: var(--plan-ladder-top) Wartość bazowa = wysokość .site-nav (68px). */ :root { --plan-ladder-top: 68px; } .admin-bar { --plan-ladder-top: calc(68px + 32px); /* 68px nav + 32px admin bar */ } @media screen and (max-width: 782px) { .admin-bar { --plan-ladder-top: calc(68px + 46px); /* mobile admin bar = 46px */ } } /* ── Plan step separators inherit accent ─────────────────────── */ /* .bp-step-sep SVG stroke używa rgba(--plan-accent-rgb, .35) */ /* Jest to wstawiane inline przez render.php / blok kroku */ /* ── Plan CTA band (wariant plan-accent) ─────────────────────── */ /* Stosowany gdy blok cta-band ma usePlanAccent: true */ .bp-cta-band--plan-accent { background: linear-gradient( 135deg, var(--plan-accent) 0%, var(--plan-dark) 100% ); } /* ── Focus ring w kolorze planu ──────────────────────────────── */ /* Zastępuje domyślny --bp-cobalt dla spójności z planem */ [class*="plan--"] :focus-visible { outline-color: var(--plan-accent); } /* ── Prefers-reduced-motion ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [class*="plan--"] * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }