/* ============================================ style.css – centrální stylesheet pro CELÝ web Nahraj do rootu (/style.css) a přilinkuj v KAŽDÉ stránky (index.html, o-mne, sluzby, ...): Postup je MOBILE-FIRST: základní pravidla platí pro mobil, media queries (min-width) přidávají věci pro širší obrazovky. Nic se tím nerozbíjí, protože nikdy nevycházíme z rozbitého stavu. ============================================ */ :root { --navy: #0A1628; --blue: #1B4FD8; --sky: #3B82F6; --light: #EFF6FF; --white: #FFFFFF; --gray: #64748B; --border: #CBD5E1; --accent: #DBEAFE; --footer-bg: #060D1A; } *, *::before, *::after { box-sizing: border-box; min-width: 0; } img { max-width: 100%; display: block; } a { overflow-wrap: anywhere; } /* ============ PERKS BAR (perks.js) ============ */ .perks { background: var(--navy); border-top: 1px solid rgba(27,79,216,0.25); padding: 28px 5%; } .perks-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .perk { display: flex; align-items: flex-start; gap: 14px; } .perk-icon { flex-shrink: 0; margin-top: 2px; color: var(--sky); } .perk-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .perk-text { display: flex; flex-direction: column; gap: 4px; } .perk-title { font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--white); line-height: 1.3; } .perk-desc { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; color: var(--gray); line-height: 1.6; font-weight: 300; } .perk-divider { display: none; } @media (min-width: 900px) { .perks { padding: 36px 5%; } .perks-inner { flex-direction: row; align-items: flex-start; } .perk { flex: 1; } .perk-divider { display: block; width: 1px; background: rgba(255,255,255,0.08); align-self: stretch; flex-shrink: 0; } } /* ============ FOOTER CTA (hero blok v footer.html) ============ */ .footer-cta-section { background: var(--navy); padding: 56px 5%; position: relative; overflow: hidden; } .footer-cta-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(27,79,216,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(27,79,216,0.12) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 100%); } .footer-cta-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; } .footer-cta-text { max-width: 480px; } .footer-cta-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); color: #93C5FD; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; margin-bottom: 20px; } .footer-cta-badge-dot { width: 6px; height: 6px; background: var(--sky); border-radius: 50%; display: inline-block; } .footer-cta-title { font-family: 'DM Serif Display', serif; font-size: clamp(1.7rem, 6vw, 3.2rem); color: var(--white); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; } .footer-cta-title em { font-style: italic; color: #93C5FD; } .footer-cta-desc { color: var(--gray); font-size: 0.95rem; line-height: 1.7; font-weight: 300; margin-bottom: 0; } .footer-cta-btns { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; } .footer-cta-btn-primary, .footer-cta-btn-secondary { padding: 14px 28px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; text-decoration: none; text-align: center; white-space: nowrap; } .footer-cta-btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 20px rgba(27,79,216,0.4); } .footer-cta-btn-secondary { background: transparent; color: #94A3B8; border: 1px solid rgba(148,163,184,0.3); } .footer-cta-photo { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 4px solid var(--blue); box-shadow: 0 0 0 3px rgba(27,79,216,0.3), 0 12px 40px rgba(0,0,0,0.4); } @media (min-width: 700px) { .footer-cta-inner { flex-direction: row; text-align: left; justify-content: space-between; gap: 60px; } .footer-cta-btns { flex-direction: row; width: auto; max-width: none; } .footer-cta-photo { width: 200px; height: 200px; } } /* ============ FOOTER COLUMNS ============ */ .site-footer { background: var(--footer-bg); padding: 48px 5% 32px; border-top: 1px solid rgba(255,255,255,0.05); } .footer-container { max-width: 1100px; margin: 0 auto; } .footer-cols { display: flex; flex-direction: column; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.06); } .footer-col-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #475569; margin-bottom: 16px; } .footer-brand-link { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: var(--white); text-decoration: none; letter-spacing: -0.02em; } .footer-brand-link span { color: var(--blue); } .footer-brand-desc { color: #334155; font-size: 0.875rem; line-height: 1.7; margin-top: 14px; font-weight: 300; max-width: 320px; } .footer-linkedin { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; background: rgba(27,79,216,0.15); border: 1px solid rgba(27,79,216,0.3); color: #93C5FD; padding: 8px 16px; border-radius: 8px; text-decoration: none; font-size: 0.82rem; font-weight: 500; } .footer-nav-links, .footer-contact-links { display: flex; flex-direction: column; gap: 10px; } .footer-nav-links a, .footer-contact-links a { color: #64748B; text-decoration: none; font-size: 0.875rem; } .footer-legal-lines { display: flex; flex-direction: column; gap: 8px; } .footer-legal-lines span { color: #334155; font-size: 0.82rem; } .footer-cert-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; background: #fff; border-radius: 8px; padding: 10px 14px; text-decoration: none; } .footer-cert-badge img { height: 40px; width: auto; } .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; padding-top: 24px; gap: 12px; } .footer-bottom p { color: #1E293B; font-size: 0.78rem; } .footer-bottom-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .footer-bottom-links a { color: #1E293B; font-size: 0.78rem; text-decoration: none; } @media (min-width: 700px) { .footer-cols { flex-direction: row; flex-wrap: wrap; gap: 32px 48px; } .footer-col { flex: 1 1 160px; min-width: 160px; } .footer-col-brand { flex: 2 1 240px; min-width: 220px; } .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } /* ============ KONTAKT BLOK (kontakt.js) – obecná kostra ============ Až pošleš obsah kontakt.js, doladím přesně na míru. Zatím připraveno na stejný vzor jako footer-cta výše. */ .kontakt-section { background: var(--navy); padding: 56px 5%; } .kontakt-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .kontakt-photo { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; border: 3px solid var(--blue); } .kontakt-cards { display: flex; flex-direction: column; gap: 14px; width: 100%; } .kontakt-card { border: 1px solid rgba(148,163,184,0.25); border-radius: 10px; padding: 16px 20px; color: #94A3B8; font-size: 0.95rem; text-decoration: none; display: block; } @media (min-width: 700px) { .kontakt-inner { flex-direction: row; justify-content: space-between; } .kontakt-cards { max-width: 320px; } }