155 lines
3.1 KiB
CSS
155 lines
3.1 KiB
CSS
@import "tailwindcss";
|
|
@font-face {
|
|
font-family: "Switzer Variable";
|
|
src: url("/font/Switzer-Variable.ttf") format("truetype");
|
|
font-weight: 100 900; /* Full variable range */
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Mium Regular";
|
|
src: url("/font/miumAccess-Regular.ttf") format("truetype");
|
|
font-weight: 300; /* Full variable range */
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Playfair Display";
|
|
src: url("/font/PlayfairDisplay-Italic-VariableFont_wght.ttf")
|
|
format("truetype");
|
|
font-weight: 300; /* Full variable range */
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@theme inline {
|
|
--font-switzer: "Switzer Variable", system-ui, sans-serif;
|
|
--font-mium-reg: "Mium Regular", system-ui, sans-serif;
|
|
--font-playfair: "Playfair Display", Georgia, serif;
|
|
|
|
/* === HEADINGS === */
|
|
--text-h-1-96: 96px;
|
|
--text-h-2-60: 60px;
|
|
--text-h-3-40: 40px;
|
|
--text-h-4-34: 34px;
|
|
--text-h-5-28: 28px;
|
|
--text-h-6-38: 38px;
|
|
--text-h-7-24: 24px;
|
|
--text-h-mobile-30: 30px;
|
|
--text-hero-mobile: 56px;
|
|
|
|
--leading-h1: 90px;
|
|
--leading-h2: 63px;
|
|
--leading-h3: 48px;
|
|
--leading-h4: 42px;
|
|
--leading-h5: 30px;
|
|
--leading-mobile: 38px;
|
|
|
|
/* === BODY TEXT === */
|
|
--text-b-1-20: 20px;
|
|
--text-b-2-17: 17px;
|
|
--text-b-3-16: 16px;
|
|
--text-b-4-14: 14px;
|
|
|
|
--leading-b1: 25px;
|
|
--leading-b2: 26px;
|
|
--leading-b3: 23px;
|
|
--leading-b4: 16px;
|
|
|
|
--color-background: #f8f8ff;
|
|
--color-light-100: #d5ffdc;
|
|
--color-light-200: #ecf9db;
|
|
--color-light-300: #d5ffdc33;
|
|
--color-brand: #274b2d;
|
|
--color-hover: #2f5a36;
|
|
--color-btn: #274b2d;
|
|
|
|
--color-border: #3a6f43;
|
|
|
|
--color-secondary: #636369;
|
|
--color-gray: #423f3f;
|
|
|
|
--breakpoint-xl: 1600px;
|
|
--breakpoint-lg: 1400px;
|
|
--breakpoint-md: 1024px;
|
|
--breakpoint-tab: 767px;
|
|
--breakpoint-sm: 320px;
|
|
}
|
|
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(calc(-100% - var(--gap)));
|
|
}
|
|
}
|
|
|
|
/* Base marquee container */
|
|
.marquee {
|
|
display: flex;
|
|
gap: var(--gap);
|
|
animation: marquee var(--duration) linear infinite;
|
|
}
|
|
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.marquee {
|
|
display: flex;
|
|
gap: var(--gap);
|
|
animation: marquee var(--duration) linear infinite;
|
|
}
|
|
|
|
/* Reverse direction support */
|
|
.marquee.reverse {
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
/* Pause on hover */
|
|
.group:hover .marquee.pause {
|
|
animation-play-state: paused;
|
|
}
|
|
/* === PAGE TRANSITION FIX === */
|
|
|
|
.overlay {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
position: fixed; /* instead of relative — ensures full viewport coverage */
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw; /* use viewport units explicitly */
|
|
height: 100vh;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.overlay__path {
|
|
fill: var(--color-brand, #274b2d);
|
|
stroke: none;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.view {
|
|
position: relative;
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.view--2 {
|
|
background: var(--color-bg-view-2, #cbb37e);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.view--open {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|