@charset "UTF-8"; /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; -moz-user-select: auto; 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: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { 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; line-break: after-white-space; -moz-user-select: auto; 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; } html { font-size: 62.5%; } body { font-size: 1.6rem; background-color: #fff; font-family: "Inter", Helvetica, Arial, sans-serif; line-height: 1.25; margin: auto; overflow-x: hidden; font-weight: 400; } h1, h2, h3, h4 { margin: 0.1em 0 0.5em; font-weight: 500; } h1 { font-size: clamp(3.2rem, 10vw, 6rem); } h2 { font-size: 2.4rem; } h3 { font-size: 1.8rem; } h4 { font-size: 1.6rem; } a { color: #8C8C8C; position: relative; } a:before { content: ""; position: absolute; display: block; height: 2px; bottom: -0.1em; left: 0; right: 0; background-color: #8C8C8C; opacity: 0; transition: opacity 0.3s ease; } a:hover::before { opacity: 1; } figure a:hover::before { opacity: 0; } p { margin: 0 0 0.75em; } ul, ol { margin: 1em 0; margin-left: 2.6rem; } ul { list-style: disc; } ol { list-style-type: decimal; } nav ul, nav ol { display: flex; margin: 0; padding: 0; list-style: none; } .main-content { width: 96%; margin: auto; max-width: 1440px; } .container { width: 96%; max-width: 1440px; margin: auto; } .button { display: inline-block; background-color: #02506c; border-radius: 5px; color: #fff; padding: 14px 30px 12px; font-size: 1.6rem; transition: transform 0.2s ease; } .button:hover { transform: scale(1.05); } .main-content figure { opacity: 0; } .main-content figure.fade-in { animation: slideIn 0.8s ease 0.3s forwards; } @keyframes slideIn { 0% { -webkit-transform: translateY(40px); opacity: 0; } 100% { -webkit-transform: translateY(0px); opacity: 1; } } .block:not(.block-heading, .block-list, .block-text) { margin-bottom: 60px; } .overlay, .main-content .brands article figure .overlay-gray { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.33); z-index: 1; } .main-content { font-size: 1.8rem; margin: 2% auto; } .main-content section { margin-bottom: 60px; } .main-content .hero { background-position: right; position: relative; } .main-content .hero h1 { font-size: clamp(5rem, 10vw, 13.6rem); margin: 0; color: #fff; padding: 0.6em 0.6em; position: relative; z-index: 2; line-height: 0.9; } .main-content .brands article { margin-bottom: 24px; } .main-content .brands article figure { background-color: #E5E5E5; height: 220px; display: flex; align-items: center; justify-content: center; padding: 30px; position: relative; } .main-content .brands article figure a:before { opacity: 0; } .main-content .brands article figure .overlay-gray { background-color: #E5E5E5; transition: opacity 0.25s ease; } .main-content .brands article figure img { max-width: 80%; max-height: 120px; max-width: 250px; transition: filter 0.25s ease; position: relative; z-index: 2; } .main-content .brands article figure:hover .overlay-gray { opacity: 0; } .main-content .brands article figure:hover img { filter: invert(1); } .main-content .brands article .info h3 { margin: 0.5em 0 0.3em; } .main-content .brands article .info a { margin: 0; position: relative; } .main-content .brands article .info a:after { height: 14px; width: 14px; top: 2px; position: absolute; background-image: url(/assets/images/pil-gra.svg); background-size: 14px; content: ""; } .main-content .about .label h2 { font-size: 2.6rem; color: #8C8C8C; font-weight: 400; } @media screen and (min-width: 500px) { .main-content .hero h1 { padding: 0.4em 0 0.4em 34%; } .main-content .brands h2 { font-size: 3rem; } .main-content .brands .layout { display: flex; flex-wrap: wrap; gap: 2%; } .main-content .brands .layout article { display: flex; flex-direction: column; flex: 1 1 32%; } .main-content .brands .layout article > a:hover:before { opacity: 0; } .main-content .brands .layout article figure { height: clamp(220px, 40vw, 600px); } .main-content .brands .layout article figure img { max-height: 180px; } .main-content .about { display: flex; gap: 2%; } .main-content .about .label { display: flex; flex: 1 1 32%; } .main-content .about .content { display: flex; flex-direction: column; flex: 1 1 66%; } } @media screen and (min-width: 800px) { .main-content p { font-size: 2rem; } .main-content .brands h2 { font-size: clamp(3rem, 5vw, 5.2rem); } .main-content .about { justify-content: space-between; } .main-content .about .content { flex: 0 1 50%; } } .site-header { z-index: 100; border-bottom: 4px solid #000; } .site-header .info-bar { padding: 8px; text-align: center; background-color: black; color: #fff; font-size: 16px; } .site-header .info-bar a { color: #fff; text-decoration: underline; } .site-header .container { height: 80px; display: flex; align-items: center; justify-content: space-between; position: relative; } .site-header .site-logo { height: 54px; } .site-header .main-menu { display: none; } @media (min-width: 500px) { .site-header .container { height: 120px; } .site-header .site-logo { height: 64px; } .site-header .main-menu { display: flex; height: 68px; align-items: flex-end; } .site-header .main-menu a { padding: 8px; position: relative; color: #000; } .site-header .main-menu a:before { content: ""; position: absolute; display: block; height: 2px; bottom: 4px; left: 6px; right: 6px; background-color: #000; opacity: 0; transition: opacity 0.3s ease; } .site-header .main-menu a:hover::before { opacity: 1; } } @media screen and (min-width: 1024px) { .site-header .container { height: 180px; } .site-header .site-logo { height: 80px; } .site-header .main-menu { display: flex; justify-content: center; flex: 1; padding-right: 142px; height: 80px; } .site-header .main-menu li { margin: auto 30px; } .site-header .main-menu li a { font-size: 2rem; } } .site-footer { display: flex; flex-direction: column; padding: 40px 2% 0; border-top: 4px solid #000; font-size: 1.5rem; background-image: url(/assets/images/gemlasmall.png); background-position: top 40px right 2%; background-repeat: no-repeat; } .site-footer a { font-weight: 300; } .site-footer h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } .site-footer p { color: #8C8C8C; font-weight: 300; } .site-footer .footer-menu ul { display: flex; flex-direction: column; margin-bottom: 12px; } .site-footer .column { line-height: 2; flex-direction: column; margin-bottom: 30px; } .site-footer .rights { font-size: 1.5rem; text-align: center; margin-top: 20px; margin-bottom: 20px; font-weight: 300; color: #8C8C8C; } @media all and (min-width: 500px) { .site-footer { background-position: right 2% bottom 20px; background-size: 65px; } .site-footer .columns { width: 100%; display: flex; flex-wrap: wrap; } .site-footer .columns .column { display: flex; flex: 1 1 33%; margin-bottom: 0; } .site-footer .columns .column h3 { margin-bottom: 14px; } .site-footer .rights { margin-top: 60px; } } @media all and (min-width: 800px) { .site-footer { background-image: none; } .site-footer .columns { background-image: url(/assets/images/gemlasmall.png); background-repeat: no-repeat; padding-left: 34%; padding-bottom: 60px; } .site-footer .rights { margin-top: 0; } }