:root{ --bg1: #f8bbfd; --bg2: #fad4f8; --accent: #2dbdd6; --muted: #6b7280; --card: rgba(255,255,255,0.9); --glass: rgba(253, 213, 241, 0.6); --radius: 14px; --shadow: 0 8px 30px rgba(16,24,40,0.06); --text: #0f172a; --text2: #0f172a; --stat: rgba(89, 218, 250, 0.918); --border: rgba(0,0,0,0.05); /* Přidáno pro radio player */ --card-bg: var(--card); /* Přidáno pro funfact container */ } /* Dark theme overrides (toggle by adding .dark on ) */ .dark { --bg1: #071018; --bg2: #0b1b25; --accent: #2bd6c6; --muted: #9aa4ad; --card: rgba(10,14,20,0.78); --glass: rgba(255,255,255,0.03); --shadow: 0 8px 30px rgba(0,0,0,0.6); --text: #e6f6f6; --text2: #0f172a; --stat: rgba(89, 218, 250, 0.918); --border: rgba(255,255,255,0.04); /* Přidáno pro radio player */ } * { box-sizing: border-box; } /* ZDE JE OPRAVA - odstran n scrollbaru */ html, body { height: 100%; overflow-x: hidden; overflow-y: auto; /* Zm n no z hidden na auto */ width: 100%; margin: 0; padding: 0; } /* Skryt scrollbaru pro v echny prohl e e */ html { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE a Edge */ } body::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* Skryt scrollbaru pro v echny elementy */ *::-webkit-scrollbar { display: none; } * { -ms-overflow-style: none; scrollbar-width: none; } body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: repeating-linear-gradient( 135deg, var(--bg1), var(--bg2) 50%, var(--bg1) 100% ); background-size: 100% 200%; background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 120px; transition: background .35s ease, color .25s ease; } /* ZBYTEK K DU Z ST V STEJN */ /* center page content */ .page { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; } /* ===== header ===== */ .header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(255,255,255,0.65); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,0.04); z-index: 999; border-bottom: 1px solid rgba(0,0,0,0.02); transition: background .25s ease, border-color .25s ease; } .dark .header { background: rgba(6,10,14,0.6); border-bottom-color: rgba(255,255,255,0.03); } /* container inside header to align with page */ .header .inner { max-width: 1140px; margin: 0 auto; padding: 14px 20px; display: flex; gap: 18px; align-items: center; } .logo { width: 92px; height: 92px; border-radius: 20px; overflow: hidden; /* o zne p et kaj c sti obr zku */ display: flex; align-items: center; justify-content: center; border: none; background: none; box-shadow: none; transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.3s ease; } .logo:hover { transform: rotate(10deg) scale(1.08); box-shadow: 0 0 25px rgba(45, 189, 214, 0.6); /* tyrkysov z e */ filter: brightness(1.1); } .logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; /* u nen pot eba */ } .site-title { line-height:1; } .site-title h1 { margin: 0; font-size: 24px; letter-spacing: -0.4px; color: var(--text); } .site-title .subtitle { margin-top:6px; color:var(--muted); font-size:13px; } .header-nav { margin-left: auto; display:flex; gap:12px; align-items:center; } .header-nav a { text-decoration:none; color:var(--accent); font-weight:700; padding:6px 10px; border-radius:8px; cursor:pointer; } .header-nav a:hover { background: rgba(26,188,156,0.06); } /* make the toggle look like a small pill */ #darkToggle { font-size:16px; display:inline-grid; place-items:center; width:40px; height:32px; } /* ===== main layout ===== */ main { display: grid; grid-template-columns: 1fr 360px; gap:22px; margin-top: 6px; } .card { background: var(--card); padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(6px); border: 1px solid rgba(0,0,0,0.03); transition: background .25s ease, border-color .25s ease, color .25s ease; } .dark .card { background: var(--card); border-color: rgba(255,255,255,0.04); } .about h2 { color: var(--accent); margin-top:0; } .bio { line-height: 1.55; color: var(--text); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; /* CENTROVÁNÍ NA PC */ } .tag { padding: 6px 10px; border-radius: 999px; background: rgba(26,188,156,0.12); color: var(--accent); font-weight: 600; font-size: 13px; } .stats { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; justify-content: center; /* CENTROVÁNÍ NA PC */ } .stat { background: var(--stat); padding: 10px; border-radius: 10px; min-width: 90px; text-align: center; } .stat strong { display: block; font-size: 18px; color: var(--text2); } .stat span { color: var(--text2); } .stat:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(45, 189, 214, 0.6); } /* MOBIL - návrat k původnímu zarovnání zleva */ @media (max-width: 580px) { .tags { justify-content: flex-start; /* NA MOBILU ZLEVA */ } .stats { justify-content: flex-start; /* NA MOBILU ZLEVA */ } } /* Kontejner cel galerie */ .gallery { display: flex; flex-direction: column; align-items: center; gap: 30px; margin: 60px 0; width: 100%; padding-left: 8px; padding-right: 8px; } /* Velk hlavn obr zek */ .gallery-featured { width: 100%; max-width: 900px; padding-left: 8px; padding-right: 8px; box-sizing: border-box; } .gallery-full { width: 100%; border-radius: 20px; object-fit: cover; box-shadow: 0 0 25px rgba(45, 189, 214, 0.4); transition: transform 0.4s ease, box-shadow 0.4s ease; } .gallery-full:hover { transform: scale(1.03); box-shadow: 0 0 40px rgba(45, 189, 214, 0.6); } /* Grid pro mal miniatury */ .thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 900px; padding-left: 8px; padding-right: 8px; box-sizing: border-box; } .thumb { position: relative; overflow: hidden; border-radius: 15px; box-shadow: 0 0 10px rgba(45, 189, 214, 0.3); transition: transform 0.4s ease, box-shadow 0.4s ease; } .thumb:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(45, 189, 214, 0.6); } .thumb img, .thumb-small img { width: 100%; height: auto; display: block; object-fit: cover; } .gallery-block { display: flex; justify-content: center; align-items: stretch; gap: 25px; width: 100%; max-width: 1000px; margin: 60px auto; padding-left: 8px; padding-right: 8px; box-sizing: border-box; flex-wrap: wrap; } /* Lev vertik ln obr zek */ .left-vertical { flex: 1 1 300px; aspect-ratio: 3 / 4; border-radius: 10px; min-height: 50%; overflow: hidden; min-width: 0; box-shadow: 0 0 20px rgba(45, 189, 214, 0.3); transition: transform 0.4s ease, box-shadow 0.4s ease; } .left-vertical img { width: 100%; min-height: 50%; height: 100%; object-fit: cover; object-position: center; } .left-vertical:hover { transform: scale(1.04); box-shadow: 0 0 35px rgba(45, 189, 214, 0.6); } /* Prav st dva obr zky pod sebou */ .right-two { display: flex; flex-direction: column; gap: 20px; flex: 2 1 0; /* bez pevn ho 400px */ min-width: 0; } .thumb-small { flex: 1 1 0; border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px rgba(45, 189, 214, 0.3); transition: transform 0.4s ease, box-shadow 0.4s ease; } .thumb-small:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(45, 189, 214, 0.6); } /* Responzivn zobrazen */ @media (max-width: 980px) { /* prostor u headeru (v c odsazen zprava aby nic nele elo na kraji) */ .header .inner { padding-left: 5px; padding-right: 5px; /* zv en odsazen zprava */ } .gallery-block { flex-direction: column; } .right-two { flex-direction: row; flex-wrap: wrap; } .thumb-small { flex: 1 1 45%; } } @media (max-width: 580px) { /* definit vn jeden sloupec */ main { grid-template-columns: 1fr; gap: 12px; } .right-two { flex-direction: column; gap: 12px; flex: 1 1 0; } .thumb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .gallery, .gallery-block, .thumb-grid { padding-left: 6px; padding-right: 6px; } .header .inner { padding-left: 8px; padding-right: 8px; } .logo { width: 56px; height: 56px; flex: 0 0 56px; } } img { max-width: 100%; height: auto; display: block; object-fit: cover; /* tam kde je pot eba */ } /* Umo ni flex/grid d tem se zmen ovat */ * { box-sizing: border-box; } main, .page, .gallery-block, .thumb-grid, .right-two, .left-vertical, .thumb, aside, .header .inner { min-width: 0; } /* Odstra pevn "velk " flex-basis, umo ni k lov n */ .right-two { flex: 2 1 0; } /* Pokud m n kde pevn 400px/360px, p ep n me je dol p i mal ch obrazovk ch */ /* SPECIFICK OPRAVA PRO MOBILY <580px */ @media (max-width: 580px) { /* p epni layout main na jeden sloupec (pokud se to nestane) */ main { grid-template-columns: 1fr; gap: 16px; } /* header padding oprava */ .header .inner { padding-left: 8px; padding-right: 8px; } /* logo men */ .logo { width: 56px; height: 56px; flex: 0 0 56px; } /* galerie a bloky do jednoho sloupce */ .gallery, .gallery-block, .thumb-grid { width: 100%; max-width: 100%; padding-left: 8px; padding-right: 8px; } /* zmen i miniatury na 2 sloupce nebo 1 sloupec, podle pot eby */ .thumb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* prav st (dva obr zky) -> pod sebe */ .right-two { flex-direction: column; gap: 12px; } /* mal thumbs: dej jim min-width:0 aby se smrskly */ .thumb-small, .thumb { flex: 1 1 0; min-width: 0; } /* p edej p padn mu overflowu z paddingu */ body { padding-left: 0; padding-right: 0; } } /* ===== Styly pro Dropdown Menu ===== */ /* Kontejner pro tla tko a menu */ .dropdown-container { position: relative; /* Nutn pro pozicov n menu */ display: inline-block; /* Aby bylo na stejn m dku */ } /* Tla tko pro menu (ikona) */ #menuToggle { /* Vynucen stejn ho vzhledu jako #darkToggle */ font-size: 16px; display: inline-grid; place-items: center; width: 40px; height: 32px; padding: 0; /* Resetujeme padding z .header-nav a */ border-radius: 8px; cursor: pointer; line-height: 0; /* Pro lep zarovn n SVG */ /* Barva z .header-nav a */ color: var(--accent); } /* Zbarven SVG ikony */ #menuToggle svg { color: var(--accent); width: 20px; height: 20px; transition: transform 0.2s ease; } #menuToggle:hover { background: rgba(26,188,156,0.06); /* Stejn hover jako ostatn */ } /* Aktivn stav tla tka (kdy je menu otev en ) */ #menuToggle[aria-pressed="true"] svg { transform: rotate(90deg); } /* Samotn rozbalovac menu */ .dropdown-menu { /* Skryt a animovan */ opacity: 0; transform: translateY(-10px) scale(0.95); pointer-events: none; /* Nejde kliknout, kdy je skryt */ transition: opacity 0.15s ease, transform 0.15s ease; /* Pozicov n */ position: absolute; top: 100%; /* Hned pod tla tkem */ right: 0; /* Zarovnan doprava */ margin-top: 8px; /* Mal odstup */ /* Vzhled "card" z va str nky */ background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,0.03); backdrop-filter: blur(6px); min-width: 180px; /* Minim ln ka */ padding: 8px; /* Vnit n odsazen */ z-index: 1000; } /* Dark mode pro menu */ .dark .dropdown-menu { border-color: rgba(255,255,255,0.04); } /* Zobrazen stav (p id se t da .active) */ .dropdown-menu.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; /* Jde kliknout, kdy je viditeln */ } /* Odkazy uvnit menu */ .dropdown-menu a { display: block; /* Ka d odkaz na nov dek */ text-decoration: none; color: var(--text); /* Hlavn barva textu */ padding: 10px 12px; border-radius: 6px; /* Men zaoblen */ font-weight: 500; font-size: 15px; transition: background 0.2s ease, color 0.2s ease; } .dropdown-menu a:hover { background: rgba(26,188,156,0.12); /* Stejn hover jako u tag */ color: var(--accent); /* Zv razn me text */ } aside .card { position: sticky; top: 5px; } .socials { display:flex; flex-direction:column; gap:8px; } .social { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:var(--glass); border:1px solid rgba(0,0,0,0.05); } .social a { color:var(--accent); text-decoration:none; font-weight:700; } .social:hover { background: rgba(26,188,156,0.06); cursor:pointer; } .copymail { background:transparent;border:1px solid var(--accent); padding:10px; border-radius:10px; cursor:pointer; color:var(--accent); font-weight:700; } .copymail:hover { background:var(--accent); border:1px solid var(--accent) ;padding:10px; border-radius:10px; cursor:pointer; color:#0f172a; font-weight:700; } .sendmail { background:var(--accent); border:1px solid transparent; padding:10px 14px; border-radius:10px; color:#0f172a; font-weight:700; cursor:pointer; } .sendmail:hover { background:transparent; border:1px solid var(--accent); padding:10px 14px; border-radius:10px; color:var(--accent); font-weight:700; cursor:pointer; } footer { margin-top:18px; color:var(--muted); font-size:13px; text-align:center } @media (max-width:980px) { main { grid-template-columns: 1fr; } .header .inner { padding: 10px; } .logo { width:64px; height:64px; flex:0 0 64px; } .logo img { width:64px; height:64px; } .card { padding: 10px; } } /* ===== FIX: roztažení sekce přes celé grid sloupce + správné chování downloadů ===== */ /* Vložit na konec styles.css */ /* Vynuť, aby element s třídou .span-columns zabral celý grid (přes main 1fr + aside) */ main .span-columns, .main-wide .span-columns, .page .span-columns { grid-column: 1 / -1 !important; /* přes všechny sloupce gridu */ display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; clear: both !important; align-self: stretch !important; } /* Pokud někde existuje text-align: center, nechceme ho pro obsah seznamu */ .downloads { text-align: left !important; overflow: visible; } /* Kontejner s položkami: stack svisle */ .download-list { display: flex; flex-direction: column; gap: 14px; width: 100%; box-sizing: border-box; align-items: stretch; } /* Každý řádek stahování: flex řádek (text vlevo, tlačítko vpravo) */ .download-item { display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; background: var(--glass); border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.04); width: 100%; box-sizing: border-box; margin: 0; /* odstraníme staré marginy které mohly posouvat layout */ min-width: 0; /* důležité, aby flex děti mohly seškrtit šířku bez rozbíjení layoutu */ float: none !important; /* jistota pokud by někde bylo float */ } /* Meta (název + popisek) – zabere co nejvíc místa */ .download-item .meta { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; /* velmi důležité pro text-overflow v flex kontejnerech */ } /* Zkracení dlouhých textů místo lámaní layoutu */ .download-item h3, .download-item p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== DOWNLOAD BUTTON STYLES ===== */ .download-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 18px; border-radius: 999px; /* ZMĚNA: kapsle místo 10px */ text-decoration: none; font-weight: 700; font-size: 14px; min-width: 120px; box-sizing: border-box; /* Stejný styl jako sendmail tlačítko */ background: var(--accent); border: 1px solid transparent; color: white; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; } .download-btn:hover { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; /* DŮLEŽITÉ: stejné jako normální stav */ } /* Dark theme pro download button */ .dark .download-btn { background: var(--accent); color: var(--bg2); } .dark .download-btn:hover { background: transparent; color: var(--accent); border-radius: 999px; /* DŮLEŽITÉ: i v dark módu */ } /* Ikona uvnitř tlačítka */ .download-btn .icon { width: 16px; height: 16px; fill: currentColor; } /* Mobile: na malých obrazovkách se každý download-item složí do sloupce */ @media (max-width: 760px) { .download-item { flex-direction: column; align-items: stretch; gap: 10px; } .download-item h3, .download-item p { white-space: normal; overflow: visible; text-overflow: unset; } }