/* StickyCal — vlastné CSS, žiadny build, žiadne CDN. Farby tenanta prichádzajú ako --brand / --accent z . ── Tmavý režim ─────────────────────────────────────────────────────── Každá farba má svoju literálnu hodnotu na HOLOM `:root` — svetlá pod svojím menom, tmavá pod `--dk-*`. Médium a atribút potom už len PREPÍNAJÚ, ktorá sada platí. Dôvod: keby tmavá hodnota žila len vnútri `@media (prefers-color-scheme: dark)`, nedala by sa použiť pri ručnom prepnutí a musela by sa opísať druhý raz — a dve kópie tej istej palety sa časom rozídu. Takto je farba na jednom mieste a prepínač je len mechanické priradenie. Poradie prepínačov nie je náhodné: 1. systém (`prefers-color-scheme`), ale LEN ak si človek nevybral svetlý 2. `[data-theme=dark]` — ručná voľba prebíja systém v oboch smeroch Bez podmienky `:not([data-theme=light])` by sa človek na tmavom systéme do svetlého režimu neprepol; médium by ho vždy prevalcovalo. ── Brandová farba tenanta ───────────────────────────────────────────── Merchant si vyberá farbu na bielom pozadí. Tmavomodrá alebo tmavozelená tam vyzerá dobre, na #0f1115 ju však takmer nevidno — a opraviť sa sama nemôže, hodnotu z databázy prepisovať nebudeme. Brand sme preto rozdelili na tri úlohy: --brand VÝPLŇ (tlačidlo, aktívna položka, štvorček s logom). Zostáva presne tá, ktorú si merchant nastavil — inak by prestal spoznávať vlastnú značku. --brand-ink brand ako TEXT/LINKA na pozadí stránky (odkazy, rámček pri prejdení myšou, focus). V tmavom režime sa primieša biela, aby ostal čitateľný. --on-brand text ležiaci NA výplni. Nepočíta ho CSS ale PHP z jasu brandovej farby (helpers.php → ink_on). Natvrdo biela zlyhá na žltej či svetlozelenej značke — a to už dnes, nielen v tmavom režime. Brandová farba sa zámerne NIKDY nestáva pozadím stránky; pozadie je neutrálne --bg. Farebná plocha cez celú obrazovku je pri ľubovoľnom používateľskom hexe hazard. `color-mix()` je zabalený v @supports — kde chýba, --brand-ink ostane rovný --brand, teda presne dnešné správanie. Žiadna regresia. */ :root{ --brand:#2563eb; --accent:#0f172a; --on-brand:#fff; --brand-ink:var(--brand); /* --- farba samotného StickyCalu --------------------------------------- Oddelená od --brand, a to zámerne: --brand patrí PREVÁDZKE a mení sa s každým tenantom. Toto je naša značka a musí zostať tá istá aj na stránke salónu, ktorý si nastavil zelenú. Malina je teplá, lebo prevádzky si takmer bez výnimky volia modrú alebo zelenú — na teplej farbe sa nikdy nestretneme. Zároveň je dosť ďaleko od --err (#b42318), aby sa logo nepliedlo s tlačidlom „Zmazať". Výplň a text sú dve rôzne úlohy s rôznymi prahmi kontrastu: --sc-brand plocha (tlačidlo, značka) — norma žiada 3:1 --sc-brand-ink text na pozadí stránky — norma žiada 4.5:1 Na tmavom preto ink nie je totožný s výplňou, ale o stupeň svetlejší. --sc-on-brand je text NA výplni; na tmavom je výplň svetlejšia, takže text na nej musí stmavnúť, inak klesne pod 3:1. */ --sc-brand:#9d174d; /* 7,9:1 na bielom */ --sc-brand-ink:#9d174d; --sc-on-brand:#fff; /* biela na maline: 7,9:1 */ --dk-sc-brand:#d63c76; /* 4,0:1 na tmavom pozadí */ --dk-sc-brand-ink:#e4568a; /* 5,0:1 — na drobný text treba viac */ --dk-sc-on-brand:#12161c; /* tmavý text na svetlejšej výplni */ /* svetlá paleta — východisková */ --bg:#f6f7f9; --panel:#fff; --line:#e4e7ec; --line2:#eef1f5; --fg:#151a21; --muted:#5c6673; --ok:#0e7c72; --warn:#b45309; --err:#b42318; --ok-bg:#e6f6f4; --warn-bg:#fef3e2; --err-bg:#fdeceb; --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --viz-1:#2a78d6; --viz-2:#e34948; /* tmavá paleta — hodnoty, nie priradenie. Nie je to prevrátenie svetlej: pozadie je mierne modrasté (čistá čierna na OLED „krváca" pri rolovaní), text je #e7e9ee a nie #fff (biela na tmavom pôsobí presvietene a horšie sa číta), stavové farby sú svetlejšie odtiene — tmavá #b42318 by na #171a21 mala kontrast pod 3:1. */ --dk-bg:#0f1115; --dk-panel:#171a21; --dk-line:#282d38; --dk-line2:#20242c; --dk-fg:#e7e9ee; --dk-muted:#98a1b0; --dk-ok:#4ade80; --dk-warn:#fbbf24; --dk-err:#f87171; --dk-ok-bg:#12291f; --dk-warn-bg:#2a2110; --dk-err-bg:#2a1414; /* Tieň z priesvitnej čiernej je na tmavom podklade neviditeľný, preto je hustejší — inak by karty splynuli s pozadím do jednej plochy. */ --dk-shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.28); --dk-viz-1:#3987e5; --dk-viz-2:#e66767; --dk-brand-ink:var(--brand); --r:10px; } @supports (color: color-mix(in srgb, #000 50%, #fff)){ :root{ --dk-brand-ink:color-mix(in srgb, var(--brand) 58%, #fff); } } /* 1. systémová voľba */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:var(--dk-bg); --panel:var(--dk-panel); --line:var(--dk-line); --line2:var(--dk-line2); --fg:var(--dk-fg); --muted:var(--dk-muted); --ok:var(--dk-ok); --warn:var(--dk-warn); --err:var(--dk-err); --ok-bg:var(--dk-ok-bg); --warn-bg:var(--dk-warn-bg); --err-bg:var(--dk-err-bg); --shadow:var(--dk-shadow); --brand-ink:var(--dk-brand-ink); --viz-1:var(--dk-viz-1); --viz-2:var(--dk-viz-2); --sc-brand:var(--dk-sc-brand); --sc-brand-ink:var(--dk-sc-brand-ink); --sc-on-brand:var(--dk-sc-on-brand); color-scheme:dark; } } /* 2. ručná voľba návštevníka */ :root[data-theme="dark"]{ --bg:var(--dk-bg); --panel:var(--dk-panel); --line:var(--dk-line); --line2:var(--dk-line2); --fg:var(--dk-fg); --muted:var(--dk-muted); --ok:var(--dk-ok); --warn:var(--dk-warn); --err:var(--dk-err); --ok-bg:var(--dk-ok-bg); --warn-bg:var(--dk-warn-bg); --err-bg:var(--dk-err-bg); --shadow:var(--dk-shadow); --brand-ink:var(--dk-brand-ink); --viz-1:var(--dk-viz-1); --viz-2:var(--dk-viz-2); --sc-brand:var(--dk-sc-brand); --sc-brand-ink:var(--dk-sc-brand-ink); --sc-on-brand:var(--dk-sc-on-brand); color-scheme:dark; } /* `color-scheme` nie je kozmetika: bez nej ostanú rolovacie lišty, kalendárik v a autofill polí biele aj v tmavom režime. Na svetlej strane ju treba vypýtať naspäť, inak by na tmavom systéme ostali natívne prvky tmavé aj po prepnutí na svetlý. */ :root[data-theme="light"]{ color-scheme:light; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--fg); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} a{color:var(--brand-ink);text-decoration:none} a:hover{text-decoration:underline} h1{font-size:1.5rem;margin:0 0 .3em;letter-spacing:-.02em} h2{font-size:1.15rem;margin:1.6em 0 .5em} h3{font-size:1rem;margin:1.2em 0 .4em} p{margin:.5em 0} small,.muted{color:var(--muted)} .small{font-size:.86rem} hr{border:0;border-top:1px solid var(--line);margin:22px 0} .wrap{max-width:960px;margin:0 auto;padding:0 16px} .wrap-narrow{max-width:620px;margin:0 auto;padding:0 16px} .wrap-wide{max-width:1280px;margin:0 auto;padding:0 16px} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:18px;box-shadow:var(--shadow);margin:14px 0} .card.tight{padding:12px 14px} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .row.between{justify-content:space-between} .grid{display:grid;gap:14px} .grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .stack>*+*{margin-top:10px} .spacer{flex:1} /* ---------------------------------------------------------- formuláre */ label{display:block;font-size:.86rem;font-weight:600;margin:0 0 4px;color:var(--fg)} label.inline{display:flex;align-items:center;gap:8px;font-weight:400;margin:6px 0} input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date], input[type=time],input[type=number],input[type=search],input[type=url],select,textarea{ width:100%;padding:10px 12px;font:inherit;font-size:.95rem;color:var(--fg); background:var(--panel);border:1px solid var(--line);border-radius:8px} input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-ink);outline-offset:1px;border-color:var(--brand-ink)} input[type=color]{width:52px;height:38px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--panel)} textarea{min-height:80px;resize:vertical} .field{margin:0 0 12px} .field .hint{font-size:.8rem;color:var(--muted);margin-top:3px;font-weight:400} fieldset{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:14px 0} legend{font-size:.85rem;font-weight:700;padding:0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .btn{display:inline-flex;align-items:center;gap:7px;justify-content:center; padding:10px 16px;font:inherit;font-size:.93rem;font-weight:600;line-height:1.2; border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg); cursor:pointer;text-decoration:none;white-space:nowrap} .btn:hover{text-decoration:none;border-color:var(--muted)} /* Rámček je --brand-ink, nie --brand: pri tmavej značke na tmavom pozadí je tlačidlo bez svetlejšieho lemu takmer neviditeľná plocha. V svetlom režime sú obe hodnoty totožné, takže sa vizuálne nemení nič. */ .btn.primary{background:var(--brand);border-color:var(--brand-ink);color:var(--on-brand)} .btn.primary:hover{filter:brightness(.93)} .btn.danger{color:var(--err);border-color:var(--err)} .btn.small{padding:6px 11px;font-size:.83rem} .btn.block{width:100%} .btn[disabled]{opacity:.5;cursor:not-allowed} /* ------------------------------------------------------------- výpisy */ table{width:100%;border-collapse:collapse;font-size:.92rem} th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:top} th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700} tbody tr:hover{background:var(--line2)} .table-wrap{overflow-x:auto} .badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700; border:1px solid currentColor;line-height:1.5} .badge.ok{color:var(--ok)} .badge.warn{color:var(--warn)} .badge.err{color:var(--err)} .badge.muted{color:var(--muted)} .flash{padding:11px 14px;border-radius:8px;margin:14px 0;font-size:.92rem;border:1px solid} .flash.success{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)} .flash.error{background:var(--err-bg);border-color:var(--err);color:var(--err)} .flash.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)} .empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:.92rem} .hint{font-size:.8rem;color:var(--muted);margin-top:3px;font-weight:400} th.num,td.num{text-align:right;font-variant-numeric:tabular-nums} /* ------------------------------------------------------- verejný portál */ .public-header{background:var(--panel);border-bottom:1px solid var(--line);padding:16px 0} .public-header .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.05rem} .public-header .logo{width:38px;height:38px;border-radius:9px;object-fit:cover; background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-size:1rem} main{padding:20px 0 60px} .service-card{display:flex;gap:14px;align-items:flex-start;justify-content:space-between; padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel); margin:10px 0;text-decoration:none;color:inherit} .service-card:hover{border-color:var(--brand-ink);text-decoration:none} .service-card .meta{color:var(--muted);font-size:.86rem;margin-top:3px} .datebar{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch} .datebar button{flex:0 0 auto;min-width:62px;padding:8px 6px;border:1px solid var(--line); border-radius:10px;background:var(--panel);color:var(--fg);cursor:pointer;text-align:center;font:inherit} .datebar button .d{font-size:1.15rem;font-weight:700;line-height:1.1} .datebar button .w{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .datebar button[aria-pressed=true]{background:var(--brand);border-color:var(--brand-ink);color:var(--on-brand)} /* Popisok dňa bol pevná biela s priehľadnosťou. Na svetlej značke, kde je --on-brand tmavý, by zmizol — preto sa stlmuje priehľadnosťou samotného textu, nie inou farbou. */ .datebar button[aria-pressed=true] .w{color:var(--on-brand);opacity:.8} .datebar button[disabled]{opacity:.35;cursor:not-allowed} .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:12px 0} .slot{padding:11px 6px;text-align:center;border:1px solid var(--line);border-radius:9px; background:var(--panel);color:var(--fg);cursor:pointer;font:inherit;font-weight:600;font-size:.95rem} .slot:hover{border-color:var(--brand-ink);color:var(--brand-ink)} .slot[aria-pressed=true]{background:var(--brand);border-color:var(--brand-ink);color:var(--on-brand)} .summary{background:var(--line2);border-radius:var(--r);padding:14px;margin:14px 0;font-size:.93rem} .summary dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0} .summary dt{color:var(--muted)} .summary dd{margin:0;font-weight:600} /* ------------------------------------------------------------- grafy Farby grafov sú zámerne NEZÁVISLÉ od brandovej farby tenanta: tú si merchant nastaví akúkoľvek a graf by prestal byť čitateľný. Tieto dva odtiene sú overené na kontrast voči podkladu (>= 3:1) aj na odlíšiteľnosť pri farbosleposti, zvlášť pre svetlý a zvlášť pre tmavý režim — tmavý nie je automatické prevrátenie svetlého. Samotné hodnoty (--viz-1/--viz-2 aj --dk-viz-1/--dk-viz-2) sedia hore v hlavnom `:root` spolu so zvyškom palety, aby ich prepínala tá istá dvojica pravidiel a nemuseli mať vlastný `@media`. */ :root{ --viz-grid:var(--line); --viz-track:var(--line2) } .viz-wrap{margin:6px 0 2px} .viz{width:100%;height:auto;display:block;overflow:visible} .viz-grid{stroke:var(--viz-grid);stroke-width:1} .viz-axis{fill:var(--muted);font-size:11px} .viz-label{fill:var(--fg);font-size:12px;font-weight:600} .viz-value{fill:var(--muted);font-size:12px;font-variant-numeric:tabular-nums} .viz-track{fill:var(--viz-track)} .viz-bar{transition:opacity .12s} .viz-bar:hover{opacity:.75} .viz-s1{fill:var(--viz-1)} .viz-s2{fill:var(--viz-2)} .viz-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted); margin:0 0 6px} .viz-key{display:inline-flex;align-items:center;gap:6px} .viz-dot{width:10px;height:10px;border-radius:3px;display:inline-block} .viz-dot.viz-s1{background:var(--viz-1)} .viz-dot.viz-s2{background:var(--viz-2)} .kpi{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:14px 0} .kpi .box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:13px 15px;box-shadow:var(--shadow)} .kpi .k{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .kpi .v{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;margin-top:2px; font-variant-numeric:tabular-nums} .kpi .s{font-size:.8rem;color:var(--muted)} /* ----------------------------------------------------------- admin */ .admin-nav{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .admin-nav .inner{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:10px 16px; max-width:1280px;margin:0 auto} /* Položiek je dvanásť. Radšej tesnejšie, než aby sa navigácia lámala do druhého riadku a vyzerala ako chyba. */ .admin-nav a{padding:7px 9px;border-radius:7px;color:var(--fg);font-size:.875rem;font-weight:500; white-space:nowrap} .admin-nav a:hover{background:var(--line2);text-decoration:none} .admin-nav a.active{background:var(--brand);color:var(--on-brand)} /* `.admin-nav a` je špecifickejšie (0,1,1) než `.sc-logo` (0,1,0), takže by nášmu logu vnútilo --fg a značka by v navigácii stratila farbu. Preto sa tu prepisuje adresne. Zároveň mu odoberáme výplň pri prejdení myšou, ktorú majú položky menu — logo nie je položka menu. */ .admin-nav .sc-logo{color:var(--sc-brand);padding:0;margin-right:10px} .admin-nav .sc-logo:hover{background:none} .admin-nav .sc-logo-word{color:var(--fg);font-size:1.02rem} .daygrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:14px} .daycol{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .daycol h3{margin:0;padding:10px 12px;font-size:.92rem;background:var(--line2);border-bottom:1px solid var(--line)} .daycol h3 .free{float:right;font-weight:400;color:var(--muted);font-size:.8rem} .appt{padding:9px 12px;border-bottom:1px solid var(--line2);font-size:.88rem; border-left:3px solid var(--brand-ink)} .appt .t{font-weight:700} .appt .who{color:var(--muted)} .appt form{display:inline} .gap{padding:5px 12px;font-size:.78rem;color:var(--muted);background:repeating-linear-gradient( 45deg,transparent,transparent 6px,var(--line2) 6px,var(--line2) 12px)} .weekrow{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:8px 0;background:var(--panel)} .weekrow.closed{opacity:.55} .weekrow .head{display:flex;align-items:center;gap:10px;margin-bottom:8px} .weekrow .head strong{min-width:88px} .timepair{display:flex;gap:6px;align-items:center;margin:4px 0} .timepair input{width:auto;flex:1;min-width:90px} @media (max-width:640px){ h1{font-size:1.3rem} .card{padding:14px} .admin-nav .inner{padding:8px 10px;gap:3px} .admin-nav a{padding:6px 8px;font-size:.84rem} table{font-size:.86rem} th,td{padding:7px 6px} } /* Nadpis skupiny služieb v cenníku. */ .group-heading{font-size:1rem;text-transform:uppercase;letter-spacing:.06em; color:var(--muted);margin:26px 0 10px;font-weight:600} .group-heading:first-of-type{margin-top:14px} /* Verzia nasadeného kódu — pri hlásení chyby je prvá otázka „ktorú máš". */ .app-version{padding:18px 0 34px;text-align:right;opacity:.65} @media print{ /* Papier je vždy biely, nech má človek na obrazovke čokoľvek. Tmavá paleta by na tlačiarni znamenala buď prázdny list (šetrenie tonerom zahodí pozadie a svetlý text zmizne), alebo pol kazety na jednu stránku. Preto sa tu paleta natvrdo vracia na papierové hodnoty — nie sú to farby obrazovky, sú to farby tlače. */ :root,:root[data-theme="dark"],:root[data-theme="light"]{ --bg:#fff; --panel:#fff; --line:#bbb; --line2:#ddd; --fg:#000; --muted:#444; --shadow:none; color-scheme:light; } .admin-nav,.btn,.datebar,.app-version,.theme-toggle{display:none} body,body.embed{background:var(--bg);padding:0} } /* ------------------------------------------------- prepínač vzhľadu Štvorcové tlačidlo veľkosti ikony. Zámerne bez textu: v navigácii administrácie je šestnásť položiek a ďalšie slovo by ju zlomilo do druhého riadku. Meno pre čítačku obrazovky nesie aria-label, stav nesie aria-pressed — nie farba ikony. */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;width:34px;height:34px;padding:0;line-height:0; border:1px solid var(--line);border-radius:8px; background:var(--panel);color:var(--fg);cursor:pointer} .theme-toggle:hover{border-color:var(--muted)} .theme-toggle:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px} .theme-toggle svg{width:18px;height:18px;display:block} /* Ktorá ikona svieti, rieši CSS rovnakou dvojicou pravidiel ako paleta. Keby ju prepínal JavaScript, pri načítaní by na okamih svietilo slnko aj na tmavej stránke — presne to bliknutie, ktorému sa vyhýbame. */ .theme-toggle .i-dark{display:none} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .i-light{display:none} :root:not([data-theme="light"]) .theme-toggle .i-dark{display:block} } :root[data-theme="dark"] .theme-toggle .i-light{display:none} :root[data-theme="dark"] .theme-toggle .i-dark{display:block} /* Nahraté logo má ľubovoľný pomer strán — na rozdiel od štvorcového písmenka, ktoré ho zastupuje, keď žiadne nie je. Bez stropu by vysoký alebo široký obrázok roztiahol hlavičku cez pol obrazovky. */ .public-header img.logo{width:auto;height:auto;max-width:180px;max-height:48px;background:none} /* ------------------------------------------------- widget v cudzom ráme Widget nemá vlastný prepínač — je to bezrámová súčasť cudzej stránky a vlastné ovládanie by v nej pôsobilo ako cudzia lišta. Nečíta ani uloženú voľbu z verejnej stránky: v rámci tretej strany je úložisko dnes rozdelené (Safari/ITP, Chrome storage partitioning), takže by raz fungovalo a raz nie — a nespoľahlivá pamäť je horšia ako žiadna. Riadi sa teda výhradne `prefers-color-scheme`, teda systémom návštevníka. Lenže rám je zámerne priesvitný a pozadie mu dáva hostiteľská stránka, do ktorej nevidíme (iná doména). Ak má návštevník tmavý systém a merchantova stránka ostala biela, svetlý text na bielom podklade je nečitateľný. Preto si widget v tmavom režime — a LEN v ňom — vykreslí vlastnú plochu. V svetlom režime ostáva priesvitný presne ako doteraz, takže na existujúcich weboch sa nemení nič. Zaoblenie a odsadenie z toho robia zjavnú kartu, nie useknutý obdĺžnik: keď už plochu vidno, nech vyzerá ako zámer. */ @media (prefers-color-scheme: dark){ body.embed{background:var(--bg);border-radius:var(--r);padding:14px} } /* ═══════════════════════════════ stránky platformy ═══════════════════════ Úvodná stránka a registrácia. Jediné stránky, ktoré nepatria konkrétnej prevádzke, takže tu nie je brandová farba merchanta — `--brand` ostáva na východiskovej hodnote z `:root`. Ani jedna farba tu nie je zapísaná ako hex. Všetko sú tokeny, ktoré už prepína dvojica pravidiel hore, takže tmavý režim netreba riešiť druhý raz a nemá sa kde rozísť. */ .mk-header{background:var(--panel);border-bottom:1px solid var(--line); padding:12px 0;position:sticky;top:0;z-index:20} .mk-header .row{gap:12px} .mk-logo{font-weight:800;font-size:1.1rem;letter-spacing:-.02em;color:var(--fg)} .mk-logo:hover{text-decoration:none} /* --- logo StickyCalu --------------------------------------------------- Značka berie --sc-brand, nápis --fg. V tmavom režime je tak nápis takmer biely (17:1) a značka malinová: text pri drobných veľkostiach potrebuje viac kontrastu než plocha, a malina by na ňom bola tesná. Zároveň tým farba nezmizne — na značke má najväčšiu plochu a vynikne viac než na písmenách. */ .sc-logo{display:inline-flex;align-items:center;gap:8px;color:var(--sc-brand); line-height:1;flex:none} .sc-logo:hover{text-decoration:none} .sc-logo-mark{display:block;flex:none} .sc-logo-word{font-weight:500;font-size:1.18rem;letter-spacing:-.022em;color:var(--fg)} .sc-logo-word b{font-weight:800} /* Vo focuse musí byť vidieť celý blok, nie len text — inak sa pri prechode tabulátorom nedá povedať, kde človek je. */ .sc-logo:focus-visible{outline:2px solid var(--sc-brand-ink);outline-offset:3px; border-radius:4px} .mk-navlink{padding:7px 9px;border-radius:7px;color:var(--fg);font-size:.9rem;font-weight:500; white-space:nowrap} .mk-navlink:hover{background:var(--line2);text-decoration:none} .mk-footer{border-top:1px solid var(--line);padding:20px 0 40px;margin-top:20px} .mk-footer .row{gap:10px} /* Hero. Pozadie je jemný prechod z --line2 do --bg, nie farebná plocha: sýta plocha cez celú šírku by v tmavom režime svietila ako reflektor. */ .hero{padding:56px 0 40px;background:linear-gradient(180deg,var(--line2),var(--bg))} .hero-eyebrow{margin:0 0 8px;font-size:.8rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--brand-ink)} .hero-title{font-size:2.3rem;line-height:1.15;margin:0 0 14px;letter-spacing:-.03em;max-width:18ch} .lead{font-size:1.08rem;color:var(--muted);max-width:62ch;margin:0} .mk-section{padding:44px 0} .mk-section.alt{background:var(--panel);border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .mk-h2{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 8px} .mk-sub{color:var(--muted);max-width:66ch;margin:0 0 22px} /* Hlavička je `position:sticky`, takže po skoku na kotvu prekryje nadpis sekcie. `scroll-margin-top` posunie cieľ o jej výšku plus dych. */ .mk-section[id]{scroll-margin-top:78px} .feature-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .feature{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px} .mk-section:not(.alt) .feature{background:var(--panel);box-shadow:var(--shadow)} /* Ikona berie platformovú farbu, nie --brand: aj keby sa marketingová stránka raz dostala do kontextu s farbou tenanta, naša značka má zostať naša. --sc-brand-ink a nie --sc-brand preto, že ikona je tenká čiara, teda z pohľadu kontrastu bližšie k textu než k ploche. */ .feature-ico{display:block;margin:0 0 9px;color:var(--sc-brand-ink)} /* Prepínač jazyka. Skratky, nie vlajky: vlajka je štát, nie jazyk — angličtinou hovorí pol sveta a slovenčina by musela vyberať medzi Slovenskom a slovenskou menšinou inde. Tri položky sa zmestia aj na mobil, takže nič neschovávame do rozbaľovacieho zoznamu. */ .lang-switch{display:inline-flex;align-items:center;gap:1px;background:var(--line2); border-radius:8px;padding:2px} .lang-opt{font-size:.76rem;font-weight:700;letter-spacing:.03em;padding:4px 7px; border-radius:6px;color:var(--muted);line-height:1.3} a.lang-opt:hover{background:var(--panel);color:var(--fg);text-decoration:none} .lang-opt.is-on{background:var(--panel);color:var(--fg);box-shadow:var(--shadow)} .lang-opt:focus-visible{outline:2px solid var(--sc-brand-ink);outline-offset:1px} @media (max-width:560px){ .lang-opt{padding:4px 5px;font-size:.72rem} } .feature h3{margin:0 0 6px;font-size:.98rem} .feature p{margin:0;font-size:.9rem;color:var(--muted)} .steps{margin:0;padding-left:20px;max-width:70ch} .steps li{margin:0 0 8px} .steps strong{display:block} .plan-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); align-items:start} .plan{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r); padding:20px 18px;display:flex;flex-direction:column;gap:6px} .mk-section:not(.alt) .plan{background:var(--panel);box-shadow:var(--shadow)} /* Zvýraznená tarifa má hrubší rámček v brandovej farbe, nie brandovú výplň: text na plnej ploche by pri svetlej značke prestal byť čitateľný. */ .plan.featured{border:2px solid var(--brand-ink);padding:19px 17px} .plan-tag{position:absolute;top:-11px;left:16px;background:var(--brand);color:var(--on-brand); border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:700;letter-spacing:.03em} .plan h3{margin:0;font-size:1.05rem} .plan .price{margin:2px 0 0} .plan .price strong{font-size:1.7rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .plan .btn{margin-top:auto} .ticks{list-style:none;margin:12px 0 16px;padding:0;font-size:.9rem} .ticks li{padding:4px 0 4px 22px;position:relative;border-bottom:1px solid var(--line2)} .ticks li:before{content:"·";position:absolute;left:6px;color:var(--muted)} .ticks li.yes:before{content:"✓";color:var(--ok);font-weight:700;left:4px} .ticks li.no{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)} .ticks li.no:before{content:"—";left:2px} .mk-cta{text-align:center;padding:10px 0 20px} .mk-cta .mk-sub{margin-left:auto;margin-right:auto} /* ---------------------------------------------------- registračný formulár */ .mk-form{max-width:520px;margin:0 auto;padding:26px 0 40px} .field-err{font-size:.83rem;color:var(--err);margin-top:4px;font-weight:600} .field-err+.hint{display:none} /* Adresa sa skladá pred očami: prefix je nemenná časť, do poľa sa píše len to, čo si merchant naozaj vyberá. */ .slug-row{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px; background:var(--panel);overflow:hidden} /* Prefix drží svoju šírku (`flex:0 0 auto`) a ustupuje až pole, ktoré má `min-width:0`. Bez toho si `input` cez globálne `width:100%` vypýta celý riadok, flex zmenší prefix a orezanie nastane aj na širokej obrazovke — „stickycal.com/" sa zobrazí ako „stickycal.co". */ .slug-prefix{display:flex;align-items:center;padding:0 4px 0 11px;font-size:.9rem; color:var(--muted);background:var(--line2);white-space:nowrap;flex:0 0 auto} .slug-row input[type=text]{border:0;border-radius:0;background:transparent; min-width:0;flex:1 1 auto;width:auto} /* Na úzkom displeji je dôležitejšie vidieť, čo práve píšem, než celý názov domény — tam sa prefix skrátiť smie. Nad `max-width` je ešte dosť miesta na oboje. */ @media (max-width:520px){ .slug-prefix{flex:0 1 auto;min-width:0;max-width:50%; overflow:hidden;text-overflow:ellipsis;display:block;line-height:38px} } .slug-row input[type=text]:focus{outline-offset:-2px} /* Pasca na roboty. `display:none` je príliš zjavné — časť skriptov taký prvok preskočí. Odsunutie mimo plátna vyzerá pre stroj ako bežné pole. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (max-width:640px){ .hero{padding:34px 0 28px} .hero-title{font-size:1.75rem;max-width:none} .mk-section{padding:30px 0} .mk-header{position:static} .mk-header .row{gap:8px} .mk-navlink{padding:6px 7px;font-size:.85rem} .plan.featured{margin-top:12px} }