diff --git a/css/main.css b/css/main.css index f120ca5..8bdfdd1 100644 --- a/css/main.css +++ b/css/main.css @@ -18,7 +18,7 @@ body { body { --accent-color: #3d5afe; --secondary-color: #ffac2e; - --text-color: 20, 20, 20; + --text-color: 36, 36, 36; --foreground-color: 252, 253, 255; --background-color: 241, 243, 248; --danger-color: rgb(255, 75, 75); @@ -218,14 +218,14 @@ article > * { left: 0; right: 0; top: 0; - background-color: rgba(var(--text-color), 0.5); + background-color: rgba(var(--foreground-color), 0.5); z-index: 10; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); padding: max(1rem, 1.5vw) var(--inline-padding); } #main_header a { - color: rgba(var(--foreground-color), 0.9); + color: rgba(var(--text-color), 0.9); text-decoration: none; } #main_header ul { @@ -242,7 +242,7 @@ article > * { display: block; width: 0; height: 0.15rem; - background: rgba(var(--foreground-color), 1); + background: rgba(var(--accent-color), 1); transition: width 0.3s; margin: auto; margin-top: 0.1rem; @@ -256,36 +256,65 @@ article > * { } #above_fold { - background: linear-gradient(rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/shubham-s-web3-pXdzCRJNum0-unsplash.jpg") no-repeat center center; - background-size: cover; - color: rgba(var(--foreground-color), 1); - padding-top: 40vh; + padding-top: 5rem; } -#above_fold p { - color: rgba(var(--foreground-color), 0.9); +#above_fold #title_text { + position: relative; + overflow: hidden; + padding-bottom: 5rem; + text-align: center; + margin-bottom: 3rem; +} +#above_fold #title_text:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(45deg, rgba(255, 152, 152, 0.3137254902) 25%, transparent 25%, transparent 75%, rgba(255, 152, 152, 0.3137254902) 75%), linear-gradient(45deg, rgba(255, 152, 152, 0.3137254902) 25%, transparent 25%, transparent 75%, rgba(255, 152, 152, 0.3137254902) 75%); + background-size: 40px 40px; + background-position: 0 0, 20px 20px; + z-index: -1; +} +#above_fold #title_text:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.9725490196) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.9725490196) 75%), linear-gradient(45deg, rgba(255, 255, 255, 0.9725490196) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.9725490196) 75%); + background-size: 20px 20px; + background-position: 0 0, 10px 10px; + z-index: -1; } #above_fold h2 { - margin-bottom: 3rem; + position: relative; + margin: auto; + margin-top: 5rem; } #above_fold ol { display: block; - -moz-columns: 2 24rem; - columns: 2 24rem; - -moz-column-gap: 2rem; - column-gap: 2rem; padding-left: 0; } #above_fold ol li { page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; - margin-bottom: 3rem; - color: rgba(var(--foreground-color), 1); + margin-bottom: 5rem; + border-bottom: solid thin rgba(var(--text-color), 1); + padding-bottom: 5rem; + justify-content: center; + justify-self: center; + text-align: center; +} +#above_fold ol p { + text-align: justify; } #hero_illustration { margin: auto; - margin-top: 4rem; width: min(100%, 26rem); } @@ -332,9 +361,47 @@ section:nth-of-type(2) { background: linear-gradient(to left, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)), url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg") no-repeat center center fixed; background-size: cover; color: rgba(var(--foreground-color), 1); + justify-content: flex-end; + text-align: right; +} +#el_salvador_section h2, +#el_salvador_section h4 { + text-align: right; + justify-content: flex-end; } #el_salvador_section p { color: rgba(var(--foreground-color), 0.9); + text-align: right; +} +#el_salvador_section .milestone { + display: grid; + max-width: 42rem; + width: auto; + gap: 1rem 2rem; + grid-template-areas: "title label" "description label"; + align-items: center; + padding-right: 0; + justify-content: flex-end; +} +#el_salvador_section .milestone:not(:last-child) { + padding-bottom: 3rem; +} +#el_salvador_section .milestone__label { + align-items: flex-start; + justify-content: center; + grid-area: label; + justify-self: flex-end; +} +#el_salvador_section .milestone__label::before { + width: 0.1rem; + height: 100%; +} +#el_salvador_section .milestone__title { + grid-area: title; + margin-top: -0.1em; +} +#el_salvador_section .milestone__description { + grid-area: description; } #projectb_milestones_section { @@ -591,11 +658,40 @@ section:nth-of-type(2) { #project_team__components { display: flex; flex-wrap: wrap; - gap: 3rem 1.5rem; } #project_team__components > * { align-content: flex-start; - flex: 1 1 24rem; +} +#project_team__components .milestone { + display: grid; + max-width: 42rem; + width: auto; + gap: 1rem 2rem; + grid-template-areas: "label title" "label description"; + align-items: center; + padding-right: 0; +} +#project_team__components .milestone:not(:last-child) { + padding-bottom: 3rem; +} +#project_team__components .milestone__label { + align-items: flex-start; + justify-content: center; + grid-area: label; + background-color: rgba(var(--text-color), 1); + color: rgba(var(--foreground-color), 1); +} +#project_team__components .milestone__label::before { + width: 0.1rem; + height: 100%; + background-color: rgba(var(--text-color), 0.5); +} +#project_team__components .milestone__title { + grid-area: title; + margin-top: -0.1em; +} +#project_team__components .milestone__description { + grid-area: description; } #economic_framework { @@ -604,13 +700,13 @@ section:nth-of-type(2) { #economic_framework h2 { margin: 3rem 0 1rem 0; } -#economic_framework ul { - -moz-columns: 3 16rem; - columns: 3 16rem; +#economic_framework ul:not(.milestones) { + -moz-columns: 2 16rem; + columns: 2 16rem; -moz-column-gap: 0.5rem; column-gap: 0.5rem; } -#economic_framework ul li { +#economic_framework ul:not(.milestones) li { display: grid; gap: 0.5rem; align-items: flex-start; @@ -623,6 +719,69 @@ section:nth-of-type(2) { break-inside: avoid; margin-bottom: 0.5rem; } +#economic_framework #technologies_needed { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 3rem; +} +#economic_framework #technologies_needed li { + display: flex; + flex: 1 1 20rem; + gap: 1rem; + align-items: center; + padding: max(1rem, 2vw); + border: solid thin rgba(var(--text-color), 0.2); + border-radius: 0.5rem; + font-weight: 500; + -webkit-animation: slide-up 0.5s ease var(--delay) forwards; + animation: slide-up 0.5s ease var(--delay) forwards; + opacity: 0; + background: transparent; +} +#economic_framework #technologies_needed .icon { + height: 2.5rem; + width: 2.5rem; +} +#economic_framework .milestones { + display: grid; + justify-content: flex-start; + justify-items: flex-start; +} +#economic_framework .milestones--title-only .milestone { + grid-template-areas: "label title"; +} +#economic_framework .milestones--description-only .milestone { + grid-template-areas: "label description"; +} +#economic_framework .milestone { + display: grid; + max-width: 42rem; + width: auto; + gap: 1rem 2rem; + align-items: center; + justify-content: flex-start; + padding-right: 0; +} +#economic_framework .milestone:not(:last-child) { + padding-bottom: 3rem; +} +#economic_framework .milestone__label { + grid-area: label; + align-items: flex-start; + justify-content: center; + background-color: rgba(var(--text-color), 1); + color: rgba(var(--foreground-color), 1); +} +#economic_framework .milestone__label::before { + width: 0.1rem; + height: 100%; + background-color: rgba(var(--text-color), 0.5); +} +#economic_framework .milestone__title { + grid-area: title; + margin-top: -0.1em; +} #team_members { display: grid; diff --git a/css/main.min.css b/css/main.min.css index b8743c7..a9c2df8 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:1rem;max-width:70ch;line-height:1.6;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}ul{list-style:none}ol{padding-left:1rem}ol li{color:rgba(var(--text-color), 0.9)}ol li:not(:last-child){margin-bottom:.5rem}button,.button{display:inline-flex;cursor:pointer;border:none;outline:none;background:none;font-size:.8rem;font-weight:700;text-decoration:none;text-transform:uppercase;color:rgba(var(--text-color), 1);background-color:rgba(var(--text-color), 0.1);border-radius:3rem;letter-spacing:.05em;padding:.5rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.justify-content-center{justify-content:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.align-self-start{align-self:start}.align-self-end{align-self:end}.align-self-center{align-self:center}.flex-direction-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}.text-center{text-align:center}.reveal{display:flex;overflow:hidden}.reveal span{opacity:0;transform-origin:left bottom}article>*{padding:max(1rem,2vw) var(--inline-padding)}#main_header{display:flex;align-items:center;justify-content:space-between;position:fixed;left:0;right:0;top:0;background-color:rgba(var(--text-color), 0.5);z-index:10;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);padding:max(1rem,1.5vw) var(--inline-padding)}#main_header a{color:rgba(var(--foreground-color), 0.9);text-decoration:none}#main_header ul{list-style:none;display:flex;gap:.8rem}#main_header ul a{font-weight:500;font-size:.9rem}#main_header ul a::after{content:"";display:block;width:0;height:.15rem;background:rgba(var(--foreground-color), 1);transition:width .3s;margin:auto;margin-top:.1rem;border-radius:.5rem}#main_header ul a.active::after{width:1rem}#main_header ul .icon{display:flex}#above_fold{background:linear-gradient(rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)),url("../assets/representational/shubham-s-web3-pXdzCRJNum0-unsplash.jpg") no-repeat center center;background-size:cover;color:rgba(var(--foreground-color), 1);padding-top:40vh}#above_fold p{color:rgba(var(--foreground-color), 0.9)}#above_fold h2{margin-bottom:3rem}#above_fold ol{display:block;-moz-columns:2 24rem;columns:2 24rem;-moz-column-gap:2rem;column-gap:2rem;padding-left:0}#above_fold ol li{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:3rem;color:rgba(var(--foreground-color), 1)}#hero_illustration{margin:auto;margin-top:4rem;width:min(100%,26rem)}section{display:grid;position:relative;align-content:center;padding-top:3rem;padding-bottom:6rem;min-height:40vmax}section:nth-of-type(2){overflow:hidden}.section-header{display:flex;flex-direction:column;text-align:center;margin-bottom:3rem}.section-header::after{content:"•••";line-height:.5}#payment_section{min-height:80vh}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#el_salvador_section{position:relative;overflow:hidden;min-height:60vmax;background:linear-gradient(to left, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)),url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg") no-repeat center center fixed;background-size:cover;color:rgba(var(--foreground-color), 1)}#el_salvador_section p{color:rgba(var(--foreground-color), 0.9)}#projectb_milestones_section{background:linear-gradient(to left, rgba(0, 0, 0, 0.8156862745), rgba(0, 0, 0, 0.8156862745)),url("../assets/representational/nik-z1d-LP8sjuI-unsplash.jpg") no-repeat top 20% center fixed;background-size:cover;color:rgba(var(--foreground-color), 1);padding-bottom:3rem}#projectb_milestones_section p{color:rgba(var(--foreground-color), 0.9)}#projectb_milestones_section .carousel-control{border:solid thin rgba(var(--foreground-color), 0.5);background:rgba(var(--foreground-color), 1)}#projectb_milestones_section .milestone{isolation:isolate}#projectb_milestones_section .milestone__label::before{background-color:rgba(var(--foreground-color), 1)}.carousel{display:flex;overflow-x:auto;border-radius:.5rem;margin-top:1.5rem;scroll-snap-type:x mandatory;scroll-padding:0 calc(1*var(--inline-padding));margin:3rem calc(-1*var(--inline-padding));padding:1rem calc(1*var(--inline-padding));scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}.milestone{position:relative;display:flex;flex-direction:column;gap:1rem;width:min(100% - 1rem,28rem);flex-shrink:0;scroll-snap-align:start;padding-right:3rem;isolation:isolate}.milestone:last-of-type{padding-right:0}.milestone:last-of-type .milestone__label::before{display:none}.milestone__label{display:flex;align-items:center;background-color:rgba(var(--foreground-color), 1);color:rgba(var(--text-color), 1);padding:.4rem .5rem;align-self:flex-start;border-radius:.3rem;font-size:.9rem;font-weight:500}.milestone__label::before{position:absolute;content:"";display:block;width:100%;height:.1rem;background-color:rgba(var(--foreground-color), 0.5);z-index:-1}.milestone__title{margin-top:1rem}.carousel-control{display:flex;border:none;background:none;padding:.7rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:50%;cursor:pointer}.carousel:has(.project){padding-bottom:3rem}#projects_section h2{margin-bottom:3rem}.project{display:grid;width:100%;border-radius:.8rem;border:solid thin rgba(var(--text-color), 0.1);background-color:rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1rem rgba(var(--text-color), 0.1)}.project__images{display:flex;gap:1rem;flex-direction:column;flex:1;overflow-x:hidden;padding:1rem}.project__image{display:flex;flex:1;aspect-ratio:4/3;min-width:12rem;height:30vmax}.project__image img{min-height:30vmax;width:100%;-o-object-fit:cover;object-fit:cover;border-radius:.5rem}.project__images-wrapper{display:flex;overflow-x:auto;gap:.5rem}.project .thumbnail-button{width:5rem;aspect-ratio:4/3;border-radius:.5rem;overflow:hidden;cursor:pointer;border:none;flex-shrink:0;transition:transform .2s}.project .thumbnail-button.active{transform:scale(0.9)}.project .thumbnail{-o-object-fit:cover;object-fit:cover}.project__content{padding:max(1rem,2vw);text-align:left;display:flex;flex-direction:column;gap:1rem;flex:1}.project__button{font-size:.8rem;font-weight:700;text-decoration:none;text-transform:uppercase;color:rgba(var(--text-color), 1);background-color:rgba(var(--text-color), 0.1);padding:.5rem 1rem;border-radius:1rem;letter-spacing:.05em;align-self:flex-end;border:none;cursor:pointer}.project .project__hidden-details{grid-column:1/-1;padding:1rem;border-top:solid thin rgba(var(--text-color), 0.5);overflow:hidden}.badge{background-color:rgba(var(--text-color), 1);color:rgba(var(--foreground-color), 1);padding:.4rem .5rem;align-self:flex-start;border-radius:.3rem;font-size:.9rem;font-weight:500}#poc_stats{list-style:none;display:flex;gap:1rem;margin:1rem 0;padding:1rem;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.2rem,1.8vmax);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#methodology_section{background:linear-gradient(to left, rgba(0, 0, 0, 0.6274509804), rgba(0, 0, 0, 0.8156862745)),url("../assets/representational/irfan-simsar-wxWulfjN-G0-unsplash.jpg") no-repeat center center;background-size:cover;color:rgba(var(--foreground-color), 1)}#methodology_section p{color:rgba(var(--foreground-color), 0.9)}#methodology_wrapper{display:flex;flex-direction:column;margin-top:3rem}#methodology_wrapper .milestone{display:grid;max-width:42rem;width:auto;gap:1rem 2rem;grid-template-areas:"label title" "label description";align-items:center;padding-right:0}#methodology_wrapper .milestone:not(:last-child){padding-bottom:3rem}#methodology_wrapper .milestone__label{align-items:flex-start;justify-content:center;grid-area:label}#methodology_wrapper .milestone__label::before{width:.1rem;height:100%}#methodology_wrapper .milestone__title{grid-area:title;margin-top:-0.1em}#methodology_wrapper .milestone__description{grid-area:description}#project_team__components{display:flex;flex-wrap:wrap;gap:3rem 1.5rem}#project_team__components>*{align-content:flex-start;flex:1 1 24rem}#economic_framework{padding-top:6rem}#economic_framework h2{margin:3rem 0 1rem 0}#economic_framework ul{-moz-columns:3 16rem;columns:3 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#economic_framework ul li{display:grid;gap:.5rem;align-items:flex-start;align-content:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,2vw);page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:.5rem}#team_members{display:grid;gap:1rem;margin-top:3rem}.team-member{display:grid;grid-template-columns:min(10rem,50vw) 1fr;background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;overflow:hidden;cursor:pointer}.team-member img{-o-object-fit:cover;object-fit:cover;aspect-ratio:3/3.5;width:100%}.team-member .flex{padding:1rem;align-items:flex-start;gap:.5rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}.team-member__button{margin-top:auto;padding:.5rem 1rem}#partners{display:grid;grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));gap:1rem;margin-top:3rem}#partners a,#partners li:not(li:has(a)){display:flex;gap:.8rem;padding:1rem;text-decoration:none;width:100%;align-items:center;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem}#partners a .icon,#partners li:not(li:has(a)) .icon{width:2rem;height:2rem}#partners img{height:2rem}#partners span{font-weight:500;color:rgba(var(--text-color), 0.9);width:100%}#media_coverage_section .masonry{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem}#media_coverage_section .masonry iframe{display:flex;flex:1 1 15rem;border-radius:.5rem;max-width:max(100vw - 2.5rem)}#socials_section{background:linear-gradient(to left, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.5019607843)),url("../assets/representational/nasa-Q1p7bh3SHj8-unsplash.jpg") no-repeat center center fixed;background-size:cover;color:rgba(var(--foreground-color), 1)}#socials_section p{color:rgba(var(--foreground-color), 0.9)}#social_links{display:flex;flex-wrap:wrap;gap:.5rem;justify-items:center;width:100%;margin-top:3rem;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}#social_links li{width:100%;justify-content:center;box-shadow:0 0 0 0 rgba(var(--text-color), 1);transition:box-shadow .1s ease;flex:1 1 8rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1)}#social_links li:hover{box-shadow:0 0 0 .1rem rgba(var(--foreground-color), 1)}#social_links a{display:flex;width:100%;gap:.5rem;text-decoration:none;color:rgba(var(--text-color), 0.9);padding:1rem;justify-content:center;border-radius:inherit;background-color:rgba(var(--text-color), 0.06);font-weight:500}#services_section ul{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem}#services_section li{display:flex;flex:1 1 20rem;gap:1rem;align-items:center;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;font-weight:500;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0}#services_section .icon{height:2.5rem;width:2.5rem}@-webkit-keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@container news-item (max-width: 400px){.news-item{grid-template-areas:none;grid-template-columns:1fr}.news-item__icon{grid-area:unset}}#person_bio{margin:auto;border:none;border-radius:.5rem;padding:max(1rem,2vw);box-shadow:0 1rem 2rem rgba(var(--text-color), 0.1);-webkit-animation:popup .3s forwards;animation:popup .3s forwards;width:min(100%,48rem)}#person_bio button{padding:.5rem;background-color:rgba(var(--text-color), 0.2);border-radius:5rem;margin-bottom:1.5rem;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}#person_bio_wrapper{display:grid;gap:.5rem 1.5rem;grid-template-columns:min(16rem,100%) 1fr;grid-template-areas:"image name" "image title" "image bio";grid-template-rows:auto auto 1fr}#person__image{grid-area:image;width:100%;height:auto;border-radius:.5rem;-o-object-fit:cover;object-fit:cover;aspect-ratio:3/4}#person__name{grid-area:name;font-size:1.5rem;font-weight:500}#person__title{grid-area:title;font-size:1rem;font-weight:500}#person__bio{grid-area:bio;font-size:1rem;font-weight:400;color:rgba(var(--text-color), 0.8);line-height:1.5;margin-top:1rem}@-webkit-keyframes popup{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes popup{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@media screen and (max-width: 768px){#poc_images .poc-wrapper:nth-of-type(5){grid-area:3/2/4/3}#person_bio_wrapper{grid-template-columns:1fr;grid-template-areas:"image" "name" "title" "bio"}#person__image{aspect-ratio:1/1;margin-bottom:1.5rem}.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}.project{grid-template-columns:1fr 1fr}#team_members{grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.hide-on-large{display:none !important}}@media screen and (any-hover: none){.carousel-controls{display:none}}@media screen and (any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}#main_header ul a:hover::after{width:1rem}.team-member{transition:box-shadow .2s ease;box-shadow:0 0 0 0 rgba(var(--text-color), 1)}.team-member:hover{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1)}}.hidden{display:none} \ No newline at end of file +*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 36, 36, 36;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--inline-padding: max(1rem, 6vw);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:1rem;max-width:70ch;line-height:1.6;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}ul{list-style:none}ol{padding-left:1rem}ol li{color:rgba(var(--text-color), 0.9)}ol li:not(:last-child){margin-bottom:.5rem}button,.button{display:inline-flex;cursor:pointer;border:none;outline:none;background:none;font-size:.8rem;font-weight:700;text-decoration:none;text-transform:uppercase;color:rgba(var(--text-color), 1);background-color:rgba(var(--text-color), 0.1);border-radius:3rem;letter-spacing:.05em;padding:.5rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.justify-content-center{justify-content:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.align-self-start{align-self:start}.align-self-end{align-self:end}.align-self-center{align-self:center}.flex-direction-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}.text-center{text-align:center}.reveal{display:flex;overflow:hidden}.reveal span{opacity:0;transform-origin:left bottom}article>*{padding:max(1rem,2vw) var(--inline-padding)}#main_header{display:flex;align-items:center;justify-content:space-between;position:fixed;left:0;right:0;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:10;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);padding:max(1rem,1.5vw) var(--inline-padding)}#main_header a{color:rgba(var(--text-color), 0.9);text-decoration:none}#main_header ul{list-style:none;display:flex;gap:.8rem}#main_header ul a{font-weight:500;font-size:.9rem}#main_header ul a::after{content:"";display:block;width:0;height:.15rem;background:rgba(var(--accent-color), 1);transition:width .3s;margin:auto;margin-top:.1rem;border-radius:.5rem}#main_header ul a.active::after{width:1rem}#main_header ul .icon{display:flex}#above_fold{padding-top:5rem}#above_fold #title_text{position:relative;overflow:hidden;padding-bottom:5rem;text-align:center;margin-bottom:3rem}#above_fold #title_text:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(45deg, rgba(255, 152, 152, 0.3137254902) 25%, transparent 25%, transparent 75%, rgba(255, 152, 152, 0.3137254902) 75%),linear-gradient(45deg, rgba(255, 152, 152, 0.3137254902) 25%, transparent 25%, transparent 75%, rgba(255, 152, 152, 0.3137254902) 75%);background-size:40px 40px;background-position:0 0,20px 20px;z-index:-1}#above_fold #title_text:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.9725490196) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.9725490196) 75%),linear-gradient(45deg, rgba(255, 255, 255, 0.9725490196) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.9725490196) 75%);background-size:20px 20px;background-position:0 0,10px 10px;z-index:-1}#above_fold h2{position:relative;margin:auto;margin-top:5rem}#above_fold ol{display:block;padding-left:0}#above_fold ol li{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:5rem;border-bottom:solid thin rgba(var(--text-color), 1);padding-bottom:5rem;justify-content:center;justify-self:center;text-align:center}#above_fold ol p{text-align:justify}#hero_illustration{margin:auto;width:min(100%,26rem)}section{display:grid;position:relative;align-content:center;padding-top:3rem;padding-bottom:6rem;min-height:40vmax}section:nth-of-type(2){overflow:hidden}.section-header{display:flex;flex-direction:column;text-align:center;margin-bottom:3rem}.section-header::after{content:"•••";line-height:.5}#payment_section{min-height:80vh}#bitcoin_lineart{position:absolute;opacity:.2;height:80vh;width:auto;align-self:center;right:0}#el_salvador_section{position:relative;overflow:hidden;min-height:60vmax;background:linear-gradient(to left, rgba(0, 0, 0, 0.5019607843), rgba(0, 0, 0, 0.8156862745)),url("../assets/representational/esau-gonzalez-bQefbdSC4ko-unsplash.jpg") no-repeat center center fixed;background-size:cover;color:rgba(var(--foreground-color), 1);justify-content:flex-end;text-align:right}#el_salvador_section h2,#el_salvador_section h4{text-align:right;justify-content:flex-end}#el_salvador_section p{color:rgba(var(--foreground-color), 0.9);text-align:right}#el_salvador_section .milestone{display:grid;max-width:42rem;width:auto;gap:1rem 2rem;grid-template-areas:"title label" "description label";align-items:center;padding-right:0;justify-content:flex-end}#el_salvador_section .milestone:not(:last-child){padding-bottom:3rem}#el_salvador_section .milestone__label{align-items:flex-start;justify-content:center;grid-area:label;justify-self:flex-end}#el_salvador_section .milestone__label::before{width:.1rem;height:100%}#el_salvador_section .milestone__title{grid-area:title;margin-top:-0.1em}#el_salvador_section .milestone__description{grid-area:description}#projectb_milestones_section{background:linear-gradient(to left, rgba(0, 0, 0, 0.8156862745), rgba(0, 0, 0, 0.8156862745)),url("../assets/representational/nik-z1d-LP8sjuI-unsplash.jpg") no-repeat top 20% center fixed;background-size:cover;color:rgba(var(--foreground-color), 1);padding-bottom:3rem}#projectb_milestones_section p{color:rgba(var(--foreground-color), 0.9)}#projectb_milestones_section .carousel-control{border:solid thin rgba(var(--foreground-color), 0.5);background:rgba(var(--foreground-color), 1)}#projectb_milestones_section .milestone{isolation:isolate}#projectb_milestones_section .milestone__label::before{background-color:rgba(var(--foreground-color), 1)}.carousel{display:flex;overflow-x:auto;border-radius:.5rem;margin-top:1.5rem;scroll-snap-type:x mandatory;scroll-padding:0 calc(1*var(--inline-padding));margin:3rem calc(-1*var(--inline-padding));padding:1rem calc(1*var(--inline-padding));scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}.milestone{position:relative;display:flex;flex-direction:column;gap:1rem;width:min(100% - 1rem,28rem);flex-shrink:0;scroll-snap-align:start;padding-right:3rem;isolation:isolate}.milestone:last-of-type{padding-right:0}.milestone:last-of-type .milestone__label::before{display:none}.milestone__label{display:flex;align-items:center;background-color:rgba(var(--foreground-color), 1);color:rgba(var(--text-color), 1);padding:.4rem .5rem;align-self:flex-start;border-radius:.3rem;font-size:.9rem;font-weight:500}.milestone__label::before{position:absolute;content:"";display:block;width:100%;height:.1rem;background-color:rgba(var(--foreground-color), 0.5);z-index:-1}.milestone__title{margin-top:1rem}.carousel-control{display:flex;border:none;background:none;padding:.7rem;border:solid thin rgba(var(--text-color), 0.5);border-radius:50%;cursor:pointer}.carousel:has(.project){padding-bottom:3rem}#projects_section h2{margin-bottom:3rem}.project{display:grid;width:100%;border-radius:.8rem;border:solid thin rgba(var(--text-color), 0.1);background-color:rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1rem rgba(var(--text-color), 0.1)}.project__images{display:flex;gap:1rem;flex-direction:column;flex:1;overflow-x:hidden;padding:1rem}.project__image{display:flex;flex:1;aspect-ratio:4/3;min-width:12rem;height:30vmax}.project__image img{min-height:30vmax;width:100%;-o-object-fit:cover;object-fit:cover;border-radius:.5rem}.project__images-wrapper{display:flex;overflow-x:auto;gap:.5rem}.project .thumbnail-button{width:5rem;aspect-ratio:4/3;border-radius:.5rem;overflow:hidden;cursor:pointer;border:none;flex-shrink:0;transition:transform .2s}.project .thumbnail-button.active{transform:scale(0.9)}.project .thumbnail{-o-object-fit:cover;object-fit:cover}.project__content{padding:max(1rem,2vw);text-align:left;display:flex;flex-direction:column;gap:1rem;flex:1}.project__button{font-size:.8rem;font-weight:700;text-decoration:none;text-transform:uppercase;color:rgba(var(--text-color), 1);background-color:rgba(var(--text-color), 0.1);padding:.5rem 1rem;border-radius:1rem;letter-spacing:.05em;align-self:flex-end;border:none;cursor:pointer}.project .project__hidden-details{grid-column:1/-1;padding:1rem;border-top:solid thin rgba(var(--text-color), 0.5);overflow:hidden}.badge{background-color:rgba(var(--text-color), 1);color:rgba(var(--foreground-color), 1);padding:.4rem .5rem;align-self:flex-start;border-radius:.3rem;font-size:.9rem;font-weight:500}#poc_stats{list-style:none;display:flex;gap:1rem;margin:1rem 0;padding:1rem;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:max(1.2rem,1.8vmax);font-weight:700}#poc_stats .stat__title{font-size:.9rem}#methodology_section{background:linear-gradient(to left, rgba(0, 0, 0, 0.6274509804), rgba(0, 0, 0, 0.8156862745)),url("../assets/representational/irfan-simsar-wxWulfjN-G0-unsplash.jpg") no-repeat center center;background-size:cover;color:rgba(var(--foreground-color), 1)}#methodology_section p{color:rgba(var(--foreground-color), 0.9)}#methodology_wrapper{display:flex;flex-direction:column;margin-top:3rem}#methodology_wrapper .milestone{display:grid;max-width:42rem;width:auto;gap:1rem 2rem;grid-template-areas:"label title" "label description";align-items:center;padding-right:0}#methodology_wrapper .milestone:not(:last-child){padding-bottom:3rem}#methodology_wrapper .milestone__label{align-items:flex-start;justify-content:center;grid-area:label}#methodology_wrapper .milestone__label::before{width:.1rem;height:100%}#methodology_wrapper .milestone__title{grid-area:title;margin-top:-0.1em}#methodology_wrapper .milestone__description{grid-area:description}#project_team__components{display:flex;flex-wrap:wrap}#project_team__components>*{align-content:flex-start}#project_team__components .milestone{display:grid;max-width:42rem;width:auto;gap:1rem 2rem;grid-template-areas:"label title" "label description";align-items:center;padding-right:0}#project_team__components .milestone:not(:last-child){padding-bottom:3rem}#project_team__components .milestone__label{align-items:flex-start;justify-content:center;grid-area:label;background-color:rgba(var(--text-color), 1);color:rgba(var(--foreground-color), 1)}#project_team__components .milestone__label::before{width:.1rem;height:100%;background-color:rgba(var(--text-color), 0.5)}#project_team__components .milestone__title{grid-area:title;margin-top:-0.1em}#project_team__components .milestone__description{grid-area:description}#economic_framework{padding-top:6rem}#economic_framework h2{margin:3rem 0 1rem 0}#economic_framework ul:not(.milestones){-moz-columns:2 16rem;columns:2 16rem;-moz-column-gap:.5rem;column-gap:.5rem}#economic_framework ul:not(.milestones) li{display:grid;gap:.5rem;align-items:flex-start;align-content:flex-start;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem;padding:max(1rem,2vw);page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:.5rem}#economic_framework #technologies_needed{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem}#economic_framework #technologies_needed li{display:flex;flex:1 1 20rem;gap:1rem;align-items:center;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;font-weight:500;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0;background:rgba(0,0,0,0)}#economic_framework #technologies_needed .icon{height:2.5rem;width:2.5rem}#economic_framework .milestones{display:grid;justify-content:flex-start;justify-items:flex-start}#economic_framework .milestones--title-only .milestone{grid-template-areas:"label title"}#economic_framework .milestones--description-only .milestone{grid-template-areas:"label description"}#economic_framework .milestone{display:grid;max-width:42rem;width:auto;gap:1rem 2rem;align-items:center;justify-content:flex-start;padding-right:0}#economic_framework .milestone:not(:last-child){padding-bottom:3rem}#economic_framework .milestone__label{grid-area:label;align-items:flex-start;justify-content:center;background-color:rgba(var(--text-color), 1);color:rgba(var(--foreground-color), 1)}#economic_framework .milestone__label::before{width:.1rem;height:100%;background-color:rgba(var(--text-color), 0.5)}#economic_framework .milestone__title{grid-area:title;margin-top:-0.1em}#team_members{display:grid;gap:1rem;margin-top:3rem}.team-member{display:grid;grid-template-columns:min(10rem,50vw) 1fr;background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;overflow:hidden;cursor:pointer}.team-member img{-o-object-fit:cover;object-fit:cover;aspect-ratio:3/3.5;width:100%}.team-member .flex{padding:1rem;align-items:flex-start;gap:.5rem}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}.team-member__button{margin-top:auto;padding:.5rem 1rem}#partners{display:grid;grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));gap:1rem;margin-top:3rem}#partners a,#partners li:not(li:has(a)){display:flex;gap:.8rem;padding:1rem;text-decoration:none;width:100%;align-items:center;background-color:rgba(var(--text-color), 0.06);border-radius:.5rem}#partners a .icon,#partners li:not(li:has(a)) .icon{width:2rem;height:2rem}#partners img{height:2rem}#partners span{font-weight:500;color:rgba(var(--text-color), 0.9);width:100%}#media_coverage_section .masonry{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem}#media_coverage_section .masonry iframe{display:flex;flex:1 1 15rem;border-radius:.5rem;max-width:max(100vw - 2.5rem)}#socials_section{background:linear-gradient(to left, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.5019607843)),url("../assets/representational/nasa-Q1p7bh3SHj8-unsplash.jpg") no-repeat center center fixed;background-size:cover;color:rgba(var(--foreground-color), 1)}#socials_section p{color:rgba(var(--foreground-color), 0.9)}#social_links{display:flex;flex-wrap:wrap;gap:.5rem;justify-items:center;width:100%;margin-top:3rem;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}#social_links li{width:100%;justify-content:center;box-shadow:0 0 0 0 rgba(var(--text-color), 1);transition:box-shadow .1s ease;flex:1 1 8rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1)}#social_links li:hover{box-shadow:0 0 0 .1rem rgba(var(--foreground-color), 1)}#social_links a{display:flex;width:100%;gap:.5rem;text-decoration:none;color:rgba(var(--text-color), 0.9);padding:1rem;justify-content:center;border-radius:inherit;background-color:rgba(var(--text-color), 0.06);font-weight:500}#services_section ul{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem}#services_section li{display:flex;flex:1 1 20rem;gap:1rem;align-items:center;padding:max(1rem,2vw);border:solid thin rgba(var(--text-color), 0.2);border-radius:.5rem;font-weight:500;-webkit-animation:slide-up .5s ease var(--delay) forwards;animation:slide-up .5s ease var(--delay) forwards;opacity:0}#services_section .icon{height:2.5rem;width:2.5rem}@-webkit-keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@container news-item (max-width: 400px){.news-item{grid-template-areas:none;grid-template-columns:1fr}.news-item__icon{grid-area:unset}}#person_bio{margin:auto;border:none;border-radius:.5rem;padding:max(1rem,2vw);box-shadow:0 1rem 2rem rgba(var(--text-color), 0.1);-webkit-animation:popup .3s forwards;animation:popup .3s forwards;width:min(100%,48rem)}#person_bio button{padding:.5rem;background-color:rgba(var(--text-color), 0.2);border-radius:5rem;margin-bottom:1.5rem;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}#person_bio_wrapper{display:grid;gap:.5rem 1.5rem;grid-template-columns:min(16rem,100%) 1fr;grid-template-areas:"image name" "image title" "image bio";grid-template-rows:auto auto 1fr}#person__image{grid-area:image;width:100%;height:auto;border-radius:.5rem;-o-object-fit:cover;object-fit:cover;aspect-ratio:3/4}#person__name{grid-area:name;font-size:1.5rem;font-weight:500}#person__title{grid-area:title;font-size:1rem;font-weight:500}#person__bio{grid-area:bio;font-size:1rem;font-weight:400;color:rgba(var(--text-color), 0.8);line-height:1.5;margin-top:1rem}@-webkit-keyframes popup{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes popup{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@media screen and (max-width: 768px){#poc_images .poc-wrapper:nth-of-type(5){grid-area:3/2/4/3}#person_bio_wrapper{grid-template-columns:1fr;grid-template-areas:"image" "name" "title" "bio"}#person__image{aspect-ratio:1/1;margin-bottom:1.5rem}.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}#bitcoin_lineart{opacity:.6;left:calc(100% - 50vw)}.project{grid-template-columns:1fr 1fr}#team_members{grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.hide-on-large{display:none !important}}@media screen and (any-hover: none){.carousel-controls{display:none}}@media screen and (any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}#main_header ul a:hover::after{width:1rem}.team-member{transition:box-shadow .2s ease;box-shadow:0 0 0 0 rgba(var(--text-color), 1)}.team-member:hover{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1)}}.hidden{display:none} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 1f1705f..f99c7ce 100644 --- a/css/main.scss +++ b/css/main.scss @@ -16,7 +16,7 @@ body { body { --accent-color: #3d5afe; --secondary-color: #ffac2e; - --text-color: 20, 20, 20; + --text-color: 36, 36, 36; --foreground-color: 252, 253, 255; --background-color: 241, 243, 248; --danger-color: rgb(255, 75, 75); @@ -182,12 +182,12 @@ article { left: 0; right: 0; top: 0; - background-color: rgba(var(--text-color), 0.5); + background-color: rgba(var(--foreground-color), 0.5); z-index: 10; backdrop-filter: blur(1rem); padding: max(1rem, 1.5vw) var(--inline-padding); a { - color: rgba(var(--foreground-color), 0.9); + color: rgba(var(--text-color), 0.9); text-decoration: none; } ul { @@ -202,7 +202,7 @@ article { display: block; width: 0; height: 0.15rem; - background: rgba(var(--foreground-color), 1); + background: rgba(var(--accent-color), 1); transition: width 0.3s; margin: auto; margin-top: 0.1rem; @@ -220,34 +220,99 @@ article { } } #above_fold { - background: linear-gradient(#00000080, #000000d0), - url("../assets/representational/shubham-s-web3-pXdzCRJNum0-unsplash.jpg") - no-repeat center center; - background-size: cover; - color: rgba(var(--foreground-color), 1); - padding-top: 40vh; - p { - color: rgba(var(--foreground-color), 0.9); + // background: linear-gradient(#00000080, #000000d0), + // url("../assets/representational/shubham-s-web3-pXdzCRJNum0-unsplash.jpg") + // no-repeat center center; + // background-size: cover; + // color: rgba(var(--foreground-color), 1); + // p { + // color: rgba(var(--foreground-color), 0.9); + // } + padding-top: 5rem; + #title_text { + position: relative; + overflow: hidden; + padding-bottom: 5rem; + text-align: center; + margin-bottom: 3rem; + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient( + 45deg, + #ff989850 25%, + transparent 25%, + transparent 75%, + #ff989850 75% + ), + linear-gradient( + 45deg, + #ff989850 25%, + transparent 25%, + transparent 75%, + #ff989850 75% + ); + background-size: 40px 40px; + background-position: 0 0, 20px 20px; + z-index: -1; + } + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient( + 45deg, + #fffffff8 25%, + transparent 25%, + transparent 75%, + #fffffff8 75% + ), + linear-gradient( + 45deg, + #fffffff8 25%, + transparent 25%, + transparent 75%, + #fffffff8 75% + ); + background-size: 20px 20px; + background-position: 0 0, 10px 10px; + z-index: -1; + } } h2 { - margin-bottom: 3rem; + position: relative; + margin: auto; + margin-top: 5rem; + // background: linear-gradient(to left, #00000010, #00000080); } ol { display: block; - columns: 2 24rem; - column-gap: 2rem; padding-left: 0; li { page-break-inside: avoid; break-inside: avoid; - margin-bottom: 3rem; - color: rgba(var(--foreground-color), 1); + margin-bottom: 5rem; + // color: rgba(var(--foreground-color), 1); + border-bottom: solid thin rgba(var(--text-color), 1); + padding-bottom: 5rem; + justify-content: center; + justify-self: center; + text-align: center; + } + p { + text-align: justify; } } } #hero_illustration { margin: auto; - margin-top: 4rem; width: min(100%, 26rem); } section { @@ -292,8 +357,46 @@ section { no-repeat center center fixed; background-size: cover; color: rgba(var(--foreground-color), 1); + justify-content: flex-end; + text-align: right; + h2, + h4 { + text-align: right; + justify-content: flex-end; + } p { color: rgba(var(--foreground-color), 0.9); + text-align: right; + } + .milestone { + display: grid; + max-width: 42rem; + width: auto; + gap: 1rem 2rem; + grid-template-areas: "title label" "description label"; + align-items: center; + padding-right: 0; + justify-content: flex-end; + &:not(:last-child) { + padding-bottom: 3rem; + } + &__label { + align-items: flex-start; + justify-content: center; + grid-area: label; + justify-self: flex-end; + &::before { + width: 0.1rem; + height: 100%; + } + } + &__title { + grid-area: title; + margin-top: -0.1em; + } + &__description { + grid-area: description; + } } } #projectb_milestones_section { @@ -548,10 +651,39 @@ section { #project_team__components { display: flex; flex-wrap: wrap; - gap: 3rem 1.5rem; & > * { align-content: flex-start; - flex: 1 1 24rem; + } + .milestone { + display: grid; + max-width: 42rem; + width: auto; + gap: 1rem 2rem; + grid-template-areas: "label title" "label description"; + align-items: center; + padding-right: 0; + &:not(:last-child) { + padding-bottom: 3rem; + } + &__label { + align-items: flex-start; + justify-content: center; + grid-area: label; + background-color: rgba(var(--text-color), 1); + color: rgba(var(--foreground-color), 1); + &::before { + width: 0.1rem; + height: 100%; + background-color: rgba(var(--text-color), 0.5); + } + } + &__title { + grid-area: title; + margin-top: -0.1em; + } + &__description { + grid-area: description; + } } } #economic_framework { @@ -559,8 +691,8 @@ section { h2 { margin: 3rem 0 1rem 0; } - ul { - columns: 3 16rem; + ul:not(.milestones) { + columns: 2 16rem; column-gap: 0.5rem; li { display: grid; @@ -575,6 +707,72 @@ section { margin-bottom: 0.5rem; } } + #technologies_needed { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 3rem; + li { + display: flex; + flex: 1 1 20rem; + gap: 1rem; + align-items: center; + padding: max(1rem, 2vw); + border: solid thin rgba(var(--text-color), 0.2); + border-radius: 0.5rem; + font-weight: 500; + animation: slide-up 0.5s ease var(--delay) forwards; + opacity: 0; + background: transparent; + } + .icon { + height: 2.5rem; + width: 2.5rem; + } + } + .milestones { + display: grid; + justify-content: flex-start; + justify-items: flex-start; + &--title-only { + .milestone { + grid-template-areas: "label title"; + } + } + &--description-only { + .milestone { + grid-template-areas: "label description"; + } + } + } + .milestone { + display: grid; + max-width: 42rem; + width: auto; + gap: 1rem 2rem; + align-items: center; + justify-content: flex-start; + padding-right: 0; + &:not(:last-child) { + padding-bottom: 3rem; + } + &__label { + grid-area: label; + align-items: flex-start; + justify-content: center; + background-color: rgba(var(--text-color), 1); + color: rgba(var(--foreground-color), 1); + &::before { + width: 0.1rem; + height: 100%; + background-color: rgba(var(--text-color), 0.5); + } + } + &__title { + grid-area: title; + margin-top: -0.1em; + } + } } #team_members { diff --git a/index.html b/index.html index d49e01e..93772a1 100644 --- a/index.html +++ b/index.html @@ -21,21 +21,21 @@
- -
+

- Execution of tokenization projects + All about execution of tokenization projects

+

  1. What is Project B

    @@ -322,32 +322,60 @@

    Why

    El Salvador?

-
-

- El Salvador first and only country to unconditionally legalize Bitcoin, and offer constitutional - protections. -

-

- El Salvador has no taxation on capital gains on Bitcoin, as well as technology companies that - leverage the power of new technologies. -

-

- El Salvador has created Comprehensive Digital Assets regulatory system. -

-

- El Salvador can form the physical base where new digital ideas an be incubated, and then scaled - up all over the world using blockchain dynamics. -

-

- El Salvador is creating first mover advantage in Crypto space for itself as a country, and for - entrepreneurs who operate out of El Salvador. As we saw in case of Bitcoin, first mover - advantage is often a permanent advantage in Crypto space. -

-

- El Salvador is also creating a community of global Crypto enthusiasts being focal point of - Crypto infrastructure in the world. -

-
+
@@ -496,66 +524,77 @@

Project team structure

-
-
-

+
    +
  • +
    1
    +

    Create client-side steering team

    -

    - The client-side team should contain members from following teams -

    -
      -
    1. - Management -
      2. -
    2. - Finance -
      3. -
    3. - Technology -
      4. -
    -

-
-

+
+

+ The client-side team should contain members from following teams +

+
    +
  1. + Management +
    2. +
  2. + Finance +
    3. +
  3. + Technology +
    4. +
+
+ +
  • +
    2
    +

    Approval from the board or higher management

    -

    - Before tokenization can begin the higher management or the board must commit resources required - for - the tokenization project. -

    -

    - Higher management must also undertake to communicate details of the initiative to employees, - customers and other stake holders. -

    -

    - A dedicated budget for the project must be approved. -

    -

    • -
    -

    Project B team

    -

    - Project B will perform the initial economic design of the tokenization project. -

    -

    - It will setup the technology page consisting of tokens, - Smartcontracts, multisigs, markets and - private key security infrastructure. -

    -
    -
    -

    - Regulatory Team +
    +

    + Before tokenization can begin the higher management or the board must commit resources + required + for + the tokenization project. +

    +

    + Higher management must also undertake to communicate details of the initiative to employees, + customers and other stake holders. +

    +

    + A dedicated budget for the project must be approved. +

    +
    + +
  • +
    3
    +

    Project B team role

    +
    +

    + Project B will perform the initial economic design of the tokenization project. +

    +

    + It will setup the technology page consisting of tokens, + Smartcontracts, multisigs, markets and + private key security infrastructure. +

    +
    +
    • +
  • +
    4
    +

    + Regulatory team role

    -

    +

    The regulatory team will review controls related to KYC (Know Your customer), AML (Anti Money Laundering) and National Digital Assets Regulations if applicable.

    -

    • -
    + +

    Team

    @@ -621,18 +660,6 @@ href="https://twitter.com/SarwanSumer/status/1641761374505435138?ref_src=twsrc%5Etfw">March 31, 2023 - - -
    @@ -769,81 +796,216 @@