diff --git a/css/sections.css b/css/sections.css index 22bd916..93e6ad7 100644 --- a/css/sections.css +++ b/css/sections.css @@ -1 +1 @@ -.header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin-bottom:15px;}@media (min-width:600px){.header{margin-bottom:30px}}.header .wordmark{color:#f4e3b7;font-size:28px;font-family:'Titan One';margin-bottom:0;margin-right:20px;margin-top:0;text-shadow:0 2px 4px rgba(20,0,20,0.25);text-transform:uppercase;}@media (min-width:600px){.header .wordmark{font-size:42px;line-height:56px}}@media (min-width:1200px){.header .wordmark{font-size:60px;margin-right:30px}}.header .logo{max-width:48px;}@media (min-width:600px){.header .logo{max-width:60px}}@media (min-width:1200px){.header .logo{max-width:100px;width:100px}}section.hero{background:radial-gradient(50% 50% at 50% 50%,#d4c3e6 0%,#e2cff7 100%);padding-top:10px;z-index:20;}section.hero .wave path{fill:#e2cff7}@media (min-width:600px){section.hero{padding-top:20px}}@media (min-width:1200px){section.hero{padding-top:0}}section.hero .sectionInner{padding-bottom:20px;}@media (min-width:1200px){section.hero .sectionInner{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-left:30px;padding-right:30px;padding-bottom:100px;padding-top:100px;width:calc(100% - 60px)}}section.hero .heroLeft{max-width:100%;}@media (min-width:1200px){section.hero .heroLeft{margin:0 60px 0 20px;position:relative;bottom:20px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:500px;max-width:100%;margin-right:-50px;margin-bottom:-40px;position:relative;right:60px;}@media (min-width:1200px){section.hero img.hero.heroImgDesktop{display:inline-block}}@media (min-width:1600px){section.hero img.hero.heroImgDesktop{right:0}}section.hero img.hero.heroImgMobile{display:inline-block;margin-bottom:0;margin-top:20px;max-height:400px;max-width:100%;}@media (min-width:600px){section.hero img.hero.heroImgMobile{max-height:600px}}@media (min-width:1200px){section.hero img.hero.heroImgMobile{display:none}}section.hero .title{color:#fafafa;font-size:24px;margin-bottom:0;text-shadow:0 2px 2px rgba(0,0,0,0.1);}@media (min-width:600px){section.hero .title{font-size:36px;margin-bottom:15px;margin-top:20px}}@media (min-width:1200px){section.hero .title{font-size:42px;margin-top:20px}}section.hero .subtitle{font-size:16px;margin:20px 0 30px 0;max-width:100%;text-align:center;}@media (min-width:600px){section.hero .subtitle{font-size:22px}}@media (min-width:1200px){section.hero .subtitle{font-size:26px;margin:25px 0 35px 0}}section.hero .appStoreButtons{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:20px;}section.hero .appStoreButtons a{display:inline-block;position:relative;}section.hero .appStoreButtons a.android{opacity:.5}section.hero .appStoreButtons a img{height:auto;width:150px;}@media (min-width:600px){section.hero .appStoreButtons a img{width:180px}}section.hero .appStoreButtons a .unreleased{color:#888;position:absolute;font-size:12px;left:0;right:0;margin:0 auto;text-align:center;font-style:italic;}@media (min-width:1200px){section.hero .appStoreButtons a .unreleased{bottom:-30px}}section.hero .langSupport{color:#888;display:inline-block;font-weight:bold;font-size:14px;text-align:center;padding-right:0;margin-right:0;padding-top:50px;width:auto;}@media (min-width:600px){section.hero .langSupport{font-size:16px}}section.hero .langSupport i{margin-right:10px}section.partner{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:5;}section.partner .wave path{fill:#ffedbd}section.partner a{text-decoration:underline}section.flashcard{background:radial-gradient(50% 50% at 50% 50%,#f7b8b5 0%,#f8bfbc 100%);z-index:4;}section.flashcard .wave path{fill:#f8bfbc}section.flashcard a{text-decoration:underline}section.blogSection{background:radial-gradient(50% 50% at 50% 50%,#558 0%,#60609a 100%);z-index:1;}section.blogSection .wave path{fill:#60609a}section.blogSection h3{color:#fafafa}section.blogSection .blog{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:10px;-ms-flex-pack:center;justify-content:center;margin-top:0;max-width:1024px;width:100%;}@media (min-width:600px){section.blogSection .blog{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}section.blogSection .blog li{-ms-flex-align:center;align-items:center;box-shadow:0 2px 2px rgba(0,0,0,0.25);border-radius:5px 2px 5px 2px;display:-ms-flexbox;display:flex;margin:0;max-width:100%;overflow:hidden;position:relative;width:100%;}@media (min-width:600px){section.blogSection .blog li{width:auto}}section.blogSection .blog li .wave{bottom:50px;box-shadow:none;left:0;right:0;margin:0 auto;transform:scaleX(5) scaleY(.5) rotate(180deg);z-index:55;}section.blogSection .blog li .wave path{fill:rgba(247,184,181,0.95);transition:fill .2s}section.blogSection .blog li:hover .wave path{fill:#f7b8b5}@media (min-width:1200px){section.blogSection .blog li .wave{bottom:50px;transform:scaleX(2.285) scaleY(.5) rotate(180deg)}}section.blogSection .blog p{color:#444;font-size:16px;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}section.blogSection .blog h3{color:#444;font-size:16px;font-weight:normal;line-height:1.5;margin:0;max-width:80%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap;}@media (min-width:1200px){section.blogSection .blog h3{font-size:18px}}section.blogSection .blog a{text-shadow:none}section.blogSection .blog img{background:none;border-radius:2px;bottom:0;left:0;margin:0 auto;max-height:180px;position:absolute;right:0;text-align:center;top:20px;z-index:0}section.blogSection .blog .blogImage{background:#d4c3e6;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.25);display:inline-block;height:240px;margin:0;max-width:100%;position:relative;transform:scale(1);transition:all .15s;width:100%;}@media (min-width:600px){section.blogSection .blog .blogImage{width:320px}}section.blogSection .blog .blogImage:hover .blogOverlay{background:#f7b8b5}section.blogSection .blog .blogOverlay{-ms-flex-align:start;align-items:flex-start;background:rgba(247,184,181,0.95);bottom:0;border-radius:0;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;padding:10px;position:absolute;transition:background .2s;width:100%;}@media (min-width:1200px){section.blogSection .blog .blogOverlay{padding:5px 20px 10px 20px}}section.blogSection .blog .blogDate{color:#fafafa}section.about{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:0;}section.about .wave path{fill:#ffedbd}section.about p{line-height:2;text-align:center}section.about img{border-radius:200px;height:200px;width:200px;margin-bottom:20px;box-shadow:0 2px 2px rgba(0,0,0,0.25)}section.about a{color:#333;font-weight:bold} \ No newline at end of file +.header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin-bottom:15px;}@media (min-width:600px){.header{margin-bottom:30px}}.header .wordmark{color:#f4e3b7;font-size:28px;font-family:'Titan One';margin-bottom:0;margin-right:20px;margin-top:0;text-shadow:0 2px 4px rgba(20,0,20,0.25);text-transform:uppercase;}@media (min-width:600px){.header .wordmark{font-size:42px;line-height:56px}}@media (min-width:1200px){.header .wordmark{font-size:60px;margin-right:30px}}.header .logo{max-width:48px;}@media (min-width:600px){.header .logo{max-width:60px}}@media (min-width:1200px){.header .logo{max-width:100px;width:100px}}section.hero{background:radial-gradient(50% 50% at 50% 50%,#d4c3e6 0%,#e2cff7 100%);padding-top:10px;z-index:20;}section.hero .wave path{fill:#e2cff7}@media (min-width:600px){section.hero{padding-top:20px}}@media (min-width:1200px){section.hero{padding-top:0}}section.hero .sectionInner{padding-bottom:20px;}@media (min-width:1200px){section.hero .sectionInner{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding-left:30px;padding-right:30px;padding-bottom:100px;padding-top:100px;width:calc(100% - 60px)}}section.hero .heroLeft{max-width:100%;}@media (min-width:1200px){section.hero .heroLeft{margin:0 60px 0 20px;position:relative;bottom:20px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:500px;max-width:100%;margin-right:-50px;margin-bottom:-40px;position:relative;right:60px;}@media (min-width:1200px){section.hero img.hero.heroImgDesktop{display:inline-block}}@media (min-width:1600px){section.hero img.hero.heroImgDesktop{right:0}}section.hero img.hero.heroImgMobile{display:inline-block;margin-bottom:0;margin-top:20px;max-height:400px;max-width:100%;}@media (min-width:600px){section.hero img.hero.heroImgMobile{max-height:600px}}@media (min-width:1200px){section.hero img.hero.heroImgMobile{display:none}}section.hero .title{color:#fafafa;font-size:24px;margin-bottom:0;text-shadow:0 2px 2px rgba(0,0,0,0.1);}@media (min-width:600px){section.hero .title{font-size:36px;margin-bottom:15px;margin-top:20px}}@media (min-width:1200px){section.hero .title{font-size:42px;margin-top:20px}}section.hero .subtitle{font-size:16px;margin:20px 0 30px 0;max-width:100%;text-align:center;}@media (min-width:600px){section.hero .subtitle{font-size:22px}}@media (min-width:1200px){section.hero .subtitle{font-size:26px;margin:25px 0 35px 0}}section.hero .appStoreButtons{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;gap:20px;}section.hero .appStoreButtons a{display:inline-block;position:relative;}section.hero .appStoreButtons a img{height:auto;width:150px;}@media (min-width:600px){section.hero .appStoreButtons a img{width:180px}}section.hero .appStoreButtons a .unreleased{color:#888;position:absolute;font-size:12px;left:0;right:0;margin:0 auto;text-align:center;font-style:italic;}@media (min-width:1200px){section.hero .appStoreButtons a .unreleased{bottom:-30px}}section.hero .langSupport{color:#888;display:inline-block;font-weight:bold;font-size:14px;text-align:center;padding-right:0;margin-right:0;padding-top:50px;width:auto;}@media (min-width:600px){section.hero .langSupport{font-size:16px}}section.hero .langSupport i{margin-right:10px}section.partner{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:5;}section.partner .wave path{fill:#ffedbd}section.partner a{text-decoration:underline}section.flashcard{background:radial-gradient(50% 50% at 50% 50%,#f7b8b5 0%,#f8bfbc 100%);z-index:4;}section.flashcard .wave path{fill:#f8bfbc}section.flashcard a{text-decoration:underline}section.blogSection{background:radial-gradient(50% 50% at 50% 50%,#558 0%,#60609a 100%);z-index:1;}section.blogSection .wave path{fill:#60609a}section.blogSection h3{color:#fafafa}section.blogSection .blog{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:10px;-ms-flex-pack:center;justify-content:center;margin-top:0;max-width:1024px;width:100%;}@media (min-width:600px){section.blogSection .blog{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}section.blogSection .blog li{-ms-flex-align:center;align-items:center;box-shadow:0 2px 2px rgba(0,0,0,0.25);border-radius:5px 2px 5px 2px;display:-ms-flexbox;display:flex;margin:0;max-width:100%;overflow:hidden;position:relative;width:100%;}@media (min-width:600px){section.blogSection .blog li{width:auto}}section.blogSection .blog li .wave{bottom:50px;box-shadow:none;left:0;right:0;margin:0 auto;transform:scaleX(5) scaleY(.5) rotate(180deg);z-index:55;}section.blogSection .blog li .wave path{fill:rgba(247,184,181,0.95);transition:fill .2s}section.blogSection .blog li:hover .wave path{fill:#f7b8b5}@media (min-width:1200px){section.blogSection .blog li .wave{bottom:50px;transform:scaleX(2.285) scaleY(.5) rotate(180deg)}}section.blogSection .blog p{color:#444;font-size:16px;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}section.blogSection .blog h3{color:#444;font-size:16px;font-weight:normal;line-height:1.5;margin:0;max-width:80%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap;}@media (min-width:1200px){section.blogSection .blog h3{font-size:18px}}section.blogSection .blog a{text-shadow:none}section.blogSection .blog img{background:none;border-radius:2px;bottom:0;left:0;margin:0 auto;max-height:180px;position:absolute;right:0;text-align:center;top:20px;z-index:0}section.blogSection .blog .blogImage{background:#d4c3e6;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.25);display:inline-block;height:240px;margin:0;max-width:100%;position:relative;transform:scale(1);transition:all .15s;width:100%;}@media (min-width:600px){section.blogSection .blog .blogImage{width:320px}}section.blogSection .blog .blogImage:hover .blogOverlay{background:#f7b8b5}section.blogSection .blog .blogOverlay{-ms-flex-align:start;align-items:flex-start;background:rgba(247,184,181,0.95);bottom:0;border-radius:0;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;padding:10px;position:absolute;transition:background .2s;width:100%;}@media (min-width:1200px){section.blogSection .blog .blogOverlay{padding:5px 20px 10px 20px}}section.blogSection .blog .blogDate{color:#fafafa}section.about{background:radial-gradient(50% 50% at 50% 50%,#f4e3b7 0%,#ffedbd 100%);z-index:0;}section.about .wave path{fill:#ffedbd}section.about p{line-height:2;text-align:center}section.about img{border-radius:200px;height:200px;width:200px;margin-bottom:20px;box-shadow:0 2px 2px rgba(0,0,0,0.25)}section.about a{color:#333;font-weight:bold} \ No newline at end of file