This reverts commit aaac5f853f.
This commit is contained in:
Arjun Porwal
-409
@@ -1,409 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Unbounded";
|
||||
src: url("Unbounded/Unbounded-VariableFont_wght.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Manrope";
|
||||
src: url("Manrope/Manrope-VariableFont_wght.ttf");
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #000000e5;
|
||||
--secondary: #e0195d;
|
||||
--background: #e5e7eb;
|
||||
--info: #fed204;
|
||||
|
||||
font-family: "Unbounded";
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url("./assets/background_top.svg") no-repeat top/contain,
|
||||
url("./assets/background_bottom.svg") no-repeat bottom/contain;
|
||||
padding: 2rem 1rem;
|
||||
max-width: 70vw;
|
||||
background-color: var(--background);
|
||||
color: var(--primary);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
.headerWrapper {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header__launch {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--background);
|
||||
color: var(--primary);
|
||||
padding: 0.5rem 0.8rem 0.7rem 1rem;
|
||||
overflow: hidden;
|
||||
height: 68px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
border-radius: 35px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.header__launch:hover {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.header__launch__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 7rem;
|
||||
}
|
||||
|
||||
/* Hero section styles */
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 700px;
|
||||
margin-block: 12rem 10rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 50px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -2px;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 18px;
|
||||
font-family: Manrope;
|
||||
font-weight: 400;
|
||||
color: var(--primary);
|
||||
line-height: 250%;
|
||||
color: #000000B2;
|
||||
}
|
||||
|
||||
/* Info Badge */
|
||||
.badge {
|
||||
background-color: var(--info);
|
||||
border-radius: 24px;
|
||||
padding: 8px 12px;
|
||||
max-width: fit-content;
|
||||
font-family: Manrope;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Cards styles */
|
||||
.cardWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.desktop__extensions,
|
||||
.mobile__extensions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card__items {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.card__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 16px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid gainsboro;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card__item > img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card__item:hover,
|
||||
.chip__item:hover {
|
||||
.extension__cta,
|
||||
.chip__cta {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
.card__info h2,
|
||||
.chip__info h2 {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.card__item > div {
|
||||
padding: 0.6rem 1rem 1rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.extension__cta,
|
||||
.chip__cta {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-family: Unbounded;
|
||||
text-transform: uppercase;
|
||||
background: #000000;
|
||||
border-radius: 8px;
|
||||
color: var(--background);
|
||||
padding: 0.4rem 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s ease-in;
|
||||
}
|
||||
|
||||
.card__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card__info h2 {
|
||||
font-family: Unbounded;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 130%;
|
||||
letter-spacing: -0.5px;
|
||||
transition: color 0.1s ease-in;
|
||||
}
|
||||
|
||||
.card__info .extension__badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.extension__badge {
|
||||
background: #0000001a;
|
||||
border-radius: 32px;
|
||||
padding: 4px 12px;
|
||||
max-width: fit-content;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
color: #1a1a1a;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Developer tools */
|
||||
.developerTools {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
.developerTools__hero h2 {
|
||||
font-family: Unbounded;
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
line-height: 120%;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
.developerTools__hero p {
|
||||
font-family: Manrope;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0px;
|
||||
color: #000000B2;
|
||||
}
|
||||
|
||||
/* Chip Item */
|
||||
.chip__item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
border-radius: 16px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid gainsboro;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.chip__item img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.chip__info__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chip__info__wrapper p {
|
||||
font-family: Manrope;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0px;
|
||||
color: #000000b2;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.chip__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chip__info h2 {
|
||||
font-family: Unbounded;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 130%;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.chip__info p {
|
||||
font-family: Manrope;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--background);
|
||||
border-radius: 32px;
|
||||
border: 1px solid #e5e7eb;
|
||||
backdrop-filter: blur(120px);
|
||||
background: #ffffff99;
|
||||
margin-block: 6rem 1rem;
|
||||
padding: 0.7rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
font-family: Manrope;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
.footer__left > section > span:first-child {
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: 50%;
|
||||
padding-inline: 0.25rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.footer__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.footer__right a {
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
gap: 8px;
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.footer__right a:hover {
|
||||
background: #0000001a;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media screen and (max-width: 1600px) {
|
||||
body {
|
||||
padding: 2rem 1rem;
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
.header__launch {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header__launch > img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__launch:hover {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.header__launch__title {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.header__launch__title p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.card__items {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
body {
|
||||
padding: 2rem 0.5rem;
|
||||
max-width: 98vw;
|
||||
}
|
||||
|
||||
.cardWrapper {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer__left > section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user