/* ============================================================================ COINEE.io — sdilene komponenty noveho vizualu (redesign 2026-09, etapa 1a) ---------------------------------------------------------------------------- Stavi JEN na tokenech z design-tokens.css (--cn-*). Vsechno je pod body.cn, aby se nic nepralo se starym styles.css. Pouzivaji: index.html (landing), login / register / forgot-password / reset-password. Etapa 1b sem prida komponenty aplikace. Pravidla z predani: jedna hlavni akce na krok, klidne oddelovace, viditelny focus, skutecna tlacitka a popsana pole, na dotyku cile ~44 px. ============================================================================ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.cn { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--cn-bg); color: var(--cn-text); font: 400 var(--cn-fs-body)/var(--cn-lh) var(--cn-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } /* Reset prvku ma pres :where() nulovou vahu tridy — kazda trida komponenty (.lp-*, .au-*, .cn-*) ho tak spolehlive prebije. */ :where(.cn) *, :where(.cn) *::before, :where(.cn) *::after { box-sizing: border-box; } :where(.cn) h1, :where(.cn) h2, :where(.cn) h3, :where(.cn) p, :where(.cn) ul, :where(.cn) ol, :where(.cn) dl, :where(.cn) dd, :where(.cn) figure { margin: 0; } :where(.cn) ul, :where(.cn) ol { padding: 0; list-style: none; } :where(.cn) img { max-width: 100%; height: auto; display: block; } :where(.cn) a { color: inherit; } :where(.cn) button, :where(.cn) input, :where(.cn) select, :where(.cn) textarea { font: inherit; color: inherit; } .cn [hidden] { display: none !important; } :where(.cn) main { flex: 1 0 auto; } /* focus: vzdy viditelny, stejny vsude */ .cn a:focus-visible, .cn button:focus-visible, .cn input:focus-visible, .cn summary:focus-visible, .cn [tabindex]:focus-visible { outline: var(--cn-focus-ring); outline-offset: var(--cn-focus-offset); border-radius: var(--cn-r-sm); } .cn-wrap { width: 100%; max-width: calc(var(--cn-maxw) + 2 * var(--cn-gutter)); margin: 0 auto; padding-left: var(--cn-gutter); padding-right: var(--cn-gutter); } .cn-muted { color: var(--cn-muted); } .cn-num { font-variant-numeric: tabular-nums; } .cn-eyebrow { font-size: var(--cn-fs-min); font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; color: var(--cn-gold); } /* preskoceni na obsah (klavesnice) */ .cn-skip { position: absolute; left: var(--cn-s-4); top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--cn-r-md); background: var(--cn-gold); color: var(--cn-on-gold) !important; font-weight: 600; text-decoration: none; } .cn-skip:focus { top: var(--cn-s-3); } /* ---- logo = soucasny asset webu (dve tecky + COINEE.io, Oswald) ---- */ .cn-logo { display: inline-flex; align-items: center; gap: 0; font-family: var(--cn-font-logo); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; line-height: 1; color: var(--cn-text); text-decoration: none; white-space: nowrap; } .cn-logo-dots { color: var(--cn-gold); font-size: 0.7em; margin-right: 4px; line-height: 1; } /* ---- horni lista ---- */ .cn-nav { border-bottom: 1px solid var(--cn-line); } .cn-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--cn-s-5); padding-top: 18px; padding-bottom: 18px; } .cn-nav-links { display: flex; align-items: center; gap: var(--cn-s-6); font-size: var(--cn-fs-small); color: var(--cn-muted); } .cn-nav-links a { text-decoration: none; padding: 6px 0; } .cn-nav-links a:hover { color: var(--cn-text); } .cn-nav-right { display: flex; align-items: center; gap: var(--cn-s-3); } /* prepinac jazyka — tridu .lang-btn a .active pouziva i18n.js */ /* BEZ overflow:hidden na rodici — orezaval zlaty focus obrys tlacitek (designova kontrola 18. 9.). Zaobleni si drzi tlacitka sama a focus se kresli UVNITR tlacitka (zaporny offset), takze ho neorizne rodic ani neprekryje soused. */ .cn .lang-switcher { display: inline-flex; border: 1px solid var(--cn-line); border-radius: var(--cn-r-md); } .cn .lang-btn { min-width: 36px; min-height: 30px; padding: 4px 8px; border: 0; background: none; color: var(--cn-muted); font-size: var(--cn-fs-min); font-weight: 600; letter-spacing: .6px; cursor: pointer; } .cn .lang-btn:first-child { border-radius: calc(var(--cn-r-md) - 1px) 0 0 calc(var(--cn-r-md) - 1px); } .cn .lang-btn:last-child { border-radius: 0 calc(var(--cn-r-md) - 1px) calc(var(--cn-r-md) - 1px) 0; } .cn .lang-btn:hover { color: var(--cn-text); } .cn .lang-btn.active { background: var(--cn-raised); color: var(--cn-text); } .cn .lang-btn:focus-visible { outline: var(--cn-focus-ring); outline-offset: -2px; } .cn .lang-btn:first-child:focus-visible { border-radius: calc(var(--cn-r-md) - 1px) 0 0 calc(var(--cn-r-md) - 1px); } .cn .lang-btn:last-child:focus-visible { border-radius: 0 calc(var(--cn-r-md) - 1px) calc(var(--cn-r-md) - 1px) 0; } /* ---- tlacitka ---- */ .cn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cn-s-2); min-height: var(--cn-control-h); padding: 9px 15px; border: 1px solid var(--cn-line); border-radius: var(--cn-r-md); background: var(--cn-panel); color: var(--cn-text); font-weight: 600; font-size: 13px; line-height: 1.3; text-decoration: none; text-align: center; cursor: pointer; transition: filter .15s ease, background-color .15s ease, border-color .15s ease; } .cn-btn:hover { filter: brightness(1.12); } .cn-btn--primary { background: var(--cn-gold); border-color: var(--cn-gold); color: var(--cn-on-gold); } .cn-btn--primary:hover { background: var(--cn-gold-strong); border-color: var(--cn-gold-strong); filter: none; } .cn-btn--quiet { background: none; border-color: transparent; color: var(--cn-muted); } .cn-btn--quiet:hover { color: var(--cn-text); filter: none; } .cn-btn--block { display: flex; width: 100%; } .cn-btn--lg { min-height: 46px; padding: 12px 20px; font-size: var(--cn-fs-body); } .cn-btn:disabled, .cn-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; } .cn-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .cn-link { color: var(--cn-gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .cn-link:hover { color: var(--cn-gold-strong); } .cn-link--quiet { color: var(--cn-muted); } .cn-link--quiet:hover { color: var(--cn-text); } /* ---- formulare ---- */ .cn-field { display: block; margin-bottom: var(--cn-s-4); } .cn-label { display: block; margin-bottom: 7px; font-size: var(--cn-fs-small); color: var(--cn-muted); } .cn-input { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--cn-field-line); border-radius: 6px; background: var(--cn-panel); color: var(--cn-text); font-size: var(--cn-fs-body); line-height: 1.4; } /* placeholder = token sekundarniho textu: #9AA7B7 na poli #11161D = 7,4 : 1 (puvodni #6F7C8C melo 4,27 : 1, pod 4,5 : 1) */ .cn-input::placeholder { color: var(--cn-muted); opacity: 1; } .cn-input:hover { border-color: var(--cn-field-line-hover); } .cn-input:focus-visible { outline: var(--cn-focus-ring); outline-offset: 1px; border-color: var(--cn-gold); border-radius: 6px; } .cn-input.error, .cn-input[aria-invalid="true"] { border-color: var(--cn-red); } .cn-input-wrap { position: relative; } .cn-input-wrap .cn-input { padding-right: 48px; } .cn-pass-toggle { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: none; color: var(--cn-muted); cursor: pointer; } .cn-pass-toggle:hover { color: var(--cn-text); } .cn-field-error { display: none; margin-top: 6px; font-size: var(--cn-fs-small); color: var(--cn-red); } .cn-field-error.show { display: block; } .cn-field-hint { margin-top: 6px; font-size: var(--cn-fs-small); color: var(--cn-muted); } /* ---- stavove zpravy: barva + text + ikona slovem, nikdy jen barva ---- */ .cn-status { padding: 14px 16px; border-radius: var(--cn-r-md); background: var(--cn-raised); border-left: 3px solid var(--cn-line); font-size: 13px; line-height: 1.6; color: var(--cn-text); } .cn-status strong { display: block; margin-bottom: 4px; font-size: var(--cn-fs-body); font-weight: 600; } .cn-status p { color: var(--cn-muted); } .cn-status p + p { margin-top: 6px; } .cn-status--error { border-left-color: var(--cn-red); background: var(--cn-red-bg); } .cn-status--error strong, .cn-status--error { color: var(--cn-red); } .cn-status--ok { border-left-color: var(--cn-green); background: var(--cn-green-bg); } .cn-status--ok strong { color: var(--cn-green); } .cn-status--warn { border-left-color: var(--cn-gold); background: var(--cn-gold-bg); } .cn-status--warn strong { color: var(--cn-gold); } .cn-divider { display: flex; align-items: center; gap: 10px; margin: var(--cn-s-5) 0 var(--cn-s-4); color: var(--cn-muted); font-size: var(--cn-fs-small); } .cn-divider::before, .cn-divider::after { content: ""; flex: 1; height: 1px; background: var(--cn-line); } /* ---- panel ---- */ .cn-panel { background: var(--cn-panel); border: 1px solid var(--cn-line); border-radius: var(--cn-r-lg); overflow: clip; min-width: 0; } /* ---- paticka ---- */ .cn-footer { border-top: 1px solid var(--cn-line); color: var(--cn-muted); font-size: var(--cn-fs-min); } .cn-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding-top: 16px; padding-bottom: 16px; } .cn-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .cn-footer a { text-decoration: none; padding: 4px 0; } .cn-footer a:hover { color: var(--cn-text); text-decoration: underline; text-underline-offset: 3px; } /* odkaz "Nastaveni cookies" vklada tracking.js primo do