/* * pmc-tokens.css - Motiv vzhledu PublicMC V1 (D-002, PMC-R020, PMC-R022) * * Design tokeny a globalni styl verejneho webu publicmc.cz nad existujicim * Builderem PublicMC. Zadna nova administrace, zadny novy renderer: * - :root definuje tokeny --pmc-*, * - .cmc-b-document.cmc-b-template-publicmc-v1 je motiv pro dokument Builderu * (doc.designPreset = "publicmc-v1" -> renderer pridava tridu * cmc-b-template-publicmc-v1, cloudmc_builder_public_renderer.php:174-181) * a mapuje tokeny na existujici promenne --cmc-b-* rendereru, * - .pmc-* jsou globalni komponenty pro casti mimo bloky (hlavicka, logo, stitky). * * Mereni: Squarespace reference 1920x1080, meritko 1:1 (zdroj: CESTY.json * klic "squarespace", snimky 01_Titulka/01_Hero_a_video/home-scroll-00-settled.jpg, * 03_Grow_your_business/home-scroll-02-settled.jpg, * 04_Nastroje_a_sluzby/home-scroll-03-settled.jpg). Plna tabulka mereni * a stav OVERENO / ODHAD / NEZNAME: dukazy/D-002-mereni.md. * Pismo reference je NEZNAME (neni v DOM exportu) - pouzit systemovy grotesk, * velikosti prepocteny pres vysku verzalek (cap height Arial 0,716 em). * * Plynula velikost: hodnota v px pri 1920 = hodnota reference; pod 1920 se * zmensuje (vw), nad 1600 se pismo a ovladani zvetsuji (pravidlo plne sirky). * Zadna max-width se strednim sloupcem: obsah jde pres celou sirku okna * s okrajem --pmc-okraj. */ :root { /* ---------- Barvy (OVERENO pixelem reference / loga) ---------- */ --pmc-cerna: #000000; /* lista po scrollu, text nadpisu i odstavcu */ --pmc-bila: #ffffff; /* pozadi sekci, tlacitko v hero */ --pmc-seda-100: #eaeaea; /* aktivni stitek (pill) zalozek */ --pmc-akcent: #006ffe; /* modry ctverec loga PublicMC (median pixelu) */ --pmc-akcent-tmavy: #0078fe; /* tentyz ctverec v tmave variante loga */ --pmc-text-tlumeny: rgba(0, 0, 0, .62); /* ODHAD - reference sedy text nema */ --pmc-text-tlumeny-inverz: rgba(255, 255, 255, .72); /* ODHAD */ --pmc-linka: #eaeaea; /* ODHAD - odvozeno od stitku */ --pmc-prekryv-videa: rgba(0, 0, 0, .35); /* ODHAD - citelnost textu pres video */ /* ---------- Pismo (rodina NEZNAME, nahrada) ---------- */ --pmc-pismo: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif; --pmc-pismo-vaha-text: 400; --pmc-pismo-vaha-nadpis: 400; /* reference ma nadpisy v regular rezu (vizualne) */ --pmc-pismo-vaha-tucne: 600; /* Velikosti: komentar = vyska verzalek v referenci -> px pri 1920 */ --pmc-fs-h1: clamp(40px, 3.7vw, 96px); /* cap 51 px -> 71 px */ --pmc-lh-h1: 1.056; /* rozestup radku 75 px (75/71) */ --pmc-ls-h1: -0.045em; /* ODHAD - tesne prolozeni */ --pmc-fs-h2: clamp(32px, 2.6vw, 68px); /* cap 36 px -> 50 px */ --pmc-lh-h2: 1.08; /* rozestup radku 54 px */ --pmc-ls-h2: -0.03em; /* ODHAD */ --pmc-fs-h3: clamp(20px, 1.25vw, 32px); /* cap 17 px -> 24 px (titulek karty) */ --pmc-lh-h3: 1.2; --pmc-fs-text: clamp(16px, calc(0.83vw + 2px), 24px); /* 1920 = 18 px, 2560 = 23 px (pravidlo Romana: od 1600 vetsi pismo) */ --pmc-lh-text: 1.3125; /* rozestup radku 21 px */ --pmc-fs-maly: clamp(13px, calc(0.62vw + 2px), 19px); /* 1920 = 14 px, 2560 = 18 px */ --pmc-lh-maly: 1.3; /* rozestup 17 px */ --pmc-fs-nav: clamp(15px, calc(0.42vw + 8px), 20px); /* verzalky v liste, cap 11 px */ --pmc-ls-nav: 0; /* ODHAD */ /* ---------- Mrizka a mezery (OVERENO, px pri 1920) ---------- */ --pmc-okraj: clamp(16px, 2.0833vw, 64px); /* 40 px vnejsi okraj listy i obsahu */ --pmc-mezera-mrizky: clamp(16px, 2.0833vw, 56px); /* 40 px mezi kartami */ --pmc-sloupcu: 4; /* 4 karty 430 px pri 1920 */ --pmc-lista-vyska: clamp(64px, 4.1667vw, 96px); /* 80 px */ --pmc-logo-vyska: clamp(32px, 2.2917vw, 56px); /* 44 px - sirka loga ~195 px jako logo reference (206 px) */ --pmc-sekce-y: clamp(64px, 6.7708vw, 168px); /* ODHAD ~130 px mezi sekcemi */ --pmc-nadpis-obsah: clamp(40px, 4.4792vw, 112px); /* ODHAD ~86 px nadpis -> karty */ /* ---------- Tvary ---------- */ --pmc-radius-tlacitko: 0; /* OVERENO - ostre rohy 166x60 */ --pmc-radius-karta: 6px; /* ODHAD - JPEG roh, 4 px odchylka v 1. radku */ --pmc-radius-pill: 999px; /* OVERENO - stitek 91x32 s plnym zaoblenim */ --pmc-stin: none; /* OVERENO - karty a tlacitka bez stinu */ /* ---------- Tlacitko (OVERENO 166x60 pri textu "GET STARTED") ---------- */ --pmc-tl-vyska: clamp(48px, 3.125vw, 72px); /* 60 px */ --pmc-tl-padding-x: clamp(24px, 1.9271vw, 48px); /* 37 px */ --pmc-pill-vyska: clamp(32px, 1.6667vw, 40px); /* 32 px */ --pmc-pill-padding-x: 16px; /* 17 px od hrany k textu */ /* ---------- Pohyb (z verejneho CSS reference, viz pruvodce 01) ---------- */ --pmc-pohyb-nastup: opacity .4s ease-in-out; /* homepageHeroReveal */ --pmc-pohyb-obrazek: transform .5s; /* hover karty -> scale(1.05) */ --pmc-pohyb-video: opacity .3s cubic-bezier(.645, .045, .355, 1); --pmc-hover-zvetseni: 1.05; } @media (prefers-reduced-motion: reduce) { :root { --pmc-pohyb-nastup: none; --pmc-pohyb-obrazek: none; --pmc-pohyb-video: none; --pmc-hover-zvetseni: 1; } } /* ========================================================= Globalni zaklad (jen uvnitr .pmc-web, aby se nedotkl adminu) ========================================================= */ .pmc-web { margin: 0; font-family: var(--pmc-pismo); font-size: var(--pmc-fs-text); line-height: var(--pmc-lh-text); font-weight: var(--pmc-pismo-vaha-text); color: var(--pmc-cerna); background: var(--pmc-bila); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .pmc-web *, .pmc-web *::before, .pmc-web *::after { box-sizing: border-box; } :where(.pmc-web) a { color: inherit; } /* :where = nulova specificita, neprebije tlacitka */ .pmc-web :focus-visible { outline: 2px solid var(--pmc-akcent); outline-offset: 3px; } .pmc-h1 { font-size: var(--pmc-fs-h1); line-height: var(--pmc-lh-h1); letter-spacing: var(--pmc-ls-h1); font-weight: var(--pmc-pismo-vaha-nadpis); margin: 0; } .pmc-h2 { font-size: var(--pmc-fs-h2); line-height: var(--pmc-lh-h2); letter-spacing: var(--pmc-ls-h2); font-weight: var(--pmc-pismo-vaha-nadpis); margin: 0; } .pmc-h3 { font-size: var(--pmc-fs-h3); line-height: var(--pmc-lh-h3); font-weight: var(--pmc-pismo-vaha-text); margin: 0; } .pmc-text { font-size: var(--pmc-fs-text); line-height: var(--pmc-lh-text); margin: 0; } .pmc-maly { font-size: var(--pmc-fs-maly); line-height: var(--pmc-lh-maly); margin: 0; } /* ---------- Sekce a mrizka (plna sirka, jen okraj) ---------- */ .pmc-sekce { padding: var(--pmc-sekce-y) var(--pmc-okraj); background: var(--pmc-bila); color: var(--pmc-cerna); } .pmc-sekce--tmava { background: var(--pmc-cerna); color: var(--pmc-bila); } .pmc-sekce--seda { background: var(--pmc-seda-100); } .pmc-hlavicka-sekce .pmc-h2 { max-width: 10em; } .pmc-hlavicka-sekce { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--pmc-mezera-mrizky); align-items: start; margin-bottom: var(--pmc-nadpis-obsah); } .pmc-mrizka { display: grid; grid-template-columns: repeat(var(--pmc-sloupcu), minmax(0, 1fr)); gap: var(--pmc-mezera-mrizky); } /* ---------- Horni lista (80 px, okraj 40 px, logo vlevo, akce vpravo) ---------- */ .pmc-lista { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--pmc-lista-vyska); padding: 0 var(--pmc-okraj); background: var(--pmc-cerna); color: var(--pmc-bila); } .pmc-lista--pruhledna { background: transparent; position: absolute; left: 0; right: 0; } /* Lista prekryva hero (jako reference): zustava sticky, obsah pod ni zacina na y=0. */ .pmc-lista--nad-obsahem { margin-bottom: calc(-1 * var(--pmc-lista-vyska)); } .pmc-lista__menu { display: flex; gap: clamp(20px, 1.7708vw, 44px); list-style: none; margin: 0; padding: 0; } .pmc-lista__menu a, .pmc-lista__prihlaseni { font-size: var(--pmc-fs-nav); text-transform: uppercase; letter-spacing: var(--pmc-ls-nav); text-decoration: none; font-weight: var(--pmc-pismo-vaha-text); } .pmc-lista__akce { display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 1.6667vw, 40px); } /* ---------- Logo: vzdy originalni soubor, nikdy napis ---------- Originaly (podklady/loga) maji nepruhledne pozadi: logo_publicmc.png bile, logo_publicmc_w.png cerne. Na stejne barve pozadi splynou; pres obraz/video se pozadi odstrani prolnutim (multiply / screen), soubor zustava beze zmeny. Pomer stran zachovan: height + width:auto. */ .pmc-logo { display: inline-flex; align-items: center; line-height: 0; } .pmc-logo img { height: var(--pmc-logo-vyska); width: auto; display: block; } .pmc-logo__na-svetle { mix-blend-mode: multiply; } /* logo_publicmc.png (2058x465, 4,43:1) */ .pmc-logo__na-tmave { mix-blend-mode: screen; } /* logo_publicmc_w.png (2049x467, 4,39:1) */ .pmc-logo .pmc-logo__na-tmave { display: none; } .pmc-tmave .pmc-logo .pmc-logo__na-svetle, .pmc-lista .pmc-logo .pmc-logo__na-svetle, .pmc-sekce--tmava .pmc-logo .pmc-logo__na-svetle { display: none; } .pmc-tmave .pmc-logo .pmc-logo__na-tmave, .pmc-lista .pmc-logo .pmc-logo__na-tmave, .pmc-sekce--tmava .pmc-logo .pmc-logo__na-tmave { display: block; } /* ---------- Tlacitka (ostre rohy, verzalky, 166x60) ---------- */ .pmc-tlacitko { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pmc-tl-vyska); padding: 0 var(--pmc-tl-padding-x); border: 0; border-radius: var(--pmc-radius-tlacitko); font: inherit; font-size: var(--pmc-fs-nav); text-transform: uppercase; text-decoration: none; background: var(--pmc-cerna); color: var(--pmc-bila); cursor: pointer; transition: background-color .2s linear, color .2s linear; } .pmc-tlacitko--bile { background: var(--pmc-bila); color: var(--pmc-cerna); } .pmc-tlacitko--obrys { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; } /* ---------- Stitky / zalozky (pill 91x32, #eaeaea aktivni) ---------- */ .pmc-zalozky { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1.25vw, 28px); list-style: none; margin: 0; padding: 0; } .pmc-pill { display: inline-flex; align-items: center; height: var(--pmc-pill-vyska); padding: 0 var(--pmc-pill-padding-x); border-radius: var(--pmc-radius-pill); font-size: var(--pmc-fs-text); background: transparent; color: var(--pmc-cerna); border: 0; cursor: pointer; text-decoration: none; } .pmc-pill.is-active, .pmc-pill[aria-selected="true"] { background: var(--pmc-seda-100); } /* ---------- Karta (430 px pri 1920, text bily nahore, sipka vpravo dole) ---------- */ .pmc-karta { position: relative; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 430 / 640; border-radius: var(--pmc-radius-karta); background: #2b2b2b; color: var(--pmc-bila); text-decoration: none; box-shadow: var(--pmc-stin); padding: clamp(18px, 1.25vw, 32px); } .pmc-karta__obrazek { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--pmc-pohyb-obrazek); } .pmc-karta:hover .pmc-karta__obrazek { transform: scale(var(--pmc-hover-zvetseni)); } .pmc-karta > *:not(.pmc-karta__obrazek) { position: relative; } .pmc-karta .pmc-h3 { margin-bottom: clamp(8px, .625vw, 16px); } .pmc-karta .pmc-maly { max-width: 70%; } .pmc-karta__sipka { margin-top: auto; align-self: flex-end; font-size: var(--pmc-fs-h3); line-height: 1; } /* ---------- Indikator karuselu (tecky 6 px, aktivni 16x6) ---------- */ .pmc-tecky { display: flex; gap: 6px; justify-content: center; align-items: center; } .pmc-tecky span { width: 4px; height: 4px; border-radius: 50%; background: #9a9a9a; } .pmc-tecky span.is-active { width: 16px; height: 6px; border-radius: 3px; background: var(--pmc-cerna); } /* ---------- Hero (pres celou sirku, text uprostred, video pod textem) ---------- */ .pmc-hero { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; color: var(--pmc-bila); background: var(--pmc-cerna); overflow: hidden; padding: var(--pmc-lista-vyska) var(--pmc-okraj) var(--pmc-sekce-y); } .pmc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pmc-hero::after { content: ""; position: absolute; inset: 0; background: var(--pmc-prekryv-videa); pointer-events: none; } .pmc-hero__obsah { position: relative; z-index: 1; animation: pmc-nastup .4s ease-in-out both; } .pmc-hero__obsah .pmc-tlacitko { margin-top: clamp(28px, 2.2917vw, 56px); } .pmc-hero__poznamka { margin-top: clamp(16px, 1.4583vw, 36px); font-size: var(--pmc-fs-text); } @keyframes pmc-nastup { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pmc-hero__obsah { animation: none; } } /* ========================================================= Motiv Builderu: doc.designPreset = "publicmc-v1" Mapuje tokeny na promenne rendereru (cmc_builder_public_styles, cloudmc_builder_public_renderer.php:682) a zrusi uzky stredovy sloupec. ========================================================= */ .cmc-b-document.cmc-b-template-publicmc-v1 { --cmc-b-primary: var(--pmc-cerna); --cmc-b-accent: var(--pmc-akcent); --cmc-b-muted: var(--pmc-seda-100); --cmc-b-ink: var(--pmc-cerna); --cmc-b-text: var(--pmc-cerna); --cmc-b-text-soft: var(--pmc-cerna); --cmc-b-text-muted: var(--pmc-text-tlumeny); --cmc-b-page: var(--pmc-bila); --cmc-b-surface: var(--pmc-bila); --cmc-b-surface-muted: var(--pmc-seda-100); --cmc-b-border: var(--pmc-linka); --cmc-b-border-strong: var(--pmc-cerna); --cmc-b-on-ink: var(--pmc-bila); --cmc-b-heading-color: var(--pmc-cerna); max-width: none; margin: 0; padding: 0; font-family: var(--pmc-pismo); font-size: var(--pmc-fs-text); line-height: var(--pmc-lh-text); color: var(--pmc-cerna); background: var(--pmc-bila); } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-container { max-width: none; margin: 0; } .cmc-b-document.cmc-b-template-publicmc-v1 > .cmc-b-section, .cmc-b-document.cmc-b-template-publicmc-v1 > .cmc-b-block:not(.cmc-b-hero) { padding-left: var(--pmc-okraj); padding-right: var(--pmc-okraj); } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-section { padding-top: var(--pmc-sekce-y); padding-bottom: var(--pmc-sekce-y); } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-width-boxed, .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-width-wide { max-width: none; } /* Nadpisy a text */ .cmc-b-document.cmc-b-template-publicmc-v1 h1, .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-hero h1 { font-size: var(--pmc-fs-h1); line-height: var(--pmc-lh-h1); letter-spacing: var(--pmc-ls-h1); font-weight: var(--pmc-pismo-vaha-nadpis); margin: 0; } .cmc-b-document.cmc-b-template-publicmc-v1 h2 { font-size: var(--pmc-fs-h2); line-height: var(--pmc-lh-h2); letter-spacing: var(--pmc-ls-h2); font-weight: var(--pmc-pismo-vaha-nadpis); margin: 0 0 var(--pmc-nadpis-obsah); } .cmc-b-document.cmc-b-template-publicmc-v1 h3 { font-size: var(--pmc-fs-h3); line-height: var(--pmc-lh-h3); font-weight: var(--pmc-pismo-vaha-text); letter-spacing: 0; margin: 0 0 clamp(8px, .625vw, 16px); } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-paragraph, .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-hero-text { font-size: var(--pmc-fs-text); line-height: var(--pmc-lh-text); color: inherit; margin: 0; } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-subtitle { font-size: var(--pmc-fs-nav); font-weight: var(--pmc-pismo-vaha-text); letter-spacing: 0; color: inherit; } /* Hero bloku Builderu = cerna plocha pres celou sirku, text uprostred */ .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-hero { margin: 0; border: 0; border-radius: 0; box-shadow: none; min-height: min(100vh, 1080px); display: grid; place-items: center; text-align: center; padding: var(--pmc-lista-vyska) var(--pmc-okraj) var(--pmc-sekce-y); background: var(--pmc-cerna); color: var(--pmc-bila); } /* Poradi jako reference: H1 -> tlacitko -> poznamka pod tlacitkem (hero-text). Svisle: horni hrana H1 233 px (verzalky 244), tlacitko 422-481, poznamka 509 pri 1920. */ .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-hero { align-items: start; padding-top: clamp(112px, 12.1354vw, 304px); } /* 233 px pri 1920 */ .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-hero .cmc-b-container { display: flex; flex-direction: column; align-items: center; animation: pmc-nastup .4s ease-in-out both; } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-hero .cmc-b-subtitle { order: 0; margin: 0 0 16px; } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-hero h1 { order: 1; max-width: 14ch; } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-actions { order: 2; margin: clamp(28px, 2.0313vw, 52px) 0 0; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .cmc-b-document.cmc-b-template-publicmc-v1 .cmc-b-hero .cmc-b-hero-text { order: 3; margin-top: clamp(16px, 1.0938vw, 28px); } /* Tlacitka Builderu D-016: blok "button" renderer kresli jako

(cloudmc_builder_public_renderer.php, case 'button'). Jako tlacitko se styluje jen vlastni /