/* Единый файл стилей The LAGODA. Подключается через в . */ /* ============================= TOKENS ============================= */ #lagoda-site{ --forest:#26362A; --forest-2:#1B271F; --sand:#F2EEE3; --sand-2:#E9E2D0; --stone:#CBC3AC; --clay:#A65C3E; --clay-2:#8B4B32; --ink:#20241E; --mist:#727F70; --white:#FFFFFF; --radius:18px; --disp:'Unbounded', sans-serif; --body:'Inter', sans-serif; font-family:var(--body); color:var(--ink); background:var(--sand); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; } #lagoda-site *{box-sizing:border-box;} #lagoda-site img{max-width:100%;display:block;} #lagoda-site a{color:inherit;text-decoration:none;} #lagoda-site ul{list-style:none;margin:0;padding:0;} #lagoda-site h1,#lagoda-site h2,#lagoda-site h3,#lagoda-site h4{ font-family:var(--disp); font-weight:600; margin:0 0 .5em; letter-spacing:-0.01em; line-height:1.12; } #lagoda-site p{margin:0 0 1em;} #lagoda-site .wrap{max-width:1180px;margin:0 auto;padding:0 20px;} #lagoda-site .eyebrow{ font-family:var(--disp); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--clay); display:flex;align-items:center;gap:10px; margin-bottom:14px; } #lagoda-site .eyebrow::before{content:"";width:22px;height:1px;background:var(--clay);} #lagoda-site section{padding:76px 0;position:relative;} #lagoda-site .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.02em; padding:16px 30px;border-radius:100px;border:1px solid transparent; cursor:pointer;transition:transform .25s ease, background .25s ease, color .25s ease; } #lagoda-site .btn-primary{background:var(--clay);color:var(--white);} #lagoda-site .btn-primary:hover{background:var(--clay-2) !important;color:var(--white) !important;transform:translateY(-2px);} #lagoda-site .btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:inherit;} #lagoda-site .btn-ghost:hover{background:rgba(255,255,255,.12) !important;color:inherit !important;} #lagoda-site .btn-dark{background:var(--forest);color:var(--sand);} #lagoda-site .btn-dark:hover{background:var(--forest-2) !important;color:var(--sand) !important;transform:translateY(-2px);} /* reveal on scroll */ #lagoda-site .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;} #lagoda-site .reveal.in{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion:reduce){ #lagoda-site .reveal{opacity:1;transform:none;transition:none;} } /* ============================= HEADER ============================= */ #lagoda-site .lg-header{ position:sticky;top:0;z-index:60; background:rgba(242,238,227,.88);backdrop-filter:blur(10px); border-bottom:1px solid var(--stone); } #lagoda-site .lg-header .row{display:flex;align-items:center;justify-content:space-between;height:74px;} #lagoda-site .logo{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:.04em;} #lagoda-site .logo span{color:var(--clay);} #lagoda-site .lg-nav{display:none;gap:26px;font-size:14px;font-weight:500;} #lagoda-site .lg-nav a{opacity:.8;transition:opacity .2s;} #lagoda-site .lg-nav a:hover{opacity:1;color:var(--clay);} #lagoda-site .lg-header .btn{padding:11px 22px;font-size:13px;} #lagoda-site .burger{width:40px;height:40px;border-radius:50%;border:1px solid var(--stone);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;} #lagoda-site .burger span, #lagoda-site .burger span::before, #lagoda-site .burger span::after{ content:"";display:block;width:16px;height:2px;background:var(--ink);position:relative;transition:.2s; } #lagoda-site .burger span::before{position:absolute;top:-5px;} #lagoda-site .burger span::after{position:absolute;top:5px;} @media(min-width:900px){ #lagoda-site .lg-nav{display:flex;} #lagoda-site .burger{display:none;} } /* ============================= STORIES BAR ========================= */ #lagoda-site .stories{ display:flex;gap:18px;overflow-x:auto;padding:16px 20px 18px; scrollbar-width:none;border-bottom:1px solid var(--stone);background:var(--sand); } #lagoda-site .stories::-webkit-scrollbar{display:none;} #lagoda-site .story{flex:0 0 auto;text-align:center;cursor:pointer;width:68px;} #lagoda-site .story .ring{ width:60px;height:60px;border-radius:50%; background:conic-gradient(from 210deg, var(--clay), #C98A5E, var(--forest), var(--clay)); padding:2.5px;margin:0 auto 6px;transition:transform .2s; } #lagoda-site .story .ring:active{transform:scale(.94);} #lagoda-site .story .ring i{ display:flex;align-items:center;justify-content:center; width:100%;height:100%;border-radius:50%;background:var(--sand); } #lagoda-site .story .ring svg{width:24px;height:24px;stroke:var(--forest);} #lagoda-site .story small{font-size:11px;color:var(--mist);font-weight:600;} /* ============================= HERO ================================ */ #lagoda-site .hero{padding:0;position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;} #lagoda-site .hero img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } #lagoda-site .hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(27,39,31,.15) 0%, rgba(19,26,20,.15) 45%, rgba(15,20,15,.86) 100%); } #lagoda-site .hero-inner{position:relative;z-index:2;color:var(--white);padding-bottom:64px;width:100%;} #lagoda-site .hero-inner .eyebrow{color:#E4C6A8;} #lagoda-site .hero-inner .eyebrow::before{background:#E4C6A8;} #lagoda-site .hero h1{font-size:clamp(38px,7vw,74px);max-width:820px;} #lagoda-site .hero p.lead{font-size:clamp(15px,2vw,19px);max-width:520px;color:#E9E4D6;} #lagoda-site .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;} #lagoda-site .hero-scroll{ position:absolute;right:24px;bottom:26px;z-index:2;color:#fff;font-size:11px; writing-mode:vertical-rl;letter-spacing:.2em;text-transform:uppercase; display:flex;align-items:center;gap:10px;opacity:.75; } #lagoda-site .hero-scroll::after{content:"";width:1px;height:46px;background:#fff;} /* ============================= TREELINE DIVIDER ==================== */ #lagoda-site .treeline{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:34px; display:block; z-index:3; pointer-events:none; } #lagoda-site .treeline path{fill:var(--forest);} #lagoda-site .treeline.flip path{fill:var(--sand);} /* ============================= CONCEPT ============================= */ #lagoda-site .concept{background:var(--forest);color:var(--sand);position:relative;overflow:hidden;} #lagoda-site .concept .eyebrow{color:#C9A47C;} #lagoda-site .concept .eyebrow::before{background:#C9A47C;} #lagoda-site .concept h2{font-size:clamp(28px,4vw,42px);max-width:640px;} #lagoda-site .concept .lead{max-width:640px;color:#CBD4C7;font-size:16px;} #lagoda-site .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:48px;background:rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;} #lagoda-site .pillar{background:var(--forest);padding:30px 26px;} #lagoda-site .pillar svg{width:30px;height:30px;stroke:#C9A47C;margin-bottom:16px;} #lagoda-site .pillar h4{font-size:17px;color:var(--sand);} #lagoda-site .pillar p{color:#AEBAA9;font-size:14px;margin:0;} @media(min-width:760px){#lagoda-site .pillars{grid-template-columns:repeat(4,1fr);}} /* ============================= ABOUT / SPECS ======================== */ #lagoda-site .about{display:grid;gap:44px;} #lagoda-site .about h2{font-size:clamp(28px,4vw,42px);max-width:600px;} #lagoda-site .about .lead{max-width:560px;color:var(--mist);} #lagoda-site .spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--stone);border-radius:var(--radius);overflow:hidden;margin-top:8px;} #lagoda-site .spec{background:var(--sand);padding:22px 20px;} #lagoda-site .spec b{display:block;font-family:var(--disp);font-size:22px;color:var(--forest);} #lagoda-site .spec span{font-size:12.5px;color:var(--mist);} @media(min-width:760px){#lagoda-site .spec-grid{grid-template-columns:repeat(4,1fr);}} /* ============================= FAQ =================================== */ #lagoda-site .faq-list{display:flex;flex-direction:column;gap:10px;margin-top:30px;max-width:760px;} #lagoda-site .faq-item{background:var(--sand);border:1px solid var(--stone);border-radius:var(--radius);padding:2px 22px;} #lagoda-site .faq-item summary{padding:18px 0;font-family:var(--disp);font-weight:600;font-size:15.5px;cursor:pointer;list-style:none;position:relative;padding-right:30px;} #lagoda-site .faq-item summary::-webkit-details-marker{display:none;} #lagoda-site .faq-item summary::after{content:'+';position:absolute;right:0;top:16px;font-size:22px;color:var(--clay);transition:transform .25s ease;} #lagoda-site .faq-item[open] summary::after{transform:rotate(45deg);} #lagoda-site .faq-item p{padding:0 0 20px;color:var(--mist);font-size:14.5px;line-height:1.6;} /* ============================= LOCATION ============================= */ #lagoda-site .location{background:var(--sand-2);} #lagoda-site .loc-grid{display:grid;gap:40px;} #lagoda-site .loc-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--stone);font-size:15px;} #lagoda-site .loc-list li svg{flex:0 0 auto;width:20px;height:20px;stroke:var(--clay);margin-top:2px;} #lagoda-site .infra{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;} #lagoda-site .infra span{ font-size:12.5px;font-weight:600;background:var(--white);border:1px solid var(--stone); padding:9px 16px;border-radius:100px; } #lagoda-site .map-frame{border-radius:var(--radius);overflow:hidden;min-height:340px;background:var(--forest); display:flex;align-items:center;justify-content:center;color:#AEBAA9;font-size:13px;text-align:center;padding:20px;} @media(min-width:900px){#lagoda-site .loc-grid{grid-template-columns:1fr 1fr;}} /* ============================= DUPLEXES / TABS ======================= */ #lagoda-site .tabs{display:flex;gap:10px;margin:34px 0 26px;flex-wrap:wrap;} #lagoda-site .tab-btn{ font-family:var(--disp);font-weight:600;font-size:13px;padding:11px 22px;border-radius:100px; border:1px solid var(--stone);background:var(--white);cursor:pointer;transition:.2s; } #lagoda-site .tab-btn.active{background:var(--forest);color:var(--sand);border-color:var(--forest);} #lagoda-site .tab-panel{display:none;} #lagoda-site .tab-panel.active{display:grid;gap:34px;} #lagoda-site .plan-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--stone);background:var(--white);} #lagoda-site .plan-card img{cursor:zoom-in;} #lagoda-site .plan-meta{padding:22px 24px;} #lagoda-site .plan-meta h3{font-size:20px;} #lagoda-site .room-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:13.5px;margin:14px 0 20px;} #lagoda-site .room-list div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--stone);padding:6px 0;} #lagoda-site .room-list b{color:var(--forest);} @media(min-width:900px){#lagoda-site .tab-panel.active{grid-template-columns:1.15fr 1fr;}} /* ============================= GENPLAN ============================== */ #lagoda-site .genplan{background:var(--forest);color:var(--sand);} #lagoda-site .genplan .eyebrow{color:#C9A47C;}#lagoda-site .genplan .eyebrow::before{background:#C9A47C;} #lagoda-site .genplan h2{font-size:clamp(28px,4vw,42px);max-width:600px;} #lagoda-site .genplan-grid{display:grid;gap:34px;margin-top:20px;} #lagoda-site .genplan-img{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.15);} #lagoda-site .legend li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px;color:#CBD4C7;} #lagoda-site .legend b{color:var(--sand);font-family:var(--disp);} @media(min-width:900px){#lagoda-site .genplan-grid{grid-template-columns:1.3fr 1fr;align-items:center;}} /* ============================= CONSTRUCTION / TIMELINE =============== */ #lagoda-site .timeline{margin-top:40px;position:relative;padding-left:26px;} #lagoda-site .timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--stone);} #lagoda-site .t-item{position:relative;padding-bottom:34px;} #lagoda-site .t-item:last-child{padding-bottom:0;} #lagoda-site .t-dot{position:absolute;left:-26px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--stone);border:3px solid var(--sand);} #lagoda-site .t-item.done .t-dot{background:var(--clay);} #lagoda-site .t-item.now .t-dot{background:var(--forest);box-shadow:0 0 0 4px rgba(38,54,42,.15);} #lagoda-site .t-item h4{font-size:16px;margin-bottom:3px;} #lagoda-site .t-item span{font-size:12.5px;color:var(--mist);} #lagoda-site .t-item.done span{color:var(--clay);font-weight:600;} #lagoda-site .t-item.now span{color:var(--forest);font-weight:600;} /* ============================= GALLERY (IG grid) ===================== */ #lagoda-site .gallery{background:var(--sand-2);} #lagoda-site .ig-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:6px;margin-top:30px;} #lagoda-site .ig-item{position:relative !important;aspect-ratio:1/1 !important;overflow:hidden !important;border-radius:6px;display:block;background:#111;height:auto;} #lagoda-site .ig-grid img{width:100% !important;height:100% !important;max-width:100% !important;object-fit:cover !important;transition:transform .5s ease;margin:0 !important;} #lagoda-site a.ig-item:hover img{transform:scale(1.06);} #lagoda-site .ig-item.wide{grid-column:span 2 !important;aspect-ratio:2/1 !important;} #lagoda-site .ig-video video{position:absolute;top:0;left:0;width:100% !important;height:100% !important;object-fit:cover !important;background:#111;} @media(min-width:700px){#lagoda-site .ig-grid{grid-template-columns:repeat(4,1fr) !important;}#lagoda-site .ig-item.wide{grid-column:span 2 !important;}} /* lightbox */ #lagoda-site .lgbx{position:fixed;inset:0;background:rgba(15,18,15,.94);display:none;align-items:center;justify-content:center;z-index:999;padding:24px;} #lagoda-site .lgbx.open{display:flex;} #lagoda-site .lgbx img{max-width:100%;max-height:92vh;border-radius:8px;} #lagoda-site .lgbx .close{position:absolute;top:20px;right:24px;color:#fff;font-size:30px;background:none;border:none;cursor:pointer;} /* ============================= PRICES ============================== */ #lagoda-site .price-grid{display:grid;gap:22px;margin-top:34px;} #lagoda-site .price-card{border:1px solid var(--stone);border-radius:var(--radius);padding:30px;background:var(--white);position:relative;} #lagoda-site .price-card.featured{border-color:var(--clay);} #lagoda-site .price-card .tag{position:absolute;top:-12px;left:26px;background:var(--clay);color:#fff;font-size:11px;font-weight:700;padding:5px 14px;border-radius:100px;letter-spacing:.04em;} #lagoda-site .price-card h3{font-size:22px;} #lagoda-site .price-card .m2{color:var(--mist);font-size:13.5px;margin-bottom:18px;} #lagoda-site .price-card .price{font-family:var(--disp);font-size:26px;color:var(--forest);margin-bottom:20px;} #lagoda-site .price-card ul{margin-bottom:24px;} #lagoda-site .price-card li{font-size:13.5px;padding:7px 0;border-bottom:1px dashed var(--stone);color:var(--ink);} @media(min-width:820px){#lagoda-site .price-grid{grid-template-columns:repeat(2,1fr);}} /* ============================= CONTACT / FORM ========================= */ #lagoda-site .contact{background:var(--forest);color:var(--sand);} #lagoda-site .contact .eyebrow{color:#C9A47C;}#lagoda-site .contact .eyebrow::before{background:#C9A47C;} #lagoda-site .contact-grid{display:grid;gap:40px;margin-top:10px;} #lagoda-site .contact h2{font-size:clamp(26px,4vw,38px);} #lagoda-site .contact-info li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px;color:#D6DDD1;} #lagoda-site .contact-info li svg{width:18px;height:18px;stroke:#C9A47C;flex:0 0 auto;} #lagoda-site form.lead-form{background:var(--sand);border-radius:var(--radius);padding:28px;color:var(--ink);} #lagoda-site .lead-form .row2{display:grid;gap:14px;} @media(min-width:560px){#lagoda-site .lead-form .row2{grid-template-columns:1fr 1fr;}} #lagoda-site .lead-form label{font-size:12.5px;font-weight:600;color:var(--mist);display:block;margin-bottom:6px;} #lagoda-site .lead-form input,#lagoda-site .lead-form select,#lagoda-site .lead-form textarea{ width:100%;padding:13px 14px;border:1px solid var(--stone);border-radius:10px; font-family:var(--body);font-size:14px;background:var(--white);color:var(--ink);margin-bottom:14px; } #lagoda-site .lead-form textarea{resize:vertical;min-height:70px;} #lagoda-site .consent{display:flex;gap:10px;font-size:12px;color:var(--mist);align-items:flex-start;margin-bottom:16px;} #lagoda-site .consent input{width:16px;height:16px;margin-top:2px;flex:0 0 auto;} #lagoda-site .lead-form .btn-primary{width:100%;} #lagoda-site .form-msg{font-size:13px;margin-top:12px;display:none;} #lagoda-site .form-msg.show{display:block;} @media(min-width:900px){#lagoda-site .contact-grid{grid-template-columns:1fr 1.1fr;}} /* ============================= PROMO POPUP (stories highlight) ========== */ #lagoda-site .promo-modal{position:fixed;inset:0;background:rgba(15,18,15,.7);z-index:998;display:none;align-items:center;justify-content:center;padding:20px;} #lagoda-site .promo-modal.open{display:flex;} #lagoda-site .promo-box{background:var(--sand);border-radius:20px;max-width:380px;width:100%;overflow:hidden;position:relative;} #lagoda-site .promo-box img{height:200px;object-fit:cover;width:100%;} #lagoda-site .promo-box .p-body{padding:24px;} #lagoda-site .promo-box h4{font-size:19px;} #lagoda-site .promo-box p{font-size:13.5px;color:var(--mist);} #lagoda-site .promo-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;border:none;font-size:18px;cursor:pointer;z-index:2;} /* ============================= FOOTER ============================== */ #lagoda-site footer{background:var(--forest-2);color:#9AA79A;padding:50px 0 26px;font-size:13px;} #lagoda-site .foot-top{display:grid;gap:30px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:24px;} #lagoda-site .foot-logo{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--sand);margin-bottom:10px;} #lagoda-site .foot-logo span{color:var(--clay);} #lagoda-site .foot-col h5{color:var(--sand);font-family:var(--disp);font-size:13px;margin-bottom:12px;} #lagoda-site .foot-col li{padding:5px 0;} #lagoda-site .foot-col a:hover{color:var(--sand);} #lagoda-site .foot-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;} @media(min-width:800px){#lagoda-site .foot-top{grid-template-columns:1.4fr 1fr 1fr 1fr;}}