:root{
--bg: #f7f8fb;
--surface: #ffffff;
--surface2: #f1f4f9;
--text: #0f172a;
--muted: #475569;
--line: #e6eaf2;
--primary: #2563eb;
--primary2: #1d4ed8;
--shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
--shadow2: 0 10px 28px rgba(15, 23, 42, 0.07);
--radius: 18px;
}
/* USŁUGI — zakres, dokumentacja i obsługa inwestycji */
.servicesOffer {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 8% 12%, rgba(37, 99, 235, 0.09), transparent 30%),
linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.servicesOffer .section__head {
max-width: 940px;
}
.servicesOffer .section__head p {
max-width: 900px;
}
.offerGroups {
display: grid;
gap: 52px;
}
.offerGroup {
position: relative;
}
.offerGroup + .offerGroup {
padding-top: 44px;
border-top: 1px solid rgba(148, 163, 184, 0.24);
}
.offerGroup__title {
margin: 0 0 22px;
color: #0f172a;
font-size: clamp(1.35rem, 2.3vw, 1.75rem);
font-weight: 800;
letter-spacing: -0.025em;
text-align: center;
text-transform: uppercase;
}
.offerGroup__title::after {
content: "";
display: block;
width: 54px;
height: 3px;
margin: 12px auto 0;
border-radius: 999px;
background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.offerTiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 15px;
}
.offerTile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 132px;
padding: 22px 18px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 18px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.9));
box-shadow:
0 12px 30px rgba(15, 23, 42, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
color: #1e293b;
font-size: 0.98rem;
font-weight: 700;
line-height: 1.45;
text-align: center;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.offerTile::before {
content: "";
position: absolute;
top: 0;
left: 22%;
width: 56%;
height: 3px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, transparent, #3b82f6, transparent);
opacity: 0.75;
}
.offerTile:hover {
transform: translateY(-4px);
border-color: rgba(37, 99, 235, 0.32);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.11);
}
/* NASI KLIENCI */
.clientsSection {
position: relative;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.97));
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.clientsSection__head {
max-width: 820px;
margin: 0 auto 34px;
text-align: center;
}
.clientsSection__head::before {
content: "Współpraca";
display: inline-flex;
padding: 8px 14px;
margin-bottom: 14px;
border: 1px solid rgba(96, 165, 250, 0.25);
border-radius: 999px;
background: rgba(59, 130, 246, 0.11);
color: #93c5fd;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.clientsSection__head h2 {
color: #f8fafc;
font-size: clamp(2rem, 4vw, 3.25rem);
}
.clientsSection__head p {
max-width: 760px;
margin: 14px auto 0;
color: #cbd5e1;
font-size: clamp(1rem, 1.4vw, 1.08rem);
line-height: 1.75;
}
.offerTile--client {
min-height: 122px;
border-color: rgba(148, 163, 184, 0.17);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
box-shadow:
0 16px 34px rgba(2, 6, 23, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: #f8fafc;
}
.offerTile--client:hover {
border-color: rgba(96, 165, 250, 0.42);
box-shadow: 0 20px 42px rgba(2, 6, 23, 0.3);
}
#nasi-klienci {
scroll-margin-top: 90px;
}
@media (max-width: 900px) {
.offerTiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.offerGroups {
gap: 38px;
}
.offerGroup + .offerGroup {
padding-top: 34px;
}
.offerGroup__title {
margin-bottom: 18px;
font-size: 1.25rem;
}
.offerTiles {
grid-template-columns: 1fr;
gap: 11px;
}
.offerTile,
.offerTile--client {
min-height: 92px;
padding: 18px 16px;
border-radius: 16px;
}
.clientsSection__head {
margin-bottom: 24px;
}
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background:
radial-gradient(1100px 700px at 90% 0%, rgba(37,99,235,0.10), transparent 55%),
radial-gradient(900px 600px at 10% 10%, rgba(37,99,235,0.08), transparent 55%),
var(--bg);
}
a{ color: inherit; text-decoration: none; }
a:hover{ opacity: 0.92; }
.container{
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
}
.small{ font-size: 0.95rem; }
.muted{ color: var(--muted); }
.badge{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255,255,255,0.65);
font-size: 0.92rem;
}
/* Topbar */
.topbar{
border-bottom: 1px solid var(--line);
background: rgba(255,255,255,0.65);
backdrop-filter: blur(10px);
}
.topbar__inner{
display:flex; align-items:center; justify-content:space-between;
padding: 10px 0;
gap: 14px;
flex-wrap: wrap;
}
.topbar__left, .topbar__right{
display:flex; align-items:center; gap: 12px;
flex-wrap: wrap;
}
.toplink{ color: var(--muted); font-size: 0.96rem; }
/* Header */
.header {
position: sticky; /* Zamiast fixed */
top: 0;
z-index: 1000;
width: 100%;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.header__inner{
display:flex; align-items:center; justify-content:space-between;
padding: 14px 0;
gap: 16px;
}
.brand{ display:flex; align-items:center; gap: 12px; }
.brand{
display: flex;
align-items: center;
gap: 12px;
}
.brand__mark{
height: clamp(30px, 3.2vw, 44px);
width: auto;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.logo-bg{ fill: rgba(37,99,235,0.08); stroke: rgba(37,99,235,0.22); stroke-width: 1; }
.logo-stroke{ stroke: rgba(15,23,42,0.85); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand__name{ font-weight: 800; letter-spacing: 0.4px; }
.brand__sub{ font-size: 0.92rem; color: var(--muted); margin-top: 2px; }
.nav{
display:flex; align-items:center; gap: 18px;
}
.nav a{
color: var(--muted);
font-weight: 600;
font-size: 0.98rem;
}
/* aktywna pozycja w menu */
.nav a[aria-current="page"]{
color: var(--text);
opacity: 1;
position: relative;
}
/* podkreślenie / pill */
.nav a[aria-current="page"]::after{
content:"";
position:absolute;
left: 0;
right: 0;
bottom: -10px;
height: 3px;
border-radius: 999px;
background: rgba(37,99,235,0.75);
}
/* mobile */
.mobile__link[aria-current="page"]{
border-color: rgba(37,99,235,0.35);
background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(29,78,216,0.08));
color: var(--text);
}
.nav a:hover{ color: var(--text); }
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap: 8px;
padding: 11px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.75);
color: var(--text);
font-weight: 700;
box-shadow: none;
}
.btn--primary{
border-color: rgba(37,99,235,0.35);
background: linear-gradient(180deg, rgba(37,99,235,0.14), rgba(29,78,216,0.10));
color: var(--text);
}
.btn--full{ width: 100%; padding: 12px 14px; }
.hamburger{
display:none;
width: 44px; height: 44px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.75);
cursor: pointer;
}
.hamburger span{
display:block;
width: 18px; height: 2px;
margin: 5px auto;
background: rgba(15,23,42,0.75);
border-radius: 10px;
}
.mobile{
border-top: 1px solid var(--line);
background: rgba(255,255,255,0.90);
}
.mobile__inner{
padding: 14px 0;
display:flex;
flex-direction: column;
gap: 10px;
}
.mobile__link{
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.75);
color: var(--muted);
}
/* Hero + sections */
.hero{ padding: 56px 0 18px; }
.hero__grid{
display:grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 26px;
align-items: center;
}
h1{
font-size: clamp(2.0rem, 3.2vw, 3.0rem);
line-height: 1.08;
margin: 0 0 14px 0;
letter-spacing: -0.02em;
}
.lead{
color: var(--muted);
font-size: 1.08rem;
line-height: 1.65;
margin: 0 0 18px;
}
.hero__cta{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.card{
border-radius: 22px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.85);
box-shadow: var(--shadow);
padding: 16px;
}
.card__title{ font-weight: 800; margin-bottom: 10px; }
.divider{ height: 1px; background: var(--line); margin: 14px 0; }
.mini__row{
display:flex; align-items:center; justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px dashed rgba(15,23,42,0.12);
}
.mini__row:last-child{ border-bottom: 0; }
.mini__row span{ color: var(--muted); }
.section{ padding: 52px 0; }
.section--alt{
background: rgba(255,255,255,0.55);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.section__head{ margin-bottom: 16px; }
h2{ margin: 0 0 8px; font-size: 1.65rem; letter-spacing: -0.02em; }
h3{ margin: 0 0 8px; letter-spacing: -0.01em; }
.grid{ display:grid; gap: 14px; }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.box{
border-radius: var(--radius);
border: 1px solid var(--line);
background: rgba(255,255,255,0.85);
padding: 18px;
box-shadow: var(--shadow2);
}
.list{
margin: 0;
padding-left: 18px;
color: var(--muted);
line-height: 1.7;
}
.kicker{
color: rgba(37,99,235,0.95);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.85rem;
}
.breadcrumbs{
font-size: 0.95rem;
color: var(--muted);
margin: 14px 0 0;
}
.work{
overflow:hidden;
padding: 0;
}
.work__img{
height: 160px;
background:
linear-gradient(135deg, rgba(37,99,235,0.14), transparent 60%),
linear-gradient(180deg, rgba(15,23,42,0.06), rgba(15,23,42,0.02));
}
.work__body{ padding: 16px 18px 18px; }
.contact{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.form{
padding: 18px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: rgba(255,255,255,0.88);
box-shadow: var(--shadow2);
}
.form label{
display:block;
font-weight: 700;
font-size: 0.95rem;
color: rgba(15,23,42,0.92);
margin-bottom: 12px;
}
.form__row{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
input, select, textarea{
width: 100%;
margin-top: 8px;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,0.12);
background: rgba(255,255,255,0.98);
color: var(--text);
outline: none;
}
input::placeholder, textarea::placeholder{ color: rgba(71,85,105,0.65); }
input:focus, select:focus, textarea:focus{
border-color: rgba(37,99,235,0.55);
box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.checkbox{
display:flex;
gap: 10px;
align-items:flex-start;
font-weight: 600 !important;
color: var(--muted);
}
.checkbox input{ width: 18px; height: 18px; margin-top: 3px; }
.footer{
padding: 26px 0;
}
.footer__inner{
display:grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 14px;
align-items:center;
border-top: 1px solid var(--line);
padding-top: 18px;
}
.footer__name{ font-weight: 900; }
.footer__links{ display:flex; gap: 12px; justify-content:center; flex-wrap: wrap; }
.footer__links a{ color: var(--muted); }
@media (max-width: 980px){
.hero__grid{ grid-template-columns: 1fr; }
.grid--3{ grid-template-columns: 1fr; }
.grid--2{ grid-template-columns: 1fr; }
.contact{ grid-template-columns: 1fr; }
.footer__inner{ grid-template-columns: 1fr; text-align:center; }
.footer__links{ justify-content:center; }
.nav{ display:none; }
.hamburger{ display:inline-flex; align-items:center; justify-content:center; }
}
/* ==== GRAND-LIKE HERO (jasny premium, fullscreen, kafle) ==== */
/* ==== GRAND-LIKE HERO (jasny premium, fullscreen, kafle) ==== */
.hero--grand { padding: 0; }
/* jasne tło, a nie ciemne */
.heroSlider{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
background:
radial-gradient(1100px 700px at 90% 0%, rgba(37,99,235,0.18), transparent 55%),
radial-gradient(900px 600px at 10% 10%, rgba(37,99,235,0.12), transparent 55%),
var(--bg);
}
.heroSlides{ position: relative; height: 100%; }
/* jaśniejszy overlay + użycie --heroBg zamiast --bg */
.heroSlide{
position: absolute;
inset: 0;
display: grid;
align-items: center;
opacity: 0;
pointer-events: none;
transform: scale(1.01);
transition: opacity .45s ease, transform .6s ease;
background-image:
linear-gradient(90deg, rgba(247,248,251,.90), rgba(247,248,251,.62)),
var(--heroBg);
background-size: cover;
background-position: center;
}
.heroSlide.is-active{
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.heroSlide__inner{
padding: 72px 0 140px;
color: var(--text);
}
.heroSlide__inner .kicker{ color: rgba(37,99,235,0.95); }
.heroSlide__inner h1{ color: var(--text); max-width: 18ch; }
.heroSlide__inner .lead{ color: var(--muted); max-width: 72ch; }
.heroSlide__cta{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top: 18px;
}
/* dolne kafle jak na grand200 — ale w jasnym stylu */
.heroNav{
position: absolute;
left: 0; right: 0;
bottom: 18px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.heroTab{
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,0.78);
backdrop-filter: blur(12px);
padding: 14px 14px;
border-radius: 16px;
color: var(--text);
text-align: left;
cursor: pointer;
box-shadow: var(--shadow2);
transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.heroTab:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.86); }
.heroTab.is-active{ border-color: rgba(37,99,235,.38); background: rgba(255,255,255,0.92); }
.heroTab__k{
display:block;
font-size:12px;
letter-spacing:.08em;
text-transform: uppercase;
color: rgba(71,85,105,0.9);
}
.heroTab__t{
display:block;
font-size:16px;
font-weight:900;
margin-top:4px;
}
/* strzałki — jasne */
.heroArrow{
position:absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,0.80);
color: var(--text);
font-size: 26px;
display:grid;
place-items:center;
cursor:pointer;
box-shadow: var(--shadow2);
backdrop-filter: blur(12px);
}
.heroArrow--prev{ left: 14px; }
.heroArrow--next{ right: 14px; }
@media (max-width: 980px){
.heroSlide__inner{ padding: 56px 0 170px; }
.heroNav{ grid-template-columns: 1fr 1fr; }
}
/* ==== HERO MOTION (Hitachi-like, jasny, animowane tło) ==== */
.hero--motion { padding: 0; }
.heroMotion{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
background:
radial-gradient(1100px 700px at 90% 0%, rgba(37,99,235,0.18), transparent 55%),
radial-gradient(900px 600px at 10% 10%, rgba(37,99,235,0.12), transparent 55%),
var(--bg);
border-bottom: 1px solid var(--line);
}
.heroMotion__canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
opacity: 0.9;
}
.heroMotion__content{
position: relative;
padding: 72px 0 64px;
z-index: 1;
}
.heroMotion__cta{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.heroMotion__chips{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top: 18px;
}
.chip{
display:inline-flex;
align-items:center;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,0.10);
background: rgba(255,255,255,0.80);
box-shadow: var(--shadow2);
font-weight: 800;
color: rgba(15,23,42,0.92);
}
.chip:hover{
background: rgba(255,255,255,0.92);
}
@media (max-width: 980px){
.heroMotion__content{ padding: 56px 0 44px; }
}
/* ==== HERO BLUEPRINT ==== */
.heroBlueprint{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
opacity:0.35;
}
.heroBlueprint__svg{
width:100%;
height:100%;
}
.bp-outline{
fill:none;
stroke: rgba(15,23,42,0.15);
stroke-width:2;
}
.bp-floor{
stroke: rgba(15,23,42,0.12);
stroke-width:1.5;
}
.bp-vertical{
stroke: rgba(37,99,235,0.35);
stroke-width:2;
stroke-dasharray: 8 8;
animation: dashMove 4s linear infinite;
}
.bp-node{
fill: rgba(37,99,235,0.7);
animation: pulseNode 2.5s ease-in-out infinite;
}
@keyframes dashMove{
to { stroke-dashoffset: -32; }
}
@keyframes pulseNode{
0%,100% { r:4; opacity:0.7; }
50% { r:7; opacity:1; }
}
/* ==== HERO CAD (ciemny tech + neonowe instalacje) ==== */
.hero--cad{ padding: 0; }
.heroCad{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
border-bottom: 1px solid rgba(15,23,42,0.10);
background:
radial-gradient(1100px 700px at 90% 0%, rgba(37,99,235,0.25), transparent 55%),
radial-gradient(900px 600px at 15% 20%, rgba(16,185,129,0.18), transparent 55%),
radial-gradient(900px 600px at 60% 80%, rgba(244,63,94,0.10), transparent 55%),
#070b14;
}
.heroCad__canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
opacity: 0.95;
}
.heroCad__content{
position: relative;
z-index: 2;
padding: 76px 0 60px;
color: rgba(255,255,255,0.92);
}
.kicker--onDark{ color: rgba(147,197,253,0.95); }
.heroCad__h1{
color: #fff;
text-shadow: 0 18px 55px rgba(0,0,0,0.45);
}
.lead--onDark{
color: rgba(226,232,240,0.85);
text-shadow: 0 14px 40px rgba(0,0,0,0.40);
}
.muted--onDark{ color: rgba(203,213,225,0.78); }
.heroCad__cta{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.btn--onDark{
border-color: rgba(148,163,184,0.22);
background: rgba(15,23,42,0.35);
color: rgba(255,255,255,0.92);
}
.btn--onDark:hover{ opacity: 0.96; }
.btn--primary.btn--onDark{
border-color: rgba(59,130,246,0.42);
background: linear-gradient(180deg, rgba(37,99,235,0.35), rgba(29,78,216,0.20));
color: #fff;
}
.heroCad__chips{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top: 18px;
}
.chip--onDark{
border: 1px solid rgba(148,163,184,0.18);
background: rgba(15,23,42,0.35);
color: rgba(255,255,255,0.90);
}
.chip--onDark:hover{
background: rgba(15,23,42,0.50);
}
/* lekki „screen” pod czytelność tekstu */
.heroCad::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg, rgba(7,11,20,0.78), rgba(7,11,20,0.30));
z-index: 1;
}
@media (max-width: 980px){
.heroCad__content{ padding: 58px 0 44px; }
.heroCad::after{
background: linear-gradient(180deg, rgba(7,11,20,0.78), rgba(7,11,20,0.42));
}
}
/* ===== HERO: CAD TŁO (1 obraz) ===== */
.cadHero{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
background: #070b14;
}
.cadHero__bg{
position: absolute;
inset: -8%;
background-image: url("../img/hero-cad-mosaic.png");
background-size: cover;
background-position: center;
transform: scale(1.10);
filter: saturate(1.25) contrast(1.10);
opacity: 0.95;
animation: cadPan 18s ease-in-out infinite;
}
/* przyciemnienie pod tekst */
.cadHero::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg, rgba(7,11,20,0.82), rgba(7,11,20,0.36));
z-index: 1;
}
.cadHero__content{
position: relative;
z-index: 2;
padding: 78px 0 60px;
color: rgba(255,255,255,0.92);
}
/* “życie” – delikatny ruch */
@keyframes cadPan{
0% { transform: translate3d(-1%, -1%, 0) scale(1.12); }
50% { transform: translate3d( 1.3%, 0.9%, 0) scale(1.18); }
100% { transform: translate3d(-1%, -1%, 0) scale(1.12); }
}
/* mobile */
@media (max-width: 980px){
.cadHero__bg{ inset: -12%; }
.cadHero__content{ padding: 58px 0 44px; }
.cadHero::after{
background: linear-gradient(180deg, rgba(7,11,20,0.82), rgba(7,11,20,0.50));
}
}
/* accessibility */
@media (prefers-reduced-motion: reduce){
.cadHero__bg{ animation: none !important; }
}
/* ==== HERO VIDEO (Hitachi-like) ==== */
.hero--video { padding: 0; }
.heroVideo{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
background: #070b14;
border-bottom: 1px solid rgba(148,163,184,0.14);
}
/* wideo w tle */
.heroVideo__media{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.03);
filter: saturate(1.05) contrast(1.05);
}
/* overlay pod czytelność + lekki “tech glow” */
.heroVideo__overlay{
position: absolute;
inset: 0;
background:
radial-gradient(900px 650px at 70% 20%, rgba(59,130,246,0.20), transparent 60%),
linear-gradient(90deg, rgba(7,11,20,0.82), rgba(7,11,20,0.28));
}
.heroVideo__content{
position: relative;
z-index: 2;
padding: 78px 0 60px;
color: rgba(255,255,255,0.92);
}
.kicker--onDark{ color: rgba(147,197,253,0.95); }
.lead--onDark{ color: rgba(226,232,240,0.85); text-shadow: 0 14px 40px rgba(0,0,0,0.40); }
.muted--onDark{ color: rgba(203,213,225,0.78); }
.heroVideo__h1{
color: #fff;
text-shadow: 0 18px 55px rgba(0,0,0,0.45);
}
.heroVideo__cta{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.heroVideo__chips{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top: 18px;
}
.btn--onDark{
border-color: rgba(148,163,184,0.22);
background: rgba(15,23,42,0.35);
color: rgba(255,255,255,0.92);
}
.btn--primary.btn--onDark{
border-color: rgba(59,130,246,0.42);
background: linear-gradient(180deg, rgba(37,99,235,0.35), rgba(29,78,216,0.20));
color:#fff;
}
.chip--onDark{
border: 1px solid rgba(148,163,184,0.18);
background: rgba(15,23,42,0.35);
color: rgba(255,255,255,0.90);
}
@media (max-width: 980px){
.heroVideo__content{ padding: 58px 0 44px; }
.heroVideo__overlay{
background:
radial-gradient(900px 650px at 70% 20%, rgba(59,130,246,0.18), transparent 60%),
linear-gradient(180deg, rgba(7,11,20,0.82), rgba(7,11,20,0.45));
}
}
/* oszczędzaj baterię / dane: na reduced motion można ukryć wideo */
@media (prefers-reduced-motion: reduce){
.heroVideo__media{ display:none; }
}.heroVideo__stage{
position:absolute;
inset:0;
overflow:hidden;
}
.heroVideo__media{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transform: scale(1.03);
filter: saturate(1.05) contrast(1.05);
opacity: 0;
transition: opacity 700ms ease;
}
.heroVideo__media.is-active{
opacity: 1;
}.heroVideo__stage{
position:absolute;
inset:0;
overflow:hidden;
}
.heroVideo__media{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transform: scale(1.03);
filter: saturate(1.05) contrast(1.05);
opacity: 0;
transition: opacity 700ms ease;
}
.heroVideo__media.is-active{
opacity: 1;
}
/* Największa nazwa firmy */
.hero-brand{
font-weight: 800;
letter-spacing: 0.02em;
font-size: clamp(30px, 4.2vw, 80px); /* CHAWA największe */
line-height: 1.05;
margin: 0 0 10px 0;
text-transform: uppercase; /* opcjonalnie */
}
/* Duży nagłówek: Projekty instalacji... */
.hero-title{
font-weight: 800;
font-size: clamp(20px, 3.2vw, 40px); /* większe niż było */
line-height: 1.05;
margin: 0 0 14px 0;
}
.mapWrap{
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
background: rgba(255,255,255,.03);
}
.mapWrap iframe{
width: 100%;
height: 420px;
border: 0;
display: block;
}
@media (max-width: 640px){
.mapWrap iframe{ height: 320px; }
}
/* CTA w hero – wyróżnienie */
.heroVideo__cta{
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 18px;
}
/* większe przyciski w hero */
.heroVideo__cta .btn{
padding: 14px 18px;
font-size: 16px;
font-weight: 800;
border-radius: 14px;
transform: translateZ(0);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}
/* GŁÓWNY: Zapytaj o wycenę – „premium” */
.btn--ctaPrimary{
box-shadow: 0 14px 34px rgba(0,0,0,.35);
filter: saturate(1.15);
position: relative;
}
/* lekki „glow” pod spodem */
.btn--ctaPrimary::after{
content:"";
position:absolute;
inset:-6px;
border-radius: 18px;
background: radial-gradient(60% 60% at 50% 50%, rgba(0,140,255,.35), rgba(0,0,0,0));
z-index:-1;
opacity:.9;
transition: opacity .18s ease, transform .18s ease;
transform: scale(.98);
}
/* DODATKOWY: Zobacz portfolio – jako „outline glass” */
.btn--ctaSecondary{
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.06);
backdrop-filter: blur(8px);
box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
/* Hover/focus */
.heroVideo__cta .btn:hover{
transform: translateY(-2px);
}
.btn--ctaPrimary:hover{
box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
.btn--ctaPrimary:hover::after{
opacity: 1;
transform: scale(1.02);
}
.btn--ctaSecondary:hover{
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.35);
}
/* “Pulse” dla głównego CTA (subtelnie) */
@keyframes ctaPulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1px); }
}
.btn--ctaPrimary{
animation: ctaPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
.btn--ctaPrimary{ animation: none; }
}
/* Floating Call Button (FAB) */
.fabCall{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: 999px;
font-weight: 900;
letter-spacing: .01em;
text-decoration: none;
color: #fff;
background: rgba(0, 120, 255, .92);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 14px 34px rgba(0,0,0,.38);
transform: translateZ(0);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.fabCall:hover{
transform: translateY(-2px);
box-shadow: 0 18px 46px rgba(0,0,0,.48);
}
.fabCall:active{
transform: translateY(0);
}
/* tylko na mobile (żeby na desktop nie przeszkadzało) */
@media (min-width: 900px){
.fabCall{ display:none; }
}
/* szacunek do preferencji ruchu */
@media (prefers-reduced-motion: reduce){
.fabCall{ transition:none; }
}
/* Portfolio image: zawsze równa ramka i dopasowanie */
.work__img{
width: 100%;
aspect-ratio: 16 / 9; /* możesz zmienić np. 4/3 */
border-radius: 18px;
overflow: hidden;
background: rgba(15,23,42,0.06);
}
.work__photo{
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* najważniejsze */
object-position: center;
}
/* ===== Portfolio slider ===== */
.slider{
position: relative;
}
.slider__viewport{
overflow: hidden; /* przycinki estetyczne przy scrollu */
border-radius: 18px;
}
.slider__track{
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 360px);
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 6px 48px; /* miejsce na przyciski */
-webkit-overflow-scrolling: touch;
}
.slider__track:focus{
outline: 2px solid rgba(59,130,246,.35);
outline-offset: 4px;
border-radius: 18px;
}
.slider__track::-webkit-scrollbar{ height: 10px; }
.slider__track::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }
.slider__track::-webkit-scrollbar-track{ background: rgba(15,23,42,.06); border-radius: 999px; }
.slider__btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.14);
background: rgba(255,255,255,.92);
backdrop-filter: blur(6px);
cursor: pointer;
display:flex;
align-items:center;
justify-content:center;
font-size: 26px;
line-height: 1;
z-index: 2;
}
.slider__btn--left{ left: 6px; }
.slider__btn--right{ right: 6px; }
.slider__btn:disabled{
opacity: .35;
cursor: not-allowed;
}
/* kropki/paginacja */
.slider__dots{
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
margin-top: 12px;
}
.slider__dot{
width: 8px;
height: 8px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.18);
background: rgba(15,23,42,.10);
cursor: pointer;
}
.slider__dot[aria-current="true"]{
width: 18px;
background: rgba(59,130,246,.35);
border-color: rgba(59,130,246,.55);
}
/* element w sliderze */
.pf-card{
scroll-snap-align: start;
border-radius: 18px;
overflow: hidden;
}
/* jeśli używasz ![]()
+ object-fit w portfolio */
.work__img{
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: rgba(15,23,42,0.06);
}
.work__photo{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.portfolio-slider__cta{
margin-top: 18px;
display: flex;
justify-content: center;
}
/* ===== O nas ===== */
.section--light{
background: linear-gradient(to bottom, #f8fafc, #ffffff);
}
.about{
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 40px;
align-items: start;
}
.about__content h3{
margin-bottom: 12px;
}
.about__content p{
margin-bottom: 14px;
}
.about__list{
list-style: none;
padding: 0;
margin: 20px 0;
}
.about__list li{
margin-bottom: 8px;
}
.about__cta{
margin-top: 16px;
}
.about__visual{
display: flex;
flex-direction: column;
gap: 16px;
}
.about__box{
padding: 20px;
border-radius: 18px;
background: rgba(15,23,42,0.04);
border: 1px solid rgba(15,23,42,0.08);
}
@media (max-width: 900px){
.about{
grid-template-columns: 1fr;
}
}
html { scroll-behavior: smooth; }
#uslugi, #portfolioSliderSection, #o-nas, #mapa { scroll-margin-top: 90px; }
/* ===== Premium About Section ===== */
.aboutSection{
background: linear-gradient(to bottom, #ffffff, #f8fafc);
}
.aboutGrid{
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: start;
}
.aboutLeft h3{
font-size: 26px;
margin-bottom: 16px;
}
.aboutLeft p{
margin-bottom: 14px;
line-height: 1.6;
}
.aboutStats{
display: flex;
gap: 30px;
margin: 30px 0;
flex-wrap: wrap;
}
.aboutStat{
display: flex;
flex-direction: column;
}
.aboutStat__value{
font-size: 28px;
font-weight: 700;
color: #1e293b;
}
.aboutStat__label{
font-size: 14px;
color: #64748b;
}
.aboutRight{
display: flex;
flex-direction: column;
gap: 20px;
}
.aboutCard{
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid rgba(15,23,42,0.08);
box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.aboutCTA{
margin-top: 16px;
}
@media (max-width: 900px){
.aboutGrid{
grid-template-columns: 1fr;
gap: 40px;
}
}
/* Logo w HERO po prawej */
.heroVideo{
position: relative; /* kotwica dla absolute */
overflow: hidden;
}
.heroVideo__logo{
position: absolute;
right: clamp(16px, 4vw, 70px);
top: 40%;
transform: translateY(-50%);
width: min(420px, 38vw);
height: auto;
opacity: 0.92; /* “przezroczystość” */
pointer-events: none; /* nie blokuje klików */
user-select: none;
z-index: 2; /* nad filmem */
filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
}
/* Treść nad logo (żeby tekst zawsze był czytelny) */
.heroVideo__content{
position: relative;
z-index: 3;
}
/* Na mniejszych ekranach schowaj logo, żeby nie zasłaniało tekstu */
@media (max-width: 900px){
.heroVideo__logo{ display:none; }
}
body::before{
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
user-select: none;
background:
radial-gradient(closest-side at 50% 55%, rgba(0,0,0,0.22), transparent 65%),
url("../img/chawa_logo_transparent.png");
background-repeat: no-repeat, no-repeat;
background-position: center 55%, center 55%;
background-size: min(720px, 60vw), min(650px, 55vw);
opacity: 0.07;
}
.topbar, main, section, footer{
position: relative;
z-index: 1;
}
/* Scrollspy: aktywny link */
.nav a.is-active,
.mobile__link.is-active,
.footer__links a.is-active {
text-decoration: underline;
text-underline-offset: 10px;
text-decoration-thickness: 2px;
}
#uslugi, #o-nas {
scroll-margin-top: 110px; /* ustaw pod wysokość headera */
}
html { scroll-behavior: smooth; }
#top { height: 1px; } /* żeby observer miał co obserwować */
#top, #uslugi, #o-nas {
scroll-margin-top: 110px; /* dopasuj do wysokości Twojego headera */
}
html { scroll-behavior: smooth; }
/* Floating call button — tylko mobile */
.fabCall {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9999;
display: none; /* domyślnie ukryty (desktop) */
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 999px;
background: #111;
color: #fff;
text-decoration: none;
font-weight: 800;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.fabCall span {
font-weight: 800;
}
@media (max-width: 860px) {
.fabCall { display: flex; }
}
/* ===== Consent PRO ===== */
.noScroll { overflow: hidden; }
.btnSmall{
border: 0;
border-radius: 999px;
padding: 10px 14px;
font-weight: 800;
cursor: pointer;
line-height: 1;
}
.btnSmall--primary{ background:#111; color:#fff; }
.btnSmall--ghost{ background:rgba(17,17,17,.08); color:#111; }
.cookieBanner{
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 9999;
padding: 14px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(0,0,0,.08);
}
.cookieBanner__inner{
max-width: 1200px;
margin: 0 auto;
display:flex;
gap: 14px;
align-items:center;
justify-content: space-between;
}
.cookieBanner__text{
font-size: 14px;
color: #111;
}
.cookieBanner__actions{
display:flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 860px){
.cookieBanner__inner{ flex-direction: column; align-items: stretch; }
.cookieBanner__actions{ justify-content: space-between; }
.btnSmall{ width: 100%; }
}
.consentModal{
position: fixed;
inset: 0;
z-index: 10000;
display:flex;
align-items:center;
justify-content:center;
padding: 18px;
}
.consentModal__overlay{
position:absolute;
inset:0;
background: rgba(0,0,0,.45);
}
.consentModal__card{
position: relative;
width: min(720px, 100%);
background: #fff;
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,.25);
overflow: hidden;
}
.consentModal__head{
display:flex;
justify-content: space-between;
gap: 14px;
padding: 18px 18px 10px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.consentModal__title{ font-size: 18px; font-weight: 900; color:#111; }
.consentModal__subtitle{ font-size: 13px; color: rgba(0,0,0,.65); margin-top: 4px; }
.iconBtn{
border: 0;
background: rgba(17,17,17,.08);
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
font-weight: 900;
}
.consentModal__body{ padding: 14px 18px; }
.consentRow{
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.consentRow:last-child{ border-bottom: 0; }
.consentRow__name{ font-weight: 900; color:#111; }
.consentRow__desc{ font-size: 13px; color: rgba(0,0,0,.65); margin-top: 4px; max-width: 520px; }
.pill{
font-size: 12px;
font-weight: 900;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
}
.pill--on{ background: rgba(0,0,0,.06); color:#111; }
.consentModal__note{
margin-top: 12px;
font-size: 13px;
color: rgba(0,0,0,.75);
background: rgba(0,0,0,.04);
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
padding: 12px;
}
.consentModal__footer{
display:flex;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-top: 1px solid rgba(0,0,0,.08);
flex-wrap: wrap;
}
.consentModal__footerRight{
display:flex;
gap: 10px;
flex-wrap: wrap;
justify-content:flex-end;
}
/* Switch */
.switch{ position: relative; display:inline-block; width: 52px; height: 32px; }
.switch input{ display:none; }
.switch__track{
position:absolute; inset:0;
background: rgba(0,0,0,.12);
border-radius: 999px;
transition: .2s;
}
.switch__track::after{
content:"";
position:absolute;
width: 26px; height: 26px;
top: 3px; left: 3px;
background:#fff;
border-radius: 50%;
box-shadow: 0 8px 18px rgba(0,0,0,.18);
transition: .2s;
}
.switch input:checked + .switch__track{
background: #111;
}
.switch input:checked + .switch__track::after{
transform: translateX(20px);
}
.cookieBanner {
pointer-events: auto;
}
.cookieBanner__inner,
.cookieBanner__actions,
.cookieBanner button,
.cookieBanner a {
pointer-events: auto;
}
.consentModal,
.consentModal__card,
.consentModal__overlay,
.consentModal button {
pointer-events: auto;
}
.cookieBanner {
z-index: 99999;
}
.consentModal {
z-index: 100000;
}
#aboutText1,
#aboutText2 {
text-align: justify;
}
.portfolioCard {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.portfolioCard__image {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f3f4f6;
}
.portfolioCard__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.portfolioCard__body {
padding: 18px;
}
.portfolioCard__body h3 {
margin: 0 0 8px 0;
}
.portfolioCard__body p {
margin: 0 0 10px 0;
}
/* =========================
SERVICES — COMPACT / ABOUT STYLE
========================= */
#servicesGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
padding: 10px 0 4px;
}
.serviceMiniCard {
position: relative;
display: flex;
flex-direction: column;
padding: 20px 20px 18px;
border-radius: 24px;
background: rgba(255,255,255,0.76);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
}
.serviceMiniCard:hover {
transform: translateY(-4px);
border-color: rgba(37, 99, 235, 0.14);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}
.serviceMiniCard__top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.serviceMiniCard__iconWrap {
flex: 0 0 auto;
width: 54px;
height: 54px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.92));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.serviceMiniCard:hover .serviceMiniCard__iconWrap {
transform: translateY(-2px) rotate(-3deg);
box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}
.serviceMiniCard__img {
width: 24px;
height: 24px;
object-fit: contain;
display: block;
}
.serviceMiniCard__emoji {
font-size: 24px;
line-height: 1;
}
.serviceMiniCard__head {
min-width: 0;
}
.serviceMiniCard__title {
margin: 0;
font-size: 1.18rem;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f172a;
}
.serviceMiniCard__text {
margin: 0 0 14px;
color: #64748b;
line-height: 1.65;
font-size: 0.96rem;
}
.serviceMiniCard__bottom {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.serviceMiniCard__link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--primary);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.serviceMiniCard__link::after {
content: "";
width: 18px;
height: 2px;
background: currentColor;
transition: width 0.25s ease, transform 0.25s ease;
}
.serviceMiniCard:hover .serviceMiniCard__link::after {
width: 28px;
transform: translateX(2px);
}
/* wejście kart */
.serviceMiniReveal {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.55s ease,
transform 0.55s ease;
}
.serviceMiniReveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 980px) {
#servicesGrid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.serviceMiniCard {
padding: 18px 18px 16px;
border-radius: 20px;
}
.serviceMiniCard__iconWrap {
width: 48px;
height: 48px;
border-radius: 14px;
}
.serviceMiniCard__title {
font-size: 1.08rem;
}
.serviceMiniCard__text {
font-size: 0.93rem;
}
}
/* =========================
O NAS — PREMIUM
========================= */
.aboutSection--premium {
position: relative;
overflow: hidden;
}
.aboutPremium {
position: relative;
padding: 34px;
border-radius: 32px;
background:
radial-gradient(circle at top left, rgba(99, 102, 241, 0.10), transparent 34%),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.10), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 24px 60px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255,255,255,0.7);
}
.aboutPremium__glow {
position: absolute;
border-radius: 999px;
filter: blur(40px);
pointer-events: none;
opacity: 0.55;
}
.aboutPremium__glow--1 {
top: -40px;
left: -20px;
width: 180px;
height: 180px;
background: rgba(59, 130, 246, 0.14);
}
.aboutPremium__glow--2 {
right: 10%;
bottom: -50px;
width: 220px;
height: 220px;
background: rgba(99, 102, 241, 0.14);
}
.aboutPremium__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
gap: 34px;
align-items: start;
}
.aboutPremium__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(37, 99, 235, 0.14);
color: #0f172a;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.aboutPremium__headline {
margin: 18px 0 14px;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: #0f172a;
max-width: 760px;
}
.aboutPremium__lead {
margin: 0 0 22px;
max-width: 700px;
font-size: 1.08rem;
line-height: 1.75;
color: rgba(15, 23, 42, 0.78);
}
.aboutPremium__text {
display: grid;
gap: 16px;
max-width: 760px;
}
.aboutPremium__text p {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: #1e293b;
}
.aboutStats--premium {
display: grid;
grid-template-columns: repeat(2, minmax(140px, 1fr));
gap: 14px;
margin-top: 28px;
max-width: 620px;
}
.aboutStats--premium .aboutStat {
padding: 18px 18px 16px;
border-radius: 22px;
background: rgba(255,255,255,0.74);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.aboutStats--premium .aboutStat strong {
display: block;
margin-bottom: 6px;
font-size: 1.4rem;
line-height: 1;
color: #0f172a;
}
.aboutStats--premium .aboutStat span {
display: block;
color: rgba(15, 23, 42, 0.72);
font-size: 0.95rem;
line-height: 1.4;
}
.aboutCTA--premium {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.aboutPremium__ctaBtn,
.aboutPremium__ghostBtn {
min-height: 52px;
padding-left: 22px;
padding-right: 22px;
border-radius: 16px;
}
.aboutPremium__right {
position: relative;
}
.aboutPremium__panel {
position: sticky;
top: 110px;
display: grid;
gap: 16px;
padding: 22px;
border-radius: 28px;
background: rgba(255,255,255,0.76);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 22px 50px rgba(15, 23, 42, 0.09);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.aboutPremium__panelTop {
display: flex;
align-items: center;
gap: 12px;
}
.aboutPremium__panelBadge {
flex: 0 0 auto;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1e3a8a;
}
.aboutPremium__panelLine {
display: block;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(37,99,235,0.32), rgba(15,23,42,0.04));
}
.aboutCard--premium {
padding: 18px 18px 16px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.aboutCard--premium strong {
display: block;
margin-bottom: 8px;
font-size: 1.02rem;
color: #0f172a;
}
.aboutCard--premium p {
margin: 0;
line-height: 1.7;
color: rgba(15, 23, 42, 0.72);
}
.aboutCard--accent {
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(239,246,255,0.95));
border-color: rgba(37, 99, 235, 0.12);
}
.aboutPremium__quote {
padding: 18px;
border-radius: 22px;
background: #0f172a;
color: #fff;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}
.aboutPremium__quoteLabel {
display: inline-block;
margin-bottom: 10px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.aboutPremium__quote p {
margin: 0;
line-height: 1.7;
color: rgba(255,255,255,0.95);
}
@media (max-width: 1100px) {
.aboutPremium__grid {
grid-template-columns: 1fr;
}
.aboutPremium__panel {
position: relative;
top: 0;
}
}
@media (max-width: 768px) {
.aboutPremium {
padding: 22px;
border-radius: 24px;
}
.aboutPremium__headline {
margin-top: 16px;
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
.aboutPremium__lead,
.aboutPremium__text p {
line-height: 1.75;
}
.aboutStats--premium {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.aboutStats--premium {
grid-template-columns: 1fr;
}
.aboutCTA--premium {
flex-direction: column;
}
.aboutPremium__ctaBtn,
.aboutPremium__ghostBtn {
width: 100%;
justify-content: center;
}
}
:root{
--bg: #f7f8fb;
--surface: #ffffff;
--surface2: #f1f4f9;
--text: #0f172a;
--muted: #475569;
--line: #e6eaf2;
--primary: #2563eb;
--primary2: #1d4ed8;
--shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
--shadow2: 0 10px 28px rgba(15, 23, 42, 0.07);
--radius: 18px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background:
radial-gradient(1100px 700px at 90% 0%, rgba(37,99,235,0.10), transparent 55%),
radial-gradient(900px 600px at 10% 10%, rgba(37,99,235,0.08), transparent 55%),
var(--bg);
}
a{ color: inherit; text-decoration: none; }
a:hover{ opacity: 0.92; }
.container{
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
}
.small{ font-size: 0.95rem; }
.muted{ color: var(--muted); }
.badge{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255,255,255,0.65);
font-size: 0.92rem;
}
/* Topbar */
.topbar{
border-bottom: 1px solid var(--line);
background: rgba(255,255,255,0.65);
backdrop-filter: blur(10px);
}
.topbar__inner{
display:flex; align-items:center; justify-content:space-between;
padding: 10px 0;
gap: 14px;
flex-wrap: wrap;
}
.topbar__left, .topbar__right{
display:flex; align-items:center; gap: 12px;
flex-wrap: wrap;
}
.toplink{ color: var(--muted); font-size: 0.96rem; }
/* Header */
.header {
position: sticky; /* Zamiast fixed */
top: 0;
z-index: 1000;
width: 100%;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.header__inner{
display:flex; align-items:center; justify-content:space-between;
padding: 14px 0;
gap: 16px;
}
.brand{ display:flex; align-items:center; gap: 12px; }
.brand{
display: flex;
align-items: center;
gap: 12px;
}
.brand__mark{
height: clamp(30px, 3.2vw, 44px);
width: auto;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.logo-bg{ fill: rgba(37,99,235,0.08); stroke: rgba(37,99,235,0.22); stroke-width: 1; }
.logo-stroke{ stroke: rgba(15,23,42,0.85); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand__name{ font-weight: 800; letter-spacing: 0.4px; }
.brand__sub{ font-size: 0.92rem; color: var(--muted); margin-top: 2px; }
.nav{
display:flex; align-items:center; gap: 18px;
}
.nav a{
color: var(--muted);
font-weight: 600;
font-size: 0.98rem;
}
/* aktywna pozycja w menu */
.nav a[aria-current="page"]{
color: var(--text);
opacity: 1;
position: relative;
}
/* podkreślenie / pill */
.nav a[aria-current="page"]::after{
content:"";
position:absolute;
left: 0;
right: 0;
bottom: -10px;
height: 3px;
border-radius: 999px;
background: rgba(37,99,235,0.75);
}
/* mobile */
.mobile__link[aria-current="page"]{
border-color: rgba(37,99,235,0.35);
background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(29,78,216,0.08));
color: var(--text);
}
.nav a:hover{ color: var(--text); }
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap: 8px;
padding: 11px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.75);
color: var(--text);
font-weight: 700;
box-shadow: none;
}
.btn--primary{
border-color: rgba(37,99,235,0.35);
background: linear-gradient(180deg, rgba(37,99,235,0.14), rgba(29,78,216,0.10));
color: var(--text);
}
.btn--full{ width: 100%; padding: 12px 14px; }
.hamburger{
display:none;
width: 44px; height: 44px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.75);
cursor: pointer;
}
.hamburger span{
display:block;
width: 18px; height: 2px;
margin: 5px auto;
background: rgba(15,23,42,0.75);
border-radius: 10px;
}
.mobile{
border-top: 1px solid var(--line);
background: rgba(255,255,255,0.90);
}
.mobile__inner{
padding: 14px 0;
display:flex;
flex-direction: column;
gap: 10px;
}
.mobile__link{
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.75);
color: var(--muted);
}
/* Hero + sections */
.hero{ padding: 56px 0 18px; }
.hero__grid{
display:grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 26px;
align-items: center;
}
h1{
font-size: clamp(2.0rem, 3.2vw, 3.0rem);
line-height: 1.08;
margin: 0 0 14px 0;
letter-spacing: -0.02em;
}
.lead{
color: var(--muted);
font-size: 1.08rem;
line-height: 1.65;
margin: 0 0 18px;
}
.hero__cta{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.card{
border-radius: 22px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.85);
box-shadow: var(--shadow);
padding: 16px;
}
.card__title{ font-weight: 800; margin-bottom: 10px; }
.divider{ height: 1px; background: var(--line); margin: 14px 0; }
.mini__row{
display:flex; align-items:center; justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px dashed rgba(15,23,42,0.12);
}
.mini__row:last-child{ border-bottom: 0; }
.mini__row span{ color: var(--muted); }
.section{ padding: 52px 0; }
.section--alt{
background: rgba(255,255,255,0.55);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.section__head{ margin-bottom: 16px; }
h2{ margin: 0 0 8px; font-size: 1.65rem; letter-spacing: -0.02em; }
h3{ margin: 0 0 8px; letter-spacing: -0.01em; }
.grid{ display:grid; gap: 14px; }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.box{
border-radius: var(--radius);
border: 1px solid var(--line);
background: rgba(255,255,255,0.85);
padding: 18px;
box-shadow: var(--shadow2);
}
.list{
margin: 0;
padding-left: 18px;
color: var(--muted);
line-height: 1.7;
}
.kicker{
color: rgba(37,99,235,0.95);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.85rem;
}
.breadcrumbs{
font-size: 0.95rem;
color: var(--muted);
margin: 14px 0 0;
}
.work{
overflow:hidden;
padding: 0;
}
.work__img{
height: 160px;
background:
linear-gradient(135deg, rgba(37,99,235,0.14), transparent 60%),
linear-gradient(180deg, rgba(15,23,42,0.06), rgba(15,23,42,0.02));
}
.work__body{ padding: 16px 18px 18px; }
.contact{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.form{
padding: 18px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: rgba(255,255,255,0.88);
box-shadow: var(--shadow2);
}
.form label{
display:block;
font-weight: 700;
font-size: 0.95rem;
color: rgba(15,23,42,0.92);
margin-bottom: 12px;
}
.form__row{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
input, select, textarea{
width: 100%;
margin-top: 8px;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,0.12);
background: rgba(255,255,255,0.98);
color: var(--text);
outline: none;
}
input::placeholder, textarea::placeholder{ color: rgba(71,85,105,0.65); }
input:focus, select:focus, textarea:focus{
border-color: rgba(37,99,235,0.55);
box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.checkbox{
display:flex;
gap: 10px;
align-items:flex-start;
font-weight: 600 !important;
color: var(--muted);
}
.checkbox input{ width: 18px; height: 18px; margin-top: 3px; }
.footer{
padding: 26px 0;
}
.footer__inner{
display:grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 14px;
align-items:center;
border-top: 1px solid var(--line);
padding-top: 18px;
}
.footer__name{ font-weight: 900; }
.footer__links{ display:flex; gap: 12px; justify-content:center; flex-wrap: wrap; }
.footer__links a{ color: var(--muted); }
@media (max-width: 980px){
.hero__grid{ grid-template-columns: 1fr; }
.grid--3{ grid-template-columns: 1fr; }
.grid--2{ grid-template-columns: 1fr; }
.contact{ grid-template-columns: 1fr; }
.footer__inner{ grid-template-columns: 1fr; text-align:center; }
.footer__links{ justify-content:center; }
.nav{ display:none; }
.hamburger{ display:inline-flex; align-items:center; justify-content:center; }
}
/* ==== GRAND-LIKE HERO (jasny premium, fullscreen, kafle) ==== */
/* ==== GRAND-LIKE HERO (jasny premium, fullscreen, kafle) ==== */
.hero--grand { padding: 0; }
/* jasne tło, a nie ciemne */
.heroSlider{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
background:
radial-gradient(1100px 700px at 90% 0%, rgba(37,99,235,0.18), transparent 55%),
radial-gradient(900px 600px at 10% 10%, rgba(37,99,235,0.12), transparent 55%),
var(--bg);
}
.heroSlides{ position: relative; height: 100%; }
/* jaśniejszy overlay + użycie --heroBg zamiast --bg */
.heroSlide{
position: absolute;
inset: 0;
display: grid;
align-items: center;
opacity: 0;
pointer-events: none;
transform: scale(1.01);
transition: opacity .45s ease, transform .6s ease;
background-image:
linear-gradient(90deg, rgba(247,248,251,.90), rgba(247,248,251,.62)),
var(--heroBg);
background-size: cover;
background-position: center;
}
.heroSlide.is-active{
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.heroSlide__inner{
padding: 72px 0 140px;
color: var(--text);
}
.heroSlide__inner .kicker{ color: rgba(37,99,235,0.95); }
.heroSlide__inner h1{ color: var(--text); max-width: 18ch; }
.heroSlide__inner .lead{ color: var(--muted); max-width: 72ch; }
.heroSlide__cta{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top: 18px;
}
/* dolne kafle jak na grand200 — ale w jasnym stylu */
.heroNav{
position: absolute;
left: 0; right: 0;
bottom: 18px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.heroTab{
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,0.78);
backdrop-filter: blur(12px);
padding: 14px 14px;
border-radius: 16px;
color: var(--text);
text-align: left;
cursor: pointer;
box-shadow: var(--shadow2);
transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.heroTab:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.86); }
.heroTab.is-active{ border-color: rgba(37,99,235,.38); background: rgba(255,255,255,0.92); }
.heroTab__k{
display:block;
font-size:12px;
letter-spacing:.08em;
text-transform: uppercase;
color: rgba(71,85,105,0.9);
}
.heroTab__t{
display:block;
font-size:16px;
font-weight:900;
margin-top:4px;
}
/* strzałki — jasne */
.heroArrow{
position:absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,0.80);
color: var(--text);
font-size: 26px;
display:grid;
place-items:center;
cursor:pointer;
box-shadow: var(--shadow2);
backdrop-filter: blur(12px);
}
.heroArrow--prev{ left: 14px; }
.heroArrow--next{ right: 14px; }
@media (max-width: 980px){
.heroSlide__inner{ padding: 56px 0 170px; }
.heroNav{ grid-template-columns: 1fr 1fr; }
}
/* ==== HERO MOTION (Hitachi-like, jasny, animowane tło) ==== */
.hero--motion { padding: 0; }
.heroMotion{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
background:
radial-gradient(1100px 700px at 90% 0%, rgba(37,99,235,0.18), transparent 55%),
radial-gradient(900px 600px at 10% 10%, rgba(37,99,235,0.12), transparent 55%),
var(--bg);
border-bottom: 1px solid var(--line);
}
.heroMotion__canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
opacity: 0.9;
}
.heroMotion__content{
position: relative;
padding: 72px 0 64px;
z-index: 1;
}
.heroMotion__cta{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.heroMotion__chips{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top: 18px;
}
.chip{
display:inline-flex;
align-items:center;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,0.10);
background: rgba(255,255,255,0.80);
box-shadow: var(--shadow2);
font-weight: 800;
color: rgba(15,23,42,0.92);
}
.chip:hover{
background: rgba(255,255,255,0.92);
}
@media (max-width: 980px){
.heroMotion__content{ padding: 56px 0 44px; }
}
/* ==== HERO BLUEPRINT ==== */
.heroBlueprint{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
opacity:0.35;
}
.heroBlueprint__svg{
width:100%;
height:100%;
}
.bp-outline{
fill:none;
stroke: rgba(15,23,42,0.15);
stroke-width:2;
}
.bp-floor{
stroke: rgba(15,23,42,0.12);
stroke-width:1.5;
}
.bp-vertical{
stroke: rgba(37,99,235,0.35);
stroke-width:2;
stroke-dasharray: 8 8;
animation: dashMove 4s linear infinite;
}
.bp-node{
fill: rgba(37,99,235,0.7);
animation: pulseNode 2.5s ease-in-out infinite;
}
@keyframes dashMove{
to { stroke-dashoffset: -32; }
}
@keyframes pulseNode{
0%,100% { r:4; opacity:0.7; }
50% { r:7; opacity:1; }
}
/* ==== HERO CAD (ciemny tech + neonowe instalacje) ==== */
.hero--cad{ padding: 0; }
.heroCad{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
border-bottom: 1px solid rgba(15,23,42,0.10);
background:
radial-gradient(1100px 700px at 90% 0%, rgba(37,99,235,0.25), transparent 55%),
radial-gradient(900px 600px at 15% 20%, rgba(16,185,129,0.18), transparent 55%),
radial-gradient(900px 600px at 60% 80%, rgba(244,63,94,0.10), transparent 55%),
#070b14;
}
.heroCad__canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
opacity: 0.95;
}
.heroCad__content{
position: relative;
z-index: 2;
padding: 76px 0 60px;
color: rgba(255,255,255,0.92);
}
.kicker--onDark{ color: rgba(147,197,253,0.95); }
.heroCad__h1{
color: #fff;
text-shadow: 0 18px 55px rgba(0,0,0,0.45);
}
.lead--onDark{
color: rgba(226,232,240,0.85);
text-shadow: 0 14px 40px rgba(0,0,0,0.40);
}
.muted--onDark{ color: rgba(203,213,225,0.78); }
.heroCad__cta{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.btn--onDark{
border-color: rgba(148,163,184,0.22);
background: rgba(15,23,42,0.35);
color: rgba(255,255,255,0.92);
}
.btn--onDark:hover{ opacity: 0.96; }
.btn--primary.btn--onDark{
border-color: rgba(59,130,246,0.42);
background: linear-gradient(180deg, rgba(37,99,235,0.35), rgba(29,78,216,0.20));
color: #fff;
}
.heroCad__chips{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top: 18px;
}
.chip--onDark{
border: 1px solid rgba(148,163,184,0.18);
background: rgba(15,23,42,0.35);
color: rgba(255,255,255,0.90);
}
.chip--onDark:hover{
background: rgba(15,23,42,0.50);
}
/* lekki „screen” pod czytelność tekstu */
.heroCad::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg, rgba(7,11,20,0.78), rgba(7,11,20,0.30));
z-index: 1;
}
@media (max-width: 980px){
.heroCad__content{ padding: 58px 0 44px; }
.heroCad::after{
background: linear-gradient(180deg, rgba(7,11,20,0.78), rgba(7,11,20,0.42));
}
}
/* ===== HERO: CAD TŁO (1 obraz) ===== */
.cadHero{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
background: #070b14;
}
.cadHero__bg{
position: absolute;
inset: -8%;
background-image: url("../img/hero-cad-mosaic.png");
background-size: cover;
background-position: center;
transform: scale(1.10);
filter: saturate(1.25) contrast(1.10);
opacity: 0.95;
animation: cadPan 18s ease-in-out infinite;
}
/* przyciemnienie pod tekst */
.cadHero::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg, rgba(7,11,20,0.82), rgba(7,11,20,0.36));
z-index: 1;
}
.cadHero__content{
position: relative;
z-index: 2;
padding: 78px 0 60px;
color: rgba(255,255,255,0.92);
}
/* “życie” – delikatny ruch */
@keyframes cadPan{
0% { transform: translate3d(-1%, -1%, 0) scale(1.12); }
50% { transform: translate3d( 1.3%, 0.9%, 0) scale(1.18); }
100% { transform: translate3d(-1%, -1%, 0) scale(1.12); }
}
/* mobile */
@media (max-width: 980px){
.cadHero__bg{ inset: -12%; }
.cadHero__content{ padding: 58px 0 44px; }
.cadHero::after{
background: linear-gradient(180deg, rgba(7,11,20,0.82), rgba(7,11,20,0.50));
}
}
/* accessibility */
@media (prefers-reduced-motion: reduce){
.cadHero__bg{ animation: none !important; }
}
/* ==== HERO VIDEO (Hitachi-like) ==== */
.hero--video { padding: 0; }
.heroVideo{
position: relative;
min-height: calc(100vh - 64px);
overflow: hidden;
background: #070b14;
border-bottom: 1px solid rgba(148,163,184,0.14);
}
/* wideo w tle */
.heroVideo__media{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.03);
filter: saturate(1.05) contrast(1.05);
}
/* overlay pod czytelność + lekki “tech glow” */
.heroVideo__overlay{
position: absolute;
inset: 0;
background:
radial-gradient(900px 650px at 70% 20%, rgba(59,130,246,0.20), transparent 60%),
linear-gradient(90deg, rgba(7,11,20,0.82), rgba(7,11,20,0.28));
}
.heroVideo__content{
position: relative;
z-index: 2;
padding: 78px 0 60px;
color: rgba(255,255,255,0.92);
}
.kicker--onDark{ color: rgba(147,197,253,0.95); }
.lead--onDark{ color: rgba(226,232,240,0.85); text-shadow: 0 14px 40px rgba(0,0,0,0.40); }
.muted--onDark{ color: rgba(203,213,225,0.78); }
.heroVideo__h1{
color: #fff;
text-shadow: 0 18px 55px rgba(0,0,0,0.45);
}
.heroVideo__cta{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.heroVideo__chips{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top: 18px;
}
.btn--onDark{
border-color: rgba(148,163,184,0.22);
background: rgba(15,23,42,0.35);
color: rgba(255,255,255,0.92);
}
.btn--primary.btn--onDark{
border-color: rgba(59,130,246,0.42);
background: linear-gradient(180deg, rgba(37,99,235,0.35), rgba(29,78,216,0.20));
color:#fff;
}
.chip--onDark{
border: 1px solid rgba(148,163,184,0.18);
background: rgba(15,23,42,0.35);
color: rgba(255,255,255,0.90);
}
@media (max-width: 980px){
.heroVideo__content{ padding: 58px 0 44px; }
.heroVideo__overlay{
background:
radial-gradient(900px 650px at 70% 20%, rgba(59,130,246,0.18), transparent 60%),
linear-gradient(180deg, rgba(7,11,20,0.82), rgba(7,11,20,0.45));
}
}
/* oszczędzaj baterię / dane: na reduced motion można ukryć wideo */
@media (prefers-reduced-motion: reduce){
.heroVideo__media{ display:none; }
}.heroVideo__stage{
position:absolute;
inset:0;
overflow:hidden;
}
.heroVideo__media{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transform: scale(1.03);
filter: saturate(1.05) contrast(1.05);
opacity: 0;
transition: opacity 700ms ease;
}
.heroVideo__media.is-active{
opacity: 1;
}.heroVideo__stage{
position:absolute;
inset:0;
overflow:hidden;
}
.heroVideo__media{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transform: scale(1.03);
filter: saturate(1.05) contrast(1.05);
opacity: 0;
transition: opacity 700ms ease;
}
.heroVideo__media.is-active{
opacity: 1;
}
/* Największa nazwa firmy */
.hero-brand{
font-weight: 800;
letter-spacing: 0.02em;
font-size: clamp(30px, 4.2vw, 80px); /* CHAWA największe */
line-height: 1.05;
margin: 0 0 10px 0;
text-transform: uppercase; /* opcjonalnie */
}
/* Duży nagłówek: Projekty instalacji... */
.hero-title{
font-weight: 800;
font-size: clamp(20px, 3.2vw, 40px); /* większe niż było */
line-height: 1.05;
margin: 0 0 14px 0;
}
.mapWrap{
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
background: rgba(255,255,255,.03);
}
.mapWrap iframe{
width: 100%;
height: 420px;
border: 0;
display: block;
}
@media (max-width: 640px){
.mapWrap iframe{ height: 320px; }
}
/* CTA w hero – wyróżnienie */
.heroVideo__cta{
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 18px;
}
/* większe przyciski w hero */
.heroVideo__cta .btn{
padding: 14px 18px;
font-size: 16px;
font-weight: 800;
border-radius: 14px;
transform: translateZ(0);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}
/* GŁÓWNY: Zapytaj o wycenę – „premium” */
.btn--ctaPrimary{
box-shadow: 0 14px 34px rgba(0,0,0,.35);
filter: saturate(1.15);
position: relative;
}
/* lekki „glow” pod spodem */
.btn--ctaPrimary::after{
content:"";
position:absolute;
inset:-6px;
border-radius: 18px;
background: radial-gradient(60% 60% at 50% 50%, rgba(0,140,255,.35), rgba(0,0,0,0));
z-index:-1;
opacity:.9;
transition: opacity .18s ease, transform .18s ease;
transform: scale(.98);
}
/* DODATKOWY: Zobacz portfolio – jako „outline glass” */
.btn--ctaSecondary{
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.06);
backdrop-filter: blur(8px);
box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
/* Hover/focus */
.heroVideo__cta .btn:hover{
transform: translateY(-2px);
}
.btn--ctaPrimary:hover{
box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
.btn--ctaPrimary:hover::after{
opacity: 1;
transform: scale(1.02);
}
.btn--ctaSecondary:hover{
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.35);
}
/* “Pulse” dla głównego CTA (subtelnie) */
@keyframes ctaPulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1px); }
}
.btn--ctaPrimary{
animation: ctaPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
.btn--ctaPrimary{ animation: none; }
}
/* Floating Call Button (FAB) */
.fabCall{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-radius: 999px;
font-weight: 900;
letter-spacing: .01em;
text-decoration: none;
color: #fff;
background: rgba(0, 120, 255, .92);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 14px 34px rgba(0,0,0,.38);
transform: translateZ(0);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.fabCall:hover{
transform: translateY(-2px);
box-shadow: 0 18px 46px rgba(0,0,0,.48);
}
.fabCall:active{
transform: translateY(0);
}
/* tylko na mobile (żeby na desktop nie przeszkadzało) */
@media (min-width: 900px){
.fabCall{ display:none; }
}
/* szacunek do preferencji ruchu */
@media (prefers-reduced-motion: reduce){
.fabCall{ transition:none; }
}
/* Portfolio image: zawsze równa ramka i dopasowanie */
.work__img{
width: 100%;
aspect-ratio: 16 / 9; /* możesz zmienić np. 4/3 */
border-radius: 18px;
overflow: hidden;
background: rgba(15,23,42,0.06);
}
.work__photo{
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* najważniejsze */
object-position: center;
}
/* ===== Portfolio slider ===== */
.slider{
position: relative;
}
.slider__viewport{
overflow: hidden; /* przycinki estetyczne przy scrollu */
border-radius: 18px;
}
.slider__track{
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 360px);
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 6px 48px; /* miejsce na przyciski */
-webkit-overflow-scrolling: touch;
}
.slider__track:focus{
outline: 2px solid rgba(59,130,246,.35);
outline-offset: 4px;
border-radius: 18px;
}
.slider__track::-webkit-scrollbar{ height: 10px; }
.slider__track::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }
.slider__track::-webkit-scrollbar-track{ background: rgba(15,23,42,.06); border-radius: 999px; }
.slider__btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.14);
background: rgba(255,255,255,.92);
backdrop-filter: blur(6px);
cursor: pointer;
display:flex;
align-items:center;
justify-content:center;
font-size: 26px;
line-height: 1;
z-index: 2;
}
.slider__btn--left{ left: 6px; }
.slider__btn--right{ right: 6px; }
.slider__btn:disabled{
opacity: .35;
cursor: not-allowed;
}
/* kropki/paginacja */
.slider__dots{
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
margin-top: 12px;
}
.slider__dot{
width: 8px;
height: 8px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.18);
background: rgba(15,23,42,.10);
cursor: pointer;
}
.slider__dot[aria-current="true"]{
width: 18px;
background: rgba(59,130,246,.35);
border-color: rgba(59,130,246,.55);
}
/* element w sliderze */
.pf-card{
scroll-snap-align: start;
border-radius: 18px;
overflow: hidden;
}
/* jeśli używasz ![]()
+ object-fit w portfolio */
.work__img{
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: rgba(15,23,42,0.06);
}
.work__photo{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.portfolio-slider__cta{
margin-top: 18px;
display: flex;
justify-content: center;
}
/* ===== O nas ===== */
.section--light{
background: linear-gradient(to bottom, #f8fafc, #ffffff);
}
.about{
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 40px;
align-items: start;
}
.about__content h3{
margin-bottom: 12px;
}
.about__content p{
margin-bottom: 14px;
}
.about__list{
list-style: none;
padding: 0;
margin: 20px 0;
}
.about__list li{
margin-bottom: 8px;
}
.about__cta{
margin-top: 16px;
}
.about__visual{
display: flex;
flex-direction: column;
gap: 16px;
}
.about__box{
padding: 20px;
border-radius: 18px;
background: rgba(15,23,42,0.04);
border: 1px solid rgba(15,23,42,0.08);
}
@media (max-width: 900px){
.about{
grid-template-columns: 1fr;
}
}
html { scroll-behavior: smooth; }
#uslugi, #portfolioSliderSection, #o-nas, #mapa { scroll-margin-top: 90px; }
/* ===== Premium About Section ===== */
.aboutSection{
background: linear-gradient(to bottom, #ffffff, #f8fafc);
}
.aboutGrid{
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: start;
}
.aboutLeft h3{
font-size: 26px;
margin-bottom: 16px;
}
.aboutLeft p{
margin-bottom: 14px;
line-height: 1.6;
}
.aboutStats{
display: flex;
gap: 30px;
margin: 30px 0;
flex-wrap: wrap;
}
.aboutStat{
display: flex;
flex-direction: column;
}
.aboutStat__value{
font-size: 28px;
font-weight: 700;
color: #1e293b;
}
.aboutStat__label{
font-size: 14px;
color: #64748b;
}
.aboutRight{
display: flex;
flex-direction: column;
gap: 20px;
}
.aboutCard{
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid rgba(15,23,42,0.08);
box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.aboutCTA{
margin-top: 16px;
}
@media (max-width: 900px){
.aboutGrid{
grid-template-columns: 1fr;
gap: 40px;
}
}
/* Logo w HERO po prawej */
.heroVideo{
position: relative; /* kotwica dla absolute */
overflow: hidden;
}
.heroVideo__logo{
position: absolute;
right: clamp(16px, 4vw, 70px);
top: 40%;
transform: translateY(-50%);
width: min(420px, 38vw);
height: auto;
opacity: 0.92; /* “przezroczystość” */
pointer-events: none; /* nie blokuje klików */
user-select: none;
z-index: 2; /* nad filmem */
filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
}
/* Treść nad logo (żeby tekst zawsze był czytelny) */
.heroVideo__content{
position: relative;
z-index: 3;
}
/* Na mniejszych ekranach schowaj logo, żeby nie zasłaniało tekstu */
@media (max-width: 900px){
.heroVideo__logo{ display:none; }
}
body::before{
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
user-select: none;
background:
radial-gradient(closest-side at 50% 55%, rgba(0,0,0,0.22), transparent 65%),
url("../img/chawa_logo_transparent.png");
background-repeat: no-repeat, no-repeat;
background-position: center 55%, center 55%;
background-size: min(720px, 60vw), min(650px, 55vw);
opacity: 0.07;
}
.topbar, main, section, footer{
position: relative;
z-index: 1;
}
/* Scrollspy: aktywny link */
.nav a.is-active,
.mobile__link.is-active,
.footer__links a.is-active {
text-decoration: underline;
text-underline-offset: 10px;
text-decoration-thickness: 2px;
}
#uslugi, #o-nas {
scroll-margin-top: 110px; /* ustaw pod wysokość headera */
}
html { scroll-behavior: smooth; }
#top { height: 1px; } /* żeby observer miał co obserwować */
#top, #uslugi, #o-nas {
scroll-margin-top: 110px; /* dopasuj do wysokości Twojego headera */
}
html { scroll-behavior: smooth; }
/* Floating call button — tylko mobile */
.fabCall {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9999;
display: none; /* domyślnie ukryty (desktop) */
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 999px;
background: #111;
color: #fff;
text-decoration: none;
font-weight: 800;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.fabCall span {
font-weight: 800;
}
@media (max-width: 860px) {
.fabCall { display: flex; }
}
/* ===== Consent PRO ===== */
.noScroll { overflow: hidden; }
.btnSmall{
border: 0;
border-radius: 999px;
padding: 10px 14px;
font-weight: 800;
cursor: pointer;
line-height: 1;
}
.btnSmall--primary{ background:#111; color:#fff; }
.btnSmall--ghost{ background:rgba(17,17,17,.08); color:#111; }
.cookieBanner{
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 9999;
padding: 14px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(0,0,0,.08);
}
.cookieBanner__inner{
max-width: 1200px;
margin: 0 auto;
display:flex;
gap: 14px;
align-items:center;
justify-content: space-between;
}
.cookieBanner__text{
font-size: 14px;
color: #111;
}
.cookieBanner__actions{
display:flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 860px){
.cookieBanner__inner{ flex-direction: column; align-items: stretch; }
.cookieBanner__actions{ justify-content: space-between; }
.btnSmall{ width: 100%; }
}
.consentModal{
position: fixed;
inset: 0;
z-index: 10000;
display:flex;
align-items:center;
justify-content:center;
padding: 18px;
}
.consentModal__overlay{
position:absolute;
inset:0;
background: rgba(0,0,0,.45);
}
.consentModal__card{
position: relative;
width: min(720px, 100%);
background: #fff;
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,.25);
overflow: hidden;
}
.consentModal__head{
display:flex;
justify-content: space-between;
gap: 14px;
padding: 18px 18px 10px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.consentModal__title{ font-size: 18px; font-weight: 900; color:#111; }
.consentModal__subtitle{ font-size: 13px; color: rgba(0,0,0,.65); margin-top: 4px; }
.iconBtn{
border: 0;
background: rgba(17,17,17,.08);
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
font-weight: 900;
}
.consentModal__body{ padding: 14px 18px; }
.consentRow{
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.consentRow:last-child{ border-bottom: 0; }
.consentRow__name{ font-weight: 900; color:#111; }
.consentRow__desc{ font-size: 13px; color: rgba(0,0,0,.65); margin-top: 4px; max-width: 520px; }
.pill{
font-size: 12px;
font-weight: 900;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
}
.pill--on{ background: rgba(0,0,0,.06); color:#111; }
.consentModal__note{
margin-top: 12px;
font-size: 13px;
color: rgba(0,0,0,.75);
background: rgba(0,0,0,.04);
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
padding: 12px;
}
.consentModal__footer{
display:flex;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-top: 1px solid rgba(0,0,0,.08);
flex-wrap: wrap;
}
.consentModal__footerRight{
display:flex;
gap: 10px;
flex-wrap: wrap;
justify-content:flex-end;
}
/* Switch */
.switch{ position: relative; display:inline-block; width: 52px; height: 32px; }
.switch input{ display:none; }
.switch__track{
position:absolute; inset:0;
background: rgba(0,0,0,.12);
border-radius: 999px;
transition: .2s;
}
.switch__track::after{
content:"";
position:absolute;
width: 26px; height: 26px;
top: 3px; left: 3px;
background:#fff;
border-radius: 50%;
box-shadow: 0 8px 18px rgba(0,0,0,.18);
transition: .2s;
}
.switch input:checked + .switch__track{
background: #111;
}
.switch input:checked + .switch__track::after{
transform: translateX(20px);
}
.cookieBanner {
pointer-events: auto;
}
.cookieBanner__inner,
.cookieBanner__actions,
.cookieBanner button,
.cookieBanner a {
pointer-events: auto;
}
.consentModal,
.consentModal__card,
.consentModal__overlay,
.consentModal button {
pointer-events: auto;
}
.cookieBanner {
z-index: 99999;
}
.consentModal {
z-index: 100000;
}
#aboutText1,
#aboutText2 {
text-align: justify;
}
.portfolioCard {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.portfolioCard__image {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f3f4f6;
}
.portfolioCard__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.portfolioCard__body {
padding: 18px;
}
.portfolioCard__body h3 {
margin: 0 0 8px 0;
}
.portfolioCard__body p {
margin: 0 0 10px 0;
}
/* --- PREMIUM SERVICES CARDS --- */
/* Kontener siatki usług */
/* Kontener siatki - zwiększamy odstępy dla "oddechu" */
#servicesGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
padding: 60px 0;
}
.servicePremiumCard {
background: #ffffff;
border-radius: 32px; /* Bardziej obłe rogi są teraz w modzie */
padding: 50px;
display: flex;
flex-direction: column;
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
/* Subtelny gradient w tle karty po najechaniu */
.servicePremiumCard::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.5s ease;
}
.servicePremiumCard:hover {
transform: translateY(-12px) scale(1.02);
border-color: rgba(37, 99, 235, 0.2);
box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.12);
}
.servicePremiumCard:hover::before {
opacity: 1;
}
/* Stylowa oprawa ikony */
.servicePremiumCard__iconWrap {
width: 80px;
height: 80px;
background: #f8fafc;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
position: relative;
z-index: 2;
transition: all 0.4s ease;
border: 1px solid rgba(15, 23, 42, 0.04);
}
.servicePremiumCard:hover .servicePremiumCard__iconWrap {
background: var(--primary);
transform: rotate(-5deg); /* Delikatny obrót nadaje dynamiki */
}
/* Napis "USŁUGA" nad tytułem (mały akcent premium) */
.servicePremiumCard::after {
content: "SERVICE";
position: absolute;
top: 50px;
right: 50px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.2em;
color: rgba(15, 23, 42, 0.1);
text-transform: uppercase;
}
.servicePremiumCard__title {
font-size: 28px;
font-weight: 800;
color: #0f172a;
margin-bottom: 20px;
letter-spacing: -0.02em;
line-height: 1.2;
position: relative;
z-index: 2;
}
.servicePremiumCard__text {
font-size: 17px;
line-height: 1.7;
color: #64748b;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
/* Przycisk / Link */
.servicePremiumCard__link {
font-size: 14px;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.1em;
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: auto;
position: relative;
z-index: 2;
}
.servicePremiumCard__link::after {
content: "";
width: 24px;
height: 2px;
background: currentColor;
transition: width 0.3s ease;
}
.servicePremiumCard:hover .servicePremiumCard__link::after {
width: 45px; /* Wydłużająca się kreska zamiast samej strzałki */
}
/* --- TŁO PREMIUM DLA KARTY --- */
.servicePremiumCard__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
opacity: 0.04; /* Bardzo subtelne - to klucz do efektu premium */
filter: grayscale(100%); /* Zdjęcie będzie czarno-białe */
pointer-events: none;
transition: opacity 0.5s ease, transform 0.8s ease;
}
/* Obrazek w tle */
.servicePremiumCard__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Efekt najazdu na tło */
.servicePremiumCard:hover .servicePremiumCard__bg {
opacity: 0.08; /* Lekko wzmacniamy tło przy najechaniu */
transform: scale(1.1); /* Delikatny zoom tła */
}
/* Upewniamy się, że treść jest nad tłem */
.servicePremiumCard__iconWrap,
.servicePremiumCard__title,
.servicePremiumCard__text,
.servicePremiumCard__bottom {
position: relative;
z-index: 2;
}
/* =========================
O NAS — PREMIUM
========================= */
.aboutSection--premium {
position: relative;
overflow: hidden;
}
.aboutPremium {
position: relative;
padding: 34px;
border-radius: 32px;
background:
radial-gradient(circle at top left, rgba(99, 102, 241, 0.10), transparent 34%),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.10), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 24px 60px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255,255,255,0.7);
}
.aboutPremium__glow {
position: absolute;
border-radius: 999px;
filter: blur(40px);
pointer-events: none;
opacity: 0.55;
}
.aboutPremium__glow--1 {
top: -40px;
left: -20px;
width: 180px;
height: 180px;
background: rgba(59, 130, 246, 0.14);
}
.aboutPremium__glow--2 {
right: 10%;
bottom: -50px;
width: 220px;
height: 220px;
background: rgba(99, 102, 241, 0.14);
}
.aboutPremium__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
gap: 34px;
align-items: start;
}
.aboutPremium__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(37, 99, 235, 0.14);
color: #0f172a;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.aboutPremium__headline {
margin: 18px 0 14px;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: #0f172a;
max-width: 760px;
}
.aboutPremium__lead {
margin: 0 0 22px;
max-width: 700px;
font-size: 1.08rem;
line-height: 1.75;
color: rgba(15, 23, 42, 0.78);
}
.aboutPremium__text {
display: grid;
gap: 16px;
max-width: 760px;
}
.aboutPremium__text p {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: #1e293b;
}
.aboutStats--premium {
display: grid;
grid-template-columns: repeat(2, minmax(140px, 1fr));
gap: 14px;
margin-top: 28px;
max-width: 620px;
}
.aboutStats--premium .aboutStat {
padding: 18px 18px 16px;
border-radius: 22px;
background: rgba(255,255,255,0.74);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.aboutStats--premium .aboutStat strong {
display: block;
margin-bottom: 6px;
font-size: 1.4rem;
line-height: 1;
color: #0f172a;
}
.aboutStats--premium .aboutStat span {
display: block;
color: rgba(15, 23, 42, 0.72);
font-size: 0.95rem;
line-height: 1.4;
}
.aboutCTA--premium {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.aboutPremium__ctaBtn,
.aboutPremium__ghostBtn {
min-height: 52px;
padding-left: 22px;
padding-right: 22px;
border-radius: 16px;
}
.aboutPremium__right {
position: relative;
}
.aboutPremium__panel {
position: sticky;
top: 110px;
display: grid;
gap: 16px;
padding: 22px;
border-radius: 28px;
background: rgba(255,255,255,0.76);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 22px 50px rgba(15, 23, 42, 0.09);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.aboutPremium__panelTop {
display: flex;
align-items: center;
gap: 12px;
}
.aboutPremium__panelBadge {
flex: 0 0 auto;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1e3a8a;
}
.aboutPremium__panelLine {
display: block;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(37,99,235,0.32), rgba(15,23,42,0.04));
}
.aboutCard--premium {
padding: 18px 18px 16px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.aboutCard--premium strong {
display: block;
margin-bottom: 8px;
font-size: 1.02rem;
color: #0f172a;
}
.aboutCard--premium p {
margin: 0;
line-height: 1.7;
color: rgba(15, 23, 42, 0.72);
}
.aboutCard--accent {
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(239,246,255,0.95));
border-color: rgba(37, 99, 235, 0.12);
}
.aboutPremium__quote {
padding: 18px;
border-radius: 22px;
background: #0f172a;
color: #fff;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}
.aboutPremium__quoteLabel {
display: inline-block;
margin-bottom: 10px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.aboutPremium__quote p {
margin: 0;
line-height: 1.7;
color: rgba(255,255,255,0.95);
}
@media (max-width: 1100px) {
.aboutPremium__grid {
grid-template-columns: 1fr;
}
.aboutPremium__panel {
position: relative;
top: 0;
}
}
@media (max-width: 768px) {
.aboutPremium {
padding: 22px;
border-radius: 24px;
}
.aboutPremium__headline {
margin-top: 16px;
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
.aboutPremium__lead,
.aboutPremium__text p {
line-height: 1.75;
}
.aboutStats--premium {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.aboutStats--premium {
grid-template-columns: 1fr;
}
.aboutCTA--premium {
flex-direction: column;
}
.aboutPremium__ctaBtn,
.aboutPremium__ghostBtn {
width: 100%;
justify-content: center;
}
}
/* =========================
PORTFOLIO SLIDER — PREMIUM / 3 KARTY
========================= */
.portfolioSliderSection--premium {
position: relative;
overflow: hidden;
}
.portfolioSliderSection--premium .slider {
position: relative;
padding: 24px;
border-radius: 32px;
background:
radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 32%),
radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.12), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 24px 60px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255,255,255,0.7);
overflow: hidden;
}
.portfolioSliderSection--premium .slider__viewport {
overflow: hidden;
border-radius: 24px;
}
.portfolioSliderSection--premium .slider__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 36px) / 3);
gap: 18px;
padding: 6px;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.portfolioSliderSection--premium .slider__track::-webkit-scrollbar {
display: none;
}
.portfolioSliderSection--premium .portfolioSlide {
min-width: 0;
scroll-snap-align: start;
border-radius: 28px;
overflow: hidden;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.portfolioSliderSection--premium .portfolioSlide:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
}
.portfolioSliderSection--premium .portfolioSlide__image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #e2e8f0;
}
.portfolioSliderSection--premium .portfolioSlide__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(15, 23, 42, 0.00) 0%,
rgba(15, 23, 42, 0.10) 100%
);
pointer-events: none;
}
.portfolioSliderSection--premium .portfolioSlide__image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.7s ease;
}
.portfolioSliderSection--premium .portfolioSlide:hover .portfolioSlide__image img {
transform: scale(1.04);
}
.portfolioSliderSection--premium .portfolioSlide__content {
padding: 22px;
}
.portfolioSliderSection--premium .portfolioSlide__content::before {
content: "Realizacja";
display: inline-flex;
align-items: center;
padding: 8px 12px;
margin-bottom: 14px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.12);
color: #1e3a8a;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.portfolioSliderSection--premium .portfolioSlide__content h3 {
margin: 0 0 10px;
font-size: clamp(1.25rem, 2vw, 1.8rem);
line-height: 1.12;
letter-spacing: -0.03em;
color: #0f172a;
}
.portfolioSliderSection--premium .portfolioSlide__content .muted {
display: inline-flex;
align-items: center;
margin: 0 0 14px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.05);
color: #475569;
font-size: 0.9rem;
line-height: 1.2;
}
.portfolioSliderSection--premium .portfolioSlide__content p:last-child {
margin: 0;
line-height: 1.75;
color: #334155;
}
.portfolioSliderSection--premium .slider__btn {
position: absolute;
top: 50%;
z-index: 5;
transform: translateY(-50%);
width: 54px;
height: 54px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,0.82);
color: #0f172a;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.portfolioSliderSection--premium .slider__btn:hover {
transform: translateY(-50%) scale(1.06);
box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
background: rgba(255,255,255,0.96);
}
.portfolioSliderSection--premium .slider__btn--left {
left: 18px;
}
.portfolioSliderSection--premium .slider__btn--right {
right: 18px;
}
.portfolioSliderSection--premium .slider__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 18px;
}
.portfolioSliderSection--premium .slider__dot {
width: 10px;
height: 10px;
border: 0;
border-radius: 999px;
background: rgba(15, 23, 42, 0.18);
cursor: pointer;
transition: all 0.25s ease;
}
.portfolioSliderSection--premium .slider__dot.is-active {
width: 34px;
background: linear-gradient(90deg, #2563eb, #4f46e5);
}
.portfolioSliderSection--premium .portfolio-slider__cta {
margin-top: 22px;
display: flex;
justify-content: center;
}
.portfolioSliderSection--premium .portfolio-slider__cta .btn {
min-height: 52px;
padding-left: 22px;
padding-right: 22px;
border-radius: 16px;
}
@media (max-width: 980px) {
.portfolioSliderSection--premium .slider__track {
grid-auto-columns: calc((100% - 18px) / 2);
}
.portfolioSliderSection--premium .slider__btn {
width: 48px;
height: 48px;
font-size: 24px;
}
}
@media (max-width: 640px) {
.portfolioSliderSection--premium .slider {
padding: 16px;
border-radius: 24px;
}
.portfolioSliderSection--premium .slider__track {
grid-auto-columns: 100%;
gap: 14px;
padding: 0;
}
.portfolioSliderSection--premium .portfolioSlide {
border-radius: 20px;
}
.portfolioSliderSection--premium .portfolioSlide__content {
padding: 18px;
}
.portfolioSliderSection--premium .slider__btn--left {
left: 10px;
}
.portfolioSliderSection--premium .slider__btn--right {
right: 10px;
}
}
/* =========================
SERVICES — MINI / MORE ANIMATED
========================= */
#servicesGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
padding: 10px 0 4px;
}
.serviceMiniCard {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 20px 20px 16px;
border-radius: 24px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.serviceMiniCard:hover {
transform: translateY(-6px);
border-color: rgba(37, 99, 235, 0.16);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.10);
}
.serviceMiniCard__shine {
position: absolute;
inset: -120% auto auto -40%;
width: 70%;
height: 220%;
background: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.45) 50%,
rgba(255,255,255,0) 100%
);
transform: rotate(18deg);
opacity: 0;
pointer-events: none;
}
.serviceMiniCard:hover .serviceMiniCard__shine {
opacity: 1;
animation: serviceShine 0.9s ease;
}
@keyframes serviceShine {
from { left: -55%; }
to { left: 120%; }
}
.serviceMiniCard__top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.serviceMiniCard__iconWrap {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 18px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.serviceMiniCard__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.28);
transform-origin: center;
transition: transform 0.32s ease;
}
.serviceMiniCard:hover .serviceMiniCard__img {
transform: scale(1.38);
}
.serviceMiniCard__img {
width: 30px;
height: 30px;
object-fit: contain;
display: block;
transition: transform 0.32s ease;
}
.serviceMiniCard:hover .serviceMiniCard__img {
transform: scale(1.08);
}
.serviceMiniCard__emoji {
font-size: 26px;
line-height: 1;
}
.serviceMiniCard__title {
margin: 0;
font-size: 1.18rem;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f172a;
}
.serviceMiniCard__text {
margin: 0 0 14px;
color: #64748b;
line-height: 1.65;
font-size: 0.96rem;
}
.serviceMiniCard__bottom {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.serviceMiniCard__link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--primary);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.serviceMiniCard__link::after {
content: "";
width: 18px;
height: 2px;
background: currentColor;
transition: width 0.25s ease, transform 0.25s ease;
}
.serviceMiniCard:hover .serviceMiniCard__link::after {
width: 30px;
transform: translateX(2px);
}
.serviceMiniReveal {
opacity: 0;
transform: translateY(24px) scale(0.985);
transition:
opacity 0.6s ease,
transform 0.6s ease;
}
.serviceMiniReveal.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
@media (max-width: 980px) {
#servicesGrid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.serviceMiniCard {
padding: 18px 18px 15px;
border-radius: 20px;
}
.serviceMiniCard__iconWrap {
width: 56px;
height: 56px;
border-radius: 16px;
}
.serviceMiniCard__img {
width: 100%;
height: 100%;
}
.serviceMiniCard__title {
font-size: 1.08rem;
}
.serviceMiniCard__text {
font-size: 0.93rem;
}
}
/* WYŚRODKOWANIE treści kart usług */
.serviceMiniCard {
text-align: center;
}
.serviceMiniCard__top {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.serviceMiniCard__head {
width: 100%;
text-align: center;
}
.serviceMiniCard__title {
text-align: center;
}
.serviceMiniCard__text {
text-align: center;
}
.serviceMiniCard__bottom {
display: flex;
justify-content: center;
align-items: center;
}
.serviceMiniCard__link {
justify-content: center;
}
/* Ostatnia karta usług na środku, gdy liczba kart jest nieparzysta */
@media (min-width: 981px) {
#servicesGrid > *:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 8px);
}
}
/* =========================
NAGŁÓWKI SEKCJI — PREMIUM CENTER
========================= */
#uslugi .section__head,
#portfolioSliderSection .section__head {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 760px;
margin: 0 auto 34px;
}
#uslugi .section__head::before,
#portfolioSliderSection .section__head::before {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
margin-bottom: 14px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.14);
color: #1d4ed8;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}
#uslugi .section__head::before {
content: "Oferta";
}
#portfolioSliderSection .section__head::before {
content: "Realizacje";
}
#uslugi .section__head h2,
#portfolioSliderSection .section__head h2 {
margin: 0;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.04em;
color: #0f172a;
}
#uslugi .section__head p,
#portfolioSliderSection .section__head p {
margin: 14px auto 0;
max-width: 620px;
font-size: clamp(1rem, 1.4vw, 1.08rem);
line-height: 1.75;
color: #64748b;
}
#uslugi .section__head::after,
#portfolioSliderSection .section__head::after {
content: "";
width: 92px;
height: 4px;
margin-top: 18px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(37, 99, 235, 0.14) 0%,
rgba(37, 99, 235, 0.95) 50%,
rgba(37, 99, 235, 0.14) 100%
);
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.18);
}
@media (max-width: 768px) {
#uslugi .section__head,
#portfolioSliderSection .section__head {
margin-bottom: 24px;
}
#uslugi .section__head::before,
#portfolioSliderSection .section__head::before {
margin-bottom: 12px;
padding: 7px 12px;
font-size: 10px;
letter-spacing: 0.14em;
}
#uslugi .section__head p,
#portfolioSliderSection .section__head p {
line-height: 1.6;
}
#uslugi .section__head::after,
#portfolioSliderSection .section__head::after {
width: 72px;
margin-top: 16px;
}
}
/* =========================================
MENU — LUXURY / DARK PREMIUM
wklej na sam koniec style.css
========================================= */
.header {
background:
linear-gradient(180deg, rgba(10, 15, 28, 0.92), rgba(15, 23, 42, 0.88));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(148, 163, 184, 0.10);
box-shadow: 0 16px 36px rgba(2, 6, 23, 0.28);
}
.header__inner {
min-height: 86px;
}
.brand__name {
color: #f8fafc;
letter-spacing: 0.03em;
}
.brand__mark {
filter:
drop-shadow(0 6px 18px rgba(59, 130, 246, 0.18))
drop-shadow(0 2px 8px rgba(255, 255, 255, 0.06));
}
@media (min-width: 981px) {
.nav {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(148, 163, 184, 0.12);
box-shadow:
0 12px 28px rgba(2, 6, 23, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.nav a:not(.btn) {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 16px;
border-radius: 999px;
color: rgba(226, 232, 240, 0.78);
font-weight: 700;
font-size: 0.96rem;
letter-spacing: -0.01em;
text-decoration: none;
transition:
color 0.25s ease,
background 0.25s ease,
transform 0.22s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
border: 1px solid transparent;
}
.nav a:not(.btn):hover {
color: #ffffff;
background: rgba(59, 130, 246, 0.10);
border-color: rgba(96, 165, 250, 0.16);
transform: translateY(-1px);
}
.nav a[aria-current="page"]:not(.btn),
.nav a.is-active:not(.btn) {
color: #ffffff;
background:
linear-gradient(180deg, rgba(37, 99, 235, 0.30), rgba(29, 78, 216, 0.18));
border: 1px solid rgba(96, 165, 250, 0.26);
box-shadow:
0 10px 24px rgba(37, 99, 235, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.nav a[aria-current="page"]::after,
.nav a.is-active::after {
display: none !important;
}
.nav .btn.btn--primary {
height: 46px;
padding: 0 18px;
margin-left: 6px;
border-radius: 999px;
border: 1px solid rgba(96, 165, 250, 0.34);
background:
linear-gradient(180deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.82));
color: #ffffff;
box-shadow:
0 14px 30px rgba(37, 99, 235, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
filter 0.22s ease;
}
.nav .btn.btn--primary:hover {
transform: translateY(-1px);
box-shadow:
0 18px 36px rgba(37, 99, 235, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
filter: brightness(1.04);
}
}
.hamburger {
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(255, 255, 255, 0.04);
box-shadow:
0 10px 24px rgba(2, 6, 23, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hamburger span {
background: rgba(248, 250, 252, 0.86);
}
/* mobile menu */
.mobile {
background:
linear-gradient(180deg, rgba(10, 15, 28, 0.96), rgba(15, 23, 42, 0.94));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid rgba(148, 163, 184, 0.10);
}
.mobile__inner {
padding-top: 16px;
padding-bottom: 16px;
}
.mobile__link {
min-height: 50px;
display: flex;
align-items: center;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.10);
background: rgba(255, 255, 255, 0.03);
color: rgba(226, 232, 240, 0.82);
font-weight: 700;
transition:
background 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease,
color 0.22s ease;
}
.mobile__link:hover {
color: #ffffff;
background: rgba(59, 130, 246, 0.08);
border-color: rgba(96, 165, 250, 0.16);
transform: translateY(-1px);
}
.mobile__link[aria-current="page"],
.mobile__link.is-active {
color: #ffffff;
background:
linear-gradient(180deg, rgba(37, 99, 235, 0.28), rgba(29, 78, 216, 0.16));
border-color: rgba(96, 165, 250, 0.24);
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16);
text-decoration: none;
}
.mobile .btn.btn--primary {
min-height: 50px;
border-radius: 16px;
color: #ffffff;
border: 1px solid rgba(96, 165, 250, 0.28);
background:
linear-gradient(180deg, rgba(59, 130, 246, 0.94), rgba(37, 99, 235, 0.82));
box-shadow:
0 14px 26px rgba(37, 99, 235, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* żeby scrollspy nie robił starego underline */
.nav a.is-active,
.mobile__link.is-active,
.footer__links a.is-active {
text-decoration: none;
}
/* ===== STATUS GODZIN OTWARCIA ===== */
.topbarHours{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.96rem;
font-weight: 700;
color: #0f172a; /* godziny i dwukropek zostają ciemne */
}
.topbarHours__status{
display: inline-flex;
align-items: center;
gap: 8px;
color: #475569; /* domyślny kolor napisu */
}
.topbarHours__status::before{
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 0 4px rgba(148,163,184,0.12);
flex: 0 0 auto;
}
.topbarHours__sep,
.topbarHours__value{
color: #0f172a; /* godziny zawsze czarne */
}
.topbarHours.is-open .topbarHours__status{
color: #16a34a;
}
.topbarHours.is-open .topbarHours__status::before{
box-shadow: 0 0 0 4px rgba(34,197,94,0.16);
}
.topbarHours.is-closed .topbarHours__status{
color: #dc2626;
}
.topbarHours.is-closed .topbarHours__status::before{
box-shadow: 0 0 0 4px rgba(239,68,68,0.16);
}
@media (max-width: 860px){
.topbarHours{
font-size: 0.92rem;
flex-wrap: wrap;
}
}
/* =========================================
TOPBAR CONTACTS — PREMIUM / FANCY
========================================= */
.topbarContacts{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.topContact{
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 8px 14px 8px 10px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.18);
background:
linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.82));
box-shadow:
0 10px 24px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255,255,255,0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #334155;
text-decoration: none;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease,
background 0.22s ease;
}
.topContact:hover{
transform: translateY(-1px);
border-color: rgba(59, 130, 246, 0.22);
box-shadow:
0 14px 28px rgba(15, 23, 42, 0.08),
0 8px 22px rgba(37, 99, 235, 0.08),
inset 0 1px 0 rgba(255,255,255,0.92);
}
.topContact__icon{
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
background: linear-gradient(180deg, rgba(37,99,235,0.16), rgba(29,78,216,0.08));
border: 1px solid rgba(37,99,235,0.14);
color: #2563eb;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 6px 16px rgba(37,99,235,0.10);
}
.topContact__icon svg{
width: 16px;
height: 16px;
display: block;
}
.topContact__text{
display: flex;
flex-direction: column;
line-height: 1.05;
}
.topContact__label{
font-size: 11px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 4px;
}
.topContact__value{
font-size: 0.96rem;
font-weight: 800;
color: #1e293b;
letter-spacing: -0.01em;
}
.topContact--phone .topContact__icon{
color: #db2777;
background: linear-gradient(180deg, rgba(219,39,119,0.14), rgba(236,72,153,0.08));
border-color: rgba(219,39,119,0.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 6px 16px rgba(219,39,119,0.10);
}
.topContact--mail .topContact__icon{
color: #7c3aed;
background: linear-gradient(180deg, rgba(124,58,237,0.14), rgba(168,85,247,0.08));
border-color: rgba(124,58,237,0.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 6px 16px rgba(124,58,237,0.10);
}
@media (max-width: 980px){
.topbar__right.topbarContacts{
width: 100%;
justify-content: flex-start;
}
.topContact{
min-height: 44px;
padding: 8px 12px 8px 10px;
}
.topContact__label{
font-size: 10px;
}
.topContact__value{
font-size: 0.92rem;
}
}
@media (max-width: 640px){
.topbarContacts{
gap: 8px;
}
.topContact{
width: 100%;
border-radius: 18px;
}
}
.workFlowSection,
.audienceSection{
background: rgba(255,255,255,0.56);
border-top: 1px solid rgba(15,23,42,0.06);
}
.workFlowSection .section__head,
.audienceSection .section__head{
max-width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.workFlowSection .sectionLead,
.audienceSection .sectionLead{
margin-left: auto;
margin-right: auto;
}
.workTimeline{
position: relative;
display:grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
padding-top: 28px;
}
.workTimeline::before{
content:"";
position:absolute;
left: 7%;
right: 7%;
top: 46px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(37,99,235,0.06), rgba(37,99,235,0.55), rgba(124,58,237,0.38), rgba(37,99,235,0.06));
}
.workTimelineItem{
position: relative;
min-width: 0;
padding: 0 2px;
text-align: center;
}
.workTimelineItem__dot{
position: relative;
z-index: 1;
display:inline-flex;
align-items:center;
justify-content:center;
width: 38px;
height: 38px;
margin-bottom: 18px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,0.08);
background: #ffffff;
box-shadow:
0 0 0 7px rgba(37,99,235,0.08),
0 12px 26px rgba(15,23,42,0.10);
color: #1d4ed8;
font-size: 0.78rem;
font-weight: 900;
}
.workTimelineItem h3,
.audienceSegment h3{
margin: 0 0 8px;
font-size: 1.02rem;
line-height: 1.25;
}
.workTimelineItem p,
.audienceSegment p{
margin: 0;
color: var(--muted);
line-height: 1.65;
font-size: 0.96rem;
}
.audienceMap{
position: relative;
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas:
"private center architects"
"developers center contractors"
"services center commercial";
gap: 14px;
align-items: stretch;
}
.audienceMap__center{
grid-area: center;
min-height: 100%;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
text-align:center;
border-radius: 22px;
border: 1px solid rgba(37,99,235,0.16);
background:
linear-gradient(180deg, rgba(37,99,235,0.10), rgba(255,255,255,0.88)),
#ffffff;
box-shadow: 0 18px 38px rgba(37,99,235,0.10);
padding: 22px;
}
.audienceMap__center span{
color: #1d4ed8;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.audienceMap__center strong{
display:block;
max-width: 180px;
margin-top: 8px;
font-size: 1.35rem;
line-height: 1.12;
letter-spacing: -0.03em;
}
.audienceSegment{
position: relative;
min-width: 0;
text-align: center;
border-radius: 18px;
border: 1px solid rgba(15,23,42,0.08);
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,250,252,0.86));
box-shadow: 0 14px 30px rgba(15,23,42,0.05);
padding: 18px;
}
.audienceSegment::before{
content:"";
display:block;
width: 34px;
height: 4px;
margin: 0 auto 14px;
border-radius: 999px;
background: rgba(37,99,235,0.72);
}
.audienceSegment--private{ grid-area: private; }
.audienceSegment--architects{ grid-area: architects; }
.audienceSegment--developers{ grid-area: developers; }
.audienceSegment--contractors{ grid-area: contractors; }
.audienceSegment--services{ grid-area: services; }
.audienceSegment--commercial{ grid-area: commercial; }
.audienceSegment--architects::before,
.audienceSegment--contractors::before{
background: rgba(124,58,237,0.68);
}
.audienceSegment--services::before,
.audienceSegment--commercial::before{
background: rgba(14,165,233,0.70);
}
.audienceGrid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.audienceCard{
min-width: 0;
border-radius: 18px;
border: 1px solid rgba(15,23,42,0.08);
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,250,252,0.86));
box-shadow: 0 14px 30px rgba(15,23,42,0.05);
padding: 18px;
}
.audienceCard h3{
margin: 0 0 8px;
font-size: 1.02rem;
line-height: 1.25;
}
.audienceCard p{
margin: 0;
color: var(--muted);
line-height: 1.65;
font-size: 0.96rem;
}
.audienceGrid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.slideReveal{
opacity: 0;
transform: translateY(26px);
transition:
opacity 0.55s ease,
transform 0.65s cubic-bezier(.2,.8,.2,1);
}
.slideReveal.is-visible{
opacity: 1;
transform: translateY(0);
}
@media (max-width: 980px){
.workTimeline{
grid-template-columns: 1fr;
gap: 0;
padding-top: 0;
}
.workTimeline::before{
left: 19px;
right: auto;
top: 4px;
bottom: 4px;
width: 2px;
height: auto;
}
.workTimelineItem{
padding: 0 0 22px 58px;
text-align: left;
}
.workTimelineItem:last-child{
padding-bottom: 0;
}
.workTimelineItem__dot{
position: absolute;
left: 0;
top: 0;
margin: 0;
}
.audienceMap{
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"center center"
"private architects"
"developers contractors"
"services commercial";
}
.audienceMap__center{
min-height: 180px;
}
}
@media (max-width: 640px){
.audienceMap,
.audienceGrid{
grid-template-columns: 1fr;
grid-template-areas:
"center"
"private"
"architects"
"developers"
"contractors"
"services"
"commercial";
}
}
@media (prefers-reduced-motion: reduce){
.slideReveal{
opacity: 1;
transform: none;
transition: none;
}
}
/* Final polish: centered topbar and cleaner about section */
.topbar .topbar__inner{
justify-content: center;
align-items: center;
gap: 12px;
padding: 12px 0;
}
.topbar__left{
justify-content: center;
gap: 10px;
padding: 6px 8px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(255,255,255,0.52);
}
.topbar__right.topbarContacts{
justify-content: center;
}
.topbarHours{
justify-content: center;
text-align: center;
}
.topContact{
min-width: 190px;
justify-content: center;
}
.topContact__text{
min-width: 0;
}
.topContact__label,
.topContact__value{
text-align: left;
}
.aboutPremium{
padding: clamp(24px, 4vw, 42px);
}
.aboutPremium__grid{
grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
align-items: center;
}
.aboutPremium__left{
max-width: 720px;
text-align: center;
}
.aboutPremium__headline{
max-width: 680px;
margin-left: auto;
margin-right: auto;
font-size: clamp(1.75rem, 3vw, 2.55rem);
line-height: 1.12;
text-wrap: balance;
}
.aboutPremium__lead{
max-width: 640px;
margin-left: auto;
margin-right: auto;
text-align: center;
text-wrap: pretty;
}
.aboutPremium__text{
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.aboutPremium__text p{
max-width: 68ch;
margin-left: auto;
margin-right: auto;
text-align: center;
text-wrap: pretty;
}
.aboutPremium__panel{
text-align: center;
}
.aboutPremium__panelTop{
justify-content: center;
}
.aboutPremium__panelLine{
max-width: 150px;
}
.aboutCard--premium{
padding: 20px;
}
.aboutCard--premium strong,
.aboutCard--premium p,
.aboutPremium__quote p{
text-wrap: pretty;
}
@media (max-width: 1100px){
.aboutPremium__left{
max-width: none;
text-align: center;
}
.aboutPremium__eyebrow{
margin-left: auto;
margin-right: auto;
}
.aboutPremium__headline,
.aboutPremium__lead,
.aboutPremium__text,
.aboutPremium__text p{
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 980px){
.topbar .topbar__inner{
gap: 10px;
}
.topbar__left,
.topbar__right.topbarContacts{
width: 100%;
justify-content: center;
}
.topbar__left{
max-width: 640px;
}
.topContact{
min-width: 220px;
}
}
@media (max-width: 640px){
.topbar__left{
border-radius: 18px;
}
.topContact{
width: min(100%, 320px);
min-width: 0;
}
.topContact__label,
.topContact__value{
text-align: left;
}
}
.workNotice{
max-width: 1180px;
margin: 18px auto 0;
padding: 12px 16px;
border: 1px solid rgba(37,99,235,0.16);
border-radius: 14px;
background: rgba(239,246,255,0.86);
color: #1e3a8a;
font-weight: 800;
text-align: center;
}
/* Mobile polish for About section */
.aboutPremium,
.aboutPremium__grid,
.aboutPremium__left,
.aboutPremium__right,
.aboutPremium__panel{
min-width: 0;
}
#aboutText1,
#aboutText2{
text-align: center;
}
@media (max-width: 980px){
.aboutPremium{
overflow: hidden;
}
.aboutPremium__grid{
grid-template-columns: 1fr !important;
gap: 22px;
}
.aboutPremium__panel{
position: static;
top: auto;
width: 100%;
}
.aboutStats--premium{
max-width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px){
.aboutSection--premium{
padding-top: 34px;
padding-bottom: 34px;
}
.aboutPremium{
padding: 18px 14px;
border-radius: 20px;
}
.aboutPremium__glow{
display: none;
}
.aboutPremium__eyebrow{
padding: 8px 12px;
font-size: 11px;
}
.aboutPremium__headline{
max-width: 100%;
margin-top: 14px;
font-size: clamp(1.55rem, 8vw, 2rem);
line-height: 1.14;
}
.aboutPremium__lead{
max-width: 100%;
font-size: 0.98rem;
line-height: 1.62;
}
.aboutPremium__text{
gap: 12px;
}
.aboutPremium__text p,
#aboutText1,
#aboutText2{
max-width: 100%;
font-size: 0.95rem;
line-height: 1.68;
text-align: center;
}
.aboutStats--premium{
grid-template-columns: 1fr;
gap: 10px;
margin-top: 20px;
}
.aboutStats--premium .aboutStat{
padding: 14px;
border-radius: 16px;
}
.aboutPremium__panel{
gap: 12px;
padding: 14px;
border-radius: 18px;
}
.aboutPremium__panelTop{
display: none;
}
.aboutCard--premium,
.aboutPremium__quote{
padding: 15px;
border-radius: 16px;
}
.aboutCard--premium strong{
font-size: 0.98rem;
}
.aboutCard--premium p,
.aboutPremium__quote p{
font-size: 0.92rem;
line-height: 1.6;
}
}
/* Szeroki nagłówek dla pełnego opisu nowej oferty. */
#uslugi.servicesOffer .section__head {
max-width: 940px;
}
#uslugi.servicesOffer .section__head p {
max-width: 900px;
}
.servicesOffer__description {
max-width: 900px;
margin: 14px auto 0;
}
#uslugi.servicesOffer .servicesOffer__description p {
margin: 0;
}
#uslugi.servicesOffer .servicesOffer__description p + p {
margin-top: 12px;
}
.clientsSection .clientsSection__head {
max-width: 820px;
margin: 0 auto 34px;
}
@media (max-width: 560px) {
.clientsSection .clientsSection__head {
margin-bottom: 24px;
}
}
/* KAFELKI — dopracowany wygląd */
.offerTiles {
counter-reset: offer-tile;
gap: 18px;
}
.offerTile {
counter-increment: offer-tile;
align-items: flex-end;
justify-content: flex-start;
min-height: 158px;
padding: 62px 22px 22px;
isolation: isolate;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 22px;
background:
radial-gradient(circle at 92% 6%, rgba(59, 130, 246, 0.12), transparent 34%),
linear-gradient(145deg, #ffffff 0%, #f8fafc 68%, #eff6ff 100%);
box-shadow:
0 18px 40px rgba(15, 23, 42, 0.075),
0 2px 8px rgba(15, 23, 42, 0.035),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
color: #172033;
font-size: 1rem;
line-height: 1.42;
text-align: left;
transition:
transform 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease,
background 220ms ease;
}
.offerTile::before {
content: counter(offer-tile, decimal-leading-zero);
position: absolute;
top: 18px;
left: 20px;
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(37, 99, 235, 0.18);
border-radius: 11px;
background: linear-gradient(145deg, rgba(37, 99, 235, 0.13), rgba(96, 165, 250, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
color: #2563eb;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.offerTile::after {
content: "";
position: absolute;
top: 26px;
right: 22px;
width: 34px;
height: 1px;
background: linear-gradient(90deg, rgba(37, 99, 235, 0.55), transparent);
transform: rotate(-35deg);
transform-origin: right center;
}
.offerTile:hover {
transform: translateY(-7px);
border-color: rgba(37, 99, 235, 0.38);
background:
radial-gradient(circle at 92% 6%, rgba(59, 130, 246, 0.18), transparent 37%),
linear-gradient(145deg, #ffffff 0%, #f8fafc 62%, #eaf2ff 100%);
box-shadow:
0 26px 54px rgba(15, 23, 42, 0.13),
0 8px 18px rgba(37, 99, 235, 0.08);
}
.offerTile--client {
min-height: 142px;
padding-top: 60px;
border-color: rgba(148, 163, 184, 0.18);
background:
radial-gradient(circle at 92% 6%, rgba(59, 130, 246, 0.2), transparent 36%),
linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
box-shadow:
0 20px 42px rgba(2, 6, 23, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: #f8fafc;
}
.offerTile--client::before {
border-color: rgba(147, 197, 253, 0.25);
background: linear-gradient(145deg, rgba(59, 130, 246, 0.3), rgba(96, 165, 250, 0.09));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
color: #bfdbfe;
}
.offerTile--client::after {
background: linear-gradient(90deg, rgba(147, 197, 253, 0.65), transparent);
}
.offerTile--client:hover {
border-color: rgba(96, 165, 250, 0.46);
background:
radial-gradient(circle at 92% 6%, rgba(59, 130, 246, 0.3), transparent 39%),
linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.055));
box-shadow:
0 28px 54px rgba(2, 6, 23, 0.34),
0 8px 22px rgba(37, 99, 235, 0.13);
}
@media (max-width: 560px) {
.offerTiles {
gap: 12px;
}
.offerTile,
.offerTile--client {
min-height: 112px;
padding: 52px 18px 18px;
border-radius: 18px;
text-align: left;
}
.offerTile::before {
top: 14px;
left: 16px;
width: 30px;
height: 30px;
border-radius: 10px;
}
.offerTile::after {
top: 22px;
right: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.offerTile {
transition: none;
}
.offerTile:hover {
transform: none;
}
}
/* KAFELKI — spokojniejszy wariant z ikonami */
.offerTiles {
gap: 15px;
}
.offerTile,
.offerTile--client {
align-items: center;
justify-content: center;
min-height: 148px;
padding: 62px 18px 22px;
border-radius: 18px;
text-align: center;
transform: none;
}
.offerTile {
border-color: rgba(148, 163, 184, 0.28);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.9));
box-shadow:
0 12px 30px rgba(15, 23, 42, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.offerTile::before {
content: "•";
top: 18px;
left: 50%;
width: 34px;
height: 34px;
border: 1px solid rgba(37, 99, 235, 0.16);
border-radius: 11px;
background: rgba(37, 99, 235, 0.08);
box-shadow: none;
color: #2563eb;
font-size: 1.15rem;
font-weight: 400;
letter-spacing: 0;
transform: translateX(-50%);
}
.offerTile::after {
display: none;
}
.offerTile:hover {
transform: translateY(-4px);
border-color: rgba(37, 99, 235, 0.32);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.9));
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.11);
}
.offerTile--client {
min-height: 138px;
border-color: rgba(148, 163, 184, 0.17);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
box-shadow:
0 16px 34px rgba(2, 6, 23, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.offerTile--client::before {
border-color: rgba(147, 197, 253, 0.22);
background: rgba(59, 130, 246, 0.16);
color: #bfdbfe;
}
.offerTile--client:hover {
transform: translateY(-4px);
border-color: rgba(96, 165, 250, 0.42);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
box-shadow: 0 20px 42px rgba(2, 6, 23, 0.3);
}
/* Zakres projektowy */
#zakres-projektowy + .offerTiles .offerTile:nth-child(1)::before { content: "♨"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(2)::before { content: "◉"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(3)::before { content: "❄"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(4)::before { content: "◆"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(5)::before { content: "❄"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(6)::before { content: "H"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(7)::before { content: "ϟ"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(8)::before { content: "⌁"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(9)::before { content: "≋"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(10)::before { content: "↻"; }
#zakres-projektowy + .offerTiles .offerTile:nth-child(11)::before { content: "⌄"; }
/* Etapy dokumentacji */
#etapy-dokumentacji + .offerTiles .offerTile:nth-child(1)::before { content: "✦"; }
#etapy-dokumentacji + .offerTiles .offerTile:nth-child(2)::before { content: "△"; }
#etapy-dokumentacji + .offerTiles .offerTile:nth-child(3)::before { content: "⌂"; }
#etapy-dokumentacji + .offerTiles .offerTile:nth-child(4)::before { content: "⌘"; }
#etapy-dokumentacji + .offerTiles .offerTile:nth-child(5)::before { content: "✓"; }
#etapy-dokumentacji + .offerTiles .offerTile:nth-child(6)::before { content: "∑"; }
#etapy-dokumentacji + .offerTiles .offerTile:nth-child(7)::before { content: "≡"; }
#etapy-dokumentacji + .offerTiles .offerTile:nth-child(8)::before { content: "□"; }
/* Obsługa inwestycji */
#obsluga-inwestycji + .offerTiles .offerTile:nth-child(1)::before { content: "⚙"; }
#obsluga-inwestycji + .offerTiles .offerTile:nth-child(2)::before { content: "⇄"; }
#obsluga-inwestycji + .offerTiles .offerTile:nth-child(3)::before { content: "◇"; }
#obsluga-inwestycji + .offerTiles .offerTile:nth-child(4)::before { content: "◎"; }
#obsluga-inwestycji + .offerTiles .offerTile:nth-child(5)::before { content: "?"; }
#obsluga-inwestycji + .offerTiles .offerTile:nth-child(6)::before { content: "∑"; }
#obsluga-inwestycji + .offerTiles .offerTile:nth-child(7)::before { content: "□"; }
#obsluga-inwestycji + .offerTiles .offerTile:nth-child(8)::before { content: "→"; }
/* Nasi klienci */
.offerTiles--clients .offerTile:nth-child(1)::before { content: "●"; }
.offerTiles--clients .offerTile:nth-child(2)::before { content: "▥"; }
.offerTiles--clients .offerTile:nth-child(3)::before { content: "△"; }
.offerTiles--clients .offerTile:nth-child(4)::before { content: "⌂"; }
.offerTiles--clients .offerTile:nth-child(5)::before { content: "▤"; }
.offerTiles--clients .offerTile:nth-child(6)::before { content: "⚒"; }
.offerTiles--clients .offerTile:nth-child(7)::before { content: "◆"; }
@media (max-width: 560px) {
.offerTile,
.offerTile--client {
min-height: 108px;
padding: 52px 16px 17px;
text-align: center;
}
.offerTile::before {
top: 13px;
left: 50%;
}
}
/* Ikony PNG dostarczone dla każdego kafelka. */
.offerTile::before {
display: none;
}
.offerTile__icon {
position: absolute;
top: 15px;
left: 50%;
display: block;
width: 52px;
height: 52px;
object-fit: contain;
border-radius: 14px;
transform: translateX(-50%);
filter: drop-shadow(0 5px 8px rgba(37, 99, 235, 0.12));
}
.offerTile--client .offerTile__icon {
filter: drop-shadow(0 5px 10px rgba(2, 6, 23, 0.28));
}
@media (max-width: 560px) {
.offerTile__icon {
top: 12px;
width: 44px;
height: 44px;
border-radius: 12px;
}
}
/* Wyśrodkowanie niepełnego ostatniego rzędu kafelków. */
@media (min-width: 901px) {
/* Jeden kafelek w ostatnim rzędzie. */
.offerTiles > .offerTile:last-child:nth-child(4n + 1) {
grid-column: 2 / span 2;
justify-self: center;
width: calc(50% - 7.5px);
}
/* Dwa kafelki w ostatnim rzędzie. */
.offerTiles > .offerTile:nth-last-child(2):nth-child(4n + 1),
.offerTiles > .offerTile:last-child:nth-child(4n + 2) {
translate: calc(100% + 15px) 0;
}
/* Trzy kafelki w ostatnim rzędzie. */
.offerTiles > .offerTile:nth-last-child(3):nth-child(4n + 1),
.offerTiles > .offerTile:nth-last-child(2):nth-child(4n + 2),
.offerTiles > .offerTile:last-child:nth-child(4n + 3) {
translate: calc(50% + 7.5px) 0;
}
}
@media (min-width: 561px) and (max-width: 900px) {
/* Pojedynczy kafelek w ostatnim rzędzie na tabletach. */
.offerTiles > .offerTile:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 7.5px);
}
}