/* ========================================================================== CZCIONKA — jedyne miejsce do zmiany dla całej strony. 1. Podmień URL w @import na wybrany font z Google Fonts. 2. Wpisz jego nazwę jako pierwszą wartość --font-main. Wybieraj kroje mające realne wagi 300–700. Font z samą wagą 400 (np. Baskervville) zmusza przeglądarkę do rysowania sztucznego pogrubienia i nagłówki tracą ostrość. --font-ui dotyczy wyłącznie drobnych, rozstrzelonych wersalików: plakietek, nagłówków sekcji i stopki. Domyślnie ten sam krój. Jeśli uznasz, że serif jest tam za mało czytelny, wpisz tu sans (np. 'Manrope') i dołóż go do @import — reszta strony zostanie bez zmian. Sprawdzone zamienniki (wagi 300–800 + polskie znaki): Plus Jakarta Sans · Space Grotesk · Literata · Source Serif 4 Uwaga: Manrope nie ma prawdziwej kursywy. Gdyby gdzieś była potrzebna, wybierz krój, który ją ma (np. Literata) — inaczej przeglądarka pochyli pismo sztucznie. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700;800&display=swap'); :root { --font-main: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ui: var(--font-main); --bg: #0f172a; --accent: #fde047; --glass-bg: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.15); /* Rytm pionowy — mniejsza wartość = bardziej zwarta strona */ --gap: 0.75rem; --pad: 1.25rem; --radius: 1.25rem; } @media (min-width: 768px) { :root { --gap: 0.875rem; --pad: 1.6rem; } } /* ========================================================================== */ * { box-sizing: border-box; } body { font-family: var(--font-main); margin: 0; padding: 1.25rem 1rem 0; background: var(--bg); color: #fff; min-height: 100vh; overflow-x: hidden; text-align: center; } @media (min-width: 768px) { body { padding-top: 2rem; text-align: left; } } h1, h2, h3, p, ul { margin: 0; } /* Reset Tailwinda z CDN wstrzykuje się do po tym arkuszu i zeruje wagę nagłówków. Prefiks "body" podbija specyficzność ponad jego regułę. */ body h1, body h2, body h3 { font-weight: 700; -webkit-font-smoothing: antialiased; } .wrap { width: 100%; max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap); position: relative; z-index: 10; } /* --- Tło ----------------------------------------------------------------- */ .gradient-bg { position: fixed; inset: 0; z-index: -2; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .circles { position: fixed; inset: 0; margin: 0; padding: 0; overflow: hidden; z-index: -1; pointer-events: none; list-style: none; } .circles li { position: absolute; bottom: -150px; display: block; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float 25s linear infinite; } .circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; } .circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .circles li:nth-child(3) { left: 70%; width: 60px; height: 60px; animation-delay: 4s; } .circles li:nth-child(4) { left: 40%; width: 150px; height: 150px; animation-duration: 18s; } .circles li:nth-child(5) { left: 85%; width: 110px; height: 110px; animation-delay: 3s; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100% { transform: translateY(-1200px) rotate(720deg); opacity: 0; border-radius: 50%; } } /* --- Komponenty ---------------------------------------------------------- */ .glass { background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border); } .panel { background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: var(--pad); } .subcard { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.75rem; padding: 0.85rem 1rem; text-align: left; transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } a.subcard:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-3px); } .section-title { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 0.75rem; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.5); } .section-title::before { content: ''; width: 1.75rem; height: 1px; background: rgba(255, 255, 255, 0.25); flex: none; } @media (min-width: 768px) { .section-title { justify-content: flex-start; } } .pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); white-space: nowrap; } .pill-violet { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.25); color: #ddd6fe; } .pill-blue { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.25); color: #dbeafe; } .pill-emerald { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.25); color: #d1fae5; } .chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 0.75rem; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-decoration: none; background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease; cursor: pointer; } .chip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; transform: translateY(-2px); } .chip-round { border-radius: 999px; } /* Faviconki zewnętrznych profili — na białym kafelku, bo są kolorowe. */ .chip img { width: 1rem; height: 1rem; border-radius: 3px; background: #fff; padding: 1px; object-fit: contain; flex: none; } /* Ikona wektorowa (np. LinkedIn) i emoji — ten sam rozmiar co favicona, żeby wszystkie plakietki w rzędzie miały równą linię. */ .chip .ico { width: 1rem; height: 1rem; flex: none; fill: currentColor; } .chip .ico-emoji { font-size: 0.95rem; line-height: 1; flex: none; } .row { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; } @media (min-width: 768px) { .row { justify-content: flex-start; } } .row-center { justify-content: center; } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } @media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .lead { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; line-height: 1.6; margin: 0; } .lead + .lead { margin-top: 0.6rem; } .name-animation { display: inline-block; background: linear-gradient(to right, #fff 20%, var(--accent) 40%, var(--accent) 60%, #fff 80%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 5s linear infinite; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .name-animation:hover { transform: scale(1.04); } @keyframes shine { to { background-position: 200% center; } } .profile-img { width: 84px; height: 84px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); object-fit: cover; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } .site-footer { margin: 0.5rem 0 1.25rem; text-align: center; color: rgba(255, 255, 255, 0.3); font-family: var(--font-ui); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em; } .site-footer p { margin: 0; } /* --- Publikacje ---------------------------------------------------------- */ .pub-head { display: flex; flex-direction: column; gap: 0.6rem; } @media (min-width: 768px) { .pub-head { flex-direction: row; align-items: center; justify-content: space-between; } } .pub-title { margin: 0.35rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: #fff; text-align: left; } details.abstract { border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 0.75rem; padding-top: 0.6rem; text-align: left; } details.abstract summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease; } details.abstract summary:hover { color: rgba(255, 255, 255, 0.85); } details.abstract summary::-webkit-details-marker { display: none; } details.abstract summary .caret { display: inline-block; transition: transform 0.3s ease; font-size: 0.6rem; } details.abstract[open] summary .caret { transform: rotate(90deg); } details.abstract p { margin: 0.6rem 0 0; font-size: 0.875rem; line-height: 1.65; color: rgba(255, 255, 255, 0.72); text-align: justify; } /* --- Menu ---------------------------------------------------------------- */ #mobile-menu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease-in-out, opacity 0.3s ease; } #mobile-menu.open { max-height: 500px; opacity: 1; }