/* Podstránky workshopů (260930): AI adopce pro lídry změn a Vidět věci jinak. Načítá se po ../260925 alternativy/spolecne.css a e-spolecne.css (písma, okno s fotkou, rozsvícení věty, maska nadpisu). Tokeny, hlavička, jeviště, bloky, ouško, pruh, opona a patička vycházejí z úvodní stránky G (g.css), ale jsou to kopie: na G souběžně pracuje jiná session a podstránky se jejími změnami nemají rozbít. Sjednotí je převod do Astra (sdílené komponenty, ADR-004). Pero na podstránkách nepodtrhává (DF 260930): zakroužkování, odškrtnutí a kresba. */ :root { --papir: #ECEEF0; --plocha: #DDE1E5; --bila: #F8F9FA; --inkoust: #15161A; --text2: #34373E; --tlumene: #5C6069; --vlasec: #D2D6DB; --tma: #15161A; --tma-text: #F2F2EF; --tma-text2: #CFD1D8; --tma-tlumene: #9A9EA9; --tma-vlasec: rgb(242 242 239 / 0.16); --stin: #303644; --stin-tlumene: #A7ABB5; --modra-pera: #2743C8; --linka-svetla: #B9C6FF; --text: 'Instrument Sans', system-ui, sans-serif; --okraj: clamp(48px, 5vw, 76px); --hlavicka: 60px; --sloupec: min(700px, 50vw); --pohyb: cubic-bezier(0.2, 0.7, 0.2, 1); --otevreni: cubic-bezier(0.72, 0, 0.18, 1); --dojezd: cubic-bezier(0.16, 1, 0.3, 1); } body { font-size: 18px; line-height: 1.55; } main { position: relative; z-index: 1; background: var(--papir); box-shadow: 0 30px 60px -24px rgb(8 10 20 / 0.5); } .h2 { font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 72; font-weight: 600; font-size: clamp(40px, 3.7vw, 54px); line-height: 1.02; letter-spacing: -0.034em; text-wrap: balance; } /* Malý nadpis sekce (štítek nad textem), stejný jako „Reference“ na úvodní stránce. */ .stitek-sekce { font-family: var(--text); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; color: var(--tlumene); } .na-tme .stitek-sekce, .na-stinu .stitek-sekce { color: var(--tma-tlumene); } [data-ramec] { position: relative; } .blok { position: relative; background: var(--bila); } .na-tme { background: var(--tma); color: var(--tma-text); --linka: var(--linka-svetla); --sv-a: #FFFFFF; --sv-b: rgb(255 255 255 / 0.36); } .na-stinu { background: var(--stin); color: var(--tma-text); --linka: var(--linka-svetla); --sv-a: #FFFFFF; --sv-b: rgb(255 255 255 / 0.4); } .na-tme a, .na-stinu a { color: inherit; } /* Odkaz v textu: tenká linka pod textem (CSS, ne pero). */ .v-textu { border-bottom: 1.5px solid currentColor; border-bottom-color: color-mix(in srgb, currentColor 40%, transparent); transition: border-color 200ms ease, color 200ms ease; } .v-textu:hover { border-bottom-color: currentColor; } /* Hlavička: jako na úvodní stránce; menu vede na sekce úvodní stránky. */ .hlavicka { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--hlavicka); display: flex; align-items: center; gap: 32px; padding: 0 var(--okraj); transition: transform 560ms var(--dojezd), background-color 260ms ease; } .posunuto .hlavicka { background: var(--bila); } .hlavicka.skryta { transform: translate3d(0, -101%, 0); } .jmeno { font-family: var(--nadpis); font-size: 19px; font-weight: 640; letter-spacing: -0.015em; } .hlavicka nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 520; color: var(--inkoust); } .hlavicka nav a { position: relative; padding-bottom: 3px; } .hlavicka nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--pohyb); } .hlavicka nav a:hover::after, .hlavicka nav a[aria-current]::after { transform: scaleX(1); } .napiste { font-size: 15px; font-weight: 600; padding: 9px 17px 10px; background: var(--inkoust); color: #F6F7F9; transition: background-color 200ms ease; } .napiste:hover { background: var(--modra-pera); } /* Hlavička nad tmavou úvodní fotkou: světlé písmo, dokud stránka neodjede a hlavička nedostane plný pruh. */ html:not(.posunuto) .hlavicka-svetla, html:not(.posunuto) .hlavicka-svetla nav { color: var(--tma-text); } html:not(.posunuto) .hlavicka-svetla .napiste { background: #F6F7F9; color: var(--inkoust); } html:not(.posunuto) .hlavicka-svetla .napiste:hover { background: var(--linka-svetla); } /* Ztmavení horního okraje úvodní fotky pod světlou hlavičkou (fotka s pestrým horním okrajem). */ .j-pozadi.pod-hlavickou::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 170px; background: linear-gradient(rgb(10 12 18 / 0.55), rgb(10 12 18 / 0)); pointer-events: none; } /* Jeviště: fotka přes celé okno stojí (sticky), obsah sekce jede přes ni. */ .jeviste { position: relative; } .j-pozadi { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0E0F14; } .j-pozadi .okno { position: absolute; inset: 0; background: transparent; } .j-obsah { position: relative; z-index: 1; margin-top: -100vh; } /* Sekce, která vyjede přes stojící fotku předchozího jeviště. */ .pres-foto { margin-top: -100vh; box-shadow: 0 -18px 44px -18px rgb(8 10 20 / 0.42); } /* Sekce mimo jeviště leží nad stojícími fotkami: když je sekce, která vyjede přes fotku, nižší než okno, začne další sekce ještě uvnitř jeviště a bez vlastní vrstvy by ji stojící fotka překryla. */ :where(main > section:not(.jeviste)) { position: relative; z-index: 2; background: var(--papir); } /* První obrazovka: bílý blok s ouškem a titulkem dole vlevo, pod ním případně šedý pruh. */ .j-prvni { min-height: max(640px, 100vh); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: calc(var(--hlavicka) + 64px) var(--okraj) clamp(26px, 4.6vh, 46px); } .blok-uvod, .pruh { width: var(--sloupec); } .blok-uvod { padding: clamp(30px, 4.8vh, 48px) clamp(28px, 3vw, 46px) clamp(24px, 3.6vh, 34px); } .zpet { position: absolute; top: clamp(16px, 2.6vh, 24px); right: clamp(22px, 2.4vw, 36px); display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 560; color: var(--tlumene); transition: color 200ms ease; } .zpet svg { width: 15px; height: 15px; transition: translate 260ms var(--pohyb); } .zpet:hover { color: var(--modra-pera); } .zpet:hover svg { translate: -3px 0; } .h1 { font-family: var(--nadpis); font-variation-settings: "wdth" 92, "opsz" 96; font-weight: 640; font-size: clamp(56px, min(6.5vw, 10.8vh), 98px); line-height: 0.92; letter-spacing: -0.045em; margin-left: -0.04em; } .h1 .radek { display: block; } .perex { margin-top: clamp(18px, 3vh, 28px); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.42; color: var(--text2); max-width: 27em; } /* Kotvy na části stránky pod perexem (jako nabídka pod titulkem úvodní stránky). */ .kotvy { margin-top: clamp(16px, 2.6vh, 24px); display: flex; flex-wrap: wrap; gap: 6px clamp(16px, 1.7vw, 24px); font-size: clamp(14.5px, 1.08vw, 15.5px); font-weight: 560; } .kotvy a { white-space: nowrap; border-bottom: 1.5px solid var(--vlasec); padding-bottom: 1px; transition: border-color 200ms ease; } .kotvy a:hover { border-color: var(--inkoust); } /* Ouško: štítek, který vystupuje z horní hrany bloku (jako „S čím pohneme“ na úvodní stránce). */ .ousko { position: absolute; left: 0; bottom: 100%; display: flex; align-items: baseline; gap: 9px; padding: 8px 14px 8px 16px; background: var(--modra-pera); color: #F4F6FF; font-size: 14.5px; font-weight: 560; line-height: 1.2; letter-spacing: 0.005em; white-space: nowrap; } .ousko-vpravo { left: auto; right: 0; } /* Pruh pod titulkem: mapa stránky, jako mapa nabídky „X přes lidi“ na úvodní stránce. */ .pruh { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 30px); padding: clamp(16px, 2.6vh, 22px) clamp(28px, 3vw, 46px) clamp(16px, 2.8vh, 24px); } .pruh a { display: block; font-size: 13.5px; line-height: 1.4; color: var(--tma-text2); } .pruh b { display: block; width: max-content; max-width: 100%; margin-bottom: 10px; font-family: var(--nadpis); font-weight: 620; font-size: 16.5px; line-height: 1.16; letter-spacing: -0.01em; color: var(--tma-text); transition: color 200ms ease; } .pruh .pres { display: block; color: var(--stin-tlumene); } .pruh a:hover b { color: var(--linka-svetla); } /* Blok přes fotku (šedý nebo bílý), stejná šířka jako úvod. */ .blok-pres { width: var(--sloupec); padding: clamp(34px, 5.6vh, 52px) clamp(28px, 3vw, 46px) clamp(36px, 6vh, 54px); } .nazev-bloku { font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 72; font-weight: 600; font-size: clamp(32px, 2.8vw, 42px); line-height: 1.06; letter-spacing: -0.032em; } .lead { font-size: clamp(18.5px, 1.45vw, 21px); line-height: 1.44; font-weight: 480; } .dvojice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 2.8vw, 40px); margin-top: clamp(22px, 3.6vh, 30px); padding-top: clamp(18px, 3vh, 24px); border-top: 1px solid var(--vlasec); } .na-stinu .dvojice { border-top-color: var(--tma-vlasec); } .dvojice h3 { font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 36; font-weight: 620; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.2; letter-spacing: -0.018em; margin-bottom: 8px; } .dvojice p { font-size: 15.5px; line-height: 1.52; color: var(--text2); } .na-stinu .dvojice p { color: var(--tma-text2); } /* Seznam s odškrtnutím perem: místo odrážky volné místo vlevo, značku nakreslí pero. */ .odskrtnout { list-style: none; padding: 0; margin: 0; } .odskrtnout li { padding-left: 38px; } /* Okno s fotkou v textové sekci: otevře se při vjezdu a fotka v něm jede pomaleji (e-spolecne.css). */ .foto-okno { width: 100%; } .foto-okno img { height: 100%; } /* Kontakt: opona pod stránkou. Fotka přes celé okno, text vlevo na ztmavené části; stránka nad ní na konci odjede nahoru. */ .opona { position: sticky; bottom: 0; z-index: 0; min-height: 100vh; display: flex; flex-direction: column; background: #0D0B1E; color: var(--tma-text); --linka: var(--linka-svetla); overflow: hidden; } .opona-foto { position: absolute; inset: 0; background: transparent; } .opona-foto::after { content: ""; position: absolute; inset: 0; } /* Okraj je vnitřní odsazení rámu, ne vnější: kroužek kolem e-mailu sahá doleva za text a engine drží řídicí body křivky nejméně 14 px uvnitř rámu; za levou hranou rámu se tah zubí. */ .kontakt { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: calc(min(640px, 48vw) + var(--okraj)); padding: 12vh 0 7vh var(--okraj); } .kontakt .stitek-sekce { color: var(--tma-tlumene); margin-bottom: 18px; } .kontakt .h2 { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.08; } .kontakt-text { margin-top: 18px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--tma-text2); max-width: 30em; } .kontakt-mail { margin-top: clamp(34px, 6vh, 54px); font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 48; font-weight: 540; font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -0.025em; color: #FFFFFF; } .kontakt-dalsi { margin-top: 48px; font-size: 17px; font-weight: 560; color: var(--tma-text2); } .kontakt-dalsi a:hover, .paticka a:hover { color: #FFFFFF; } .paticka { position: relative; z-index: 1; display: flex; gap: 26px; padding: 22px var(--okraj) 26px; font-size: 14px; color: var(--tma-text2); background: rgb(13 11 30 / 0.72); } .paticka .vpravo { margin-left: auto; display: flex; gap: 24px; } /* ---------- pohyb (jen s třídou anim; bez ní je všechno vidět hned) ---------- */ /* Úvod po načtení: první snímek je celý vidět, bloky dosednou (jen transform). */ .anim .blok-uvod { transition: translate 1000ms var(--dojezd) 140ms; } .anim .pruh { transition: translate 1000ms var(--dojezd) 300ms; } .anim:not(.nacteno) .blok-uvod, .anim:not(.nacteno) .pruh { translate: 0 46px; } @media (prefers-reduced-motion: reduce) { .hlavicka { transition: none; } } /* Tlačítko menu (E.menu v e-spolecne.js) je jen v mobilní hlavičce. */ .menu-tlacitko { display: none; } /* Přepínač jazyka (kopie z g.css, TD-9): poslední prvek