/* =========================================================================== TÉMA ZELENÁ — pro sekce o investování a pronájmu --------------------------------------------------------------------------- Přikládá se za hub.css a přepisuje jeho tokeny: PRAVIDLO, KTERÉ TÉMA DRŽÍ POHROMADĚ Světlá zelená je vždycky plocha, nikdy písmo. Barevně se mluví jen přes --hub-accent (#2F5D3A, kontrast 7,9:1 na papíře). Na pistáciové ploše leží tmavý inkoust (kontrast 13,8:1). Bledě zelená typografie, na kterou tahle paleta svádí, tím nejde vyrobit. =========================================================================== */ .hub-page, .hub-theme-zelena { /* Základ */ --hub-ink: #0D1411; --hub-ink-rgb: 13,20,17; --hub-paper: #F8FBF9; --hub-muted: #566B60; /* Zelená ve dvou rolích: signální linka a velká plocha. Odstín je záměrně smaragdový (149°), ne žlutozelený (83°) — v téhle nice jezdí konkurence na žlutozelené a zaměnitelná značka je horší než žádná. Konstrukce zůstává, posunul se jen tón. */ --hub-accent: #1F6B4A; --hub-accent-rgb: 31,107,74; --hub-accent-surface: #BEE3D0; --hub-accent-deep: #14503A; --hub-accent-light: #E8F4EE; /* Plochy a linky */ --hub-surface-1: #F1F7F3; --hub-surface-2: #E8F4EE; --hub-surface-3: #FFFFFF; --hub-surface-4: #EDF5F0; --hub-line: #D3E3DA; /* Stavy — potvrzení musí být odlišitelné od zelené značky, proto posun do tyrkysu (171° proti 154°) a dost tmavý na text (4,9:1). */ --hub-ok: #0E7C6B; --hub-ok-rgb: 14,124,107; --hub-ok-soft: #E4F2EF; /* Třetí datová řada v grafech — břidlicová modř, aby se nepletla ani se zelenou, ani s hlínou (odstíny 216 / 154 / 24). */ --hub-alt: #4A5D7A; --hub-alt-rgb: 74,93,122; /* Riziko: pálená hlína, ne červená. Na vzdělávacím webu, kde je varování na každé stránce, červená po třetím výskytu přestane fungovat. */ --hub-risk: #8A4B2A; --hub-risk-rgb: 138,75,42; --hub-risk-deep: #6E3A20; --hub-risk-soft: #FAF1EA; } /* Tlačítka webu jsou globálně jantarová — uvnitř zelené sekce ne. Dvě třídy v selektoru schválně: styles.css má `body.is-light .cta-button--outline`, což by jednotřídní pravidlo přebilo. */ .hub-page.is-light .cta-button, .hub-page .cta-button { background-color: var(--hub-ink); color: var(--hub-paper); border-radius: 4px; box-shadow: none; } .hub-page.is-light .cta-button:hover, .hub-page .cta-button:hover { background-color: var(--hub-accent-deep); color: #fff; } .hub-page.is-light .cta-button--outline, .hub-page .cta-button--outline { background-color: transparent; color: var(--hub-accent); border: 1px solid var(--hub-accent); } .hub-page.is-light .cta-button--outline:hover, .hub-page .cta-button--outline:hover { background-color: var(--hub-accent-surface); color: var(--hub-accent-deep); border-color: var(--hub-accent-surface); } /* Hero je v tomhle tématu plocha, ne přechod. */ .hub-page .hub-hero { background: var(--hub-accent-surface); border-bottom: 1px solid var(--hub-line); } .hub-page .hub-hero__eyebrow, .hub-page .hub-hero__lead { color: var(--hub-accent-deep); } .hub-page .hub-hero__sub { color: var(--hub-accent-deep); } /* Zbytky jantarové palety v hub.css, které nejdou přes token. V původním tématu byl akcent zlatý, takže se pár míst napsalo natvrdo — uvnitř zelené sekce vypadají jako cizí těleso. Nepřepisujeme kvůli tomu hub.css: ta pravidla dál slouží výcviku, kde jsou správně. */ /* Odznak nástroje: zlatý text na inkoustu měl kontrast 12:1, zelený má 2,1:1 a je nečitelný. Světlá mincovní na inkoustu dává 11,4:1. */ .hub-page .vy-widget__badge, .hub-page .hub-widget__badge { color: var(--hub-accent-surface); } /* Krémové plochy → zelený nádech téhož jasu. */ .hub-page .vy-result--realistic, .hub-page .hub-result--realistic, .hub-page .vy-verdict--warn, .hub-page .hub-verdict--warn { background: var(--hub-surface-1); } .hub-page .vy-result--warn, .hub-page .hub-result--warn { background: linear-gradient(160deg, var(--hub-surface-1) 0%, var(--hub-surface-4) 100%); } .hub-page .vy-result--warn .vy-result__score span, .hub-page .hub-result--warn .hub-result__score span { color: var(--hub-accent-deep); } .hub-page .vy-result--fail, .hub-page .hub-result--fail, .hub-page .vy-calc__block--loss, .hub-page .hub-calc__block--loss { background: linear-gradient(160deg, var(--hub-risk-soft) 0%, #F3E4D8 100%); } /* Zelený stav místo materiálové zelené z výchozí palety. */ .hub-page .vy-verdict--ok, .hub-page .hub-verdict--ok { background: var(--hub-ok-soft); } .hub-page .vy-verdict--ok strong, .hub-page .hub-verdict--ok strong { color: var(--hub-ok) !important; } .hub-page .vy-result--pass, .hub-page .hub-result--pass { background: linear-gradient(160deg, var(--hub-ok-soft) 0%, #D9EBE7 100%); } /* Hover na odesílacím tlačítku brány a na tlačítku nápovědy svítil zlatě. */ .hub-page .vy-gate__form button[type="submit"]:hover:not(:disabled), .hub-page .hub-gate__form button[type="submit"]:hover:not(:disabled), .hub-page .vy-help__btn:hover, .hub-page .hub-help__btn:hover { background: var(--hub-accent-deep); color: #fff; } /* Chybová hláška brány je na světlé ploše — lososová na bílé je nečitelná. */ .hub-page .vy-gate__msg--error, .hub-page .hub-gate__msg--error { background: var(--hub-risk-soft); border-color: rgba(var(--hub-risk-rgb), 0.4); color: var(--hub-risk-deep); } /* Pole formulářů v kitu počítají s tmavou plochou: bílé písmo na šesti procentech bílé. Ve výcviku to sedí, protože brána tam stojí na tmavé kartě. Tady stojí i na světlých blocích (.hub-action, .hub-offer), kde je napsané jméno neviditelné — kontrast 1:1. Výchozí je proto v téhle sekci světlá varianta a tmavá se vrací jen uvnitř .vy-gate, což je ta tmavá karta ke stažení PDF. */ .hub-page .vy-gate__form input[type="text"], .hub-page .vy-gate__form input[type="email"], .hub-page .vy-gate__form input[type="url"], .hub-page .vy-gate__form textarea, .hub-page .hub-gate__form input[type="text"], .hub-page .hub-gate__form input[type="email"], .hub-page .hub-gate__form input[type="url"], .hub-page .hub-gate__form textarea { background: #fff; border-color: var(--hub-line); color: var(--hub-ink); } .hub-page .vy-gate__form input::placeholder, .hub-page .vy-gate__form textarea::placeholder, .hub-page .hub-gate__form input::placeholder, .hub-page .hub-gate__form textarea::placeholder { color: var(--hub-muted); } .hub-page .vy-gate__form input:focus, .hub-page .vy-gate__form textarea:focus, .hub-page .hub-gate__form input:focus, .hub-page .hub-gate__form textarea:focus { border-color: var(--hub-accent); background: #fff; } /* Tmavá karta ke stažení — tam platí původní varianta z kitu. */ .hub-page .vy-gate .vy-gate__form input[type="text"], .hub-page .vy-gate .vy-gate__form input[type="email"], .hub-page .vy-gate .vy-gate__form input[type="url"], .hub-page .vy-gate .vy-gate__form textarea { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #fff; } .hub-page .vy-gate .vy-gate__form input::placeholder, .hub-page .vy-gate .vy-gate__form textarea::placeholder { color: #8a8a8a; } .hub-page .vy-gate .vy-gate__form input:focus, .hub-page .vy-gate .vy-gate__form textarea:focus { background: rgba(255,255,255,0.1); } /* Podtržítko nadpisu sekce kreslí styles.css jantarovým přechodem. */ .hub-page.is-light .pripad-section__header h2::after, .hub-page .pripad-section__header h2::after { background: linear-gradient(90deg, var(--hub-accent) 0%, rgba(var(--hub-accent-rgb), 0) 90%); } /* Plovoucí nabídka je globální prvek webu a nosí jantarovou. Uvnitř zelené sekce by křičela — přebarvuje se, chování zůstává. */ .hub-page .popup-cta__image { border-color: var(--hub-accent); } .hub-page .popup-cta__btn { background: var(--hub-ink); color: var(--hub-paper); } .hub-page .popup-cta__btn:hover { background: var(--hub-accent-deep); }