/* === Fonts === */ /* Doporučeno načítat Poppins v přes . Pokud potřebuješ, nech klidně i tento import. */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); /* === Design Tokens === */ :root { --header-height: 3rem; --font-semi: 600; --hue-color: 224; --first-color: hsl(var(--hue-color), 89%, 60%); --second-color: hsl(var(--hue-color), 56%, 12%); /* brand modrá */ --brand-blue: #007BFF; --brand-blue-hover: #0056b3; /* typografie */ --body-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; --big-font-size: 2rem; --h2-font-size: 1.25rem; --normal-font-size: .938rem; --smaller-font-size: .75rem; /* spacing */ --mb-2: 1rem; --mb-4: 2rem; --mb-5: 2.5rem; --mb-6: 3rem; /* z-index */ --z-back: -10; --z-fixed: 100; } @media screen and (min-width: 968px) { :root { --big-font-size: 3.5rem; --h2-font-size: 2rem; --normal-font-size: 1rem; --smaller-font-size: .875rem; } } /* === Base Reset / Defaults === */ *, ::before, ::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { height: 100%; margin: 0; padding: 0; } body { margin: var(--header-height) 0 0 0; font-family: var(--body-font); font-size: var(--normal-font-size); color: var(--second-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } img { max-width: 100%; height: auto; display: block; } /* Focus jen když uživatel tabuje */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--first-color); outline-offset: 2px; } /* === Sections === */ .section { padding-top: 3rem; padding-bottom: 2rem; } .section-title { position: relative; font-size: var(--h2-font-size); color: var(--first-color); margin: var(--mb-2) 0 var(--mb-4); text-align: center; } .section-title::after { content: ""; position: absolute; width: 64px; height: 0.18rem; left: 0; right: 0; margin: auto; top: 2rem; background-color: var(--first-color); } /* === Helpers === */ .bd-grid { max-width: 1024px; display: grid; margin-left: var(--mb-2); margin-right: var(--mb-2); } .centered-contact { text-align: center; max-width: 600px; margin: 0 auto; } .contact__text { font-size: 1.2rem; line-height: 1.6; margin-bottom: 2rem; } .contact__buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* === Buttons === */ .button { display: inline-block; background-color: var(--first-color); color: #fff; padding: 0.75rem 2.5rem; font-weight: var(--font-semi); border-radius: 0.5rem; transition: box-shadow .3s; } .button:hover { box-shadow: 0 10px 36px rgba(0,0,0,.15); } .button--blue { background-color: var(--brand-blue); color: #fff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: background-color .3s; } .button--blue:hover { background-color: var(--brand-blue-hover); } .button--blue-outline { background-color: transparent; color: var(--brand-blue); border: 2px solid var(--brand-blue); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: background-color .3s, color .3s, border-color .3s; } .button--blue-outline:hover { background-color: var(--brand-blue); color: #fff; } /* === Header / Nav === */ .l-header { position: fixed; inset: 0 0 auto 0; /* top:0; left:0; width:100% */ z-index: var(--z-fixed); background-color: #fff; box-shadow: 0 1px 4px rgba(146,161,176,.15); /* stabilizace výšky kvůli fontům/ikonám (CLS) */ height: var(--header-height); } .nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; font-weight: var(--font-semi); } .nav__menu { /* mobile offcanvas */ } @media screen and (max-width: 767px) { .nav__menu { position: fixed; top: var(--header-height); right: -100%; width: 80%; height: 100%; padding: 2rem; background-color: var(--second-color); transition: right .5s ease; /* jen vlastnost, ne all */ } } .nav__item { margin-bottom: var(--mb-4); } /* Rezervace pro underline + stabilní řádek (CLS fix) */ .nav__link { position: relative; color: #fff; padding-bottom: 0.5rem; /* místo pro underline pruh */ } .nav__link::after, .active-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; /* místo top: 2rem; */ width: 100%; height: 0.18rem; background-color: var(--first-color); transform: translateY(0); /* bez vlivu na flow */ } .nav__logo { color: var(--second-color); } .nav__toggle { color: var(--second-color); font-size: 1.5rem; cursor: pointer; } .show { right: 0; } /* === Home === */ .home { position: relative; row-gap: 5rem; padding: 4rem 0 5rem; } .home__data { align-self: center; } .home__title { font-size: var(--big-font-size); margin-bottom: var(--mb-5); } .home__title-color { color: var(--first-color); } .home__social { display: flex; flex-direction: column; } .home__social-icon { width: max-content; margin-bottom: var(--mb-2); font-size: 1.5rem; color: var(--second-color); transition: color .2s; } .home__social-icon:hover { color: var(--first-color); } .home__img { display: flex; justify-content: flex-end; padding-right: 40px; } .home__blob { fill: var(--first-color); } .home__blob-img { width: 360px; } /* === About === */ .about__container { row-gap: 2rem; text-align: center; } .about__subtitle { margin-bottom: var(--mb-2); } .about__img { justify-self: center; } .about__img img { width: 200px; border-radius: 0.5rem; } .about__text { margin-bottom: 1.5rem; line-height: 1.6; } /* === Skills === */ .skills__container { row-gap: 2rem; text-align: center; } .skills__subtitle { margin-bottom: var(--mb-2); } .skills__text { margin-bottom: var(--mb-4); } .skills__data { position: relative; display: flex; justify-content: space-between; align-items: center; font-weight: var(--font-semi); padding: 0.5rem 1rem; margin-bottom: var(--mb-4); border-radius: 0.5rem; box-shadow: 0 4px 25px rgba(14,36,49,.15); } .skills__names { display: flex; align-items: center; } .skills__icon { font-size: 2rem; margin-right: var(--mb-2); color: var(--first-color); } .skills__bar { position: absolute; left: 0; bottom: 0; height: 0.25rem; border-radius: 0.5rem; background-color: var(--first-color); z-index: var(--z-back); } .skills__html { width: 95%; } .skills__css { width: 85%; } .skills__js { width: 65%; } .skills__ux { width: 85%; } .skills__img { border-radius: 0.5rem; } /* === Work === */ .work__container { row-gap: 2rem; } .work__img { border-radius: 0.5rem; overflow: hidden; box-shadow: 0 4px 25px rgba(14,36,49,.15); aspect-ratio: 4 / 3; /* 800x600 – rezervace místa (CLS) */ } .work__img img { transition: transform 1s ease; will-change: transform; /* mikro-optimalizace pro hover */ } .work__img img:hover { transform: scale(1.1); } /* === Contact === */ .contact__input { width: 100%; font-size: var(--normal-font-size); font-weight: var(--font-semi); padding: 1rem; border-radius: 0.5rem; border: 1.5px solid var(--second-color); outline: none; margin-bottom: var(--mb-4); } .contact__button { display: block; border: none; font-size: var(--normal-font-size); cursor: pointer; margin-left: auto; } /* === Footer === */ .footer { background-color: var(--second-color); color: #fff; text-align: center; font-weight: var(--font-semi); padding: 2rem 0; } .footer__title { font-size: 2rem; margin-bottom: var(--mb-4); } .footer__social { margin-bottom: var(--mb-4); } .footer__icon { font-size: 1.5rem; color: #fff; margin: 0 var(--mb-2); } .footer__copy { font-size: var(--smaller-font-size); } .footer__madeby { text-align: center; font-size: 0.9rem; margin-top: 0.3rem; color: #666; } .footer__link { color: var(--brand-blue); font-weight: 700; } .footer__link:hover { text-decoration: underline; } /* === Responsive === */ @media screen and (max-width: 320px) { .home { row-gap: 2rem; } .home__img { width: 200px; } } @media screen and (min-width: 576px) { .home { padding: 4rem 0 2rem; } .home__social { padding-bottom: 2.5rem; flex-direction: row; align-self: flex-end; } .home__social-icon { margin-bottom: 0; margin-right: var(--mb-4); } .home__img { width: 300px; bottom: 25%; } .about__container { grid-template-columns: repeat(2, 1fr); align-items: center; text-align: initial; } .skills__container { grid-template-columns: 0.7fr; justify-content: center; column-gap: 1rem; } .work__container { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; padding-top: 2rem; } .contact__form { width: 360px; padding-top: 2rem; } .contact__container { justify-items: center; } } @media screen and (min-width: 768px) { body { margin: 0; } .section { padding-top: 4rem; padding-bottom: 3rem; } .section-title { margin-bottom: var(--mb-6); } .section-title::after { width: 80px; top: 3rem; } .nav { height: calc(var(--header-height) + 1.5rem); } .nav__list { display: flex; padding-top: 0; } .nav__item { margin-left: var(--mb-6); margin-bottom: 0; } .nav__toggle { display: none; } .nav__link { color: var(--second-color); } .home { padding: 8rem 0 2rem; } .home__img { width: 400px; bottom: 10%; } .about__container { padding-top: 2rem; } .about__img img { width: 300px; } .skills__container { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; align-items: center; text-align: initial; } .work__container { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; } } @media screen and (min-width: 992px) { .bd-grid { margin-left: auto; margin-right: auto; } .home { padding: 10rem 0 2rem; } .home__img { width: 450px; } } /* === A11y & Performance (bez změny vzhledu) === */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* === CLS fixy bez self-hostu ikon === */ /* Ikony z Boxicons: rezervuj prostor, ať po načtení fontu nic neposkočí */ .bx, .footer__icon i, .nav__toggle i { display: inline-block; width: 1.5rem; /* ≈ 24px */ height: 1.5rem; line-height: 1; vertical-align: middle; } /* Rezervace poměru stran pro obrázky ve gridu (pojistka vedle width/height v HTML) */ .skills__img { aspect-ratio: 3 / 2; } /* 900x600 */