diff --git a/landing/footer.css b/landing/footer.css index 477bc5a9a..70b19df4d 100644 --- a/landing/footer.css +++ b/landing/footer.css @@ -1,74 +1,74 @@ footer.wrapper { background: rgba(235, 235, 235, 0.05); backdrop-filter: blur(12px); position: sticky; top: 100vh; } .contentWrapper { max-width: 1850px; margin-left: auto; margin-right: auto; display: grid; padding: 50px 0; grid-template-columns: 40px repeat(12, 1fr) 40px; column-gap: 1.5%; align-items: center; grid-template-areas: '. nav nav nav . . . sub sub sub sub sub sub .'; } @media screen and (max-width: 1099px) { .contentWrapper { grid-template-columns: 16px repeat(6, 1fr) 16px; grid-template-rows: 1fr 1fr; column-gap: 1.5%; grid-template-areas: '. sub sub sub sub sub sub . ' '. nav nav nav nav nav nav . '; } .submissionForm form { display: flex; flex-direction: column; } .submissionForm form input { margin-bottom: 24px; } } .navigation { grid-area: nav; display: flex; flex-direction: column; } .navigation a { font-size: clamp(1rem, 0.8954rem + 0.5229vw, 1.5rem); font-weight: 400; } .navigation a, .navigation svg { color: #808080; transition: 150ms; transition-property: color; } .navigation a:hover, .navigation a:hover svg { color: #ffffff; transition: 150ms; transition-property: color; } a.logo { - font-family: 'IBM Plex Sans', sans-serif; + font-family: var(--sans-serif); font-weight: 500; color: var(--logo-color); font-size: 28px; padding-bottom: 16px; } .submissionForm { grid-area: sub; } diff --git a/landing/global.css b/landing/global.css index 1ac21db74..e5797125d 100644 --- a/landing/global.css +++ b/landing/global.css @@ -1,61 +1,62 @@ :root { --purple: #7e57c2; --white: #fff; --white1: #ebedee; --grey: #808080; --btn-bg: var(--purple); --unselected: var(--grey); --btn-color: var(--white1); --logo-color: var(--white); --sub-heading-color: var(--purple); + --sans-serif: 'IBM Plex Sans', sans-serif; } /* ===== GENERAL PAGE STYLES ===== */ html { background: radial-gradient(ellipse at bottom, #1f252e, #111827) fixed; - font-family: 'IBM Plex Sans', sans-serif; + font-family: var(--sans-serif); -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: white; word-break: break-word; } /* Override browser default to achieve edge-to-edge footer translucency effect */ body { background-image: radial-gradient( circle at top left, #2d008888 0%, #ffffff00 50% ); margin: 0; padding: 0; } html, body, :global(div#react-root) { height: 100%; } p { font-size: clamp(0.75rem, 0.5408rem + 1.0458vw, 1.75rem); } a { transition: 0.2s; text-decoration: none; } @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { img { image-rendering: -webkit-optimize-contrast !important; } } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { img { image-rendering: unset !important; } } } diff --git a/landing/header.css b/landing/header.css index 3fb6a8f65..c05296d4a 100644 --- a/landing/header.css +++ b/landing/header.css @@ -1,131 +1,131 @@ nav.wrapper { transition-property: max-width; transition: 300ms; max-width: 1850px; margin-left: auto; margin-right: auto; display: grid; padding: 16px 0; align-items: center; grid-template-columns: 40px repeat(12, 1fr) 40px; column-gap: 1.5%; grid-template-areas: '. logo logo . . . page_nav page_nav . . sIcons sIcons sIcons .'; } .logo { grid-area: logo; } .logo h1 { font-size: 28px; font-weight: 500; color: var(--logo-color); } .tab { font-size: 24px; font-weight: 500; color: #808080; - font-family: 'IBM Plex Sans', sans-serif; + font-family: var(--sans-serif); transition: 150ms; transition-property: color; } .tab:hover { color: #ffffff; } .page_nav { grid-area: page_nav; display: flex; justify-content: space-evenly; min-width: 225px; } .social_icons_container { grid-area: sIcons; display: flex; justify-self: flex-end; align-items: center; } div.twitter_icon, div.github_icon, div.webapp_icon { display: flex; justify-content: center; align-items: center; font-size: 24px; margin-inline: 4px; border-radius: 50px; width: 44px; height: 44px; transition: 300ms; } div.twitter_icon svg, div.github_icon svg, div.webapp_icon svg { transition: 300ms; } div.github_icon:hover svg { color: #151013; transition: 300ms; } div.github_icon:hover { background-color: #ffffff; transition: 300ms; } div.webapp_icon:hover { background-color: var(--btn-bg); transition: 300ms; } div.twitter_icon:hover { background-color: #1d9bf0; transition: 300ms; } @media screen and (max-width: 1099px) { nav.wrapper { grid-template-columns: 16px repeat(12, 1fr) 16px; grid-template-areas: '. logo logo logo page_nav page_nav page_nav page_nav page_nav page_nav sIcons sIcons sIcons .'; } .logo { min-width: 85px; } .page_nav { justify-content: center; gap: 12px; } .social_icon { display: block; } div.webapp_icon { display: none; } } @media screen and (max-width: 480px) { nav.wrapper { grid-template-columns: 16px repeat(6, 1fr) 16px; grid-template-rows: 1fr 1fr; column-gap: 1.5%; row-gap: 25px; grid-template-areas: '. logo logo . sIcons sIcons sIcons .' '. page_nav page_nav page_nav page_nav page_nav page_nav .'; } .page_nav { grid-area: page_nav; display: flex; justify-content: center; gap: 40px; min-width: 225px; } } diff --git a/landing/info-block.css b/landing/info-block.css index 520fc1e84..77b476b84 100644 --- a/landing/info-block.css +++ b/landing/info-block.css @@ -1,32 +1,32 @@ @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { .info_block { background: rgba(235, 235, 235, 0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .info_block { --border-radius: 8px; background: rgba(235, 235, 235, 0.05); border-radius: var(--border-radius); /* 36 / 28 = 1.28571429 */ /* 36px is the max padding size, 28px is the max font-size */ /* Padding scales down with text */ padding: 1.28571429rem; } .title { font-family: 'iA Writer Duo S', monospace; font-style: normal; text-align: left; line-height: 1.35; padding-bottom: clamp(1rem, 0.5817rem + 2.0915vw, 3rem); font-size: clamp(1.875rem, 1.6136rem + 1.3072vw, 3.125rem); } .description { line-height: 1.5; font-weight: 400; - font-family: 'IBM Plex Sans', sans-serif; + font-family: var(--sans-serif); } diff --git a/landing/read-docs-btn.css b/landing/read-docs-btn.css index b8209a204..bac5b5bd0 100644 --- a/landing/read-docs-btn.css +++ b/landing/read-docs-btn.css @@ -1,56 +1,56 @@ .buttonContainer { text-decoration: none; } .button { display: flex; justify-content: space-between; width: 100%; border: 2px solid white; color: white; background: transparent; cursor: pointer; text-align: left; border-radius: 8px; - font-family: 'IBM Plex Sans', sans-serif; + font-family: var(--sans-serif); font-size: 24px; padding: 30px; height: 160px; transition: 0.2s; } .buttonText { align-self: flex-end; } .button:hover { background-color: white; color: black; } .button img { transition: 0.8s; } .button:hover img { filter: invert(1); } .cornerIcon { align-self: flex-start; padding-left: 5px; } @media (max-width: 1099px) { .button { font-size: 18px; padding: 15px 20px; height: auto; } .buttonText { align-self: center; } .cornerIcon { align-self: center; } } diff --git a/landing/subscription-form.css b/landing/subscription-form.css index b783d5d0b..6b1a2a00d 100644 --- a/landing/subscription-form.css +++ b/landing/subscription-form.css @@ -1,105 +1,105 @@ form { display: flex; } .button { position: relative; width: auto; border: 1px solid white; border-left: none; border-radius: 0 8px 8px 0; padding-left: 20px; padding-right: 20px; cursor: pointer; - font-family: 'IBM Plex Sans', sans-serif; + font-family: var(--sans-serif); font-size: 16px; color: white; background: #7e57c2; box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5); transition: 0.2s; margin-inline: 0; } .button_success { border: 1px solid #28a747; background: #28a747; box-shadow: -12px 20px 50px #28a747; } .button_failure { border: 1px solid #dc3545; background: #dc3545; box-shadow: -12px 20px 50px #dc3545; } .button:hover { background: #8c69c9; box-shadow: -12px 20px 50px rgba(139, 107, 194, 0.5); } .button_success:hover { background: #34b855; box-shadow: -12px 20px 50px #28a747; } .button_failure:hover { background: #df3f4f; box-shadow: -12px 20px 50px #dc3545; } input.email_input { flex: 1; padding: 20px; background: rgba(11, 18, 27, 0.25); font-family: 'IBM Plex Mono', monospace; font-size: 16px; color: white; border: 1px solid white; border-right: none; border-radius: 8px 0 0 8px; outline: none; margin-inline: 0; transition: 300ms; } input.email_input:focus { box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5); transition: 300ms; } input.email_input_success { border: 1px solid #28a747; box-shadow: -12px 20px 50px #28a747; } input.email_input_failure { border: 1px solid #dc3545; box-shadow: -12px 20px 50px #dc3545; } @media (max-width: 1099px) { form { display: block; } .button { width: 100%; height: 50px; border: none; border-radius: 8px; } input.email_input { width: 100%; height: 50px; border-radius: 8px; margin-bottom: 0.5em; box-sizing: border-box; border: 1px solid white; } }