/*** The new CSS reset - version 1.8.4 (last updated 14.2.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 */ *: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; } html { font-family: "Roboto", sans-serif; } h1 { font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: -0.5px; text-align: left; color: #FFF; margin: 15px 0; } h2, h3 { font-family: Roboto, sans-serif; font-size: 26px; font-weight: 700; line-height: 28px; letter-spacing: 0.2px; margin-bottom: 15px; color: #FFF; } h2.dark, h3.dark { color: #22075A; } .icon { width: 52px; height: 52px; background: #FFF; border-radius: 26px; box-shadow: 0px 3px 23px 0px rgba(74, 6, 160, 0.0784313725); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .icon img { width: 20px; height: 20px; } p { font-family: Roboto, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.2px; text-align: left; margin-bottom: 15px; } p.light { color: #7B738C; } section { margin: 20px; padding: 20px; position: relative; } section p:last-child { margin-bottom: 0; } .no-margin { margin: 0; } .no-padding { padding: 0; } .margin { margin: 20px; } .padding { padding: 20px; } section.img-box { padding: 0; overflow: hidden; } section.img-box > img { width: 100%; } section.img-box div { padding: 20px; } section.light { border: 1px solid #F2EBFF; border-radius: 16px; } section.tag-line .flex-container { display: flex; flex-direction: column; } section.sneak-peek { position: relative; background: linear-gradient(212.49deg, #6F54B5 -17.95%, #3B2A5E 96.05%); margin: 0; padding: 0; border-radius: 16px; overflow: hidden; } section.sneak-peek .content { padding: 20px; } section.sneak-peek .content .icon { margin-top: -45px; } section.sneak-peek h2 { text-align: center; } div.review { overflow: hidden; border-radius: 16px; border: 1px solid #F2EBFF; background-color: #FFF; box-shadow: 0px 4px 16px 0px rgba(74, 6, 160, 0.0588235294); } div.review .details { padding: 20px; } div.review .hero-image { width: 100%; height: 220px; overflow: hidden; } section.review .controls { display: flex; flex-direction: row; justify-content: center; align-items: center; } section.review .controls h2 { flex-grow: 1; margin: 15px 0; } section.review .controls button { display: flex; align-items: center; justify-content: center; border-radius: 20px; margin-left: 10px; height: 40px; width: 40px; background-color: #FFF; box-shadow: 0px 3px 23px 0px rgba(74, 6, 160, 0.0784313725); font-size: 24px; } section.review .controls button.inactive { color: #E8E3F2; } .btn { border-radius: 25px; height: 50px; } .btn-block { display: flex; width: 100%; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; border: 1px solid; } .btn-purple { color: #FFF; background: linear-gradient(212.49deg, #5230AE -17.95%, #411C91 96.05%); border-image-source: linear-gradient(217.88deg, #7057B3 6.61%, #3F3650 94.91%); } .btn-lavender { border: 1px solid #776598; background: #69568C; color: #FFF; } section.main { display: flex; flex-direction: column; align-items: center; margin: 0; background: linear-gradient(180.21deg, rgba(20, 7, 56, 0) 0.19%, #0A031C 78.86%), url("https://static.obcsingles.club/static/imgs/hero-option1.jpeg") no-repeat center; background-size: cover; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } section.main img.logo-icon { width: 25%; margin-top: 150px; } section.main .logo-icon-container { text-align: center; width: 100%; } section.join { margin: -105px 0 0 0; padding: 0; position: relative; z-index: 2; border-top-left-radius: 50px; background: #EEEBF7; text-align: center; overflow: hidden; } section.join .content { padding: 40px 20px 40px 20px; } section.join .content h2 { color: #22075A; } section.join .content p { text-align: center; } section.join .get-app { position: relative; background: linear-gradient(212.49deg, #6F54B5 -17.95%, #3B2A5E 96.05%); border-top-left-radius: 50px; padding-top: 30px; } section.join .get-app .flex-container h1 { text-align: center; } section.join .get-app .flex-container p { text-align: center; color: #FFF; } section.join .get-app .terms { border-top: 1px solid rgba(123, 115, 140, 0.48); padding: 20px; } section.join .get-app .terms a { color: #7B738C; } section.join .get-app .terms p { text-align: center; } .stats { width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top: 16px; } .stats .item { background: rgba(105, 86, 140, 0.4705882353); border: 1px solid rgba(119, 101, 152, 0.6); width: 48%; color: #FFF; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; } .stats .item div { font-size: 14px; font-weight: 300; line-height: 18px; letter-spacing: 0.2px; text-align: center; } .stats .item div:first-child { font-size: 32px; font-weight: 700; line-height: 36px; text-align: center; } .btn-appstore { padding: 0; background-color: #69568C; border: 1px solid #776598; border-radius: 35px; height: 70px; margin: 20px 40px; display: flex; align-items: center; justify-content: center; } .scroll-window::-webkit-scrollbar { display: none; } .scroll-window { padding: 0px 20px; width: 100%; overflow: scroll; } .scroll-window .scroll-container { display: flex; justify-content: space-between; position: relative; width: 1500px; height: 400px; margin: 0 auto; } .scroll-window .scroll-container .scroll-item { width: 340px; height: 380px; } .screens::-webkit-scrollbar { display: none; } .screens { padding-bottom: 20px; overflow: scroll; } .screens > div { display: flex; } .screens > div > img { margin: 0 40px; } .big, .big-flex { visibility: hidden; display: none; } .small { visibility: visible; display: block; } .small-flex { visibility: visible; display: flex; } section.profiles { margin: 0; padding: 0; height: 250px; overflow: hidden; } section.profiles .flex-container { width: 100%; display: flex; justify-items: center; flex-direction: column; } section.profiles .flex-container img { min-width: 375px; max-width: 425px; max-inline-size: none; max-block-size: none; } @media only screen and (min-width: 800px) { .small, .small-flex { visibility: hidden; display: none; } .big { display: block; visibility: visible; } .big-flex { display: flex; visibility: visible; } section.main { display: flex; flex-direction: column; align-items: center; margin: 0; background: linear-gradient(180.21deg, rgba(20, 7, 56, 0) 0.19%, #0A031C 78.86%), url("../imgs/photohero.jpg") no-repeat center; background-size: cover; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } section.main .logo-icon-container { text-align: left; } section.main img.logo-icon { width: 80px; margin: 0; } section.main div.stats { width: 400px; } section.main a.btn { width: 400px; } section.main h1 { margin-top: 200px; margin-bottom: 80px; font-size: 100px; font-weight: 700; } p { font-style: normal; font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -0.2px; font-feature-settings: "ss04" on; color: #7B738C; } section.tag-line { width: 1200px; margin: 40px auto; padding: 40px; } section.tag-line .flex-container { display: flex; flex-direction: row; justify-content: space-between; } section.tag-line .flex-container > div { width: 45%; } section.tag-line .flex-container a.btn.big-flex { width: 320px; } section.tag-line .flex-container h2 { font-style: normal; font-weight: 700; font-size: 54px; line-height: 60px; letter-spacing: -0.02em; color: #22075A; margin-bottom: 40px; } section.cheers { display: flex; flex-direction: row; width: 1200px; margin: 40px auto; } section.cheers > img { width: 50%; height: auto; } section.cheers h2 { font-style: normal; font-weight: 700; font-size: 54px; line-height: 60px; letter-spacing: -0.02em; /* OBC/Main/dark blue */ color: #22075A; } section.cheers > div { padding: 40px; } .icon { width: 80px; height: 80px; background: #FFF; border-radius: 40px; box-shadow: 0px 3px 23px 0px rgba(74, 6, 160, 0.0784313725); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .icon img { width: 35px; height: 35px; } section.location { width: 1200px; margin: 40px auto; padding: 40px; } section.location .flex-container { display: flex; flex-direction: row; justify-content: space-between; } section.location .flex-container > div { width: 48%; } section.location .flex-container h2 { font-style: normal; font-weight: 700; font-size: 54px; line-height: 60px; letter-spacing: -0.02em; color: #22075A; margin-bottom: 40px; } section.review { width: 1200px; margin: 40px auto; padding: 20px; } section.review p { font-size: 16px; } section.review .scroll-container { height: auto; margin-bottom: 20px; } section.review .scroll-container .scroll-item { height: auto; } section.review .scroll-container .scroll-item .details { padding: 40px; } section.relax { display: flex; flex-direction: row; width: 1200px; margin: 40px auto; } section.relax > img { width: 50%; height: auto; } section.relax h2 { font-style: normal; font-weight: 700; font-size: 54px; line-height: 60px; letter-spacing: -0.02em; /* OBC/Main/dark blue */ color: #22075A; } section.relax > div { padding: 40px; } section.profiles { margin: 0; padding: 0; height: 550px; overflow: hidden; } section.profiles .flex-container { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } section.profiles .flex-container img { height: 700px; width: 1580px; max-inline-size: none; max-block-size: none; } section.join .content { padding-top: 100px; padding-bottom: 90px; display: flex; flex-direction: column; align-items: center; } section.join .content p { font-size: 24px; margin: 40px 0; } section.join .content a.btn { width: 320px; } section.join .content h2 { font-style: normal; font-weight: 700; font-size: 120px; line-height: 132px; text-align: center; letter-spacing: -0.5px; /* OBC/Main/dark blue */ color: #22075A; } section.join .get-app > .flex-container { padding: 100px; display: flex; flex-direction: row; justify-content: space-between; } section.join .get-app > .flex-container .text { width: 68%; } section.join .get-app > .flex-container .text h1 { font-style: normal; font-weight: 700; font-size: 54px; line-height: 60px; letter-spacing: -0.5px; /* OBC/Main/white */ color: #FFFFFF; text-shadow: 0px 1px 4px rgba(110, 1, 188, 0.04); } section.join .get-app > .flex-container .text p { font-style: normal; font-weight: 400; font-size: 24px; line-height: 36px; /* OBC/Main/white */ color: #FFFFFF; } section.join .get-app > .flex-container .buttons { width: 30%; } section.join .get-app .terms.big { display: flex; justify-content: space-between; padding: 40px; } section.join .get-app .terms.big p, section.join .get-app .terms.big a { font-style: normal; font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: -0.2px; font-feature-settings: "ss04" on; color: rgba(255, 255, 255, 0.4); } section.sneak-peek { position: relative; background: linear-gradient(212.49deg, #6F54B5 -17.95%, #3B2A5E 96.05%); margin: 0; padding: 0; border-radius: 16px; overflow: hidden; } section.sneak-peek .content { padding: 20px; } section.sneak-peek .content .icon { margin-top: -75px; } section.sneak-peek .content a { margin-bottom: 40px; } section.sneak-peek h2 { font-style: normal; font-weight: 700; font-size: 54px; line-height: 60px; text-align: center; letter-spacing: -0.02em; color: #FFFFFF; margin: 40px 0; } section.sneak-peek .screens { padding-bottom: 0; } section.sneak-peek .screens > div { display: flex; justify-content: center; } section.sneak-peek .screens > div > img { width: 360px; margin: 0 40px; } section.sneak-peek .screens > div > img:last-child { margin: 0; } } /*# sourceMappingURL=index.css.map */