/* Change 2026/06/01 */ /*-----------*/ /* 3.1 Header -----*/ /*-----------------------------------*/ body > header {z-index:200; width:100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;} body > header.mh-height.temp-01 {height:calc(var(--head-logo-h) + 3em + var(--mrg-f)*2);} body > header.mh-height.temp-02 {height:var(--head-h); padding-bottom:0; padding-top:0;} body > header.mh-height.temp-03 {height:calc(var(--head-logo-h) + var(--mrg-f)*2);} body > header.mh-absolute {position:absolute; height:var(--head-h);} /* if on image*/ body > header.mh-absolute + main article.main-header-1 {margin-top:var(--head-h);} body > header.mh-absolute + main .index-ban {margin-top:0; margin-bottom:0; height:100vh;} body > header.mh-absolute + main .index-ban .sl-carousel .sl-dots {top:-4em;} body > header.mh-fixed {position:fixed; height:var(--head-h); background:var(--clr-s-o);} body > header.mh-fixed.sticky {background-color:var(--clr-w); padding-bottom:0; padding-top:0; background:rgba(255,237,116,0.63); } body > header.mh-fixed + main {margin-top:var(--head-h); /* or not */} body > header.mh-fixed.mh-absolute + main {margin-top:0px;} .temp-01, .temp-02, .temp-03 {width:100%; margin:0 auto; clear:both; padding:0 calc((100vw - 1vw* var(--wrap)) / 2); padding-top:var(--mrg-f); padding-bottom:var(--mrg-f); background:var(--clr-w-o); /* margin-bottom:var(--mrg-f); box-shadow:0 1px 7px rgb(0 0 0 / 25%); border-bottom:0px var(--clr-m) solid; background:rgba(251,247,247,0.10) */ display:flex; justify-content:space-between; flex-wrap:wrap; -webkit-transition:all 0.4s ease; transition:all 0.4s ease;} /* 3.1.1 Header Menu _____________________________________*/ #menudrop, #menudrop ul,#menudrop ul li,#menudrop ul li a,#menudrop #head-mobile{border:0;list-style:none;line-height:1;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; display:block; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; transition: all .25s ease;} #menudrop {display:flex!important; justify-content: space-between; width:100%; font-family:sans-serif; font-size: 1em; flex-grow:1;} #menudrop > * {margin-left:var(--mrg-f)} #menudrop > *:first-child{margin-left:0px; margin-right:1em} .header-menu-drop #menudrop > .button + * {margin-left:0px} .header-menu-slide .breadcrumbs {width: 100%; /* position: absolute; bottom: 0; left: 0%; */ font-size:0.9em;} .header-menu-slide .icon-svg::before, .header-menu-slide .icon-svga::after, .header-menu-drop .icon-svg::before, .header-menu-drop .icon-svga::after {padding:1em;} #menudrop ul {padding-left: 0} #menudrop div:last-child {margin-right:0px;} #menudrop ul {margin-right: 20px;} #menudrop ul:last-child {margin-right:0px;} #menudrop .button {margin-right:0px;} /* 3.1.2 Header Template _____________________________________*/ .temp-01 #menudrop, .temp-02 #menudrop {align-items:center;} .temp-02.header-menu-slide #menudrop > *:first-child {flex-grow:1;} .temp-01 .header-top {width:100%; margin-bottom:1em} .temp-03 #menudrop .breadcrumbs {order:15; margin-left:var(--head-mrg); margin-bottom:0; position: absolute; bottom: 0; left: var(--head-logo-w); width:calc(100% - var(--head-logo-w) - var(--head-mrg));} #menu-s {top:0} /* 3.1.3 Header Logo _____________________________________*/ .head-logo {display:flex; align-items:center; width:var(--head-logo-w); max-width:100%; z-index:993} .header-menu-drop .head-logo {max-width:220px; padding:5px 0; line-height:0; transition:all .4s ease-out} .header-menu-drop .head-logo img {width:auto; max-width:100%} /* 3.1.4 Header Buttons _____________________________________*/ .navigation {flex-grow:1} #menudrop .head-smm {margin:0px 0px; display:flex; flex-wrap:nowrap; align-items:flex-start;} #menudrop .icons-block {margin:0 0 0 var(--mrg-f);} .head-smm.icon-box .icon-svg, .head-smm.icons-block .icon-svg, .head-smm.icon-box .icon-svg::before, .head-smm.icons-block .icon-svg::before, .head-sub.icon-box .icon-svg, .head-sub.icons-block .icon-svg, .head-sub.icon-box .icon-svg::before, .head-sub.icons-block .icon-svg::before {width:calc(var(--icon-w)/1.5); height:calc(var(--icon-h)/1.5); padding:0 } .head-smm a, .head-search, .head-sub > li {/*margin-left:calc(var(--mrg-f)/2)*/} .head-smm > * {margin:0 0 0 var(--mrg-f);} .head-sub {display:flex; align-items:flex-start;} /*.header-menu-drop .head-sub{flex-grow:1}*/ .header-menu-slide .head-sub {flex-grow:1;} .head-sub > li:first-child {margin-left:0} .head-sub > li {background: none} .head-sub > li::before {margin-right:calc(var(--mrg-f)/2)} /*.head-smm a p, .head-search a p, .head-sub > li::before {background-repeat:no-repeat; content:''; background-position:left; background-size:contain; padding:calc(var(--mrg-f)*0.8); }*/ /*.head-smm a {margin-right:1em} .head-smm a:last-child {margin-right:0px} .head-smm a:first-child {margin-right:0px} */ .head-search {width:auto; margin-left:var(--mrg-f);} .head-search .icon-svg-search::before {margin:0;} .head-smm > * {margin:0 0 0 var(--mrg-f);} .head-lang {display:flex;} /* 3.1.5 Header Language _____________________________________*/ .wpm-language-switcher {display:flex!important; align-items: center;} .wpm-language-switcher li {border:none!important; padding: 0 5px!important;} .wpm-language-switcher .active span span {color: var(--clr-m); font-weight: 700;} .wpm-language-switcher li:hover{background: none!important;} .wpm-language-switcher li:hover a span {color: var(--clr-m)} /* 3.1.6 Header Breadcrumbs _____________________________________*/ .breadcrumbs {display:flex; flex-wrap:wrap; width:100%; margin:1em 0;} .breadcrumbs p {margin:0} .breadcrumbs span {line-height:1.5} .breadcrumbs a {text-decoration: none; color:var(--clr-m);} .breadcrumbs a:hover {color:var(--clr-m);} .breadcrumbs a span {text-decoration: none; color:var(--clr-b); font-size:inherit;} .breadcrumbs a span:hover {color: var(--clr-m);} .breadcrumbs__separator {color:var(--clr-m); font-weight: 700; padding: 0 5px} .breadcrumbs__current {color:var(--clr-g); font-size:inherit; font-weight:300;} .breadcrumbs li {padding-right:15px; display: block;} .breadcrumbs li:before {content: '';} @media screen and (max-width:1080px) { .header-menu-slide .head-sub, .temp-01 .head-sub {display:none} .temp-02.header-menu-slide #menudrop > *:first-child, .temp-03.header-menu-slide #menudrop > *:first-child {flex-grow:1;} .temp-02.header-menu-drop .head-logo {max-width:100%; flex-grow:1} .temp-02.header-menu-drop .head-logo img {max-height:80px;} } @media (max-width:680px) { .header-menu-slide, .header-menu-drop {font-size:0.8em;} #menudrop > * {margin-left:1em;} } @media (max-width:460px) { .head-smm a, .head-search, .head-sub > li {margin-left:0;} } /* Change 2026/04/01 */ /*-----------*/ /* 3.1 Menu D -----*/ /*-----------------------------------*/ /* 24.08.30 - px-em */ /* TOP HEADER MENU*/ .menu-nav-ul {display:flex; justify-content:space-between; flex-wrap:wrap; padding:0 7%; width:inherit!important} /* #menudrop div {margin-right: 20px;} #menudrop div:last-child {margin-right:0px;} */ .header-menu-drop .button {margin-right:0px;} /* .logo-left #menudrop ul {display: flex; justify-content: space-between; margin-left: 120px;} .logo-left .logo {left:0%;} .logo-right #menudrop ul {display: flex; justify-content: space-between; margin-right: 120px;} .logo-right .logo {right:0%;}*/ .menu-color-rev {background:var(--clr-m)} .menu-color-rev { --clr-m:var(--clr-b)} #menudrop > nav { --menu-nav-pad:0.75em; --menu-nav-font-s:1em; } #menudrop ul {display: flex; justify-content: space-between; margin-bottom: 0px; width: inherit; padding-left: 0;} /* #menudrop:after,#menudrop > nav > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} */ #menudrop #head-mobile{display:none} #menudrop > nav > ul span > li {float:left} #menudrop > nav > ul > li > a {padding:var(--menu-nav-pad) 0px; letter-spacing:1px;text-decoration:none;color:var(--clr-b); font-size:1.2em; text-transform:uppercase; } #menudrop > nav > ul > li:hover > a, #menudrop ul li.active a{} #menudrop > nav > ul > li:hover,#menudrop ul li.active:hover,#menudrop ul li.active,#menudrop ul li.has-sub.active:hover{z-index:991} #menudrop > nav > ul > li.has-sub > a{padding-right:1em; display:flex; align-items:center;} #menudrop > nav > ul > li.has-sub > a:before, #menudrop > nav > ul > li.has-sub > a:after {display:flex; top:auto; align-content:center;position:absolute;background:var(--clr-m);content:'';} #menudrop > nav > ul > li.has-sub > a:after{font-size:1em; right:0.0625em; width:0.5em; height:0.125em;} #menudrop > nav > ul > li.has-sub > a:before{font-size:1em; right:0.25em; height:0.5em; width:0.125em;} #menudrop > nav > ul > li.has-sub:hover > a:before{height:0; visibility: hidden} #menudrop ul ul{position:absolute; left:-9999px; display:block; background:var(--clr-w); border-bottom:1px solid var(--clr-m); padding-left:0px;} #menudrop ul ul li:first-child {} #menudrop ul ul li {height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease; transition:all .25s ease} #menudrop ul ul li:hover{} #menudrop li:hover > ul{left:auto} #menudrop li:hover > ul > li{height:auto} #menudrop ul ul ul{margin-left:100%;top:0; padding: 0} #menudrop ul ul li a{display:flex; align-items:center;padding:var(--menu-nav-pad);width:250px;font-size:1em;text-decoration:none;color:var(--clr-b);font-weight:400;} #menudrop ul ul li:last-child > a,#menudrop ul ul li.last-item > a{border-bottom:0} #menudrop ul ul li:hover > a,#menudrop ul ul li a:hover{color:var(--clr-w); font-weight: 700; background: var(--clr-m)} #menudrop ul ul li.has-sub > a:after, #menudrop ul ul li.has-sub > a:before {position:absolute; background:var(--clr-m);content:''; display:block; font-size:1.125em;} #menudrop ul ul li.has-sub > a:after{width:0.5em; height:0.125em; right:0.5em;} #menudrop ul ul li.has-sub > a:before{height:0.5em; width:0.125em; right:0.7em;} #menudrop ul ul > li.has-sub:hover > a:after{background:var(--clr-w)} #menudrop ul ul > li.has-sub:hover > a:before {top:1.5em;height:0} #menudrop ul ul li.has-sub:hover,#menudrop ul li.has-sub ul li.has-sub ul li:hover{background:var(--clr-m)} #menudrop ul ul ul li.active a{border-left:1px solid var(--clr-m)} #menudrop > nav > ul > li.has-sub > ul > li.active > a,#menudrop > nav > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid var(--clr-m)} @media screen and (max-width:1620px){ .menu-nav-ul {} #menudrop > nav > ul > li > a {font-size: 1.25em;} } @media screen and (max-width:1440px){ .menu-nav-ul {} #menudrop > nav > ul > li > a {font-size: 1.125em;} #menudrop ul ul li a{width:220px;font-size:0.875em;} } @media screen and (max-width:1180px){ .menu-nav-ul {} #menudrop > nav > ul > li > a {font-size: 1em;} } @media screen and (max-width: 1086px) { .menu-nav-ul {padding: 0; max-height: 100vh; overflow: auto;} .menu-nav-ul li:hover .submenu-button:before, .menu-nav-ul li:hover .submenu-button:after {background: var(--clr-w);} #menudrop{flex-wrap: wrap;} #menudrop ul{width:100%!important; padding:1em 0; order: 7; margin-right:0; display: block} #menudrop ul li{width:100%;border-top:1px solid var(--clr-m); padding-left:1em} #menudrop ul li:hover{padding-left:1.5em} #menudrop ul ul{background:none;} #menudrop ul ul li,#menudrop li:hover > ul > li{height:auto} #menudrop ul li a {width:100%;border-bottom:0; padding:var(--menu-nav-pad) 0} #menudrop ul ul li a {width:100%;border-bottom:0; padding-left:0px; color:var(--clr-w); background:none; width:calc(95% - 2.25em);} #menudrop > nav > ul > li{float:none; padding:0;} #menudrop ul ul li:hover{background:none!important} #menudrop ul ul ul li a{padding-left:0.5em} #menudrop ul ul li:hover > a, #menudrop ul ul li.active > a{color:var(--clr-w);} #menudrop > nav > ul > li > a {padding-right:var(--menu-nav-pad)} #menudrop > nav > ul > li:hover > a {color:var(--clr-w); background:var(--clr-m); } #menudrop ul ul,#menudrop ul ul ul{padding: 0; position:relative;left:0;width:100%;margin:0;text-align:left;border-bottom: 0;} #menudrop > nav > ul > li.has-sub > a:after,#menudrop > nav > ul > li.has-sub > a:before,#menudrop ul ul > li.has-sub > a:after,#menudrop ul ul > li.has-sub > a:before{display:none} #menudrop #head-mobile{display:block;padding:0px;color:var(--clr-d);font-size:0.8em;font-weight:700} #menudrop li .submenu-button {position:absolute;right:0;z-index:99;display:flex;justify-content:center;align-items:center;border-left:1px solid var(--clr-m);height:2.5em;width:2.5em; height:calc(var(--menu-nav-font-s) + var(--menu-nav-pad)*2); width:calc(var(--menu-nav-font-s) + var(--menu-nav-pad)*2); cursor:pointer} #menudrop li .submenu-button:after{position:absolute;width:1em;height:0.225em;background:var(--clr-m);content:''} #menudrop li .submenu-button:before{position:absolute;width:0.225em;height:1em;background:var(--clr-m);content:''} #menudrop li:hover .submenu-button {border-left:1px solid var(--clr-w);} #menudrop ul ul li:hover .submenu-button {border-left:1px solid var(--clr-m);} #menudrop li:hover .submenu-button:after, #menudrop li:hover .submenu-button:before{background:var(--clr-w);} #menudrop li:hover li .submenu-button:after, #menudrop li:hover li .submenu-button:before{background:var(--clr-m);} #menudrop li li:hover .submenu-button:after, #menudrop li li:hover .submenu-button:before{background:var(--clr-w);} #menudrop ul ul .submenu-button:after, #menudrop ul ul .submenu-button:before{} #menudrop ul ul .submenu-button{} #menudrop ul ul.open{} /**/ #menudrop ul ul .submenu-button:after{} #menudrop ul ul .submenu-button:before{} #menudrop .submenu-button.submenu-opened:before{display:none} #menudrop ul ul ul li.active a{border-left:none} #menudrop > nav > ul > li.has-sub > ul > li.active > a,#menudrop > nav > ul ul > li.has-sub > ul > li.active > a{border-top:none} #menudrop .button{width:2.25em;height:2.25em;position:relative;cursor:pointer;z-index:999; order:9} #menudrop .navigation {z-index:999; order:10; width:100%; background:var(--clr-g);} #menudrop .button:after, #menudrop .button:before {position:absolute; top:1em; right:0; display:block; height:0.7em; width:2.25em; border-top:0.3em solid var(--clr-m); border-bottom:0.3em solid var(--clr-m); content: '';} #menudrop .button:before {top:0px; height:0px; border-bottom:0;} #menudrop .button.menu-opened:after{transform:rotate(45deg); border-bottom:0; height:0} #menudrop .button.menu-opened:before{transform:rotate(-45deg)} #menudrop .button.menu-opened:after, #menudrop .button.menu-opened:before{width:2.25em; top:1.125em; background:var(--clr-m);} } /* TOP HEADER MENU END*/ /* Change 2026/06/01 */ /*-----------*/ /* 3.2 Footer -----*/ /*-----------------------------------*/ footer.wrap {background:var(--clr-g);} footer.wrap h2, footer.wrap h3, footer.wrap h4, footer.wrap h5 {margin-top:0} footer.foot-dark {background:var(--clr-m)} footer.foot-dark, footer.foot-dark p, footer.foot-dark span {color:var(--clr-w);} footer.foot-dark a {color:var(--clr-w); color:var(--clr-s); color:var(--clr-i);} footer.foot-dark .icon-svg::before {background:var(--clr-m); background:var(--clr-s); background:var(--clr-i);} footer.foot-light {background:var(--clr-g)} footer.foot-light, footer.foot-light p, footer.foot-light span {color:var(--clr-b);} footer.foot-light a {color:var(--clr-w); color:var(--clr-s); color:var(--clr-m);} body > footer > * {margin-top:var(--head-mrg)} body > footer > *:last-child {margin-bottom:var(--head-mrg)} .footer-bottom-01 .footer-bottom-02 .footer-bottom-03 /* ONLY copywriting - OLD footer-copywriting*/ .site-info {} .copywriting {font-size:0.9em;} .copywriting-logo {display:flex; justify-content:center;} .footer-bottom-01 {background:var(--clr-m); padding-top:var(--mrg-f); padding-bottom:var(--mrg-f);} .footer-bottom-01 {background:var(--clr-m); padding-top:var(--mrg-f); padding-bottom:var(--mrg-f);} footer.foot-light .footer-bottom-01, footer.foot-light .footer-bottom-01 p, footer.foot-light .footer-bottom-01 span {color:var(--clr-i);} .footer-bottom-02 {} .footer-bottom-03 {} .foot-smm {align-items: center} .foot-smm a:first-child {margin-right:0px} @media screen and (max-width:720px) { footer.wrap *[class^="column-"] .w50, footer.wrap *[class^="column-"] .w70 {width:100%;} } /* 3.2.1 footer-mobile-phone-btn _____________________________________*/ .footer-mobile-phone-btn {width:0%; height:0px; overflow:hidden; margin:0;} @media screen and (max-width: 680px) { .footer-mobile-phone-btn {width:calc(100% - var(--icon-w) - var(--mrg-f)); height:var(--icon-h); background:var(--btn-bg); display:flex; margin:var(--mrg-f) 0; align-items:center; justify-content:center; border-radius:var(--btn-brd-rad); border:var(--btn-brd-s) solid var(--btn-brd-c);} .footer-mobile-phone-btn {width:calc(100% - 4em); height:3em; display:flex; align-items:center; justify-content:center; background:var(--clr-m); margin:1em 0px; margin-top:1.5em} .footer-mobile-phone-btn a {display:flex; width:100%; height:100%; justify-content:center; align-items:center;} .footer-mobile-phone-btn a p {color:var(--clr-i); font-size:var(--btn-font-s); font-weight:600; margin-bottom:0} footer > *:last-child {margin-bottom:var(--mrg-f); margin-top:var(--mrg-f); /* Залежить від font-size*/} } /* 3.2.2 bottom-form-block _____________________________________*/ .bottom-form-block {margin:1em auto 0; justify-content:center; background: url('../img/bottom-form-block.jpg') center no-repeat; background-size: cover; padding:3em} .bottom-form-block h2 {color:var(--clr-g); font-weight:400; font-size:2.5em; text-align:center; margin:0.5em 1em; text-transform:none;} .bottom-form-block > div {color:var(--clr-g); width:90%; margin:0 auto 2em; text-align:center; font-size:1.125em} .bottom-form-block .button {margin-bottom: 1em; width: 100%;} .bottom-form-block .form-container {width:70%} .bottom-form-block .form-container .column-2 {width:100%} .bottom-form-block .policy-check label {color:var(--clr-i)} .bottom-form-block .policy-check label a {color:var(--clr-i)} @media screen and (max-width: 680px) { .bottom-form-block {padding:1em calc((100vw - 1vw* var(--wrap)) / 2)} .bottom-form-block h2 {font-size:2em; margin:0.5em 0em;} .bottom-form-block > div {width:100%; padding:0} .bottom-form-block .form-container {width:100%;} } /* Change 2026/06/06 */ /*-----------*/ /* 3.3 Structure -----*/ /*-----------------------------------*/ /* 3.3.0 Main _____________________________________*/.main-content {} STRUC OR SINGLE???????? {} .main-footer, .section-footer, .body-footer, {} div.main-content {position:relative; display:flex; justify-content:space-between; flex:1 0 auto; width:100%; flex-wrap:wrap; margin:0 auto; clear:both; padding:0 calc((100vw - 1vw* var(--wrap)) / 2); --top-page-h:calc(100vh - 107px - 1em);} .main-content > section, .main-content {margin-top:0} div.main-content > header {width:100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; /* margin-bottom:var(--mrg-f)*/} .main-page {width:100%; display:flex; flex-wrap:wrap} .main-article {??????????????????? 4 cat ?????} .main-body {width:100%} .main-body > h1, .main-body-top h1 {margin:0 0 1em; display:inline; text-transform:none; width:auto} .main-body-top > h1 {margin-top:0; display:inline;} .main-body-top {clear:both; margin-top:0} .main-body-img {background:var(--clr-w); position:relative} .main-body-top {margin-bottom:0} /*.main-body-top p {padding-bottom:1em} */ .main-body-top p a {var(--clr-i)} .main-body-sku {color:var(--clr-g); margin:var(--mrg-f) 0} .main-body-subtitle {font-size:1.25em; font-weight:600; margin:var(--mrg-f) 0 var(--mrg-c);} .main-body-meta {margin:var(--mrg-f) 0 var(--mrg-c)} .main-body-desc {margin-bottom:var(--mrg-f); order:0!important; display:flex; align-items:center;} .main-body-desc, .main-body-desc p {font-weight:600} .main-body-desc p:last-child {margin-bottom:0} .main-body-toc {} .main-body-txt {} .main-body-text {} .main-body-top-line {display:flex; align-items:center; flex-wrap:wrap; border-bottom:1px solid; padding:0.5em 0;} .main-body-top-line p {display:flex; align-items:center; margin-right:1em;} .main-body-top-line span {font-size:1.125em; margin-right:1em; background:var(--clr-w); color:var(--clr-b); padding:0.5em; display:block; border-radius:1.5em;} .main-body-top .box-date {} .main-body-top .box-date::before {} .main-body-top .box-autor {} .main-body-top .box-autor::before {} .main-body-top .box-read {} .main-body-top .box-read::before {} .main-body-top .box-price, .block-price {display:flex; justify-content:space-between; align-items:center; margin:var(--mrg-f) 0;} .main-body-top .box-price .price-old {text-decoration:line-through} .main-body-top .box-price .price-now, .block-price .price-main {color:var(--clr-m); font-weight:600; font-size:2em; padding-bottom:0} .main-body-top .box-button, .main-body-top .box-price p.btn, .block-price p.btn, .block-price button.btn {width:auto; margin:0} .main-body-top .box-tag > * {margin:0 var(--mrg-f) 0 0; padding:0} .main-body-top .box-tag a {} .main-body-top .box-tag a p {color:var(--btn-clr); border-radius:var(--btn-brd-rad); border:var(--btn-brd-s) solid var(--btn-brd-c); background:var(--btn-bg); text-transform:uppercase; padding:calc(var(--mrg-f)/2) var(--mrg-f); text-align:center;} .main-body-top .box-date, .main-body-top .box-read, .main-body-top .box-autor {display:flex; align-items:center; color:var(--clr-d); margin-bottom:var(--mrg-c);} .main-body-top .box-date span, .main-body-top .box-read span, .main-body-top .box-autor span {padding-right:var(--btn-pad);} .main-body-top .box-date span::before, .main-body-top .box-read span::before, .main-body-top .box-autor span::before {padding: 0.75em;} .main-body-top .box-read strong, .main-body-top .box-autor a {margin-left:0.5em;} .main-body-top .breadcrumbs {width:auto; margin:0 0 1em} .main-body-top .breadcrumbs p {margin:0; padding:0} .main-body-content {width:100%} .main-body-content p, .main-body-cat-content p {margin-bottom:var(--mrg-c);} .main-body-content a {color:var(--clr-m);} .main-body-content strong {} .main-body-content ul, .main-body-cat-content ul, .main-body-content ol, .main-body-cat-content ol {margin:var(--mrg-c) 0;} .main-body-content h2 {font-size:1.25em; margin:var(--mrg-f) 0 var(--mrg-c)} .main-body-content h3 {font-size:1.125em} .main-body-content ol li {list-style:decimal} .main-body-content li > ul, .main-body-content li > ol, .main-body-content ul > ul, .main-body-content ol > ol{margin-top:0px} .main-body-content ul li {list-style: disc;} .main-body-content ul li::marker {color:var(--clr-m); content:'⬤'; content:'●'; content: '\00A0\25CF\00A0\00A0'; font-size: 0.8em;} .main-body-single li {margin-bottom:var(--mrg-c)} .main-body-single p {margin-bottom:var(--mrg-f)} .main-body-empty {clear:both; margin-bottom:var(--mrg-f)} .main-body-tables {display:flex;} .main-body-dots, .table-dots {width:100%; background-image:radial-gradient(circle, currentcolor 0.5px, transparent 1.5px); background-position:bottom; background-size:5.1px 1.8px; background-repeat:space no-repeat; height:1em; margin:0.125em 0.5em 0; flex:1} .main-body-tab {width:100%; padding-top:var(--mrg-f)} .main-body-grey {color:var(--clr-g)} /* 3.3.1 Main-header _____________________________________*/ .main-header-bg-img {position:absolute; top:0; z-index:-1; padding:0; width:100%; align-content:center; height:var(--top-page-h);} .main-header-bg-img img{object-fit:cover; height:100%; width:100%;} .main-page > .main-header-bg-img {position:relative; order:0; height:calc(var(--top-page-h)/2); width:calc(100% + (100vw - 1vw * var(--wrap))); margin:0 calc(1vw * var(--wrap) / 2 - 50vw) var(--mrg-f);} .main-page > .main-header-bg-img .main-header-gr-top {height:calc(var(--top-page-h)/2);} .main-header-gr-top {background:var(--clr-w-o); height:var(--top-page-h); position:absolute; width:100%; top:0} /*#article-body-main {width:auto;}*/ .main-header-gr-but {color:var(--clr-b); width:100%; margin:0 auto 2em; position:relative; height:auto;} .main-header-arr-to-down {position:absolute; right:2vw; bottom:5vw; transform:rotate(270deg);} .main-header-arr-to-down a{color:var(--clr-w); display:block; animation-name:floatingrev; animation-duration:3s; animation-iteration-count:infinite; animation-timing-function: ease-in-out;} .main-header-arr-to-down a img {animation-name: floating; animation-duration:3s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;} /* .main-header-arr-to-down img {display:none}*/ @keyframes floating {from {transform:translate(0, 0px);} 65% {transform:translate(0, 15px);} to {transform:translate(0, -0px);}} @keyframes floatingrev {from {transform:translate(0, 0px);} 65% {transform:translate(15px, 0);} to {transform: translate(0, -0px);}} /* 3.3.2 Main-header-1 _____________________________________*/ .main-header-1 {width:100%} .main-header-1 main > header {} .main-header-1 .main-body-desc {display:unset; width:100%} .main-header-1 > .breadcrumbs {width:100%; margin:1em 0} .main-header-1 .main-header-bg-img {position:relative; order:0; height:calc(var(--top-page-h)/2); width:calc(100% + (100vw - 1vw * var(--wrap))); margin:0 calc(1vw * var(--wrap) / 2 - 50vw) var(--mrg-f);} .main-page > .main-header-1.column-2 {width:100%} .main-header-1.column-2 .main-header-bg-img {margin-top:calc(var(--mrg-f) * -1);} .main-header-1 .main-header-bg-img .main-header-gr-top {height:calc(var(--top-page-h)/2);} .main-header-1 h1 {margin:0 0 1em} .has-asides .main-header-1 {width:100%} .has-asider .main-header-1xxxxxxxxxxxxx {width:calc(100% - var(--asidel-w) - var(--mrg-f) * 2); /* margin-top:calc(var(--top-page-h) / 2 + var(--mrg-f)); */} .has-asidel .main-header-1xxxxxxxxxxxxx {width:calc(100% - var(--asidel-w) - var(--mrg-f) * 2);} .has-asides .main-header-1 {order:2; width:100%} .has-asidel .main-header-1 .main-header-bg-img, .has-asider .main-header-1 .main-header-bg-img, .has-asides .main-header-1 .main-header-bg-img {margin:0 0 var(--mrg-f) 0; left:calc(1vw * var(--wrap) / 2 - 50vw);} .main-header-1 + .main-body + footer +.aside-right { /* margin-top:calc(var(--top-page-h) / 2 + var(--mrg-f)); */ margin-top:var(--mrg-f); } .main-header-1 + .main-body + footer + .aside-left, .main-header-1 + .main-body + footer + aside + .aside-left {order:1; /* margin-top:calc(var(--top-page-h) / 2 + var(--mrg-f));*/ margin-top:var(--mrg-f);} img.left-t + .main-header-1 h1 {margin:0} img.left-t + .main-header-1 .breadcrumbs {margin:0 0 1em} /* 3.3.3 Main-header-2-3 _____________________________________*/ .main-header-2, .main-header-3 {width:calc(100% + (100vw - 1vw*var(--wrap))); height:var(--top-page-h); margin:0 calc(1vw*var(--wrap)/2 - 50vw) var(--mrg-f); background:url(../img/main-header-bg.jpg) no-repeat top center; background-size:cover; position:relative} .main-header-3 {/*padding-top:60vh;*/} .main-header-2 .main-header-title, .main-header-3 .main-header-title {align-content:center; height:var(--top-page-h); position:relative; z-index:1} .main-header-2 {display:flex; justify-content:center; flex-wrap:wrap; align-content:flex-start; background-position:center;} /*.main-header-2 {padding-bottom:4em;} .main-header-2 > header h1{color:var(--clr-g); text-align:center; margin-bottom:0.5em; text-transform:none; justify-content:center} .main-header-2 > header h1:before {display:none} */ /* linia before H1 - .main-header-2 > header h1:before {content: ''; height: 1px; width:40px; background:#fff; display:block; margin-right:10px;}*/ /* 3.3.4 Has-aside _____________________________________*/ .has-asidel, .has-asider, .has-asides {position:relative} article.has-asidel > .main-body, article.has-asidel > footer, article.has-asides > .main-body, article.has-asides > footer {margin-left:calc(var(--asidel-w) + var(--mrg-f));} article.has-asidel > .main-body {margin-left:0} article[class*="has-aside"] {display:flex; flex-wrap:wrap; justify-content:space-between} article[class*="has-aside"] > div {order:3; /*display:flex; flex-wrap:wrap; background:var(--test-bg)*/} article[class*="has-aside"] > footer{order:5;} article.has-asides > div, article.has-asides > footer {width:calc(100% - var(--asider-w) - var(--asidel-w) - var(--mrg-f)*2 );} /*article.has-asides > div, article.has-asides > footer {width:calc(100% - var(--asidel-w) - var(--mrg-f)*2 );} */ article.has-asidel > div, article.has-asidel > footer {width:calc(100% - var(--asidel-w) - var(--mrg-f)*2 );} article.has-asider > div, article.has-asider > footer {width:calc(100% - var(--asider-w) - var(--mrg-f)*2 );} article[class*="has-aside"] #article-body-main, article[class*="has-aside"] > #article-body-main > div, article[class*="has-aside"] > #article-body-main .main-body-desc p {margin-top:0} aside {background:var(--test-bg)} .aside-left {width:var(--asidel-w); order:2;} .aside-right {width:var(--asider-w); order:4; position:sticky; top:50px; height:fit-content;} .aside-bottom {position:relative; order:6; width:100%; margin-top:var(--mrg-f); background:var(--test-bg)} aside[class*="aside-"] > h1 {margin-top:0; font-size:1.25em;} aside article {margin:var(--mrg-f) 0;} @media screen and (max-width:980px) { article.has-asides > div, article.has-asides > footer {width: calc(100% - var(--asidel-w) - var(--mrg-f));} article.has-asides .aside-right {width:100%} } @media screen and (max-width:780px) { article.has-asidel > div, article.has-asidel > footer, article.has-asider > div, article.has-asider > footer, article.has-asides > div, article.has-asides > footer {width:100%;} article.has-asidel > footer, article.has-asider > footer {order:3; margin-bottom:var(--mrg-f);} .aside-right, .aside-left {width:100%} .aside-left {order:3;} } /* 3.3.5 Category aside like-g _____________________________________*/ .has-asides-g .column-2 {width:calc((100%/4*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asides-g .column-2 + footer + aside, .has-asides-g .column-2 + footer + aside + aside {--col-n:2; width:calc(((100%/4*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asidel-g .column-2, .has-asider-g .column-2 {width:calc((100%/3*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asidel-g .column-2 + footer + aside, .has-asider-g .column-2 + footer + aside {--col-n:2; width:calc(((100%/3*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asides-g .column-3 {width:calc((100%/5*3) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asides-g .column-3 + footer + aside, .has-asides-g .column-3 + footer + aside + aside {--col-n:3; width:calc(((100%/5*3) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asidel-g .column-3, .has-asider-g .column-3 {width:calc((100%/4*3) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asidel-g .column-3 + footer + aside, .has-asider-g .column-3 + footer + aside {--col-n:3; width:calc(((100%/4*3) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asides-g .column-4 {width:calc((100%/6*4) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asides-g .column-4 + footer + aside, .has-asides-g .column-4 + footer + aside + aside {--col-n:4; width:calc(((100%/6*4) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asidel-g .column-4, .has-asider-g .column-4 {width:calc((100%/5*4) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asidel-g .column-4 + footer + aside, .has-asider-g .column-4 + footer + aside {--col-n:4; width:calc(((100%/5*4) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asides-g .column-5 {width:calc((100%/7*5) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asides-g .column-5 + footer + aside, .has-asides-g .column-5 + footer + aside + aside {--col-n:5; width:calc(((100%/7*5) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asidel-g .column-5, .has-asider-g .column-5 {width:calc((100%/6*5) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} .has-asidel-g .column-5 + footer + aside, .has-asider-g .column-5 + footer + aside {--col-n:5; width:calc(((100%/6*5) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n));} article.has-asides > footer { margin-left:calc(((100% / 4 * 2) - var(--col-gap) * calc(var(--col-n) - 1) / var(--col-n)) / var(--col-n) - var(--col-gap) * calc(var(--col-n) - 1) / var(--col-n) + var(--col-gap)); calc((100%/4*2) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n)); margin-left: calc(var(--asidel-w) + var(--mrg-f)); margin-top: var(--mrg-f); } .has-aside > aside {width:30%; background:#f0f; margin-top:calc(1vw*var(--col-gap));} .has-aside > section /*or article*/ {width:calc(100% - 30% - var(--col-gap-2)*2); background:var(--test-bg); margin-top:calc(1vw*var(--col-gap));} /* 3.3.6 Section index, aside, category _____________________________________*/.section-block {} .section-block {position:relative} .section-title {} h3.section-title {font-size:1.125em} .section-desc {font-weight:600 /* text-align:center; width:60%; margin:0 auto */} .section-desc p {margin:var(--mrg-f) 0;} .section-button {/* !!!!!!!!!!!!!!!!!! */ padding:0.5em 1em; display:block; width:fit-content; border-radius:50px; color:var(--clr-w); background:var(--clr-m); border:2px solid var(--clr-s); margin:var(--mrg-f) auto;} .section-header {display:flex; justify-content:space-between; margin:0 0 var(--mrg-f) 0; align-items:center; width:100%;} .section-header div {max-width: calc(100% - 200px);} .section-header div strong {color:var(--clr-m); font-size:2.5em; font-weight:500} .section-header .btn {margin:0} .section-sub-title {color:var(--clr-d); text-transform:uppercase; display:flex; align-items:center; font-size:1em; margin-bottom:var(--mrg-f);} .section-sub-title:before {content: ''; display: block; background: var(--clr-s); margin-right:1em; mask: var(--svg-icon-heart) no-repeat center; padding:0.9em} .section-title & .section-button-top {padding-right:250px} .column-full .section-title, .column-full .section-desc {width:calc(1%*var(--wrap)); margin-left:auto; margin-right:auto;} .column-full .wrap .section-title, .column-full .wrap .section-desc {width:100%;} .section-block.column-full > div {position:relative} /* 3.3.7 Section index, aside, category _____________________________________*/ /* 3.3.9 Article footer _____________________________________*/ article > footer {width:100%;} article footer .box-tag {display:flex; flex-wrap:wrap; align-items:center;} article footer .box-tag > * {font-size:1em;} article footer .box-tag > p { /* & 265 - .article-shares p */} article footer .tag-link {background:var(--clr-s-o); color:var(--clr-b)} article footer .tag-link p {color:var(--clr-b)} /* Change 2026/06/06 */ /*-----------*/ /* 3.4 Box -----*/ /*-----------------------------------*/ .box-name {margin: 0 0 var(--mrg-f);} .box-block {overflow:hidden; width:100%;} .box-img {overflow:hidden; position:relative;} .box-img img {margin-bottom:0px; justify-content:center; align-content:center; display:flex; width:100%; height:100%; object-fit:cover;} .box-1:hover .box-img img, .box-2:hover .box-img img {transform: scale(1.1)} .box-img iframe {} .box-text {margin:0; padding:0px var(--mrg-f); margin-bottom:4em; width:100%;} .box-text h2, .box-text p, .box-text a {margin-top:var(--mrg-f);} .box-text > a {margin-top:0px} /* 2.3.2 - line:54 */ .box-tag-list {} .box-tag-btns {} .box-tag-list {display:block; width:100%; font-weight:600; margin:var(--mrg-f) 0} .box-tag-list a {color:var(--clr-m)} .box-tag-btn {display:flex; align-items:center; flex-wrap:wrap; margin-top:var(--mrg-f)} .box-tag-btn > * {margin:0 var(--mrg-f) var(--mrg-f) 0;} .box-tag-btn span {font-weight:600} .box-tag-btn a {color:var(--clr-i);} .box-tag-btn .btn {color:var(--btn-clr); border-radius:var(--btn-brd-rad); border:var(--btn-brd-s) solid var(--btn-brd-c); background:var(--btn-bg); text-transform:uppercase; padding:var(--btn-pad) calc(var(--btn-pad) * 2);} .box-img .box-tag-btn {position:absolute; z-index:1; right:0; top:0;} .box-img .box-date {position:absolute; z-index:1; left:var(--mrg-f); bottom:var(--mrg-c);} .box-img a + .box-tag {position:absolute; right:1em; top:1em; z-index:9;} /* in box-1-3 */ .box-1 .box-text .box-tag-btn {position:absolute; top:0;} .box-text .box-tag-btn .btn {margin-top:0; line-height:1; font-size:0.9em; background:none; text-transform: none; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);} .box-2 .box-text .box-tag-btn .btn {color:var(--clr-b);} .box-text .box-tag-btn .btn:hover {background:none; border-color:none; border:var(--btn-brd-s) solid var(--clr-t); background:var(--clr-m); color:var(--clr-i)} .box-sub-title {font-size:1.125em; font-weight:600; border-bottom:1px solid; padding:0 0 var(--mrg-c) 0; margin:0} .box-date {display:flex; align-items:center; color:var(--clr-g);} .box-date span {padding-right:var(--btn-pad)} .box-date span::before {padding:0.75em;} .box-autor, .box-read {} .box-icon {width:100%; display:flex; justify-content:center;} .box-icon .icon-svg::before {padding:2em; margin:0} .box-title {display:flex; font-size:1.25em; text-transform:none; margin:1em 0} .box-separator {background:var(--clr-m); width:60px; max-width:100%; margin:0 auto; margin-top:2vh; height:2px; display:block; border:0} /*wp-block-separator*/ .box-expert {/*flex: 1 0 auto;*/} /* 3.4.1 Box Icons _____________________________________*/ .box-icons {margin:var(--mrg-f) 0; justify-content:center;} .icons-block.box-icons a {margin:0 0.5em} .box-block .box-more {display:flex; align-items:center; padding-bottom:0px; position:absolute; bottom:15px;} .box-block .box-button {margin-left:var(--mrg-f) 0 0;} /* 3.4.2 Box Shop _____________________________________*/ .box-img .box-img-top, .sin-prod-img .box-img-top {position:absolute; top:0; z-index:5} .box-img-top {width:fit-content} .box-img-top span {display:block} .box-img-top p, .box-img-top span {background:var(--clr-m); color:var(--clr-i); padding:0.5em; text-transform:uppercase} .box-img-top p.box-new {background:var(--clr-s);} .box-img-top .onsale {background:var(--clr-t);} .box-img-top p, .box-img-top .onsale {margin:var(--mrg-c) 0 0} .box-price, .price {display:flex; justify-content:space-between; align-items:center; margin:var(--mrg-f) 0;} .box-price .price-old {text-decoration:line-through} .box-price .price-now, .price .price-main {color:var(--clr-m); font-weight:600; font-size:2em} .box-button .block-brand {margin:var(--mrg-f) 0} .box-brand {justify-content:flex-start; align-items:flex-start; width:100%; margin-bottom:var(--mrg-f);} .box-brand p {margin-bottom:0} .box-brand div {width:calc(100% - 150px - var(--mrg-f)); margin-left:var(--mrg-f);} .box-brand h2 {margin:0 0 var(--mrg-c); font-size:1.125em; text-transform: uppercase;} .box-options {display:flex; align-items:center; flex-wrap:wrap; border-bottom:1px solid; padding:0; margin:var(--mrg-f) 0} .box-options p {display:flex; align-items:center; margin-right:1em;} .box-options p span {font-size:1em; margin-right:1em; background:var(--clr-g); color:var(--clr-b); padding:0.5em 1em; display:block; border-radius:1.5em;} .box-dimensions {margin:var(--mrg-f) 0} .box or .block {} .box-price, .price {display:flex; justify-content:space-between; align-items:center; margin:var(--mrg-c) 0;} .box-price .price-old {text-decoration:line-through} .box-price .price-now, .price .price-main {color:var(--clr-m); font-weight:600; font-size:2em} .block-price {display:flex; justify-content:space-between; align-items:center; margin:0 0 var(--mrg-f) 0;} .block-price .price-main, .block-price ins bdi, .price ins bdi {color:var(--clr-m); font-weight:600; font-size:1.5em} .block-price ins bdi span {font-weight:600;} .block-price .price-old, .block-price del bdi, .price del bdi {color:var(--clr-d); text-decoration:line-through;} .box-price-after {margin:var(--mrg-f) 0} .block-cart {margin:0} .quantity {width:5em} .quantity input {width:4em; margin:0 var(--mrg-f) 0 0; font-size:1.125em;} .block-cart .btn {margin:0 var(--mrg-f) var(--mrg-f) 0;} .block-cart .btn:last-child {margin:0 0 var(--mrg-f) 0;} .block-cart .btn a {color:var(--clr-i);} .box-button {} .box-is {} .stock {font-size: 1.125em; font-weight:600; color:var(--clr-m); margin-bottom:1em} .box-is .stock-order {color:orange} .box-is .stock {color:green} .box-stock {} .box-onsale {} .box-cart {} .main-body-single .block-sku, .block-sku {margin:0} .box-sku {margin-bottom:var(--mrg-f); color:aqua} .box-sku span {font-weight:600} .box-quantity {} .box-message {} .box-atribute {} .box-button {} .box-button-add {} .box-button-buy {} .box-tag .tag-link {} box-separator border-size box-read time :before icon half or box-icon & box-icons box-button & box-more {} /* 3.4.4 Box 1-2-3 _____________________________________*/ .box-1, .box-2, .box-3 {border: var(--block-brd-s) solid var(--clr-m); position:relative; overflow:hidden; box-shadow:10px 40px 50px rgba(229, 233, 246, 0.4); border-radius:var(--block-brd-rad); background:var(--clr-w);} .box-1:hover .box-img img, .box-2:hover .box-img img {transform: scale(1.1)} .box-2 {display:grid} .grid-2 .box-2, .grid-3 .box-2, .grid-4 .box-2, .grid-5 .box-2, .grid-6 .box-2, .grid-7 .box-2, .grid-8 .box-2 {display:flex; flex-wrap:wrap;} .icons-block.box-icons a {margin:0 0.5em} .box-block .box-more {display:flex; align-items:center; padding-bottom:0px; position:absolute; bottom:15px;} .box-block .box-button {margin-left:var(--mrg-f) 0 0;} /* 3.4.5 box-title-top & box-title-but - Для назви цілого блоку в боксі /*-------------------------------------------------------------------------*/ .box-1 > h1, .box-2 > h1, .box-3 > h1 {font-size:1.25em; padding:0 var(--block-pad); text-transform: none; margin:1em 0} .title-b, .title-t {display:grid; align-content:space-between;} .title-t > h2a {margin-top: 0; margin-bottom:0px;} .title-b > h2a {margin-bottom: 0px; padding-bottom:0;} .box-title-top, .box-title-but {display:grid; align-content:space-between;} /* 3.4.6 BOX-1 /*-------------------------------------------------------------------------*/ .box-1 {/*background: ; padding: ; color: ; box-shadow: ;*/} .box-1 .box-block {/*background: ; padding: ; color: ; box-shadow: ;*/} .box-1 .box-img {/*background: ; padding: ; color: ; box-shadow: ;*/ width:100%;} .box-1 .box-text, .box-2 .box-text {/*background: ; padding: ; color: ; box-shadow: ;*/} .box-1:hover, .box-2:hover, .box-3:hover {box-shadow: 0px 10px 6px 2px rgb(0 0 0 / 20%);} .box-1 > div:last-child {padding-bottom: calc(var(--mrg-f)*2);} /*wp-block-separator*/ /*--------------------------------------------------*/ .box-1 > a.box-block {height:100%; display:block;} /*--------------------------------------------------*/ .box-1 .box-block, .box-2 .box-block {height:100%; position:relative} .box-2 > h2 {justify-content:space-between; width:100%;} .box-2 {--box-wi:33%;} .box-2 .box-img { border-radius:var(--block-brd-rad); width:var(--box-wi); height:100%;} .box-2 .box-text {width:100%;} .box-2 .box-img + .box-text{width:calc(100% - var(--box-wi));} .box-2 .box-block {display:flex; justify-content:space-between; flex-wrap:wrap;} .box-2 .box-block > div:last-child {padding-bottom: calc(var(--mrg-f)*4);} .box-2[class*="sq"] .box-block {position:absolute; height:100%;} .box-2[class*="sq"] .box-text {position:relative;} .box-3 .sq20 .box-text {height:calc(100% - var(--block-pad)/0.2*2); top:calc(var(--block-pad)/0.2);} .box-3 .sq25 .box-text {height:calc(100% - var(--block-pad)/0.25*2); top:calc(var(--block-pad)/0.25);} .box-3 .sq30 .box-text {height:calc(100% - var(--block-pad)/0.3*2); top:calc(var(--block-pad)/0.3);} .box-3 .sq33 .box-text {height:calc(100% - var(--block-pad)/0.33*2); top:calc(var(--block-pad)/0.33);} .box-3 .sq50 .box-text {height:calc(100% - var(--block-pad)/0.5*2); top:calc(var(--block-pad)/0.5);} .box-3 .sq66 .box-text {height:calc(100% - var(--block-pad)/0.66*2); top:calc(var(--block-pad)/0.6);} .box-3 .sq70 .box-text {height:calc(100% - var(--block-pad)/0.7*2); top:calc(var(--block-pad)/0.7);} .box-3 .sq80 .box-text {height:calc(100% - var(--block-pad)/0.8*2); top:calc(var(--block-pad)/0.8);} .box-3 .sq100 .box-text {height:calc(100% - var(--block-pad)/1*2); top:calc(var(--block-pad));} .box-3 .sq120 .box-text {height:calc(100% - var(--block-pad)/1.2*2); top:calc(var(--block-pad)/1.2);} .box-3 .sq140 .box-text {height:calc(100% - var(--block-pad)/1.4*2); top:calc(var(--block-pad)/1.4);} .box-3 .sq150 .box-text {height:calc(100% - var(--block-pad)/1.5*2); top:calc(var(--block-pad)/1.5);} .box-3 .sq160 .box-text {height:calc(100% - var(--block-pad)/1.6*2); top:calc(var(--block-pad)/1.6);} .box-3 .sq180 .box-text {height:calc(100% - var(--block-pad)/1.8*2); top:calc(var(--block-pad)/1.8);} .box-3 .sq200 .box-text {height:calc(100% - var(--block-pad)/2*2); top:calc(var(--block-pad)/2);} .box-3 .box-block {display: block; position: relative; background-color:var(--clr-i); background-size: cover;} .box-3 .box-img {position:absolute; z-index:1; height:100%; width:100%} .box-3:hover .box-img img {transform: scale(1.1)} .box-3 .box-text {padding: 0 var(--block-pad); height:calc(100% - var(--block-pad)*2); top:var(--block-pad); width: calc(100% - var(--block-pad)*2); position:absolute; z-index:2; left:var(--block-pad); text-align: center; min-height:50px; background-color:rgb(0, 0, 0, 0.64); color:var(--clr-i); overflow:hidden; transition-duration: 0.5s; transition: 0.5s;} .box-3 .box-text[class*="grid-"] {display:grid;} .box-3 .box-text > div {padding:var(--mrg-c);} .box-3 .box-text.grid-f {align-content:space-between;} .box-3 .box-text.grid-c {align-content: center;} .box-3 .box-title {margin-top:0} .box-3 .box-text > div *:first-child {margin-top:0;} .box-3 .box-expert, .box-3 .box-more {color:var(--clr-w)} .box-3 .box-button {color:var(--clr-w); justify-content:center} /*squeeze box-z*/ .box-3 [class*="box-z"] {height:5%} .box-3 .box-text.box-z-t {top:var(--block-pad)} .box-3 .box-text.box-z-c {top:calc(50% - var(--block-pad));} .box-3 .box-text.box-z-b {bottom:var(--block-pad); top:auto} .box-3:hover .box-z-c {top:var(--block-pad);} .box-text[class*="box-z"] .box-tag, .box-3 [class*="box-z"] .box-icon, .box-3 [class*="box-z"] .box-date {max-height:0%; padding-bottom:0px; overflow: hidden; margin-top:0;} .box-3 [class*="box-z"] .box-text a, .box-3 [class*="box-z"] .box-text h2 {margin-top:0;} /*.box-3 .box-text > a {width: calc(100% - var(--block-pad)*2);}*/ .box-3 [class*="box-z"] .box-more {opacity: 0;} .box-3:hover [class*="box-z"] {height:calc(100% - var(--block-pad)*2)} .box-3:hover [class*="box-z"] .box-tag, .box-3:hover [class*="box-z"] .box-icon, .box-3:hover [class*="box-z"] .box-date, .box-3:hover [class*="box-z"] .box-text > a{-webkit-transition: all 0.4s ease; transition: all 0.4s ease; max-height: 100%; margin-top: var(--mrg-f);} .box-3:hover [class*="box-z"] .box-icon {-webkit-transition: padding 2.4s ease; transition: padding 2.4s ease; padding-bottom:50px} .box-3:hover [class*="box-z"] .box-more {opacity:1;} /*box-on-img - only box-1*/ .box-1 .box-on-img {width:80%; margin:0 auto; margin-top:-20%; z-index:2; position:relative; background:#fff; padding:0 10px 10px;} .box-2 .box-on-img {display:contents} .box-2 .box-on-img .box-img {height:calc(100% + 5%);} .column-2 .box-2 .box-on-img {display:flex; /*height:calc(100% + 2em);*/ padding-bottom:5%} .box-2 .box-on-img .box-img + .box-text {width: calc(100% - var(--box-wi) + 15%);} .box-2 .box-on-img .box-text {height:calc(80% + 2em); overflow:hidden; margin:10% 0 10% -15%; z-index:2; position:relative; background:#fff; padding:1em;} .box-1 > h2 + .box-block .box-img {border-radius: var(--block-brd-rad) var(--block-brd-rad) var(--block-brd-rad) var(--block-brd-rad);} /*Poloroid - only box-3*/ .box-pol {--pol-color:var(--clr-i); --pol-rad:20px} .box-pol {border-radius:var(--block-brd-rad); border:var(--block-brd-s) solid var(--clr-m);} .box-pol .box-block {position:absolute; height:100%; display:grid; border-radius:var(--block-brd-rad); border:var(--pol-rad) solid; border-color:var(--pol-color); z-index: 1;} .box-pol > h2, .box-pol > a > h2 {bottom:0; position:absolute; justify-content:space-between; align-items:center; background:var(--pol-color); border:var(--pol-rad) solid; border-color:var(--pol-color); width:100%; z-index:2} .box-pol:hover {border-color:var(--clr-m);} .box-pol:hover .box-block {height:100%; padding:0; border-color:var(--clr-m);} .box-pol:hover > h2 {background:var(--clr-m); color:var(--pol-color); border-color:var(--clr-m);} .box-3.box-pol > h1 {padding:0 var(--pol-rad);} /* Change 2026/06/06 */ /*-----------*/ /* 3.5 Category -----*/ /*-----------------------------------*/ /* 3.5.1 Section Category-Block Type: grid, column, w /*-------------------------------------------------------------------------*/ .column-12 > * {--col-gap-px:10; /* max=10 */ --col-gap-vw:0; /* max=0.6 */ } .column-3.like-g::after {content: ""; flex: auto;} .column-4.like-g::after {content: ""; flex: auto;} .column-5.like-g::after {content: ""; flex: auto;} .column-6.like-g::after {content: ""; flex: auto;} .column-7.like-g::after {content: ""; flex: auto;} .column-8.like-g::after {content: ""; flex: auto;} .column-9.like-g::after {content: ""; flex: auto;} .column-10.like-g::after {content: ""; flex: auto;} .column-11.like-g::after {content: ""; flex: auto;} .column-12.like-g::after {content: ""; flex: auto;} .column-3.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:var(--col-gap);} .column-4.like-g > *:nth-child(4n+1):nth-last-child(-n+4) ~ * {margin-left:var(--col-gap);} .column-5.like-g > *:nth-child(5n+1):nth-last-child(-n+5) ~ * {margin-left:var(--col-gap);} .column-6.like-g > *:nth-child(6n+1):nth-last-child(-n+6) ~ * {margin-left:var(--col-gap);} .column-7.like-g > *:nth-child(7n+1):nth-last-child(-n+7) ~ * {margin-left:var(--col-gap);} .column-8.like-g > *:nth-child(8n+1):nth-last-child(-n+8) ~ * {margin-left:var(--col-gap);} .column-10.like-g > *:nth-child(10n+1):nth-last-child(-n+10) ~ * {margin-left:var(--col-gap);} .column-12.like-g > *:nth-child(12n+1):nth-last-child(-n+12) ~ * {margin-left:var(--col-gap);} .column-1 > *[class^="w"], .column-2 > *[class^="w"], .column-3 > *[class^="w"], .column-4 > *[class^="w"], .column-5 > *[class^="w"], .column-6 > *[class^="w"], .column-7 > *[class^="w"], .column-8 > *[class^="w"] {width:calc(var(--col-nw) - var(--col-gap)*(var(--col-n) - 1)/var(--col-n));} .column-1 > *[class^="w"] {margin-bottom:var(--col-gap); width: calc(var(--col-nw) - var(--col-gap));} /* 3.5.2 class="center" ONLY column-1 /*-------------------------------------------------------------------------*/ .column-1.center {justify-content:space-around;} .column-1.center > * {margin-top: calc(1%*var(--col-gap)); margin-right: unset; /* OR margin: calc(var(--col-gap) / 2); */} /* 3.5.3 class="column-full" /*-------------------------------------------------------------------------*/ .column-full {margin:var(--mrg-f) calc(1vw*var(--wrap)/2 - 50vw); width: auto; width:100vw; width:calc(100% + (100vw - 1vw*var(--wrap)));} .column-full .wrap-l {padding-left:calc((100vw - 1vw*var(--wrap))/2); padding-right: var(--mrg-f);} .column-full .wrap-r {padding-right:calc((100vw - 1vw*var(--wrap))/2); padding-left: var(--mrg-f);} .column-full .wrap-l *:last-child, .column-full .wrap-r *:last-child {margin-bottom: var(--mrg-f)} .wrap-2 > div {padding: var(--mrg-f); } .wrap-2 > div:first-child {padding-right:calc(var(--col-gap)/2); padding-left:calc((100vw - 1vw*var(--wrap))/2);} .wrap-2 > div:last-child {padding-left:calc(var(--col-gap)/2); padding-right:calc((100vw - 1vw*var(--wrap))/2); /* width: 50%; */} .wrap-2-g > div {padding: var(--mrg-f) 0; width: var(--col-nw)!important; } .wrap-2-g > div:first-child {padding-right:calc(var(--col-gap)/2); padding-left:calc((100vw - 1vw*var(--wrap))/2);} .wrap-2-g > div:last-child {padding-left:calc(var(--col-gap)/2); padding-right:calc((100vw - 1vw*var(--wrap))/2);} .wrap-3 > div {width: calc((100% - 1vw*(100 - var(--wrap)))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n))!important;} .wrap-3 > div:first-child {padding-right:var(--col-gap); padding-left:calc((100vw - 1vw*var(--wrap))/2); width:calc((100% - 1vw*(100 - var(--wrap)))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n) + (100vw - 1vw*var(--wrap))/2 + var(--col-gap))!important;} .wrap-3 > div:last-child {padding-left:var(--col-gap); padding-right:calc((100vw - 1vw*var(--wrap))/2); width:calc((100% - 1vw*(100 - var(--wrap)))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n) + (100vw - 1vw*var(--wrap))/2 + var(--col-gap))!important} .wrap-3-g > div {padding: var(--mrg-f) calc(var(--col-gap)/2); width: calc((100% - 1vw*(100 - var(--wrap)))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n) + var(--col-gap))!important;} .wrap-3-g > div:first-child {padding-right:calc(var(--col-gap)/2); padding-left:calc((100vw - 1vw*var(--wrap))/2); width:calc((100% - 1vw*(100 - var(--wrap)))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n) + (100vw - 1vw*var(--wrap))/2 + var(--col-gap)/2)!important} .wrap-3-g > div:last-child {padding-left:calc(var(--col-gap)/2); padding-right:calc((100vw - 1vw*var(--wrap))/2); width:calc((100% - 1vw*(100 - var(--wrap)))/var(--col-n) - var(--col-gap)*calc(var(--col-n) - 1)/var(--col-n) + (100vw - 1vw*var(--wrap))/2 + var(--col-gap)/2)!important} /* 3.5.4 class="column-center" - /* ONLY COLUMN NOT GRID*/ /*-------------------------------------------------------------------------*/ .column-center {justify-content: center; margin: calc(0vw - (1vw*var(--col-gap-vw) + 1px*var(--col-gap-px))/2);} .column-center > * {width: calc(100%/var(--col-n) - (1vw*var(--col-gap-vw) + 1px*var(--col-gap-px))); margin: calc((1vw*var(--col-gap-vw) + 1px*var(--col-gap-px))/2);} .column-center > *:nth-child(1n) {margin-right:calc((1vw*var(--col-gap-vw) + 1px*var(--col-gap-px))/2);} .column-center > *:first-child {margin-left:calc((1vw*var(--col-gap-vw) + 1px*var(--col-gap-px))/2 + 0.11%);} .column-center::after {content: ""; flex: none;} .column-center > *.box-3 {/*padding: 0 0 calc(100%/4 - (1/4*(1vw*var(--col-gap-vw) + 1px*var(--col-gap-px))/2)*2 - var(--block-brd-s)*2); */} .column-center .box-3 .box-block {/*position:absolute; height:100%;*/} /* .column-center .sq70 {padding: 0 0 calc((100%/var(--col-n) - (1vw*var(--col-gap-vw) + 1px*var(--col-gap-px)))*0.7);} .column-center .sq100 {padding: 0 0 calc((100%/var(--col-n) - (1vw*var(--col-gap-vw) + 1px*var(--col-gap-px)))*1);} .column-center .sq120 {padding: 0 0 calc(100%/var(--col-n) - (1vw*var(--col-gap-vw) + 1px*var(--col-gap-px)));} .column-center .sq150 {padding: 0 0 calc((100%/var(--col-n) - (1vw*var(--col-gap-vw) + 1px*var(--col-gap-px)))*1.5);}*/ /* 3.5.5 class="column-first" - /*-------------------------------------------------------------------------*/ .column-first *:first-child {width:100%; margin-right:0} /*WORK ONLY WITH COLUMN*/ .grid-2.column-first div:first-child {grid-column-start:1; grid-column-end:3;} .grid-3.column-first div:first-child {grid-column-start:1; grid-column-end:4;} .grid-4.column-first div:first-child {grid-column-start:1; grid-column-end:5;} .grid-5.column-first div:first-child {grid-column-start:1; grid-column-end:6;} .grid-6.column-first div:first-child {grid-column-start:1; grid-column-end:7;} .grid-7.column-first div:first-child {grid-column-start:1; grid-column-end:8;} .grid-8.column-first div:first-child {grid-column-start:1; grid-column-end:9;} /* 3.5.6 class="column-parts" - ??????????? /*-------------------------------------------------------------------------*/ .parts-3 + .parts-1 {margin-top: calc(var(--col-gap-3)*3/2);} /* 3.5.7 COLUMN-GRID - mobile /*-------------------------------------------------------------------------*/ @media (max-width:1680px) { .column-12 > * {--col-gap-px:8; /* max=8 */ --col-gap-vw:0; /* max=0.6 */ } } @media (max-width:1440px) { } @media (max-width:1366px) {/* 16px to 1024*/ } @media (max-width:1300px) { .column-12 > * {--col-gap-px:6; /* max=6 */ } } @media (max-width:1140px) {/* 16px to 1024*/ } @media (max-width:1200px) { .grid-5, .column-5, .grid-6, .column-6 {--col-n:4} .column-5.like-g > *:nth-child(5n+1):nth-last-child(-n+5) ~ *, .column-6.like-g > *:nth-child(6n+1):nth-last-child(-n+6) ~ * {margin-left:unset;} .column-5.like-g > *:nth-child(4n+1):nth-last-child(-n+4) ~ *, .column-6.like-g > *:nth-child(4n+1):nth-last-child(-n+4) ~ * {margin-left:var(--col-gap);} } @media (max-width:1024px) { .grid-4, .column-4 {--col-n:3} .grid-8, .column-8 {--col-n:6;} .grid-10, .column-10 {--col-n:5;} .grid-12, .column-12 {--col-n:6;} .grid-7, .column-7, .grid-9, .grid-11 {--col-n:3} .column-4.like-g > *:nth-child(4n+1):nth-last-child(-n+4) ~ *, .column-7.like-g > *:nth-child(7n+1):nth-last-child(-n+7) ~ *, .column-8.like-g > *:nth-child(8n+1):nth-last-child(-n+8) ~ *, .column-10.like-g > *:nth-child(10n+1):nth-last-child(-n+10) ~ *, .column-12.like-g > *:nth-child(12n+1):nth-last-child(-n+12) ~ * {margin-left:unset;} .column-4.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-7.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-8.like-g > *:nth-child(6n+1):nth-last-child(-n+6) ~ *, .column-10.like-g > *:nth-child(5n+1):nth-last-child(-n+5) ~ *, .column-12.like-g > *:nth-child(6n+1):nth-last-child(-n+6) ~ * {margin-left:var(--col-gap);} } @media (max-width:920px) { /* 14px to 780*/ } @media (max-width:820px) { } @media (max-width:768px) { /* 18px to 680*/ .column-12 > * {--col-gap-px: 18;} /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ .grid-3, .column-3, .grid-4, .column-4, .grid-5, .column-5, .grid-6, .column-6, .grid-7, .column-7 {--col-n:2} .grid-8, .column-8, .grid-9, .column-9, .grid-10, .column-10, .grid-11, .column-11, .grid-12, .column-12 {--col-n:3} .column-4.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-5.like-g > *:nth-child(4n+1):nth-last-child(-n+4) ~ *, .column-6.like-g > *:nth-child(4n+1):nth-last-child(-n+4) ~ *, .column-7.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-8.like-g > *:nth-child(6n+1):nth-last-child(-n+6) ~ *, .column-10.like-g > *:nth-child(5n+1):nth-last-child(-n+5) ~ *, .column-12.like-g > *:nth-child(6n+1):nth-last-child(-n+6) ~ * {margin-left:unset;} .column-8.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-9.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-10.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-11.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-12.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:var(--col-gap);} /* .grid-3, .column-3 {--col-n:2} .grid-4, .column-4 {--col-n:2} .grid-5, .column-5 {--col-n:5} .grid-6, .column-6 {--col-n:6} .grid-7, .column-7 {--col-n:7} .grid-8, .column-8 {--col-n:8} .grid-9, .column-9 {--col-n:9} .grid-10, .column-10 {--col-n:10} .grid-11, .column-11 {--col-n:11} .grid-12, .column-12 {--col-n:12} */ [class^="column-"]::after {content: ""; flex: auto; display: none} /* .column-3 > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset;} .column-4 > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset;} .column-5 > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset;} .column-6 > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset;} .column-7 > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset;} .column-8 > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset;} .column-9 > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset;} */ } @media (max-width:680px) { } @media (max-width:620px) { /* to 576*/ .grid-2, .column-2, .grid-3, .column-3, .grid-4, .column-4, .grid-5, .column-5, .grid-6, .column-6, .grid-7, .column-7 {--col-n:1} .column-center {margin:0} .column-center > *, .column-center > *:nth-child(1n), .column-center > *:first-child {margin:0; margin-bottom:var(--mrg-f)} .column-center::after {content: ""; flex: none;} .grid-8, .column-8, .grid-9, .column-9, .grid-10, .column-10, .grid-11, .column-11, .grid-12, .column-12 {--col-n:2} .column-2 > *, .column-3 > *, .column-4 > *, .column-5 > *, .column-6 > *, .column-7 > * {width:100%; margin-bottom:var(--mrg-f);} .column-8.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-9.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-10.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-11.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ *, .column-12.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset;} [class^="column-"] > *:nth-child(3n+1):nth-last-child(-n+1) ~ * {margin-left:unset!important;} [class^="column-"] > *:nth-child(3n+1):nth-last-child(-n+2) ~ * {margin-left:unset!important;} [class^="column-"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:unset!important;} [class^="column-"] > *:nth-child(3n+1){margin-left:unset;} } @media (max-width:576px) { .grid-2, .column-2, .grid-3, .column-3, .grid-4, .column-4, .grid-5, .column-5, .grid-6, .column-6, .grid-7, .column-7, .grid-8, .column-8, .grid-9, .column-9, .grid-10, .column-10, .grid-11, .column-11, .grid-12, .column-12 {--col-n:1} .column-8 > *, .column-9 > *, .column-10 > *, .column-11 > *, .column-12 > * {width:100%; margin-bottom:var(--mrg-f);} } @media (max-width:480px) { /* to 380*/ } @media (max-width:380px) { }