/* Theme Name: Demax Description: Demax WP Custom theme Author: Dalibor Gogic Version: 1.0 */ :root { --max-width: 1024px; --font-family: 'Inter', sans-serif; --link: #3293d2; --brand-color: #262626; --brand-color-rgb: 50 147 210; } *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: inherit; } ::placeholder { color: inherit; } /* remove default dot (•) sign */ ::marker { content: normal; content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } body { color: black; font-family: 'Inter', sans-serif; font-family: var(--font-family) } html, body { height: 100%; } #app { min-height: 100%; display: grid; grid-template-rows: auto auto auto; touch-action: manipulation; font-feature-settings: "rlig" 1,"calt" 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } main { width: 100%; max-width: 1024px; max-width: var(--max-width); margin: 0 auto; padding: 48px 24px; } .section_title { font-size: 21px; font-weight: 600; /* outline: 1px dashed; */ min-height: 48px; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } [v-cloak] > * { display:none } [v-cloak]::before { content: "" } .fade-enter-active, .fade-leave-active { transition: opacity 128ms ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } #map { width: 100%; height: 400px; } .map_large { display: inline-block; font-weight: 600; padding: 0px 0 32px; } .share { margin: 32px 0; /* outline: 1px dashed; */ display: flex; justify-content: flex-end; align-items: center; color: rgb(0 0 0 / .7); } .share div { font-size: 13px; display: flex; align-items: center; } .share a { color: #262626; color: var(--brand-color); } .share a:hover { color: #262626; color: var(--brand-color); } .share svg { margin-left: 8px; } .share_label { padding-right: 8px; line-height: 1; } .content h1 { font-weight: 600; padding: 10px 0; } .content p { padding-bottom: 16px; } .content a { color: #262626; color: var(--brand-color); font-weight: 600; } .edit { --size: 42px; position: fixed; bottom: 10px; right: 10px; width: 42px; width: var(--size); height: 42px; height: var(--size); background-color: #262626; background-color: var(--brand-color); color: white; border-radius: 50%; display: grid; place-items: center; } .dh { display: none; } svg { shape-rendering: crispEdges; } svg circle, svg line, svg path, svg polygon, svg rect { shape-rendering: geometricprecision; } .demax { display: flex; align-items: center; } .demax div { padding-left: 10%; max-width: 300px; font-size: 14px; } .demax div strong { font-weight: 600; } header { width: 100%; max-width: 1024px; max-width: var(--max-width); margin: 0 auto; padding: 24px; display: flex; justify-content: space-between; align-items: center; } header .logo { width: 200px; vertical-align: middle; mix-blend-mode: multiply; } .nav { position: sticky; z-index: 10; top: 10px; } nav { width: 100%; max-width: 1024px; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; height: 64px; /* outline: 1px dashed; */ display: flex; align-items: center; background-color: #262626; background-color: var(--brand-color); /* backdrop-filter: blur(4px); */ border-radius: 4px; box-shadow: rgb(0 0 0 / .3) 0px 15px 30px 0px; justify-content: space-between; /* background-color: rgb(0 0 0 / .7); */ } nav .link { font-weight: 600; color: white; line-height: 1; } .link { font-weight: 600; color: #262626; color: var(--brand-color); } .link.tel { font-size: 21px; display: flex; align-items: center; /* padding-right: 24px; */ } .link.tel svg { margin-right: 5px; } .nav_left { display: flex; align-items: center; } .link_home { color: white; margin-right: 20px; display: grid; } .link_home svg { vertical-align: middle; } .nav_right { display: flex; align-items: center; justify-content: flex-end; } .menu { display: inline-flex; align-items: center; } .menu li { padding-right: 24px; } .menu li.current_page_item a { color: white; position: relative; line-height: 1; } .menu li.current_page_item a::after { display: block; content: ""; width: 4px; height: 4px; background-color: white; border-radius: 50%; position: absolute; left: calc(50% - 2px); } .menu li a { font-size: 14px; text-transform: uppercase; color: white; line-height: 1; } .languages { display: flex; text-transform: uppercase; } .languages a { font-size: 14px; line-height: 1; color: #262626; color: var(--brand-color); border-right: 1px solid rgb(0 0 0 / .5); padding-right: 10px; margin-right: 10px; } .languages a:last-child { border-right: none; padding-right: 0; margin-right: 0; } .languages a img { width: 24px; height: auto; vertical-align: middle; border: 1px solid rgb(0 0 0 / .12); } .languages a.current { filter: grayscale(100%); opacity: .5; } .mobile_menu { margin-left: 18px; } .mobile_menu svg { transform: translateX(3px); vertical-align: middle; } @media (hover:hover) { /* .menu { & li:hover { & a { color: var(--brand-color); } } } .dropdown:hover { cursor: pointer; color: var(--brand-color); } .drop-block { & a:hover { color: var(--brand-color); } } */ } .h1 { padding-top: 64px; font-weight: 600; font-size: 32px; } .h1 + .section_description { padding-top: 20px; padding-bottom: 64px; } .products { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; grid-row-gap: 24px; row-gap: 24px; } .product { padding-bottom: 10px; } .product_content { padding: 20px 0 0; } .product_title { font-size: 14px; font-weight: 600; line-height: 1.1; min-height: 30px; width: 100%; display: grid; grid-template-columns: auto 24px; } .product_title + .product_description { padding-top: 4px; } .product_description { font-size: 12px; color: rgb(0 0 0 / .5); padding-right: 8px; } .product_placeholder { border: 1px solid rgb(0 0 0 / 12%);; aspect-ratio: 1; background-color: rgb(0 0 0 / .03); position: relative; } .product_placeholder img { position: absolute; top:0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; mix-blend-mode: multiply; border-radius:4px; } .product_placeholder svg { position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); } .product_placeholder svg.icon_full { z-index: 10; top: 0; left: auto; right: 0; } section { /* outline: 1px dashed; */ padding-bottom: 64px; } section.content { /* outline: 1px dashed; */ max-width: 720px; line-height: 1.3; font-size: 18px; padding-top: 32px; padding-bottom: 32px; } section.content h1 { font-size: 28px; font-weight: 600; } .cats { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; grid-row-gap: 24px; row-gap: 24px; } .cat_img { aspect-ratio: 1/1; position: relative; background-color: rgb(0 0 0 / .03); } .cat_img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cat_img svg { position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); } .cat_content { padding: 20px 5%; display: flex; } .cat_content_flex { flex: 1; } .cat { border: 1px solid rgb(0 0 0 / .12); display: flex; flex-direction: column; } .cat:active { transform: scale(0.98); } .cat h2 { font-size: 18px; font-weight: 600; } .cat .cat_count { color: rgb(0 0 0 / .7); font-weight: 600; } .cat .cat_desc { padding-top: 4px; font-size: 12px; color: rgb(0 0 0 / .7); font-weight: 400; } /* align-items: center; */ .cat.cat_link { /* border-bottom:1px solid rgb(0 0 0 / .12); */ color: #262626; color: var(--brand-color); display: flex; } .section_description { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-bottom: 40px; } .section_description div { grid-column: span 2; /* text-wrap: balance; */ } .product_cat { font-size: 14px; color: rgb(0 0 0 / .5); } @media (hover:hover) { .product:hover .product_title { color: #262626; color: var(--brand-color); } } body.archive h1 { font-size: 24px; font-weight: 800; } body.archive h2 { font-size: 14px; padding-bottom: 40px; color: rgb(0 0 0 / .5) } body.archive .b { display: grid; grid-template-columns: 256px auto; grid-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; margin-bottom: 24px; } body.archive .list { /* display: grid; grid-template-columns: 256px auto; column-gap: 24px; */ } body.archive .sticky { position: sticky; top: 80px; } body.archive .products { padding-bottom: 64px; } .hero { height: 480px; position: relative; margin-bottom: 32px; } .hero img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 3px; } body.page-template-template-products h1 { font-size: 32px; font-weight: 600; } body.single-products h1 { font-size: 24px; } body.single-products .product_content { max-width: 768px; /* padding-bottom: 60px; */ } table { /* width: 100%; */ border-collapse: collapse; } table caption { padding: 0; } table th, table td { padding: .5em; } table thead tr { /* background: #000; color: #fff; */ font-size: 14px; color: rgb(0 0 0 / .5); } table tbody tr:nth-child(even) { background: rgb(0 0 0 / .05); } .image_title { position: absolute; right: 0; left: 0; bottom: 0; /* outline: 1px dashed; */ padding: 40px 4px 10px 20px; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: flex-end; } .image_1 .image_title { background-image: linear-gradient(to top, white, rgb(255 255 255 / .5), transparent 90%); font-size: 18px; line-height: 1.1; } .images { display: grid; grid-template-areas: 'a a b c' 'a a d e'; grid-gap: 4px; gap: 4px; margin-bottom: 32px; position: relative; } .images button { --size: 36px; position: absolute; z-index: 2; bottom: 8px; right: 8px; background-color: white; font-size: 14px; font-weight: 600; padding: 0 16px; display: flex; height: 36px; height: var(--size); align-items: center; border-radius: 4px; } .images button svg { margin-right: 8px; } .image_1, .image_a { grid-area: a; padding-bottom: 100%; position: relative; } .image_2, .image_b { grid-area: b; } .image_3, .image_c { grid-area: c; } .image_4, .image_d { grid-area: d; } .image_5, .image_e { grid-area: e; } .image_1, .image_2, .image_3, .image_4, .image_5, .image_a, .image_b, .image_c, .image_d, .image_e { outline: 1px solid rgb(0 0 0 / 6%); aspect-ratio: 1; position: relative; background-color: rgb(0 0 0 / .05); } .image_1 img, .image_2 img, .image_3 img, .image_4 img, .image_5 img, .image_a img, .image_b img, .image_c img, .image_d img, .image_e img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; -o-object-fit: cover; object-fit: cover; /* mix-blend-mode: multiply; */ /* outline: 1px solid rgb(0 0 0 / .12); */ } .image_1 .icon_no_image, .image_2 .icon_no_image, .image_3 .icon_no_image, .image_4 .icon_no_image, .image_5 .icon_no_image, .image_a .icon_no_image, .image_b .icon_no_image, .image_c .icon_no_image, .image_d .icon_no_image, .image_e .icon_no_image { position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); } .image_1 .icon_more, .image_2 .icon_more, .image_3 .icon_more, .image_4 .icon_more, .image_5 .icon_more, .image_a .icon_more, .image_b .icon_more, .image_c .icon_more, .image_d .icon_more, .image_e .icon_more { opacity: 0.5; } .image_1.nema, .image_2.nema, .image_3.nema, .image_4.nema, .image_5.nema, .image_a.nema, .image_b.nema, .image_c.nema, .image_d.nema, .image_e.nema { /* background-color: rgb(0 0 0 / .05); */ } .ostalo_iz { font-size: 24px; padding: 64px 0 32px; font-weight: 600; } .main_usluge { max-width: 600px; } .main_usluge h1 { font-size: 24px; font-weight: 600; padding-bottom: 16px; } .main_usluge p { padding-bottom: 16px; } .main_usluge ul { margin-left: 15px; } .main_usluge ul li { padding-bottom: 16px; } .main_usluge ul li::before { content: "-"; display: inline-block; position: relative; margin-left: -15px; margin-right: 8px; } body.blog h1 { font-size: 16px; font-weight: 400; } body.blog h2 { font-size: 24px; line-height: 1.1; border-top: 1px solid rgb(0 0 0 / .12); padding: 16px 0; font-weight: 600; display: grid; grid-template-columns: auto 24px; } body.blog .posts { border-bottom: 1px solid rgb(0 0 0 / .12); margin-bottom: 64px; } body.blog .excerpt { padding-bottom: 5%; font-size: 14px; line-height: 1.5; color: rgb(0 0 0 / .5); } @media (hover:hover) { body.blog .post:hover { color: #262626; color: var(--brand-color); } } body.single .prevnext { padding: 32px 0; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } body.single .prev strong, body.single .next strong { display: block; font-weight: 600; font-size: 18px; padding-bottom: 10px; } body.single .prev a, body.single .next a { display: grid; grid-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } body.single .prev a { grid-template-columns: 24px auto; } body.single .next a { text-align: right; grid-template-columns: auto 24px; } body.single .excerpt { padding-bottom: 5%; font-size: 14px; line-height: 1.5; color: rgb(0 0 0 / .5); } .columns { display: grid; grid-template-columns: 2fr 1fr; grid-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } fieldset { display: flex; flex-direction: column; } fieldset .err { min-height: 16px; color: tomato; font-size: 12px; line-height: 1.1; } fieldset label { font-size: 13px; } fieldset input { height: 36px; border-radius: 3px; padding: 0 16px; border: 1px solid rgb(0 0 0 / .12); } fieldset input:focus { border-color: black; } fieldset [contenteditable] { border: 1px solid rgb(0 0 0 / .12); min-height: 64px; padding: 8px 16px; border-radius: 3px; } fieldset [contenteditable]:focus { border-color: black; } fieldset.error [contenteditable], fieldset.error input { border-color: rgb(255 0 0 / .5); background-color: rgb(255 0 0 / .12); } fieldset.error label { color: rgb(255 0 0); } .success { min-height: 56px; display: grid; place-items: center; color: #262626; color: var(--brand-color); font-size: 14px; font-weight: 600; } .errors { min-height: 56px; display: grid; place-items: center; } .errors div { color: rgb(255 0 0); font-size: 14px; font-weight: 600; } .button { height: 56px; background-color: #262626; background-color: var(--brand-color); width: 100%; color: white; font-size: 14px; font-weight: 600; text-align: center; letter-spacing: 1px; text-transform: uppercase; border-radius: 3px; } .button:active { transform: scale(0.98); } .button:disabled { background-color: rgb(0 0 0 / .12); } .button:disabled:active { transform: scale(1); } footer { border-top: 1px solid rgb(0 0 0 / .12); background-color: #262626; background-color: var(--brand-color); padding-bottom: 100px; } .footer_label { font-size: 13px; padding: 10px 0 5px; color: white; opacity: 0.7; } .social { padding-top: 16px; display: flex; align-items: center; } .social svg { margin-right: 8px; } .footer_container { max-width: 1024px; max-width: var(--max-width); margin: 0 auto; padding: 24px; color: white; display: grid; font-size: 14px; grid-template-columns: repeat(3, 1fr); grid-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; } .footer_container .menu { display: flex; flex-direction: column; align-items: flex-start; } .footer_container .menu li a { font-size: 14px; display: block; color: white; padding-bottom: 8px; } .footer_container .menu li.current_page_item a { color: white; position: relative; line-height: 1; } .footer_container .menu li.current_page_item a::after { display: block; content: ""; width: 4px; height: 4px; background-color: white; border-radius: 50%; position: absolute; top: 5px; left: -10px; } .menu_cats { display: flex; flex-direction: column; } .menu_cats a { font-size: 14px; text-transform: uppercase; display: block; color: white; padding-bottom: 8px; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(255 255 255 / .9); z-index: 10; } .modal_title { padding-top: 64px; font-size: 21px; font-weight: 600; padding-bottom: 10px; } .modal_wrapper { position: relative; height:100%; overflow-y: scroll; /* outline: 1px dashed; */ padding: 64px 0 100px; width: 100%; max-width: 500px; margin: 0 auto; } .modal_wrapper::-webkit-scrollbar{ display: none; } .modal_wrapper .image { margin-bottom: 2px; } .modal_wrapper img { width: 100%; height: auto; vertical-align: middle; } .image_caption { padding-top: 5px; font-weight: 600; } .image_description { font-size: 13px; padding-bottom: 20px; } .modal_close { --size: 36px; width: 36px; width: var(--size); height: 36px; height: var(--size); background-color: #262626; background-color: var(--brand-color); color: white; display: grid; place-items: center; position: absolute; border-radius: 50%; top: 10px; right: 10px; z-index: 10; } .cta { /* border: 1px solid rgb(0 0 0 / .12); */ min-height: 64px; border-radius: 8px; display: flex; justify-content: space-between; /* color: var(--brand-color); */ /* padding: 24px; */ } .cta button { height: 56px; border: 1px solid; color: #262626; color: var(--brand-color); padding: 0 36px; font-size: 13px; border-radius: 4px; letter-spacing: 1px; font-weight: 600; display: flex; align-items: center; text-transform: uppercase; } .cta button svg { margin-right: 8px; } .cta_title { font-weight: 600; font-size: 21px; } .cta_wrapper { max-width: 600px; padding-right: 10%; } @media (hover:hover) { .cta button:hover { background-color: #262626; background-color: var(--brand-color); color: white; cursor: pointer; } } @media (max-width: 512px) { body.home .image_2, body.home .image_3, body.home .image_4, body.home .image_5 { display: none; } .demax div { display: none; } .product_title { font-size: 18px; } .image_description, .image_caption, .modal_title { padding-left: 24px; padding-right: 24px; } .cta_wrapper { padding-right: 0; } .dh { display: block; } header { z-index: 10; } #map { width: calc(100% + 48px); margin: 0 -24px 32px; } main { padding: 0 24px 48px; } nav { padding: 0 24px; } /* header { & .logo { width: 128px; } } */ .image_b, .image_c, .image_d, .image_e, .gm-style-mtc, .mh, nav .menu-top-container, nav .menu-top-en-container, nav .menu-top-it-container, nav .menu-top-ru-container { display: none; } .nav { width: calc(100% - 24px); margin: 0 12px; position: fixed; z-index: 10; top: auto; bottom: 12px; } .nav.nav_menu { /* height: calc(100% - 24px); */ background-color: #262626; background-color: var(--brand-color); display: flex; flex-direction: column; border-radius: 4px; box-shadow: rgb(0 0 0 / .3) 0px 15px 30px 0px; } .nav.nav_menu .mobile_nav { flex: 1; } .nav.nav_menu nav { box-shadow: none; } .products { grid-template-columns: 1fr; -moz-column-gap: 0; column-gap: 0; } .cats { grid-template-columns: 1fr; } .footer_container { grid-template-columns: 1fr; } .cta { flex-direction: column; } .cta .cta_title { padding-bottom: 16px; } .support { margin-top: 32px; justify-content: center; } .section_description div { grid-column: span 4; } .columns { grid-template-columns: 1fr; } .images { margin: 0 -24px 32px; grid-template-areas: 'a a a a' 'a a a a' 'b c d e'; } .images button { bottom: 24px; right: 12px; } .link.tel { font-size: 18px; } } .mobile_nav { padding: 24px; } .mobile_nav .menu { display: flex; flex-direction: column; align-items: flex-start; } .mobile_nav .menu li { padding: 10px 0; } .mobile_nav .menu li a { font-size: 18px; } .mobile_nav .menu li.current_page_item a::after { left: -12px; top: calc(50% - 2px); } @media only screen and (max-width: 1023px) and (min-width: 513px) { .nav { margin: 0 12px; } } @media only screen and (max-width: 800px) and (min-width: 513px) { .menu-top-container, .menu-top-en-container, .menu-top-it-container, .menu-top-ru-container { display: none; } .dh.mobile_menu { display: block; } .nav.nav_menu { /* height: calc(100% - 24px); */ background-color: #262626; background-color: var(--brand-color); display: flex; flex-direction: column; border-radius: 4px; box-shadow: rgb(0 0 0 / .3) 0px 15px 30px 0px; } .nav.nav_menu .mobile_nav { order: 1; flex: 1; } .nav.nav_menu .mobile_nav .menu-top-container { display: block; } .nav.nav_menu nav { box-shadow: none; } .products, .cats { grid-template-columns: 1fr 1fr; } }