From ffd46529aedb30b87578a502802ed8daa1cfb167 Mon Sep 17 00:00:00 2001 From: Kevo Date: Thu, 16 May 2024 14:15:45 -0700 Subject: [PATCH] Updates --- css/index.css | 2 +- css/sections.css | 2 +- index.html | 177 +++++---------------------------------------- privacy/index.html | 7 +- 4 files changed, 23 insertions(+), 165 deletions(-) diff --git a/css/index.css b/css/index.css index 833e83b..5a34cd7 100644 --- a/css/index.css +++ b/css/index.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 100px 0 20px;position:relative;bottom:20px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:600px;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}html{background:#d4c3e6;padding:0}html,body{color:#333;font-weight:500;height:100%;margin:0;overflow-x:hidden;position:relative;width:100%}body{font-family:'Raleway',sans-serif;opacity:0;padding:0;transition:opacity .25s;}body.loaded{opacity:1 !important}ol{padding-left:20px}ul{list-style:none;padding:0;}ul li{margin:10px 0}b,p,li{font-size:16px;line-height:1.5;}@media (min-width:600px){b,p,li{font-size:18px}}@media (min-width:1200px){b,p,li{font-size:20px;line-height:36px;max-width:800px;text-align:justify}}a{color:#333;font-weight:bold;text-decoration:none;transition:all .2s;}a:hover:not(.button){text-decoration:underline}h1,h2,h3{color:#3a303a;font-family:'Fredoka One',sans-serif;text-shadow:0 2px 1px rgba(0,0,0,0.1);}h1 i,h2 i,h3 i{display:inline-block;margin-right:10px}h3{font-size:24px;line-height:28px;text-align:center;}@media (min-width:600px){h3{font-size:28px;line-height:42px}}@media (max-width:1199px){h3{margin-top:0}}button,.button,input[type="submit"]{background:#9adefe;backface-visibility:hidden;border:0;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.25);color:#333;cursor:pointer;display:inline-block;font-size:16px;margin-top:30px;max-width:768px;transform:none;transition:all .2s;padding:15px 30px 15px 30px;text-decoration:none;transform:none;vertical-align:middle;}button:focus,.button:focus,input[type="submit"]:focus,button:hover,.button:hover,input[type="submit"]:hover{box-shadow:0 6px 6px rgba(0,0,0,0.2);transform:translate3d(-2px,-2px,0)}button:active,.button:active,input[type="submit"]:active{box-shadow:0 2px 2px rgba(0,0,0,0.3);transform:none}button[disabled],.button[disabled],input[type="submit"][disabled]{pointer-events:none}button:hover,.button:hover,input[type="submit"]:hover{background:#aee5fe}button:active,.button:active,input[type="submit"]:active{background:#86d7fe}button.green,.button.green,input[type="submit"].green{background:#bdedb6;}button.green:hover,.button.green:hover,input[type="submit"].green:hover{background:#caf1c5}button.green:active,.button.green:active,input[type="submit"].green:active{background:#aee9a5}button.purple,.button.purple,input[type="submit"].purple{background:#d4c3e6;}button.purple:hover,.button.purple:hover,input[type="submit"].purple:hover{background:#ddcfeb}button.purple:active,.button.purple:active,input[type="submit"].purple:active{background:#c9b4e0}button i,.button i,input[type="submit"] i{margin-right:5px}input[type="email"],input[type="text"]{background:#fafafa;border:0;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.25);color:#333;font-family:'Font Awesome 5 Pro','Raleway';font-size:18px;height:50px;transform:none;transition:all .2s;margin-bottom:15px;max-width:768px;text-align:center;transition:all .2s;vertical-align:middle}input[type="email"]:focus,input[type="text"]:focus,input[type="email"]:hover,input[type="text"]:hover{box-shadow:0 6px 6px rgba(0,0,0,0.2);transform:translate3d(-2px,-2px,0)}input[type="email"]:active,input[type="text"]:active{box-shadow:0 2px 2px rgba(0,0,0,0.3);transform:none}ul.bulletPoints{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-top:0;}ul.bulletPoints li{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;text-align:left;}@media (min-width:1200px){ul.bulletPoints li{margin:15px 0}}ul.bulletPoints li i{color:#333;font-size:24px;text-shadow:0 2px 1px rgba(0,0,0,0.1);margin-right:15px;min-width:30px;text-align:center;}@media (min-width:600px){ul.bulletPoints li i{margin-right:30px}}@media (min-width:1200px){ul.bulletPoints li i{font-size:34px;margin-right:40px;width:30px}}#container{height:100%;width:100%}section{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;padding-top:80px;text-align:center;width:100%;}@media (min-width:1200px){section:not(.hero){padding-bottom:20px}}.sectionInner{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;padding:0 10px;width:calc(100% - 20px);}.sectionInner h3 + p{margin-top:5px}.sectionInner > p{text-align:justify}.sectionInner img + div > p:first-child{margin-top:0;}@media (min-width:1200px){.sectionInner img + div > p:first-child{margin-top:22px}}.sectionInner .sectionInnerColumns{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.sectionInner .sectionInnerColumns img{margin-bottom:10px;max-width:320px;}@media (max-width:1199px){.sectionInner .sectionInnerColumns img{max-height:480px}}.sectionInner .sectionInnerColumns > div{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;}.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:18px;font-weight:bold;}@media (min-width:600px){.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:20px}}@media (min-width:1200px){.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:22px}}@media (min-width:1200px){.sectionInner .sectionInnerColumns{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.sectionInner .sectionInnerColumns > :first-child{margin-right:50px}.sectionInner .sectionInnerColumns.reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse;}.sectionInner .sectionInnerColumns.reverse > :first-child{margin-right:0}.sectionInner .sectionInnerColumns.reverse > :last-child{margin-right:50px}}.wave{bottom:0;position:absolute;transform:scaleX(5) translateY(35px);height:40px;}@media (min-width:768px){.wave{height:50px;transform:scaleX(10) translateY(45px)}}@media (min-width:1200px){.wave{transform:scaleX(15) translateY(45px)}}.button.ctaButton{background:#bdedb6;}.button.ctaButton:hover{background:#c4efbd}.footer{background:#f7b8b5;padding-bottom:40px;text-align:center;}.footer > div{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;padding:80px 0 30px 0;width:100%;z-index:-1;}.footer > div a{font-size:36px;cursor:pointer;color:#fafafa;margin:0 15px;text-shadow:0 2px 1px rgba(0,0,0,0.1)}.footer > div svg{fill:#fafafa;height:40px;width:40px;transition:fill .2s;}.footer > div svg:hover{fill:#9adefe}.footer .privacy{color:#333;font-size:14px;font-style:italic;margin:0 auto;padding:10px 0;width:100%} \ No newline at end of file +.header{-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:15px;}@media (min-width:600px){.header{gap:15px}}@media (min-width:1200px){.header{gap:5px}}.header .wordmark{color:#f4e3b7;font-size:38px;font-family:'Titan One';font-weight:normal;margin:0;text-shadow:0 2px 2px rgba(20,0,20,0.15);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{object-fit:contain;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:0;z-index:20;}section.hero .wave path{fill:#e2cff7}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 .heroContent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:100%;gap:15px;}@media (min-width:600px){section.hero .heroContent{gap:20px}}@media (min-width:1200px){section.hero .heroContent{bottom:20px;margin:0 100px 0 20px;position:relative;gap:30px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:600px;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;object-fit:contain;max-height:400px;max-width:100%;}@media (min-width:600px){section.hero img.hero.heroImgMobile{max-height:500px}}@media (min-width:1200px){section.hero img.hero.heroImgMobile{display:none}}section.hero .title{color:#fafafa;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);}@media (min-width:600px){section.hero .title{font-size:36px}}@media (min-width:1200px){section.hero .title{font-size:42px}}section.hero .subtitle{font-size:16px;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}}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 .additionalLinks{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;padding-top:30px;}@media (min-width:1200px){section.hero .additionalLinks{-ms-flex-direction:row;flex-direction:row;padding-top:10px}}section.hero .additionalLinks a{width:80%;}@media (min-width:1200px){section.hero .additionalLinks a{width:auto}}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;-ms-flex-pack:center;justify-content:center;gap:10px;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;height:320px;margin:0;overflow:hidden;position:relative;width:480px;max-width:100%;}section.blogSection .blog li:hover .wave path{fill:#bdedb6}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(189,237,182,0.95);transition:fill .2s}section.blogSection .blog .blogImage{background:#d4c3e6;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.25);display:inline-block;margin:0;position:relative;transform:scale(1);transition:all .15s;height:100%;width:100%;}section.blogSection .blog .blogImage:hover .blogOverlay{background:#bdedb6}section.blogSection .blog .blogImage img{object-fit:cover;width:100%;height:100%}section.blogSection .blog .blogOverlay{-ms-flex-align:start;align-items:flex-start;background:rgba(189,237,182,0.95);border-radius:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;padding:5px 10px 10px 15px;position:absolute;transition:background .2s;width:100%;}@media (min-width:600px){section.blogSection .blog .blogOverlay{padding:5px 15px 10px 20px}}section.blogSection .blog .blogOverlay p{color:#444;font-size:14px;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}section.blogSection .blog .blogOverlay h3{color:#444;font-size:18px;font-weight:normal;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap;}@media (min-width:1200px){section.blogSection .blog .blogOverlay h3{font-size:18px}}section.blogSection .blog .blogOverlay a{text-shadow:none;}section.blogSection .blog .blogOverlay a img{position:absolute;bottom:0;left:0;margin:0 auto;position:absolute;right:0;text-align:center;background:none;border-radius:2px;z-index:0}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;box-shadow:0 2px 2px rgba(0,0,0,0.25)}section.about a{color:#333;font-weight:bold}html{background:#d4c3e6;padding:0}html,body{color:#333;font-weight:500;height:100%;margin:0;overflow-x:hidden;position:relative;width:100%}body{font-family:'Raleway',sans-serif;opacity:0;padding:0;transition:opacity .25s;}body.loaded{opacity:1 !important}ol{padding-left:20px}ul{list-style:none;padding:0;}ul li{margin:10px 0}b,p,li{font-size:16px;line-height:1.5;margin:0;max-width:768px;}@media (min-width:600px){b,p,li{font-size:18px}}@media (min-width:1200px){b,p,li{font-size:20px;line-height:36px;text-align:justify}}a{color:#333;font-weight:bold;text-decoration:none;transition:all .2s;}a:hover:not(.button){text-decoration:underline}h1,h2,h3{color:#3a303a;font-family:'Fredoka One',sans-serif;font-weight:normal;margin:0;}h1 i,h2 i,h3 i{display:inline-block;margin-right:10px}h3{font-size:24px;line-height:28px;text-align:center;}@media (min-width:600px){h3{font-size:28px;line-height:42px}}@media (max-width:1199px){h3{margin-top:0}}button,.button,input[type="submit"]{background:#9adefe;backface-visibility:hidden;border:0;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.25);font-family:'Fredoka One';font-weight:400;color:#333;cursor:pointer;display:inline-block;font-size:18px;max-width:768px;transform:none;transition:all .2s;padding:15px 25px 15px 25px;text-decoration:none;transform:none;vertical-align:middle;}button:focus,.button:focus,input[type="submit"]:focus,button:hover,.button:hover,input[type="submit"]:hover{box-shadow:0 6px 6px rgba(0,0,0,0.2);transform:translate3d(-2px,-2px,0)}button:active,.button:active,input[type="submit"]:active{box-shadow:0 2px 2px rgba(0,0,0,0.3);transform:none}button[disabled],.button[disabled],input[type="submit"][disabled]{pointer-events:none}button:hover,.button:hover,input[type="submit"]:hover{background:#aee5fe}button:active,.button:active,input[type="submit"]:active{background:#86d7fe}button.green,.button.green,input[type="submit"].green{background:#bdedb6;}button.green:hover,.button.green:hover,input[type="submit"].green:hover{background:#caf1c5}button.green:active,.button.green:active,input[type="submit"].green:active{background:#aee9a5}button.purple,.button.purple,input[type="submit"].purple{background:#d4c3e6;}button.purple:hover,.button.purple:hover,input[type="submit"].purple:hover{background:#ddcfeb}button.purple:active,.button.purple:active,input[type="submit"].purple:active{background:#c9b4e0}button i,.button i,input[type="submit"] i{margin-right:5px}input[type="email"],input[type="text"]{background:#fafafa;border:0;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.25);color:#333;font-family:'Font Awesome 5 Pro','Raleway';font-size:18px;height:50px;transform:none;transition:all .2s;margin-bottom:15px;max-width:768px;text-align:center;transition:all .2s;vertical-align:middle}input[type="email"]:focus,input[type="text"]:focus,input[type="email"]:hover,input[type="text"]:hover{box-shadow:0 6px 6px rgba(0,0,0,0.2);transform:translate3d(-2px,-2px,0)}input[type="email"]:active,input[type="text"]:active{box-shadow:0 2px 2px rgba(0,0,0,0.3);transform:none}ul.bulletPoints{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;margin-top:0;}ul.bulletPoints li{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;text-align:left;}@media (min-width:1200px){ul.bulletPoints li{margin:15px 0}}ul.bulletPoints li i{color:#333;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);margin-right:15px;min-width:30px;text-align:center;}@media (min-width:600px){ul.bulletPoints li i{margin-right:30px}}@media (min-width:1200px){ul.bulletPoints li i{font-size:34px;margin-right:40px;width:30px}}#container{height:100%;width:100%}section{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;position:relative;padding-top:50px;text-align:center;width:100%;}@media (min-width:600px){section{padding-top:60px}}@media (min-width:1200px){section{padding-top:80px}section:not(.hero){padding-bottom:20px}}.sectionInner{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;padding:20px 0;width:calc(100% - 20px);}.sectionInner h3 + p{margin-top:5px}.sectionInner > p{text-align:justify}@media (min-width:600px){.sectionInner{gap:30px;padding:30px 0}}.sectionInner img + div > p:first-child{margin-top:0;}@media (min-width:1200px){.sectionInner img + div > p:first-child{margin-top:22px}}.sectionInner .sectionInnerColumns{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:20px;}@media (min-width:600px){.sectionInner .sectionInnerColumns{gap:30px}}.sectionInner .sectionInnerColumns img{margin-bottom:10px;max-width:320px;}@media (max-width:1199px){.sectionInner .sectionInnerColumns img{max-height:480px}}.sectionInner .sectionInnerColumns > div{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:20px;}@media (min-width:600px){.sectionInner .sectionInnerColumns > div{gap:30px}}.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:18px;font-weight:bold;}@media (min-width:600px){.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:20px}}@media (min-width:1200px){.sectionInner .sectionInnerColumns > div .sectionSubtitle{font-size:22px}}@media (min-width:1200px){.sectionInner .sectionInnerColumns{-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;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.sectionInner .sectionInnerColumns > :first-child{margin-right:50px}.sectionInner .sectionInnerColumns.reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse;}.sectionInner .sectionInnerColumns.reverse > :first-child{margin-right:0}.sectionInner .sectionInnerColumns.reverse > :last-child{margin-right:50px}}.wave{bottom:0;position:absolute;transform:scaleX(5) translateY(35px);height:40px;}@media (min-width:768px){.wave{height:50px;transform:scaleX(10) translateY(45px)}}@media (min-width:1200px){.wave{transform:scaleX(15) translateY(45px)}}.button.ctaButton{background:#bdedb6;}.button.ctaButton:hover{background:#c4efbd}.footer{background:#f7b8b5;padding-bottom:40px;text-align:center;}.footer > div{-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;padding:80px 0 30px 0;width:100%;z-index:-1;}.footer > div a{font-size:36px;cursor:pointer;color:#fafafa;margin:0 15px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}.footer > div svg{fill:#fafafa;height:40px;width:40px}.footer .privacy{color:#333;font-size:14px;font-style:italic;margin:0 auto;padding:10px 0;width:100%} \ No newline at end of file diff --git a/css/sections.css b/css/sections.css index 4878ea1..b577b0a 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 100px 0 20px;position:relative;bottom:20px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:600px;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 +.header{-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:15px;}@media (min-width:600px){.header{gap:15px}}@media (min-width:1200px){.header{gap:5px}}.header .wordmark{color:#f4e3b7;font-size:38px;font-family:'Titan One';font-weight:normal;margin:0;text-shadow:0 2px 2px rgba(20,0,20,0.15);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{object-fit:contain;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:0;z-index:20;}section.hero .wave path{fill:#e2cff7}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 .heroContent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:100%;gap:15px;}@media (min-width:600px){section.hero .heroContent{gap:20px}}@media (min-width:1200px){section.hero .heroContent{bottom:20px;margin:0 100px 0 20px;position:relative;gap:30px}}section.hero .button{line-height:1.5}section.hero img.hero.heroImgDesktop{display:none;height:600px;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;object-fit:contain;max-height:400px;max-width:100%;}@media (min-width:600px){section.hero img.hero.heroImgMobile{max-height:500px}}@media (min-width:1200px){section.hero img.hero.heroImgMobile{display:none}}section.hero .title{color:#fafafa;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,0.3);}@media (min-width:600px){section.hero .title{font-size:36px}}@media (min-width:1200px){section.hero .title{font-size:42px}}section.hero .subtitle{font-size:16px;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}}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 .additionalLinks{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;gap:10px;padding-top:30px;}@media (min-width:1200px){section.hero .additionalLinks{-ms-flex-direction:row;flex-direction:row;padding-top:10px}}section.hero .additionalLinks a{width:80%;}@media (min-width:1200px){section.hero .additionalLinks a{width:auto}}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;-ms-flex-pack:center;justify-content:center;gap:10px;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;height:320px;margin:0;overflow:hidden;position:relative;width:480px;max-width:100%;}section.blogSection .blog li:hover .wave path{fill:#bdedb6}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(189,237,182,0.95);transition:fill .2s}section.blogSection .blog .blogImage{background:#d4c3e6;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,0.25);display:inline-block;margin:0;position:relative;transform:scale(1);transition:all .15s;height:100%;width:100%;}section.blogSection .blog .blogImage:hover .blogOverlay{background:#bdedb6}section.blogSection .blog .blogImage img{object-fit:cover;width:100%;height:100%}section.blogSection .blog .blogOverlay{-ms-flex-align:start;align-items:flex-start;background:rgba(189,237,182,0.95);border-radius:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;padding:5px 10px 10px 15px;position:absolute;transition:background .2s;width:100%;}@media (min-width:600px){section.blogSection .blog .blogOverlay{padding:5px 15px 10px 20px}}section.blogSection .blog .blogOverlay p{color:#444;font-size:14px;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}section.blogSection .blog .blogOverlay h3{color:#444;font-size:18px;font-weight:normal;line-height:1.5;margin:0;max-width:90%;overflow:hidden;text-overflow:ellipsis;text-shadow:none;white-space:nowrap;}@media (min-width:1200px){section.blogSection .blog .blogOverlay h3{font-size:18px}}section.blogSection .blog .blogOverlay a{text-shadow:none;}section.blogSection .blog .blogOverlay a img{position:absolute;bottom:0;left:0;margin:0 auto;position:absolute;right:0;text-align:center;background:none;border-radius:2px;z-index:0}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;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 diff --git a/index.html b/index.html index 496da46..eb8cfbc 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,12 @@ - - - + + + -