/* ===================================================================== Spekuluj.cz — FACELIFT (vizuální rafinace) --------------------------------------------------------------------- BEZPEČNOST: Tento soubor mění POUZE vzhled (barvy, stíny, typografii, zaoblení, ztlumení animací). NEmění strukturu stránky, formuláře, PHP ani chování. Načítá se jako POSLEDNÍ, po custom-modern.css. ZAPNUTÍ: v header.php přidat za řádek s custom-modern.css: VYPNUTÍ / REVERT: odebrat tu jednu řádku (nebo smazat tento soubor). Vzhled se okamžitě vrátí do původního stavu. Postaveno na existujících designových tokenech (--modern-*), takže se změny čistě propíší do stávajících pravidel bez zásahu do layoutu. ===================================================================== */ /* --------------------------------------------------------------------- 1) RETUNING DESIGN TOKENŮ (nejbezpečnější, nejúčinnější páka) Jemnější, "prémiovější" stíny a o něco větší zaoblení = modernější, důvěryhodnější dojem (styl fintech/proptech). Barvy značky zachovány. --------------------------------------------------------------------- */ :root { /* Značka zůstává indigová – jen sjednocený, o kousek sytější gradient */ --modern-primary: #6366f1; --modern-primary-dark: #4f46e5; --modern-secondary: #8b5cf6; --modern-gradient: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%); /* Měkčí, vrstvené stíny (místo těžkého černého boxu) */ --modern-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10); --modern-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .07); --modern-shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, .16), 0 6px 14px -6px rgba(16, 24, 40, .10); /* O kousek větší zaoblení */ --modern-radius-sm: 10px; --modern-radius-md: 14px; --modern-radius-lg: 18px; } /* --------------------------------------------------------------------- 2) TYPOGRAFIE (čistý systémový font + lepší hierarchie a čitelnost) --------------------------------------------------------------------- */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: #1f2937; background-color: #fbfbfd; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7 { letter-spacing: -0.02em; line-height: 1.12; color: #111827; } h1, .h1, .display-4, .display-5, .display-6 { font-weight: 800; } h2, h3, .h2, .h3 { font-weight: 700; } /* Zvýrazněný text ve větách – jemnější než tučné černé */ p b, p strong { font-weight: 700; color: #111827; } .lead, .fs-lg { line-height: 1.6; } .text-muted { color: #6b7280 !important; } /* Gradientový text v hero – čitelnější, sytější */ .text-gradient-primary { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* --------------------------------------------------------------------- 3) TLAČÍTKA (tvárnější, s jemným zdvihem – bez změny rozměrů layoutu) --------------------------------------------------------------------- */ .btn { border-radius: 12px; font-weight: 600; letter-spacing: -0.01em; } .btn-lg { border-radius: 14px; font-weight: 700; padding-top: 0.8rem; padding-bottom: 0.8rem; } .btn-primary { box-shadow: 0 6px 16px -4px rgba(99, 102, 241, .45); } .btn-primary:hover, .btn-primary:focus-visible { box-shadow: 0 10px 22px -6px rgba(124, 58, 237, .55); transform: translateY(-2px); } .btn-outline-primary { border-width: 2px; } /* --------------------------------------------------------------------- 4) FORMULÁŘE (komfortnější vstupy, jasnější focus) --------------------------------------------------------------------- */ .form-control, .form-select { border-radius: 12px; border-color: #e2e5ec; } .form-control:hover, .form-select:hover { border-color: #cbd0da; } .form-control:focus, .form-select:focus { border-color: var(--modern-primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); } /* Vstupy s ikonou (lokalita, m²) – zarovnané zaoblení a klidnější rámeček */ .input-group-text { background-color: #f7f8fb; border-color: #e2e5ec; } /* --------------------------------------------------------------------- 5) HERO / VYHLEDÁVACÍ KARTA (prémiovější, vzdušnější) --------------------------------------------------------------------- */ #search-form.card { border: 1px solid rgba(99, 102, 241, .12); border-radius: 22px; box-shadow: 0 24px 60px -20px rgba(79, 70, 229, .28), 0 8px 24px -12px rgba(16, 24, 40, .12); } /* Odznak kategorie/badge v hero – čitelnější */ #search-form .badge.bg-secondary { background: rgba(99, 102, 241, .10) !important; color: #4f46e5 !important; font-weight: 600; border-radius: 8px; } /* --------------------------------------------------------------------- 6) KARTY (sjednocené zaoblení, měkčí stín, jemný hover) --------------------------------------------------------------------- */ .card { border-radius: var(--modern-radius-lg); } article.card.border-0.shadow-sm, article.card.border-0.shadow-sm:hover { border-radius: 18px; } /* --------------------------------------------------------------------- 7) ODZNAKY / CHIPY (jemnější, konzistentní) --------------------------------------------------------------------- */ .badge { letter-spacing: -0.01em; } .param-badge, .detail-icon, .detail-icon.contact-icon { /* Sjednocení starší purpurové (#667eea→#764ba2) na barvu značky, ať karta výsledku nemíchá dva různé fialové systémy. */ } .param-badge.home, .detail-icon, .detail-icon.contact-icon { background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%); } /* Zelenou (telefon) a oranžovou (e-mail) ponecháváme kvůli významu. */ .detail-icon.contact-icon.phone-icon { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } .detail-icon.contact-icon.email-icon { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } /* --------------------------------------------------------------------- 8) ZTLUMENÍ „HLUKU" (méně blikání = důvěryhodnější, klidnější web) --------------------------------------------------------------------- */ /* Pulzující slogan u loga – vypnout animaci */ .brand-slogan { animation: none !important; opacity: .85 !important; } /* Třpytivý efekt na "NOVÝ" odznaku – vypnout */ .modern-badge.new::before { display: none !important; animation: none !important; } /* FOMO widget – ponechat, ale bez nekonečného "glow" pulzování */ #fomo-widget { animation: fomo-slide-in .5s cubic-bezier(.22, 1, .36, 1) forwards !important; background: linear-gradient(135deg, rgba(79, 70, 229, .92) 0%, rgba(124, 58, 237, .9) 100%) !important; box-shadow: 0 16px 40px -12px rgba(79, 70, 229, .5) !important; border-radius: 18px !important; } /* Zámek u upgrade prvků – klidnější (bez pulzování) */ .clickable-upgrade .bx-lock { animation: none !important; } /* --------------------------------------------------------------------- 9) NAVBAR (o něco čistší sklo) --------------------------------------------------------------------- */ .header.navbar { background: rgba(255, 255, 255, .72) !important; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(16, 24, 40, .06); box-shadow: 0 4px 20px -8px rgba(16, 24, 40, .12); } /* --------------------------------------------------------------------- 10) SEKCE / RYTMUS (jemné oddělení, konzistentní vzdušnost) --------------------------------------------------------------------- */ .bg-light { background-color: #f6f7fb !important; } /* --------------------------------------------------------------------- 11) PATIČKA (o kousek hlubší přechod) --------------------------------------------------------------------- */ .footer { background: linear-gradient(180deg, #1e1b4b 0%, #0b1020 100%); } /* --------------------------------------------------------------------- 12) MOBIL (drobné pohodlí, nic co by lámalo layout) --------------------------------------------------------------------- */ @media (max-width: 576px) { h1, .h1, .display-4, .display-5, .display-6, .display-7 { line-height: 1.15; } #search-form.card { border-radius: 18px; } .btn-lg { padding-top: 0.7rem; padding-bottom: 0.7rem; } } /* --------------------------------------------------------------------- 13) FOCUS / PŘÍSTUPNOST (viditelný focus pro klávesnici) --------------------------------------------------------------------- */ a:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid rgba(99, 102, 241, .55); outline-offset: 2px; }