/*
* Touch@Glass — vizuál mockupu v6 (marketing/web/touchatglass/05-vzhled/mockup/v6/kit.css; Zdeněk 17. 10. ~20:40Z
* „dát zkušebnímu webu vizuál z mockupu“). Hodnoty převzaté z kit.css DOSLOVA; komentáře s měřením jsou tam.
* Načítá ho jen web TG (`` v layoutu podle hosta), a navíc je KAŽDÉ pravidlo pod [data-brand='teco'] — dvojí pojistka.
* ⛔ Statický soubor ⇒ žádné Tailwind direktivy; tokeny Tailwindu se tu jen přepisují (CSS proměnné).
* Hlídá brána `web:mic:same` (HTML micronicu po normalizaci hashů buildu + pixelové snímky před × po).
* Přebarvení Tailwind tokenů (--color-primary…) dědí i vnitřní stránky TG, které jedou na obecných blocích.
*/
[data-brand='teco'] {
--paper: #ffffff;
--paper-2: #f7f9fa;
--paper-3: #eef2f5;
--paper-4: #e3e9ee;
--line: #dddddd;
--line-soft: #e6e6e6;
--ink: #0d1a24;
--ink-deep: #060d13;
--brand: #007cb1;
--brand-text: #006b97;
--brand-lift: #2ea3d4;
--on-ink: #eef3f6;
--on-ink-mut: #9fb2bf;
--text: #333333;
--muted: #595959;
--text-strong: #222222;
--measure: 62ch;
/* Tailwind tokeny (globals.css @theme) → TG: modrá místo oranžové, Open Sans místo Montserratu */
--color-primary: #007cb1;
--color-primary-dark: #00618a;
--color-primary-darker: #004d6e;
--color-primary-light: #e5f2f8;
--color-secondary: #0d1a24;
--color-secondary-dark: #060d13;
--color-secondary-light: #eef2f5;
--font-sans: var(--font-opensans), 'Open Sans', system-ui, -apple-system, Arial, sans-serif;
--radius-brand: 2px;
}
[data-brand='teco'] body {
background: var(--paper-2);
color: var(--text);
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.7;
}
[data-brand='teco'] h1,
[data-brand='teco'] h2,
[data-brand='teco'] h3 {
font-weight: 700;
color: var(--text-strong);
}
[data-brand='teco'] .tg-home h2,
[data-brand='teco'] .tg-strop h1 {
font-size: clamp(1.75rem, 3.4vw, 2.6rem);
line-height: 1.14;
letter-spacing: -0.015em;
margin: 0 0 0.5em;
}
[data-brand='teco'] .tg-home h3 {
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.3;
margin: 0 0 0.5em;
}
[data-brand='teco'] .tg-home p {
margin: 0 0 1rem;
max-width: var(--measure);
}
[data-brand='teco'] .tg-home a:where(:not(.tg-btn, .tg-tb)) {
color: var(--brand);
}
[data-brand='teco'] .tg-home a:hover {
text-decoration: underline;
}
[data-brand='teco'] .tg-lab {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--brand-text);
margin-bottom: 10px;
}
[data-brand='teco'] .tg-lead {
font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
line-height: 1.55;
color: var(--muted);
}
[data-brand='teco'] .tg-more a {
font-weight: 700;
margin-right: 18px;
}
/* slovní značka: bílá na tmavém, zavináč modrý (kit.css .tg) */
[data-brand='teco'] .tg-word {
color: inherit;
font-weight: inherit;
}
[data-brand='teco'] .tg-word .at {
color: var(--brand-text);
}
[data-brand='teco'] :is(.tg-hero, .tg-stuha, .tg-ft, .tg-hdr, .tg-strop) .tg-word {
color: #fff;
}
[data-brand='teco'] :is(.tg-hero, .tg-stuha, .tg-ft, .tg-hdr, .tg-strop) .tg-word .at {
color: #00c4f7;
}
/* ── tlačítka ── */
[data-brand='teco'] .tg-btn {
display: inline-block;
padding: 13px 26px;
font-weight: 700;
font-size: 0.9375rem;
border-radius: 2px;
border: 2px solid transparent;
text-align: center;
line-height: 1.4;
}
[data-brand='teco'] .tg-btn:hover {
text-decoration: none;
}
[data-brand='teco'] .tg-btn-fill {
background: var(--brand);
color: #fff;
}
[data-brand='teco'] .tg-btn-fill:hover {
background: #00618a;
color: #fff;
}
[data-brand='teco'] .tg-btn-ghost {
border-color: var(--line);
color: var(--brand);
background: transparent;
}
/* ── hlavička ── plná (vnitřní stránky), na úvodu průhledná přes hero */
[data-brand='teco'] .tg-hdr {
position: relative;
z-index: 40;
background: var(--ink);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
[data-brand='teco'] body:has([data-tg-hero]) .tg-hdr {
position: absolute;
top: 0;
left: 0;
right: 0;
background: transparent;
border-bottom-color: rgba(255, 255, 255, 0.2);
}
[data-brand='teco'] .tg-hdr-in {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
gap: 24px;
height: 80px;
}
[data-brand='teco'] .tg-logo {
font-weight: 700;
font-size: 1.25rem;
letter-spacing: -0.02em;
white-space: nowrap;
color: #fff;
}
[data-brand='teco'] .tg-logo:hover {
text-decoration: none;
}
[data-brand='teco'] .tg-nav {
display: flex;
gap: 20px;
margin-left: auto;
align-items: center;
}
[data-brand='teco'] .tg-nav-odkazy {
display: flex;
gap: 20px;
align-items: center;
white-space: nowrap;
}
[data-brand='teco'] .tg-nav a {
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 700;
}
[data-brand='teco'] .tg-nav a:hover {
color: #fff;
text-decoration: none;
}
[data-brand='teco'] .tg-nav a.tg-btn {
padding: 9px 18px;
background: #0a6699;
color: #fff;
}
/* přepínač jazyka CZ/EN (TG /en/, 10. 11.) — vykreslí se jen na hostu se zapnutým jazykem (host-flag) */
[data-brand='teco'] .tg-nav a.tg-jazyk {
padding: 4px 8px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 4px;
font-size: 12px;
letter-spacing: 0.04em;
}
[data-brand='teco'] .tg-burger {
display: none;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.4);
background: transparent;
border-radius: 2px;
cursor: pointer;
padding: 0;
position: relative;
}
[data-brand='teco'] .tg-burger span {
position: absolute;
left: 11px;
right: 11px;
height: 2px;
background: #fff;
transition: 0.18s;
}
[data-brand='teco'] .tg-burger span:nth-child(1) {
top: 13px;
}
[data-brand='teco'] .tg-burger span:nth-child(2) {
top: 20px;
}
[data-brand='teco'] .tg-burger span:nth-child(3) {
top: 27px;
}
[data-brand='teco'] .tg-burger[aria-expanded='true'] span:nth-child(1) {
top: 20px;
transform: rotate(45deg);
}
[data-brand='teco'] .tg-burger[aria-expanded='true'] span:nth-child(2) {
opacity: 0;
}
[data-brand='teco'] .tg-burger[aria-expanded='true'] span:nth-child(3) {
top: 20px;
transform: rotate(-45deg);
}
[data-brand='teco'] .tg-panel {
display: none;
position: absolute;
top: 80px;
left: 0;
right: 0;
background: var(--ink);
border-top: 1px solid rgba(255, 255, 255, 0.18);
padding: 10px 20px 18px;
}
[data-brand='teco'] .tg-panel.tg-otevren {
display: block;
}
[data-brand='teco'] .tg-panel a {
display: block;
padding: 14px 4px;
color: #fff;
font-size: 1.0625rem;
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
[data-brand='teco'] .tg-panel a:last-child {
border-bottom: 0;
}
[data-brand='teco'] .tg-panel a.tg-jazyk-panel {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.8);
}
/* rozbalovací menu (Ovladače → produktové stránky; Zdeněk 18. 10., velitel 9e8a0a) — TgNav; tmavé jako hlavička,
i když leží průhledná přes hero. Otevření řídí stav (třída .tg-otevren), ⛔ ne :hover v CSS (jako micronic DesktopNav). */
[data-brand='teco'] .tg-nav-polozky {
display: flex;
gap: 20px;
align-items: center;
}
[data-brand='teco'] .tg-nav-rozbal {
position: relative;
display: inline-flex;
align-items: center;
gap: 2px;
height: 80px;
}
[data-brand='teco'] .tg-nav-sipka {
background: none;
border: 0;
padding: 4px;
color: rgba(255, 255, 255, 0.88);
font-size: 11px;
line-height: 1;
cursor: pointer;
}
[data-brand='teco'] .tg-nav-sipka span {
display: inline-block;
transition: transform 0.15s;
}
[data-brand='teco'] .tg-nav-rozbal.tg-otevren .tg-nav-sipka span {
transform: rotate(180deg);
}
/* rodič bez stránky (Ovladače od 18. 10.) — tlačítko nese popisek, vypadá jako odkaz menu */
[data-brand='teco'] .tg-nav-sipka.tg-nav-rodic {
padding: 4px 0;
font: inherit;
font-size: 14px;
font-weight: 700;
}
[data-brand='teco'] .tg-nav-sipka.tg-nav-rodic:hover,
[data-brand='teco'] .tg-nav-rozbal.tg-otevren .tg-nav-rodic {
color: #fff;
}
[data-brand='teco'] .tg-nav-rodic span {
font-size: 11px;
}
[data-brand='teco'] .tg-podmenu {
position: absolute;
top: 100%;
left: -18px;
z-index: 60;
min-width: 260px;
margin: 0;
padding: 8px 0;
list-style: none;
background: var(--ink);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
visibility: hidden;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
[data-brand='teco'] .tg-nav-rozbal.tg-otevren .tg-podmenu {
visibility: visible;
opacity: 1;
transform: none;
}
[data-brand='teco'] .tg-podmenu a {
display: block;
padding: 10px 18px;
white-space: nowrap;
}
[data-brand='teco'] .tg-podmenu a:hover,
[data-brand='teco'] .tg-podmenu a:focus-visible {
background: rgba(255, 255, 255, 0.08);
}
[data-brand='teco'] .tg-podmenu-cara {
height: 1px;
margin: 8px 18px;
background: rgba(255, 255, 255, 0.18);
}
/* mobil: akordeon v panelu (TgBurger) */
[data-brand='teco'] .tg-panel-skupina {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
[data-brand='teco'] .tg-panel-radek {
display: flex;
align-items: center;
justify-content: space-between;
}
[data-brand='teco'] .tg-panel .tg-panel-radek a {
border-bottom: 0;
flex: 1;
}
[data-brand='teco'] .tg-panel-sipka {
background: none;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 2px;
color: #fff;
width: 40px;
height: 40px;
font-size: 13px;
cursor: pointer;
}
[data-brand='teco'] .tg-panel-sipka span {
display: inline-block;
transition: transform 0.15s;
}
[data-brand='teco'] .tg-panel-skupina.tg-otevren .tg-panel-sipka span {
transform: rotate(180deg);
}
/* rodič bez stránky v akordeonu: celý řádek je tlačítko se vzhledem položky panelu */
[data-brand='teco'] .tg-panel-sipka.tg-panel-rodic {
flex: 1;
width: auto;
height: auto;
border: 0;
padding: 14px 4px;
text-align: left;
font: inherit;
font-size: 1.0625rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
[data-brand='teco'] .tg-panel-pod {
display: none;
padding: 0 0 10px 16px;
}
[data-brand='teco'] .tg-panel-skupina.tg-otevren .tg-panel-pod {
display: block;
}
[data-brand='teco'] .tg-panel .tg-panel-pod a {
padding: 10px 4px;
font-size: 1rem;
font-weight: 600;
border-bottom: 0;
color: rgba(255, 255, 255, 0.85);
}
[data-brand='teco'] .tg-panel-pod hr {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin: 6px 4px;
}
@media (max-width: 879px) {
[data-brand='teco'] .tg-nav-odkazy {
display: none;
}
[data-brand='teco'] .tg-burger {
display: block;
}
}
@media (max-width: 767px) {
[data-brand='teco'] .tg-hdr-in {
padding: 0 20px;
}
}
/* ── hero ── */
[data-brand='teco'] .tg-hero {
position: relative;
overflow: hidden;
color: #fff;
min-height: 760px;
display: flex;
align-items: flex-end;
background: #020a1c;
}
@media (min-width: 1024px) {
[data-brand='teco'] .tg-hero {
min-height: 850px;
}
}
[data-brand='teco'] .tg-hero-foto {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 38%;
height: 100%;
width: 62%;
max-width: none;
object-fit: cover;
object-position: center 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
[data-brand='teco'] .tg-hero-stin {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(6, 12, 26, 0.96) 0%, rgba(10, 18, 36, 0.82) 26%, rgba(10, 18, 36, 0.12) 58%);
}
[data-brand='teco'] .tg-hero-vrsek {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 170px;
background: linear-gradient(rgba(2, 10, 28, 0.62) 0%, rgba(2, 10, 28, 0.28) 55%, transparent 100%);
}
[data-brand='teco'] .tg-hero-in {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
width: 100%;
padding: 128px 40px 20px;
}
[data-brand='teco'] .tg-hero-text {
max-width: 768px;
}
[data-brand='teco'] .tg-hero .tg-lab {
color: #00c4f7;
}
[data-brand='teco'] .tg-hero-oboci {
margin-bottom: 60px;
}
[data-brand='teco'] .tg-hero h1 {
color: #fff;
font-size: 6rem;
line-height: 1.03;
letter-spacing: -0.02em;
margin: 0;
padding-top: 95px;
}
[data-brand='teco'] .tg-slib {
display: block;
margin: 16px 0 0;
font-size: 1.875rem;
font-weight: 600;
line-height: 1.15;
letter-spacing: 0;
color: #fafcfd;
max-width: 36ch;
}
[data-brand='teco'] .tg-hero .tg-lead {
max-width: 38rem;
margin-top: 28px;
font-size: 1.0625rem;
line-height: 1.75;
color: #ccdae1;
}
[data-brand='teco'] .tg-hero-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 30px;
}
[data-brand='teco'] .tg-hero .tg-btn-fill {
background: #0a6699;
color: #fff;
}
[data-brand='teco'] .tg-hero .tg-btn-fill:hover {
background: #fff;
color: #0b3f63;
}
[data-brand='teco'] .tg-hero .tg-btn-ghost {
border-color: rgba(255, 255, 255, 0.62);
color: #fff;
}
[data-brand='teco'] .tg-hero .tg-btn-ghost:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.12);
}
[data-brand='teco'] .tg-vyhody {
margin-top: 75px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px 24px;
}
[data-brand='teco'] .tg-fig {
display: block;
font-size: 24px;
font-weight: 700;
line-height: 1.1;
color: #fafcfd;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
[data-brand='teco'] .tg-vyhody .tg-lab {
display: block;
margin: 6px 0 0;
color: #ccdae1;
font-size: 12px;
}
@media (max-width: 1023px) {
[data-brand='teco'] .tg-hero-stin {
background: linear-gradient(90deg, rgba(6, 12, 26, 0.96) 0%, rgba(10, 18, 36, 0.9) 46%, rgba(8, 14, 30, 0.62) 100%);
}
[data-brand='teco'] .tg-hero h1 {
font-size: 3.75rem;
}
[data-brand='teco'] .tg-slib {
font-size: 1.5rem;
}
}
@media (max-width: 767px) {
[data-brand='teco'] .tg-hero-in {
padding: 128px 20px 26px;
}
[data-brand='teco'] .tg-hero-text {
max-width: none;
}
[data-brand='teco'] .tg-hero-foto {
left: 0;
width: 100%;
object-position: 58% center;
-webkit-mask-image: none;
mask-image: none;
}
[data-brand='teco'] .tg-hero-stin {
background: linear-gradient(rgba(12, 20, 38, 0.62) 0%, rgba(12, 20, 38, 0.88) 45%, rgba(6, 12, 26, 0.98) 100%);
}
[data-brand='teco'] .tg-hero-vrsek {
display: none;
}
}
@media (max-width: 639px) {
[data-brand='teco'] .tg-hero h1 {
font-size: 3rem;
}
[data-brand='teco'] .tg-vyhody {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── stuha „součást systému“ ── */
[data-brand='teco'] .tg-stuha {
background: #0b1825;
color: #fafcfd;
padding: 80px 0;
}
[data-brand='teco'] .tg-stuha-in {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 0.55fr 1.45fr;
gap: 36px;
}
[data-brand='teco'] .tg-stuha .tg-lab {
color: #00c4f7;
margin: 0;
}
[data-brand='teco'] .tg-home .tg-stuha h2 {
margin: 12px 0 0;
font-size: 1.875rem;
color: #fafcfd;
line-height: 1.2;
}
/* text bloku „Součást systému“ 1.0rem (Zdeněk 25. 10. ~11:2xZ přes marketing 9d4d32; dřív 1.875rem, na mobilu 1.5rem jako h2) */
[data-brand='teco'] .tg-home .tg-stuha-tvrzeni {
margin: 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
color: #fafcfd;
max-width: none;
}
[data-brand='teco'] .tg-home .tg-stuha-ven {
margin: 14px 0 0;
}
[data-brand='teco'] .tg-home .tg-stuha-ven a:where(:not(.tg-btn, .tg-tb)) {
color: #7fd4f2;
font-weight: 700;
font-size: 0.9375rem;
}
[data-brand='teco'] .tg-stuha-doplnek {
margin: 36px 0 0;
padding-top: 24px;
border-top: 1px solid rgba(250, 252, 253, 0.25);
display: flex;
align-items: flex-start;
gap: 16px;
}
[data-brand='teco'] .tg-stuha-doplnek svg {
flex: none;
margin-top: 4px;
color: #00c4f7;
}
[data-brand='teco'] .tg-home .tg-stuha-doplnek p {
margin: 0;
font-size: 1.0625rem;
line-height: 1.75;
color: #ccdae1;
max-width: 52rem;
}
[data-brand='teco'] .tg-stuha-doplnek strong {
color: #fafcfd;
}
@media (max-width: 1023px) {
[data-brand='teco'] .tg-stuha {
padding: 64px 0;
}
[data-brand='teco'] .tg-stuha-in {
grid-template-columns: 1fr;
gap: 24px;
padding: 0 24px;
}
[data-brand='teco'] .tg-home .tg-stuha h2 {
font-size: 1.5rem;
}
}
/* ── sada (výbava partnera) a prostředí ── vlasové linky, ⛔ žádné dlaždice */
[data-brand='teco'] .tg-sada {
background: var(--paper);
}
[data-brand='teco'] .tg-prostredi {
background: var(--paper-3);
}
[data-brand='teco'] .tg-in {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
[data-brand='teco'] .tg-hlava {
padding: 72px 0 8px;
}
[data-brand='teco'] .tg-sada-mrizka,
[data-brand='teco'] .tg-prostredi-mrizka {
display: grid;
grid-template-columns: repeat(var(--cols, 4), 1fr);
padding-bottom: 72px;
}
[data-brand='teco'] .tg-sada-mrizka[data-cols='3'],
[data-brand='teco'] .tg-prostredi-mrizka[data-cols='3'] {
--cols: 3;
}
[data-brand='teco'] .tg-sada-mrizka[data-cols='2'] {
--cols: 2;
}
[data-brand='teco'] .tg-prostredi-mrizka[data-cols='5'] {
--cols: 5;
}
[data-brand='teco'] .tg-sada-mrizka article {
padding: 36px 24px;
border-right: 1px solid var(--line-soft);
}
[data-brand='teco'] .tg-prostredi-mrizka article {
padding: 32px 20px;
border-right: 1px solid var(--line);
}
[data-brand='teco'] :is(.tg-sada-mrizka, .tg-prostredi-mrizka) article:first-child {
padding-left: 0;
}
[data-brand='teco'] :is(.tg-sada-mrizka, .tg-prostredi-mrizka) article:last-child {
border-right: 0;
padding-right: 0;
}
[data-brand='teco'] .tg-cis {
display: block;
font-size: 12px;
font-weight: 700;
color: #4f5963;
font-variant-numeric: tabular-nums;
}
[data-brand='teco'] .tg-sada-mrizka svg {
display: block;
margin-top: 48px;
color: #0083b9;
}
[data-brand='teco'] .tg-prostredi-mrizka svg {
display: block;
color: #0083b9;
margin-bottom: 16px;
}
[data-brand='teco'] .tg-home .tg-sada-mrizka h3 {
margin: 18px 0 6px;
font-size: 18px;
font-weight: 700;
color: #1c242b;
}
[data-brand='teco'] .tg-home .tg-prostredi-mrizka h3 {
margin: 0 0 6px;
font-size: 17px;
font-weight: 700;
color: #1c242b;
}
[data-brand='teco'] .tg-home :is(.tg-sada-mrizka, .tg-prostredi-mrizka) p {
margin: 0;
font-size: 14px;
line-height: 24px;
color: #4f5963;
max-width: none;
}
[data-brand='teco'] .tg-sada-dal {
margin: -40px 0 0;
padding-bottom: 64px;
}
[data-brand='teco'] .tg-prostredi a:where(:not(.tg-btn, .tg-tb)) {
color: var(--brand-text);
}
@media (max-width: 1023px) {
[data-brand='teco'] .tg-in {
padding: 0 24px;
}
[data-brand='teco'] .tg-hlava {
padding: 56px 0 4px;
}
[data-brand='teco'] .tg-sada-mrizka,
[data-brand='teco'] .tg-sada-mrizka[data-cols] {
--cols: 2;
padding-bottom: 56px;
}
[data-brand='teco'] .tg-prostredi-mrizka,
[data-brand='teco'] .tg-prostredi-mrizka[data-cols] {
--cols: 3;
}
[data-brand='teco'] :is(.tg-sada-mrizka, .tg-prostredi-mrizka) article {
padding: 26px 18px;
border-bottom: 1px solid var(--line-soft);
}
[data-brand='teco'] .tg-sada-mrizka svg {
margin-top: 28px;
}
}
@media (max-width: 560px) {
[data-brand='teco'] .tg-sada-mrizka[data-cols],
[data-brand='teco'] .tg-prostredi-mrizka[data-cols] {
--cols: 1;
}
[data-brand='teco'] :is(.tg-sada-mrizka, .tg-prostredi-mrizka) article {
border-right: 0;
padding: 22px 0;
}
}
/* ── stěna (povrchy, kolekce, technická data, dveře) ── spára = mezera 2 px na barvě linky */
[data-brand='teco'] .tg-wall {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2px;
background: var(--line);
}
[data-brand='teco'] .tg-wall-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-brand='teco'] .tg-t {
background: var(--paper);
padding: 34px 28px 38px;
min-width: 0;
display: block;
color: inherit;
}
[data-brand='teco'] .tg-home .tg-t p {
color: var(--muted);
}
[data-brand='teco'] .tg-t-2 {
grid-column: span 2;
}
[data-brand='teco'] .tg-t-4 {
grid-column: 1 / -1;
}
[data-brand='teco'] .tg-t-2nd {
background: var(--paper-3);
}
[data-brand='teco'] .tg-t-2nd a:where(:not(.tg-btn, .tg-tb)),
[data-brand='teco'] .tg-t-2nd .tg-lab {
color: var(--brand-text);
}
[data-brand='teco'] .tg-t-hlava {
padding: 68px 28px 20px;
}
[data-brand='teco'] .tg-t-tech-hlava {
padding-bottom: 14px;
}
[data-brand='teco'] .tg-t-tech {
padding-top: 8px;
}
[data-brand='teco'] .tg-kolekce .tg-lab {
color: var(--brand);
}
/* nová kolekce na úvodu (Minimalist 23. 10., velitel 3cb47b): poslední dlaždice přes celou šířku POD 3×2 se štítkem; obrázek
kol-*-siroky (2480×456) ořez cover na střed. Na mobilu (2 sloupce) taky přes celou šířku. */
[data-brand='teco'] .tg-kolekce .tg-t-nova {
grid-column: 1 / -1;
}
[data-brand='teco'] .tg-kol-stitek {
z-index: 1;
}
/* A4 (Adéla 19. 10.: sloupec užší než nadpis, „divné“ zalomení): odstavce hlavy Kolekce na šířku ostatních hlav úvodu (744 px) */
[data-brand='teco'] .tg-kolekce .tg-t-hlava p {
max-width: 46.5rem;
}
[data-brand='teco'] .tg-pov {
height: 150px;
margin: -34px -28px 18px;
position: relative;
overflow: hidden;
background: linear-gradient(150deg, #12384f 0%, #0a6f9e 55%, #0c2b3d 100%);
}
[data-brand='teco'] .tg-pov::after {
content: '';
position: absolute;
inset: 0;
}
[data-brand='teco'] .tg-pov-h::after {
background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.08) 50%, transparent 57%);
}
[data-brand='teco'] .tg-pov-s::after {
background: linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, 0.34) 46%, transparent 64%);
filter: blur(9px);
}
[data-brand='teco'] .tg-pov-foto {
background: none;
}
[data-brand='teco'] .tg-pov-foto img {
width: 100%;
height: 150px;
object-fit: cover;
}
[data-brand='teco'] .tg-kol {
height: 228px;
margin: -34px -28px 16px;
overflow: hidden;
position: relative;
}
[data-brand='teco'] .tg-kol-img {
object-fit: cover;
transition: transform 0.2s;
}
[data-brand='teco'] .tg-kol-nazev {
display: flex;
justify-content: space-between;
align-items: baseline;
}
[data-brand='teco'] .tg-home .tg-kol-nazev h3 {
margin-bottom: 4px;
}
[data-brand='teco'] .tg-kol-nazev span {
font-size: 1.0625rem;
font-weight: 700;
color: var(--brand-text);
}
[data-brand='teco'] .tg-kol-popis {
font-size: 0.8125rem;
color: var(--muted);
}
[data-brand='teco'] .tg-home a.tg-t-odkaz {
color: inherit;
text-decoration: none;
transition: background 0.15s;
}
[data-brand='teco'] a.tg-t-odkaz:hover {
background: var(--paper-2);
}
[data-brand='teco'] a.tg-t-odkaz:hover h3 {
color: var(--brand-text);
}
[data-brand='teco'] a.tg-t-odkaz:hover .tg-kol-img {
transform: scale(1.03);
}
[data-brand='teco'] .tg-tab {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
}
[data-brand='teco'] .tg-tab th,
[data-brand='teco'] .tg-tab td {
text-align: left;
padding: 11px 0;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
[data-brand='teco'] .tg-tab th {
width: 220px;
color: var(--brand-text);
font-weight: 700;
}
[data-brand='teco'] .tg-tab tr:last-child :is(th, td) {
border-bottom: 0;
}
[data-brand='teco'] .tg-home .tg-listy {
margin: 26px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px 8px;
align-items: center;
font-size: 0.9375rem;
max-width: none;
}
[data-brand='teco'] .tg-listy a:where(:not(.tg-btn, .tg-tb)) {
border: 1px solid var(--line);
border-radius: 2px;
padding: 7px 14px;
color: var(--brand-text);
font-weight: 600;
}
[data-brand='teco'] .tg-home .tg-listy a:where(:not(.tg-btn, .tg-tb)):hover {
border-color: var(--brand-text);
text-decoration: none;
background: var(--paper);
}
[data-brand='teco'] .tg-dv {
display: flex;
flex-direction: column;
border-top: 3px solid var(--brand);
}
[data-brand='teco'] .tg-home .tg-dv .tg-prim {
margin-top: auto;
margin-bottom: 0;
}
[data-brand='teco'] .tg-home .tg-dv .tg-tissi {
margin: 8px 0 0;
font-size: 0.875rem;
}
[data-brand='teco'] .tg-wall-dvere,
[data-brand='teco'] .tg-wall + .tg-wall {
margin-top: 0;
}
[data-brand='teco'] .tg-home > :last-child {
margin-bottom: 0;
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-wall,
[data-brand='teco'] .tg-wall-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 639px) {
[data-brand='teco'] .tg-wall-dvere {
grid-template-columns: 1fr;
}
[data-brand='teco'] .tg-wall-dvere .tg-t-2 {
grid-column: span 1;
}
}
@media (max-width: 560px) {
[data-brand='teco'] .tg-t-2 {
grid-column: 1 / -1;
}
[data-brand='teco'] .tg-t {
padding: 24px 18px 28px;
}
[data-brand='teco'] .tg-pov,
[data-brand='teco'] .tg-kol {
margin: -24px -18px 14px;
}
[data-brand='teco'] .tg-pov,
[data-brand='teco'] .tg-pov-foto img {
height: 110px;
}
[data-brand='teco'] .tg-kol {
height: 96px;
}
[data-brand='teco'] .tg-tab th {
width: 40%;
}
}
/* ── obecná sekce (šablona odmítla tvar) a strop vnitřních stránek ── */
[data-brand='teco'] .tg-sec {
background: var(--paper);
padding: 64px 0;
}
[data-brand='teco'] .tg-strop {
background: var(--ink);
color: #fff;
padding: 72px 0 52px;
}
[data-brand='teco'] .tg-strop-in {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
[data-brand='teco'] .tg-strop h1 {
color: #fff;
font-size: 3rem;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
}
@media (max-width: 1023px) {
[data-brand='teco'] .tg-strop {
padding: 48px 0 40px;
}
[data-brand='teco'] .tg-strop-in {
padding: 0 24px;
}
[data-brand='teco'] .tg-strop h1 {
font-size: 2.25rem;
}
}
/* ── patička ── */
[data-brand='teco'] .tg-ft {
background: var(--ink-deep);
color: var(--on-ink-mut);
padding: 48px 0 22px;
font-size: 0.9375rem;
line-height: 1.7;
}
[data-brand='teco'] .tg-ft-in {
max-width: 1240px;
margin: 0 auto;
padding: 0 28px;
}
[data-brand='teco'] .tg-ft a {
color: var(--on-ink);
}
[data-brand='teco'] .tg-ft p {
color: var(--on-ink-mut);
margin: 0;
}
[data-brand='teco'] .tg-ft h2 {
color: var(--on-ink);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0 0 14px;
}
[data-brand='teco'] .tg-ft-logo {
font-weight: 700;
font-size: 1.25rem;
letter-spacing: -0.02em;
}
[data-brand='teco'] .tg-ft-logo:hover {
text-decoration: none;
}
[data-brand='teco'] .tg-ft-grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1.5fr;
gap: 34px;
}
[data-brand='teco'] .tg-ft ul {
list-style: none;
margin: 0;
padding: 0;
}
[data-brand='teco'] .tg-ft li {
margin-bottom: 8px;
}
[data-brand='teco'] .tg-ft-bot {
border-top: 1px solid #16232e;
margin-top: 36px;
padding-top: 18px;
font-size: 0.8125rem;
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
[data-brand='teco'] .tg-ft-bot ul {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
[data-brand='teco'] .tg-ft-bot li {
margin: 0;
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-ft-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
[data-brand='teco'] .tg-ft-grid {
grid-template-columns: 1fr;
}
}
/* ── /design/ — kolekce + vzorník; vzorek čte jako ČTVERCOVÉ SKLO, ⛔ ne tapeta (marketing 60447f) ── */
[data-brand='teco'] .tg-strop .tg-lead {
color: #ccdae1;
font-size: 1.0625rem;
line-height: 1.7;
max-width: 46rem;
margin: 14px 0 0;
}
[data-brand='teco'] .tg-design .tg-sec .tg-listy {
margin-top: 8px;
}
[data-brand='teco'] .tg-dz {
background: var(--paper);
padding: 52px 0; /* jako .tg-s vnitřních stránek (velitel 7d057e; dřív 64/56) */
scroll-margin-top: 16px;
}
[data-brand='teco'] .tg-design .tg-sec {
padding: 52px 0;
}
[data-brand='teco'] .tg-dz-2 {
background: var(--paper-3);
}
[data-brand='teco'] .tg-dz-hlava {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 40px;
align-items: center;
}
[data-brand='teco'] .tg-dz-foto {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--paper-4);
}
[data-brand='teco'] .tg-vzorky {
list-style: none;
margin: 40px auto 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
gap: 28px 20px;
}
[data-brand='teco'] .tg-vzorky a {
display: block;
color: var(--text-strong);
text-decoration: none;
}
[data-brand='teco'] .tg-sklo {
display: block;
aspect-ratio: 1;
border-radius: 10px;
overflow: hidden;
position: relative;
border: 1px solid rgba(13, 26, 36, 0.18);
box-shadow: 0 1px 2px rgba(13, 26, 36, 0.12), 0 6px 16px -8px rgba(13, 26, 36, 0.35);
background: var(--paper-4);
}
/* odlesk skla — jemný, ⛔ nesmí měnit čtení barvy motivu */
[data-brand='teco'] .tg-sklo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 38%);
pointer-events: none;
}
[data-brand='teco'] .tg-sklo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s;
}
[data-brand='teco'] .tg-vzorky a:hover .tg-sklo img {
transform: scale(1.04);
}
[data-brand='teco'] .tg-vzorky a:focus-visible .tg-sklo {
outline: 3px solid var(--brand);
outline-offset: 3px;
}
[data-brand='teco'] .tg-vzorek-nazev {
display: block;
margin-top: 10px;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.35;
}
[data-brand='teco'] .tg-vzorky a:hover .tg-vzorek-nazev {
color: var(--brand-text);
}
[data-brand='teco'] .tg-design-pata {
margin-top: 0;
}
@media (max-width: 767px) {
[data-brand='teco'] :is(.tg-dz, .tg-design .tg-sec) {
padding: 36px 0;
}
[data-brand='teco'] .tg-dz-hlava {
grid-template-columns: 1fr;
gap: 24px;
}
[data-brand='teco'] .tg-vzorky {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px 12px;
}
}
/* ══ VNITŘNÍ STRÁNKY — mockup v6/vnitrni.css (marketing 0a9b466; GO velitel 79cd64), bloky přes TgBlocks ══ */
[data-brand='teco'] {
--deep: #0b1825;
--accent: #00c4f7;
--accent-soft: #7fd4f2;
}
[data-brand='teco'] .tg-vnitrni p {
max-width: var(--measure);
}
[data-brand='teco'] .tg-vnitrni h2 {
font-size: clamp(1.75rem, 3.4vw, 2.6rem);
line-height: 1.14;
letter-spacing: -0.015em;
margin: 0 0 0.5em;
}
[data-brand='teco'] .tg-vnitrni h3 {
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.3;
margin: 0 0 0.5em;
}
/* barva odkazu v obsahu. ⛔ NE u odkazu s VLASTNÍM pozadím (`bg-*` = tlačítko obecného bloku, např. „PDF“ v DownloadList
s text-white): tg.css je mimo vrstvy, takže tohle pravidlo přebije KAŽDOU utilitu Tailwindu ⇒ tmavomodrý text na navy,
kontrast ~3,0:1 (měřeno 18. 10. na /dokumentace/; od 5946e80). ⛔ Ne do @layer base — tam by ho přebilo
`.prose-content [&_a]:text-primary` (components) a odkazy v textu TG by dostaly barvu micronicu. */
[data-brand='teco'] .tg-vnitrni a:not(.tg-btn, .tg-tb, [class*='bg-']) {
color: var(--brand-text);
}
/* hero pás vnitřní stránky — hlavička leží přes něj jako na úvodu (data-tg-hero) */
[data-brand='teco'] .tg-vh {
position: relative;
background: var(--deep);
color: #fafcfd;
overflow: hidden;
}
[data-brand='teco'] .tg-vh-in {
max-width: 1280px;
margin: 0 auto;
padding: 150px 40px 72px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
[data-brand='teco'] .tg-vh .tg-lab {
color: var(--accent);
}
[data-brand='teco'] .tg-vnitrni .tg-vh :is(h1, h2) {
color: #fafcfd;
font-size: clamp(2.4rem, 5vw, 3.75rem);
line-height: 1.05;
margin: 14px 0 0;
}
[data-brand='teco'] .tg-vh .tg-lead {
color: #ccdae1;
margin-top: 20px;
max-width: 34rem;
}
[data-brand='teco'] .tg-vh-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 30px;
}
[data-brand='teco'] .tg-vh .tg-btn-fill,
[data-brand='teco'] .tg-pas .tg-btn-fill {
background: #0a6699;
color: #fff;
}
[data-brand='teco'] .tg-vh .tg-btn-fill:hover,
[data-brand='teco'] .tg-pas .tg-btn-fill:hover {
background: #fff;
color: #0b3f63;
}
[data-brand='teco'] .tg-vh .tg-btn-ghost {
border-color: rgba(255, 255, 255, 0.55);
color: #fff;
}
[data-brand='teco'] .tg-vh-foto {
position: relative;
aspect-ratio: 4 / 3;
background: #13283a;
margin: 0;
}
[data-brand='teco'] .tg-cover {
object-fit: cover;
}
/* kotvy pod hero — anchorNav */
[data-brand='teco'] .tg-kotvy {
background: var(--paper);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 30;
}
[data-brand='teco'] .tg-kotvy-in {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
display: flex;
gap: 4px;
overflow-x: auto;
}
[data-brand='teco'] .tg-vnitrni .tg-kotvy a {
display: block;
padding: 16px 18px;
font-size: 0.875rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
border-bottom: 3px solid transparent;
}
[data-brand='teco'] .tg-vnitrni .tg-kotvy a:hover {
color: var(--brand-text);
border-bottom-color: var(--brand);
text-decoration: none;
}
/* sekce — tóny střídá TÉMA podle pořadí (bloky pole pro pozadí nemají) */
[data-brand='teco'] .tg-s {
/* 88 → 52 (Zdeněk 18. 10.: „nad titulky zbytečně mnoho prostoru“) */
padding: 52px 0;
background: var(--paper);
scroll-margin-top: 60px;
}
[data-brand='teco'] .tg-s-2 {
background: var(--paper-2);
}
[data-brand='teco'] .tg-s-in {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
[data-brand='teco'] .tg-s-hlava {
max-width: 46rem;
margin-bottom: 32px;
}
/* výčet „Kombinace“ na /rada// (Lukáš L3, Zdeněk GO 20. 10.): popisek tučně + text, řádky pod sebou */
[data-brand='teco'] .tg-vycet {
margin: 14px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 6px;
}
[data-brand='teco'] .tg-vycet strong {
color: var(--text-strong);
}
[data-brand='teco'] .tg-s-hlava .tg-lead {
margin-top: 8px;
}
/* textSection s obrázkem L/R */
[data-brand='teco'] .tg-ts {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
}
[data-brand='teco'] .tg-obr-vlevo .tg-ts-obr {
order: -1;
}
/* L6 (Zdeněk GO 20. 10.): svislý render POD obrázkem předchozího bloku (31 BLOK 8 image2 → TgBlocks `tg-ts-druhy`)
a vedle tabulky „Co je pod sklem“ na úvodu (33 BLOK 7 image → TgHome `tg-tech-obr`). Render 900×1800 s průhledností. */
[data-brand='teco'] .tg-ts > .tg-ts-druhy {
margin: 8px 0 0;
grid-column: 2;
justify-self: center;
width: min(220px, 60%);
}
[data-brand='teco'] .tg-tech-obsah {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 48px;
align-items: center;
}
[data-brand='teco'] .tg-tech-obr {
margin: 0;
}
[data-brand='teco'] .tg-tech-img,
[data-brand='teco'] .tg-ts-druhy img {
width: 100%;
height: auto;
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-ts > .tg-ts-druhy {
grid-column: auto;
width: min(180px, 50%);
}
[data-brand='teco'] .tg-tech-obsah {
grid-template-columns: 1fr;
gap: 24px;
}
[data-brand='teco'] .tg-tech-obr {
justify-self: center;
width: min(180px, 50%);
}
}
/* textSection s NÁKRESEM (Zapojení): nadpis nad textem, horní hrana nákresu = horní hrana první odrážky (Zdeněk 18. 10.).
Textový sloupec se rozpustí do mřížky (display: contents): nadpis řádek 1, text i nákres od řádku 2, zarovnání nahoru. */
@media (min-width: 981px) {
[data-brand='teco'] .tg-ts:has(> .tg-nakres) {
align-items: start;
row-gap: 0;
/* poslední řádek pojme zbytek výšky nákresu ⇒ nákres nepřidá prázdné místo mezi řádky textu */
grid-template-rows: auto auto 1fr;
}
[data-brand='teco'] .tg-ts:has(> .tg-nakres) > div {
display: contents;
}
[data-brand='teco'] .tg-ts:has(> .tg-nakres) > div > * {
grid-column: 1;
}
[data-brand='teco'] .tg-ts:has(> .tg-nakres) > .tg-ts-obr {
grid-column: 2;
grid-row: 1 / -1;
}
[data-brand='teco'] .tg-ts:has(> .tg-nakres):has(> div > .tg-s-hlava) > .tg-ts-obr {
grid-row: 2 / -1;
}
[data-brand='teco'] .tg-ts.tg-obr-vlevo:has(> .tg-nakres) > div > * {
grid-column: 2;
}
[data-brand='teco'] .tg-ts.tg-obr-vlevo:has(> .tg-nakres) > .tg-ts-obr {
grid-column: 1;
}
/* hlava je tu položka mřížky ⇒ okraj h2 se s jejím okrajem nesloučí a přičetl by se (Rozměry: h2 → tabulka 44,8 místo 24;
tester kolo 21) */
[data-brand='teco'] .tg-ts:has(> .tg-nakres) > div > .tg-s-hlava > :last-child {
margin-bottom: 0;
}
[data-brand='teco'] .tg-ts:has(> .tg-nakres) > div > .tg-prose > :first-child,
[data-brand='teco'] .tg-ts:has(> .tg-nakres) > div > .tg-prose > ul:first-child > li:first-child {
margin-top: 0;
}
}
[data-brand='teco'] .tg-ts-obr {
position: relative;
background: var(--paper-3);
margin: 0;
}
[data-brand='teco'] .tg-ts-img {
width: 100%;
height: auto;
}
[data-brand='teco'] .tg-odr {
list-style: none;
margin: 18px 0 0;
padding: 0;
}
[data-brand='teco'] .tg-odr li,
[data-brand='teco'] .tg-prose ul > li {
position: relative;
padding: 0 0 12px 30px;
list-style: none;
}
[data-brand='teco'] .tg-odr li::before,
[data-brand='teco'] .tg-prose ul > li::before {
content: '';
position: absolute;
left: 0;
top: 0.8em;
width: 14px;
height: 2px;
background: var(--brand);
}
[data-brand='teco'] .tg-prose ul {
padding-left: 0;
}
[data-brand='teco'] .tg-prose strong {
color: var(--text-strong);
}
/* odkaz se šipkou (cta variant arrow) */
[data-brand='teco'] .tg-sipka {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
color: var(--brand-text);
margin-top: 10px;
}
[data-brand='teco'] .tg-sipka::after {
content: '→';
transition: transform 0.15s;
}
[data-brand='teco'] .tg-sipka:hover::after {
transform: translateX(4px);
}
/* karty s ikonou (iconGrid) — spára jako stěna v6, bez stínů */
[data-brand='teco'] .tg-karty {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
background: var(--line);
}
[data-brand='teco'] .tg-karty.tg-k4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* počet karet nedělitelný třemi (velitel a16214 d): spára je pozadí mřížky ⇒ prázdná buňka by svítila šedě.
Mřížka 6 sloupců, karta přes 2; zbytek se rozloží do celých řad: zbytek 2 ⇒ poslední dvě přes 3 (půlky),
zbytek 1 ⇒ poslední čtyři přes 3 (2 + 2; 7 = 3 + 2 + 2, 4 = 2 × 2), jediná karta přes celou šířku.
Jen nad 980 px — pod tím je mřížka jednosloupcová (níž). Počty dělitelné 3 vypadají jako dosud. */
@media (min-width: 981px) {
[data-brand='teco'] .tg-karty:not(.tg-k4) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
[data-brand='teco'] .tg-karty:not(.tg-k4) > * {
grid-column: span 2;
}
[data-brand='teco'] .tg-karty:not(.tg-k4) > :nth-last-child(2):nth-child(3n + 1),
[data-brand='teco'] .tg-karty:not(.tg-k4) > :nth-last-child(2):nth-child(3n + 1) ~ *,
[data-brand='teco'] .tg-karty:not(.tg-k4) > :nth-last-child(4):nth-child(3n + 1),
[data-brand='teco'] .tg-karty:not(.tg-k4) > :nth-last-child(4):nth-child(3n + 1) ~ * {
grid-column: span 3;
}
[data-brand='teco'] .tg-karty:not(.tg-k4) > :only-child {
grid-column: 1 / -1;
}
}
[data-brand='teco'] .tg-karta {
background: var(--paper-2);
padding: 34px 30px 36px;
}
[data-brand='teco'] .tg-s-2 .tg-karta {
background: var(--paper);
}
[data-brand='teco'] .tg-karta svg,
[data-brand='teco'] .tg-karta-obr {
width: 34px;
height: 34px;
color: var(--brand);
}
[data-brand='teco'] .tg-vnitrni .tg-karta h3 {
margin: 22px 0 8px;
font-size: 1.125rem;
}
[data-brand='teco'] .tg-vnitrni .tg-karta p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.65;
color: var(--muted);
}
/* callout (textSection boxed) — modrý pruh vlevo, JEDNA pevná ikona */
[data-brand='teco'] .tg-callout {
display: flex;
gap: 20px;
align-items: flex-start;
background: var(--paper-3);
border-left: 4px solid var(--brand);
padding: 24px 28px;
}
[data-brand='teco'] .tg-callout > svg {
flex: none;
color: var(--brand);
margin-top: 2px;
}
[data-brand='teco'] .tg-vnitrni .tg-callout p {
max-width: none;
}
/* tabulky v textu — modrá hlavička; od 18. 10. styl katalogových listů TECO (Zdeněk: „dát do tabulky, zebra s lehkým
modrým nádechem, méně prostoru mezi řádky“; vzor marketing/katalog/base params-table: rámeček, předěl za 1. sloupcem,
zebra #e5ecf7 — tady jemnější, na obrazovce) */
[data-brand='teco'] .tg-prose table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
background: var(--paper);
border: 1px solid var(--line);
}
/* ⛔ ne `display:block` na tabulce (změřeno 17. 10.: tabulka se zúžila na obsah, zbytek šířky prázdný) —
posouvání na úzkém dělá obal textu */
[data-brand='teco'] .tg-prose {
overflow-x: auto;
}
[data-brand='teco'] .tg-prose th {
background: var(--brand);
color: #fff;
text-align: left;
font-weight: 700;
padding: 9px 14px;
font-size: 0.8125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 0;
}
[data-brand='teco'] .tg-prose td {
padding: 7px 14px;
border: 0;
border-top: 1px solid var(--line-soft);
vertical-align: top;
text-align: left;
}
/* zebra od PRVNÍHO DATOVÉHO řádku (1. datový bílý, 2. modrý…) — Lexical dává hlavičku jako 1. řádek tbody, proto
u tabulky s hlavičkou liché řádky od 3. Nádech .13 (Zdeněk 18. 10.: .07 „nevidí“; text na zebře ≥ 7:1, změřeno). */
[data-brand='teco'] .tg-prose tbody tr:nth-child(even) td {
background: rgba(0, 122, 168, 0.13);
}
[data-brand='teco'] .tg-prose table:has(> tbody > tr:first-child > th) tbody tr:nth-child(even) td {
background: none;
}
[data-brand='teco'] .tg-prose table:has(> tbody > tr:first-child > th) tbody tr:nth-child(odd):not(:first-child) td {
background: rgba(0, 122, 168, 0.13);
}
[data-brand='teco'] .tg-prose td:first-child {
font-weight: 600;
color: var(--text-strong);
border-right: 1px solid var(--line);
}
/* sloučená buňka (stejná hodnota ve všech řádcích ⇒ rowspan, RichTextContent `tg`): bez zebry, na střed jako v listech TECO */
[data-brand='teco'] .tg-prose td[rowspan] {
background: var(--paper);
vertical-align: middle;
border-right: 1px solid var(--line-soft);
}
/* zásady ochrany osobních údajů = DLOUHÝ DOKUMENT (Zdeněk 18. 10.: „úzké sloupce se střídají se širokými“ — odstavce měly
620 px, nadpisy/seznamy/tabulky 1200): JEDEN textový sloupec 46rem (jako hlava sekce) pro všechny bloky, tabulky v šířce
sloupce, kapitola (h2) s odstupem 48 px. Jen tahle stránka (data-tg-stranka z TgBlocks). */
[data-brand='teco'] [data-tg-stranka='ochrana-osobnich-udaju'] .tg-s .tg-prose {
max-width: 46rem;
}
[data-brand='teco'] [data-tg-stranka='ochrana-osobnich-udaju'] .tg-s .tg-prose > * {
max-width: none;
}
[data-brand='teco'] [data-tg-stranka='ochrana-osobnich-udaju'] .tg-s .tg-prose > h2:not(:first-child) {
margin-top: 48px;
}
/* kroky (timeline) — velké tabulkové číslice jako na úvodu */
[data-brand='teco'] .tg-kroky {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2px;
background: var(--line);
}
[data-brand='teco'] .tg-krok {
background: var(--paper);
padding: 30px 26px 34px;
}
[data-brand='teco'] .tg-krok .tg-fig {
color: var(--brand);
display: block;
margin-bottom: 18px;
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
[data-brand='teco'] .tg-vnitrni .tg-krok h3 {
font-size: 1.0625rem;
margin: 0 0 6px;
}
[data-brand='teco'] .tg-vnitrni .tg-krok p {
margin: 0;
font-size: 0.9375rem;
color: var(--muted);
}
/* fotopás (banner) */
[data-brand='teco'] .tg-pas {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
color: #fff;
overflow: hidden;
background: var(--deep);
}
[data-brand='teco'] .tg-pas::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(11, 24, 37, 0.92) 0, rgba(11, 24, 37, 0.78) 45%, rgba(11, 24, 37, 0.15) 100%);
}
[data-brand='teco'] .tg-pas-in {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
width: 100%;
}
[data-brand='teco'] .tg-vnitrni .tg-pas h2 {
color: #fff;
max-width: 36rem;
}
[data-brand='teco'] .tg-vnitrni .tg-pas p {
color: #e3ecf1;
max-width: 34rem;
}
[data-brand='teco'] :is(.tg-vh, .tg-pas) .tg-word {
color: #fff;
}
[data-brand='teco'] :is(.tg-vh, .tg-pas) .tg-word .at {
color: var(--accent);
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-vh-in {
grid-template-columns: 1fr;
padding: 120px 22px 48px;
gap: 32px;
}
[data-brand='teco'] .tg-s {
padding: 36px 0;
}
[data-brand='teco'] :is(.tg-s-in, .tg-kotvy-in, .tg-pas-in) {
padding-left: 22px;
padding-right: 22px;
}
[data-brand='teco'] .tg-ts {
grid-template-columns: 1fr;
gap: 28px;
}
[data-brand='teco'] .tg-obr-vlevo .tg-ts-obr {
order: 0;
}
[data-brand='teco'] :is(.tg-karty, .tg-karty.tg-k4, .tg-kroky) {
grid-template-columns: 1fr;
}
[data-brand='teco'] .tg-pas::before {
background: rgba(11, 24, 37, 0.82);
}
[data-brand='teco'] .tg-prose :is(th, td) {
padding: 10px 12px;
}
}
/* ══ TECHNICKÝ LIST TG (/rada//) — mockup v6/touch-evo.html, krok ② ══ */
[data-brand='teco'] .tg-drobky {
font-size: 0.8125rem;
color: #9fb2bf;
margin-bottom: 22px;
}
[data-brand='teco'] .tg-vnitrni .tg-drobky a {
color: #ccdae1;
}
[data-brand='teco'] .tg-vh-suffix {
margin-top: 8px;
font-weight: 600;
}
[data-brand='teco'] .tg-vh-render {
background: radial-gradient(circle at 60% 45%, #1d3a52 0, #0f2233 70%);
display: flex;
align-items: center;
justify-content: center;
}
[data-brand='teco'] .tg-render-img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 24px;
}
[data-brand='teco'] .tg-cipy {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
[data-brand='teco'] .tg-cipy :is(span, a) {
border: 1px solid var(--line);
background: var(--paper);
padding: 6px 14px;
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
border-radius: 2px;
}
[data-brand='teco'] .tg-vh .tg-cipy span {
background: transparent;
border-color: rgba(255, 255, 255, 0.3);
color: #ccdae1;
}
[data-brand='teco'] .tg-vnitrni .tg-cipy a {
color: var(--brand-text);
}
[data-brand='teco'] .tg-cipy a:hover {
border-color: var(--brand);
text-decoration: none;
}
[data-brand='teco'] .tg-s-3 {
background: var(--paper-3);
}
[data-brand='teco'] .tg-list-karty {
margin-top: 36px;
}
[data-brand='teco'] .tg-list-karty .tg-lab {
color: var(--brand-text);
}
[data-brand='teco'] .tg-vybava {
margin-top: 40px;
}
[data-brand='teco'] .tg-odr-skupina {
font-weight: 700;
color: var(--text-strong);
padding-left: 0 !important;
margin-top: 10px;
}
[data-brand='teco'] .tg-odr-skupina::before {
display: none;
}
[data-brand='teco'] .tg-tab-obal {
overflow-x: auto;
border: 1px solid var(--line);
}
[data-brand='teco'] .tg-tab-list {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
background: var(--paper);
}
[data-brand='teco'] .tg-tab-list thead th {
background: var(--brand);
color: #fff;
text-align: left;
font-weight: 700;
padding: 13px 18px;
font-size: 0.8125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
[data-brand='teco'] .tg-tab-list :is(tbody th, td) {
padding: 12px 18px;
border-top: 1px solid var(--line-soft);
vertical-align: top;
text-align: left;
}
[data-brand='teco'] .tg-tab-list tbody th {
font-weight: 600;
color: var(--text-strong);
width: 28%;
}
[data-brand='teco'] .tg-tab-list tbody tr:nth-child(even) :is(th, td) {
background: var(--paper-2);
}
[data-brand='teco'] .tg-tab-list .tg-skupina td {
background: var(--paper-4) !important;
font-weight: 700;
color: var(--brand-text);
font-size: 0.8125rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
[data-brand='teco'] .tg-num {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
[data-brand='teco'] .tg-blok {
display: block;
}
[data-brand='teco'] .tg-vnitrni .tg-pozn {
font-size: 0.8125rem;
color: var(--muted);
margin-top: 12px;
max-width: none;
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-tab-list :is(thead th, tbody th, td) {
padding: 10px 12px;
}
}
[data-brand='teco'] .tg-vnitrni a.tg-karta-odkaz {
display: block;
color: inherit;
text-decoration: none;
}
[data-brand='teco'] .tg-vnitrni a.tg-karta-odkaz:hover h3 {
color: var(--brand-text);
}
[data-brand='teco'] .tg-vnitrni .tg-karta-odkaz h3 {
margin-top: 0;
}
/* ── vnitřní stránky ③: tvrzení, štítek obrázku, kontaktní karty, dveře (BLOKY-FORMAT) ── */
[data-brand='teco'] .tg-vnitrni .tg-tvrzeni {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-strong);
margin: 22px 0 0;
padding-left: 18px;
border-left: 3px solid var(--brand);
}
[data-brand='teco'] .tg-stitek {
position: absolute;
top: 0;
left: 0;
background: var(--brand);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 7px 12px;
}
[data-brand='teco'] .tg-kontakty {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
background: var(--line);
}
[data-brand='teco'] .tg-kontakt {
background: var(--paper-2);
padding: 32px 30px;
}
[data-brand='teco'] .tg-s-2 .tg-kontakt {
background: var(--paper);
}
[data-brand='teco'] .tg-vnitrni .tg-kontakt h3 {
margin: 12px 0 4px;
font-size: 1.25rem;
}
[data-brand='teco'] .tg-vnitrni .tg-role {
color: var(--muted);
font-size: 0.9375rem;
margin-bottom: 18px;
}
[data-brand='teco'] .tg-kontakt .tg-prose {
font-size: 0.9375rem;
}
[data-brand='teco'] .tg-kontakt.tg-zvyrazneny {
background: var(--deep);
color: var(--on-ink);
}
[data-brand='teco'] .tg-vnitrni .tg-zvyrazneny :is(h3, strong) {
color: #fff;
}
[data-brand='teco'] .tg-vnitrni .tg-zvyrazneny :is(.tg-role, p, li) {
color: #ccdae1;
}
[data-brand='teco'] .tg-zvyrazneny .tg-lab {
color: var(--accent);
}
[data-brand='teco'] .tg-vnitrni .tg-zvyrazneny a:not(.tg-btn, .tg-tb) {
color: var(--accent-soft);
}
[data-brand='teco'] .tg-zvyrazneny .tg-word {
color: #fff;
}
[data-brand='teco'] .tg-zvyrazneny .tg-word .at {
color: var(--accent);
}
[data-brand='teco'] .tg-vnitrni .tg-wall-dvere {
max-width: none;
}
[data-brand='teco'] .tg-dvere-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-brand='teco'] .tg-dvere-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-brand='teco'] .tg-dvere-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* víc než 4 dveře: po třech v 6sloupcové mřížce, zbytek do celých řad jako u karet (5 = 3 + 2, 7 = 3 + 2 + 2).
Jen nad 980 px — pod tím jednosloupcová (níž); span by tam vyrobil implicitní sloupce. */
@media (min-width: 981px) {
[data-brand='teco'] .tg-dvere-n {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
[data-brand='teco'] .tg-dvere-n > * {
grid-column: span 2;
}
[data-brand='teco'] .tg-dvere-n > :nth-last-child(2):nth-child(3n + 1),
[data-brand='teco'] .tg-dvere-n > :nth-last-child(2):nth-child(3n + 1) ~ *,
[data-brand='teco'] .tg-dvere-n > :nth-last-child(4):nth-child(3n + 1),
[data-brand='teco'] .tg-dvere-n > :nth-last-child(4):nth-child(3n + 1) ~ * {
grid-column: span 3;
}
}
[data-brand='teco'] .tg-vnitrni .tg-dv p {
color: var(--muted);
max-width: none;
}
[data-brand='teco'] .tg-vnitrni .tg-dv .tg-prim {
margin-top: auto;
margin-bottom: 0;
padding-top: 8px;
}
[data-brand='teco'] .tg-vnitrni .tg-dv .tg-tissi {
margin: 8px 0 0;
font-size: 0.875rem;
}
@media (max-width: 980px) {
[data-brand='teco'] :is(.tg-kontakty, .tg-dvere-2, .tg-dvere-3, .tg-dvere-4, .tg-dvere-n) {
grid-template-columns: 1fr;
}
}
/* nákres SVG (Media bez rozměrů) — prostý ![]() , šířka sloupce */
[data-brand='teco'] .tg-svg {
display: block;
width: 100%;
height: auto;
}
[data-brand='teco'] .tg-vh-foto .tg-svg,
[data-brand='teco'] .tg-pas .tg-svg {
position: absolute;
inset: 0;
height: 100%;
object-fit: contain;
}
/* ══ KIT v6 — připomínky Zdeňka k úvodu 18. 10. (marketing ba0d5ee: v6/kit.html + komponenty.css, velitel ce3d5b) ══
Třídy kitu přejmenované do jmenného prostoru tg-*; jen tokeny tg.css. */
/* ① TLAČÍTKA — plné / obrys, šipka ::after (posune se), tmavý podklad podle rodiče */
[data-brand='teco'] .tg-tb {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 24px;
border-radius: 2px;
font-weight: 700;
font-size: 0.9375rem;
line-height: 1.2;
border: 2px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
text-decoration: none !important;
}
[data-brand='teco'] .tg-tb::after {
content: '→';
transition: transform 0.15s;
}
[data-brand='teco'] .tg-tb:hover::after {
transform: translateX(3px);
}
[data-brand='teco'] .tg-tb-plne {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
[data-brand='teco'] .tg-tb-plne:hover {
background: #00618a;
border-color: #00618a;
color: #fff;
}
[data-brand='teco'] .tg-tb-obrys {
background: transparent;
border-color: var(--brand);
color: var(--brand-text);
}
[data-brand='teco'] .tg-tb-obrys:hover {
background: var(--brand);
color: #fff;
}
[data-brand='teco'] :is(.tg-hero, .tg-vh, .tg-stuha, .tg-pas, .tg-zvyrazneny) .tg-tb-plne {
background: #0a6699;
border-color: #0a6699;
}
[data-brand='teco'] :is(.tg-hero, .tg-vh, .tg-stuha, .tg-pas, .tg-zvyrazneny) .tg-tb-plne:hover {
background: #fff;
border-color: #fff;
color: #0b3f63;
}
[data-brand='teco'] :is(.tg-hero, .tg-vh, .tg-stuha, .tg-pas, .tg-zvyrazneny) .tg-tb-obrys {
border-color: rgba(255, 255, 255, 0.7);
color: #fff;
}
[data-brand='teco'] :is(.tg-hero, .tg-vh, .tg-stuha, .tg-pas, .tg-zvyrazneny) .tg-tb-obrys:hover {
background: #fff;
border-color: #fff;
color: #0b3f63;
}
[data-brand='teco'] .tg-tb-rada {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
[data-brand='teco'] .tg-home .tg-stuha-ven {
margin-top: 20px;
}
/* ② DLAŽDICE S IKONOU — sada (úvod), karty iconGridu, karty listu; A = zdvih + okraj + ikona, B = + náklon a pruh */
[data-brand='teco'] .tg-dl {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
background: none;
}
[data-brand='teco'] .tg-dl.tg-k4,
[data-brand='teco'] .tg-dl[data-cols='4'] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
[data-brand='teco'] .tg-dl[data-cols='2'] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* odsazení sekce nese .tg-in (ne mřížka) — jinak „Pro partnery“ pod dlaždicemi o 72 px níž (snímek 66851bd) */
[data-brand='teco'] .tg-sada .tg-in {
padding-bottom: 72px;
}
[data-brand='teco'] .tg-sada .tg-sada-dal {
margin: 32px 0 0;
padding-bottom: 0;
}
[data-brand='teco'] .tg-dla {
position: relative;
display: block;
background: var(--paper);
border: 1px solid var(--line);
padding: 34px 30px 56px;
color: var(--text);
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
[data-brand='teco'] .tg-dla .tg-cis {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
color: #4f5963;
}
[data-brand='teco'] .tg-dla svg {
width: 40px;
height: 40px;
margin-top: 36px;
color: #4f5963;
transition: color 0.2s;
stroke-width: 1.6;
}
[data-brand='teco'] .tg-dla :is(.tg-karta-obr, .tg-lab) + h3,
[data-brand='teco'] .tg-dla h3 {
margin: 18px 0 6px;
font-size: 1.125rem;
}
[data-brand='teco'] .tg-dla p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--muted);
}
[data-brand='teco'] .tg-dla .tg-vic {
position: absolute;
left: 30px;
bottom: 22px;
font-weight: 700;
font-size: 0.875rem;
color: var(--brand-text);
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.2s, transform 0.2s;
}
[data-brand='teco'] .tg-dla .tg-vic::after {
content: ' →';
}
[data-brand='teco'] .tg-dla:hover,
[data-brand='teco'] .tg-dla:focus-visible {
transform: translateY(-6px);
border-color: var(--brand);
box-shadow: 0 14px 30px rgba(0, 60, 90, 0.14);
}
[data-brand='teco'] .tg-dla:hover svg,
[data-brand='teco'] .tg-dla:focus-visible svg {
color: var(--brand);
}
[data-brand='teco'] .tg-dla:hover .tg-vic,
[data-brand='teco'] .tg-dla:focus-visible .tg-vic {
opacity: 1;
transform: none;
}
[data-brand='teco'] .tg-dl-b .tg-dla {
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transform-style: preserve-3d;
}
[data-brand='teco'] .tg-dl-b .tg-dla:hover {
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
}
[data-brand='teco'] .tg-dl-b .tg-dla::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: var(--brand);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s;
}
[data-brand='teco'] .tg-dl-b .tg-dla:hover::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
[data-brand='teco'] .tg-dla,
[data-brand='teco'] .tg-dla * {
transition: none !important;
}
[data-brand='teco'] .tg-dla:hover {
transform: none !important;
}
}
/* „Co si vezmete ke klientovi“ (Zdeněk 18. 10. 07:3x): lehoučký namodralý stín v klidu a ikony světle modré jako dřív
ikony prostor (--accent); při najetí dál tmavší modrá (kit A). Jen tahle sekce úvodu — karty vnitřních stránek beze změny. */
[data-brand='teco'] .tg-sada .tg-dla {
box-shadow: 0 4px 16px rgba(0, 124, 177, 0.09);
}
[data-brand='teco'] .tg-sada .tg-dla svg {
color: var(--accent);
}
[data-brand='teco'] .tg-sada .tg-dla:is(:hover, :focus-visible) svg {
color: var(--brand);
}
/* ③ FOTODLAŽDICE PROSTOR — vysoké sloupce, popis dole; fotky čekají ⇒ TÓN podle prostoru (placeholder kitu) */
[data-brand='teco'] .tg-pr {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
padding-bottom: 72px;
}
[data-brand='teco'] .tg-pr[data-cols='4'] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
[data-brand='teco'] .tg-pr[data-cols='3'] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-brand='teco'] .tg-prd {
position: relative;
aspect-ratio: 2 / 3.4;
overflow: hidden;
background: var(--deep);
color: #fff;
display: flex;
align-items: flex-end;
}
[data-brand='teco'] .tg-prd-obr {
position: absolute;
inset: 0;
transition: transform 0.35s;
}
[data-brand='teco'] .tg-prd:hover .tg-prd-obr {
transform: scale(1.06);
}
[data-brand='teco'] .tg-prd-obr::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 24, 37, 0) 35%, rgba(11, 24, 37, 0.9) 100%);
}
[data-brand='teco'] .tg-prd-txt {
position: relative;
padding: 20px 18px;
}
[data-brand='teco'] .tg-home .tg-prd h3 {
color: #fff;
margin: 0;
font-size: 1.125rem;
}
[data-brand='teco'] .tg-home .tg-prd p {
color: #ccdae1;
margin: 6px 0 0;
font-size: 0.875rem;
line-height: 1.5;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s, opacity 0.3s;
}
[data-brand='teco'] .tg-home .tg-prd:is(:hover, :focus-within, :focus-visible) p {
max-height: 8em;
opacity: 1;
}
[data-brand='teco'] .tg-prd > svg {
position: absolute;
top: 18px;
left: 18px;
width: 34px;
height: 34px;
/* bílá (Zdeněk 18. 10. 07:3x: světle modré ikony na fotkách nejsou vidět); stín drží obrys i na světlé fotce (Zdravotnictví) */
color: #fff;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
/* fotky prostor (Media micronicu 240×844): výřez na střed sloupce; ×1.05 schová bílý okrajový sloupec zdroje bydlení (marketing, komponenty.css) */
[data-brand='teco'] .tg-prd-obr img {
object-fit: cover;
object-position: center 60%;
transform: scale(1.05);
}
[data-brand='teco'] .tg-ton-bydleni .tg-prd-obr {
background: linear-gradient(160deg, #2b5a74, #0f2233);
}
[data-brand='teco'] .tg-ton-hotely .tg-prd-obr {
background: linear-gradient(160deg, #5a4a2b, #1d160c);
}
[data-brand='teco'] .tg-ton-kancelare .tg-prd-obr {
background: linear-gradient(160deg, #3b4a5a, #111a24);
}
[data-brand='teco'] .tg-ton-zdravotnictvi .tg-prd-obr {
background: linear-gradient(160deg, #2b6a64, #0c2220);
}
[data-brand='teco'] .tg-ton-verejne .tg-prd-obr {
background: linear-gradient(160deg, #4a3b5a, #17111f);
}
/* ④ TABULKA NA ÚVODU — styl vnitřních (tg-tab-list) + tlačítka pod ní */
/* bílá jako ve kitu (④ „s“) — šedá splývala s prostředím nad a výběrem cesty pod (snímek 66851bd) */
[data-brand='teco'] .tg-tech {
background: var(--paper);
}
[data-brand='teco'] .tg-tech .tg-in {
padding-bottom: 72px;
}
[data-brand='teco'] .tg-tab-uvod {
max-width: 760px;
margin-top: 8px;
}
/* ⑥ VÝBĚR CESTY (dřív „dveře“) — písmo karet jako okolí, tlačítka; platí i pro dveře vnitřních stránek */
[data-brand='teco'] .tg-cesty-sekce {
background: var(--paper-3);
}
[data-brand='teco'] .tg-cesty-sekce .tg-in {
padding-bottom: 72px;
}
[data-brand='teco'] .tg-cesty {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
background: var(--line);
}
[data-brand='teco'] .tg-cesty.tg-dvere-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-brand='teco'] .tg-cesty.tg-dvere-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
[data-brand='teco'] .tg-cesta {
background: var(--paper);
padding: 32px 30px 34px;
display: flex;
flex-direction: column;
}
[data-brand='teco'] .tg-cesta h3 {
font-size: 1.1875rem;
margin: 0 0 8px;
}
[data-brand='teco'] .tg-cesta p {
font-size: 1rem;
line-height: 1.7;
color: var(--muted);
margin: 0;
max-width: none;
}
[data-brand='teco'] .tg-cesta .tg-tb-rada {
margin-top: auto;
padding-top: 22px;
}
/* přehled řady na úvodu (#rada, 18. 10.: místo zrušené /rada/; Zdeněk „krátký seznam, bez obrázků, tlačítko na produkt“) —
kompaktní karty v řadě; flex místo mřížky ⇒ neúplný řádek se roztáhne, nezůstane šedá prázdná buňka */
[data-brand='teco'] .tg-cesty-sekce.tg-rada-sekce {
background: var(--paper);
}
[data-brand='teco'] .tg-cesty.tg-rada {
display: flex;
flex-wrap: wrap;
}
[data-brand='teco'] .tg-rada .tg-cesta {
flex: 1 1 200px;
padding: 22px 20px 24px;
}
[data-brand='teco'] .tg-rada .tg-cesta h3 {
font-size: 1.0625rem;
}
[data-brand='teco'] .tg-rada .tg-cesta p {
font-size: 0.9375rem;
line-height: 1.55;
}
[data-brand='teco'] .tg-rada .tg-cesta .tg-tb-rada {
padding-top: 16px;
}
/* ⑦ PATIČKA — logo TECO místo slovní značky */
[data-brand='teco'] .tg-ft-logo img {
width: 170px;
height: auto;
display: block;
margin-bottom: 14px;
}
@media (max-width: 980px) {
[data-brand='teco'] :is(.tg-dl, .tg-dl.tg-k4, .tg-dl[data-cols], .tg-cesty, .tg-cesty.tg-dvere-2, .tg-cesty.tg-dvere-4) {
grid-template-columns: 1fr;
}
[data-brand='teco'] :is(.tg-pr, .tg-pr[data-cols]) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-brand='teco'] .tg-home .tg-prd p {
max-height: none;
opacity: 1;
}
/* lichá poslední fotodlaždice přes celou šířku (5 prostor = 2 + 2 + 1, jinak prázdná půlka) */
[data-brand='teco'] .tg-pr > .tg-prd:last-child:nth-child(odd) {
grid-column: 1 / -1;
aspect-ratio: 16 / 10;
}
}
/* kit: karty výběru cesty na úvodu bez horního pruhu (.tg-dv ho nese pro dveře vnitřních stránek) */
[data-brand='teco'] .tg-cesty .tg-cesta {
border-top: 0;
}
/* ══ HLAVIČKA VNITŘNÍCH STRÁNEK — gradient jako tecomat.cz (Zdeněk 18. 10. 07:5x: „podobný gradient, nikoliv souvislý
tmavěmodrý podklad“; velitel 3a23b9 změřil tecomat hero: záře shora #3868a3 → #1c385c → do tmy). Světlé místo VPRAVO
NAHOŘE za fotkou (texty vlevo zůstávají na tmavém), dole tmavší než --deep, ⛔ ne čistě černá. Úvod (.tg-hero) beze změny. */
[data-brand='teco'] :is(.tg-vh, .tg-strop) {
background-color: var(--deep);
background-image: radial-gradient(ellipse 70% 90% at 68% 8%, #2f5f94 0%, #1a3a5e 35%, #0b1825 70%, #07111c 100%);
}
/* ══ /pro-partnery/ připomínky Zdeňka 18. 10. (velitel cb5e42) ══ */
/* A) fotka ovladače v hlavičce jako 4mm SKLO, ne obrázek: bez rámečku (#13283a), světlá hrana dole/vpravo s přechodem
(2 + 2 px = tloušťka), 1px odlesk nahoře, měkký vržený stín. `filter: drop-shadow` na figure ⇒ kopíruje PRŮHLEDNÝ
tvar obrázku (render/výřez skla), ⛔ ne obdélník rámu. Fotka bez průhlednosti dostane totéž kolem svého obdélníku. */
[data-brand='teco'] .tg-vh-foto {
background: none;
filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(2px 3px 0 rgba(205, 220, 232, 0.75))
drop-shadow(2px 2px 0 rgba(95, 125, 150, 0.7)) drop-shadow(0 30px 30px rgba(0, 0, 0, 0.6));
}
/* A5 (Adéla 19. 10.) render na /rada//: velikost jako /pro-partnery/ (sklo ~490 px na 1440), bez světlého podkresu
(světlé hrany výš), jen černý stín. Společné tech-header mají kolem skla ~⅓ průhledna ⇒ scale 1,3; TG-vlastní render
(data-tg-hero, oříznutý na sklo) beze zvětšení. Transformace nezvětší stránku (scrollWidth 390 = 390, měřeno simulací). */
[data-brand='teco'] .tg-vh-foto.tg-vh-render {
filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.7));
}
[data-brand='teco'] .tg-vh-render .tg-render-img {
padding: 0;
transform: scale(1.3);
}
[data-brand='teco'] .tg-vh-render[data-tg-hero] .tg-render-img {
transform: none;
}
/* B) pás (banner): podklad = gradient hlavičky (fotka se pod TG nekreslí — TgBlocks Pas), texty jako .tg-vh.
Pás je nižší než hlavička ⇒ záře posunutá víc doprava a užší: s hodnotami hlavičky padla do štítku vlevo nahoře
(--accent na rgb(42,86,135) = 3,68:1, měřeno 18. 10.). */
[data-brand='teco'] .tg-pas {
background-color: var(--deep);
background-image: radial-gradient(ellipse 50% 120% at 82% 0%, #2f5f94 0%, #1a3a5e 35%, #0b1825 70%, #07111c 100%);
}
[data-brand='teco'] .tg-pas::before {
display: none;
}
[data-brand='teco'] .tg-pas .tg-lab {
color: var(--accent);
}
[data-brand='teco'] .tg-vnitrni .tg-pas h2 {
color: #fff;
}
[data-brand='teco'] .tg-vnitrni .tg-pas p {
color: #ccdae1;
}
/* C) fotodlaždice kolekcí na vnitřní stránce (31 sablona:kolekce → sectorStrip): 3 sloupce, poměr fotek kol-*.jpg (3:2),
název bílý, popis světlý a vždy vidět (≤ 60 znaků); hover zvětší fotku (.tg-prd z úvodu) */
[data-brand='teco'] .tg-pr.tg-pr-kolekce {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding-bottom: 0;
}
[data-brand='teco'] .tg-pr-kolekce .tg-prd {
aspect-ratio: 3 / 2;
text-decoration: none !important;
}
[data-brand='teco'] .tg-vnitrni .tg-prd h3 {
color: #fff;
margin: 0;
font-size: 1.125rem;
}
[data-brand='teco'] .tg-vnitrni .tg-prd p {
color: #ccdae1;
margin: 4px 0 0;
font-size: 0.875rem;
line-height: 1.5;
}
/* F) obrázek přes celou šířku (textSection · obrazek → gallery): schéma CIB, titulek nad, popisek pod */
[data-brand='teco'] .tg-obrazek {
margin: 8px 0 0;
}
[data-brand='teco'] .tg-obrazek img {
display: block;
width: 100%;
height: auto;
max-width: 1200px;
}
[data-brand='teco'] .tg-obrazek figcaption {
margin-top: 14px;
color: var(--muted);
font-size: 0.9375rem;
max-width: 48rem;
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-pr.tg-pr-kolekce {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ══ v2 /pro-partnery/ (Zdeněk 18. 10.: „podle mockupu… ať to vypadá i graficky hezky“; velitel 73abfb; mockup v6/pro-partnery-v2.html) ══ */
/* tabulky Lexicalu nesou INLINE styl buněk (border 1px #ccc, padding 8px — změřeno 18. 10. computed) ⇒ přebít, jinak
modrá hlavička a zebra kitu dostanou šedé mřížky a stísněné buňky; jen pod TG */
[data-brand='teco'] .tg-prose .lexical-table-cell {
border: 0 !important;
padding: 7px 14px !important;
}
[data-brand='teco'] .tg-prose th.lexical-table-cell {
padding: 9px 14px !important;
}
[data-brand='teco'] .tg-prose td.lexical-table-cell {
border-top: 1px solid var(--line-soft) !important;
}
[data-brand='teco'] .tg-prose td.lexical-table-cell:first-child {
border-right: 1px solid var(--line) !important;
}
[data-brand='teco'] .tg-prose td.lexical-table-cell[rowspan] {
background: var(--paper) !important;
border-right: 1px solid var(--line-soft) !important;
}
[data-brand='teco'] .tg-prose .lexical-table-cell p {
margin: 0;
max-width: none;
}
[data-brand='teco'] .tg-prose .lexical-table-container {
margin: 8px 0 24px;
}
/* tabulka hned pod nadpisem sekce: mezera 24 px jako za odstavcem (velitel 868ea9). Dřív 56 = okraj hlavy 32 + okraj tabulky
24, který propadne kontejnerem — .tg-prose má overflow:auto, takže se s okrajem hlavy nesloučí (za odstavcem se sloučí na 24). */
[data-brand='teco'] .tg-s-hlava:has(+ .tg-prose > .lexical-table-container:first-child),
[data-brand='teco'] .tg-s-hlava:has(+ .tg-tab-obal) {
margin-bottom: 24px;
}
/* totéž pro PRVNÍ prvek textu pod hlavou obecně (h2 → odstavec 48 místo 32 na mobilu a v sekcích s fotkou; velitel cb04e3) */
[data-brand='teco'] .tg-s-hlava + .tg-prose > :first-child,
[data-brand='teco'] .tg-s-hlava + .tg-prose > :is(ul, ol):first-child > li:first-child,
[data-brand='teco'] .tg-s-hlava + .tg-prose > .lexical-table-container:first-child,
[data-brand='teco'] .tg-s-hlava + .tg-prose > .lexical-table-container:first-child > table {
margin-top: 0;
}
[data-brand='teco'] .tg-prose td.lexical-table-cell:first-child {
width: 30%;
}
/* mobil: tabulka se 3+ sloupci (TgTabulky: data-tg-stack + data-label) ⇒ řádek pod sebou s popiskem sloupce */
@media (max-width: 560px) {
[data-brand='teco'] .tg-prose table[data-tg-stack] tr:first-child {
display: none;
}
[data-brand='teco'] .tg-prose table[data-tg-stack] :is(tbody, tr, td) {
display: block;
width: 100% !important;
}
[data-brand='teco'] .tg-prose table[data-tg-stack] tr {
border-top: 1px solid var(--line);
padding: 6px 0;
}
[data-brand='teco'] .tg-prose table[data-tg-stack] td.lexical-table-cell {
border: 0 !important;
padding: 4px 14px !important;
background: none !important;
}
/* sloučená buňka (rowspan) platí pro všechny řádky ⇒ na mobilu jako pruh NAHOŘE první karty, ne uprostřed */
[data-brand='teco'] .tg-prose table[data-tg-stack] tr:has(> td[rowspan]) {
display: flex;
flex-direction: column;
}
[data-brand='teco'] .tg-prose table[data-tg-stack] td.lexical-table-cell[rowspan] {
order: -1;
margin: -6px 0 6px;
padding: 8px 14px !important;
background: rgba(0, 122, 168, 0.13) !important;
}
[data-brand='teco'] .tg-prose table[data-tg-stack] td[data-label]:not(:first-child)::before {
content: attr(data-label) ': ';
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
}
/* nákres (SVG/PNG v textSection): bílý rámeček jako mockup .nakres, ne šedá plocha */
[data-brand='teco'] .tg-ts-obr.tg-nakres {
background: var(--paper);
border: 1px solid var(--line);
padding: 16px;
}
/* Text do specifikace (samostatný boxed s titulkem, mockup .spec): rámeček s modrým pruhem vlevo, bez ikony */
[data-brand='teco'] .tg-spec {
background: var(--paper);
border: 1px solid var(--line);
border-left: 4px solid var(--brand);
padding: 32px 36px 30px;
}
[data-brand='teco'] .tg-spec .tg-lead {
margin: 0 0 14px;
}
[data-brand='teco'] .tg-spec-text .tg-prose p {
max-width: none;
font-size: 0.9375rem;
}
[data-brand='teco'] .tg-kopirovat::after {
content: none;
}
[data-brand='teco'] .tg-kopirovat-stav {
align-self: center;
font-size: 0.875rem;
color: var(--text-strong);
}
/* objednací kód v textu (RichTextContent `tg`): bez zlomu na spojovníku */
[data-brand='teco'] .tg-kod {
white-space: nowrap;
}
/* datová struktura (GLASS.BTNs.CLICK): zlom za tečkou () jen pod 360 px, jinak celá (velitel d9a86d) */
@media (min-width: 360px) {
[data-brand='teco'] .tg-ident {
white-space: nowrap;
}
/* ⚠️ nowrap NEPOTLAČÍ — změřeno Chrome 153 na buildu 12910c6 (computed nowrap, identifikátor přesto na 2 řádky) */
[data-brand='teco'] .tg-ident wbr {
display: none;
}
}
/* kolekce v2: 6 vysokých dlaždic v řadě (mockup), popis při najetí; mobil 2 sloupce s popisem */
[data-brand='teco'] .tg-pr.tg-pr-kolekce.tg-pr-kolekce-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* 7 kolekcí (Minimalist 23. 10., velitel 3cb47b): všechny v řadě, sloupce podle počtu (data-cols = počet dlaždic) */
[data-brand='teco'] .tg-pr.tg-pr-kolekce.tg-pr-kolekce-6[data-cols='7'] {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
[data-brand='teco'] .tg-pr-kolekce-6 .tg-prd {
aspect-ratio: 2 / 3.4;
}
[data-brand='teco'] .tg-pr-kolekce-6 .tg-prd p {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s, opacity 0.3s;
}
[data-brand='teco'] .tg-pr-kolekce-6 .tg-prd:is(:hover, :focus-visible) p {
max-height: 8em;
opacity: 1;
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-pr.tg-pr-kolekce.tg-pr-kolekce-6,
[data-brand='teco'] .tg-pr.tg-pr-kolekce.tg-pr-kolekce-6[data-cols='7'] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-brand='teco'] .tg-pr-kolekce-6 .tg-prd {
aspect-ratio: 3 / 2;
}
[data-brand='teco'] .tg-pr-kolekce-6 .tg-prd p {
max-height: none;
opacity: 1;
}
[data-brand='teco'] .tg-spec {
padding: 24px 20px;
}
}
/* ══ KOLÁŽ RENDERŮ v hero /dokumentace/ (30 BLOK 1, Zdeněk 18. 10.; TgKolaz) — 3 + 2 „cihly“: dolní řada posunutá o půl
šířky, stejná velikost, bez překryvu (moduly vpravo musí zůstat vidět, marketing 162bfd1). Mobil 2 sloupce, pátý na střed. */
[data-brand='teco'] .tg-kolaz {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 22px 16px;
}
[data-brand='teco'] .tg-kolaz li {
grid-column: span 2;
}
[data-brand='teco'] .tg-kolaz li:nth-child(4) {
grid-column: 2 / span 2;
}
[data-brand='teco'] .tg-kolaz li:nth-child(5) {
grid-column: 4 / span 2;
}
[data-brand='teco'] .tg-vnitrni .tg-kolaz a {
display: block;
color: #ccdae1;
text-align: center;
text-decoration: none;
}
[data-brand='teco'] .tg-vnitrni .tg-kolaz a:hover {
color: #fff;
}
[data-brand='teco'] .tg-kolaz-obr {
position: relative;
display: block;
aspect-ratio: 1600 / 919;
filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45));
transition: transform 0.2s;
}
[data-brand='teco'] .tg-kolaz a:hover .tg-kolaz-obr {
transform: translateY(-3px);
}
[data-brand='teco'] .tg-kolaz-img {
object-fit: contain;
}
[data-brand='teco'] .tg-kolaz-nazev {
display: block;
margin-top: 8px;
font-size: 0.8125rem;
line-height: 1.3;
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-kolaz {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px 14px;
}
[data-brand='teco'] .tg-kolaz li:nth-child(4) {
grid-column: span 2;
}
[data-brand='teco'] .tg-kolaz li:nth-child(5) {
grid-column: 2 / span 2;
}
}
/* ══ /design/ „Kam dál“ (dřív „Kde dál“) (36 R5, 18. 10.) — prostý seznam odkazů na hotové stránky ══ */
[data-brand='teco'] .tg-kde-dal ul {
margin: 0;
padding-left: 1.2em;
}
[data-brand='teco'] .tg-kde-dal li + li {
margin-top: 10px;
}
[data-brand='teco'] .tg-design #vlastni-grafika {
scroll-margin-top: 16px;
}
/* poznámka a podtitul seznamu ke stažení (DownloadList) přes šířku seznamu — `.tg-vnitrni p` je drží na --measure
(poznámka pod katalogem 12 px písmem zalomená na 434 px, 18. 10.) */
[data-brand='teco'] .tg-vnitrni [data-tg-blok='downloadList'] p {
max-width: none;
}
/* seznamy ke stažení seskupené do jedné sekce (TgBlocks `.tg-stazeni` — ⛔ ne `.tg-dl`, to jsou dlaždice; velitel d23891): vnitřní micronický `section.section` má 64/64
(mobil 40/40) ⇒ mezi skupinami by bylo 128 px. Uvnitř skupiny jen mezera skupin DownloadList (gap-10 = 40 px);
horní odsazení první a spodní poslední zůstává (ostatní odstupy stránky beze změny). */
[data-brand='teco'] .tg-stazeni:has(+ .tg-stazeni) section.section {
padding-bottom: 0;
}
[data-brand='teco'] .tg-stazeni + .tg-stazeni section.section {
padding-top: 0;
}
[data-brand='teco'] .tg-stazeni + .tg-stazeni {
margin-top: 40px;
}
[data-brand='teco'] .tg-stazeni {
scroll-margin-top: 16px;
}
/* ══ /kontakt/ DÁVKA 3 (Zdeněk 18. 10.: „rozházené; MICRONIC viditelnější než TECO“; velitel 0ec4f2, 34 @ marketing) ══
① obrázek hlavičky = grafika tecomat.cz s VLASTNÍM tmavým pozadím ⇒ bez rámu a 3D stínu skla, okraje prolnuté do gradientu */
[data-brand='teco'] [data-tg-stranka='kontakt'] .tg-vh-foto {
filter: none;
-webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 55%, transparent 100%);
mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 55%, transparent 100%);
}
/* ② TECO = JEDINÁ dominantní karta přes šířku obsahu (tmavá jako dřívější zvýrazněná karta): vlevo kontakty, vpravo zástupci */
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod > .tg-s-in {
max-width: 1200px; /* hrana karty = hrana obsahu ostatních sekcí (.tg-s-in 1280 − 2 × 40) */
background: var(--deep);
color: #ccdae1;
padding: 44px 48px 48px;
}
[data-brand='teco'] .tg-vnitrni[data-tg-stranka='kontakt'] #obchod :is(h2, strong) {
color: #fff;
}
[data-brand='teco'] .tg-vnitrni[data-tg-stranka='kontakt'] #obchod :is(.tg-lead, p, li) {
color: #ccdae1;
}
[data-brand='teco'] .tg-vnitrni[data-tg-stranka='kontakt'] #obchod a:not(.tg-btn, .tg-tb, [class*='bg-']) {
color: var(--accent-soft);
}
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-lab {
color: var(--accent);
}
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-word {
color: #fff;
}
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-word .at {
color: var(--accent);
}
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-tb-obrys {
border-color: rgba(255, 255, 255, 0.55);
color: #fff;
}
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-tb-obrys:hover {
background: #fff;
color: #0b3f63;
}
@media (min-width: 981px) {
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-prose {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 56px;
align-items: start;
}
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-prose > ul {
grid-column: 1;
grid-row: 1 / span 20;
margin-top: 0;
}
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-prose > :not(ul) {
grid-column: 2;
}
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-prose > :not(ul):first-child,
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod .tg-prose > ul + * {
margin-top: 0;
}
}
@media (max-width: 980px) {
[data-brand='teco'] [data-tg-stranka='kontakt'] #obchod > .tg-s-in {
margin: 0 22px;
padding: 32px 24px 36px;
}
}
/* ④ „drobné“ (MICRONIC = jen servis a podpora): jeden řádek malým písmem pod formulářem, výrazně podřízený TECO */
[data-brand='teco'] .tg-drobne {
background: var(--color-neutral-100, #f5f5f5); /* = sekce formuláře nad ním (ContactCta bg-neutral-100) — pokračování, ne nový blok */
padding: 0 0 40px;
}
[data-brand='teco'] .tg-vnitrni .tg-drobne p {
max-width: none;
margin: 0;
font-size: 0.875rem;
color: var(--muted);
}
@media (max-width: 980px) {
[data-brand='teco'] .tg-drobne .tg-s-in {
padding-left: 22px;
padding-right: 22px;
}
}
/* formulář ceníku pod TG: obal sekce .tg-s už odsazuje (52/52), vnitřní `section.container-site` přidával 48/32 navíc
(měřeno 18. 10. na /cenik/, fronta velitel bee8f6) */
[data-brand='teco'] [data-tg-blok='cenikGate'] section.container-site {
padding: 0;
}
/* ══ /konfigurator/ OBAL (Zdeněk 18. 10.: „vršek co nejméně místa, v liště chybí gradient“; návrh B schválen velitel 278615) ══
Jen builder: `body.h-screen` = (builder)/layout (frontend má `min-h-screen`; ⛔ ne `body:has(> main)` — main má i frontend).
BuilderToolbar a ConfiguratorHost sdílí micronic ⇒ JEN tady, ⛔ ne v komponentách (web:mic:same).
B1: hlavička 81 → 60 s gradientem kitu, lišta 56 → 44 tmavá navazující ⇒ vršek 137 → 104 (1366×768: iframe 542 → 575). */
[data-brand='teco'] body.h-screen .tg-hdr {
background-color: var(--deep);
background-image: radial-gradient(ellipse 60% 260% at 78% 0%, #2f5f94 0%, #1a3a5e 40%, #0b1825 80%);
border-bottom: 0;
}
[data-brand='teco'] body.h-screen .tg-hdr-in {
height: 60px;
}
[data-brand='teco'] body.h-screen > header {
height: 44px;
background: #0b1825;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
[data-brand='teco'] body.h-screen > header :is(a, button) {
color: #ccdae1;
}
[data-brand='teco'] body.h-screen > header > div > div:first-child a {
color: #fff;
font-size: 0.875rem;
letter-spacing: 0.02em;
}
/* „Moje projekty“ / „Projekt“: obrys kitu (hranatý, 600) místo bílých oválů micronicu */
[data-brand='teco'] body.h-screen > header :is(a, button)[class*='rounded-full'] {
border-radius: 2px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #fff;
font-weight: 600;
font-size: 0.8125rem;
padding: 4px 12px;
}
[data-brand='teco'] body.h-screen > header :is(a, button)[class*='rounded-full']:hover {
background: #fff;
color: #0b3f63;
}
/* B2: pruh ceny — výběr projektu VEDLE tlačítka (dřív pod ním: 89 px), tlačítko váhou kitu (barva už je --brand) */
[data-brand='teco'] body.h-screen main iframe ~ div.shrink-0 {
padding-top: 10px;
padding-bottom: 10px;
}
@media (min-width: 640px) {
/* na mobilu ne: vedle tlačítka se nevejde a „Doporučená cena“ by se zalomila (měřeno 390: pruh 81, popisek 2 řádky) */
[data-brand='teco'] body.h-screen main iframe ~ div.shrink-0 > div.flex-col {
flex-direction: row-reverse;
align-items: center;
gap: 16px;
}
}
[data-brand='teco'] body.h-screen main iframe ~ div.shrink-0 .btn-primary {
border-radius: 2px;
font-weight: 700;
}
/* ══ /cenik/ hlavička — FOTKA (Zdeněk 19. 10.: „příliš jasná, ořezaná, v jasném obdélníku“; vzor micronic
/vitro-projektanti-architekti/, kde je efekt zapečený v souboru). Velitel 90a0c0: jen /cenik/ (⛔ /design/ — koláž kolekcí
je vzorník, barvy jsou obsah). Bez rámu a 3D stínu, poměr fotky 16:9 (dřív 4:3 = ořez), okraje prolnuté, ztlumená. */
[data-brand='teco'] [data-tg-stranka='cenik'] .tg-vh-foto {
filter: none;
aspect-ratio: 16 / 9;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
mask-composite: intersect;
}
[data-brand='teco'] [data-tg-stranka='cenik'] .tg-vh-foto img {
filter: brightness(0.65) saturate(0.8);
}
/* ══ /design/ hlavička B3 (velitel da4ef3; obrázek catalog-creator „koncept B perspektiva“, navy #0b1825 zapečené v souboru):
bez rámu a 3D stínu obalu, 16:9 jako soubor (⛔ 4:3 = ořez), okraje prolnuté do gradientu hlavičky. Maska je změřená
na obsah souboru: verze „-d“ (catalog-creator, těsnější rámování; -c stejně ±0,2 %) má ovladače i se stínem 6,2–94,4 % šířky a 21,5–77,7 % výšky
(bbox proti navy, práh 8) ⇒ vodorovně 5 %, svisle 20 %: ovladače NEJSOU ztlumené ani prolnuté (velitel: fotka /design/ se NEtlumí).
⚠️ Nový soubor = PŘEMĚŘIT bbox a masku (verze bez -c měla 13–87 % ⇒ 11 %/24 %). */
[data-brand='teco'] .tg-design .tg-vh-foto {
filter: none;
aspect-ratio: 16 / 9;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
mask-composite: intersect;
}
|