/* -------------------------------------------------- Základní nastavení body -------------------------------------------------- */ body { font-size: 16px; font-weight: 400; color: #fff; /* bílý text */ background-color: #000; /* tmavé pozadí */ margin-bottom: 50px; padding: 0; display: flex; justify-content: center; /* horizontálně centrovat */ font-feature-settings: "ss01" 1; } /* -------------------------------------------------- Hlavní kontejner pro stránku -------------------------------------------------- */ .user-page { display: flex; flex-direction: column; align-items: center; padding-top: 40px; /* Bez tohohle je .user-page jako flex položka smrštěná na šířku obsahu a `width: 100%` na .items nemá o co se opřít — tlačítka pak zůstanou úzká bez ohledu na max-width. */ width: 100%; } /* Avatar */ .avatar img { border-radius: 50%; max-width: 130px; } /* Titulek a popisek stránky */ .page-title { font-size: 24px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 0; font-feature-settings: "ss01" 1; } .page-description { font-size: 16px; font-weight: 400; color: #a8a8a8; text-align: center; margin-top: 5px; padding-bottom: 20px; max-width: 260px; font-feature-settings: "ss01" 1; } /* -------------------------------------------------- Kontejner pro tlačítka -------------------------------------------------- */ .items { /* Šířka se řídí NEJDELŠÍM tlačítkem: fit-content vezme jeho přirozenou šířku a ostatní se na ni dorovnají (mají width: 100%). Krátké popisky = úzký sloupec, dlouhý popisek roztáhne všechna tlačítka až na strop 600px. min/max s 100% hlídají, aby to nikdy nepřeteklo úzký displej. Dřív tu bylo `min-width: 340px` napevno, což na 320px telefonech přetékalo. */ width: fit-content; min-width: min(340px, 100%); max-width: min(600px, 100%); /* Postranní vzduch řeší padding, ne užší kontejner — box-sizing ho drží uvnitř max-width. */ padding: 0 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; margin: 0 auto; } /* Na mobilu se sloupec vždy roztáhne na celou šířku, ať je text jakkoli krátký — úzká tlačítka uprostřed velkého prázdna vypadají na telefonu rozbitě. */ @media (max-width: 640px) { .items { width: 100%; } } /* ⚠ Tyhle bloky NESMÍ ovlivňovat šířku sloupce. `width: 0` je vyřadí z výpočtu fit-content, `min-width: 100%` je pak v hotovém layoutu roztáhne na plnou šířku. Bez toho by o šířce tlačítek rozhodoval nejdelší řádek doprovodného textu, ne popisky tlačítek. */ .logo-section, .additional-text, .social-icons { width: 0; min-width: 100%; } /* -------------------------------------------------- Každý blok tlačítka (.item) -------------------------------------------------- */ .item { position: relative; /* Plná šířka kontejneru (dřív 80 %, což z 400px dělalo 320px tlačítka). Rozestup od okraje obrazovky drží padding na .items. */ width: 100%; margin-bottom: 15px; background-color: #fe1a3f; text-align: center; /* obecně na střed */ border-radius: 100px; transition: background-color 0.3s ease; } /* Hover efekt pro tlačítko */ .item:hover { background-color: #e50027; } /* -------------------------------------------------- 1) Jednoodkazová tlačítka (např. vCard) - taková tlačítka NEmají třídu .button-with-absolute-icon -------------------------------------------------- */ .item:not(.button-with-absolute-icon) a { display: block; box-sizing: border-box; width: 100%; /* vyplní šířku rodiče (.item) */ padding: 15px 5px; color: #fff; text-decoration: none; text-align: center; /* Jen 1 řádek + zkrácení s "…" při přesahu */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* -------------------------------------------------- 2) Dvouodkazová tlačítka (např. LinkedIn + ikona) class = .button-with-absolute-icon -------------------------------------------------- */ .button-with-absolute-icon { /* tady nic dalšího nepotřebujeme, dědí styly z .item */ border-radius: 100px; } /* Hlavní text tlačítka */ .button-with-absolute-icon .button-main { display: block; /* nebo inline-block, obojí funguje */ box-sizing: border-box; margin: 0 auto; /* vycentrovat horizontálně */ /* Text smí využít celou šířku tlačítka. Pevných 240px z doby úzkých tlačítek tady zbytečně ořezávalo delší popisky třemi tečkami. */ max-width: 100%; /* Symetrických 48px: vpravo drží text mimo absolutně pozicovanou ikonu tří teček (40px + odsazení), vlevo kvůli optickému vycentrování. */ padding: 15px 48px; color: #fff; text-decoration: none; text-align: center; /* Jen 1 řádek + zkrácení s "…" při přesahu */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Ikona tří teček napravo */ .button-with-absolute-icon .button-icon { position: absolute; top: 50%; right: 0px; /* posun od pravého okraje, dle potřeby */ transform: translateY(-50%); width: 40px; height: 40px; color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; } /* -------------------------------------------------- QR sekce (pokud používáte) -------------------------------------------------- */ .qr-section { position: absolute; /* změněno z fixed na absolute */ top: 20px; right: 20px; } .qr-code-icon { background-color: #262626; /* Barva kolečka */ border-radius: 50%; /* Udělá kolečko */ display: flex; /* Pro centrování vnitřního obsahu */ align-items: center; /* Vertikální centrování */ justify-content: center; /* Horizontální centrování */ width: 40px; /* Nastavte dle potřeby */ height: 40px; /* Nastavte dle potřeby */ text-decoration: none; transition: opacity 0.3s ease; } .qr-code-icon:hover { opacity: 1; } .qr-code-icon i { font-size: 20px; /* Velikost ikonky dle potřeby */ transform: rotate(90deg); /* Otočení ikonky, pokud je potřeba */ display: flex; align-items: center; justify-content: center; } /* -------------------------------------------------- Akce v QR modalu (tužka + křížek) -------------------------------------------------- */ /* Sedí v pravém horním rohu overlaye, tedy na stejném místě, kde jsou na vizitce tři tečky — po otevření modalu se ovládání „nepřestěhuje“. Kotví se k .modal (position: fixed), ne k .modal-content, aby to sedělo i na desktopu, kde je obsah modalu jen úzký sloupec uprostřed. */ .modal-actions { position: absolute; top: 20px; right: 20px; z-index: 1; display: flex; align-items: center; gap: 8px; /* pořadí v markupu: tužka vlevo, křížek vpravo pod třemi tečkami */ } /* Kolečko dědí celé z .qr-code-icon. Tohle jen srovnává