/* ============================================================ * style.css – Główny arkusz stylów * Portfolio poldekdev | poldekdev.pw * * Spis treści: * 00. Zabezpieczenia CSS (user-select, print, czarny ekran) * 01. Custom Properties (tokeny projektowe) * 02. Reset & Base * 03. Typografia * 04. Layout & Grid * 05. Nawigacja * 06. Hero * 07. O mnie (Terminal) * 08. Umiejętności * 09. Portfolio / Projekty * 10. Footer * 11. Animacje & Keyframes * 12. Utilities * 13. Media Queries (RWD) * 14. 404 Error Page * ============================================================ */ /* ============================================================ * 00. ZABEZPIECZENIA CSS * ============================================================ */ /** * Blokada zaznaczania tekstu dla całej strony. * Uniemożliwia proste kopiowanie treści. */ body { -webkit-user-select: none; /* Safari / Chrome legacy */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE / Edge legacy */ user-select: none; /* Standard */ } /** * Ochrona przed drukiem i zapisem do PDF. * Ukrywa całą stronę przy próbie wydruku. */ @media print { body { display: none !important; } } /** * Mechanizm "Czarnego Ekranu". * Strona jest niewidoczna, dopóki security.js nie nada * atrybutu data-status="active" elementowi . * Bez tego skrypt musi się najpierw wykonać i zweryfikować * poprawność środowiska. */ html:not([data-status="active"]) body { display: none; background: #000; } /* ============================================================ * 01. CUSTOM PROPERTIES * ============================================================ */ :root { /* Paleta kolorów – monochromatyczny dark mode */ --clr-bg: #000000; --clr-bg-1: #080808; --clr-bg-2: #0f0f0f; --clr-bg-3: #181818; --clr-bg-4: #222222; --clr-border: rgba(255,255,255,0.08); --clr-border-2: rgba(255,255,255,0.14); --clr-white: #ffffff; --clr-white-80: rgba(255,255,255,0.80); --clr-white-60: rgba(255,255,255,0.60); --clr-white-40: rgba(255,255,255,0.40); --clr-white-20: rgba(255,255,255,0.20); --clr-white-08: rgba(255,255,255,0.08); /* Glów efekty */ --glow-white: 0 0 20px rgba(255,255,255,0.25), 0 0 60px rgba(255,255,255,0.10); --glow-white-sm: 0 0 10px rgba(255,255,255,0.20); --glow-card: 0 8px 32px rgba(0,0,0,0.60); /* Typografia */ --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Rozmiary czcionek (fluid type scale) */ --fs-xs: clamp(0.70rem, 1.5vw, 0.80rem); --fs-sm: clamp(0.80rem, 1.8vw, 0.90rem); --fs-base: clamp(0.95rem, 2vw, 1.05rem); --fs-md: clamp(1.10rem, 2.5vw, 1.25rem); --fs-lg: clamp(1.30rem, 3vw, 1.60rem); --fs-xl: clamp(1.80rem, 5vw, 2.50rem); --fs-2xl: clamp(2.50rem, 7vw, 4.00rem); --fs-hero: clamp(3.00rem, 10vw, 7.00rem); /* Spacing */ --sp-xs: 0.40rem; --sp-sm: 0.80rem; --sp-md: 1.50rem; --sp-lg: 3.00rem; --sp-xl: 6.00rem; --sp-2xl: 10.00rem; /* Inne */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --transition-fast: 0.18s ease; --transition-med: 0.35s ease; --transition-slow: 0.70s cubic-bezier(0.16, 1, 0.3, 1); --nav-height: 70px; } /* ============================================================ * 02. RESET & BASE * ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.70; color: var(--clr-white-80); background-color: var(--clr-bg); overflow-x: hidden; min-height: 100vh; } /* Scrollbar – minimalistyczna biała */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--clr-bg); } ::-webkit-scrollbar-thumb { background: var(--clr-white-40); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--clr-white-80); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ============================================================ * 03. TYPOGRAFIA * ============================================================ */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.20; color: var(--clr-white); letter-spacing: -0.02em; } p { color: var(--clr-white-60); } code, pre { font-family: var(--font-mono); } .section-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; color: var(--clr-white-40); letter-spacing: 0.20em; text-transform: uppercase; margin-bottom: var(--sp-sm); } .section-title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: var(--sp-md); background: linear-gradient(135deg, var(--clr-white) 30%, var(--clr-white-40) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ============================================================ * 04. LAYOUT & GRID * ============================================================ */ .container { width: min(1160px, 92vw); margin: 0 auto; } section { padding: var(--sp-xl) 0; } /* ============================================================ * 05. NAWIGACJA * ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: var(--nav-height); display: flex; align-items: center; transition: background var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); border-bottom: 1px solid transparent; } /* Stan po przewinięciu – szkło */ .nav.scrolled { background: rgba(0,0,0,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--clr-border); box-shadow: 0 4px 40px rgba(0,0,0,0.60); } .nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* Logo */ .nav__logo { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; color: var(--clr-white); letter-spacing: -0.03em; transition: color var(--transition-fast); display: flex; align-items: center; gap: 10px; } .nav__logo span { color: var(--clr-white-40); transition: color var(--transition-fast); } .nav__logo:hover span { color: var(--clr-white); } /* Menu */ .nav__menu { display: flex; gap: var(--sp-lg); list-style: none; } .nav__link { font-size: var(--fs-sm); font-weight: 500; color: var(--clr-white-60); letter-spacing: 0.02em; position: relative; padding-bottom: 4px; transition: color var(--transition-fast); } /* Animowane podkreślenie */ .nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--clr-white); transition: width var(--transition-med); } .nav__link:hover, .nav__link.active { color: var(--clr-white); } .nav__link:hover::after, .nav__link.active::after { width: 100%; } /* Hamburger (mobile) */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; } .nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--clr-white); border-radius: 2px; transition: transform var(--transition-med), opacity var(--transition-med); } .nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__hamburger.open span:nth-child(2) { opacity: 0; } .nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ * 06. HERO * ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: var(--nav-height); z-index: 3; } /* Siatka w tle (canvas) */ #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; } /* Gradient overlay */ .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 80% at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70% ), linear-gradient( to bottom, transparent 60%, var(--clr-bg) 100% ); pointer-events: none; } .hero__content { position: relative; z-index: 2; max-width: 900px; } /* Status badge */ .hero__badge { display: inline-flex; align-items: center; gap: var(--sp-xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--clr-white-60); border: 1px solid var(--clr-border-2); border-radius: 100px; padding: 6px 14px; margin-bottom: var(--sp-md); background: var(--clr-white-08); backdrop-filter: blur(8px); letter-spacing: 0.10em; animation: fadeInDown 0.8s var(--transition-slow) both; } .hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clr-white); animation: pulse-dot 2s ease-in-out infinite; } /* Nagłówek hero */ .hero__heading { font-size: var(--fs-hero); font-weight: 900; line-height: 1.00; letter-spacing: -0.04em; color: var(--clr-white); margin-bottom: var(--sp-md); animation: fadeInUp 0.9s 0.15s var(--transition-slow) both; } /* Podtytuł z typewriterem */ .hero__sub { font-size: var(--fs-lg); font-weight: 300; color: var(--clr-white-60); margin-bottom: var(--sp-lg); min-height: 2.4em; animation: fadeInUp 0.9s 0.25s var(--transition-slow) both; } #typewriter { color: var(--clr-white); font-weight: 600; } /* Kursor typewriter */ #typewriter::after { content: '_'; animation: blink-caret 0.85s step-end infinite; } /* CTA Buttony */ .hero__cta { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; animation: fadeInUp 0.9s 0.35s var(--transition-slow) both; } /* Przycisk główny */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; padding: 14px 28px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-med); border: 1px solid transparent; position: relative; overflow: hidden; } .btn--primary { background: var(--clr-white); color: var(--clr-bg); border-color: var(--clr-white); } .btn--primary:hover { background: var(--clr-bg); color: var(--clr-white); box-shadow: var(--glow-white); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--clr-white-80); border-color: var(--clr-border-2); } .btn--ghost:hover { border-color: var(--clr-white); color: var(--clr-white); background: var(--clr-white-08); transform: translateY(-2px); } /* Scroll indicator */ .hero__scroll { position: absolute; bottom: var(--sp-lg); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--clr-white-40); font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: 0.10em; animation: fadeIn 1.5s 1s both; z-index: 2; } .hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--clr-white-40)); animation: scroll-line 2s ease-in-out infinite; } /* Stylizowana linia oddzielająca sekcję Hero */ .hero__divider { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 82%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08) 15%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0.08) 85%, transparent ); box-shadow: 0 0 10px rgba(255, 255, 255, 0.12); z-index: 2; } /* ============================================================ * 07. O MNIE * ============================================================ */ .about { background: var(--clr-bg-1); border-top: 1px solid var(--clr-border); } .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); align-items: center; } .about__text-area { } .about__desc { font-size: var(--fs-base); line-height: 1.80; color: var(--clr-white-60); margin-bottom: var(--sp-md); } .about__desc strong { color: var(--clr-white); font-weight: 600; } /* Statystyki / fakty */ .about__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); margin-top: var(--sp-lg); } .about__stat { padding: var(--sp-md); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-white-08); transition: border-color var(--transition-med), background var(--transition-med); } .about__stat:hover { border-color: var(--clr-border-2); background: rgba(255,255,255,0.06); } .about__stat-num { font-size: var(--fs-xl); font-weight: 800; color: var(--clr-white); line-height: 1; font-variant-numeric: tabular-nums; } .about__stat-label { font-size: var(--fs-xs); color: var(--clr-white-40); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.08em; } /* Terminal */ .terminal { background: var(--clr-bg-3); border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--glow-card); font-family: var(--font-mono); font-size: var(--fs-sm); } .terminal__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--clr-bg-4); border-bottom: 1px solid var(--clr-border); } .terminal__dots { display: flex; gap: 6px; } .terminal__dot { width: 12px; height: 12px; border-radius: 50%; } .terminal__dot--red { background: #ff5f57; } .terminal__dot--yellow { background: #febc2e; } .terminal__dot--green { background: #28c840; } .terminal__title { font-size: var(--fs-xs); color: var(--clr-white-40); margin-left: auto; margin-right: auto; letter-spacing: 0.06em; } .terminal__body { padding: var(--sp-md); min-height: 320px; color: var(--clr-white-80); } .terminal__line { display: flex; gap: 8px; margin-bottom: 8px; opacity: 0; animation: terminal-line-in 0.4s forwards; } .terminal__prompt { color: var(--clr-white-40); flex-shrink: 0; } .terminal__cmd { color: var(--clr-white); } .terminal__out { color: var(--clr-white-60); padding-left: 18px; margin-bottom: 10px; opacity: 0; animation: terminal-line-in 0.4s forwards; } .terminal__out.highlight { color: var(--clr-white); } .terminal__out.dim { color: var(--clr-white-40); } /* ============================================================ * 08. UMIEJĘTNOŚCI * ============================================================ */ .skills { background: var(--clr-bg); } .skills__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-sm); } .skill-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--sp-md); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-white-08); cursor: default; transition: all var(--transition-med); text-align: center; position: relative; overflow: hidden; } /* Efekt glow on hover */ .skill-tag::before { content: ''; position: absolute; inset: -1px; background: linear-gradient( 135deg, rgba(255,255,255,0.15) 0%, transparent 60% ); opacity: 0; transition: opacity var(--transition-med); border-radius: inherit; } .skill-tag:hover { border-color: var(--clr-border-2); background: rgba(255,255,255,0.07); transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 32px rgba(0,0,0,0.50), var(--glow-white-sm); } .skill-tag:hover::before { opacity: 1; } .skill-tag__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--clr-white-60); transition: color var(--transition-med); } .skill-tag__icon svg, .skill-tag__icon img { width: 100%; height: 100%; object-fit: contain; fill: currentColor; transition: transform var(--transition-med); } .skill-tag__icon svg path { fill: currentColor; } .skill-tag:hover .skill-tag__icon { color: var(--clr-white); } .skill-tag:hover .skill-tag__icon svg, .skill-tag:hover .skill-tag__icon img { transform: scale(1.15); } .skill-tag__name { font-size: var(--fs-xs); font-weight: 600; color: var(--clr-white-80); letter-spacing: 0.04em; font-family: var(--font-mono); } /* Kategorie */ .skills__category { margin-bottom: var(--sp-lg); } .skills__category-label { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--clr-white-40); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--sp-md); padding-left: 4px; border-left: 2px solid var(--clr-white-20); padding-left: var(--sp-sm); } /* ============================================================ * 09. PORTFOLIO / PROJEKTY * ============================================================ */ .portfolio { background: var(--clr-bg-1); border-top: 1px solid var(--clr-border); } /* Taby */ .portfolio__tabs { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-lg); flex-wrap: wrap; } .portfolio__tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 1px solid var(--clr-border); border-radius: 100px; font-size: var(--fs-sm); font-weight: 600; color: var(--clr-white-60); background: transparent; cursor: pointer; transition: all var(--transition-med); font-family: var(--font-sans); } .portfolio__tab .tab-count { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--clr-white-08); font-size: var(--fs-xs); color: var(--clr-white-40); transition: background var(--transition-med), color var(--transition-med); } .portfolio__tab:hover, .portfolio__tab.active { border-color: var(--clr-white); color: var(--clr-white); background: var(--clr-white-08); } .portfolio__tab.active .tab-count, .portfolio__tab:hover .tab-count { background: var(--clr-white); color: var(--clr-bg); } /* Panele */ .portfolio__panel { display: none; } .portfolio__panel.active { display: block; } /* Grid kart */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-md); } /* Karta projektu */ .project-card { border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-bg-2); padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); transition: all var(--transition-med); position: relative; overflow: hidden; } /* Glitch-border efekt */ .project-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(255,255,255,0.08) 0%, transparent 50%, rgba(255,255,255,0.03) 100% ); opacity: 0; transition: opacity var(--transition-med); pointer-events: none; } .project-card:hover { border-color: var(--clr-border-2); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.70), var(--glow-white-sm); } .project-card:hover::before { opacity: 1; } /* Nagłówek karty */ .project-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-sm); } .project-card__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--clr-white-08); border: 1px solid var(--clr-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; } .project-card__badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .badge { font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 600; padding: 3px 10px; border-radius: 100px; letter-spacing: 0.06em; } .badge--open { background: rgba(40, 200, 64, 0.12); color: #7fffac; border: 1px solid rgba(40, 200, 64, 0.25); } .badge--private { background: rgba(255,255,255,0.06); color: var(--clr-white-40); border: 1px solid var(--clr-border); } .badge--wip { background: rgba(254, 188, 46, 0.10); color: #ffd47e; border: 1px solid rgba(254,188,46,0.25); } /* Treść karty */ .project-card__name { font-size: var(--fs-md); font-weight: 700; color: var(--clr-white); } .project-card__desc { font-size: var(--fs-sm); color: var(--clr-white-60); line-height: 1.65; flex-grow: 1; } /* Tagi technologii */ .project-card__tags { display: flex; gap: 6px; flex-wrap: wrap; } .project-card__tag { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--clr-white-60); background: var(--clr-white-08); border: 1px solid var(--clr-border); padding: 3px 10px; border-radius: var(--radius-sm); letter-spacing: 0.04em; } /* Linki karty */ .project-card__links { display: flex; gap: var(--sp-sm); margin-top: auto; padding-top: var(--sp-sm); border-top: 1px solid var(--clr-border); } .project-card__link { font-size: var(--fs-xs); font-weight: 600; color: var(--clr-white-60); display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.04em; transition: color var(--transition-fast); font-family: var(--font-mono); } .project-card__link:hover { color: var(--clr-white); } .project-card__link svg { width: 14px; height: 14px; } /* ===================== Project Modal Styles ===================== */ .project-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2000; } .project-modal[hidden] { display: none; } .project-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); } .project-modal__dialog { position: relative; width: 90vw; height: 90vh; max-width: 1200px; background: linear-gradient(180deg, rgba(20,20,20,0.98), rgba(8,8,8,0.98)); border: 1px solid var(--clr-border-2); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.7), var(--glow-card); overflow: hidden; display: flex; flex-direction: column; } .project-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--clr-border); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); } .project-modal__header h3 { margin: 0; font-size: var(--fs-lg); } .project-modal__close { background: transparent; border: none; color: var(--clr-white-80); font-size: 28px; line-height: 1; cursor: pointer; } .project-modal__body { display: flex; flex: 1 1 auto; flex-direction: column; overflow: auto; -webkit-overflow-scrolling: touch; } .project-modal__content { display: flex; gap: 20px; padding: 20px; flex: 1 1 auto; overflow: hidden; } .project-modal__carousel { flex: 1 1 65%; display: flex; align-items: center; overflow: hidden; position: relative; } .project-modal__slides { display: flex; height: 100%; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); gap: 12px; } .project-modal__img { min-width: 100%; height: 100%; object-fit: contain; background: #0a0a0f; border-radius: 8px; flex-shrink: 0; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1); opacity: 1; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); } /* loading skeleton */ .project-modal__img.img--loading { filter: blur(6px) saturate(0.6); transform: scale(1.02); opacity: 0.65; } /* ensure carousel crop */ .project-modal__carousel { position: relative; overflow: hidden; } /* Nawigacja karuzeli */ .project-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 44px; border-radius: 999px; background: rgba(0,0,0,0.45); color: var(--clr-white); border: 1px solid rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease; } .project-modal__nav:hover { transform: translateY(-50%) scale(1.05); background: rgba(0,0,0,0.6); } .project-modal__nav--prev { left: 12px; } .project-modal__nav--next { right: 12px; } .project-modal__info { flex: 1 1 35%; display: flex; flex-direction: column; gap: 12px; padding-right: 6px; overflow: auto; } .project-modal__info-item h4 { margin: 0 0 6px 0; font-size: var(--fs-sm); color: var(--clr-white-80); } .project-modal__info-item p { margin: 0; color: var(--clr-white-60); } .project-modal__footer { padding: 12px 18px; border-top: 1px solid var(--clr-border); background: linear-gradient(0deg, rgba(255,255,255,0.01), transparent); } .project-modal__thumbs { display: flex; gap: 10px; align-items: center; overflow-x: auto; padding-bottom: 6px; } .project-modal__thumbs img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: transform 0.18s ease, border-color 0.18s ease; } .project-modal__thumbs img:hover { transform: translateY(-4px); } .project-modal__thumbs img.active { border-color: var(--clr-white); box-shadow: 0 6px 20px rgba(0,0,0,0.6); } @media (max-width: 880px) { .project-modal__content { flex-direction: column; } .project-modal__carousel { order: 0; width: 100%; height: 45vh; } .project-modal__info { order: 1; height: auto; } } /* subtle transitions for modal appearance */ .project-modal__dialog { transform: translateY(6px); transition: transform 0.28s ease, opacity 0.28s ease; } .project-modal[aria-hidden="false"] .project-modal__dialog { transform: translateY(0); } /* ============================================================ * 10. FOOTER * ============================================================ */ .footer { border-top: 1px solid var(--clr-border); padding: var(--sp-lg) 0; background: var(--clr-bg); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; } .footer__logo { font-family: var(--font-mono); font-size: var(--fs-base); font-weight: 700; color: var(--clr-white); } .footer__logo span { color: var(--clr-white-40); } .footer__copy { font-size: var(--fs-xs); color: var(--clr-white-40); font-family: var(--font-mono); } .footer__social { display: flex; gap: var(--sp-md); } .footer__social-link { font-size: var(--fs-sm); color: var(--clr-white-40); display: flex; align-items: center; gap: 6px; transition: color var(--transition-fast); font-family: var(--font-mono); } .footer__social-link:hover { color: var(--clr-white); } .footer__social-link svg { width: 18px; height: 18px; } /* ============================================================ * 11. ANIMACJE & KEYFRAMES * ============================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink-caret { from, to { opacity: 1; } 50% { opacity: 0; } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.40); } 50% { opacity: 0.7; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(255,255,255,0); } } @keyframes scroll-line { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @keyframes terminal-line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } /* Scroll Reveal – bazowe klasy */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.10s; } .reveal-delay-2 { transition-delay: 0.20s; } .reveal-delay-3 { transition-delay: 0.30s; } .reveal-delay-4 { transition-delay: 0.40s; } .reveal-delay-5 { transition-delay: 0.50s; } /* ============================================================ * 12. UTILITIES * ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .text-mono { font-family: var(--font-mono); } .text-sm { font-size: var(--fs-sm); } .text-muted { color: var(--clr-white-40); } .mt-md { margin-top: var(--sp-md); } .mt-lg { margin-top: var(--sp-lg); } /* ============================================================ * 13. MEDIA QUERIES (RWD) * ============================================================ */ /* Tablet – ≤ 900px */ @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: var(--sp-lg); } } /* Mobile – ≤ 680px */ @media (max-width: 680px) { :root { --nav-height: 60px; } /* Nawigacja mobile */ .nav__menu { display: none; position: fixed; inset: var(--nav-height) 0 0 0; background: rgba(0,0,0,0.96); backdrop-filter: blur(24px); flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-lg); z-index: 998; } .nav__menu.open { display: flex; } .nav__link { font-size: var(--fs-lg); } .nav__hamburger { display: flex; } /* Hero */ .hero__cta { flex-direction: column; align-items: flex-start; } /* Projekty */ .projects-grid { grid-template-columns: 1fr; } /* Statystyki */ .about__stats { grid-template-columns: 1fr; } /* Footer */ .footer__inner { flex-direction: column; text-align: center; } .footer__social { justify-content: center; } } /* ============================================================ * 14. STRONA 404 * ============================================================ */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: var(--sp-lg); background: var(--clr-bg); position: relative; overflow: hidden; } /* Tło – subtelna siatka */ .error-page::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .error-page__icon { width: 96px; height: 96px; margin-bottom: var(--sp-md); filter: drop-shadow(0 0 20px rgba(255, 50, 50, 0.60)) drop-shadow(0 0 50px rgba(255, 50, 50, 0.25)); animation: error-pulse 3s ease-in-out infinite; position: relative; z-index: 1; } @keyframes error-pulse { 0%, 100% { filter: drop-shadow(0 0 20px rgba(255,50,50,0.60)) drop-shadow(0 0 50px rgba(255,50,50,0.25)); } 50% { filter: drop-shadow(0 0 30px rgba(255,80,80,0.90)) drop-shadow(0 0 80px rgba(255,50,50,0.40)); } } .error-page__code { font-family: var(--font-mono); font-size: clamp(5rem, 18vw, 10rem); font-weight: 900; color: var(--clr-white); line-height: 1; letter-spacing: -0.06em; margin-bottom: var(--sp-sm); position: relative; z-index: 1; } /* Glitch efekt na 404 */ .error-page__code::before, .error-page__code::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .error-page__code::before { color: rgba(255, 80, 80, 0.80); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); animation: glitch-top 3s infinite linear; left: 2px; } .error-page__code::after { color: rgba(80, 200, 255, 0.80); clip-path: polygon(0 65%, 100% 65%, 100% 80%, 0 80%); animation: glitch-bot 2.5s infinite linear; left: -2px; } @keyframes glitch-top { 0%, 90%, 100% { transform: none; opacity: 0; } 92% { transform: translateX(-4px); opacity: 0.8; } 94% { transform: translateX(4px); opacity: 0.8; } 96% { transform: none; opacity: 0; } } @keyframes glitch-bot { 0%, 85%, 100% { transform: none; opacity: 0; } 87% { transform: translateX(5px); opacity: 0.7; } 89% { transform: translateX(-5px); opacity: 0.7; } 91% { transform: none; opacity: 0; } } .error-page__title { font-size: var(--fs-xl); font-weight: 800; color: var(--clr-white); margin-bottom: var(--sp-sm); position: relative; z-index: 1; } .error-page__desc { font-size: var(--fs-base); color: var(--clr-white-60); margin-bottom: var(--sp-lg); position: relative; z-index: 1; max-width: 420px; } .error-page__desc a { color: var(--clr-white); font-weight: 600; text-decoration: underline; text-decoration-color: var(--clr-white-40); transition: text-decoration-color var(--transition-fast); } .error-page__desc a:hover { text-decoration-color: var(--clr-white); } /* ============================================================ * 15. AVATAR / ZDJĘCIE PROFILOWE * ============================================================ */ /* ── Logo awatar w nawigacji ── */ .nav__logo-img { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--clr-white-20); object-fit: cover; transition: border-color var(--transition-med), box-shadow var(--transition-med); flex-shrink: 0; } .nav__logo:hover .nav__logo-img { border-color: var(--clr-white-60); box-shadow: var(--glow-white-sm); } /* ── Hero – karta profilu po prawej ── */ .hero__profile-card { position: absolute; right: calc((100vw - min(1160px, 92vw)) / 2 + 2rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); animation: fadeIn 1.2s 0.8s both; z-index: 2; } .hero__avatar { position: relative; width: 180px; height: 180px; } /* Obracający się pierścień dookoła zdjęcia */ .hero__avatar::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--clr-white-40); border-right-color: var(--clr-white-20); animation: avatar-ring-spin 4s linear infinite; } .hero__avatar::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid transparent; border-bottom-color: var(--clr-white-20); border-left-color: var(--clr-white-08); animation: avatar-ring-spin 8s linear infinite reverse; } @keyframes avatar-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero__avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--clr-white-20); display: block; transition: border-color var(--transition-med), box-shadow var(--transition-slow); filter: brightness(0.92); } .hero__avatar-img:hover { border-color: var(--clr-white-60); box-shadow: 0 0 40px rgba(255,255,255,0.15), 0 0 80px rgba(255,255,255,0.06); filter: brightness(1); } /* Status dot pod avatarem */ .hero__avatar-status { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--clr-white-60); letter-spacing: 0.08em; } .hero__avatar-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #28c840; box-shadow: 0 0 8px rgba(40,200,64,0.6); animation: pulse-dot 2s ease-in-out infinite; } /* ── Sekcja "O mnie" – duże zdjęcie ── */ .about__avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); } .about__avatar { position: relative; width: 200px; height: 200px; margin: 0 auto var(--sp-md); } /* Wielokąt / sześciokąt clip */ .about__avatar-inner { width: 100%; height: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--clr-border-2); box-shadow: 0 0 0 8px var(--clr-white-08), var(--glow-card); transition: box-shadow var(--transition-med); } .about__avatar:hover .about__avatar-inner { box-shadow: 0 0 0 8px rgba(255,255,255,0.10), 0 16px 60px rgba(0,0,0,0.80), var(--glow-white-sm); } .about__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(20%) contrast(1.05); transition: filter var(--transition-med), transform var(--transition-med); } .about__avatar:hover .about__avatar-img { filter: grayscale(0%) contrast(1.10); transform: scale(1.04); } /* Etykieta roli pod avatarem */ .about__avatar-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--clr-white-60); letter-spacing: 0.12em; text-align: center; line-height: 1.60; } .about__avatar-label strong { display: block; color: var(--clr-white); font-size: var(--fs-base); font-weight: 700; margin-bottom: 2px; font-family: var(--font-sans); letter-spacing: -0.02em; } /* Zmień layout about__grid – 3 kolumny gdy jest avatar */ .about__grid--with-avatar { grid-template-columns: 200px 1fr 1fr; align-items: start; gap: var(--sp-lg); } /* ── Responsywność awatara ── */ @media (max-width: 1100px) { .hero__profile-card { display: none; } } @media (max-width: 960px) { .about__grid--with-avatar { grid-template-columns: 1fr 1fr; } .about__avatar-wrap { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: var(--sp-lg); } .about__avatar { width: 120px; height: 120px; margin: 0; } } @media (max-width: 680px) { .about__grid--with-avatar { grid-template-columns: 1fr; } .about__avatar-wrap { flex-direction: column; align-items: center; text-align: center; } .about__avatar { width: 160px; height: 160px; } } /* ============================================================ * 15. PORTFOLIO PAGE * ============================================================ */ /* ── Active nav link ──────────────────────────────────────── */ .nav__link--active { color: var(--clr-white) !important; border-bottom: 1px solid var(--clr-white-40); padding-bottom: 2px; } /* ── Screen-reader only utility ───────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* ============================================================ * PORTFOLIO HERO * ============================================================ */ .pf-hero { position: relative; padding-top: calc(var(--nav-height) + var(--sp-xl)); padding-bottom: var(--sp-xl); overflow: hidden; border-bottom: 1px solid var(--clr-border); } .pf-hero__inner { max-width: 720px; position: relative; z-index: 2; } .pf-hero__tag { margin-bottom: var(--sp-md); color: var(--clr-white-40); } .pf-hero__title { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: var(--sp-md); } .pf-hero__title-accent { background: linear-gradient(135deg, var(--clr-white) 0%, var(--clr-white-60) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pf-hero__desc { font-size: var(--fs-md); color: var(--clr-white-60); line-height: 1.75; margin-bottom: var(--sp-lg); max-width: 580px; } .pf-hero__stats { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; } .pf-hero__stat { display: flex; flex-direction: column; gap: 2px; } .pf-hero__stat-num { font-size: var(--fs-lg); font-weight: 800; color: var(--clr-white); font-family: var(--font-mono); line-height: 1; } .pf-hero__stat-label { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--clr-white-40); letter-spacing: 0.1em; text-transform: uppercase; } .pf-hero__stat-divider { width: 1px; height: 36px; background: var(--clr-border-2); flex-shrink: 0; } /* Decorative grid lines */ .pf-hero__grid { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .pf-hero__grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--clr-border) 20%, var(--clr-border) 80%, transparent ); opacity: 0.5; } .pf-hero__grid-line:nth-child(1) { left: 25%; } .pf-hero__grid-line:nth-child(2) { left: 50%; } .pf-hero__grid-line:nth-child(3) { left: 75%; } /* ============================================================ * PORTFOLIO MAIN LAYOUT * ============================================================ */ .pf-main { padding-top: var(--sp-xl); padding-bottom: var(--sp-2xl); min-height: 60vh; } /* ============================================================ * FILTER PANEL * ============================================================ */ .pf-filters { margin-bottom: var(--sp-lg); } .pf-filters__inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); } .pf-filters__label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--clr-white-40); letter-spacing: 0.1em; text-transform: uppercase; margin-right: var(--sp-xs); flex-shrink: 0; } .pf-filters__tags { display: flex; flex-wrap: wrap; gap: var(--sp-xs); flex: 1; } .pf-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--clr-border-2); border-radius: var(--radius-sm); background: transparent; color: var(--clr-white-60); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; } .pf-filter-btn:hover { border-color: var(--clr-white-40); color: var(--clr-white-80); } .pf-filter-btn--active { background: var(--clr-white); border-color: var(--clr-white); color: var(--clr-bg); box-shadow: 0 0 20px rgba(255,255,255,0.15); } .pf-filter-btn__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 0.70rem; font-family: var(--font-mono); background: rgba(255,255,255,0.10); color: inherit; line-height: 1; transition: background var(--transition-fast); } .pf-filter-btn--active .pf-filter-btn__count { background: rgba(0,0,0,0.15); } /* ── Wyszukiwarka ──────────────────────────────────────────── */ .pf-search { margin-left: auto; flex-shrink: 0; } .pf-search__wrapper { position: relative; display: flex; align-items: center; } .pf-search__icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--clr-white-40); pointer-events: none; flex-shrink: 0; } .pf-search__input { width: 220px; padding: 8px 14px 8px 38px; background: var(--clr-bg-2); border: 1px solid var(--clr-border-2); border-radius: var(--radius-sm); color: var(--clr-white-80); font-family: var(--font-sans); font-size: var(--fs-sm); outline: none; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .pf-search__input::placeholder { color: var(--clr-white-40); } .pf-search__input:focus { border-color: var(--clr-white-40); background: var(--clr-bg-3); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); } /* Search clear button – native */ .pf-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } /* ── Wynik filtrowania ─────────────────────────────────────── */ .pf-results { margin-bottom: var(--sp-md); } .pf-results__text { font-size: var(--fs-sm); color: var(--clr-white-40); font-family: var(--font-mono); } .pf-results__text strong { color: var(--clr-white-60); font-weight: 600; } /* ============================================================ * GRID KART * ============================================================ */ .pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-md); align-items: start; } /* ============================================================ * KARTA PROJEKTU * ============================================================ */ .pf-card { position: relative; display: flex; flex-direction: column; background: var(--clr-bg-2); border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.30s ease, transform 0.30s ease, box-shadow 0.30s ease, opacity 0.35s ease; will-change: transform, opacity; } .pf-card:hover { border-color: var(--clr-border-2); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.60), 0 0 1px rgba(255,255,255,0.08); } /* Glow overlay on hover */ .pf-card__glow { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70% ); opacity: 0; transition: opacity 0.30s ease; pointer-events: none; z-index: 0; } .pf-card:hover .pf-card__glow { opacity: 1; } /* ── Sekcje górna i dolna ─────────────────────────────────── */ .pf-card__top { padding: var(--sp-md) var(--sp-md) var(--sp-sm); flex: 1; position: relative; z-index: 1; } .pf-card__bottom { padding: var(--sp-sm) var(--sp-md) var(--sp-md); border-top: 1px solid var(--clr-border); position: relative; z-index: 1; background: rgba(0,0,0,0.20); backdrop-filter: blur(4px); } /* ── Header karty ─────────────────────────────────────────── */ .pf-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-sm); } /* ── Ikona kategorii ──────────────────────────────────────── */ .pf-card__icon { width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--clr-border-2); } .pf-card__icon svg { width: 22px; height: 22px; } .pf-card__icon--discord { background: rgba(88, 101, 242, 0.10); border-color: rgba(88, 101, 242, 0.25); color: #8a97f5; } .pf-card__icon--minecraft { background: rgba(100, 200, 80, 0.08); border-color: rgba(100, 200, 80, 0.20); color: #7ab860; } .pf-card__icon--backend { background: rgba(255,255,255,0.05); border-color: var(--clr-border-2); color: var(--clr-white-60); } /* ── Status badge ─────────────────────────────────────────── */ .pf-card__status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 500; border: 1px solid; white-space: nowrap; } .pf-card__status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* Wdrożone – biały */ .pf-card__status--active { color: var(--clr-white-80); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); } .pf-card__status--active .pf-card__status-dot { background: var(--clr-white-80); box-shadow: 0 0 6px rgba(255,255,255,0.60); animation: pulse-dot 2.2s ease-in-out infinite; } /* W rozwoju – żółty */ .pf-card__status--dev { color: rgba(250, 204, 21, 0.85); border-color: rgba(250, 204, 21, 0.20); background: rgba(250, 204, 21, 0.06); } .pf-card__status--dev .pf-card__status-dot { background: rgba(250, 204, 21, 0.90); box-shadow: 0 0 6px rgba(250, 204, 21, 0.50); animation: pulse-dot 2.2s ease-in-out infinite; } /* Open Source – niebieski */ .pf-card__status--open { color: rgba(100, 180, 255, 0.85); border-color: rgba(100, 180, 255, 0.20); background: rgba(100, 180, 255, 0.06); } .pf-card__status--open .pf-card__status-dot { background: rgba(100, 180, 255, 0.90); box-shadow: 0 0 6px rgba(100, 180, 255, 0.50); } /* ── Tytuł karty ──────────────────────────────────────────── */ .pf-card__title { font-size: clamp(1.10rem, 2.2vw, 1.30rem); font-weight: 800; letter-spacing: -0.02em; color: var(--clr-white); line-height: 1.20; margin-bottom: var(--sp-sm); transition: color var(--transition-fast); } .pf-card:hover .pf-card__title { color: var(--clr-white); } /* ── Opis karty ───────────────────────────────────────────── */ .pf-card__desc { font-size: var(--fs-sm); color: var(--clr-white-60); line-height: 1.70; margin-bottom: var(--sp-sm); /* Clamp do 4 linii z rozkładem na hover */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; transition: -webkit-line-clamp 0.3s ease; } .pf-card:hover .pf-card__desc { -webkit-line-clamp: unset; } /* ── Tagi technologiczne ──────────────────────────────────── */ .pf-card__tech-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--sp-sm); } .pf-tech-tag { display: inline-block; padding: 3px 9px; border: 1px solid var(--clr-border-2); border-radius: 4px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--clr-white-60); background: rgba(255,255,255,0.03); letter-spacing: 0.04em; transition: border-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .pf-card:hover .pf-tech-tag { border-color: rgba(255,255,255,0.18); color: var(--clr-white-80); } /* ── Linki / Przyciski karty ──────────────────────────────── */ .pf-card__links { display: flex; flex-wrap: wrap; gap: var(--sp-xs); } .pf-card__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: calc(var(--radius-sm) - 2px); font-size: var(--fs-xs); font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); text-decoration: none; cursor: pointer; white-space: nowrap; } .pf-card__btn svg { width: 12px; height: 12px; flex-shrink: 0; } .pf-card__btn--primary { background: var(--clr-white); color: var(--clr-bg); border: 1px solid var(--clr-white); } .pf-card__btn--primary:hover { background: transparent; color: var(--clr-white); box-shadow: 0 0 20px rgba(255,255,255,0.15); transform: translateY(-1px); } .pf-card__btn--secondary { background: transparent; color: var(--clr-white-60); border: 1px solid var(--clr-border-2); } .pf-card__btn--secondary:hover { border-color: var(--clr-white-40); color: var(--clr-white-80); transform: translateY(-1px); } /* ============================================================ * CARD ANIMATION STATES * ============================================================ */ /* Reveal animation (IntersectionObserver) */ .pf-card--reveal { opacity: 0; transform: translateY(30px) scale(0.97); } .pf-card--revealed { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1), border-color 0.30s ease, box-shadow 0.30s ease; } /* Filter hide/show */ .pf-card--hidden { opacity: 0; transform: scale(0.95); pointer-events: none; } /* ============================================================ * EMPTY STATE * ============================================================ */ .pf-empty { padding: var(--sp-xl) var(--sp-md); text-align: center; } .pf-empty__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); } .pf-empty__icon { width: 56px; height: 56px; color: var(--clr-white-20); margin-bottom: var(--sp-xs); } .pf-empty__title { font-size: var(--fs-lg); font-weight: 700; color: var(--clr-white-60); } .pf-empty__desc { font-size: var(--fs-sm); color: var(--clr-white-40); max-width: 360px; } .pf-empty__btn { margin-top: var(--sp-sm); padding: 10px 22px; background: transparent; border: 1px solid var(--clr-border-2); border-radius: var(--radius-sm); color: var(--clr-white-60); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); } .pf-empty__btn:hover { border-color: var(--clr-white-40); color: var(--clr-white-80); } /* ============================================================ * KEYFRAMES * ============================================================ */ @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* ============================================================ * PORTFOLIO RESPONSIVE * ============================================================ */ @media (max-width: 900px) { .pf-filters__inner { gap: var(--sp-sm); } .pf-search { margin-left: 0; width: 100%; } .pf-search__input { width: 100%; } .pf-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } } @media (max-width: 600px) { .pf-hero { padding-top: calc(var(--nav-height) + var(--sp-lg)); padding-bottom: var(--sp-lg); } .pf-hero__title { font-size: clamp(2.2rem, 10vw, 3.2rem); } .pf-hero__stats { gap: var(--sp-sm); } .pf-filters__tags { gap: 6px; } .pf-filter-btn { padding: 5px 11px; font-size: 0.78rem; } .pf-grid { grid-template-columns: 1fr; gap: var(--sp-sm); } .pf-card__btn { padding: 6px 10px; font-size: var(--fs-xs); } } /* Przyciski GitHub/Dokumentacja w modalu i clone'owane linki z kart */ .project-modal .modal-links a, .project-modal .modal-links a svg { font-size: var(--fs-sm); color: var(--clr-white-80); text-decoration: underline; } /* Compact modal link styling to avoid huge icons */ .project-modal .modal-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .project-modal .modal-links a.modal-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; background: transparent; border-radius: 8px; color: var(--clr-white-80); font-size: var(--fs-sm); } .project-modal .modal-links a.modal-link svg { width: 20px; height: 20px; } .project-modal .modal-links a.modal-link:hover { background: rgba(255,255,255,0.02); } /* Ensure cloned links don't break layout with large SVGs */ .project-modal .modal-links svg { display: inline-block; vertical-align: middle; } /* Empty placeholder project modal slides and thumbnails */ .project-modal__img--empty, .project-modal__thumb--empty { width: 100%; min-height: 280px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.30); font-size: 0.85rem; font-family: var(--font-mono); } .project-modal__thumb--empty { width: 72px; height: 48px; min-width: 72px; min-height: 48px; } /* Zapewnij, że długa etykieta nie wypycha kart */ .pf-card__btn { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .pf-card__btn span { display: inline-block; vertical-align: middle; } /* ============================================================ * 16. FEATURED CARDS (strona główna – 3 projekty) * ============================================================ */ /* Krótki opis sekcji pod h2 */ .section-desc { font-size: var(--fs-base); color: var(--clr-white-40); margin-bottom: var(--sp-lg); max-width: 560px; line-height: 1.70; } /* Siatka 3 kart */ .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-lg); align-items: start; } /* ── Karta wyróżnionego projektu ───────────────────────────── */ .feat-card { position: relative; display: flex; flex-direction: column; background: var(--clr-bg-2); border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease; } .feat-card:hover { border-color: var(--clr-border-2); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 1px rgba(255,255,255,0.07); } /* Wyróżniony środkowy – lekko inne tło i border glow */ .feat-card--featured { border-color: rgba(255,255,255,0.18); background: linear-gradient( 160deg, rgba(255,255,255,0.04) 0%, var(--clr-bg-2) 60% ); } .feat-card--featured:hover { border-color: rgba(255,255,255,0.30); box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.10); } /* Grupa badgy (stackowane pionowo) */ .feat-card__badge-group { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } /* Badge "Wyróżniony" */ .feat-card__featured-badge { font-size: 0.68rem; font-family: var(--font-mono); font-weight: 600; color: var(--clr-white-60); letter-spacing: 0.06em; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 3px 9px; text-transform: uppercase; pointer-events: none; } /* Glow overlay */ .feat-card__glow { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70% ); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; z-index: 0; } .feat-card:hover .feat-card__glow { opacity: 1; } /* ── Sekcje górna i dolna ─────────────────────────────────── */ .feat-card__top { padding: var(--sp-md); flex: 1; position: relative; z-index: 1; } .feat-card__bottom { padding: var(--sp-sm) var(--sp-md) var(--sp-md); border-top: 1px solid var(--clr-border); position: relative; z-index: 1; background: rgba(0,0,0,0.18); } /* ── Header karty ─────────────────────────────────────────── */ .feat-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-sm); } /* ── Ikona kategorii ──────────────────────────────────────── */ .feat-card__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--clr-border-2); } .feat-card__icon svg { width: 20px; height: 20px; } .feat-card__icon--discord { background: rgba(88,101,242,0.10); border-color: rgba(88,101,242,0.25); color: #8a97f5; } .feat-card__icon--minecraft { background: rgba(100,200,80,0.08); border-color: rgba(100,200,80,0.20); color: #7ab860; } .feat-card__icon--backend { background: rgba(255,255,255,0.05); border-color: var(--clr-border-2); color: var(--clr-white-60); } /* ── Status badge ─────────────────────────────────────────── */ .feat-card__status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 500; border: 1px solid; white-space: nowrap; } .feat-card__status-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .feat-card__status--active { color: var(--clr-white-80); border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); } .feat-card__status--active .feat-card__status-dot { background: var(--clr-white-80); box-shadow: 0 0 5px rgba(255,255,255,0.55); animation: pulse-dot 2.2s ease-in-out infinite; } .feat-card__status--dev { color: rgba(250,204,21,0.85); border-color: rgba(250,204,21,0.20); background: rgba(250,204,21,0.06); } .feat-card__status--dev .feat-card__status-dot { background: rgba(250,204,21,0.90); box-shadow: 0 0 5px rgba(250,204,21,0.45); animation: pulse-dot 2.2s ease-in-out infinite; } /* ── Tytuł i opis ─────────────────────────────────────────── */ .feat-card__title { font-size: clamp(1.05rem, 2vw, 1.20rem); font-weight: 800; letter-spacing: -0.02em; color: var(--clr-white); line-height: 1.20; margin-bottom: var(--sp-sm); } .feat-card__desc { font-size: var(--fs-sm); color: var(--clr-white-60); line-height: 1.70; margin-bottom: var(--sp-sm); } /* ── Tagi technologiczne ──────────────────────────────────── */ .feat-card__tags { display: flex; flex-wrap: wrap; gap: 5px; } .feat-tag { display: inline-block; padding: 2px 8px; border: 1px solid var(--clr-border-2); border-radius: 4px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--clr-white-60); background: rgba(255,255,255,0.03); letter-spacing: 0.04em; white-space: nowrap; transition: border-color var(--transition-fast), color var(--transition-fast); } .feat-card:hover .feat-tag { border-color: rgba(255,255,255,0.18); color: var(--clr-white-80); } /* ── Przyciski karty ──────────────────────────────────────── */ .feat-card__links { display: flex; flex-wrap: wrap; gap: var(--sp-xs); } .feat-card__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); white-space: nowrap; } .feat-card__btn svg { width: 14px; height: 14px; } .feat-card__btn--primary { background: var(--clr-white); color: var(--clr-bg); border: 1px solid var(--clr-white); } .feat-card__btn--primary:hover { background: transparent; color: var(--clr-white); transform: translateY(-1px); } .feat-card__btn--secondary { background: transparent; color: var(--clr-white-60); border: 1px solid var(--clr-border-2); } .feat-card__btn--secondary:hover { border-color: var(--clr-white-40); color: var(--clr-white-80); transform: translateY(-1px); } /* ============================================================ * 17. PORTFOLIO CTA * ============================================================ */ .portfolio__cta { margin-top: var(--sp-md); } .portfolio__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); background: var(--clr-bg-2); border: 1px solid var(--clr-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast); } .portfolio__cta-inner:hover { border-color: var(--clr-border-2); } .portfolio__cta-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--clr-white-40); letter-spacing: 0.1em; margin-bottom: var(--sp-xs); } .portfolio__cta-title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--clr-white); line-height: 1.20; margin-bottom: var(--sp-xs); } .portfolio__cta-desc { font-size: var(--fs-sm); color: var(--clr-white-40); max-width: 480px; line-height: 1.65; } /* Guzik CTA */ .portfolio__cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--clr-white); color: var(--clr-bg); border: 1px solid var(--clr-white); border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, gap 0.22s ease; } .portfolio__cta-btn svg { width: 18px; height: 18px; transition: transform 0.22s ease; } .portfolio__cta-btn:hover { background: transparent; color: var(--clr-white); box-shadow: 0 0 30px rgba(255,255,255,0.15); transform: translateY(-2px); } .portfolio__cta-btn:hover svg { transform: translateX(4px); } /* ── Responsive: Featured Grid ────────────────────────────── */ @media (max-width: 1024px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } .feat-card:nth-child(2) { grid-column: span 2; max-width: 600px; justify-self: center; width: 100%; } } @media (max-width: 700px) { .featured-grid { grid-template-columns: 1fr; } .feat-card--featured, .feat-card:nth-child(2) { grid-column: span 1; max-width: none; justify-self: stretch; } .portfolio__cta-inner { flex-direction: column; align-items: flex-start; padding: var(--sp-md); } .portfolio__cta-btn { width: 100%; justify-content: center; } .portfolio__cta-desc { max-width: none; } }