/* Písmo Inter, přibalené k aplikaci. Návrh je sázený na Inter, ale nikde se nenačítal - stránka ho jen jmenovala v seznamu rodin a spoléhala, že ho čtenář má nainstalovaný. Kdo ho nemá, dostal náhradu o 27 % širší (nadpis "Kampaně, které" měří 530 px v Interu a 672 px v Segoe UI), takže se nadpis lámal na čtyři řádky místo dvou a narážel do nadtitulku nad sebou. Soubor je proměnné písmo: jeden soubor pokryje všechny řezy od 400 do 900, které stránka používá. Vydává se z vlastního serveru, protože CSP povoluje jen zdroje ze stejného původu - odkaz na cizí CDN by prohlížeč zahodil a byli bychom zpátky u náhradního písma. Licence SIL Open Font License 1.1, text v pisma/OFL.txt. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/uvod/pisma/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/uvod/pisma/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Simex Distribution Hub – standalone landing page */ :root { --navy-950: #050a24; --navy-900: #081033; --navy-850: #0b1643; --navy-800: #101c50; --indigo: #5d50f6; --indigo-2: #765dff; --cyan: #20c8ff; --ink: #081334; --muted: #68718d; --line: #e4e7f2; --soft: #f7f8fc; --white: #fff; --green: #16b86a; --shadow: 0 24px 70px rgba(5, 13, 50, .18); --container: 1240px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } svg { display: block; } .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; position: relative; z-index: 2; } .eyebrow { margin: 0 0 15px; color: var(--indigo); font-size: 11px; line-height: 1; font-weight: 850; letter-spacing: .22em; text-transform: uppercase; } .eyebrow--light { color: #938bff; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { letter-spacing: -.035em; } h2 { margin-bottom: 0; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.05; } .button { display: inline-flex; min-height: 54px; padding: 0 25px; align-items: center; justify-content: center; gap: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #fff; background: linear-gradient(135deg, #6253f7 0%, #704dff 100%); box-shadow: 0 10px 28px rgba(87, 69, 255, .34), inset 0 1px 0 rgba(255,255,255,.28); font-size: 14px; font-weight: 760; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .button svg, .text-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 15px 34px rgba(87,69,255,.44); } .button--small { min-height: 46px; padding-inline: 19px; font-size: 12px; } .button--ghost { background: rgba(11, 18, 56, .35); border-color: rgba(197, 206, 255, .62); box-shadow: none; backdrop-filter: blur(10px); } .button--ghost:hover { background: rgba(255,255,255,.08); box-shadow: 0 10px 25px rgba(0,0,0,.15); } /* Navigation */ .site-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 80px; color: #fff; } .nav-wrap { height: 80px; display: flex; align-items: center; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 760; font-size: 13px; } .brand-mark { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #715dff, #5144ea); box-shadow: 0 12px 30px rgba(76, 64, 237, .38), inset 0 1px 0 rgba(255,255,255,.3); font-size: 13px; font-weight: 850; letter-spacing: -.03em; } .main-nav { display: flex; align-items: center; gap: 38px; margin-left: 158px; } .main-nav a { font-size: 12px; color: rgba(255,255,255,.87); transition: color .2s ease; } .main-nav a:hover { color: #fff; } .header-cta { margin-left: auto; } .menu-button { display: none; width: 46px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: white; background: rgba(255,255,255,.06); cursor: pointer; } .menu-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .menu-close { display: none; } /* Hero */ .hero { min-height: 700px; position: relative; isolation: isolate; color: #fff; background: radial-gradient(circle at 71% 38%, rgba(58, 117, 255, .28), transparent 26%), radial-gradient(circle at 51% 1%, rgba(0, 133, 255, .17), transparent 27%), linear-gradient(115deg, #080d31 0%, #07113a 52%, #09133c 100%); overflow: hidden; } .hero::after { content: ""; position: absolute; z-index: 4; left: -2%; right: -2%; bottom: -31px; height: 66px; background: #fff; transform: rotate(-.5deg); transform-origin: center; } .stars { position: absolute; inset: 0; pointer-events: none; opacity: .82; } .stars::before, .stars::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.94) 0 1px, transparent 1.3px), radial-gradient(circle, rgba(58,176,255,.9) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(143,112,255,.9) 0 1.2px, transparent 1.5px); background-size: 93px 127px, 157px 181px, 213px 149px; background-position: 11px 27px, 42px 91px, 82px 13px; } .stars::after { transform: translate(36px, 48px); opacity: .38; } .stars--two { transform: rotate(17deg) scale(1.1); opacity: .3; } .light-routes { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: .58; } .light-routes path { fill: none; stroke: url(#routeGradient); stroke-width: 1.6; stroke-dasharray: 2 12; filter: drop-shadow(0 0 7px #398cff); } .light-routes circle { fill: #65d8ff; } .hero-grid { min-height: 700px; display: grid; grid-template-columns: 43% 57%; align-items: center; padding-top: 74px; } .hero-copy { z-index: 5; align-self: center; padding-bottom: 15px; } .hero h1 { margin: 0 0 25px; font-size: clamp(48px, 5.4vw, 77px); line-height: .98; font-weight: 820; letter-spacing: -.055em; text-wrap: balance; } .hero h1 span { color: #6258fa; text-shadow: 0 0 26px rgba(89,80,255,.23); } .hero-lead { max-width: 505px; margin-bottom: 28px; color: rgba(239,243,255,.86); font-size: 16px; line-height: 1.55; } .hero-actions { display: flex; gap: 16px; } .play-icon { width: 22px !important; height: 22px !important; } .play-icon circle { fill: rgba(255,255,255,.95); stroke: none; } .play-icon path { fill: #172152; stroke: none; } .trust-list { display: flex; gap: 30px; padding: 0; margin: 27px 0 0; list-style: none; color: rgba(232,237,255,.83); font-size: 11px; } .trust-list li { display: flex; align-items: center; gap: 7px; white-space: nowrap; } .trust-check { width: 17px; height: 17px; display: inline-grid; place-items: center; color: #33c7ff; border: 1px solid #22b9f3; border-radius: 50%; font-size: 9px; font-weight: 850; box-shadow: 0 0 12px rgba(34,185,243,.23); } .hero-art { position: relative; height: 594px; align-self: end; z-index: 3; } .glow-orb { position: absolute; width: 580px; height: 420px; left: 84px; top: 89px; border-radius: 50%; background: radial-gradient(circle, rgba(55,101,255,.34), rgba(50,65,255,.1) 50%, transparent 73%); filter: blur(6px); } .dashboard { position: absolute; z-index: 8; top: 164px; left: 83px; width: 589px; height: 377px; border: 8px solid #202861; border-radius: 22px; color: #eaf0ff; background: #0c153b; box-shadow: 0 42px 80px rgba(1,4,19,.6), 0 0 58px rgba(53,76,255,.25), inset 0 0 0 1px rgba(255,255,255,.08); transform: perspective(1200px) rotateY(-2deg) rotateZ(.3deg); overflow: hidden; } .dashboard-top { height: 50px; padding: 0 15px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.06); background: #111a46; font-size: 10px; } .brand-mark--tiny { width: 25px; height: 25px; border-radius: 6px; font-size: 7px; } .top-icons { margin-left: auto; display: flex; gap: 8px; } .top-icons i { width: 24px; height: 24px; display: block; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; position: relative; } .top-icons i::after { content: ""; position: absolute; width: 5px; height: 5px; left: 8px; top: 8px; border: 1px solid #9fa9d0; border-radius: 50%; } .dashboard-body { display: grid; grid-template-columns: 132px 1fr; height: calc(100% - 50px); } .dash-sidebar { padding: 17px 10px; background: #0a1337; } .dash-sidebar a { height: 41px; padding: 0 11px; display: flex; align-items: center; gap: 10px; border-radius: 6px; color: #8993ba; font-size: 9px; } .dash-sidebar a span { width: 15px; color: #8994ca; text-align: center; } .dash-sidebar a.active { color: #fff; background: rgba(87,79,239,.22); } .dash-sidebar a.active span { color: #8077ff; } .dash-main { padding: 18px 16px 10px; background: linear-gradient(130deg, #101a49, #0c153c); } .dash-welcome { display: flex; justify-content: space-between; align-items: start; } .dash-welcome h3 { margin-bottom: 3px; font-size: 17px; } .dash-welcome p { margin: 0; color: #929cc1; font-size: 8px; } .dash-welcome > span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; color: #939dc0; font-size: 7px; } .dash-metrics { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .dash-metrics > div { min-width: 0; padding: 12px 10px 9px; border: 1px solid rgba(255,255,255,.05); border-radius: 8px; background: linear-gradient(145deg, rgba(37,51,105,.9), rgba(25,36,83,.74)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .dash-metrics small, .dash-metrics b, .dash-metrics em { display: block; } .dash-metrics small { margin-bottom: 5px; color: #8e99bf; font-size: 7px; } .dash-metrics b { margin-bottom: 4px; color: #f4f6ff; font-size: 18px; letter-spacing: -.04em; } .dash-metrics em { color: #35dc94; font-size: 7px; font-style: normal; } .dash-metrics em.violet { color: #b1a8ff; } .dash-chart { position: relative; height: 142px; margin-top: 8px; overflow: hidden; border-radius: 7px; background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(255,255,255,.04) 35px); } .dash-chart > span { position: absolute; left: 1px; color: #69749d; font-size: 6px; } .dash-chart > span:nth-child(1) { top: 10px; }.dash-chart > span:nth-child(2) { top: 51px; }.dash-chart > span:nth-child(3) { top: 93px; } .dash-chart svg { position: absolute; left: 18px; right: 0; bottom: 0; width: calc(100% - 18px); height: 135px; overflow: visible; } .dash-chart .area { fill: url(#areaGradient); }.dash-chart .line { fill: none; stroke: #7560ff; stroke-width: 3; filter: drop-shadow(0 0 6px #715dff); } .chart-callout { position: absolute; right: 12px; top: 17px; width: 122px; height: 55px; display: grid; place-content: center; text-align: center; border-radius: 7px; background: linear-gradient(135deg,#7768ff,#6451ed); box-shadow: 0 12px 25px rgba(93,80,245,.4); } .chart-callout b { font-size: 15px; }.chart-callout small { display: block; margin-top: 2px; font-size: 6px; } .floating-envelope { position: absolute; z-index: 5; width: 116px; height: 78px; border: 1px solid #d9dcf2; border-radius: 6px; background: linear-gradient(145deg,#fff,#dfe3f3); box-shadow: 0 15px 32px rgba(0,0,0,.35); } .floating-envelope::before { content: ""; position: absolute; inset: 0; background: linear-gradient(32deg, transparent 49.3%, #c8cde4 50%, transparent 50.8%), linear-gradient(-32deg, transparent 49.3%, #c8cde4 50%, transparent 50.8%); opacity: .8; } .floating-envelope::after { content: ""; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: 80%; height: 68%; background: linear-gradient(145deg,#f8f9ff,#dce0ef); clip-path: polygon(0 0,100% 0,50% 100%); filter: drop-shadow(0 1px 0 #bac0db); } .stamp { position: absolute; z-index: 3; right: 10px; top: 9px; width: 20px; height: 24px; transform: rotate(4deg); border: 3px dotted #c96e62; background: linear-gradient(135deg,#d69362,#f5ceb5); } .env--top { top: 58px; left: 110px; transform: rotate(-17deg) scale(1.18); } .env--right { top: 102px; right: -10px; transform: rotate(18deg); } .env--bottom { z-index: 10; width: 205px; height: 136px; right: -1px; bottom: -5px; transform: rotate(-9deg); } .floating-card { position: absolute; z-index: 6; padding: 9px; color: #16204a; background: #fff; border: 1px solid #d9def0; box-shadow: 0 18px 38px rgba(0,0,0,.35); } .floating-card .card-photo { position: relative; overflow: hidden; } .card--city { width: 141px; height: 174px; left: -39px; top: 226px; transform: rotate(13deg); } .card--city .card-photo { height: 82px; margin-bottom: 13px; } .card--city strong { display: block; padding-left: 7px; font-size: 12px; line-height: 1.35; } .city-art { background: linear-gradient(#b9dcff 0 49%,#e3b589 50% 65%,#705b63 66%); } .city-art::before { content: ""; position: absolute; left: 5px; right: 4px; bottom: 20px; height: 32px; background: repeating-linear-gradient(90deg,#76515a 0 12px,#d7a381 12px 25px); clip-path: polygon(0 33%,10% 20%,19% 40%,29% 0,39% 37%,50% 9%,60% 40%,70% 14%,82% 39%,92% 3%,100% 30%,100% 100%,0 100%); } .city-art span { position: absolute; left: 52%; bottom: 20px; width: 8px; height: 45px; background:#885c56; }.city-art span::before { content:""; position:absolute; left:-5px; top:-9px; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:15px solid #6e4852; } .card--portrait { width: 105px; height: 123px; left: 267px; top: 45px; transform: rotate(-11deg); } .card--portrait .card-photo { height: 102px; } .portrait-art { background: radial-gradient(circle at 52% 32%,#f1c4a8 0 14%,transparent 15%), linear-gradient(120deg,#4e302d 0 30%,transparent 31%), linear-gradient(145deg,#c1d7ec,#d4a97f); } .portrait-art::before { content:""; position:absolute; left:23px; bottom:-23px; width:65px; height:80px; border-radius:45% 45% 0 0; background:#eaa989; transform:rotate(7deg); } .portrait-art::after { content:""; position:absolute; left:31px; top:10px; width:44px; height:49px; border-radius:47%; border-left:13px solid #673d32; border-top:10px solid #673d32; } .card--travel { width: 209px; height: 126px; left: 17px; bottom: 7px; transform: rotate(8deg); display: grid; grid-template-columns: 58% 42%; gap: 7px; } .card--travel .card-photo { height: 90px; }.card--travel em { align-self: center; font-family: "Segoe Script", cursive; font-size: 18px; line-height: 1.2; transform: rotate(-5deg); } .mountain-art { background: linear-gradient(#a9dafa 0 48%,#aac880 49% 66%,#5b844f 67%); } .mountain-art::before { content:""; position:absolute; inset:21px -3px 23px; background:linear-gradient(135deg,transparent 45%,#7a8e99 46% 63%,transparent 64%),linear-gradient(225deg,transparent 42%,#dde5e6 43% 56%,transparent 57%); } .mountain-art::after { content:""; position:absolute; left:54%; bottom:0; width:20px; height:58px; background:#d7c7a1; clip-path:polygon(48% 0,70% 0,100% 100%,0 100%); transform:rotate(11deg); } .postmark { position:absolute; right:19px; bottom:7px; width:36px; height:36px; display:grid; place-items:center; border:1px solid #8d8293; border-radius:50%; color:#756b7d; font-size:6px; text-align:center; transform:rotate(-8deg); } .card--note { right: -25px; top: 249px; width: 109px; height: 167px; transform: rotate(13deg); display: grid; place-items: center; text-align: center; } .card--note strong { font-size: 13px; line-height: 1.25; letter-spacing: .03em; } .paper-plane { position: absolute; z-index: 7; filter: drop-shadow(0 14px 15px rgba(0,0,0,.32)); } .paper-plane svg { width: 100%; height: 100%; overflow: visible; } .paper-plane path:first-child { fill: #f7f7ff; stroke:#d7daf0; }.paper-plane path:nth-child(2) { fill:#dfe3f7; }.paper-plane path:nth-child(3) { fill:#bcc5e9; } .plane--one { width: 58px; height: 51px; left: -32px; top: 79px; transform: rotate(15deg); } .plane--two { width: 43px; height: 39px; right: 116px; top: 14px; transform: rotate(21deg); } /* Features */ .section-slant { position: relative; } .features { padding: 92px 0 100px; background: #fff; } .features::after { content:""; position:absolute; z-index:1; left:-2%; right:-2%; bottom:-33px; height:68px; background:#fff; transform:rotate(.8deg); } .section-heading { display: grid; grid-template-columns: 1.5fr .8fr; gap: 80px; align-items: end; margin-bottom: 38px; } .section-heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .feature-card { min-height: 121px; padding: 24px 18px; display: grid; grid-template-columns: 52px 1fr 20px; gap: 17px; align-items: start; border: 1px solid #dfe3ee; border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: 0 8px 22px rgba(12,24,67,.025); transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; } .feature-card:hover { transform: translateY(-4px); border-color: #b9b3ff; box-shadow: 0 16px 36px rgba(35,29,101,.09); } .feature-icon, .step-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 10px; color: #5d50f5; background: linear-gradient(145deg,#f1eeff,#f9f8ff); box-shadow: inset 0 1px 0 #fff; } .feature-icon svg, .step-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .feature-card h3 { margin: 3px 0 8px; font-size: 16px; } .feature-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .feature-card > a { width: 25px; height: 25px; align-self: end; display: grid; place-items:center; color: #6657f5; border-radius: 50%; transition:background .2s; } .feature-card > a:hover { background:#f0eeff; } .feature-card > a svg { width: 19px; height: 19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } /* Templates */ .templates { position: relative; z-index: 0; padding: 98px 0 82px; color: #fff; background: radial-gradient(circle at 82% 30%,rgba(79,69,233,.2),transparent 31%),linear-gradient(117deg,#0a1238,#07102f 65%,#0b1543); overflow: hidden; } .templates::after { content:""; position:absolute; z-index:1; left:-2%; right:-2%; bottom:-35px; height:70px; background:#fff; transform:rotate(-.7deg); } .template-specks { position:absolute; inset:0; opacity:.25; background-image:radial-gradient(circle,#5570f5 0 1px,transparent 1.5px); background-size:72px 83px; } .section-heading--dark { grid-template-columns: 1.2fr 1.15fr auto; align-items:end; } .section-heading--dark > p { color:rgba(238,242,255,.8); } .section-heading--dark .button { align-self:center; } .template-track { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; padding-bottom:20px; } .template-item { min-width:0; } .template-item h3 { margin:12px 0 8px; font-size:13px; font-weight:650; letter-spacing:-.01em; } .tag { display:inline-flex; padding:6px 10px; border-radius:100px; color:#a8a0ff; background:rgba(93,80,246,.18); font-size:9px; letter-spacing:.08em; text-transform:uppercase; } .mail-preview { height:204px; position:relative; filter:drop-shadow(0 15px 15px rgba(0,0,0,.32)); } .preview-letter { position:absolute; z-index:2; left:9%; top:0; width:82%; height:153px; padding:15px 13px; color:#2a2530; background:#fffdf9; border:1px solid #e3dcd7; overflow:hidden; transform:rotate(-2deg); } .preview-letter b, .preview-letter small { display:block; position:relative; z-index:2; } .preview-letter b { font-family:Georgia,serif; font-size:18px; font-weight:500; }.preview-letter small { margin-top:2px; font-family:Georgia,serif; font-size:9px; } .mini-envelope { position:absolute; z-index:3; left:0; right:0; bottom:0; height:105px; overflow:hidden; border-radius:3px 3px 7px 7px; background:linear-gradient(155deg,#fff,#e9e8ed); border:1px solid #d9d8e0; } .mini-envelope::before { content:""; position:absolute; inset:0; background:linear-gradient(31deg,transparent 49.5%,#d1d1da 50%,transparent 50.8%),linear-gradient(-31deg,transparent 49.5%,#d1d1da 50%,transparent 50.8%); } .mini-envelope::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,#f8f8fb,#e0dfe5); clip-path:polygon(0 100%,50% 40%,100% 100%); } .preview--welcome svg { position:absolute; width:100%; left:0; bottom:-1px; height:105px; }.preview--welcome .stem{fill:none;stroke:#5b754e;stroke-width:3}.preview--welcome .leaf{fill:#759f67} .preview--sale .preview-letter { color:#ae413b;background:#fff7f2; }.preview--sale .preview-letter b { font-size:22px; }.preview--sale .preview-letter small{font-size:14px}.preview--sale svg{position:absolute;left:15px;right:0;bottom:0;width:135px;height:95px}.shoe{fill:#de6e5c}.lace{fill:none;stroke:#fff;stroke-width:3} .preview--fashion .preview-letter{padding:0;background:#e8ddd2}.fashion-copy{position:absolute;z-index:4;left:11px;top:18px}.fashion-copy b{font-family:Georgia,serif;font-size:17px}.preview--fashion svg{position:absolute;right:-4px;bottom:-5px;width:95%;height:150px}.skin{fill:#e1ac88}.hair{fill:#774c32}.hat{fill:#ba8b58}.coat{fill:#d9c9b7}.scarf{fill:#796146} .preview--travel .preview-letter{padding:0;background:#eef8ff}.preview--travel .script{position:absolute;z-index:4;top:15px;left:13px;font-family:"Segoe Script",cursive;font-size:12px;color:#354760}.preview--travel svg{position:absolute;inset:0;width:100%;height:100%}.sky{fill:#c8e8ff}.sun{fill:#ffe7a2}.far{fill:#8da9ac}.near{fill:#4c7c5d}.field{fill:#86aa53} .preview--care .preview-letter{background:#fff8f3;color:#b95753}.preview--care .preview-letter b{font-size:22px}.preview--care .preview-letter small{font-size:9px;font-style:italic}.preview--care svg{position:absolute;left:3px;right:0;bottom:0;width:100%;height:100px}.chair{fill:#d7b3a0}.plant-pot{fill:#b47862}.plant{fill:none;stroke:#4c7b54;stroke-width:5;stroke-linecap:round;stroke-linejoin:round} .template-item--new { padding-top:0; } .create-template { height:204px; padding:25px 12px 16px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; border:1px dashed rgba(129,117,255,.65); border-radius:8px; background:rgba(22,32,79,.4); } .create-template > span { width:39px;height:39px;margin-bottom:16px;display:grid;place-items:center;border-radius:50%;color:#a397ff;background:rgba(98,80,246,.23); }.create-template svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.create-template b{font-size:11px;line-height:1.35}.create-template button{width:100%;height:37px;margin-top:16px;border:1px solid #6256c8;border-radius:5px;color:#fff;background:#222b67;font-size:9px;cursor:pointer}.create-template button:hover{background:#303a85} /* Workflow */ .workflow { padding:110px 0 90px; background:#fff; } .workflow-layout { display:grid; grid-template-columns:270px 1fr; gap:58px; } .workflow-intro h2 { margin-bottom:15px; }.workflow-intro > p:not(.eyebrow){max-width:220px;margin-bottom:13px;color:var(--muted);font-size:12px;line-height:1.55}.text-link{display:inline-flex;align-items:center;gap:7px;color:#5046e9;font-size:11px;font-weight:750}.text-link:hover{text-decoration:underline} .workflow-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:29px; padding:8px 0 0; margin:0; list-style:none; counter-reset:steps; } .workflow-steps li { position:relative; text-align:center; } .workflow-steps li:not(:last-child)::after { content:"→"; position:absolute; right:-22px; top:23px; color:#6657ed; font-size:20px; font-weight:400; } .workflow-steps .step-icon { margin:0 auto 15px; } .workflow-steps h3 { margin:0 0 8px;font-size:14px; }.workflow-steps p{margin:0;color:var(--muted);font-size:11px;line-height:1.5} /* Results */ .results { padding:75px 0 72px; background:linear-gradient(180deg,#fafbfe,#f7f8fc);border-top:1px solid #f0f1f6;border-bottom:1px solid #eceef5; } .results-layout { display:grid;grid-template-columns:270px 1fr;gap:58px;align-items:center; } .results-intro h2{margin-bottom:15px}.results-intro>p:not(.eyebrow){max-width:235px;margin:0;color:var(--muted);font-size:12px;line-height:1.55} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat-card{min-height:158px;padding:24px 22px 17px;border:1px solid #e1e4ee;border-radius:10px;background:#fff;box-shadow:0 7px 18px rgba(14,24,61,.025)}.stat-card>strong,.stat-card>span{display:block}.stat-card>strong{margin-bottom:5px;font-size:28px;letter-spacing:-.04em}.stat-card>span{color:var(--muted);font-size:11px}.stat-bottom{height:43px;margin-top:24px;display:flex;align-items:end;justify-content:space-between}.stat-bottom em{align-self:center;padding:5px 7px;border-radius:50px;color:var(--green);background:#edfff5;font-size:9px;font-weight:750;font-style:normal}.stat-bottom svg{width:76px;height:34px;overflow:visible}.stat-bottom svg path{fill:none;stroke:#6b58f5;stroke-width:2;filter:drop-shadow(0 2px 3px rgba(105,87,245,.25))}.bar-mini{height:39px;display:flex;gap:3px;align-items:end}.bar-mini i{width:5px;border-radius:2px 2px 0 0;background:linear-gradient(#8e7dff,#5e51ed)}.bar-mini i:nth-child(1){height:10px}.bar-mini i:nth-child(2){height:16px}.bar-mini i:nth-child(3){height:14px}.bar-mini i:nth-child(4){height:23px}.bar-mini i:nth-child(5){height:28px}.bar-mini i:nth-child(6){height:35px}.bar-mini i:nth-child(7){height:41px} /* Testimonials */ .testimonials{padding:62px 0 68px;background:#fff}.testimonials-layout{display:grid;grid-template-columns:330px 1fr;gap:58px;position:relative}.testimonials-intro h2{font-size:36px}.testimonial-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.quote-card{min-height:154px;padding:22px 16px;display:grid;grid-template-columns:38px 1fr;gap:12px;border:1px solid #e1e4ed;border-radius:9px;background:#fff;box-shadow:0 6px 16px rgba(9,19,52,.025)}.quote-mark{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#111b45;font-size:10px;font-weight:800}.quote-mark--blue{background:#2d9bd8}.quote-card blockquote{min-height:67px;margin:0;color:#4e5874;font-size:10px;line-height:1.55}.quote-card footer{display:flex;align-items:center;gap:9px;margin-top:9px}.avatar{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:7px;background:linear-gradient(135deg,#dca17e,#5d3e34)}.avatar--two{background:linear-gradient(135deg,#f1c9a1,#723b27)}.avatar--three{background:linear-gradient(135deg,#e2b795,#3d5c70)}.quote-card footer b{font-size:9px}.quote-card footer small{display:block;margin-top:3px;color:#737c96;font-size:7px;font-weight:450}.testimonial-controls{position:absolute;right:0;top:-43px;display:flex;gap:8px}.testimonial-controls button{width:31px;height:31px;border:1px solid #dadde8;border-radius:50%;color:#6457ef;background:#fff;font-size:19px;line-height:1;cursor:pointer}.testimonial-controls button:hover{border-color:#7568f6;background:#f4f2ff} /* Bottom CTA */ .bottom-cta{position:relative;min-height:342px;color:#fff;background:radial-gradient(circle at 22% 55%,rgba(50,93,246,.44),transparent 30%),radial-gradient(circle at 82% 25%,rgba(55,82,235,.24),transparent 25%),linear-gradient(108deg,#09113a,#07102e 60%,#0d1948);overflow:hidden}.bottom-cta .stars{opacity:.33}.cta-route{position:absolute;inset:0;width:100%;height:100%;opacity:.6}.cta-route path{fill:none;stroke:#4b82ff;stroke-width:1.4;stroke-dasharray:2 11;filter:drop-shadow(0 0 5px #4e70ff)}.cta-art{position:absolute;z-index:2;left:max(calc((100vw - var(--container))/2 - 15px),20px);bottom:-37px;width:520px;height:330px}.cta-envelope{position:absolute;left:36px;bottom:0;width:381px;height:227px;border-radius:9px;background:linear-gradient(145deg,#fff,#dce0f0);border:1px solid #cdd1e4;box-shadow:0 27px 55px rgba(0,0,0,.38);transform:rotate(2deg);overflow:visible}.cta-envelope::before{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(31deg,transparent 49.5%,#c8cddd 50%,transparent 50.8%),linear-gradient(-31deg,transparent 49.5%,#c8cddd 50%,transparent 50.8%)}.cta-envelope::after{content:"";position:absolute;z-index:4;inset:0;background:linear-gradient(145deg,#f5f6fb,#dcdfea);clip-path:polygon(0 100%,50% 36%,100% 100%)}.cta-letter{position:absolute;z-index:2;left:45px;right:35px;bottom:70px;height:192px;padding-top:58px;color:#4b4a68;background:#fff;border:1px solid #d7d9e5;box-shadow:0 -5px 18px rgba(0,0,0,.09);font-family:"Segoe Script",cursive;font-size:22px;line-height:1.35;text-align:center;transform:rotate(-7deg)}.cta-letter::after{content:"";position:absolute;right:22px;top:16px;width:39px;height:47px;border:4px dotted #c37191;background:linear-gradient(135deg,#dba0b5,#f4d6df)}.cta-plane--one{width:65px;height:58px;left:-12px;top:35px;transform:rotate(-9deg)}.cta-plane--two{width:79px;height:70px;right:5px;top:85px;transform:rotate(12deg)}.cta-inner{min-height:342px;display:flex;align-items:center}.cta-copy{width:615px;margin-left:auto;padding-left:18px}.cta-copy h2{margin-bottom:14px;font-size:36px}.cta-copy p{max-width:550px;margin-bottom:20px;color:rgba(237,241,255,.84);font-size:13px;line-height:1.5}.cta-actions{display:flex;gap:15px}.cta-copy .trust-list{margin-top:18px;gap:21px;font-size:9px} /* Footer */ .site-footer{min-height:107px;background:#fff}.footer-inner{min-height:107px;display:grid;grid-template-columns:270px 1fr auto 1fr auto;gap:28px;align-items:center}.brand--footer{color:var(--ink)}.brand--footer .brand-mark{width:39px;height:39px;font-size:10px}.brand--footer>span:last-child{display:flex;flex-direction:column}.brand--footer b{font-size:11px}.brand--footer small{margin-top:4px;color:#777f97;font-size:7px;font-weight:450}.footer-nav{display:flex;justify-content:center;gap:30px}.footer-nav a{color:#57607b;font-size:9px}.footer-nav a:hover{color:#4e43df}.footer-social{display:flex;gap:7px}.footer-social a{width:24px;height:24px;display:grid;place-items:center;color:#304063}.footer-social svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}.footer-social svg .fill{fill:currentColor;stroke:none}.copyright{color:#8a91a7;font-size:7px;text-align:center}.footer-note{font-family:"Segoe Script",cursive;color:#444a64;font-size:14px;line-height:1.3;transform:rotate(-5deg);text-align:center} /* Reveal motion */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.js .reveal.is-visible{opacity:1;transform:none}.feature-grid .reveal:nth-child(2),.template-track .reveal:nth-child(2),.workflow-steps .reveal:nth-child(2),.stat-grid .reveal:nth-child(2){transition-delay:.06s}.feature-grid .reveal:nth-child(3),.template-track .reveal:nth-child(3),.workflow-steps .reveal:nth-child(3),.stat-grid .reveal:nth-child(3){transition-delay:.12s}.feature-grid .reveal:nth-child(4),.template-track .reveal:nth-child(4),.workflow-steps .reveal:nth-child(4),.stat-grid .reveal:nth-child(4){transition-delay:.18s}.feature-grid .reveal:nth-child(5),.template-track .reveal:nth-child(5),.workflow-steps .reveal:nth-child(5){transition-delay:.24s}.feature-grid .reveal:nth-child(6),.template-track .reveal:nth-child(6){transition-delay:.3s} /* Responsive */ @media (max-width: 1200px){ :root{--container:1060px}.main-nav{margin-left:90px;gap:28px}.hero-grid{grid-template-columns:44% 56%}.hero h1{font-size:62px}.hero-art{transform:scale(.86);transform-origin:left center;width:116%}.section-heading{gap:45px}.template-track{gap:14px}.mail-preview{height:180px}.preview-letter{height:138px}.mini-envelope{height:95px}.create-template{height:180px}.workflow-layout,.results-layout{grid-template-columns:235px 1fr;gap:35px}.workflow-steps{gap:20px}.workflow-steps li:not(:last-child)::after{right:-16px}.stat-card{padding-inline:16px}.cta-art{transform:scale(.87);transform-origin:left bottom}.cta-copy{width:570px}.footer-inner{grid-template-columns:235px 1fr auto 1fr auto;gap:18px}.footer-nav{gap:20px} } @media (max-width: 980px){ .container{width:min(100% - 40px,760px)} /* Zavřené menu je nejen průhledné, ale i visibility:hidden: jinak by Tab skákal na čtyři neviditelné odkazy. visibility se přepíná bez prolnutí (při zavření až po něm), takže prolnutí při otevření i zavření zůstává stejné. */ .site-header,.nav-wrap{height:72px}.main-nav{position:fixed;z-index:30;inset:72px 16px auto;padding:24px;display:flex;flex-direction:column;gap:0;align-items:stretch;margin:0;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(8,15,49,.97);box-shadow:0 24px 60px rgba(0,0,0,.35);backdrop-filter:blur(18px);opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}.main-nav a{padding:14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}.main-nav a:last-child{border-bottom:0}.menu-open .main-nav{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .22s ease,transform .22s ease,visibility 0s}.header-cta{margin-left:auto;margin-right:10px}.menu-button{display:grid}.menu-open .menu-open{display:none}.menu-open .menu-close{display:block} .hero{min-height:1030px}.hero::after{bottom:-25px}.hero-grid{min-height:1030px;grid-template-columns:1fr;align-content:start;padding-top:145px}.hero-copy{max-width:650px}.hero h1{font-size:69px}.hero-lead{font-size:15px}.hero-art{height:530px;width:710px;max-width:100%;margin:15px auto 0;transform:scale(.9);transform-origin:center top}.dashboard{left:72px}.env--right{right:7px}.card--note{right:-5px} .features{padding-top:78px}.section-heading,.section-heading--dark{grid-template-columns:1fr}.section-heading{gap:16px}.section-heading--dark .button{position:absolute;right:0;top:10px}.section-heading--dark>p{max-width:520px}.feature-grid{grid-template-columns:repeat(2,1fr)} .templates{padding-top:90px}.template-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px;cursor:grab;scrollbar-width:none}.template-track::-webkit-scrollbar{display:none}.template-track.dragging{cursor:grabbing;scroll-snap-type:none}.template-item{flex:0 0 205px;scroll-snap-align:start}.mail-preview,.create-template{height:220px}.preview-letter{height:168px}.mini-envelope{height:112px} .workflow-layout,.results-layout{grid-template-columns:1fr}.workflow-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}.workflow-intro .eyebrow,.workflow-intro h2{grid-column:1}.workflow-intro>p:not(.eyebrow),.workflow-intro .text-link{grid-column:2}.workflow-intro>p:not(.eyebrow){grid-row:2;align-self:end}.workflow-intro .text-link{grid-row:3}.workflow-steps{margin-top:20px}.results-layout{gap:30px}.results-intro{display:grid;grid-template-columns:1fr 1fr;align-items:end}.results-intro .eyebrow,.results-intro h2{grid-column:1}.results-intro>p:not(.eyebrow){grid-column:2;grid-row:2}.stat-grid{grid-template-columns:repeat(2,1fr)} .testimonials-layout{grid-template-columns:1fr}.testimonial-list{overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px;scrollbar-width:none}.quote-card{min-width:300px;scroll-snap-align:start}.testimonial-controls{top:40px} .bottom-cta{min-height:590px}.cta-art{left:50%;bottom:-50px;transform:translateX(-82%) scale(.78);transform-origin:center bottom}.cta-inner{min-height:590px;align-items:start;padding-top:72px}.cta-copy{width:570px;max-width:72%;margin-left:auto}.cta-copy .trust-list{flex-wrap:wrap}.site-footer{padding:25px 0}.footer-inner{grid-template-columns:1fr auto;grid-template-rows:auto auto auto;min-height:auto}.brand--footer{grid-column:1}.footer-social{grid-column:2}.footer-nav{grid-column:1/3;grid-row:2;justify-content:flex-start}.copyright{grid-column:1;text-align:left}.footer-note{grid-column:2;grid-row:3} } @media (max-width: 680px){ .container{width:calc(100% - 32px)}.header-cta{display:none}.brand-name{font-size:12px}.brand-mark{width:40px;height:40px}.hero{min-height:905px}.hero-grid{min-height:905px;padding-top:119px}.hero h1{font-size:48px}.hero-lead{font-size:14px}.hero-actions{flex-direction:column;align-items:stretch;max-width:290px}.hero-actions .button{width:100%}.trust-list{gap:12px;flex-wrap:wrap}.hero-art{width:650px;height:440px;margin-top:35px;transform:scale(.58);transform-origin:top left}.dashboard{top:130px;left:20px}.env--top{top:33px;left:74px}.card--portrait{top:17px}.card--city{left:-12px;top:195px}.card--travel{bottom:4px;left:12px}.card--note{top:216px;right:-2px}.env--bottom{right:20px}.plane--one{left:-2px} h2{font-size:34px}.features{padding:72px 0 78px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:112px}.section-heading>p{font-size:13px}.templates{padding:82px 0 72px}.section-heading--dark .button{position:static;justify-self:start}.template-item{flex-basis:190px}.mail-preview,.create-template{height:204px}.preview-letter{height:153px}.mini-envelope{height:105px} .workflow{padding:85px 0 70px}.workflow-intro,.results-intro{display:block}.workflow-intro>p:not(.eyebrow){max-width:100%}.workflow-steps{grid-template-columns:1fr;gap:17px}.workflow-steps li{min-height:76px;display:grid;grid-template-columns:60px 1fr;text-align:left;column-gap:14px;align-items:center}.workflow-steps li:not(:last-child)::after{content:"↓";left:21px;right:auto;top:69px}.workflow-steps .step-icon{grid-row:1/3;margin:0}.workflow-steps h3{align-self:end;margin-bottom:2px}.workflow-steps p{align-self:start}.results{padding:62px 0}.results-intro>p:not(.eyebrow){max-width:100%;margin-top:13px}.stat-grid{grid-template-columns:1fr 1fr;gap:12px}.stat-card{min-height:145px;padding:18px 14px}.stat-card>strong{font-size:24px}.stat-bottom{margin-top:20px}.stat-bottom svg{width:58px} .testimonials{padding:55px 0}.testimonials-layout{gap:28px}.testimonials-intro h2{font-size:31px}.testimonial-controls{display:none}.testimonial-list{display:flex;gap:12px}.quote-card{min-width:285px} .bottom-cta{min-height:690px}.cta-inner{padding-top:62px}.cta-copy{max-width:100%;width:100%;padding-left:0}.cta-copy h2{font-size:32px}.cta-actions{flex-direction:column;align-items:stretch;max-width:300px}.cta-copy .trust-list{max-width:320px}.cta-art{left:50%;bottom:-65px;transform:translateX(-50%) scale(.65)} .footer-inner{grid-template-columns:1fr auto}.footer-nav{display:grid;grid-template-columns:repeat(3,auto);row-gap:13px}.copyright{max-width:220px;line-height:1.4}.footer-note{font-size:12px} } @media (max-width: 420px){ .hero h1{font-size:43px}.hero-lead{line-height:1.5}.trust-list{font-size:10px}.hero-art{transform:scale(.5);width:680px;margin-top:30px}.feature-card{grid-template-columns:47px 1fr 18px;padding-inline:14px;gap:12px}.feature-icon{width:46px;height:46px}.feature-icon svg{width:25px;height:25px}.stat-grid{grid-template-columns:1fr}.stat-card{min-height:125px}.stat-bottom{margin-top:10px}.cta-copy h2{font-size:29px}.footer-nav{grid-template-columns:repeat(2,auto)} } @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.button,.feature-card{transition:none}} /* Dekorace přesahovaly sekce do stran a stránkou šlo posouvat vodorovně: hvězdné pozadí je otočené o 17° a zvětšené, bílý pruh pod sekcí s funkcemi je natažený o 2 % přes oba okraje a otočený o 0,8°. Ořezává se jen vodorovně. Ten pruh totiž schválně vyčnívá i DOLŮ - tím vzniká zkosený přechod k další sekci - a plný ořez by ho odstřihl. Hodnota clip je jediná, která smí stát proti visible na druhé ose, aniž by se druhá osa přepnula na auto; hidden by tuhle kombinaci nedovolil. */ .hero, .features, .templates, .workflow, .results, .bottom-cta { overflow-x: clip; overflow-y: visible; } /* --------------------------------------------------------------------------- Úpravy po kontrole na provozu Zákazník hlásil rozmazaný, špatně čitelný text a příliš roztaženou stránku. Měřením se potvrdilo obojí, každé z jiné příčiny. --------------------------------------------------------------------------- */ /* 1. Vykreslování písma. -webkit-font-smoothing: antialiased vypne subpixelové vyhlazování. Na macOS tím písmo jen zeslábne, ve Windows se tím ale obchází ClearType a text vypadá měkce a rozmazaně - a Windows má drtivá většina čtenářů této stránky. Návrat na auto je jediná změna, která se dotkne celé stránky naráz. */ body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* 2. Efekty, které rozostřují samotný text. Záře pod slovem "dorazí." rozmazává jeho okraje, rozostřené pozadí tlačítka posadí popisek na skládanou vrstvu a otočená patičková poznámka se vykresluje šikmo, tedy neostře. Dekorace zůstávají, jen přestávají ležet pod textem. */ .hero h1 span { text-shadow: none; } .button--ghost { backdrop-filter: none; background: rgba(11, 18, 56, .55); } .footer-note { transform: none; } /* 3. Čitelnost drobného textu. Osmdesát kusů textu bylo pod 12 px, z toho třicet dva na 9 px a část až na 7 px. Nejde o popisky v ilustracích - takhle byly sázené štítky, popisy kroků i navigace v patičce, tedy text, který má někdo číst. Písmo uvnitř kresleného dashboardu a náhledů obálek se schválně nemění: tam drobnost dělá ten dojem zmenšené obrazovky a nikdo to nečte. */ .eyebrow { font-size: 12px; letter-spacing: .16em; } .trust-list { font-size: 13px; } .trust-check { font-size: 11px; } .tag { font-size: 11px; } .text-link { font-size: 13px; } .workflow-steps h3 { font-size: 15px; } .workflow-steps p { font-size: 13px; } .stat-bottom em { font-size: 12px; } .footer-nav a { font-size: 13px; } .brand--footer small { font-size: 12px; } .copyright { font-size: 12px; } .feature-card p { font-size: 13px; } .section-heading > p { font-size: 15px; } /* 4. Svislé mezery. Sekce měly 92 až 110 px odsazení nahoře i dole, takže na 354 px obsahu připadalo 210 px prázdna a stránka měřila tři a půl obrazovky. Odsazení klesá zhruba o třetinu; rozvržení ani rytmus střídání světlých a tmavých sekcí se nemění. */ .hero, .hero-grid { min-height: 600px; } .features { padding: 62px 0 66px; } .templates { padding: 64px 0 58px; } .workflow { padding: 66px 0 58px; } .results { padding: 52px 0 50px; } .section-heading { margin-bottom: 28px; } /* 5. Prázdno nad nadtitulkem sekce. Hlavička sekce je dvousloupcová mřížka zarovnaná na spodní hranu. Když je pravý odstavec vyšší než levý sloupec s nadtitulkem a nadpisem - a v češtině je, protože texty jsou delší než v předloze - levý sloupec se propadne dolů a nad ním zůstane díra. Naměřeno 93 px nad nadtitulkem při šířce 1131 px, tedy víc než vlastní odsazení sekce. Oba sloupce proto začínají nahoře a odstavec se odsadí tak, aby jeho první řádek stál v jedné lince s nadpisem, ne s drobným nadtitulkem nad ním. Velikost odsazení odpovídá výšce nadtitulku i s jeho spodní mezerou. Pod 980 px se mřížka stejně sype do jednoho sloupce, tam by odsazení jen dělalo mezeru navíc. */ @media (min-width: 981px) { .section-heading, .section-heading--dark { align-items: start; } .section-heading > p { margin-top: 29px; } } /* 6. Zbylé svislé mezery mezi sekcemi. Po srovnání hlavičky zbývá dotáhnout samotná odsazení - pás mezi obsahem a další sekcí působil pořád jako prázdné místo, ne jako oddech. */ .features { padding: 52px 0 56px; } .templates { padding: 54px 0 50px; } .workflow { padding: 56px 0 50px; } .results { padding: 46px 0 44px; } .section-heading { margin-bottom: 24px; } /* Kontaktní formulář v závěrečné výzvě. Sází se na tmavém podkladu, takže pole mají prosvětlené pozadí místo bílého - bílý obdélník by v tmavé sekci působil jako díra. Popisky stojí nad poli a jsou skutečné