<style> :root{ --cl-bg:#F6FBFD; --cl-bg-2:#EEF8FB; --cl-surface:#FFFFFF; --cl-surface-soft:#F8FCFD; --cl-border:#DCECF1; --cl-border-strong:#C9E5EC; --cl-primary:#17DDD9; --cl-primary-2:#11A6E4; --cl-primary-3:#0F99A2; --cl-text:#123844; --cl-text-soft:#54727B; --cl-heading:#0A2230; --cl-white:#FFFFFF; --cl-radius-xl:28px; --cl-radius-lg:22px; --cl-radius-md:16px; --cl-shadow:0 18px 50px rgba(15,64,78,.08); --cl-shadow-soft:0 10px 28px rgba(15,64,78,.05); } .colorlab-page, .colorlab-page *{ box-sizing:border-box; } .colorlab-page{ width:100%; max-width:100%; margin:0 auto; font-family:Nunito, Arial, Helvetica, sans-serif; color:var(--cl-text); background: radial-gradient(circle at top right, rgba(23,221,217,.10) 0%, rgba(23,221,217,0) 28%), radial-gradient(circle at top left, rgba(17,166,228,.08) 0%, rgba(17,166,228,0) 26%), linear-gradient(180deg, #f9fdfe 0%, #f3fafc 100%); border:1px solid var(--cl-border); border-radius:30px; overflow:hidden; box-shadow:var(--cl-shadow); } .colorlab-shell{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; } .colorlab-section{ padding:72px 0; } .colorlab-section + .colorlab-section{ border-top:1px solid rgba(18,56,68,.06); } .colorlab-eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:linear-gradient(135deg, rgba(23,221,217,.12) 0%, rgba(17,166,228,.10) 100%); border:1px solid rgba(17,166,228,.14); color:var(--cl-primary-3); font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .colorlab-hero{ position:relative; } .colorlab-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; min-height:520px; } .colorlab-hero-copy h1{ margin:18px 0 18px; font-size:clamp(34px, 5vw, 62px); line-height:1.04; font-weight:900; letter-spacing:-0.03em; color:var(--cl-heading); } .colorlab-hero-copy p{ max-width:760px; margin:0 0 28px; font-size:18px; line-height:1.75; color:var(--cl-text-soft); } .colorlab-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 28px; } .colorlab-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:999px; text-decoration:none; font-weight:800; font-size:15px; transition:.25s ease; } .colorlab-btn-primary{ background:linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-2) 100%); color:#07252C !important; box-shadow:0 12px 28px rgba(17,166,228,.18); } .colorlab-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(17,166,228,.22); } .colorlab-btn-secondary{ color:var(--cl-heading) !important; border:1px solid var(--cl-border-strong); background:rgba(255,255,255,.9); } .colorlab-btn-secondary:hover{ transform:translateY(-2px); border-color:rgba(17,166,228,.28); background:#ffffff; } .colorlab-hero-points{ display:flex; flex-wrap:wrap; gap:10px; } .colorlab-chip{ display:inline-flex; align-items:center; padding:10px 14px; border-radius:999px; background:#ffffff; border:1px solid var(--cl-border); color:var(--cl-text-soft); font-size:14px; line-height:1.3; box-shadow:var(--cl-shadow-soft); } .colorlab-hero-visual{ position:relative; } .colorlab-orb-card{ position:relative; min-height:420px; border-radius:30px; background: radial-gradient(circle at 50% 20%, rgba(23,221,217,.16) 0%, rgba(17,166,228,.10) 24%, rgba(255,255,255,0) 58%), linear-gradient(180deg, #ffffff 0%, #f4fbfd 100%); border:1px solid var(--cl-border); overflow:hidden; box-shadow:var(--cl-shadow); } .colorlab-orb-card:before{ content:""; position:absolute; inset:18px; border-radius:24px; background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(241,251,253,.95) 100%); border:1px solid rgba(17,166,228,.10); } .colorlab-orb-card:after{ content:""; position:absolute; width:250px; height:250px; left:50%; top:50%; transform:translate(-50%,-36%); border-radius:50%; background: radial-gradient(circle at 38% 30%, #ffffff 0%, rgba(223,249,248,.96) 14%, rgba(23,221,217,.85) 34%, rgba(17,166,228,.75) 62%, rgba(17,166,228,.10) 100%); box-shadow: 0 0 38px rgba(23,221,217,.18), 0 0 80px rgba(17,166,228,.10); filter:blur(4px); } .colorlab-orb-inner{ position:absolute; inset:auto 28px 28px 28px; padding:22px; border-radius:22px; background:rgba(255,255,255,.90); border:1px solid var(--cl-border); z-index:2; box-shadow:var(--cl-shadow-soft); } .colorlab-orb-inner strong{ display:block; margin:0 0 8px; font-size:18px; color:var(--cl-heading); } .colorlab-orb-inner span{ display:block; color:var(--cl-text-soft); line-height:1.65; font-size:15px; } .colorlab-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .colorlab-grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .colorlab-card{ height:100%; padding:28px; border-radius:24px; background:linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%); border:1px solid var(--cl-border); box-shadow:var(--cl-shadow-soft); } .colorlab-card h2, .colorlab-card h3{ margin:0 0 12px; color:var(--cl-heading); line-height:1.2; } .colorlab-card p{ margin:0; color:var(--cl-text-soft); line-height:1.8; font-size:16px; } .colorlab-card-icon{ width:54px; height:54px; margin:0 0 18px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(23,221,217,.14) 0%, rgba(17,166,228,.14) 100%); border:1px solid rgba(17,166,228,.12); color:var(--cl-primary-3); font-size:20px; font-weight:900; } .colorlab-heading{ max-width:820px; margin:0 0 28px; } .colorlab-heading h2{ margin:14px 0 12px; font-size:clamp(28px, 4vw, 46px); line-height:1.08; font-weight:900; letter-spacing:-0.03em; color:var(--cl-heading); } .colorlab-heading p{ margin:0; color:var(--cl-text-soft); font-size:17px; line-height:1.75; } .colorlab-system-card{ position:relative; padding:24px; border-radius:22px; background:linear-gradient(180deg, #ffffff 0%, #f9fcfd 100%); border:1px solid var(--cl-border); overflow:hidden; box-shadow:var(--cl-shadow-soft); } .colorlab-system-card:before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg, var(--cl-primary) 0%, var(--cl-primary-2) 100%); } .colorlab-system-card strong{ display:block; margin:0 0 10px; font-size:22px; color:var(--cl-heading); } .colorlab-system-card span{ display:block; color:var(--cl-text-soft); line-height:1.7; } .colorlab-article-card{ display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:24px; background:linear-gradient(180deg, #ffffff 0%, #f9fcfd 100%); border:1px solid var(--cl-border); text-decoration:none; transition:.25s ease; box-shadow:var(--cl-shadow-soft); } .colorlab-article-card:hover{ transform:translateY(-4px); border-color:rgba(17,166,228,.22); box-shadow:0 18px 36px rgba(15,64,78,.10); } .colorlab-article-thumb{ aspect-ratio:16 / 10; background: radial-gradient(circle at top left, rgba(23,221,217,.24) 0%, rgba(23,221,217,0) 36%), radial-gradient(circle at bottom right, rgba(17,166,228,.20) 0%, rgba(17,166,228,0) 40%), linear-gradient(135deg, #edf8fb 0%, #f9fdfe 100%); border-bottom:1px solid var(--cl-border); } .colorlab-article-body{ padding:24px; } .colorlab-article-meta{ display:inline-block; margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--cl-primary-3); } .colorlab-article-body h3{ margin:0 0 12px; color:var(--cl-heading); font-size:22px; line-height:1.25; } .colorlab-article-body p{ margin:0; color:var(--cl-text-soft); line-height:1.75; } .colorlab-cta{ padding:34px; border-radius:30px; background: radial-gradient(circle at top left, rgba(23,221,217,.14) 0%, rgba(23,221,217,0) 28%), radial-gradient(circle at bottom right, rgba(17,166,228,.12) 0%, rgba(17,166,228,0) 28%), linear-gradient(135deg, #ffffff 0%, #f4fbfd 100%); border:1px solid var(--cl-border); box-shadow:var(--cl-shadow); } .colorlab-cta h2{ margin:0 0 12px; font-size:clamp(26px, 4vw, 42px); line-height:1.1; color:var(--cl-heading); } .colorlab-cta p{ margin:0 0 22px; max-width:760px; color:var(--cl-text-soft); font-size:17px; line-height:1.8; } .colorlab-list{ margin:0; padding:0; list-style:none; } .colorlab-list li{ position:relative; margin:0 0 12px; padding:0 0 0 18px; color:var(--cl-text-soft); line-height:1.75; } .colorlab-list li:before{ content:""; position:absolute; left:0; top:.78em; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-2) 100%); box-shadow:0 0 8px rgba(23,221,217,.20); } @media (max-width: 991px){ .colorlab-hero-grid, .colorlab-grid-2, .colorlab-grid-3{ grid-template-columns:1fr; } .colorlab-section{ padding:54px 0; } .colorlab-orb-card{ min-height:340px; } } @media (max-width: 640px){ .colorlab-shell{ padding:0 16px; } .colorlab-page{ border-radius:22px; } .colorlab-hero-copy p, .colorlab-heading p, .colorlab-cta p{ font-size:16px; line-height:1.7; } .colorlab-card, .colorlab-system-card, .colorlab-cta, .colorlab-article-body{ padding:20px; } .colorlab-actions{ flex-direction:column; align-items:stretch; } .colorlab-btn{ width:100%; } } </style> ``` --- # HTML layout pro světlou verzi Tenhle HTML blok můžete použít prakticky beze změny: ```html <div class="colorlab-page"> <div class="colorlab-shell"> <section class="colorlab-section colorlab-hero"> <div class="colorlab-hero-grid"> <div class="colorlab-hero-copy"> <span class="colorlab-eyebrow">ColorLab • odstíny • vzorníky • barevné systémy</span> <h1>Poznejte svět odstínů, vzorníků a barevných škál</h1> <p> Objevte, v jakých odstínech výrobci nabízejí své produkty, jak fungují profesionální barevné systémy a podle čeho vybírat barvy a laky s větší jistotou, přesností a citem pro výsledný vzhled. </p> <div class="colorlab-actions"> <a class="colorlab-btn colorlab-btn-primary" href="#colorlab-articles">Prozkoumat články</a> <a class="colorlab-btn colorlab-btn-secondary" href="#colorlab-systems">Poznat barevné systémy</a> </div> <div class="colorlab-hero-points"> <span class="colorlab-chip">RAL, NCS, Pantone, RGB, HEX</span> <span class="colorlab-chip">Barvy a laky v praxi</span> <span class="colorlab-chip">Srozumitelně i odborně</span> </div> </div> <div class="colorlab-hero-visual"> <div class="colorlab-orb-card"> <div class="colorlab-orb-inner"> <strong>ColorLab</strong> <span> Rubrika pro všechny, kdo chtějí světu barev rozumět víc do hloubky — od odstínů výrobců přes profesionální vzorníky až po praktické souvislosti, které rozhodují o výsledku. </span> </div> </div> </div> </div> </section> <section class="colorlab-section"> <div class="colorlab-grid-2"> <div class="colorlab-card"> <div class="colorlab-heading" style="margin-bottom:0;"> <span class="colorlab-eyebrow">Proč ColorLab</span> <h2>Barva není jen název na etiketě</h2> <p> Stejný odstín může na různých materiálech působit úplně jinak. Do výsledku vstupuje světlo, lesk, textura podkladu i samotný nátěrový systém. Právě proto vznikl ColorLab — jako místo, kde se potkává estetika, technická přesnost a praktická zkušenost. </p> </div> </div> <div class="colorlab-card"> <div class="colorlab-heading" style="margin-bottom:0;"> <span class="colorlab-eyebrow">Pro koho je rubrika</span> <h2>Pro profesionály, firmy i náročné kutily</h2> <p> Ať vybíráte odstín pro fasádu, kovovou konstrukci, dřevo, interiér nebo technický povrch, v ColorLabu najdete srozumitelně vysvětlené principy, které vám pomohou rozhodovat se jistěji a vyhnout se zbytečným chybám při výběru. </p> </div> </div> </div> </section> <section class="colorlab-section"> <div class="colorlab-heading"> <span class="colorlab-eyebrow">Co v rubrice najdete</span> <h2>Praktický obsah, který vám pomůže vybírat chytřeji</h2> <p> Žádná suchá teorie. Jen dobře podané informace, souvislosti a praktické návody, které dávají smysl při reálném výběru barev, laků a odstínů. </p> </div> <div class="colorlab-grid-3"> <div class="colorlab-card"> <div class="colorlab-card-icon">01</div> <h3>Odstíny výrobců</h3> <p> Přehled toho, v jakých odstínech výrobci své produkty skutečně nabízejí a jak se vyznat v jejich značení, názvosloví a rozdílech mezi jednotlivými řadami. </p> </div> <div class="colorlab-card"> <div class="colorlab-card-icon">02</div> <h3>Barevné škály</h3> <p> Srozumitelně vysvětlené systémy jako RAL, NCS, Pantone, RGB nebo HEX — kdy se používají, čím se liší a proč je důležité rozumět jejich logice. </p> </div> <div class="colorlab-card"> <div class="colorlab-card-icon">03</div> <h3>Výběr odstínu v praxi</h3> <p> Jak výsledný vzhled ovlivňuje materiál, lesk, struktura, světlo a typ nátěru. Přesně ty faktory, které rozhodují o tom, zda bude výsledek působit správně. </p> </div> </div> </section> <section class="colorlab-section" id="colorlab-systems"> <div class="colorlab-heading"> <span class="colorlab-eyebrow">Nejpoužívanější systémy</span> <h2>Škály a vzorníky, se kterými pracují profesionálové po celém světě</h2> <p> Každý systém vznikl pro trochu jiný účel. V ColorLabu si ukážeme, jak jednotlivé škály fungují a kdy se v praxi používají. </p> </div> <div class="colorlab-grid-2"> <div class="colorlab-system-card"> <strong>RAL</strong> <span>Jedna z nejznámějších evropských barevných škál, běžně používaná v průmyslu, stavebnictví, lakování kovů i technických aplikacích.</span> </div> <div class="colorlab-system-card"> <strong>NCS</strong> <span>Systém postavený na tom, jak člověk barvu přirozeně vnímá. Často se používá v architektuře, interiérovém designu a profesionálním návrhu barev.</span> </div> <div class="colorlab-system-card"> <strong>Pantone</strong> <span>Globálně známý standard hlavně pro tisk, grafiku, branding a produktový design, kde je kritická přesná a konzistentní reprodukce odstínů.</span> </div> <div class="colorlab-system-card"> <strong>RGB / HEX</strong> <span>Digitální jazyk barev pro web, aplikace a obrazovky. Ideální pro online prostředí, ale ne vždy přímo přenositelný do světa nátěrů a fyzických povrchů.</span> </div> </div> </section> <section class="colorlab-section" id="colorlab-articles"> <div class="colorlab-heading"> <span class="colorlab-eyebrow">Doporučené články</span> <h2>Začněte tématy, která nejčastěji řeší zákazníci i profesionálové</h2> <p> Níže můžete zobrazit výběr hlavních článků nebo sem později napojit reálný výpis příspěvků z blogu. </p> </div> <div class="colorlab-grid-3"> <a class="colorlab-article-card" href="#"> <div class="colorlab-article-thumb"></div> <div class="colorlab-article-body"> <span class="colorlab-article-meta">Barevné systémy</span> <h3>Co je RAL a proč se s ním setkáte tak často</h3> <p>Praktický úvod do jedné z nejznámějších barevných škál v průmyslu, stavebnictví a světě nátěrů.</p> </div> </a> <a class="colorlab-article-card" href="#"> <div class="colorlab-article-thumb"></div> <div class="colorlab-article-body"> <span class="colorlab-article-meta">Výběr odstínu</span> <h3>Proč stejná barva vypadá jinak na dřevě a na kovu</h3> <p>Materiál, struktura i lesk výrazně ovlivňují výsledný dojem. Tohle je jeden z nejčastějších zdrojů zklamání.</p> </div> </a> <a class="colorlab-article-card" href="#"> <div class="colorlab-article-thumb"></div> <div class="colorlab-article-body"> <span class="colorlab-article-meta">Inspirace a praxe</span> <h3>Jak číst názvy odstínů u výrobců barev a laků</h3> <p>Název odstínu je jen část příběhu. Naučte se chápat, co je marketingový název a co už technicky přesný údaj.</p> </div> </a> </div> </section> <section class="colorlab-section"> <div class="colorlab-cta"> <h2>ColorLab vám pomůže vybírat barvy s větší jistotou</h2> <p> Ať řešíte nátěr pro dílnu, dům, výrobu nebo designový detail, správný odstín nezačíná u dojmu, ale u porozumění. Právě to je cílem této rubriky. </p> <ul class="colorlab-list"> <li>poznat barevné škály používané profesionály</li> <li>lépe rozumět nabídce odstínů jednotlivých výrobců</li> <li>vybírat barvy a laky s větší přesností i jistotou</li> </ul> <div class="colorlab-actions" style="margin-top:22px; margin-bottom:0;"> <a class="colorlab-btn colorlab-btn-primary" href="#colorlab-articles">Přejít na články</a> <a class="colorlab-btn colorlab-btn-secondary" href="#colorlab-systems">Prozkoumat systémy</a> </div> </div> </section> </div> </div>