@charset "utf-8"; /* Regular */ @font-face { font-family: 'ABCArizonaText'; src: url('../fonts/ABCArizonaText-Regular.woff') format('woff'), url('../fonts/ABCArizonaText-Regular.woff2') format('woff2'), url('../fonts/ABCArizonaText-Regular.otf') format('opentype'); font-weight: bold; font-style: normal; font-display: block; } /* Light */ @font-face { font-family: 'ABCArizonaText'; src: url('../fonts/ABCArizonaText-Light.woff') format('woff'), url('../fonts/ABCArizonaText-Light.woff2') format('woff2'), url('../fonts/ABCArizonaText-Light.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: block; } :root { --primary: #003D40; --secondary: #ffffff; } *: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 */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::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; } /* 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; } /** * Smooth scrolling on the whole document */ html { scroll-behavior: smooth; } @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { color: var(--primary); background-color: var(--secondary); font-family: ABCArizonaText; font-weight: normal; font-size: 16px; line-height: 24px; word-wrap: break-word; } h1 { font-size: 46px; line-height: 1; } h2 { font-size: 32px; line-height: 1.2; } a:not(.button) { font-weight: bold; text-decoration: underline; } a[href^="tel:"] { font-weight: normal; text-decoration: none; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mr-40 { padding-right: 40px; } .button { text-decoration: none; padding: 10px 20px; border: 1px solid var(--primary); text-align: center; display: inline-flex; justify-content: center; align-items: center; background-color: transparent; transition: background-color .2s ease-in; /* Icon */ &::after { content: url(../images/expand.svg); width: 24px; height: 24px; text-align: center; transition: all .2s ease-in; transform: rotate(90deg); margin-left: 10px; } &:hover { background-color: var(--secondary); &::after { transform: rotate(90deg) translateY(-5px); } } } .container { max-width: 1200px; width: 100%; padding: 20px; margin: 0 auto; } .header { background-color: var(--primary); } .header-logo { padding: 10px 0; display: flex; } .header img { height: 30px; } .hero { position: relative; } .hero img { width: 100%; height: 500px; object-fit: cover; object-position: center; } .hero-container { position: absolute; inset: 0; } .hero-container .container { height: 100%; display: flex; } .hero-content { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .body { padding: 60px 0; } .offices { scroll-margin-top: 60px; } .offices.international { padding-top: 60px; } /* Accordion styles */ .tabs { border-radius: 0; overflow: hidden; } .tab { width: 100%; overflow: hidden; border-bottom: 1px solid var(--primary); background: var(--secondary); position: relative; } .tab-label { display: flex; justify-content: space-between; padding: 30px 20px 30px; font-weight: bold; cursor: pointer; color: var(--primary); } .tab-label::after { content: url(../images/expand.svg); width: 24px; height: 24px; text-align: center; transition: all .2s ease-in; transform: rotate(180deg); } .tab-content { max-height: 0; padding: 0 20px; color: var(--primary); overflow: hidden; transition: all 0.2s ease-out; } /* :checked */ .tab-label.active::after { transform: rotate(0deg); } .tab-label.active ~ div { padding: 0 20px 30px; } .footer-wrapper { display: flex; flex-direction: column-reverse; justify-content: space-between; } .footer-disclaimer { width: 100%; max-width: 605px; } .footer-logos { padding-bottom: 20px; display: flex; align-items: center; } .footer-logos img { width: 90px; max-inline-size: 90px; } @media only screen and (min-width: 540px) { .header img { height: 50px; } .header-logo { padding: 55px 0; } .hero-content { max-width: 385px; } } @media only screen and (min-width: 768px) { .footer-wrapper { flex-direction: row; padding: 10px 0; } .footer-disclaimer { margin-right: 40px; } .footer-logos { padding-bottom: 0; } }