87 lines
2.4 KiB
CSS
87 lines
2.4 KiB
CSS
@import url('/fonts/TTHovesProAll/stylesheet.css');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
body {
|
|
font-family: 'TTHovesPro';
|
|
color: #fff;
|
|
background-color: #14161f;
|
|
}
|
|
|
|
@layer components {
|
|
.h1 {
|
|
@apply -tracking-[.02em] text-[clamp(36px,36px+(100vw-360px)/1240*76,112px)] leading-[clamp(36px,36px+(100vw-360px)/1240*50.4,86.4px)];
|
|
}
|
|
.h2 {
|
|
@apply -tracking-[.02em] text-[clamp(24px,24px+(100vw-360px)/1240*48,72px)] leading-none;
|
|
}
|
|
|
|
.h3 {
|
|
@apply text-[clamp(18px,18px+(100vw-360px)/1240*22,40px)] leading-[clamp(22px,22px+(100vw-360px)/1240*6.8,28.8px)];
|
|
}
|
|
|
|
.h4 {
|
|
@apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[clamp(17.6px,17.6px+(100vw-360px)/1240*6.4,24px)];
|
|
}
|
|
|
|
/* .accent {
|
|
@apply -tracking-[.02em] md:text-[clamp(28px,28px+(100vw-768px)/832*4,32px)] text-[clamp(20px,20px+(100vw-360px)/408*8,28px)] md:leading-[clamp(28px,28px+(100vw-768px)/832*7.2,35.2px)] leading-[clamp(20px,20px+(100vw-360px)/408*8,28px)];
|
|
} */
|
|
|
|
.l-text {
|
|
@apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[clamp(21.6px,21.6px+(100vw-360px)/1240*5.4,27px)];
|
|
}
|
|
|
|
.m-text {
|
|
@apply text-[clamp(12px,12px+(100vw-360px)/1240*4,16px)] leading-[clamp(19.6px,19.6px+(100vw-360px)/1240*2.4,22.4px)];
|
|
}
|
|
|
|
/* .l-caption {
|
|
@apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-none;
|
|
}
|
|
|
|
.m-caption {
|
|
@apply text-[clamp(10px,10px+(100vw-360px)/1240*2,12px)] leading-[clamp(12px,12px+(100vw-360px)/1240*2.4,14.4px)];
|
|
} */
|
|
|
|
.btn-text {
|
|
@apply -tracking-[.01em] text-[clamp(12px,12px+(100vw-360px)/1240*8,20px)] leading-none;
|
|
}
|
|
|
|
.link-text {
|
|
@apply text-[clamp(12px,12px+(100vw-360px)/1240*4,16px)] tracking-[.02em];
|
|
}
|
|
|
|
.descriptor {
|
|
@apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-[clamp(15.6px,15.6px+(100vw-360px)/1240*2.6,18.2px)];
|
|
}
|
|
|
|
/* .feedback-field:focus ~ .feedback-placeholder {
|
|
top: 0;
|
|
}
|
|
|
|
.feedback-field:focus ~ .feedback-placeholder-2 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.feedback-field:valid ~ .feedback-placeholder {
|
|
top: 0;
|
|
}
|
|
|
|
.feedback-field:valid ~ .feedback-placeholder-2 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.feedback-field::placeholder {
|
|
@apply lg:text-base text-sm font-semibold text-[#77787d];
|
|
} */
|
|
|
|
.text-gradient {
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
@apply bg-gradient-to-r from-[#798FFF] to-[#D375FF] bg-clip-text;
|
|
}
|
|
}
|