964 lines
17 KiB
CSS
964 lines
17 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
|
|
|
|
.page {
|
|
--background: hsl(210 20% 98%);
|
|
--foreground: hsl(210 50% 10%);
|
|
--card: hsl(0 0% 100%);
|
|
--card-foreground: hsl(210 50% 10%);
|
|
--primary: hsl(199 89% 28%);
|
|
--primary-foreground: hsl(0 0% 100%);
|
|
--secondary: hsl(160 60% 40%);
|
|
--muted: hsl(210 20% 95%);
|
|
--muted-foreground: hsl(210 15% 45%);
|
|
--accent: hsl(36 100% 55%);
|
|
--border: hsl(210 20% 90%);
|
|
--radius: 0.75rem;
|
|
--shadow-card: 0 4px 24px -4px hsl(199 89% 28% / 0.08);
|
|
--shadow-card-hover: 0 12px 40px -8px hsl(199 89% 28% / 0.15);
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding-inline: 2rem;
|
|
}
|
|
|
|
.navbar {
|
|
position: fixed;
|
|
inset: 0 0 auto;
|
|
z-index: 50;
|
|
background: color-mix(in srgb, var(--primary) 90%, transparent);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid color-mix(in srgb, var(--primary-foreground) 10%, transparent);
|
|
}
|
|
|
|
.navbarInner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 4rem;
|
|
}
|
|
|
|
.brand {
|
|
font-size: 1.25rem;
|
|
font-weight: 800;
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.navLinks {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.navLinks button,
|
|
.mobileMenu button,
|
|
.mobileToggle,
|
|
.headerButton,
|
|
.heroButton,
|
|
.submitButton,
|
|
.heroOutlineButton {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.navLinks button:not(.headerButton),
|
|
.mobileMenu button:not(.headerButton),
|
|
.mobileToggle {
|
|
border: 0;
|
|
background: transparent;
|
|
color: color-mix(in srgb, var(--primary-foreground) 80%, transparent);
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: color 160ms ease;
|
|
}
|
|
|
|
.navLinks button:not(.headerButton):hover,
|
|
.mobileMenu button:not(.headerButton):hover,
|
|
.mobileToggle:hover {
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.heroButton,
|
|
.headerButton,
|
|
.submitButton,
|
|
.heroOutlineButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: all 200ms ease;
|
|
}
|
|
|
|
.heroButton,
|
|
.headerButton,
|
|
.submitButton {
|
|
border: 0;
|
|
background: var(--accent);
|
|
color: var(--foreground);
|
|
font-weight: 700;
|
|
box-shadow:
|
|
0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
.heroButton:hover,
|
|
.headerButton:hover,
|
|
.submitButton:hover {
|
|
background: color-mix(in srgb, var(--accent) 90%, transparent);
|
|
box-shadow:
|
|
0 20px 25px -5px rgb(0 0 0 / 0.1),
|
|
0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
.headerButton {
|
|
height: 2.25rem;
|
|
padding-inline: 0.75rem;
|
|
border-radius: calc(var(--radius) - 0.125rem);
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.heroButton {
|
|
height: clamp(3rem, 6vh, 3.5rem);
|
|
padding-inline: clamp(1.5rem, 2.5vw, 2.5rem);
|
|
border-radius: calc(var(--radius) + 0.25rem);
|
|
font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
|
|
}
|
|
|
|
.submitButton {
|
|
width: 100%;
|
|
height: 2.875rem;
|
|
padding-inline: 2rem;
|
|
border-radius: calc(var(--radius) + 0.25rem);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.heroOutlineButton {
|
|
border: 2px solid color-mix(in srgb, var(--primary-foreground) 30%, transparent);
|
|
height: clamp(3rem, 6vh, 3.5rem);
|
|
padding-inline: clamp(1.5rem, 2.5vw, 2.5rem);
|
|
border-radius: calc(var(--radius) + 0.25rem);
|
|
background: color-mix(in srgb, var(--primary-foreground) 10%, transparent);
|
|
color: var(--primary-foreground);
|
|
font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
|
|
font-weight: 600;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.heroOutlineButton:hover {
|
|
background: color-mix(in srgb, var(--primary-foreground) 20%, transparent);
|
|
}
|
|
|
|
.mobileToggle {
|
|
display: none;
|
|
}
|
|
|
|
.mobileHeaderActions {
|
|
display: none;
|
|
}
|
|
|
|
.mobileMenu {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
min-height: 100svh;
|
|
display: flex;
|
|
align-items: stretch;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.heroMedia {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.heroImage {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.heroOverlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
color-mix(in srgb, var(--primary) 95%, transparent) 0%,
|
|
color-mix(in srgb, var(--primary) 85%, transparent) 50%,
|
|
color-mix(in srgb, var(--primary) 60%, transparent) 100%
|
|
);
|
|
}
|
|
|
|
.heroInner {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
min-height: 100svh;
|
|
padding-top: clamp(5.5rem, 9vh, 8rem);
|
|
padding-bottom: clamp(4rem, 8vh, 7rem);
|
|
}
|
|
|
|
.heroCopy {
|
|
max-width: 46rem;
|
|
display: grid;
|
|
gap: clamp(0.875rem, 1.75vh, 1.5rem);
|
|
text-align: left;
|
|
}
|
|
|
|
.heroBadge {
|
|
display: inline-block;
|
|
width: fit-content;
|
|
padding: 0.375rem 1rem;
|
|
margin-bottom: 0;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
|
color: var(--accent);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.heroTitle {
|
|
margin: 0;
|
|
color: var(--primary-foreground);
|
|
font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem);
|
|
line-height: 1.1;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.heroTitle span {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.heroDescription {
|
|
max-width: 42rem;
|
|
margin: 0;
|
|
color: color-mix(in srgb, var(--primary-foreground) 80%, transparent);
|
|
font-size: clamp(1rem, 0.92rem + 0.5vw, 1.2rem);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.heroActions {
|
|
margin-top: clamp(0.25rem, 1vh, 0.75rem);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: clamp(0.75rem, 1.2vw, 1rem);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.scrollIndicator {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: clamp(1rem, 3vh, 2rem);
|
|
z-index: 1;
|
|
color: color-mix(in srgb, var(--primary-foreground) 50%, transparent);
|
|
transform: translateX(-50%);
|
|
animation: pilot-bounce 2s infinite;
|
|
}
|
|
|
|
@keyframes pilot-bounce {
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
|
50% { transform: translateX(-50%) translateY(10px); }
|
|
}
|
|
|
|
.section {
|
|
padding: 5rem 0 7rem;
|
|
}
|
|
|
|
.sectionMuted {
|
|
background: color-mix(in srgb, var(--muted) 50%, transparent);
|
|
}
|
|
|
|
.sectionFaq {
|
|
background: var(--muted);
|
|
}
|
|
|
|
.sectionHeader {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.sectionHeaderCentered {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.sectionHeaderCentered .sectionEyebrow,
|
|
.sectionHeaderCentered h2,
|
|
.sectionHeaderCentered p {
|
|
text-align: center;
|
|
}
|
|
|
|
.sectionHeaderCentered p {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.sectionEyebrow,
|
|
.registerEyebrow {
|
|
color: var(--secondary);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.sectionHeader h2,
|
|
.registerCopy h2,
|
|
.successWrap h2 {
|
|
margin: 0.75rem 0 0;
|
|
font-size: clamp(2rem, 4vw, 2.75rem);
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.sectionHeader p,
|
|
.registerCopy p,
|
|
.successWrap p {
|
|
margin: 1rem 0 0;
|
|
max-width: 42rem;
|
|
color: var(--muted-foreground);
|
|
font-size: 1.125rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.problemGrid,
|
|
.offerGrid,
|
|
.benefitGrid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.problemGrid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.problemCard,
|
|
.offerCard,
|
|
.faqItem,
|
|
.formCard,
|
|
.successWrap {
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.problemCard {
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
transition:
|
|
box-shadow 180ms ease,
|
|
transform 180ms ease;
|
|
}
|
|
|
|
.problemCard:hover,
|
|
.offerCard:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-card-hover);
|
|
}
|
|
|
|
.problemIcon,
|
|
.offerIcon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.75rem;
|
|
background: color-mix(in srgb, var(--primary) 10%, white);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.problemIcon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.problemCard h3,
|
|
.offerCard h3,
|
|
.benefitItem h3,
|
|
.formCard h3 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: var(--card-foreground);
|
|
}
|
|
|
|
.problemCard p,
|
|
.offerCard p,
|
|
.benefitItem p,
|
|
.faqAnswer p,
|
|
.formHint,
|
|
.footerCopyright {
|
|
margin: 0;
|
|
color: var(--muted-foreground);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.offerGrid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.offerCard {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
transition:
|
|
box-shadow 180ms ease,
|
|
transform 180ms ease;
|
|
}
|
|
|
|
.offerStep {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1.5rem;
|
|
color: color-mix(in srgb, var(--primary) 5%, white);
|
|
font-size: 3.75rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.offerIcon {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.offerCard p {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.offerHighlights {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.offerHighlights li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--foreground);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.offerHighlights svg {
|
|
flex: none;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.benefitGrid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.benefitItem {
|
|
text-align: center;
|
|
}
|
|
|
|
.benefitIcon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
margin-bottom: 1.25rem;
|
|
border-radius: 1rem;
|
|
background: color-mix(in srgb, var(--secondary) 10%, white);
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.benefitItem h3 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.faqList {
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.faqItem {
|
|
border-radius: 1rem;
|
|
padding: 0 1.5rem;
|
|
box-shadow: 0 1px 2px hsl(210 50% 10% / 0.04);
|
|
}
|
|
|
|
.faqItem summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 1.25rem 0;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
color: var(--card-foreground);
|
|
font-size: 1.0625rem;
|
|
line-height: 1.5;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.faqItem summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.faqItem[open] summary svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.faqItem summary svg {
|
|
transition: transform 160ms ease;
|
|
}
|
|
|
|
.faqAnswer {
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
|
|
.faqAnswer p + p {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.registerSection {
|
|
background: var(--primary);
|
|
}
|
|
|
|
.registerGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.registerCopy h2 {
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.registerCopy p {
|
|
color: color-mix(in srgb, var(--primary-foreground) 80%, transparent);
|
|
}
|
|
|
|
.registerEyebrow {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.registerBenefits {
|
|
display: grid;
|
|
gap: 1rem;
|
|
padding: 0;
|
|
margin: 2rem 0 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.registerBenefits li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
color: color-mix(in srgb, var(--primary-foreground) 90%, transparent);
|
|
}
|
|
|
|
.registerBenefits svg {
|
|
flex: none;
|
|
margin-top: 0.1rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.formWrap {
|
|
min-width: 0;
|
|
}
|
|
|
|
.formCard {
|
|
display: grid;
|
|
gap: 1rem;
|
|
padding: 1.75rem;
|
|
border-radius: 1rem;
|
|
box-shadow: var(--shadow-card-hover);
|
|
}
|
|
|
|
.fieldGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.875rem;
|
|
}
|
|
|
|
.formCard label {
|
|
display: grid;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.formCard label span {
|
|
color: var(--foreground);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.formCard input,
|
|
.formCard select,
|
|
.formCard textarea {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 0.75rem 0.9rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: white;
|
|
color: var(--foreground);
|
|
font: inherit;
|
|
}
|
|
|
|
.formCard input:focus,
|
|
.formCard select:focus,
|
|
.formCard textarea:focus {
|
|
outline: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.formCard textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
.heroButton:disabled,
|
|
.headerButton:disabled,
|
|
.submitButton:disabled,
|
|
.heroOutlineButton:disabled {
|
|
opacity: 0.75;
|
|
cursor: progress;
|
|
}
|
|
|
|
.formHint {
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.errorMessage {
|
|
margin: 0;
|
|
padding: 0.85rem 1rem;
|
|
border-radius: var(--radius);
|
|
background: hsl(0 84% 60% / 0.1);
|
|
color: hsl(0 72% 42%);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.successWrap {
|
|
max-width: 32rem;
|
|
margin: 0 auto;
|
|
padding: 3rem 2rem;
|
|
border: 0;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
text-align: center;
|
|
}
|
|
|
|
.successWrap h2 {
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.successWrap p {
|
|
color: color-mix(in srgb, var(--primary-foreground) 80%, transparent);
|
|
}
|
|
|
|
.successIcon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
margin-bottom: 1.5rem;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--secondary) 20%, transparent);
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.footer {
|
|
background: var(--foreground);
|
|
padding: 2.25rem 0;
|
|
}
|
|
|
|
.footerCenter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.footerLogoList {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.35rem 2.75rem;
|
|
width: 100%;
|
|
padding: 0.9rem 1.25rem;
|
|
border: 1px solid color-mix(in srgb, var(--background) 16%, transparent);
|
|
border-radius: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.footerLogoPair {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.7rem 1rem;
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.footerLogoItem {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.footerLogoImage {
|
|
display: block;
|
|
object-fit: contain;
|
|
width: auto;
|
|
max-width: none;
|
|
height: clamp(2.2rem, 3.6vw, 3.1rem);
|
|
}
|
|
|
|
.footerLinks {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.footerLinks a {
|
|
color: color-mix(in srgb, var(--background) 78%, transparent);
|
|
font-size: 0.875rem;
|
|
text-decoration: none;
|
|
transition: color 180ms ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footerLinks a:hover,
|
|
.footerLinks a:focus-visible {
|
|
color: var(--background);
|
|
}
|
|
|
|
.footerMetaText {
|
|
margin: 0;
|
|
text-align: center;
|
|
color: color-mix(in srgb, var(--background) 60%, transparent);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footerCopyright {
|
|
margin: 0;
|
|
text-align: center;
|
|
color: color-mix(in srgb, var(--background) 40%, transparent);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.problemGrid,
|
|
.offerGrid,
|
|
.benefitGrid,
|
|
.registerGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.benefitGrid {
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.brand {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.navLinks {
|
|
display: none;
|
|
}
|
|
|
|
.mobileHeaderActions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.mobileHeaderButton {
|
|
height: 2.25rem;
|
|
padding-inline: 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.mobileToggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: calc(var(--radius) - 0.125rem);
|
|
}
|
|
|
|
.mobileMenu {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
padding: 0 0 1rem;
|
|
}
|
|
|
|
.mobileMenu .heroButton {
|
|
width: 100%;
|
|
}
|
|
|
|
.heroInner {
|
|
padding-top: clamp(5.5rem, 13vh, 7rem);
|
|
padding-bottom: clamp(4rem, 8vh, 5rem);
|
|
}
|
|
|
|
.heroCopy {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.heroActions,
|
|
.fieldGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.heroActions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.heroButton,
|
|
.heroOutlineButton {
|
|
width: 100%;
|
|
}
|
|
|
|
.section {
|
|
padding: 4.5rem 0 5rem;
|
|
}
|
|
|
|
.footerLogoList {
|
|
gap: 0.55rem;
|
|
padding: 0.65rem 0.75rem;
|
|
}
|
|
|
|
.footerLogoPair {
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.footerLogoImage {
|
|
height: clamp(0.8rem, 4vw, 1.55rem);
|
|
}
|
|
|
|
.footerMetaText {
|
|
font-size: clamp(0.58rem, 2.4vw, 0.82rem);
|
|
}
|
|
|
|
.footerLinks {
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.footerLinks a {
|
|
font-size: clamp(0.42rem, 1.9vw, 0.66rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.brand {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.mobileHeaderButton {
|
|
padding-inline: 0.625rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 860px) {
|
|
.heroInner {
|
|
padding-top: 5rem;
|
|
padding-bottom: 3.75rem;
|
|
}
|
|
|
|
.heroCopy {
|
|
gap: 0.875rem;
|
|
}
|
|
|
|
.heroTitle {
|
|
font-size: clamp(1.9rem, 1.35rem + 2vw, 3rem);
|
|
}
|
|
|
|
.heroDescription {
|
|
font-size: clamp(0.975rem, 0.9rem + 0.35vw, 1.0625rem);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.heroButton,
|
|
.heroOutlineButton {
|
|
height: 3rem;
|
|
padding-inline: 1.5rem;
|
|
}
|
|
|
|
.scrollIndicator {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 720px) {
|
|
.heroInner {
|
|
padding-top: 4.5rem;
|
|
padding-bottom: 3rem;
|
|
}
|
|
|
|
.heroBadge {
|
|
padding: 0.3rem 0.875rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.heroCopy {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.heroTitle {
|
|
font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
|
|
}
|
|
|
|
.heroDescription {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.heroActions {
|
|
gap: 0.625rem;
|
|
}
|
|
|
|
.heroButton,
|
|
.heroOutlineButton {
|
|
height: 2.875rem;
|
|
font-size: 0.9375rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.heroCopy {
|
|
max-width: 48rem;
|
|
}
|
|
}
|