/* reset */ @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; } /* 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; } body { font-family: 'Roboto', sans-serif; } /* styles */ /* hero and header */ .container { max-width: 1024px; margin-right: auto; margin-left: auto; } .top-section { background-color: #1F2937; } header { display: flex; justify-content: center; align-items: center; padding-top: 24px; } .header-logo { color: #F9FAF8; font-weight: 700; font-size: 24px; } .navigation { display: flex; margin-left: auto; font-size: 18px; color: #E5E7EB; gap: 24px; } .hero-left p:nth-child(1) { font-size: 48px; font-weight: 900; color: #F9FAF8; } .hero-left p:nth-child(2) { font-size: 18px; color: #E5E7EB; opacity: 0.8; } .button { background-color: #3882f6; color: #F9FAF8; padding: 0.5em 1.4em; border-radius: 10px; font-size: 18px; font-weight: 700; margin-top: 16px; } .hero { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 100px; padding-bottom: 100px; } .hero-left { padding-right: 36px; } /* information section */ .information { background-color: #F9FAF8; padding-top: 80px; padding-bottom: 100px; } .information-header { font-size: 36px; font-weight: 900; color: #1F2937; text-align: center; } .information-content { display: flex; justify-content: center; gap: 40px; padding: 40px; } .card { width: 150px; } .card-text { padding: 2px; padding-top: 6px; text-align: center; color: #1F2937; font-size: 16px; opacity: 0.8; } .card-top { width: 150px; height: 150px; border: 4px solid #3882f6; border-radius: 10px; } /* quote */ .quote { background-color: #E5E7EB; padding-top: 120px; padding-bottom: 100px; } .quote .container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px } .quote-text { max-width: 820px; font-size: 36px; font-style: italic; font-weight: 300; color: #1f2937; } .quote-author { font-size: 24px; font-weight: 700; font: #1f2937; margin-left: auto; } /* call to action */ .cta { color: #F9FAF8; padding-top: 120px; padding-bottom: 100px; } .cta .container { background-color: #3882f6; border-radius: 6px; display: flex; padding: 12px; padding-top: 45px; padding-bottom: 45px; justify-content: space-around; align-items: center; } .cta-left p:nth-child(1) { font-weight: 700; font-size: 22px; } .cta-left p:nth-child(2) { font-size: 18px; color: #E5E7EB; } .cta-button { border: 3px solid #F9FAF8; } /* footer */ footer { background-color: #1F2937; padding: 40px; text-align: center; color: #E5E7EB; }