:root { --morze: #19332A; --mx: 6vw; }
html { background: #EDEEE9; }
body { margin: 0; background: #EDEEE9; color: #151A18; font-family: 'Hanken Grotesk', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
* { box-sizing: border-box; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: #FF5A5F; color: #EDEEE9; }
:focus-visible { outline: 2px solid #FF5A5F; outline-offset: 3px; }
@keyframes rc-hint { 0% { transform: scaleY(0); transform-origin: top center; } 48% { transform: scaleY(1); transform-origin: top center; } 52% { transform: scaleY(1); transform-origin: bottom center; } 100% { transform: scaleY(0); transform-origin: bottom center; } }
a[data-cta-header] { color: #FF5A5F; transition: background-color 0.25s, color 0.25s; }
a[data-cta-header]:hover { background-color: #FF5A5F; color: #EDEEE9; }
a[data-cta-flats] { background-color: #FF5A5F; color: #EDEEE9; transition: background-color 0.25s, border-color 0.25s; }
a[data-cta-flats]:hover { background-color: #E8474C; border-color: #E8474C !important; }
a[data-cta-flats] svg, a[data-mmenu-ext] svg { transition: transform 0.3s cubic-bezier(0.22,0.8,0.2,1); }
a[data-cta-flats]:hover svg { transform: translate(2px,-2px); }
[data-mmenu-cta] a { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
[data-mmenu-cta] a[data-mmenu-link]:active { background-color: rgba(255,90,95,0.12) !important; }
[data-mmenu-cta] a[data-mmenu-ext]:active { background-color: #E8474C !important; border-color: #E8474C !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
input::placeholder { color: rgba(21,26,24,0.4); }
#top [data-hero-leads] p, #top [data-tagline] { text-shadow: 0 1px 2px rgba(20,26,32,0.45), 0 2px 18px rgba(20,26,32,0.55); }
[data-rc-logo] g:first-child { transition: fill 0.25s; }
[data-header][data-tone-light] [data-rc-logo] g:first-child { fill: currentColor; }
input[type="range"].rc-range { -webkit-appearance:none; appearance:none; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:28px; background:transparent; pointer-events:none; margin:0; }
input[type="range"].rc-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%; background:#EDEEE9; border:1.5px solid #151A18; cursor:pointer; pointer-events:auto; transition:border-color .2s; }
input[type="range"].rc-range::-webkit-slider-thumb:hover { border-color:#FF5A5F; }
input[type="range"].rc-range::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:#EDEEE9; border:1.5px solid #151A18; cursor:pointer; pointer-events:auto; }
@media (hover: hover) and (pointer: fine) {
body[data-cursor], body[data-cursor] a, body[data-cursor] button, body[data-cursor] input, body[data-cursor] label { cursor: none; }
}
/* W1 MOBILE: standardy dotyku */
a, button, input, select, textarea, label { touch-action: manipulation; }
/* Spojne stany focus dla klawiatury */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid #FF5A5F; outline-offset: 3px; border-radius: 2px; }
input[type="range"].rc-range:focus-visible { outline-offset: 0; }
/* 07 Makieta + stopka: pelna szerokosc (bezposrednie dzieci data-cover, bez paddingu rodzica) */
#makieta,
footer[data-screen-label="Stopka"] {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
@media (min-width: 1024px) {
[data-hamburger], [data-mmenu], [data-mprog], [data-mcta], [data-grain-m] { display: none !important; }
footer[data-screen-label="Stopka"] [data-ft-grid] { grid-template-columns: repeat(3, 1fr) !important; }
footer[data-screen-label="Stopka"] [data-ft-word] p { white-space: nowrap !important; }
}
/* W1 MOBILE: header 56px, hamburger, hairline postępu, typografia płynna */
/* Historia: ukryj szkicowe SVG pod gotowymi ilustracjami */
[data-droga-track] figure:has(> img) > svg { display: none !important; }
@media (max-width: 1023px) {
[data-mcta] { display: none !important; }
[data-rail], [data-nav-links], a[data-cta-header] { display: none !important; }
[data-hamburger] { display: flex !important; }
[data-mmenu-row] { align-items: center !important; }
[data-mprog] { display: block !important; }
[data-header] { padding-top: env(safe-area-inset-top); }
[data-header] > div:first-child { height: 56px; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)) !important; }
[data-header] a[href="#top"] { transform: scale(0.85); transform-origin: left center; }
/* 00 Prolog: apla pod trescia - tekst na calej szerokosci wypada na jasnej elewacji */
#top [data-hero-media]::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to right, rgba(20,26,24,0.22) 0%, rgba(20,26,24,0.06) 100%),
linear-gradient(to bottom, rgba(20,26,24,0.28) 0%, rgba(20,26,24,0.40) 28%, rgba(20,26,24,0.44) 62%, rgba(20,26,24,0.26) 84%, rgba(20,26,24,0) 100%);
}
/* 00 Prolog: leads nad przyciskiem „Przejdź drogą”, drobna korekta typografii */
#top [data-hero-leads] {
right: auto !important;
left: var(--mx) !important;
bottom: 24vh !important;
width: auto !important;
max-width: calc(100% - 2 * var(--mx));
gap: 16px !important;
}
#top [data-hero-leads] > p:first-child {
font-size: clamp(28px, 7.2vw, 34px) !important;
}
#top [data-hero-leads] > p:last-child {
font-size: clamp(17px, 4.2vw, 19px) !important;
line-height: 1.55 !important;
}
section h2 { font-size: clamp(40px, 11vw, 72px) !important; line-height: 1.04 !important; }
[data-hour] { font-size: clamp(72px, 20vw, 120px) !important; }
/* 02 MIASTO: jedna kolumna — naglowek, mapa, tresc */
[data-miasto-grid] { grid-template-columns: 1fr !important; }
[data-miasto-grid] > [data-rg] { display: contents; }
[data-miasto-grid] > [data-rg] > p:first-of-type { order: 0; }
[data-miasto-grid] > [data-rg] > div { order: 1; }
[data-miasto-grid] > figure { order: 2; grid-column: 1 !important; margin-top: 4px !important; max-width: 100% !important; justify-self: stretch !important; }
[data-miasto-grid] > [data-rg] > * { grid-column: 1 !important; }
[data-miasto-grid] > [data-rg] > p[data-fade] { order: 3; }
[data-miasto-grid] h2 span { white-space: normal !important; }
/* Numery rozdzialow w tle: skala bez uciecia */
[data-chnum], [data-chnum-fix] { font-size: 26vw !important; top: 3vh !important; right: 8px !important; }
/* Przerywniki (slider + foto): nizsze na mobile */
[data-przerywnik] { height: calc(46vh + 60px) !important; }
/* 04 Plan: karty w gridzie — wysokosc = najwyzsza karta, bez pustki */
[data-plan-cards] { min-height: 0 !important; display: grid !important; grid-template-columns: 1fr; padding-top: 3vh !important; }
[data-plan-cards] > p { grid-row: 1; grid-column: 1; }
[data-plan-cards] > [data-card] { position: static !important; grid-row: 2; grid-column: 1; }
/* 05 Struga: foto pelna szerokosc i wyzsze, cytat bez 46vh pustki */
[data-struga-content] { padding-top: 10vh !important; }
[data-struga-foto] { margin-left: -6vw !important; margin-right: -6vw !important; border-left: none !important; border-right: none !important; aspect-ratio: 3/2 !important; }
[data-struga-quote] { min-height: 0 !important; padding: 9vh 0 !important; }
/* Marquee: ta sama typografia co pod hero (mono 11px) */
[data-marquee] span {
font-size: 11px !important;
letter-spacing: 0.14em !important;
}
#struga > div:has([data-marquee]) {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
/* 03 CODZIENNOSC mobile: licznik / godzina / ilustracja / tekst, wysrodkowane w 100svh pod headerem */
[data-scenes][data-m] > p:first-child {
top: calc(56px + env(safe-area-inset-top) + 18px) !important;
left: var(--mx) !important;
right: auto !important;
font-size: 10px !important;
opacity: 0.72;
}
[data-scenes][data-m] [data-scene] {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0 !important;
height: 100% !important;
box-sizing: border-box !important;
padding: calc(56px + env(safe-area-inset-top) + 52px) var(--mx) calc(28px + env(safe-area-inset-bottom)) !important;
}
[data-scenes][data-m] [data-scene] > div { width: 100%; max-width: 620px; }
[data-scenes][data-m] [data-scene] > div:first-child {
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex: none !important;
}
[data-scenes][data-m] [data-clock] {
width: 46px !important;
height: 46px !important;
margin: 0 !important;
flex: none;
}
[data-scenes][data-m] [data-hour] {
font-size: clamp(60px, 18vw, 104px) !important;
line-height: 0.92 !important;
}
[data-scenes][data-m] [data-scene] > div:last-child {
display: flex !important;
flex-direction: column !important;
flex: none !important;
margin-top: 22px;
}
[data-scenes][data-m] [data-scene] figure {
order: -1;
width: 100% !important;
max-width: none !important;
aspect-ratio: 4 / 3 !important;
height: auto !important;
max-height: 46svh;
margin: 0 0 18px !important;
}
[data-scenes][data-m] [data-scene] > div:last-child > p {
font-size: clamp(17px, 4.4vw, 20px) !important;
line-height: 1.45 !important;
max-width: 30ch !important;
margin: 0 !important;
}
@media (max-height: 640px) {
[data-scenes][data-m] [data-scene] figure { max-height: 38svh; }
[data-scenes][data-m] [data-hour] { font-size: clamp(52px, 15vw, 80px) !important; }
}
/* 03 CODZIENNOSC: sticky 100svh; tlo tracku i boxa ustawia JS z progressu scrolla */
[data-scenes-outer] { background-color: #F0EFE7; }
[data-scenes][data-svh] {
height: 100svh !important;
min-height: 100svh !important;
max-height: 100svh !important;
box-sizing: border-box !important;
}
/* Cytat „Wygoda”: bez sztucznego overlapu — ciemne tlo domyka track scen */
[data-wygoda-quote] {
min-height: 0 !important;
margin-top: 0 !important;
position: relative !important;
z-index: 2 !important;
padding: 8vh var(--mx) calc(18vw + 4vh) !important;
}
[data-wygoda-quote] > [aria-hidden="true"] {
height: 18vw !important;
}
[data-mieszkania-tail] { padding-left: var(--mx) !important; padding-right: var(--mx) !important; }
[data-makieta-embed] {
height: 56vh !important;
width: calc(100% + 2 * var(--mx)) !important;
max-width: calc(100% + 2 * var(--mx)) !important;
margin-left: calc(-1 * var(--mx)) !important;
margin-right: calc(-1 * var(--mx)) !important;
border-left: none !important;
border-right: none !important;
}
/* Listy odleglosci: opisy do prawej — stabilne przy animacji licznika */
[data-dist-list] > li { grid-template-columns: 8px 28px auto minmax(0, 1fr) !important; gap: 14px !important; }
[data-dist-list] > li > span:nth-child(3) { white-space: nowrap; }
[data-dist-list] > li > span:last-child { text-align: right !important; }
/* Makieta 3D: pelna szerokosc sekcji + embed edge-to-edge na mobile */
#makieta { padding-left: var(--mx) !important; padding-right: var(--mx) !important; padding-bottom: 4vh !important; }
footer[data-screen-label="Stopka"] {
padding: 6vh var(--mx) calc(5vh + env(safe-area-inset-bottom)) !important;
}
footer[data-screen-label="Stopka"] [data-ft-word] p {
font-size: clamp(40px, 12vw, 72px) !important;
line-height: 1 !important;
white-space: normal !important;
}
footer[data-screen-label="Stopka"] [data-ft-rule] { margin: 5vh 0 4vh !important; }
footer[data-screen-label="Stopka"] [data-ft-grid] {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
footer[data-screen-label="Stopka"] [data-ft-nav] { gap: 0 !important; }
footer[data-screen-label="Stopka"] [data-ft-nav] a {
display: flex !important;
align-items: center !important;
min-height: 44px !important;
}
footer[data-screen-label="Stopka"] [data-ft-legal] {
margin-top: 6vh !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
}
[data-grain] { display: none !important; }
[data-grain-m] { display: block !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='rcgm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23rcgm)'/%3E%3C/svg%3E"); background-repeat: repeat; }
}
@media (max-width: 767px) { :root { --mx: 20px; } }
@media (min-width: 768px) and (max-width: 1023px) { :root { --mx: 32px; } }