diff --git a/assets/img/icon-download.svg b/assets/img/icon-download.svg new file mode 100644 index 0000000..abffe6d --- /dev/null +++ b/assets/img/icon-download.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/styles/buttons.css b/src/styles/buttons.css index c578ba5..08e91b6 100644 --- a/src/styles/buttons.css +++ b/src/styles/buttons.css @@ -37,13 +37,13 @@ button[disabled] { color: var(--color-primary); } -.button:hover::before { +.button:not([disabled]):hover::before { filter: invert(84%) sepia(30%) saturate(1700%) hue-rotate(87deg) brightness(100%) contrast(99%); } -.button.earth-icon::before { + +.button.with-icon::before { content: ""; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII="); background-size: 100%; width: 1.125rem; height: 1.125rem; @@ -51,9 +51,8 @@ button[disabled] { transition: all 0.5s ease-out; } -.button:hover .earth-icon { - filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%) - hue-rotate(91deg) brightness(101%) contrast(97%); +.button.earth-icon::before { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII="); } .button.play-icon::before { @@ -66,6 +65,16 @@ button[disabled] { transition: all 0.5s ease-out; } +.button.download-icon::before { + content: ""; + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2218%22%20viewBox%3D%220%200%2019%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2339_203)%22%3E%3Cpath%20d%3D%22M6.26423%208.06567H4.10986V10.0801H6.26423V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M8.41853%2012.1025V14.1169H10.5816V12.1025H12.7359V10.08H10.5816V8.06562V4.03685V0H8.41853V4.03685V8.06562V10.08H6.26416V12.1025H8.41853Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.8456%2011.9487V13.9631V15.9775H2.15437V13.9631V11.9487H0V13.9631V15.9775V18H19V15.9775V13.9631V11.9487H16.8456Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M14.8902%208.06567H12.7358V10.0801H14.8902V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2339_203%22%3E%3Crect%20width%3D%2219%22%20height%3D%2218%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); + background-size: 100%; + width: 1.125rem; + height: 1.125rem; + transform: translateX(-0.5rem); + transition: all 0.5s ease-out; +} + /* Clickable elements */ .clickable { user-select: none; diff --git a/src/views/Home.svelte b/src/views/Home.svelte index 866422f..d237d8b 100644 --- a/src/views/Home.svelte +++ b/src/views/Home.svelte @@ -78,18 +78,14 @@

{data.hero.subtitle}

-
e.key === 'Enter' && handleExplore()} - role="button" tabindex="0" > -
-

{data.hero.ctaText} -

-
+ diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte index 7b0992e..28c66d2 100644 --- a/src/views/Portfolio.svelte +++ b/src/views/Portfolio.svelte @@ -129,7 +129,7 @@ diff --git a/src/views/WhitePaper.svelte b/src/views/WhitePaper.svelte index 3f0a9fd..82557da 100644 --- a/src/views/WhitePaper.svelte +++ b/src/views/WhitePaper.svelte @@ -107,11 +107,7 @@

{t('wp_error')}

{/if} - @@ -124,11 +120,11 @@ color: var(--color-text); padding: 8rem 5rem; display: flex; - column-gap: 5rem; + justify-content: space-between; } .catch-area { - width: min(100%, 45vw); + width: 45vw; } .label { @@ -184,7 +180,7 @@ /* ── Form area: desktop — right column ── */ .form-area { margin-top: 2rem; - width: min(100%, 30vw); + width: 30vw; display: flex; align-items: flex-start; justify-content: center; @@ -311,30 +307,32 @@ /* ── Mobile ── */ @media (max-width: 700px) { .white-paper { - display: flex; - flex-direction: column; + display: block; height: 100vh; overflow: hidden; - padding: 6vh 1.25rem 0; + padding: 6rem 0; position: relative; } + .catch-area { + width: auto; + } + .label { font-size: var(--font-size-paragraph-small); text-align: center; margin-bottom: 1rem; } + .title { + font-size: var(--font-size-title-section); + } + .text { flex: 1; align-items: center; text-align: center; gap: 1rem; - overflow: hidden; - } - - .title { - font-size: clamp(2rem, 10vw, 3.5rem); } .description { diff --git a/src/views/WhitePapers.svelte b/src/views/WhitePapers.svelte index e0cbfba..4fff64e 100644 --- a/src/views/WhitePapers.svelte +++ b/src/views/WhitePapers.svelte @@ -173,7 +173,7 @@ @media (max-width: 700px) { .white-papers { - padding: 0 1.25rem; + padding: 0 2rem; } }