/* RS component styles — canonical single source. * * Deploy target: wp-content/plugins/rs-core/assets/rs-components.css, * enqueued by rs-core/includes/theme-chrome.php via wp_enqueue_style(). * This file is the edit source of truth — the deployed copy on the live * server is a plain copy of this file, not maintained independently. * * VISUAL DIRECTION UPDATE (TASK-20260914-9f3915ff, RS_BRAND_MASTER_v1_APPROVED): * recolored to the approved 7-color system, retypographed to Manrope, grid * widened to the brandbook's 1200-1320px range, body copy sized to the * brandbook's 17-19px desktop / 1.55-1.7 line-height range, section spacing * widened to the 80-120px desktop range (48-72px mobile via the breakpoint * below). Component structure/selectors/markup contract unchanged -- this * is a values-only restyle so no template/PHP call site needs to change. * :root tokens and header/footer rules stay sourced from theme-chrome.php * only, unchanged practice from before this update. */ .rs-home{max-width:1320px;margin:0 auto;padding:0 24px;} .rs-section{padding:96px 0;} @media (max-width:768px){.rs-section{padding:56px 0;}} .rs-section-narrow{max-width:72ch;margin:0 auto;} .rs-section-narrow.center{text-align:center;} .rs-hero{ background: linear-gradient(180deg,#FFFFFF 0%,var(--rs-bg-alt,#E9EEF1) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0,120 C280,200 460,40 760,90 C1040,136 1200,40 1440,80 L1440,220 L0,220 Z' fill='%230D5B63' fill-opacity='0.05'/%3E%3Cpath d='M0,160 C300,90 520,190 820,130 C1100,76 1260,170 1440,140 L1440,220 L0,220 Z' fill='%2321A383' fill-opacity='0.05'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:bottom center; background-size:cover; padding:80px 24px 56px;text-align:center; } .rs-hero h1{font-family:'Manrope',sans-serif;font-weight:800;font-size:44px;line-height:1.18;margin:0 0 16px;max-width:22ch;margin-left:auto;margin-right:auto;} @media (max-width:768px){.rs-hero h1{font-size:30px;line-height:1.22;}} .rs-hero p{font-size:19px;line-height:1.6;color:var(--rs-text);max-width:65ch;margin:0 auto 28px;} @media (max-width:768px){.rs-hero p{font-size:17px;}} .rs-search{display:flex;gap:10px;max-width:560px;margin:0 auto;flex-wrap:wrap;justify-content:center;} .rs-search select{flex:1;min-width:220px;padding:14px 16px;border:1px solid #D2DAE0;border-radius:8px;font-size:16px;background:#fff;color:var(--rs-navy);} .rs-btn{display:inline-block;padding:14px 24px;background:var(--rs-teal);color:#fff;border-radius:8px;font-weight:600;text-decoration:none;font-size:16px;border:none;cursor:pointer;} /* Primary button uses Deep Teal, not Emerald -- white-on-Emerald measures 3.17:1 (FAILS WCAG AA normal-text, 4.5:1 minimum), verified via scripts/rs_wcag_contrast_check.py. White-on-Deep-Teal measures 7.8:1. Emerald/Mint are used elsewhere as decorative fills/dark-text chip backgrounds where they do pass (5.4:1 / 9.5:1), never as a light-text surface. Hover darkens to Midnight Navy (17.2:1) for a clear, always-safe state change -- replaces the old --rs-turquoise hover, which had never been contrast-checked and also failed (same bug class as the historical nav-hover/badge fixes, TASK-20260828-9f7d34e5). */ .rs-btn:hover{background:var(--rs-navy);} .rs-btn-outline{background:transparent;color:var(--rs-teal);border:1px solid var(--rs-teal);} .rs-btn-outline:hover{background:var(--rs-teal);color:#fff;} .rs-eyebrow{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rs-teal);margin:0 0 8px;} .rs-h2{font-family:'Manrope',sans-serif;font-weight:700;font-size:30px;margin:0 0 12px;} .rs-lead{color:#3D4E56;font-size:17px;line-height:1.6;margin:0 0 32px;max-width:65ch;} .rs-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;} .rs-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;} .rs-grid-6{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;} .rs-card{background:#fff;border:1px solid #E3E8EB;border-radius:12px;padding:24px;} .rs-card h3{font-family:'Manrope',sans-serif;font-weight:700;font-size:17px;margin:0 0 8px;} .rs-card p{font-size:14px;color:#3D4E56;margin:0 0 12px;} .rs-card a{color:var(--rs-teal);font-weight:600;font-size:14px;text-decoration:none;} .rs-topic-tile{background:#fff;border:1px solid #E3E8EB;border-radius:12px;padding:20px;text-align:center;text-decoration:none;display:block;} .rs-topic-tile strong{display:block;color:var(--rs-navy);font-size:15px;} .rs-topic-tile:hover{border-color:var(--rs-emerald);} .rs-alt{background:var(--rs-bg-alt,#E9EEF1);} .rs-navy{background:var(--rs-navy);color:#E7EDEF;} .rs-navy .rs-h2{color:#fff;} .rs-navy .rs-lead{color:#B9C7CC;} .rs-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;} /* Emerald used here deliberately as a large/bold decorative numeral (22px bold): white/Emerald and Emerald/white text pairs both fail AA normal-text (3.17:1), but 22px bold clears the AA *large*-text threshold (>=3:1) -- the one place in this file Emerald is used as a foreground color, verified via scripts/rs_wcag_contrast_check.py. Never reuse this color+size combination at a smaller/non-bold size. */ .rs-step-num{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:var(--rs-emerald);margin:0 0 8px;} /* WCAG fix (TASK-20260828-9f7d34e5): was color:var(--rs-amber) (#D97706) on #FDF0E3 = 2.84:1, FAILS AA at any size (RS-UX-IMPLEMENTATION-SPEC-20260827.md §11.3/§16 item 1). #92400E (same amber family, darker shade) on the same background measures 6.33:1, PASSES AA normal text -- verified via scripts/rs_wcag_contrast_check.py. Fixed as a direct value (not a new --rs-amber-* token) since .rs-badge is confirmed the only live text usage of --rs-amber; the --rs-amber token itself is left unchanged for its other documented uses (large-text/icon/non-text, still governed by SSOT). */ .rs-badge{display:inline-block;background:#FDF0E3;color:#92400E;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;margin-bottom:8px;} .rs-badge-soon{display:inline-block;background:var(--rs-bg-alt,#E9EEF1);color:#4C5C63;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;margin-bottom:8px;} .rs-faq details{border-bottom:1px solid #E3E8EB;padding:16px 0;} .rs-faq summary{font-weight:600;cursor:pointer;font-size:16px;color:var(--rs-navy);} .rs-faq p{color:#4C5C63;margin:10px 0 0;font-size:15px;line-height:1.6;} /* Deep Teal, not Emerald -- same white-text-on-Emerald AA-fail reasoning as .rs-btn above; this banner's body text also needs to stay readable on it. */ .rs-cta-banner{background:var(--rs-teal);color:#fff;border-radius:16px;padding:40px;text-align:center;} .rs-cta-banner .rs-h2{color:#fff;} .rs-cta-banner p{color:#D9E9E7;} /* New with the RS_KNOWLEDGE pattern (2026-08-20 canary) — not present on the live homepage, marked as new in RS-DESIGN-SYSTEM-SSOT-20260820.md SS4.2 */ .rs-answer{background:#fff;border:1px solid #E3E8EB;border-left:4px solid var(--rs-teal);border-radius:0 12px 12px 0;padding:20px 24px;margin:0 0 32px;font-size:17px;line-height:1.6;} .rs-legal-note{font-size:13px;color:#4C5C63;background:var(--rs-bg-alt,#E9EEF1);border-radius:8px;padding:12px 16px;margin-top:24px;} article p{font-size:17px;line-height:1.65;max-width:78ch;} @media (max-width:768px){article p{font-size:16px;line-height:1.6;}} /* New with RS-UX-IMPLEMENTATION-SPEC-20260827.md — Breadcrumbs §4.4 (NEW), Form/Result §9 (NEW, MONEY template), Legal-source §11.1 / Trust §11.2 (NEW, ARTICLE template). Added TASK-20260828-9f7d34e5 (Production UI Contract freeze). Reuses existing tokens/visual language, no new brand colors. */ .rs-breadcrumbs{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:16px auto 0;padding:0 24px;max-width:1320px;font-size:14px;color:var(--rs-lead-text,#4C5C63);} .rs-breadcrumbs li{display:flex;align-items:center;gap:4px;} .rs-breadcrumbs li:not(:last-child)::after{content:"/";margin-left:4px;color:#C4CDD3;} .rs-breadcrumbs a{color:var(--rs-lead-text,#4C5C63);text-decoration:none;} .rs-breadcrumbs a:hover{color:var(--rs-teal);} .rs-breadcrumbs li[aria-current="page"]{color:var(--rs-text);font-weight:500;} @media (max-width:599px){ .rs-breadcrumbs li:not(:first-child):not(:nth-last-child(2)):not(:last-child){display:none;} } .rs-form{background:#fff;border:1px solid #E3E8EB;border-radius:12px;padding:24px;} .rs-form label{display:block;font-weight:600;font-size:14px;margin:0 0 6px;color:var(--rs-navy);} .rs-form .rs-field{margin-bottom:20px;} .rs-form input,.rs-form select{width:100%;padding:12px 14px;border:1px solid #D2DAE0;border-radius:8px;font-size:16px;background:#fff;} .rs-form [aria-invalid="true"]{border-color:var(--rs-coral);} .rs-form .rs-error-message{color:var(--rs-coral);font-size:13px;margin-top:6px;font-weight:600;} .rs-form[aria-busy="true"] button[type="submit"]{opacity:.6;cursor:not-allowed;} .rs-form .rs-privacy-note{font-size:13px;color:#4C5C63;margin-top:16px;} .rs-result{background:var(--rs-bg-alt,#E9EEF1);border:1px solid #E3E8EB;border-radius:12px;padding:24px;margin-top:24px;} .rs-result .rs-verdict{font-size:22px;font-weight:700;color:var(--rs-navy);display:flex;align-items:center;gap:10px;margin:0 0 12px;} .rs-result .rs-trace{font-size:14px;color:#4C5C63;background:#fff;border-radius:8px;padding:16px;margin-top:12px;} .rs-legal-source{border-left:3px solid var(--rs-teal);padding:10px 16px;margin:16px 0;font-size:13px;color:#4C5C63;} .rs-legal-source a{color:var(--rs-teal);font-weight:600;} .rs-trust{background:#fff;border:1px solid #E3E8EB;border-radius:12px;padding:20px 24px;margin:32px 0;font-size:15px;color:var(--rs-text);} .rs-trust p:last-child{font-size:13px;color:#4C5C63;margin-bottom:0;} /* Gold accent -- brandbook §6 "oszczędnie (1-3%)": exactly one live usage, a hairline top rule on the CTA banner marking it as a featured/priority module. Never used as a text or large fill color anywhere in this file. */ .rs-cta-banner{border-top:3px solid var(--rs-gold);} /* §9 responsive/mobile nav — the real JS-driven collapse (skip-link, nav-toggle button, Escape/focus handling, aria-current) now lives directly in theme-chrome.php's own inline