/* ===================================================================== ГК Такт — «Журнал заборов» (Glossy Magazine) Editorial / pastel theme. Cormorant Garamond + Jost. Подключается ПОСЛЕ bootstrap.min.css и переопределяет нужное. ===================================================================== */ :root{ --beige:#f5efe6; --beige-deep:#ece2d3; --paper:#fbf7f0; --rose:#d9b9b0; --rose-soft:#e7cdc6; --olive:#8a9072; --olive-deep:#6f765a; --ink:#3a352f; --muted:#8c8378; --line:rgba(58,53,47,.10); --shadow:0 30px 60px -30px rgba(58,53,47,.40); --radius:6px; --serif:'Cormorant Garamond', Georgia, serif; --sans:'Jost', 'Segoe UI', sans-serif; } /* --- mood variants (переключатель «настроения», ставится на ) --- */ body.mood-0{ --accent:var(--olive); --accent-deep:var(--olive-deep); --accent-soft:var(--rose-soft); } body.mood-1{ --beige:#efe9df; --accent:var(--olive-deep); --accent-deep:#5b6149; --accent-soft:#cdd2bb; --rose:#c7a59b; } body.mood-2{ --beige:#f7eeea; --accent:#c08a7f; --accent-deep:#a86b5f; --accent-soft:#ecd4cd; --rose:#cf9f95; --olive:#c08a7f; --olive-deep:#a86b5f; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:var(--sans); background:var(--beige); color:var(--ink); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .5s ease; } h1,h2,h3,h4,.serif{font-family:var(--serif); font-weight:600; line-height:1.05;} a{color:inherit;} img{max-width:100%;} .container-mag{max-width:1200px;margin:0 auto;padding:0 5vw;} /* ---------- placeholder (когда нет фото) ---------- */ .ph{ display:flex;align-items:center;justify-content:center; background: repeating-linear-gradient(45deg,var(--beige-deep) 0 14px,var(--paper) 14px 28px); color:var(--muted); } .ph i{font-size:34px;opacity:.5;} .ph-tall{height:520px;border-radius:var(--radius);box-shadow:var(--shadow);} .ph-card{height:240px;} /* ===================== TOPBAR ===================== */ .topbar{ position:fixed;top:0;left:0;right:0;z-index:1000; display:flex;justify-content:space-between;align-items:center; padding:12px 5vw; background:rgba(245,239,230,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .topbar .logo{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:1px;text-decoration:none;color:var(--ink);} .topbar .logo span{color:var(--accent);} .topnav{display:flex;gap:24px;align-items:center;} .topnav a{text-decoration:none;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:1.5px;transition:.3s;white-space:nowrap;} .topnav a:hover,.topnav a.active{color:var(--accent);} .top-right{display:flex;align-items:center;gap:18px;} .top-phone{font-weight:500;letter-spacing:.5px;white-space:nowrap;text-decoration:none;color:var(--ink);} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;} .burger span{width:26px;height:2px;background:var(--ink);transition:.3s;} /* mood switcher */ .mood-switch{display:flex;gap:7px;align-items:center;} .mood-dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0;transition:transform .2s;} .mood-dot:hover{transform:scale(1.2);} .mood-dot.is-active{box-shadow:0 0 0 2px var(--ink);} .mood-dot[data-mood="0"]{background:#8a9072;} .mood-dot[data-mood="1"]{background:#5b6149;} .mood-dot[data-mood="2"]{background:#c08a7f;} /* ===================== BUTTONS ===================== */ .btn-mag{ display:inline-block;text-decoration:none; background:var(--accent);color:#fff; padding:15px 32px;border-radius:40px; font-family:var(--sans);font-size:13px;letter-spacing:2px;text-transform:uppercase; transition:.3s;cursor:pointer;border:none;width:fit-content; } .btn-mag:hover{background:var(--accent-deep);transform:translateY(-2px);color:#fff;} .btn-outline-mag{background:transparent;border:1px solid var(--ink);color:var(--ink);} .btn-outline-mag:hover{background:var(--ink);color:#fff;} /* ===================== PAGE HERO (внутренние) ===================== */ .page-hero{padding:130px 5vw 50px;text-align:center;} .page-hero .kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;} .page-hero h1{font-size:clamp(40px,6vw,80px);} .page-hero h1 em{color:var(--rose);font-style:italic;} .page-hero p{color:var(--muted);max-width:640px;margin:18px auto 0;font-size:18px;} .crumbs{font-size:12px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:26px;} .crumbs a{color:var(--accent);text-decoration:none;} /* ===================== SECTION ===================== */ .sec{padding:80px 5vw;} .sec-head{text-align:center;margin-bottom:56px;} .sec-kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;} .sec-head h2{font-size:clamp(34px,5vw,62px);} .sec-head h2 em{color:var(--rose);font-style:italic;} .sec-head p{color:var(--muted);max-width:600px;margin:18px auto 0;} .bg-deep{background:var(--beige-deep);} /* ===================== COVER (главная) ===================== */ .cover{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;padding-top:58px;} .cover-left{padding:6vh 5vw;display:flex;flex-direction:column;justify-content:center;} .issue-tag{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:22px;} .cover-left h1{font-size:clamp(46px,7vw,104px);margin-bottom:22px;} .cover-left h1 em{color:var(--rose);font-style:italic;} .cover-sub{font-size:19px;color:var(--muted);max-width:440px;margin-bottom:32px;} .rubrics{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;} .rubric{font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:8px 16px;border:1px solid var(--rose);border-radius:30px;background:rgba(217,185,176,.12);} .cover-right{position:relative;overflow:hidden;min-height:50vh;} .cover-right img,.cover-right .ph{width:100%;height:100%;object-fit:cover;} .cover-caption{position:absolute;bottom:30px;left:30px;right:30px;background:rgba(245,239,230,.92);padding:18px 22px;backdrop-filter:blur(4px);} .cover-caption .num{font-family:var(--serif);font-size:34px;color:var(--accent);line-height:1;} .cover-caption p{font-size:14px;color:var(--muted);margin:0;} /* ===================== MAGAZINE PAGES (товары) ===================== */ .mag-page{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;max-width:1200px;margin:0 auto 100px;} .mag-page.reverse .mag-img{order:2;} .mag-img{position:relative;} .mag-img img,.mag-img .ph{width:100%;height:520px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);} .mag-num{position:absolute;top:-26px;left:-10px;font-family:var(--serif);font-size:118px;color:var(--rose-soft);z-index:0;line-height:1;} .mag-text{position:relative;z-index:1;} .mag-text .tag{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;} .mag-text h3{font-size:clamp(30px,4vw,44px);margin-bottom:16px;} .mag-text h3 em{color:var(--rose);font-style:italic;} .mag-text p{color:var(--muted);margin-bottom:20px;font-size:16px;} .mag-feats{list-style:none;margin:0 0 26px;padding:0;} .mag-feats li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;display:flex;justify-content:space-between;gap:16px;} .mag-feats li span{color:var(--accent);text-align:right;} .price-pill{display:inline-block;font-family:var(--serif);font-size:24px;color:var(--accent-deep);margin-bottom:18px;} /* ===================== TREND CARDS ===================== */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto;} .trend-card{background:var(--paper);border-radius:var(--radius);overflow:hidden;transition:.4s;text-decoration:none;color:inherit;display:block;} .trend-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);} .trend-card img,.trend-card .ph{width:100%;height:240px;object-fit:cover;} .trend-body{padding:22px 24px 28px;} .trend-body .n{font-family:var(--serif);color:var(--rose);font-size:22px;} .trend-body h4{font-family:var(--serif);font-size:24px;margin:4px 0 10px;} .trend-body p{font-size:14px;color:var(--muted);margin:0;} /* ===================== WHY US ===================== */ .why{background:var(--olive);color:var(--beige);} .why .sec-kicker{color:var(--rose-soft);} .why .sec-head h2 em,.why .sec-head p{color:var(--rose-soft);opacity:1;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;max-width:1100px;margin:0 auto;} .why-item{text-align:center;} .why-item .big{font-family:var(--serif);font-size:58px;line-height:1;color:#fff;margin-bottom:10px;} .why-item p{font-size:15px;opacity:.85;margin:0;} /* ===================== STEPS ===================== */ .step{text-align:center;padding:30px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);} .step .circle{width:54px;height:54px;border-radius:50%;background:var(--rose-soft);color:#fff;font-family:var(--serif);font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;} .step h4{font-family:var(--serif);font-size:22px;margin-bottom:8px;} .step p{font-size:14px;color:var(--muted);margin:0;} /* ===================== GALLERY (masonry) ===================== */ .gallery-grid{columns:3;column-gap:16px;max-width:1200px;margin:0 auto;} .gallery-grid .cell{break-inside:avoid;margin-bottom:16px;display:block;border-radius:var(--radius);overflow:hidden;position:relative;text-decoration:none;} .gallery-grid img,.gallery-grid .ph{width:100%;display:block;transition:.4s;} .gallery-grid .ph{height:280px;} .gallery-grid .cell:hover img{transform:scale(1.03);} .gallery-cap{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(58,53,47,.75));color:#fff;font-size:14px;opacity:0;transition:.3s;} .gallery-grid .cell:hover .gallery-cap{opacity:1;} /* category filter chips */ .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px;} .chip{font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:9px 18px;border:1px solid var(--rose);border-radius:30px;text-decoration:none;color:var(--ink);transition:.3s;} .chip:hover,.chip.active{background:var(--accent);color:#fff;border-color:var(--accent);} /* ===================== REVIEWS ===================== */ .review-card{background:var(--paper);border-radius:var(--radius);padding:30px 28px;border:1px solid var(--line);height:100%;} .review-card .quote{font-family:var(--serif);font-size:54px;color:var(--rose-soft);line-height:.4;height:24px;} .review-card p{color:var(--ink);font-size:15px;margin:10px 0 18px;} .review-card .who{font-family:var(--serif);font-size:20px;color:var(--accent-deep);} .review-card .date{font-size:12px;color:var(--muted);letter-spacing:1px;} /* ===================== CTA ===================== */ .cta{background:var(--rose-soft);text-align:center;} .cta h2{font-size:clamp(32px,5vw,58px);margin-bottom:16px;} .cta h2 em{font-style:italic;color:var(--olive-deep);} .cta p{color:var(--ink);max-width:520px;margin:0 auto 32px;opacity:.85;} /* ===================== FORM ===================== */ .form-wrap{max-width:560px;margin:0 auto;background:#fff;padding:48px 44px;border-radius:8px;box-shadow:var(--shadow);} .form-wrap h3{font-size:32px;text-align:center;margin-bottom:6px;} .form-wrap .sub{text-align:center;color:var(--muted);margin-bottom:28px;} .field{margin-bottom:16px;} .f-input,.field input,.field select,.field textarea{ width:100%;padding:14px 18px;border:1px solid var(--beige-deep); border-radius:var(--radius);font-family:var(--sans);font-size:15px;background:var(--beige);color:var(--ink); } .f-input.light-bg{background:var(--beige);} .field input:focus,.field select:focus,.field textarea:focus,.f-input:focus{outline:none;border-color:var(--accent);} .form-wrap .btn-mag{width:100%;text-align:center;} .form-note{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;} .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;} /* ===================== ARTICLE ===================== */ .article{max-width:760px;margin:0 auto;} .article .cover-img,.article .cover-img .ph{width:100%;height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:30px;} .article-body{font-size:18px;color:var(--ink);} .article-body h2{font-family:var(--serif);font-size:34px;margin:36px 0 14px;color:var(--accent-deep);} .article-body p{margin-bottom:18px;} .prose h2{font-family:var(--serif);color:var(--accent-deep);margin:28px 0 12px;} .prose p{margin-bottom:16px;} /* ===================== FOOTER ===================== */ .footer{background:var(--ink);color:var(--beige);padding:60px 5vw 28px;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto 36px;} .foot-grid h4{font-family:var(--serif);font-size:22px;margin-bottom:16px;} .foot-grid a{color:var(--beige);text-decoration:none;opacity:.8;display:block;margin-bottom:8px;font-size:14px;} .foot-grid a:hover{opacity:1;color:var(--rose-soft);} .foot-grid p{opacity:.75;font-size:14px;margin-bottom:8px;} .foot-logo{font-family:var(--serif);font-size:30px;margin-bottom:14px;} .foot-logo span{color:var(--accent);} .foot-bottom{border-top:1px solid rgba(245,239,230,.15);padding-top:22px;text-align:center;font-size:13px;opacity:.6;max-width:1200px;margin:0 auto;} /* ===================== FLOATING CALL ===================== */ .float-call{position:fixed;bottom:24px;right:24px;z-index:900;background:var(--accent);color:#fff;text-decoration:none;padding:14px 24px;border-radius:40px;font-size:14px;letter-spacing:1px;box-shadow:0 14px 30px -10px rgba(111,118,90,.6);transition:.3s;} .float-call:hover{background:var(--accent-deep);transform:translateY(-3px);color:#fff;} /* ===================== MESSAGES ===================== */ .flash-wrap{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:1100;width:min(92%,520px);} .flash{padding:14px 20px;border-radius:var(--radius);margin-bottom:10px;font-size:14px;box-shadow:var(--shadow);} .flash.success{background:#e8efe0;color:#4a5a36;border:1px solid #c8d6b3;} .flash.error{background:#f6e0db;color:#8a443a;border:1px solid #e6c2b9;} /* ===================== REVEAL ANIMATION ===================== */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:none;} /* ===================== RESPONSIVE ===================== */ @media(max-width:992px){ .cover{grid-template-columns:1fr;} .grid-4,.grid-3{grid-template-columns:1fr 1fr;} .foot-grid{grid-template-columns:1fr;} .gallery-grid{columns:2;} .mag-page{grid-template-columns:1fr;gap:30px;} .mag-page.reverse .mag-img{order:0;} } @media(max-width:680px){ .topnav{display:none;position:absolute;top:58px;right:0;background:var(--beige);flex-direction:column;padding:24px;gap:18px;width:74%;box-shadow:-10px 10px 30px -15px rgba(0,0,0,.3);} .topnav.open{display:flex;} .burger{display:flex;} .top-phone{display:none;} .grid-4,.grid-3{grid-template-columns:1fr;} .gallery-grid{columns:1;} .form-wrap{padding:34px 22px;} .mag-img img,.mag-img .ph{height:340px;} } /* ===================== COOKIE CONSENT ===================== */ .cookie-bar{ position:fixed;left:16px;right:16px;bottom:16px;z-index:1200; display:flex;align-items:center;gap:20px;flex-wrap:wrap; max-width:1100px;margin:0 auto; background:rgba(58,53,47,.96);color:var(--beige); padding:18px 24px;border-radius:10px; box-shadow:0 20px 50px -20px rgba(58,53,47,.7); backdrop-filter:blur(6px); animation:cookie-up .5s ease; } .cookie-bar[hidden]{display:none;} .cookie-text{flex:1 1 320px;margin:0;font-size:14px;line-height:1.5;opacity:.92;} .cookie-text a{color:var(--rose-soft);text-decoration:underline;} .cookie-text a:hover{color:#fff;} .cookie-bar .cookie-accept{flex:0 0 auto;padding:13px 30px;} @keyframes cookie-up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}} @media(max-width:680px){ .cookie-bar{flex-direction:column;align-items:stretch;text-align:center;left:10px;right:10px;bottom:10px;padding:18px;} .cookie-bar .cookie-accept{width:100%;} .float-call{bottom:auto;top:70px;} }