/* Fonty przeniesione do plików HTML () */
:root {
color-scheme: dark;
--bg: #07090d;
--bg-soft: #090d13;
--surface-1: #0d1118;
--surface-2: #131923;
--surface-3: #192232;
--line: #243040;
--line-soft: #1a2330;
--text: #e8edf2;
--text-muted: #9aa7b6;
--text-soft: #6e7b8c;
--accent: #3ddc84;
--accent-strong: #24b96a;
--accent-soft: rgba(61, 220, 132, 0.13);
--danger: #e06c75;
--shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--container: 1120px;
--nav-height: 64px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-width: 320px;
background:
linear-gradient(180deg, rgba(61, 220, 132, 0.028), transparent 300px),
var(--bg);
color: var(--text);
font-family: "General Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img,
svg {
display: block;
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
button {
border: 0;
}
::selection {
background: var(--accent);
color: #03110f;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.site-shell {
min-height: 100vh;
padding-top: var(--nav-height);
}
.container {
width: min(100% - 40px, var(--container));
margin: 0 auto;
}
.site-nav {
position: fixed;
inset: 0 0 auto;
z-index: 50;
height: var(--nav-height);
border-bottom: 1px solid var(--line-soft);
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: blur(18px);
view-transition-name: main-nav;
}
.site-nav .container {
width: min(100% - 40px, var(--container)) !important;
max-width: none !important;
}
.site-nav,
.site-nav * {
font-family: "General Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
-webkit-font-smoothing: antialiased !important;
text-rendering: optimizeLegibility !important;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: 20px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 11px;
min-width: 0;
font-weight: 700;
}
.brand-mark {
width: 28px;
height: 28px;
color: var(--accent);
flex: 0 0 auto;
}
.brand-text {
display: grid;
line-height: 1;
}
.brand-name {
color: var(--text);
font-size: 0.96rem;
}
.brand-sub {
color: var(--text-soft);
font-family: "Satoshi", "General Sans", sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
margin-top: 4px;
text-transform: uppercase;
}
.nav-links {
display: none;
align-items: center;
gap: 6px;
padding: 4px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-md);
background: var(--surface-1);
}
.nav-link {
min-height: 36px;
padding: 7px 12px;
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 600;
}
.nav-link:hover,
.nav-link[aria-current="page"] {
background: var(--surface-2);
color: var(--text);
}
.nav-actions {
display: flex;
align-items: center;
gap: 8px;
}
.segmented {
display: inline-flex;
align-items: center;
padding: 3px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-md);
background: var(--surface-1);
}
.segmented button,
.icon-button {
display: inline-grid;
place-items: center;
min-width: 36px;
height: 36px;
border-radius: var(--radius-sm);
color: var(--text-muted);
background: transparent;
cursor: pointer;
}
.segmented button {
padding: 0 10px;
font-size: 0.78rem;
font-weight: 800;
}
.segmented button.is-active,
.icon-button:hover,
.menu-toggle[aria-expanded="true"] {
background: var(--surface-2);
color: var(--text);
}
.icon-button svg,
.menu-toggle svg {
width: 18px;
height: 18px;
}
.menu-toggle {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-md);
color: var(--text);
background: var(--surface-1);
cursor: pointer;
}
.mobile-panel {
display: none;
position: fixed;
top: calc(var(--nav-height) + 12px);
right: 20px;
width: 220px;
z-index: 45;
padding: 8px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
background: var(--surface-1);
box-shadow: var(--shadow);
}
.mobile-panel .container {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.mobile-panel.is-open {
display: block;
}
.mobile-panel .nav-link {
display: block;
width: 100%;
min-height: 46px;
padding: 11px 12px;
}
.hero {
position: relative;
padding: clamp(44px, 7vw, 88px) 0 clamp(38px, 6vw, 72px);
overflow: hidden;
}
.hero-grid {
display: grid;
gap: 32px;
align-items: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--accent);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 26px;
height: 1px;
background: currentColor;
}
.hero h1,
.page-title,
.section-title,
.project-card h2 {
margin: 0;
font-family: "Satoshi", "General Sans", sans-serif;
letter-spacing: 0;
line-height: 0.98;
}
.hero h1 {
max-width: 820px;
margin-top: 16px;
font-size: clamp(2.45rem, 6.4vw, 5.45rem);
font-weight: 900;
}
.hero-copy {
max-width: 660px;
margin: 20px 0 0;
color: var(--text-muted);
font-size: clamp(1rem, 1.6vw, 1.13rem);
}
.hero-actions,
.card-actions,
.project-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding: 10px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
color: var(--text);
background: var(--surface-1);
font-size: 0.92rem;
font-weight: 800;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.button:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.button-primary {
border-color: var(--accent);
background: var(--accent);
color: #03110f;
}
.button-primary:hover {
background: var(--accent-strong);
color: #fff;
}
.button svg {
width: 17px;
height: 17px;
}
.hero-mark {
width: min(52vw, 190px);
justify-self: start;
color: var(--accent);
opacity: 0.92;
}
.hero-mark .mark-line {
stroke: var(--line);
}
.section {
padding: clamp(46px, 8vw, 92px) 0;
border-top: 1px solid var(--line-soft);
}
.about-grid {
display: grid;
gap: 34px;
}
.section-title,
.page-title {
font-size: clamp(2.2rem, 6vw, 4.5rem);
font-weight: 900;
}
.section-copy,
.prose {
color: var(--text-muted);
font-size: 1.02rem;
}
.section-copy {
max-width: 680px;
margin: 18px 0 0;
}
.prose {
display: grid;
gap: 18px;
}
.prose p {
margin: 0;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
.tag {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 5px 10px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text-muted);
background: var(--surface-1);
font-size: 0.82rem;
font-weight: 700;
}
.tag.is-accent {
border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
color: var(--accent);
background: var(--accent-soft);
}
.side-panel {
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
box-shadow: var(--shadow);
}
.stats-panel {
display: grid;
gap: 1px;
overflow: hidden;
background: var(--line-soft);
}
.stat {
padding: 20px;
background: var(--surface-1);
}
.stat-value {
display: block;
color: var(--text);
font-family: "Satoshi", "General Sans", sans-serif;
font-size: 1.7rem;
font-weight: 900;
line-height: 1;
}
.stat-label {
display: block;
margin-top: 8px;
color: var(--text-soft);
font-size: 0.82rem;
font-weight: 700;
}
.note {
max-width: 850px;
color: var(--text-muted);
font-size: clamp(1.12rem, 2.4vw, 1.55rem);
line-height: 1.45;
}
.page-header {
padding: clamp(58px, 9vw, 104px) 0 34px;
border-bottom: 1px solid var(--line-soft);
}
.page-kicker {
margin: 0 0 16px;
}
.page-lede {
max-width: 760px;
margin: 20px 0 0;
color: var(--text-muted);
font-size: 1.1rem;
}
.projects-list {
display: grid;
gap: 18px;
padding: 42px 0 86px;
}
.project-card {
display: flex;
min-height: 100%;
flex-direction: column;
gap: 22px;
padding: clamp(22px, 4vw, 30px);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
background: var(--surface-1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.project-card:hover {
border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
background: color-mix(in srgb, var(--surface-1) 88%, var(--accent-soft));
}
.project-card h2 {
font-size: clamp(1.72rem, 3.15vw, 2.62rem);
font-weight: 900;
line-height: 0.98;
overflow-wrap: normal;
word-break: normal;
}
.project-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.project-desc {
max-width: 720px;
margin: 0;
color: var(--text-muted);
font-size: 0.98rem;
}
.feature-lines {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
color: var(--text-muted);
font-size: 0.95rem;
}
.feature-lines li {
display: flex;
gap: 10px;
}
.feature-lines li::before {
content: "";
width: 6px;
height: 6px;
margin-top: 0.72em;
border-radius: 50%;
background: var(--accent);
flex: 0 0 auto;
}
.expansions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.label {
margin: 0 0 10px;
color: var(--text-soft);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.site-footer {
border-top: 1px solid var(--line-soft);
padding: 32px 0;
color: var(--text-soft);
font-size: 0.88rem;
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
justify-content: space-between;
}
.footer-links {
display: flex;
gap: 14px;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Szachownica pod screenami (placeholder do momentu załadowania obrazka) */
.checker-bg {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjMWUyOTNiIiBmaWxsLW9wYWNpdHk9IjAuNSI+PC9yZWN0Pgo8cGF0aCBkPSJNMCAwTDggOFpNMCA4TDggMFoiIHN0cm9rZT0iIzBmMTcyYSIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+Cjwvc3ZnPg==");
}
/* Wskaźnik pozycji slidera (np. "2 / 4") */
.slider-indicator {
margin-top: 6px;
text-align: center;
color: var(--text-soft);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.lightbox {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: color-mix(in srgb, var(--bg) 92%, transparent);
opacity: 0;
transition: opacity 180ms ease;
}
.lightbox.is-open {
display: flex;
opacity: 1;
}
.lightbox img {
max-width: 95vw;
max-height: 90vh;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface-1);
object-fit: contain;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
}
.project-detail {
background: var(--bg) !important;
color: var(--text) !important;
padding-top: var(--nav-height);
}
.project-detail header:not(.site-nav),
.project-detail main,
.project-detail section {
background: transparent !important;
}
.project-detail>header:not(.site-nav) {
padding: 64px 0;
border-bottom: 1px solid var(--line);
}
.project-detail>header:not(.site-nav)>div,
.project-detail>main {
width: min(100% - 40px, var(--container));
margin: 0 auto;
}
.project-detail>header:not(.site-nav)>div {
display: flex;
align-items: center;
gap: 32px;
}
.project-detail main {
padding-top: 64px;
padding-bottom: 64px;
}
.project-detail section+section {
margin-top: 80px;
}
.project-detail #slider-mqol,
.project-detail #slider-dtt {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.project-detail #slider-mqol>div,
.project-detail #slider-dtt>div {
width: min(85vw, 360px);
aspect-ratio: 16 / 9;
flex: 0 0 min(85vw, 360px);
overflow: hidden;
}
@media (min-width: 640px) {
.project-detail #slider-mqol>div,
.project-detail #slider-dtt>div {
width: min(100%, 360px);
flex: 0 0 min(100%, 360px);
}
}
.project-detail .screenshot-src {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.project-detail .bg-card,
.project-detail .bg-slate-800,
.project-detail .bg-slate-900 {
background-color: var(--surface-1) !important;
}
.project-detail .project-mark {
width: 128px !important;
height: 128px !important;
max-width: 128px !important;
flex: 0 0 128px !important;
}
.project-detail .border-slate-700,
.project-detail .border-slate-800 {
border-color: var(--line) !important;
}
.project-detail h1,
.project-detail h2,
.project-detail h3,
.project-detail .text-white {
color: var(--text) !important;
}
.project-detail p,
.project-detail li,
.project-detail .text-slate-300,
.project-detail .text-slate-400,
.project-detail .text-slate-500 {
color: var(--text-muted) !important;
}
.project-detail .text-green-300,
.project-detail .text-green-400 {
color: var(--accent) !important;
}
.project-detail .bg-green-600 {
background-color: var(--accent-strong) !important;
color: #fff !important;
}
.project-detail .bg-amber-600 {
background-color: #b7791f !important;
color: #fff !important;
}
.project-detail a.bg-slate-800 {
background-color: var(--surface-2) !important;
color: var(--text) !important;
}
@media (max-width: 760px) {
.project-detail>header:not(.site-nav)>div {
flex-direction: column;
align-items: center;
}
}
@media (min-width: 760px) {
.nav-links {
display: flex;
}
.menu-toggle,
.mobile-panel {
display: none !important;
}
.hero-grid {
grid-template-columns: minmax(0, 1fr) 210px;
}
.hero-mark {
justify-self: end;
}
.about-grid {
grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
align-items: start;
}
.stats-panel {
grid-template-columns: 1fr;
}
.projects-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.project-card {
justify-content: space-between;
}
.footer-inner {
flex-direction: row;
align-items: center;
}
}
@media (max-width: 560px) {
.container {
width: min(100% - 28px, var(--container));
}
.brand-sub {
display: none;
}
.hero-actions,
.card-actions,
.project-actions {
flex-direction: column;
}
.button {
width: 100%;
}
}
/* Custom Interactive Background & Modern Visual Effects */
#bg-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: -1;
view-transition-name: bg-canvas;
}
.hero-grid {
position: relative;
z-index: 2;
}
.hero-mark {
position: relative;
z-index: 2;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-mark:hover {
transform: scale(1.05) rotate(2deg);
filter: drop-shadow(0 0 20px rgba(61, 220, 132, 0.4));
}
/* Glassmorphism & Modern Cards */
.glass-card {
background: color-mix(in srgb, var(--surface-1) 75%, transparent) !important;
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid var(--line-soft) !important;
box-shadow: var(--shadow);
}
.project-card {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover {
transform: translateY(-6px);
border-color: var(--accent) !important;
box-shadow: 0 20px 40px rgba(61, 220, 132, 0.08);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-fade-in-delayed {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 0.15s;
}
.animate-fade-in-delayed-2 {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 0.3s;
}
/* Core Engineering Pillars layout */
.pillars-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
margin-top: 32px;
}
.pillar-card {
padding: 32px;
border-radius: var(--radius-lg);
background: var(--surface-1);
border: 1px solid var(--line-soft);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 12px 30px rgba(61, 220, 132, 0.04);
}
.pillar-card h3 {
margin: 0 0 12px;
font-family: "Satoshi", sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--text);
}
.pillar-card p {
margin: 0;
color: var(--text-muted);
font-size: 0.96rem;
line-height: 1.6;
}
.pillar-card .pillar-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
color: var(--accent);
font-size: 0.88rem;
font-weight: 700;
}
.pillar-card .pillar-link svg {
width: 15px;
height: 15px;
transition: transform 160ms ease;
}
.pillar-card .pillar-link:hover svg {
transform: translateX(3px);
}
/* Unified detail page style adjustments */
.project-detail .bg-card {
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.project-detail .bg-card:hover {
border-color: var(--accent) !important;
box-shadow: 0 12px 30px rgba(61, 220, 132, 0.04);
}
html::view-transition {
overflow: clip;
}
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: 350ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out;
mix-blend-mode: normal;
}
::view-transition-new(root) {
animation: 350ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in;
mix-blend-mode: normal;
}
/* Wykluczenie animacji paska górnego (navbar), aby stał nieruchomo bez migania */
::view-transition-group(main-nav) {
animation: none !important;
}
::view-transition-old(main-nav) {
display: none !important;
}
::view-transition-new(main-nav) {
animation: none !important;
opacity: 1 !important;
}
@keyframes slide-out {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@media (max-width: 760px) {
.hero-mark {
display: none !important;
}
}
/* Ograniczony ruch: bez animacji wejścia, przejść między stronami i płynnego scrolla */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.animate-fade-in,
.animate-fade-in-delayed,
.animate-fade-in-delayed-2 {
animation: none;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
.project-card,
.pillar-card,
.hero-mark,
.button {
transition: none;
}
}