/* ===================================================================== SES service – DESIGN REFRESH (2026-09) Vrstva vylepšení vzhledu nad css/style.css. Načítá se jako poslední stylesheet v . Odstraněním odkazu na tento soubor se web vrátí k původnímu vzhledu. ===================================================================== */ /* ---------- 1. Design tokeny ---------- */ :root { --ink: #0b1f44; --primary-color: #085df9; --primary-dark: #0648c9; --primary-light: #4d8dff; --primary-soft: rgba(8, 93, 249, 0.08); --secondary-color: #ffc928; --secondary-dark: #f0b400; --accent-gradient: linear-gradient(135deg, #2a74ff 0%, #085df9 55%, #0648c9 100%); --gold-gradient: linear-gradient(135deg, #ffd84d 0%, #ffb700 100%); --text-color: #1d2939; --text-light: #475467; --text-lighter: #5b6678; --text-muted: #667085; --bg-light: #f5f7fb; --bg-lighter: #eef2f8; --border-color: #e3e8f0; --border-light: #edf1f6; --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.06); --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, 0.16); --shadow-xl: 0 24px 48px -12px rgba(16, 24, 40, 0.20); --shadow-glow: 0 10px 30px -8px rgba(8, 93, 249, 0.45); --radius-card: 20px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- 2. Základ a typografie ---------- */ html { /* odkazy na kotvy (#opravy apod.) nezajedou pod pevnou lištu */ scroll-padding-top: 100px; } body { /* stránka se zobrazí hned (dříve fade-in 0,6 s zpomaloval první vykreslení) */ opacity: 1; animation: none; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; color: var(--ink); } ::selection { background: rgba(8, 93, 249, 0.28); } :focus-visible { outline: 3px solid rgba(8, 93, 249, 0.45); outline-offset: 2px; border-radius: 6px; } .section-title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); color: var(--ink); font-weight: 700; } .section-title::after { width: 48px; height: 4px; bottom: -14px; } .section-subtitle { color: var(--text-light); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); } .section-header .section-subtitle { max-width: 640px; margin-left: auto; margin-right: auto; } /* Nadpisy sekcí uvnitř stránky Služby – na střed k podtržení */ .advantages-section > .section-title, .section .process-section > .section-title { display: block; text-align: center; margin-bottom: var(--space-12); } .testimonials-intro { margin-bottom: var(--space-8); } .section-header { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .section, .services-section, .process-section, .benefits-section { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); } /* ---------- 3. Navigace ---------- */ .navbar { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: none; border-bottom: 1px solid rgba(16, 24, 40, 0.06); } .navbar.scrolled { background: rgba(255, 255, 255, 0.94); box-shadow: 0 6px 24px -12px rgba(16, 24, 40, 0.18); } .nav-links a { white-space: nowrap; font-weight: 500; color: var(--text-color); border-radius: 999px; } .nav-links a:not(.btn)::after { display: none; } .nav-links a:not(.btn):hover, .nav-links a.active:not(.btn) { color: var(--primary-color); background: var(--primary-soft); } .nav-links a.active:not(.btn) { font-weight: 600; } /* Obchod – jemné zlaté tlačítko, Zákaznický portál – hlavní modré */ .navbar .nav-links a.btn-shop { background: #fff7d6 !important; color: #7a5a00 !important; border: 1px solid #ffe08a !important; padding: 0.5rem 1rem !important; font-size: 0.875rem !important; font-weight: 600 !important; text-transform: none; letter-spacing: 0; box-shadow: none; } .navbar .nav-links a.btn-shop:hover { background: var(--secondary-color) !important; color: var(--ink) !important; transform: none; } .navbar .nav-links a.btn-portal, .navbar .nav-links a.btn[href^="https://crm-ses.com"] { background: var(--accent-gradient) !important; color: #fff !important; border: none !important; padding: 0.55rem 1.15rem !important; font-size: 0.875rem !important; font-weight: 600 !important; text-transform: none; letter-spacing: 0; box-shadow: 0 6px 16px -6px rgba(8, 93, 249, 0.55); } .navbar .nav-links a.btn-portal:hover, .navbar .nav-links a.btn[href^="https://crm-ses.com"]:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); } .lang-select { background-color: #fff; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-color); min-width: 0; padding: 0.45rem 2rem 0.45rem 0.85rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } .lang-select:hover { background-color: var(--bg-light); border-color: #cfd6e2; } .lang-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(8, 93, 249, 0.12); } .search-container input { border: 1px solid var(--border-color); background: var(--bg-light); width: 150px; } .search-container input:focus { width: 190px; box-shadow: 0 0 0 4px rgba(8, 93, 249, 0.12); } @media (max-width: 1280px) and (min-width: 769px) { .search-container input { width: 120px; } .search-container input:focus { width: 150px; } .language-switcher { margin-left: var(--space-2); } } @media (max-width: 1100px) and (min-width: 769px) { .search-container { display: none; } } @media (max-width: 768px) { .navbar { background: rgba(255, 255, 255, 0.98); } .nav-links.mobile-open { padding: var(--space-3) 0 var(--space-4); gap: 4px; } .nav-links.mobile-open > li { width: 100%; } .navbar .nav-links a.btn { display: flex !important; width: 100%; margin-top: 4px; } .nav-links.mobile-open .search-container, .nav-links.mobile-open .search-container input, .nav-links.mobile-open .search-container input:focus { width: 100%; } .nav-links a { justify-content: flex-start; padding: 0.8rem 1rem; border-radius: 12px; font-size: 1rem; } .navbar .nav-links a.btn-shop, .navbar .nav-links a.btn-portal, .navbar .nav-links a.btn[href^="https://crm-ses.com"] { justify-content: center; padding: 0.8rem 1rem !important; font-size: 1rem !important; } } /* ---------- 4. Tlačítka ---------- */ .btn { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 600; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn::before { display: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary, .btn-service { background: var(--accent-gradient); color: #fff; box-shadow: 0 6px 16px -6px rgba(8, 93, 249, 0.5); } .btn-primary:hover, .btn-service:hover { background: var(--accent-gradient); box-shadow: var(--shadow-glow); } .btn-large { padding: 0.9rem 1.75rem; font-size: 1rem; min-width: 0; } .btn-xl { padding: 1rem 2rem; font-size: 1.05rem; min-width: 0; } /* ---------- 5. Hero (úvodní stránka) ---------- */ .hero-overlay { background: radial-gradient(ellipse at 75% 40%, rgba(8, 93, 249, 0.18) 0%, transparent 60%), linear-gradient(100deg, rgba(4, 18, 48, 0.88) 0%, rgba(6, 30, 78, 0.70) 48%, rgba(4, 18, 48, 0.80) 100%); } /* Obsah hero nesmí zajet pod spodní vlnu – hero se raději prodlouží */ .hero { padding-top: 110px; padding-bottom: clamp(80px, 9vw, 130px); } .hero::after { height: clamp(60px, 8vw, 120px); } .hero-container { gap: clamp(2rem, 4vw, 3.5rem); } @media (min-width: 1025px) { .hero-left { flex: 0 1 42%; } .hero-right { flex: 1 1 58%; } } .hero-title { font-size: clamp(2rem, 1.1rem + 2.2vw, 2.9rem); line-height: 1.12; letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); color: #fff; } .hero-slogan { min-height: 0; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); color: rgba(255, 255, 255, 0.88); margin-bottom: var(--space-6); } .hero-benefits { gap: var(--space-3); margin: var(--space-6) 0; } .hero .benefit-item { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.925rem; gap: 0.5rem; } .hero .benefit-item i { font-size: 0.95rem; color: var(--secondary-color); } .hero .cta-buttons { gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); } /* Hlavní akce „Objednat servis“ zlatě, kalkulace jako průhledné tlačítko */ .hero .btn-partnership { order: -1; background: var(--gold-gradient); color: var(--ink); box-shadow: 0 10px 28px -10px rgba(255, 183, 0, 0.7); padding: 1rem 2rem; font-size: 1.05rem; } .hero .btn-partnership:hover { background: var(--gold-gradient); box-shadow: 0 14px 34px -10px rgba(255, 183, 0, 0.85); } .hero #quote-btn { background: rgba(255, 255, 255, 0.10); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .hero #quote-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; box-shadow: none; } .about-section { border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.5); } .about-section h2 { color: #fff; font-size: 1.35rem; } .about-section p { color: rgba(255, 255, 255, 0.85); } /* Nízké obrazovky (notebooky, zvětšení ve Windows) – kompaktnější hero */ @media (max-height: 780px) and (min-width: 769px) { .hero-title { font-size: clamp(1.9rem, 1rem + 1.8vw, 2.5rem); margin-bottom: var(--space-3); } .hero-slogan { margin-bottom: var(--space-3); } .hero-benefits { margin: var(--space-3) 0; } .hero .cta-buttons { margin: var(--space-4) 0 var(--space-3); } .hero .btn-partnership, .hero #quote-btn { padding: 0.8rem 1.6rem; font-size: 1rem; } .about-section { padding: var(--space-6); } .about-section p { font-size: 0.95rem; line-height: 1.7; } } @media (max-width: 768px) { .hero .cta-buttons { flex-direction: column; align-items: center; padding: 0 var(--space-2); } .hero .cta-buttons .btn { width: 100%; max-width: 340px; } .hero .benefit-item { font-size: 0.85rem; padding: 0.35rem 0.75rem; } } /* ---------- 6. Hlavička podstránek ---------- */ .page-header { min-height: 0; padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); } .page-header-background { background: radial-gradient(circle at 85% 15%, rgba(77, 141, 255, 0.35) 0%, transparent 45%), radial-gradient(circle at 10% 90%, rgba(255, 201, 40, 0.14) 0%, transparent 40%), linear-gradient(135deg, #0a2a6b 0%, #0648c9 60%, #085df9 100%); } .page-header-overlay { background: none; } .page-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); letter-spacing: -0.025em; text-shadow: none; } .page-subtitle { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); color: rgba(255, 255, 255, 0.85); opacity: 1; } .breadcrumb { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 0.3rem 0.9rem; } .breadcrumb-current { color: var(--secondary-color); } /* ---------- 7. Karty (sjednocený vzhled) ---------- */ .service-card, .benefit-card, .testimonial-card, .gallery-item, .advantage-item, .process-step, .job-card, .blog-card, .contact-form-container, .form-type-selection { border-radius: var(--radius-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-md); } .service-card:hover, .benefit-card:hover, .testimonial-card:hover, .gallery-item:hover, .advantage-item:hover, .job-card:hover, .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #cddcf7; } .service-card--featured:hover { transform: translateY(-3px); } .service-content h3, .service-card:hover .service-content h3 { color: var(--ink); } .feature-tag { background: var(--primary-soft); color: var(--primary-dark); font-weight: 500; } .feature-tag:hover { background: var(--primary-color); color: #fff; } /* Výhody – menší ikony v jemném podbarvení */ .benefits-section { background: var(--bg-light); } .benefits-grid { gap: var(--space-6); } .benefit-card { padding: var(--space-8); text-align: left; } .benefit-card::before { display: none; } .benefit-icon, .advantage-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--primary-soft); color: var(--primary-color); font-size: 1.35rem; box-shadow: none; margin: 0 0 var(--space-5); } .benefit-card:hover .benefit-icon { background: var(--primary-color); color: #fff; transform: none; } .benefit-card h3 { color: var(--ink); font-size: 1.15rem; margin-bottom: var(--space-2); } .benefit-card p { font-size: 0.95rem; margin: 0; } /* Výhody na stránce Služby */ .advantage-item { text-align: left; padding: var(--space-8); } .advantage-item h3 { color: var(--ink); } .advantage-item:hover .advantage-icon { background: var(--primary-color); color: #fff; transform: none; } /* Proces */ .process-section { background: #fff; } .process-card { border-radius: var(--radius-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-md); overflow: hidden; } /* Bezplatná konzultace */ .services-bottom-cta { background: radial-gradient(circle at 90% 10%, rgba(8, 93, 249, 0.10) 0%, transparent 45%), var(--bg-light); border: 1px solid var(--border-color); border-radius: 24px; } .services-bottom-cta h3 { color: var(--ink); } /* Recenze */ .testimonial-card::before { color: rgba(8, 93, 249, 0.12); } .testimonial-text { font-style: normal; color: var(--text-color); } .author-avatar { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; width: 48px; height: 48px; } .author-info h4 { color: var(--ink); font-size: 1rem; } .rating { color: #f5a400; } /* Hlavičky textových stránek (FAQ, ochrana údajů, obchodní podmínky) */ .faq-header, .privacy-header, .terms-header { padding-top: calc(90px + clamp(2rem, 5vw, 3.5rem)); padding-bottom: 0; text-align: center; } .faq-header .section-description, .privacy-header .section-description, .terms-header .section-description { color: var(--text-light); margin-top: var(--space-6); } .faq-content, .privacy-content, .terms-content { padding-top: var(--space-8); } @media (max-width: 768px) { .faq-header, .privacy-header, .terms-header { padding-top: calc(80px + var(--space-6)); } } /* Články blogu – první obsah pod pevnou lištou, na mobilu bez „děr“ z do bloku zarovnaného textu */ .article-container { padding-top: var(--space-8); } .article-title { color: var(--ink); letter-spacing: -0.02em; } .article-content h2, .article-content h3 { color: var(--ink); } @media (max-width: 768px) { .article-content p { text-align: left; } } .faq-category { background-color: #fff; border: 1px solid var(--border-color); color: var(--text-color); font-weight: 500; font-size: 0.95rem; } .faq-category:hover, .faq-category.active { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; } .faq-item { border-bottom-color: var(--border-color); } .faq-question { color: var(--ink); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.1rem; } .faq-question:hover, .faq-question.active { color: var(--primary-color); } .faq-question::after { font-family: 'Font Awesome 6 Free'; color: var(--primary-color); } /* ---------- 8. Formuláře ---------- */ .form-control { border: 1px solid #d5dce6; border-radius: 12px; padding: 0.75rem 1rem; min-height: 48px; background-color: #fff; box-shadow: var(--shadow-xs); } .form-control:hover:not(:focus) { border-color: #b9c3d3; } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(8, 93, 249, 0.12); } .form-control::placeholder { color: #98a2b3; } .form-group label { color: var(--ink); font-weight: 600; } .btn-form-type { text-transform: none; letter-spacing: 0; } /* ---------- 9. Modální okna ---------- */ .modal { background: rgba(4, 18, 48, 0.55); } .modal-content { border-radius: 24px; box-shadow: 0 32px 80px -20px rgba(4, 18, 48, 0.45); } .modal-content h2 { color: var(--ink); } /* ---------- 10. Patička ---------- */ .footer-modern .footer-links a:hover { color: var(--secondary-color); } /* ---------- 11. Omezení pohybu ---------- */ @media (prefers-reduced-motion: reduce) { .btn:hover, .service-card:hover, .benefit-card:hover, .testimonial-card:hover, .gallery-item:hover, .job-card:hover, .blog-card:hover { transform: none; } }