:root { --bg: #1c1c1c; --bg-s: #242424; --bg-e: #2e2e2e; --steel: #f0f0f0; --steel-dim: #d4d4d4; --white: #ffffff; --sand: #c4a882; --sand-d: rgba(196,168,130,0.15); --sand-b: rgba(196,168,130,0.35); --concrete: #6b6b6b; --serif: 'Inter', serif; --sans: 'Inter', system-ui, sans-serif; --ease: cubic-bezier(0.16,1,0.3,1); --ease2: cubic-bezier(0.25,0.46,0.45,0.94);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; background:#1c1c1c; }
body { font-family: var(--sans); background: var(--bg); color: var(--steel); min-height: 100vh; overflow-x: hidden;
}
/* Background image */
.bg-wrap{position:fixed;inset:0;z-index:0;overflow:hidden}
.bg-wrap picture,.bg-wrap img,.bg-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-wrap .blur{filter:blur(3px) brightness(0.45);transform:scale(1.1)}
.bg-overlay{position:fixed;inset:0;z-index:1;background:linear-gradient(135deg,rgba(28,28,28,0.6) 0%,rgba(28,28,28,0.25) 50%,rgba(28,28,28,0.65) 100%)}
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"); pointer-events:none; z-index:2; opacity:0.12; mix-blend-mode:overlay;
}
a { color: var(--sand); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--white); } /* ── Header (floating back button) ──────── */
.header { position: fixed; top: 10px; left: 10px; z-index: 100; display: flex; align-items: center; justify-content: flex-start;
} /* Back button – animated arrow */
.button { display: block; position: relative; width: 44px; height: 44px; margin: 0; overflow: hidden; outline: none; background-color: transparent; cursor: pointer; border: 0;
} .button:before,
.button:after { content: ""; position: absolute; border-radius: 50%; inset: 5px;
} .button:before { border: 3px solid rgba(255,255,255,0.8); transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
} .button:after { border: 3px solid #c4a882; transform: scale(1.3); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0;
} .button:hover:before,
.button:focus:before { opacity: 0; transform: scale(0.7); transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} .button:hover:after,
.button:focus:after { opacity: 1; transform: scale(1); transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
} .button-box { display: flex; position: absolute; top: 0; left: 0;
} .button-elem { display: block; width: 16px; height: 16px; margin: 14px; transform: rotate(180deg); fill: rgba(255,255,255,0.8);
} .button:hover .button-box,
.button:focus .button-box { transition: 0.4s; transform: translateX(-44px);
} /* ── Center Logo ─────────────────────────── */
.center-logo { position: relative; z-index: 10; display: flex; justify-content: center; padding: 1.25rem 5vw 0; overflow: visible;
}
.center-logo a { display: block; transition: opacity 0.3s var(--ease); margin-top: 0;
}
.center-logo a:hover { opacity: 0.75;
}
.center-logo img { height: auto; width: min(100%, 360px);
} /* ── Tiles ───────────────────────────────── */
.tiles { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 1rem; padding: 1rem 5vw 2rem; max-width: 1200px; margin: 0 auto;
}
.tiles-row { display: flex; flex-direction: row; gap: 1rem; align-items: stretch;
}
.tiles-col { display: flex; flex-direction: column; gap: 1rem; flex: 1; min-width: 0;
}
.tile { flex: 1; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(15,15,15,0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 1rem 1.5rem; transition: all 0.4s var(--ease); display: flex; flex-direction: column; justify-content: center;
}
.tile:hover { border-color: var(--sand-b); box-shadow: 0 12px 40px rgba(0,0,0,0.4); transform: translateY(-2px);
}
.tile-title { font-family: var(--serif); font-size: clamp(1.1rem, 2.5vw, 1.7rem); font-weight: 300; color: var(--white); text-align: center; letter-spacing: -.01em; line-height: 1.3;
}
.tile-title span { color: var(--sand); }
.tile-subtitle { font-size: clamp(0.7rem, 1vw, 0.85rem); color: var(--sand); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.5rem; text-align: center;
}
.tile-desc { font-size: clamp(0.85rem, 1.2vw, 1rem); color: var(--steel-dim); line-height: 1.7; text-align: center; max-width: 800px; margin: 0 auto;
}
.tile-right { flex: 1; min-width: 0;
} /* ── Gallery Grid ────────────────────────── */
.gallery { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; padding: 2rem 5vw 3rem; max-width: 1200px; margin: 0 auto; justify-content: center;
}
.gallery-card { position: relative; aspect-ratio: 1; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: rgba(15,15,15,0.65); cursor: pointer; transition: all 0.5s var(--ease); display: flex; align-items: center; justify-content: center;
}
.gallery-card:hover { transform: scale(1.03); border-color: var(--sand-b); box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.gallery-card picture,
.gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.gallery-card:hover img { transform: scale(1.12); filter: brightness(0.55);
}
.gallery-card-overlay { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 2rem; text-align: center; opacity: 0; transition: opacity 0.5s var(--ease);
}
.gallery-card:hover .gallery-card-overlay { opacity: 1; }
.gallery-card-overlay h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; color: var(--white);
}
.gallery-card-overlay .arrow { width: 32px; height: 32px; border: 1px solid var(--sand); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s; color: var(--sand); font-size: 1rem;
}
.gallery-card:hover .arrow { background: var(--sand-d); }
.gallery-card-overlay .label { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sand);
}
/* Always-visible name on card (mobile) */
.gallery-card .card-name { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: calc(100% - 3rem); z-index: 3; font-family: var(--serif); font-size: 1.1rem; font-weight: 300; color: var(--white); text-align: center; text-shadow: 0 2px 20px rgba(0,0,0,0.8); transition: opacity 0.4s;
}
.gallery-card:hover .card-name { opacity: 0; } /* Back to main site link */
.back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,0.4); transition: color 0.3s; margin: 0 auto 1rem; width: fit-content;
}
.back-link:hover { color: var(--sand); } /* Footer – identyczny jak na stronie głównej */
footer { padding:.8rem 5vw; display:flex; align-items:center; justify-content:center; position:relative; z-index:10;
}
footer a { color:#999; text-decoration:none; transition:color .3s; }
footer a:hover { color:#ccc; }
.ft-text { font-size:.72rem; letter-spacing:.06em; color:#999; }
.ft-cookie { position:absolute; right:1.5vw; display:inline-flex; align-items:center; cursor:pointer; opacity:.6; }
.ft-cookie:hover { opacity:1; }
.chat{position:fixed;bottom:calc(2rem - 5px);left:50%;transform:translateX(-50%);z-index:100;cursor:pointer}
.chat a{position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none;padding:0.75rem 1.5rem}
.chat .background{position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s cubic-bezier(.16,1,.3,1)}
.chat .chat-icon{position:relative;z-index:2;width:20px;height:20px;color:var(--steel);transition:color .25s ease;flex-shrink:0}
.chat .chat-text{position:relative;z-index:2;font-size:.85rem;letter-spacing:.08em;color:var(--steel);white-space:nowrap;transition:color .25s ease}
.chat a{gap:0.5rem}
.chat:hover .background{background:rgba(255,255,255,.12);border-color:var(--sand-b);transform:scale(1.05)}
.chat:hover .chat-text,.chat:hover .chat-icon{color:var(--sand)} /* Responsive */
@media (max-width: 1200px) { .gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) { .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .header { padding: 1.5rem 5vw 0; } .center-logo { padding: 1rem 5vw 0; } .center-logo a { margin-top: 0; } .center-logo img { height: auto; } .tiles { padding: 0.75rem 5vw 2rem; gap: 1rem; margin-top: 0; } .tiles-row { flex-direction: column; } .tiles-col { flex: 1 1 auto; } .tile-right { flex: 1 1 auto; } .tile { padding: 0.85rem 1rem; } .gallery { gap: 0.8rem; padding: 1rem 5vw 3rem; } .gallery-card-overlay h3 { font-size: 1rem; }
} @media (max-width: 480px) { .gallery { grid-template-columns: 1fr; }
}
/* ── DEV LINK LOADER OVERLAY ───────────────────────── */
#dev-loader-overlay { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; background:rgba(6,8,15,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
#dev-loader-overlay.active { display:flex; }
#dev-loader-overlay .loader { position: absolute; top: 50%; margin-left: -50px; left: 50%; animation: speeder 0.4s linear infinite;
}
#dev-loader-overlay .loader > span { height: 5px; width: 35px; background: #ff6b9d; position: absolute; top: -19px; left: 60px; border-radius: 2px 10px 1px 0;
}
#dev-loader-overlay .base span { position: absolute; width: 0; height: 0; border-top: 6px solid transparent; border-right: 100px solid #ff6b9d; border-bottom: 6px solid transparent;
}
#dev-loader-overlay .base span:before { content: ""; height: 22px; width: 22px; border-radius: 50%; background: #c44dff; position: absolute; right: -110px; top: -16px; box-shadow: 0 0 15px rgba(196,77,255,0.6);
}
#dev-loader-overlay .base span:after { content: ""; position: absolute; width: 0; height: 0; border-top: 0 solid transparent; border-right: 55px solid #4d9eff; border-bottom: 16px solid transparent; top: -16px; right: -98px;
}
#dev-loader-overlay .face { position: absolute; height: 12px; width: 20px; background: #c44dff; border-radius: 20px 20px 0 0; transform: rotate(-40deg); right: -125px; top: -15px; box-shadow: 0 0 10px rgba(196,77,255,0.4);
}
#dev-loader-overlay .face:after { content: ""; height: 12px; width: 12px; background: #4d9eff; right: 4px; top: 7px; position: absolute; transform: rotate(40deg); transform-origin: 50% 50%; border-radius: 0 0 0 2px; box-shadow: 0 0 8px rgba(77,158,255,0.4);
}
#dev-loader-overlay .loader > span > span:nth-child(1) { width: 30px; height: 1px; background: #ff6b9d; position: absolute; animation: fazer1 0.2s linear infinite;
}
#dev-loader-overlay .loader > span > span:nth-child(2) { width: 30px; height: 1px; background: #c44dff; position: absolute; top: 3px; animation: fazer2 0.4s linear infinite;
}
#dev-loader-overlay .loader > span > span:nth-child(3) { width: 30px; height: 1px; background: #4d9eff; position: absolute; top: 1px; animation: fazer3 0.4s linear infinite; animation-delay: -1s;
}
#dev-loader-overlay .loader > span > span:nth-child(4) { width: 30px; height: 1px; background: #ff6b9d; position: absolute; top: 4px; animation: fazer4 1s linear infinite; animation-delay: -1s;
}
@keyframes fazer1 { 0% { left: 0; } 100% { left: -80px; opacity: 0; }
}
@keyframes fazer2 { 0% { left: 0; } 100% { left: -100px; opacity: 0; }
}
@keyframes fazer3 { 0% { left: 0; } 100% { left: -50px; opacity: 0; }
}
@keyframes fazer4 { 0% { left: 0; } 100% { left: -150px; opacity: 0; }
}
@keyframes speeder { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -3px) rotate(-1deg); } 20% { transform: translate(-2px, 0px) rotate(1deg); } 30% { transform: translate(1px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 3px) rotate(-1deg); } 60% { transform: translate(-1px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-2px, -1px) rotate(1deg); } 90% { transform: translate(2px, 1px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#dev-loader-overlay .longfazers { position: absolute; width: 100%; height: 100%;
}
#dev-loader-overlay .longfazers span { position: absolute; height: 2px; width: 20%; opacity: 0.5;
}
#dev-loader-overlay .longfazers span:nth-child(1) { top: 20%; background: #ff6b9d; animation: lf 0.6s linear infinite; animation-delay: -5s;
}
#dev-loader-overlay .longfazers span:nth-child(2) { top: 40%; background: #c44dff; animation: lf2 0.8s linear infinite; animation-delay: -1s;
}
#dev-loader-overlay .longfazers span:nth-child(3) { top: 60%; background: #4d9eff; animation: lf3 0.6s linear infinite;
}
#dev-loader-overlay .longfazers span:nth-child(4) { top: 80%; background: #ff6b9d; animation: lf4 0.5s linear infinite; animation-delay: -3s;
}
@keyframes lf { 0% { left: 200%; } 100% { left: -200%; opacity: 0; }
}
@keyframes lf2 { 0% { left: 200%; } 100% { left: -200%; opacity: 0; }
}
@keyframes lf3 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; }
}
@keyframes lf4 { 0% { left: 200%; } 100% { left: -100%; opacity: 0; }
}