/*** The new CSS reset - version 1.8.2 (last updated 23.12.2022) 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 */ *: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; appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: ""; } /* 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; } /* ######## Reset - END ######## */ :root { --base-font-size: 1.125rem; --base-line-height: 1.625rem; --h1-font-size: 2rem; --h1-line-height: 2.688rem; --h2-font-size: 1.375rem; --h2-line-height: 1.875rem; --h3-font-size: 1.375rem; --h3-line-height: 1.875rem; --h4-font-size: 1.25rem; --h4-line-height: 1.65rem; --h5-font-size: 1rem; --h5-line-height: 1.35rem; --body-max-width: 1920px; --container-max: 1240px; --content-max: 770px; /* around 68ch */ --hero-height: 440px; --column-gap: 2rem; --margin-block: 1.25rem; --padding-inline: 1.25rem; --section-padding-inline: 1.25rem; --section-padding-block: 2rem; --iron: #d6d6d6; --glitter: #e4eaf4; --shadowblue: #768CA1; --onyx: #0e0e0e; --ryb-orange: #f39202; --gold-drop: #f38300; --black: #0e0e0e; --white: #fff; } @media screen and (min-width: 1024px) { :root { --base-font-size: 1.25rem; --base-line-height: 1.813rem; --h1-font-size: 3.25rem; --h1-line-height: 3.813rem; --h2-font-size: 2.5rem; --h2-line-height: 3.25rem; --h3-font-size: 2.25rem; --h3-line-height: 2.875rem; --h4-font-size: 2rem; --h4-line-height: 2.5rem; --h5-font-size: 1.5rem; --h5-line-height: 1.85rem; --section-padding-block: 4rem; } } /* merriweather-regular - latin */ @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 400; src: local(''), url('/fonts/merriweather-v30-latin-regular.woff2') format('woff2'), url('/fonts/merriweather-v30-latin-regular.woff') format('woff'); } /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local(''), url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'), url('/fonts/roboto-v30-latin-regular.woff') format('woff'); } /* roboto-italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local(''), url('/fonts/roboto-v30-latin-italic.woff2') format('woff2'), url('/fonts/roboto-v30-latin-italic.woff') format('woff'); } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local(''), url('/fonts/roboto-v30-latin-700.woff2') format('woff2'), url('/fonts/roboto-v30-latin-700.woff') format('woff'); } /* ######## Helpers ######## */ .sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ######## Default Styles ######## */ body { box-sizing: border-box; display: flex; min-height: 100vh; flex-direction: column; margin: 0 auto; padding: 0; background-color: var(--white); font-family: Roboto, sans-serif; font-size: var(--base-font-size); font-style: normal; font-weight: 400; line-height: var(--base-line-height); color: var(--onyx); } main { flex: 1; } .section-wrapper { display: flex; flex-direction: column; padding-block: var(--section-padding-block); } h1, h2, h3, h4 { margin-block-end: var(--margin-block); font-family: Merriweather, serif; font-weight: normal; color: var(--shadowblue); } h1 { font-size: var(--h1-font-size); line-height: var(--h1-line-height); } h2 { font-size: var(--h3-font-size); line-height: var(--h3-line-height); } h3 { font-size: var(--h4-font-size); line-height: var(--h4-line-height); } h4 { font-size: var(--h4-font-size); line-height: var(--h4-line-height); } a { color: inherit; text-underline-position: under; text-underline-offset: .15rem; } p, ul, ol, dl { margin-block-end: var(--margin-block); max-width: var(--content-max); } img { display: block; max-width: 100%; } strong { font-family: Roboto, sans-serif; font-style: normal; font-weight: 700; } em { font-family: Roboto, sans-serif; font-style: italic; font-weight: 400; } .header-wrapper, .footer-wrapper { max-width: var(--container-max); margin: 0 auto; } /* ######## Header ######## */ .header-site { min-height: 400px; height: var(--hero-height); /* overridden by half the height of the hero image itself */ display: grid; grid-template-areas: "hero"; } .header-wrapper { grid-area: hero; display: grid; grid-template-areas: "head"; width: 100%; } .header-hero { grid-area: hero; object-fit: cover; object-position: top center; width: 100%; height: 100%; max-height: var(--hero-height); } .header-logo { grid-area: head; place-self: start start; width: 220px; margin-block-start: var(--base-font-size); margin-inline-start: var(--section-padding-inline); } .header-logo svg { width: inherit; } @media screen and (min-width: 768px) { .header-logo { width: 270px; } } .header-nav { margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; display: flex; gap: 1.563rem; } .header-nav-item { list-style: none; border-block-end: 3px solid transparent; transition: all .3s ease-in-out; } .header-nav-item:hover, .header-nav-item.active { border-block-end-color: var(--ryb-orange); } .header-nav-item:last-child { display: flex; align-items: center; gap: .5rem; } .header-nav-link { display: inline-block; text-decoration: none; text-transform: uppercase; font-size: 1rem; letter-spacing: .05rem; } .header-site-heading { grid-area: head; place-self: start center; padding-block-start: 50%; padding-inline: 2rem; text-align: center; color: var(--onyx); } .header-site-heading span { white-space: nowrap; } @media screen and (min-width: 768px) { .header-site-heading { place-self: end start; padding-inline-start: var(--section-padding-inline); padding-block-start: 0; padding-block-end: 1rem; font-size: 3.25rem; line-height: 3.813rem; text-align: left; color: var(--white); } } /* Nav styles - START */ /* Source: https://web.dev/website-navigation/#hide-the-navigation-on-narrow-viewports */ @media (min-width: 58rem) { #mainnav { --nav-button-display: none; --nav-position: static; } .header-nav { --nav-list-layout: row; --nav-list-position: static; --nav-list-padding: 0; --nav-list-height: auto; --nav-list-width: 100%; --nav-list-shadow: none; --nav-list-transform: none; --nav-list-visibility: visible; } } #mainnav { grid-area: head; place-self: start end; margin-block-start: var(--base-font-size); margin-inline-end: var(--section-padding-inline); position: var(--nav-position, fixed); inset-block-start: 1rem; inset-inline-end: 1rem; } /* Remove default list styling and create layout for list */ .header-nav { background: var(--white); box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.1)); display: flex; flex-direction: var(--nav-list-layout, column); flex-wrap: wrap; gap: 0.9rem; height: var(--nav-list-height, 100vh); list-style: none; padding: var(--nav-list-padding, 2rem); padding-block-start: 4rem; position: var(--nav-list-position, fixed); inset-block-start: 0; inset-inline-end: 0; width: var(--nav-list-width, min(15rem, 100vw)); visibility: var(--nav-list-visibility, visible); } @media (prefers-reduced-motion: no-preference) { .header-nav { /*transition: transform 0.6s cubic-bezier(.68, -0.55, .27, 1.55), visibility 0.3s linear;*/ transition: transform 0.6s ease-out, visibility 0.6s linear; } } [aria-expanded="false"] + .header-nav { background: var(--white); transform: var(--nav-list-transform, translateX(100%)); visibility: var(--nav-list-visibility, hidden); } @media (min-width: 58rem) { .header-nav { padding-block-start: 0; } [aria-expanded="false"] + .header-nav { background: transparent; } } /* Reset button styling */ button { all: unset; display: var(--nav-button-display, flex); position: relative; z-index: 100; background-color: var(--white); border-radius: 100%; padding: .4rem; } /* Nav styles - END */ /* ######## Main ######## */ .page-heading { max-width: var(--content-max); margin-inline: auto; margin-block-end: 0; padding-block-start: var(--section-padding-block); padding-inline: var(--section-padding-inline); font-size: var(--h1-font-size); line-height: var(--h1-line-height); text-align: left; } .page-heading.center { text-align: center; } @media screen and (min-width: 768px) { .page-heading { padding-inline: 0; } } @media screen and (min-width: 1024px) { .page-heading { font-size: var(--h2-font-size); line-height: var(--h2-line-height); } } article header { padding-inline: var(--section-padding-inline); padding-block-start: var(--section-padding-block); } article a { color: var(--ryb-orange); transition: all .2s ease-in-out; display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; border-block-end: 1px solid var(--ryb-orange); border-width: .1rem; } article a:hover { text-underline-offset: .1rem; } article a:after { content: ""; display: inline; width: var(--base-font-size); height: var(--base-font-size); margin-inline-start: .5rem; background: url('/img/arrow.svg') no-repeat 0 calc(var(--base-font-size) / 8); color: var(--ryb-orange); transform: scale(120%); } article h3, article h4, article h5 { font-family: Roboto, sans-serif; font-weight: 400; } article p:last-child { margin-block-end: 0; } /* Text + Media */ .section-text-media-wrapper { max-width: var(--content-max); padding-inline: var(--section-padding-inline); margin-inline: auto; } .section-text-media-wrapper .heading { text-align: center; } .element { margin-block-end: var(--section-padding-block); } .element:last-child { margin-block-end: 0; } .element-heading { flex-shrink: 0; flex-basis: 100%; font-family: Merriweather, serif; font-size: var(--h3-font-size); line-height: var(--h3-line-height); } .element-media { margin-block-end: var(--margin-block); } @media screen and (min-width: 768px) { .section-text-media-wrapper { padding-inline: var(--section-padding-inline); padding-block: calc(var(--section-padding-block) * 1.5); } } @media screen and (min-width: 1200px) { .section-text-media-wrapper { max-width: var(--container-max); padding-inline: 0; } .element { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: var(--container-max); margin: 0 auto; padding-inline: 0; padding-block: var(--section-padding-block); padding-block-end: 0; } .element-heading { font-size: 2.25rem; /* 36px */ line-height: 2.875rem; /* 46px */ } .element-content { position: relative; width: 42.5rem; /* 68px */ min-height: 440px; padding-inline: 5rem; /* 80px */ padding-block-start: 2.5rem; /* 40px */ transform: translateY(25px); background-color: var(--white); z-index: 2; } .element.odd .element-content { place-self: start end; } .element-media { height: 440px; max-width: 35rem; /* 560px */ overflow: hidden; transform: translateY(-25px); } .element-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .element.even .element-content { order: 1; } .element.even .element-media { order: 2; place-self: start end; } .element .element-img, .element .element-media, .element .element-content { transition: all .3s ease-in-out; } .element:hover .element-img { transform: scale(110%); transform-origin: center center; } .element:hover .element-content { transform: translateX(40px) translateY(25px); } .element.odd:hover .element-content { transform: translateX(-40px) translateY(25px); } } /* Text */ .section-text .section-wrapper { max-width: var(--content-max); padding-inline: var(--section-padding-inline); margin-inline: auto; } @media screen and (min-width: 768px) { .section-text .section-wrapper { padding-inline: 0; } } .section-text li { list-style-type: none; margin-block-end: 1.5rem; padding-left: 1.875em; background: url('/img/list-style.svg') no-repeat 0 calc(var(--base-font-size) / 2); background-size: 8px; } .section-text li:last-child { margin-block-end: 0; } /* Media */ .section-media .section-wrapper { margin-inline: auto; } .section-media-img { width: 100%; max-width: 900px; margin: 0 auto; } .section-media-img.wide { max-width: var(--container-max); } /* ######## Contact block ######## */ .aside-contact { background-color: var(--glitter); padding-inline: var(--section-padding-inline); padding-block-end: calc(var(--section-padding-block) * 2); } .contact-wrapper { max-width: var(--content-max); margin-inline: auto; } .aside-contact .heading { padding-block-start: var(--section-padding-block); text-align: center; } .contact-content a, .contact-link { color: inherit; text-decoration: underline; text-underline-position: under; text-underline-offset: .15rem; transition: all .2s ease-in-out; } .contact-content a:hover, .contact-link:hover { text-underline-offset: .1rem; } .contact-content .subheading { font-size: var(--h3-font-size); line-height: var(--h3-font-size); } .contact-content p { font-size: 1.125rem; /* 18px */ } .contact-media { background-color: var(--white); margin-block-end: calc(var(--margin-block) * 2); } .contact-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } @media screen and (min-width: 1200px) { .contact-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: var(--container-max); margin: 0 auto; padding-block: var(--section-padding-block); padding-block-end: 0; } .contact-content .subheading { font-size: 2.25rem; /* 36px */ line-height: 2.875rem; /* 46px */ color: var(--white); } .contact-content { order: 1; width: 43.75rem; /* 700px */ height: 440px; padding-inline-start: 5rem; /* 80px */ padding-inline-end: 10rem; /* 160px */ padding-block-start: 4.375rem; /* 70px */ transform: translateY(25px); background-color: var(--shadowblue); color: var(--white); } .contact-content p { font-size: 1.125rem; /* 18px */ } .contact-media { order: 2; height: 440px; place-self: start end; width: 36.25rem; /* 580px */ transform: translateY(-25px); background-color: var(--white); } .contact-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } } /* ######## Team ######## */ .section-team { width: 100%; background-color: var(--glitter); } .section-team-wrapper { max-width: var(--container-max); margin-inline: auto; } .section-team .heading { margin-inline: auto; margin-block-end: var(--section-padding-block); text-align: center; } .team-list { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--column-gap) * 2); max-width: 75rem; /* 1200px */ margin-inline: auto; padding-block-end: var(--section-padding-block); } .team-list-item { flex: 0 0 300px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .team-portrait { display: block; width: 280px; aspect-ratio: 1; border-radius: 100%; background-color: var(--white); margin-block-end: var(--margin-block); object-fit: cover; object-position: center center; } .team-name { display: block; text-align: center; } .team-function { display: block; font-family: Roboto, sans-serif; font-weight: 700; } /* ######## Services ######## */ .section-services { width: 100%; background-color: var(--glitter); background-size: cover; background-repeat: no-repeat; background-position: top center; } .section-services-wrapper { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--section-padding-inline); } @media screen and (min-width: 900px) { .section-services-wrapper { padding-inline: 0; } } .section-services .heading { max-width: var(--content-max); margin-block-end: var(--section-padding-block); } @media screen and (min-width: 768px) { .section-services .heading { width: var(--content-max); margin-inline: auto; } } .services-content { margin-inline: auto; margin-block-end: var(--section-padding-block); } .services-list { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--column-gap) * 2); max-width: 75rem; /* 1200px */ margin-inline: auto; padding-block-end: var(--section-padding-block); } .services-list { flex: 0 0 240px; } .services-list-icon { display: flex; justify-content: center; align-items: center; width: 240px; aspect-ratio: 1; border-radius: 100%; background-color: var(--white); margin-block-end: var(--margin-block); transition: transform .3s ease-out; border-bottom: none; } .services-list-item { display: flex; flex-direction: column; align-items: center; max-width: 240px; word-wrap: break-word; } .services-list-link { display: inline; text-align: center; text-decoration: none; color: var(--onyx); border-bottom: none; } .services-list-icon:after, .services-list-link:after { content: unset; } .services-list-item:hover .services-list-icon { transform: rotate(23deg); } /* Icon services details page */ .header-service-icon { place-self: start end; display: flex; justify-content: center; width: 240px; margin-block-end: var(--margin-block); align-items: center; border-radius: 100%; background-color: var(--glitter); aspect-ratio: 1; } .services-back { display: flex; justify-content: space-between; align-items: center; column-gap: 2rem; width: fit-content; margin-block-end: var(--section-padding-block); margin-inline: auto; padding: 1.25rem 2rem; /* 20px */ background-color: var(--glitter); border-radius: 50px; color: var(--shadowblue); text-decoration: none; border-bottom: none; } .services-back:after { content: unset; } .services-back .link-arrow { transition: all .3s ease-in-out; } .services-back:hover .link-arrow { transform: translateX(-5px); } /* ######## Footer ######## */ .footer-site { position: relative; background-color: var(--shadowblue); padding-block-start: 80px; padding-block-end: 20px; padding-inline: var(--section-padding-inline); color: var(--white); } .footer-link { color: inherit; text-decoration: underline; text-underline-position: under; text-underline-offset: .15rem; text-underline-style: single; transition: all .2s ease-in-out; } .footer-link:hover { text-underline-offset: .05rem; } .footer-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--column-gap); padding-block-end: var(--section-padding-block); } .footer-logo { display: block; max-width: 16.875rem; position: relative; top: -20px; /* Slight offset so the text aligns */ } .footer-nav { padding-inline-start: 0; } .footer-nav-item { list-style: none; padding-inline-start: 0; margin-block-end: 1rem; } .footer-scroll-up { display: flex; width: 90px; height: 90px; position: absolute; left: calc(50% - 45px); top: -45px; /* 1rem footer padding */ margin: 0 auto; border-radius: 100%; background-color: var(--shadowblue); cursor: pointer; justify-content: center; align-items: center; } .footer-scroll-up .link-arrow { transition: all .3s ease-in-out; } .footer-scroll-up:hover .link-arrow { transform: translateY(-5px); } .footer-copyright { max-width: var(--container-max); margin: 0 auto; } .company .email, .emergency .phone { margin-block-end: 0; } .emergency .content a { color: var(--white); text-decoration: underline; /*width: min-content;*/ background: url('/img/arrow_white.svg') no-repeat 100% 75%; padding-right: 1.25rem; text-underline-position: under; text-underline-offset: .15rem; text-underline-style: single; transition: all .2s ease-in-out; } .emergency .content a:hover { text-underline-offset: .05rem; } /* Cookie banner */ #elc-cookie-tab { background-color: var(--shadowblue) !important; } #elc-cookie-consent { box-shadow: 0 0 6px 0 rgba(0,0,0,.25) !important; } #elc-cookie-consent h3 { font-weight: normal !important; } #elc-cookie-consent.elc-small { background-color: var(--white); padding: 1rem; max-width: calc(100% - 2rem); bottom: 0; right: 0; } #elc-cookie-consent.elc-fullwidth { max-width: calc(100% - 2rem); width: calc(100% - 2rem) !important; padding: 1rem; bottom: 0; right: 0; } @media screen and (min-width: 768px) { #elc-cookie-consent.elc-small { bottom: 1rem; right: 1rem; } } @media screen and (min-width: 1024px) { #elc-cookie-consent.elc-fullwidth { padding: 2rem; max-width: 60%; bottom: 1rem; right: 1rem; } } #elc-cookie-consent.elc-small .elc-button-link { width: auto !important; } #elc-cookie-consent.elc-fullwidth .elc-button-link { width: auto; white-space: nowrap; overflow: scroll; text-overflow: ellipsis ellipsis; } #elc-cookie-consent #elc-save-link, #elc-cookie-consent #elc-accept-link, #elc-cookie-consent #elc-reject-all-link, #elc-cookie-consent #elc-accept-all-link { background-color: var(--ryb-orange); } @media screen and (min-width: 768px) { #elc-cookie-consent #elc-reject-all-link, #elc-cookie-consent #elc-accept-all-link { width: min-content; } } #elc-cookie-consent #elc-cookie-consent-settings { margin-bottom: 0; } #elc-cookie-consent .elc-cookie-group { float: none; } #elc-cookie-consent .button-container { display: flex; flex-direction: column-reverse; gap: 1rem; justify-content: flex-end; margin-top: var(--margin-block); } @media screen and (min-width: 768px) { #elc-cookie-consent.elc-fullwidth .button-container { flex-direction: row; } } /* #elc-cookie-consent.elc-small #elc-accept-link { display: none; } */ #elc-cookie-consent #elc-save-link, #elc-cookie-consent #elc-accept-link { color: var(--white); text-transform: uppercase; } #elc-cookie-consent #elc-detail-link { text-align: center; } #elc-cookie-consent .details-button-container { text-align: center; } #elc-cookie-consent #elc-hide-detail-link, #elc-cookie-consent #elc-detail-link { margin-right: 0; color: var(--shadowblue); text-decoration: none; text-transform: none; } #elc-cookie-consent #elc-hide-detail-link:hover, #elc-cookie-consent #elc-detail-link:hover { text-decoration: underline; } #elc-cookie-consent .elc-primary-heading { color: var(--shadowblue); } #elc-cookie-consent.elc-fullwidth .elc-cookie-name { color: var(--shadowblue); font-size: 1.1rem; padding-bottom: 3px; } #elc-cookie-consent input[type="checkbox" i] { margin: 8px 3px 3px 0.6em !important; }