/* ========================================================= UKRYTY W ZIELENI — editorial / immersive build Lenis · GSAP · ScrollTrigger · SplitText · CustomEase Forest palette: pine, moss, honey wood, linen ========================================================= */ :root{ /* forest hideaway: linen → pine → moss → honey */ --bone:#f4efe6; /* page bg — warm linen */ --bone-2:#e6ddd0; --ink:#241e18; /* text — deep warm brown-black */ --ink-deep:#1a261c; /* dark sections — deep pine */ --ink-soft:#2a3d30; --stone:#7a7568; /* muted bark — labels, meta */ --clay:#c4893a; /* amber wood */ --gold:#d4a24a; /* honey / sauna — CTA */ --gold-soft:#e4bc6a; --water:#3f6b4e; /* moss — contrast type */ --water-soft:#6d9a78; /* mid moss */ --water-mist:#b5d4bc; /* sage mist on dark */ --sky:#cfe0d2; /* soft sage accent */ --teal:#4d7358; --sand:#cbb892; /* dry meadow */ --sand-2:#dccdb0; --sand-deep:#b09a70; --sand-ink:#2c261c; --brown:#574231; --line:rgba(36,30,24,.15); --line-d:rgba(244,239,230,.16); --cream:#f4efe6; /* translucent display type */ --disp-light:rgba(244,239,230,.70); --disp-light-2:rgba(244,239,230,.84); --disp-dark:rgba(36,30,24,.80); --disp-hero:rgba(197,220,196,.55); --hero-blue:rgba(197,220,196,.88); /* font palette — translucent display + nav */ --honey:rgba(255,220,120,.62); /* display over dark/photo */ --honey-hi:#e4bc6a; /* solid honey / active */ --sage:rgba(197,220,196,.80); /* italic accent over dark */ --nav-link:rgba(244,239,230,.74); /* nav links over dark */ --shadow:0 40px 90px -46px rgba(18,32,22,.5); --maxw:1360px; --pad:clamp(26px,5vw,72px); --ease-out:cubic-bezier(.19,1,.22,1); --ease-inout:cubic-bezier(.76,0,.24,1); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:'Manrope',system-ui,sans-serif; color:var(--ink);background:var(--bone); line-height:1.65;-webkit-font-smoothing:antialiased; overflow-x:hidden; } html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.02;letter-spacing:.1px} .i{font-style:italic} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} ::selection{background:var(--water);color:#fff} /* labels */ .label{font-weight:600;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--stone);display:inline-flex;align-items:center;gap:.85em} .label.on-dark{color:var(--sky)} .label.on-dark::before{background:var(--sky);opacity:.75} .label .n{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.1rem;letter-spacing:0;text-transform:none;color:var(--water)} .label::before{content:"";width:34px;height:1px;background:currentColor;opacity:.5} /* buttons — quiet, editorial */ .btn{position:relative;display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:.82rem;letter-spacing:.06em; padding:15px 30px;border-radius:100px;border:1px solid var(--ink);cursor:pointer; transition:background .5s var(--ease-out),color .5s,border-color .5s;background:var(--ink);color:var(--bone)} .btn:hover{background:transparent;color:var(--ink)} .btn.ghost{background:transparent;color:var(--bone);border-color:rgba(244,239,229,.45)} .btn.ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)} .btn.on-dark{background:var(--gold);color:var(--ink-deep);border-color:var(--gold)} .btn.on-dark:hover{background:var(--gold-soft);color:var(--ink-deep);border-color:var(--gold-soft)} [data-magnetic]{will-change:transform} [data-magnetic-inner]{display:inline-flex;align-items:center;gap:.6em;will-change:transform} /* text link with arrow */ .tlink{display:inline-flex;align-items:center;gap:.7em;font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:inherit;position:relative;padding-bottom:6px} .tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;transition:transform .5s var(--ease-out)} .tlink:hover::after{transform:scaleX(0)} .tlink svg{width:15px;height:15px;transition:transform .5s var(--ease-out)} .tlink:hover svg{transform:translate(4px,4px)} /* prevent flash */ .js [data-reveal],.js [data-reveal-stagger] > *,.js [data-split],.js .hero-title,.js .split-target{opacity:0} /* ======================================================= PRELOADER ======================================================= */ .preloader{ position:fixed;inset:0;z-index:1000;background:var(--ink-deep);color:var(--bone); display:flex;align-items:center;justify-content:center;overflow:hidden; } .pl-inner{position:relative;z-index:3;text-align:center;width:min(620px,88vw);padding:0 24px} .pl-logo{ display:block;width:min(220px,46vw);height:auto;margin:0 auto 18px; filter:drop-shadow(0 10px 28px rgba(0,0,0,.35)); } .pl-mark{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(2.6rem,7vw,4.6rem);line-height:1;overflow:hidden} .pl-sub{font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(244,239,229,.55);margin-top:16px} .pl-bar{position:relative;height:1px;background:rgba(244,239,229,.16);margin:34px auto 0;overflow:hidden;width:min(280px,70%)} .pl-bar span{ position:absolute;inset:0;transform-origin:left;transform:scaleX(0); background:linear-gradient(90deg,var(--water-soft),var(--gold),var(--water-mist)); } .pl-count{ position:absolute;right:var(--pad);bottom:var(--pad);z-index:3; font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--gold); } /* water cascade — vertical streams */ .pl-panels{ position:absolute;inset:0;z-index:2;pointer-events:none; display:grid;grid-template-columns:repeat(7,1fr);gap:0; } .pl-panels span{ position:relative;display:block;height:100%;width:100%; transform:scaleY(0);transform-origin:top center; will-change:transform; backface-visibility:hidden; background:linear-gradient(180deg, #2d4a36 0%, #1a261c 22%, #152018 55%, #101610 100%); box-shadow: inset -1px 0 0 rgba(181,212,188,.08), inset 1px 0 0 rgba(0,0,0,.12); } /* subtle variation between streams */ .pl-panels span:nth-child(even){ background:linear-gradient(180deg, #314d3a 0%, #1a261c 35%, #141c16 70%, #0e140f 100%); } .pl-panels span:nth-child(3n){ background:linear-gradient(180deg, #2a4432 0%, #1a261c 40%, #121a14 100%); } /* sheen stripe on streams while falling */ .pl-panels span::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(197,220,196,.14) 0%, transparent 22%, transparent 55%, rgba(212,162,74,.05) 100%); opacity:.55;pointer-events:none; } /* ======================================================= NAV — editorial masthead (centered brand, split links) ======================================================= */ header.nav{ position:fixed;top:0;left:0;right:0;z-index:100; padding:16px clamp(18px,3vw,44px) 0; pointer-events:none; transition:background .45s var(--ease-out),padding .4s var(--ease-out),box-shadow .45s; } header.nav > *{pointer-events:auto} .nav-inner{ position:relative;max-width:var(--maxw);margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:18px; } .nav-side{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);flex:1 1 0;min-width:0} .nav-side--right{justify-content:flex-end} /* center brand masthead */ .nav-brand{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;gap:11px;color:var(--bone); transition:transform .5s var(--ease-out),opacity .4s;white-space:nowrap; } .nav-mark{width:72px;height:52px;object-fit:contain;flex:none; filter:drop-shadow(0 2px 12px rgba(0,0,0,.5));transition:width .45s var(--ease-out),height .45s} .nav-word{display:flex;flex-direction:column;line-height:1} .nav-word b{ font-weight:800;font-size:clamp(.9rem,1.4vw,1.4rem);letter-spacing:.32em;text-transform:uppercase; color:var(--honey);text-shadow:0 2px 18px rgba(8,16,28,.45);padding-left:.32em; } .nav-word small{ font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600; font-size:.82rem;letter-spacing:.04em;color:var(--sage);margin-top:3px; text-shadow:0 1px 12px rgba(8,16,28,.4); } /* nav links (flanking) */ .nav-links{display:flex;align-items:center;gap:clamp(14px,1.5vw,26px)} .nav-links a{ font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--nav-link);white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.4); transition:color .3s; } .nav-links a:hover{color:var(--bone)} /* language text toggle */ .lang-switch{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.74rem;letter-spacing:.05em} .lang-btn{ appearance:none;background:none;border:0;cursor:pointer;padding:2px 1px;line-height:1; color:rgba(244,239,230,.36);text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,.4);transition:color .3s; } .lang-btn:hover{color:rgba(244,239,230,.75)} .lang-btn.is-active{color:var(--honey-hi)} .lang-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px} .lang-sep{width:1px;height:11px;background:rgba(244,239,230,.22);flex:none} /* Rezerwuj */ .nav-book{ display:inline-flex;align-items:center;justify-content:center; padding:11px 22px;border-radius:100px; background:var(--gold);color:var(--ink-deep); font-weight:700;font-size:.74rem;letter-spacing:.06em;white-space:nowrap; transition:background .35s,transform .3s var(--ease-out); } .nav-book:hover{background:var(--gold-soft)} /* hairline rule under masthead */ .nav-rule{ max-width:var(--maxw);margin:11px auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(244,239,230,.26) 16%,rgba(244,239,230,.26) 84%,transparent); transition:opacity .4s; } /* burger — mobile only */ .nav-burger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;background:transparent;padding:0 11px; } .nav-burger span{display:block;height:1.6px;background:var(--bone);border-radius:2px; transition:transform .35s var(--ease-out),opacity .25s,width .35s} .nav-burger span:first-child{width:19px} .nav-burger span:last-child{width:12px;margin-left:auto} .nav-burger.is-open span:first-child{transform:translateY(3.3px) rotate(45deg);width:19px} .nav-burger.is-open span:last-child{transform:translateY(-3.3px) rotate(-45deg);width:19px} /* scrolled: bar bg + condensed masthead (links stay on desktop) */ header.nav.scrolled{ padding-top:10px; background:rgba(20,30,22,.88); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); box-shadow:0 16px 44px -24px rgba(10,22,36,.55); } header.nav.scrolled .nav-brand{transform:translate(-50%,-50%) scale(.84)} header.nav.scrolled .nav-mark{width:56px;height:40px} header.nav.scrolled .nav-word b{text-shadow:none} header.nav.scrolled .nav-rule{opacity:0} /* ============ mobile / compact (<=900px) ============ */ header.nav.is-compact .nav-inner{justify-content:space-between} header.nav.is-compact .nav-side--left{display:none} header.nav.is-compact .nav-side--right .nav-links{display:none} header.nav.is-compact .nav-brand{ position:static;transform:none;justify-content:flex-start;gap:9px; } header.nav.is-compact .nav-inner{gap:10px} header.nav.is-compact .nav-mark{width:58px;height:42px} header.nav.is-compact .nav-word{display:none} /* mobile: emblem only, name lives in hero + drawer */ header.nav.is-compact .nav-book{padding:10px 18px;font-size:.72rem} header.nav.is-compact .nav-burger{width:36px;padding:0 8px} header.nav.is-compact .nav-rule{display:none} header.nav.is-compact .nav-burger{display:flex} header.nav.scrolled.is-compact .nav-brand{transform:none} /* drawer — mobile menu */ .nav-drawer{ display:none;position:absolute;top:calc(100% + 8px);right:clamp(18px,3vw,44px); width:min(320px,calc(100vw - 32px));padding:16px 16px 18px;border-radius:22px; background:rgba(26,38,28,.96); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid rgba(219,171,94,.28); box-shadow:0 24px 60px -20px rgba(10,22,36,.6); opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);pointer-events:none; transition:opacity .35s var(--ease-out),transform .4s var(--ease-out),visibility .35s; } header.nav.is-compact .nav-drawer{display:block} .nav-drawer-logo{ display:block;width:88px;height:auto;margin:2px 8px 10px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.28)); } .nav-drawer.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto} .nav-drawer-links{display:flex;flex-direction:column;gap:2px} .nav-drawer-links a{ color:rgba(244,239,229,.9);font-family:'Cormorant Garamond',serif; font-size:1.35rem;font-weight:500;padding:9px 8px;border-radius:10px;transition:background .3s,color .3s; } .nav-drawer-links a:hover{background:rgba(244,239,229,.08);color:var(--gold)} .nav-drawer .lang-switch--drawer{ display:flex;gap:18px;margin:14px 4px 6px;padding-top:14px; border-top:1px solid rgba(244,239,229,.12);font-size:.9rem; } .nav-drawer-foot{ margin-top:8px;padding-top:14px;border-top:1px solid rgba(244,239,229,.12); display:flex;flex-direction:column;gap:10px; } .nav-drawer-foot a{color:rgba(244,239,229,.75);font-size:.88rem;font-weight:600} .nav-drawer-book{ display:inline-flex;justify-content:center;align-items:center;padding:12px 16px;border-radius:100px; background:var(--gold);color:var(--ink-deep)!important;font-size:.8rem!important;letter-spacing:.04em;font-weight:700; } .nav-drawer-book:hover{background:var(--gold-soft)!important} /* ======================================================= HERO — clean, editorial, asymmetric ======================================================= */ .hero{position:relative;height:100svh;min-height:640px;overflow:hidden;color:var(--bone)} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0c1418} .hero-media{ position:absolute;inset:-16% -8% -22% -8%; will-change:transform; } .hero-shift{ width:100%;height:100%; will-change:transform; } .hero-photo{ width:100%;height:100%;object-fit:cover; object-position:50% 36%; transform-origin:50% 34%; filter:saturate(1.08) contrast(1.08) brightness(.9); will-change:transform; } @media (prefers-reduced-motion: no-preference){ .hero-photo{animation:heroDrift 48s ease-in-out infinite alternate} } @keyframes heroDrift{ from{transform:scale(1.04) translate3d(0,0,0)} to{transform:scale(1.14) translate3d(0,-3%,0)} } .hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; /* dusk grade: warm the glowing gable, cool the sky, hold type at the bottom */ background: radial-gradient(42% 38% at 50% 40%,rgba(255,176,72,.22),transparent 62%), radial-gradient(90% 55% at 50% 0%,rgba(18,36,64,.28),transparent 52%), linear-gradient(180deg, rgba(8,14,20,.28) 0%, rgba(8,14,20,.06) 28%, rgba(8,12,10,.18) 52%, rgba(6,10,8,.55) 78%, rgba(6,10,8,.72) 100% ); } .hero-grid{position:relative;z-index:2;height:100%;max-width:var(--maxw);margin:0 auto;padding:96px var(--pad) 0;display:grid;grid-template-rows:0.82fr auto 1.18fr;justify-items:center;text-align:center} .hero-title{ grid-row:2;align-self:center;font-size:clamp(2.9rem,9.2vw,8rem);font-weight:700;line-height:.9;letter-spacing:.02em; max-width:14ch;margin:0 auto;color:rgba(255,220,120,.62);text-transform:uppercase; text-shadow:0 2px 22px rgba(8,16,28,.4); } .hero-title .i{color:rgba(197,220,196,.72);font-weight:700;font-style:italic} .hero-foot{grid-row:3;align-self:end;width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:clamp(30px,5vh,54px)} .hero-meta{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,250,242,.86);max-width:22ch;line-height:1.9;text-align:left;text-shadow:0 1px 14px rgba(8,16,28,.45)} .hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px} .hero-price{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,250,242,.88);text-align:right;text-shadow:0 1px 14px rgba(8,16,28,.45)} .hero-price b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--gold-soft);margin-top:2px} .hero-cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px} /* split helpers */ .split-char{display:inline-block;will-change:transform,opacity} .split-word{display:inline-block;white-space:nowrap} /* keep whole words together — no top/bottom breaking */ .line-mask{display:block;overflow:hidden} /* ======================================================= SECTION SYSTEM ======================================================= */ section{position:relative} .pad{padding:clamp(84px,13vw,180px) 0} .pad-s{padding:clamp(60px,9vw,120px) 0} /* summer sky wash on selected cream sections */ .pad--sky, .amen-sec{ background: radial-gradient(90% 70% at 85% -10%,rgba(141,176,140,.20),transparent 55%), radial-gradient(60% 50% at 0% 100%,rgba(212,162,74,.12),transparent 50%), var(--bone); } /* editorial intro / manifesto — asymmetric */ .manifesto{display:grid;grid-template-columns:4fr 7fr;gap:clamp(30px,6vw,90px);align-items:start} .manifesto .side{position:sticky;top:120px} .manifesto h2{font-size:clamp(2rem,4.6vw,4.2rem);font-weight:500;line-height:1.08;max-width:18ch} .manifesto h2 .i{color:var(--water)} .manifesto .lead{margin-top:30px;max-width:52ch;color:#4a463d;font-size:1.08rem} /* full-bleed cinematic */ .fullbleed{position:relative;height:100svh;min-height:560px;overflow:hidden;color:var(--bone);display:flex;align-items:center;justify-content:center;text-align:center} .fullbleed .fb-img{position:absolute;inset:0;overflow:hidden} .fullbleed .fb-img img{width:100%;height:108%;object-fit:cover} .fullbleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,28,18,.48),rgba(12,20,14,.52));z-index:1} .fb-body{position:relative;z-index:2;padding:0 var(--pad);max-width:1100px} .fb-body .label{color:var(--sky);justify-content:center} .fb-body .label::before{background:var(--sky)} .fb-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(2rem,5.4vw,4.6rem);line-height:1.12;margin-top:22px;color:rgba(232,240,228,.94)} /* editorial split with big index */ .ed{position:relative;display:grid;gap:clamp(28px,5vw,76px);align-items:center} .ed + .ed{margin-top:clamp(90px,13vw,200px)} .ed--imgRight{grid-template-columns:5fr 6fr} .ed--imgLeft{grid-template-columns:6fr 5fr} .ed--imgLeft .ed-txt{order:2} .ed-media{position:relative;overflow:hidden;box-shadow:var(--shadow)} .ed-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5} .ed--wide .ed-media img{aspect-ratio:3/4} .ed-index{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(2.4rem,5vw,4rem);color:var(--water);line-height:1} .ed-txt h2{font-size:clamp(2rem,4.2vw,3.6rem);margin:14px 0 0;line-height:1.05;max-width:15ch} .ed-txt .p{margin-top:22px;color:#4a463d;font-size:1.06rem;max-width:42ch} .ed-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .ed-tag{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--stone);padding:8px 14px;border:1px solid var(--line);border-radius:100px} .ed-media.tall img{aspect-ratio:3/4.4;object-position:50% 68%} /* offset — asymmetry */ .ed--offset .ed-txt{padding-top:clamp(0px,6vw,90px)} /* ======================================================= HORIZONTAL SCROLL GALLERY ======================================================= */ .hscroll{position:relative;background:var(--bone-2);overflow:visible} .hscroll-pin{height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center} .hscroll-head{padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px} .hscroll-head h2{font-size:clamp(2rem,4.4vw,3.6rem)} .hscroll-track{ display:flex;flex-wrap:nowrap;gap:clamp(16px,2vw,30px); padding:0 var(--pad);will-change:transform; /* desktop uses GSAP x; mobile overrides to overflow-x scroll */ } .hscroll-track.is-native-scroll{ will-change:auto; cursor:grab; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:rgba(63,107,78,.4) transparent; } .hscroll-track.is-native-scroll:active{cursor:grabbing} .hs-item{position:relative;flex:0 0 auto;width:min(42vw,520px);overflow:hidden;touch-action:pan-y} .hs-item.portrait{width:min(30vw,380px)} .hs-item img{width:100%;height:62vh;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none} .hs-cap{margin-top:14px;display:flex;justify-content:space-between;gap:12px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)} .hs-cap .i{font-family:'Cormorant Garamond',serif;font-style:italic;text-transform:none;font-size:1.15rem;letter-spacing:0;color:var(--ink)} /* ======================================================= SEASONS — cinematic pinned scene (dzień -> noc) ======================================================= */ .seasons-cine{position:relative;height:240vh;background:var(--ink-deep)} .sc-sticky{position:sticky;top:0;height:100svh;overflow:hidden} .sc-layer{position:absolute;inset:0} .sc-layer img{width:100%;height:100%;object-fit:cover;transform:none} .sc-summer img{object-position:50% 72%} .sc-winter img{object-position:50% 42%} .sc-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,11,.18),rgba(10,14,11,.42))} .sc-winter{ z-index:1; clip-path:inset(0 0 0 100%); -webkit-clip-path:inset(0 0 0 100%); will-change:clip-path; } .seasons-cine:not(.is-scrubbing) .sc-winter{ transition:clip-path .85s var(--ease-out),-webkit-clip-path .85s var(--ease-out); } .seasons-cine.is-night .sc-winter{ clip-path:inset(0 0 0 0%); -webkit-clip-path:inset(0 0 0 0%); } .sc-caption{ position:absolute;z-index:4;left:0;right:0;bottom:0;color:var(--bone); padding:clamp(72px,14vh,140px) var(--pad) clamp(28px,5vh,52px); display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none; background:linear-gradient(180deg,rgba(8,14,10,0) 0%,rgba(8,14,10,.55) 42%,rgba(8,14,10,.88) 100%); } .sc-tag{font-size:.7rem;letter-spacing:.36em;text-transform:uppercase;color:var(--sky);font-weight:600} .sc-title{ font-size:clamp(3rem,10vw,9rem);line-height:.88;margin-top:8px;font-style:normal;font-weight:700; text-transform:uppercase;letter-spacing:.02em;color:#f4efe6; text-shadow:0 2px 28px rgba(0,0,0,.45); } .sc-swap{position:relative;display:inline-grid;justify-items:center} .sc-swap > span{grid-area:1/1} .sc-swap [data-cap="winter"], .sc-copy [data-cap="winter"]{opacity:0;visibility:hidden} .seasons-cine.is-night .sc-swap [data-cap="summer"], .seasons-cine.is-night .sc-copy [data-cap="summer"]{opacity:0;visibility:hidden} .seasons-cine.is-night .sc-swap [data-cap="winter"], .seasons-cine.is-night .sc-copy [data-cap="winter"]{opacity:1;visibility:visible} .sc-copy{display:grid;justify-items:center;width:min(42ch,100%);margin-top:16px} .sc-copy .sc-desc{grid-area:1/1;margin:0;width:100%} .sc-desc{ max-width:42ch;color:rgba(244,239,230,.94);font-weight:300; text-shadow:0 1px 18px rgba(0,0,0,.4); } .sc-line{position:absolute;z-index:3;left:50%;bottom:calc(var(--pad) + 150px);transform:translateX(-50%);width:1px;height:90px;background:rgba(244,239,229,.25);overflow:hidden} .sc-line i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);background:linear-gradient(180deg,var(--sky),var(--gold-soft))} /* seasons mobile fallback */ .seasons-mobile{display:none;background:var(--ink-deep);color:var(--bone)} .seasons-mobile .label{justify-content:center} .season-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px} .season{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:flex-end} .season img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .season::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,11,0) 30%,rgba(10,14,11,.85) 100%)} .season .s-body{position:relative;z-index:2;padding:30px} .season .s-body h3{font-size:2.2rem;font-style:italic} .season .s-body p{color:rgba(244,239,229,.85);margin-top:8px;font-size:.95rem;font-weight:300} .season:first-child img{object-position:50% 72%} .season:last-child img{object-position:50% 42%} .season .s-tag{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600} /* ======================================================= WINTER / COZY chapter — editorial bento (dark) ======================================================= */ .cozy{ position:relative; color:var(--bone); background: radial-gradient(ellipse 70% 45% at 12% 8%,rgba(212,162,74,.12),transparent 55%), radial-gradient(ellipse 55% 40% at 92% 88%,rgba(61,107,78,.14),transparent 50%), var(--ink-deep); overflow:hidden; } .cozy .label{color:var(--gold)} .cozy .label .n{color:var(--gold)} .cozy .label::before{background:var(--gold);opacity:.75} .cozy-head{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,5vw,72px);align-items:end; margin-bottom:clamp(36px,5.5vw,64px); } .cozy-head h2{ font-size:clamp(2.15rem,4.8vw,4.1rem);line-height:1.04; max-width:13ch;margin-top:14px;font-weight:500; color:rgba(255,255,255,.94); } .cozy-head h2 .i{color:var(--gold);font-style:italic} .cozy-lead{ color:rgba(244,239,229,.72);font-weight:300; max-width:38ch;font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.65; padding-bottom:6px; } /* main stage: feature + stacked video/support */ .cozy-stage{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr); gap:clamp(12px,1.6vw,18px); min-height:min(72vh,640px); } .cozy-stack{ display:grid; grid-template-rows:1.2fr .9fr; gap:clamp(12px,1.6vw,18px); min-height:0; } .cozy-stage figure, .cozy-moods figure{ position:relative;overflow:hidden;margin:0; border-radius:18px; background:rgba(8,24,40,.5); box-shadow:0 20px 48px -28px rgba(0,0,0,.55); } .cozy-stage img, .cozy-stage video, .cozy-moods img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.15s var(--ease-out); } .cozy-stage figure:hover img, .cozy-moods figure:hover img{transform:scale(1.045)} .cz-feature{min-height:0} .cz-feature img{object-position:50% 40%} .cz-video{min-height:0} .cz-video img{object-position:50% 42%} .cz-support{min-height:0} /* live / film badge (not CSS content — i18n friendly) */ .cz-live{ position:absolute;top:14px;left:14px;z-index:3; display:inline-flex;align-items:center;gap:7px; font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--bone); padding:7px 12px 7px 10px;border-radius:100px; background:rgba(16,28,18,.62); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); pointer-events:none; } .cz-live::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(219,171,94,.55); animation:cz-pulse 2s ease-out infinite; } @keyframes cz-pulse{ 0%{box-shadow:0 0 0 0 rgba(219,171,94,.55)} 70%{box-shadow:0 0 0 8px rgba(219,171,94,0)} 100%{box-shadow:0 0 0 0 rgba(219,171,94,0)} } /* glass captions — readable, not floating labels */ .cz-cap{ position:absolute;left:12px;right:12px;bottom:12px;z-index:2; margin:0;pointer-events:none; } .cz-cap-k{ display:inline-block; max-width:100%; padding:8px 14px; border-radius:100px; font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.95); background:rgba(16,28,18,.55); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 8px 20px -12px rgba(0,0,0,.5); } .cz-feature .cz-cap-k{font-size:.72rem;padding:9px 16px;letter-spacing:.16em} /* bottom mood strip */ .cozy-moods{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); margin-top:clamp(12px,1.6vw,18px); } .cz-mood{aspect-ratio:5/4} .cz-mood img{object-position:50% 45%} /* ======================================================= AMENITIES — quiet editorial flow (text only) ======================================================= */ .amen{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,6vw,90px);align-items:start} .amen .side{position:sticky;top:120px} .amen .side h2{ font-size:clamp(2rem,4.2vw,3.4rem);margin-top:14px;line-height:1.05; color:var(--disp-dark);font-weight:500;max-width:14ch; } .amen-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px} .amen-flow li{ display:flex;flex-direction:column;gap:4px; padding:18px 0;border-top:1px solid var(--line); } .amen-flow strong{ font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:500;line-height:1.15; } .amen-flow span{font-size:.9rem;color:var(--stone);line-height:1.4} /* ======================================================= PRICE — dark cinema ticket (decision moment) ======================================================= */ .price-cinema{ position:relative;overflow:hidden; padding:clamp(72px,11vw,140px) 0; color:var(--bone); background:var(--ink-deep); } .price-cinema-bg{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(70% 60% at 15% 20%,rgba(61,107,78,.30),transparent 55%), radial-gradient(50% 50% at 90% 80%,rgba(212,162,74,.12),transparent 50%), linear-gradient(165deg,#152318 0%,var(--ink-deep) 45%,#101810 100%); } .price-cinema-grid{ position:relative;z-index:1; display:grid;grid-template-columns:1.35fr .75fr; gap:clamp(32px,6vw,80px);align-items:center; } .price-mega .label{margin-bottom:18px} .price-mega-kicker{ font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:rgba(244,239,229,.5);margin-bottom:10px; } .price-mega-row{ display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px; margin:6px 0 10px; } .price-mega-from{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(1.4rem,2.5vw,2rem);color:var(--gold-soft); } .price-mega-num{ font-family:'Cormorant Garamond',serif;font-weight:500; font-size:clamp(5rem,14vw,9.5rem);line-height:.85; letter-spacing:-.03em;color:rgba(255,244,210,.96); } .price-mega-cur{ font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.4rem); color:var(--sky); } .price-mega-cur span{display:block;font-size:.45em;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:4px} .price-mega-sub{color:rgba(244,239,229,.62);font-weight:300;max-width:36ch;font-size:.98rem;line-height:1.5} .price-mega-perks{ list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px; margin:22px 0 28px;padding:0; } .price-mega-perks li{ font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:8px 14px;border-radius:100px; border:1px solid rgba(244,239,229,.18);color:rgba(244,239,229,.78); } .price-rail{ border:1px solid rgba(219,171,94,.28); background:rgba(244,239,229,.03); padding:clamp(22px,3vw,32px); backdrop-filter:blur(6px); } .price-rail-title{ font-size:.66rem;letter-spacing:.3em;text-transform:uppercase; color:var(--gold);font-weight:700;margin-bottom:18px; } .price-rail-step{ display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start; padding:16px 0;border-top:1px solid rgba(244,239,229,.12); } .price-rail-step span{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:1.5rem;color:var(--water-mist);line-height:1; } .price-rail-step h3{font-size:1.2rem;font-weight:500;color:var(--bone)} .price-rail-step p{margin-top:4px;font-size:.88rem;color:rgba(244,239,229,.55);font-weight:300;line-height:1.4} /* ======================================================= REVIEWS — calm editorial (no heavy panels) ======================================================= */ .rev-sec{background:var(--bone)} .rev-intro{ display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end; gap:16px 32px;margin-bottom:clamp(28px,4vw,44px); } .rev-intro h2{ font-size:clamp(2rem,4.2vw,3.4rem);margin-top:14px;line-height:1.05; color:var(--disp-dark);font-weight:500;max-width:14ch; } .rev-score{ font-size:.82rem;color:var(--stone);letter-spacing:.04em; display:flex;align-items:center;gap:10px; } .rev-score .stars{color:var(--water);letter-spacing:2px;font-size:.95rem} .rev-lines{display:flex;flex-direction:column} .rev-lines blockquote{ margin:0;padding:clamp(22px,3vw,28px) 0; border-top:1px solid var(--line); } .rev-lines blockquote p{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.35; color:var(--ink);max-width:42ch; } .rev-lines cite{ display:block;margin-top:12px;font-style:normal; font-size:.8rem;font-weight:600;color:var(--stone);letter-spacing:.02em; } .rev-more{margin-top:28px;padding-top:8px} .rev-more .tlink{color:var(--water)} /* silence fullbleed */ .silence{position:relative;height:72svh;min-height:420px;overflow:hidden;background:var(--ink-deep)} .silence-media{position:absolute;inset:0} .silence-media img{width:100%;height:108%;object-fit:cover} .silence::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,28,18,.15),rgba(16,28,18,.35))} /* ======================================================= MARQUEE (subtle) ======================================================= */ .marquee{overflow:hidden;padding:20px 0;white-space:nowrap;user-select:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(63,107,78,.06),rgba(212,162,74,.08))} .marquee .track{display:inline-flex;gap:40px;will-change:transform} .marquee .track span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--ink)} .marquee .track .dot{color:var(--water);font-style:normal} /* ======================================================= VOUCHER ======================================================= */ .voucher{position:relative;background:var(--ink-deep);color:var(--bone);overflow:hidden} .v-bg{position:absolute;inset:0;z-index:0} .v-bg img,.v-bg video{width:100%;height:100%;object-fit:cover;object-position:50% 40%} .v-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(16,28,18,.90) 40%,rgba(16,28,18,.58))} .voucher .wrap{position:relative;z-index:2;display:grid;grid-template-columns:7fr 5fr;gap:clamp(30px,6vw,80px);align-items:center} .voucher h2{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.02;max-width:14ch} .voucher h2 .i{color:var(--gold)} .voucher p{color:rgba(244,239,229,.75);margin-top:20px;max-width:46ch;font-weight:300;font-size:1.05rem} .vcard-img{border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);border:1px solid rgba(219,171,94,.3)} .vcard-img img{width:100%;height:auto;display:block} .vcard-brand{ background:var(--bone); border:1px solid rgba(219,171,94,.38); } .vcard-hero{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1a261c} .vcard-hero > img:first-child{width:100%;height:100%;object-fit:cover;object-position:50% 60%} .vcard-hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(16,28,18,.18) 0%,rgba(244,239,230,.08) 42%,rgba(244,239,230,.92) 100%); } .vcard-crest{ position:absolute;left:50%;bottom:10px;z-index:2; width:min(58%,220px);height:auto; transform:translateX(-50%); filter:drop-shadow(0 8px 18px rgba(16,28,18,.28)); } .vcard-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:rgba(26,38,28,.12)} .vcard-thumbs img{aspect-ratio:4/3;object-fit:cover;height:100%} .vcard-perks{ list-style:none;margin:0;padding:14px 16px 16px; display:grid;grid-template-columns:1fr 1fr;gap:8px 12px; background:var(--bone);color:var(--ink-deep); } .vcard-perks li{ font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:rgba(26,38,28,.72); padding-left:12px;position:relative; } .vcard-perks li::before{ content:"";position:absolute;left:0;top:.55em; width:6px;height:6px;border-radius:50%;background:var(--gold); } .vcard{border:1px solid rgba(244,239,229,.22);padding:36px;position:relative;background:rgba(244,239,229,.03)} .vcard .k{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)} .vcard .big{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:2.8rem;line-height:1.02;margin:12px 0 4px} .vcard .dash{border-top:1px dashed rgba(244,239,229,.3);margin:24px 0} .vcard small{color:rgba(244,239,229,.65);font-size:.84rem} /* ======================================================= CONTACT ======================================================= */ /* ======================================================= CONTACT — forest canopy → plays into earth footer ======================================================= */ .contact-sec{ position:relative;overflow:hidden; padding:clamp(72px,10vw,120px) 0 clamp(64px,9vw,100px); color:var(--bone); background: radial-gradient(90% 70% at 10% 0%,rgba(141,176,140,.32),transparent 55%), radial-gradient(70% 60% at 90% 100%,rgba(61,107,78,.42),transparent 50%), linear-gradient(165deg,#4d7358 0%,#3d5a42 28%,#2a3d30 62%,#1a261c 100%); } /* soft leaf light */ .contact-sec::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.4; background: radial-gradient(ellipse 40% 20% at 20% 30%,rgba(255,255,255,.16),transparent 60%), radial-gradient(ellipse 35% 18% at 70% 55%,rgba(197,220,196,.16),transparent 55%), radial-gradient(ellipse 50% 25% at 45% 80%,rgba(255,255,255,.08),transparent 50%); } /* shoreline hint at bottom — meets sand footer */ .contact-sec::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:min(120px,18vw);pointer-events:none; background:linear-gradient(180deg,transparent 0%,rgba(243,217,164,.12) 55%,rgba(235,201,133,.28) 100%); } .contact-shell{ position:relative;z-index:1; display:grid;grid-template-columns:1.15fr .85fr;gap:0; border:1px solid rgba(255,255,255,.22);overflow:hidden; box-shadow:0 40px 90px -40px rgba(8,30,50,.55); background:rgba(255,255,255,.1); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } .contact-left{ padding:clamp(28px,4vw,44px); background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 100%); } .contact-left .label{color:rgba(244,239,229,.75)} .contact-left .label .n{color:var(--gold)} .contact-left .label::before{background:var(--gold);opacity:.7} .contact-left h2{ font-size:clamp(2rem,4vw,3.2rem);margin-top:12px;line-height:1.05; color:rgba(255,255,255,.94);font-weight:500;max-width:12ch; } .contact-lead{margin-top:12px;color:rgba(244,239,229,.78);font-size:.98rem;max-width:36ch;line-height:1.55;font-weight:300} .c-compact{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column} .c-compact li{ display:grid;grid-template-columns:7.5rem 1fr;gap:12px 16px;align-items:center; padding:14px 0;border-top:1px solid rgba(255,255,255,.16); } .c-compact .ck{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,229,.5);font-weight:700} .c-compact .cv{ font-family:'Cormorant Garamond',serif;font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.15;color:rgba(255,255,255,.95);font-weight:500; } .c-compact .cv:hover{color:var(--gold)} .c-compact .cv--sm{font-size:clamp(1.1rem,2vw,1.35rem)} .c-chips{display:flex;flex-wrap:wrap;gap:8px} .c-chips a{ font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:8px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.28); color:var(--bone);background:rgba(255,255,255,.08); transition:background .35s,border-color .35s,color .35s; } .c-chips a:hover{background:var(--bone);border-color:var(--bone);color:var(--ink-deep)} .map-link{ display:grid;grid-template-columns:60px 1fr auto;gap:16px;align-items:center; margin-top:26px;padding:14px 16px 14px 14px; border:1.5px solid rgba(219,171,94,.55); border-radius:16px; background: linear-gradient(135deg,rgba(212,162,74,.2) 0%,rgba(255,255,255,.14) 45%,rgba(63,107,78,.18) 100%); box-shadow: 0 14px 36px -16px rgba(8,30,50,.55), 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 28px -8px rgba(219,171,94,.35); transition:border-color .35s,transform .35s var(--ease-out),background .35s,box-shadow .35s; } .map-link:hover{ border-color:rgba(219,171,94,.85); background: linear-gradient(135deg,rgba(212,162,74,.32) 0%,rgba(255,255,255,.2) 50%,rgba(63,107,78,.22) 100%); transform:translateY(-3px); box-shadow: 0 20px 44px -14px rgba(8,30,50,.6), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 36px -6px rgba(219,171,94,.5); } .map-link-visual{ position:relative; width:60px;height:60px;border-radius:12px;overflow:hidden; background: linear-gradient(160deg,rgba(16,28,18,.25),rgba(212,162,74,.2)), url("../img/zima-jezioro.jpg") center/cover; box-shadow:0 4px 12px -4px rgba(8,30,50,.5), inset 0 0 0 1px rgba(255,255,255,.2); } .map-link-pin{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 55%,rgba(16,28,18,.15),rgba(16,28,18,.45)); color:var(--gold); } .map-link-pin svg{ filter:drop-shadow(0 2px 4px rgba(10,22,36,.45)); } .map-link-txt{display:flex;flex-direction:column;gap:4px;min-width:0} .map-link-txt b{ font-size:1.02rem;font-weight:700;letter-spacing:.02em; color:#fff; text-shadow:0 1px 8px rgba(8,30,50,.35); } .map-link-txt small{ font-size:.78rem;font-weight:500; color:rgba(244,239,229,.78); letter-spacing:.02em; } .map-link-arr{ color:var(--gold);font-size:1.35rem;font-weight:600; padding-right:4px;line-height:1; transition:transform .35s var(--ease-out); } .map-link:hover .map-link-arr{transform:translateX(4px)} .contact-cta{ background: radial-gradient(80% 60% at 80% 0%,rgba(219,171,94,.18),transparent 55%), linear-gradient(180deg,rgba(16,28,18,.55),rgba(10,16,12,.72)); color:var(--bone);padding:clamp(28px,4vw,42px); display:flex;flex-direction:column;justify-content:center; border-left:1px solid rgba(255,255,255,.14); } .contact-cta .cta-kicker{ font-size:.66rem;letter-spacing:.28em;text-transform:uppercase; color:var(--gold);font-weight:700;margin-bottom:10px; } .contact-cta h3{font-size:clamp(1.8rem,3vw,2.4rem);font-style:italic;font-weight:500;line-height:1.05;color:rgba(255,255,255,.94)} .contact-cta p{color:rgba(244,239,229,.72);margin:12px 0 22px;font-weight:300;font-size:.95rem;max-width:28ch;line-height:1.55} .contact-cta .btns{display:flex;flex-direction:column;gap:10px} .contact-cta .btn{justify-content:center;width:100%;padding:13px 20px} .contact-cta .btn.on-dark{background:var(--bone);color:var(--ink-deep);border-color:var(--bone)} .contact-cta .btn.on-dark:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-deep)} .contact-cta .btn.ghost{border-color:rgba(255,255,255,.35);color:var(--bone)} .contact-cta .btn.ghost:hover{background:rgba(255,255,255,.12);color:var(--bone);border-color:rgba(255,255,255,.55)} .contact-cta .fine{margin-top:18px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,229,.42);text-align:center} /* ======================================================= FOOTER — meadow texture + forest→earth transition ======================================================= */ .footer-clip{ position:relative; z-index:2; background:linear-gradient(180deg, #1a261c 0%, #3d5a42 12%, rgba(141,168,130,.38) 28%, var(--sand-2) 48%, var(--sand) 100%); } footer{ position:relative; color:var(--sand-ink); border-radius:48px 48px 0 0; overflow:hidden; background-color:var(--sand); background-image: linear-gradient(180deg,rgba(255,252,245,.18) 0%,rgba(255,250,240,.08) 50%,transparent 100%), url("../img/stopka.jpg"); background-size:cover; background-position:center top; background-repeat:no-repeat; box-shadow:0 -30px 80px -40px rgba(120,90,30,.25); /* never leave a GSAP transform on