/* ================================================================================== */ /* == Normalize.css v8.0.1 ========================================================== */ /* ================================================================================== */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} *,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none } /* Viewport Sizing */ @-webkit-viewport{width:device-width} @-moz-viewport{width:device-width} @-ms-viewport{width:device-width} @-o-viewport{width:device-width} @viewport{width:device-width} :root { --text-default: #57606a; --text-dark: #24292f; --text-light: #8f98a3; --purple: #4D6BCB; --blue: #4D6BCB; --light-blue: #d7e6f5; --dark-blue: #2f466c; --pink: #f8ebe6; --pink2: #FAC8CD; --yellow: #fdebd2; --green: #90B494; --green2: #7CB4B8; --padding: 80px; --font-sans: 'DM Sans', sans-serif; --font-serif: 'DM Serif Display', serif; --radius: 10px; } @media only screen and (max-width: 600px) { :root { --padding: 50px; } } @media only screen and (max-width: 500px) { :root { --padding: 40px; } } @media only screen and (max-width: 450px) { :root { --padding: 32px; } } @media only screen and (max-width: 380px) { :root { --padding: 27px; } } /* ================================================================================== */ /* == General Styles ================================================================ */ /* ================================================================================== */ html,body { background: #faf9f5; font-family: var(--font-sans); color: var(--text-default); font-size: 18px; line-height: 1.3; } .container { max-width: 1300px; margin: 0 auto; padding: var(--padding); } .container:after { content: ""; display: table; clear: both; } a { text-decoration: none; color: var(--blue); transition: all 0.218s; } a:hover { } h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 400; color: var(--text-dark); } h2 { font-size: 2.3rem; margin-bottom: 1rem; text-shadow: 0 -1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1); } p { margin: 1rem 0; } .left { float: left; } .right { float: right; } @media only screen and (max-width: 600px) { h2 { font-size: 2rem; } } @media only screen and (max-width: 500px) { h2 { font-size: 1.85rem; } html,body { font-size: 17px; } } /* ================================================================================== */ /* == Header ======================================================================== */ /* ================================================================================== */ #header { background: #fff; padding: 20px 40px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1); z-index: 3; } #header:after { content: ""; display: table; clear: both; } #header h1 { float: left; height: 76px; width: 330px; margin: 0; background: url('img/waschsalon2.png') no-repeat left center; background-size: 100% auto; text-indent: -9999px; } #header h4 { font-size: 17px; } #header p { margin: 0; font-size: 23px; font-family: 'DM Serif Display', serif; color: var(--purple); } #header .open-hours, #header .phone-number, #header .location-switcher { float: right; margin-left: 40px; } #header .open-hours { padding: 12px 0; margin: 0; } #header .phone-number { padding: 12px 0; } #header .location-switcher { position: relative; width: 155px } #header .location-switcher-active { overflow: hidden; background: var(--purple) url('img/chevron-down.svg') no-repeat right 15px center; background-size: 24px; color: #fff; padding: 12px 50px 12px 20px; border-radius: var(--radius); cursor: pointer; } #header .location-switcher .location-switcher-list { display: none; position: absolute; width: 100%; background: var(--purple); border-radius: 0 0 var(--radius) var(--radius); } #header .location-switcher .location-switcher-list li { border-top: 1px solid rgba(255,255,255,0.2); } #header .location-switcher .location-switcher-list li a { display: block; padding: 20px; color: #fff; } #header .location-switcher h4 { color: #fff; } #header .location-switcher p { color: #fff; } #header .location-switcher.open .location-switcher-active { border-radius: var(--radius) var(--radius) 0 0; } #header .location-switcher.open .location-switcher-list { display: block; } @media only screen and (max-width: 950px) { #header h1 { float: none; margin: 10px auto 50px; width: 54%; height: auto; aspect-ratio: 3/0.7; position: relative; } #header:before { content: ""; width: 100vw; height: 1px; background: #e3e3e3; position: absolute; bottom: 115px; left: 0; } #header .open-hours { float: left; margin: 0; } #header .phone-number { float: left; margin: 0 40px 0 0; } #header .location-switcher { width: 190px; } } @media only screen and (max-width: 630px) { #header h1 { width: 88%; height: auto; aspect-ratio: 3/0.7; margin: 10px auto 30px; } #header:before { display: none; } #header .location-switcher { float: none; margin: 20px 0; width: 100%; } #header .open-hours { float: left; margin: 0; } #header .phone-number { float: right; margin: 0; } } @media only screen and (max-width: 550px) { #header { padding: 20px 30px; } } @media only screen and (max-width: 400px) { #header h4 { font-size: 17px; } #header p { font-size: 21px; } } /* ================================================================================== */ /* == Hero ========================================================================== */ /* ================================================================================== */ #hero { overflow: hidden; padding: 220px 0; background: url(img/jasper/laundromat1.jpg) no-repeat center; background-size: cover; position: relative; text-align: center; } #hero h2 { font-size: 6.5vw; text-shadow: 0 0 80px #fff, 0 0 60px #fff, 0 0 22px #fff, 0 0 10px #fff, 0 0 3px #fff; color: #000; line-height: 1.1; } #hero h3 { font-size: 2vw; font-family: var(--font-sans); text-sha//dow: 0 0 80px #fff, 0 0 60px #fff, 0 0 22px #fff, 0 0 10px #fff, 0 0 3px #fff; font-weight: 400; color: var(--blue); color: #cea027; background: rgba(206, 160, 39, 0.9); backdrop-filter: blur(1px); clip-path: polygon(6% 8%, 100% 0%, 96% 92%, 0% 100%); color: #fff; display: inline-block; padding: 0.8em 2em 0.65em; font-style: italic; border-bottom: 10px solid #9b791d; text-shadow: 0 1px 2px rgba(0,0,0,0.35); } #hero .text { position: relative; z-index: 1; padding: 1.5rem; } #hero:before { content: ""; width: 100%; height: 100%; background: rgba(255,255,255,0.1); position: absolute; top: 0; left: 0; backdrop-filter: blur(0.5px); } #hero:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;background: linear-gradient(45deg, var(--yellow) 0%, rgba(198,216,249,0) 100%); background: radial-gradient(circle, #ffde9a 0%, #ffdb81 100%); opacity:0.1; } @media only screen and (max-width: 1300px) { #hero { padding: 150px 0; } } @media only screen and (max-width: 1100px) { #hero { padding: 100px 0; } } @media only screen and (max-width: 950px) { #hero h2 { font-size: 8vw; } #hero h3 { font-size: 2.5vw; } } @media only screen and (max-width: 800px) { #hero { padding: 60px 0; } } @media only screen and (max-width: 700px) { #hero .text { padding: 0;} #hero h2 { font-size: 9vw; } #hero h3 { font-size: 3.5vw; border-bottom-width: 4px; } } @media only screen and (max-width: 500px) { #hero .text { padding: 0;} #hero h2 { font-size: 10vw; } #hero h3 { font-size: 4vw; } } .stripes { grid:repeat(5,270px)/repeat(10,1fr); -webkit-transform-origin:0; transform-origin:0; background:linear-gradient(#9092a3, #4D6BCB 10%, #d5d4df 38%, #d7e6f5 48%, rgba(255,255,255,0.35) 62%, #4D6BCB 95%); position: absolute; top:0; left: 0; z-index: 1; width: 100%; display: grid; transform: skewY(-14deg); mix-blend-mode: hard-light; } .stripes :first-child { grid-column:span 3; background:linear-gradient(100grad,rgba(243,251,255,.4),rgba(243,251,255,.15) 20%,rgba(243,251,255,0)); } .stripes :nth-child(2) { grid-area:3/span 3/auto/-1; } .stripes :nth-child(3) { grid-row:4; grid-column:span 5; } .stripes :nth-child(4) { grid-area:4/span 5/auto/-1; } .stripes :nth-child(5) { grid-area:auto/1/-1/-1; background:linear-gradient(100grad,rgba(124, 180, 184, 0.15) 80%, rgba(255,255,255,0.25)); } @media (min-width:670px) { .stripes :nth-child(2) { background:linear-gradient(100grad,rgba(144, 146, 163,0),rgba(144, 146, 163,.05) 40%,rgba(144, 146, 163,.35)); } .stripes :nth-child(3) { background:linear-gradient(100grad,rgba(255,255,255,0.3) 50%,hsla(0,0%,100%,0)); } .stripes :nth-child(4) { background:linear-gradient(100grad,rgba(144, 146, 163,0) 10%,rgba(144, 146, 163,.05)); } } @media only screen and (max-width: 1300px) { .stripes { grid:repeat(5,230px)/repeat(10,1fr); } } @media only screen and (max-width: 1100px) { .stripes { grid:repeat(5,190px)/repeat(10,1fr); } } @media only screen and (max-width: 800px) { .stripes { grid:repeat(5,150px)/repeat(10,1fr); } } /* ================================================================================== */ /* == Services ====================================================================== */ /* ================================================================================== */ #services { background: #fff url('img/bg-slant.png') no-repeat bottom -2px left; background-size: 100% auto; overflow: hidden; } #services { position: relative; box-shadow: 0 -1px 1px rgba(0,0,0,0.1), 0 -2px 2px rgba(0,0,0,0.07), 0 -4px 8px rgba(0,0,0,0.05); z-index: 3; } #services .left { float: left; width: 35%; } #services .right { float: right; width: 65%; padding-left: var(--padding); } #services ul li { background: #fff; display: flex; padding: calc(var(--padding) / 3); border-radius: var(--radius); border: 1px solid #eee; margin-bottom: calc(var(--padding) / 3); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; overflow: hidden; } #services ul li:last-child { margin: 0; } #services ul li .icon { width: 100px; display: flex; align-items: center; } #services ul li .icon:before { content: ""; display: block; width: 100%; aspect-ratio: 1; border: 2px solid #4639c1; border-radius: 200px; outline: 50px solid rgba(70, 57, 193, 0.12); outline-offset: -100px; } #services ul li #self.icon:before { background: url(img/icon-laundry-machine.png) no-repeat center; background-size: 50% auto; } #services ul li #drop.icon:before { background: url(img/icon-shirt.png) no-repeat center; background-size: 50% auto; } #services ul li #business.icon:before { background: url(img/icon-business-shirt.png) no-repeat center; background-size: 50% auto; } #services ul li .text { width: calc(100% - 100px); padding-left: calc(var(--padding) / 3); } #services ul li h3 { font-size: 1.5rem; } #services ul li h4 { margin-bottom: 20px; font-size: 1.2rem; color: #cea027; } #services ul li p { margin: 0; } @media (min-width: 950px) and (max-width: 1100px) { #services ul li { display: block; } #services ul li .icon { margin: 0 auto 20px; display: none; } #services ul li .text { width: 100%; padding: 0; } } @media only screen and (max-width: 950px) { #services .left, #services .right { float: none; width: 100%; } #services .right { padding: calc(var(--padding) / 2) 0 0 0; } } @media only screen and (max-width: 700px) { #services ul li { display: block; } #services ul li .icon { margin: 0 auto 20px; display: none; } #services ul li .text { width: 100%; padding: 0; } } @media only screen and (max-width: 700px) { #services .right { padding-top: 30px; } #services ul li { padding: 30px; margin-bottom: 30px; } } @media only screen and (max-width: 380px) { #services .right { padding-top: var(--padding); } #services ul li { padding: calc(var(--padding) / 1.25); margin-bottom: var(--padding); } } /* ================================================================================== */ /* == Photos ======================================================================== */ /* ================================================================================== */ #photos { width: 100%; background: linear-gradient(0deg, #4639c1 20%, var(--blue) 100%); backgrou/nd: var(--blue); padding: 0 0 calc(var(--padding) - 20px) 0; position: relative; } #photos h2 { margin: 0 0 calc(var(--padding) / 2) 0; color: #fff} #photos ul { overflow-x: scroll; overflow-y: hidden; width: 100%; white-space: nowrap; padding: 0 calc(var(--padding) / 2) 20px; } #photos ul::-webkit-scrollbar{ display: none; } #photos ul li { width: 400px; background: #aaa; border: 8px solid #fff; border-radius: var(--radius); overflow: hidden; display: inline-block; margin: 0 0 0 calc(var(--padding) / 2); box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; } #photos ul li img { display: block; width: 100%; } #photos .container { padding-top: 0; padding-bottom: 0; } @media only screen and (min-width: 1300px) { #photos .container { display: none; } #photos ul { padding-left: 0; } } @media only screen and (max-width: 600px) { #photos { padding: 30px 0 60px 0; } } @media only screen and (max-width: 500px) { #photos ul li { width: 75vw; } } /* ================================================================================== */ /* == FasCard ======================================================================= */ /* ================================================================================== */ #fascard { background: linear-gradient(0deg, #afcae5 10%, #d7e6f5 70%); overflow: hidden; position: relative; } #fascard .container { display: flex; } #fascard .text { order: 0; overflow: hidden; width: 55%; padding: 50px var(--padding) 50px 0; text-shadow: 0 0 3px rgba(255,255,255,0.15), 0 0 8px rgba(255,255,255,0.15); } #fascard .img { order: 1; width: 45%; background: url("img/fascard.png") no-repeat right; background-size: contain; } #fascard .button { float: left; display: block; width: 200px; height: 75px; margin-top: calc(var(--padding) / 2); padding: 7px; background: #000; border-radius: var(--radius); box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; } #fascard .button:first-of-type { margin-right: 20px; } #fascard .button img { display: block; width: auto; height: 100%; } #fascard .button#apple-store { background: #000 url("img/apple-store.png") no-repeat center; background-size: contain; background-origin: content-box; } #fascard .button#play-store { background: #000 url("img/play-store.png") no-repeat center; background-size: contain; background-origin: content-box; } @media only screen and (max-width: 1185px) { #fascard .text { width: 55%; } #fascard .img { width: 45%; } } @media only screen and (max-width: 1070px) { #fascard .text { width: 65%; } #fascard .img { width: 35%; } } @media only screen and (max-width: 1000px) { #fascard .text { width: 70%; padding: 50px 50px 50px 0 } #fascard .img { width: 30%; } } @media only screen and (max-width: 900px) { #fascard .container { display: block; } #fascard .text { width: 100%; padding: calc(var(--padding) / 2) 0 0 0; } #fascard .img { width: 65%; aspect-ratio: 1; margin: 0 auto; } #fascard .button { width: calc(50% - 10px); height: 80px } } @media only screen and (max-width: 700px) { #fascard .img { width: 80%; } } @media only screen and (max-width: 500px) { #fascard .img { width: 85%; } #fascard .button { height: 65px; } } @media only screen and (max-width: 413px) { #fascard h2 { letter-spacing: -0.01em; font-size: 1.8rem; } } @media only screen and (max-width: 390px) { #fascard h2 { letter-spacing: -0.03em; } } /* ================================================================================== */ /* == Self Service ================================================================== */ /* ================================================================================== */ #self-service { background: var(--yellow); background: radial-gradient(circle, #ffde9a 0%, #ffdb81 100%); text-align: center; position: relative; overflow: hidden; } #self-service h2 { margin: 0; position: relative; z-index: 2; } #self-service:before { content: ""; width: 100%; height: 30px; background: url("img/cutout5.svg") no-repeat center top; background-size:calc(100% + 100px) 30px; position: absolute; top: 0; left: 0; opacity: 1; } #self-service:after { content: ""; width: 100%; height: 30px; background: url("img/cutout3.svg") no-repeat -60px bottom; background-size: calc(100% + 60px) 30px; position: absolute; bottom: 0; left: 0; opacity: 1; } @media only screen and (max-width: 500px) { #self-service h2 { padding: 1em 0; } } /* ================================================================================== */ /* == Fold Service ================================================================== */ /* ================================================================================== */ #fold-service { background: #f8f8f8; background: #faf9f5; } #fold-service table { width: 100%; background: #fff; border: 1px solid #e3e3e3; border-radius: var(--radius); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px, rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(0, 0, 0, 0.05) 0px 4px 4px, rgba(0, 0, 0, 0.05) 0px 8px 8px, rgba(0, 0, 0, 0.05) 0px 16px 16px;} #fold-service table tr { } #fold-service table td { padding: 13px 15px; border-bottom: 1px dotted #e3e3e3; } #fold-service table tr td:nth-child(1) { color: var(--text-dark); } #fold-service table tr td:nth-child(2) { color: var(--purple); padding-left: 0; } #fold-service table tr:last-child td { border: none; } #fold-service p { col//or: var(--text-light); opacity: 0.75; } @media only screen and (max-width: 500px) { #fold-service { font-size: 0.9rem; } } /* ================================================================================== */ /* == Locations ===================================================================== */ /* ================================================================================== */ #location { background: var(--light-blue); background: linear-gradient(-17deg, rgba(132,161,214,1) 0%, rgba(198,216,249,1) 80%); background: #d7e6f5; position: relative; } #location .location-tabs { font-weight: 700; } #location .location-tabs li { float: left; background: #fff; font-family: var(--font-serif); box-shadow: rgba(0, 0, 100, 0.08) 0px 4px 12px; font-size: 1.25rem; padding: calc(var(--padding) / 3) calc(var(--padding) / 2); border-radius: var(--radius) var(--radius) 0 0; margin-right: 10px; cursor: pointer; } #location .location-tabs li.active { background: #4D6BCB; box-shadow: none; color: #fff; text-shadow: 0 1px 2px rgba(9, 8, 45, 0.6); } #location .location-tabs li:last-child { margin: 0;} #location .location-tab-content { width: 100%; background: #4D6BCB; background: linear-gradient(0deg, var(--dark-blue) -60%, var(--blue) 100%); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: calc(var(--padding) / 2); overflow: hidden; color: #fff; box-shadow: 0 5px 20px rgba(200, 185, 255, 0.4), 0 2px 5px rgba(9, 8, 45, 0.2); box-shadow: rgba(0, 0, 100, 0.07) 0px 1px 2px, rgba(0, 0, 100, 0.07) 0px 2px 4px, rgba(0, 0, 100, 0.07) 0px 4px 8px, rgba(0, 0, 100, 0.07) 0px 8px 16px, rgba(0, 0, 100, 0.07) 0px 16px 32px, rgba(0, 0, 100, 0.07) 0px 32px 64px; } #location .location-tab-content li { display: none; } #location .location-tab-content li.active { display: block; } #location .info { float: left; width: 350px; text-shadow: 0 1px 2px rgba(9, 8, 45, 0.6); padding-right: 40px; } #location .info h3 { margin-top: 1.5rem; color: #fff; } #location .info h3:first-child { margin-top: 0; } #location .info p { margin: 0.25em 0 0.25em 0; color: #d5d2ff; } #location .info a { color: #d5d2ff; } #location iframe { float: left; width: calc(100% - 350px); border: 8px solid #fff !important; border-radius: 8px; } #location a.facebook { display: block; background: #fff url("img/icon-facebook.png") no-repeat left 20px center; background-size: 30px; padding: 20px 30px 20px 62px; font-size: 0.9rem; color: var(--text-default); text-shadow: none; margin-top: 1.72rem; border-radius: var(--radius); box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; } #location a.facebook span { display: block; color:#4D6BCB; font-weight: 700; font-size: 1rem; margin-top: -1px; } @media only screen and (max-width: 900px) { #location .info { float: none; width: 100%; padding: 0 0 calc(var(--padding) / 2) 0; } #location iframe { float: none; width: 100%; height: auto; aspect-ratio: 1; } } @media only screen and (max-width: 712px) { #location .location-tabs li { font-size: 1.1rem; padding: 25px; } } @media only screen and (max-width: 560px) { #location .location-tabs li { font-size: 1rem; } } @media only screen and (max-width: 500px) { #location .info { padding: 10px 10px 35px 10px; } } @media only screen and (max-width: 480px) { #location .location-tabs li { margin: 0; padding: 1.2rem 0; border-radius: 0; width: 33.33%; text-align: center; border-right: 1px solid #e3e3e3; } #location .location-tabs li:first-child { border-radius: var(--radius) 0 0 0; } #location .location-tabs li:last-child { border-radius: 0 var(--radius) 0 0; border: none; } #location .location-tab-content { border-radius: 0 0 8px 8px; } } @media only screen and (max-width: 400px) { #location .location-tabs li#jasper { width: 28%; } #location .location-tabs li#washington { width: 39%; } #location .location-tabs li#princeton { width: 33%; } } /* ================================================================================== */ /* == Footer ======================================================================== */ /* ================================================================================== */ #footer { clear: both; background: var(--dark-blue); overflow: hidden; position: relative; } #footer .container { padding: calc(var(--padding) / 2) var(--padding); } #footer p, #footer a { margin: 0; font-size: 14px; color: var(--light-blue); } #footer a:hover { text-decoration: underline; }