154 lines
5.0 KiB
CSS
154 lines
5.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
|
|
|
|
@theme {
|
|
--color-surface-bright: #3a3939;
|
|
--color-on-tertiary-fixed: #2e1500;
|
|
--color-surface: #141313;
|
|
--color-primary-container: #121212;
|
|
--color-surface-variant: #353434;
|
|
--color-outline-variant: #444748;
|
|
--color-on-surface-variant: #c4c7c7;
|
|
--color-surface-container-highest: #353434;
|
|
--color-surface-container: #201f1f;
|
|
--color-on-error: #690005;
|
|
--color-on-primary-fixed: #1c1b1b;
|
|
--color-tertiary-container: #200d00;
|
|
--color-inverse-on-surface: #313030;
|
|
--color-on-tertiary-container: #b16d2e;
|
|
--color-error: #ffb4ab;
|
|
--color-on-primary-container: #7e7d7d;
|
|
--color-on-background: #e5e2e1;
|
|
--color-tertiary-fixed-dim: #ffb77b;
|
|
--color-surface-container-lowest: #0e0e0e;
|
|
--color-tertiary: #ffb77b;
|
|
--color-on-primary-fixed-variant: #474646;
|
|
--color-on-surface: #e5e2e1;
|
|
--color-secondary-container: #7a322f;
|
|
--color-primary-fixed-dim: #c8c6c5;
|
|
--color-outline: #8e9192;
|
|
--color-surface-container-high: #2b2a2a;
|
|
--color-on-secondary-fixed-variant: #77302d;
|
|
--color-on-tertiary-fixed-variant: #6d3a00;
|
|
--color-primary: #c8c6c5;
|
|
--color-secondary: #ffb3ad;
|
|
--color-on-tertiary: #4d2700;
|
|
--color-error-container: #93000a;
|
|
--color-tertiary-fixed: #ffdcc2;
|
|
--color-inverse-surface: #e5e2e1;
|
|
--color-secondary-fixed: #ffdad7;
|
|
--color-on-secondary-container: #ff9e97;
|
|
--color-on-secondary-fixed: #3d0506;
|
|
--color-surface-dim: #141313;
|
|
--color-primary-fixed: #e5e2e1;
|
|
--color-on-secondary: #5a1a19;
|
|
--color-inverse-primary: #5f5e5e;
|
|
--color-surface-container-low: #1c1b1b;
|
|
--color-on-error-container: #ffdad6;
|
|
--color-secondary-fixed-dim: #ffb3ad;
|
|
--color-surface-tint: #c8c6c5;
|
|
--color-background: #141313;
|
|
--color-on-primary: #313030;
|
|
|
|
--radius-DEFAULT: 0.125rem;
|
|
--radius-lg: 0.25rem;
|
|
--radius-xl: 0.5rem;
|
|
--radius-full: 0.75rem;
|
|
|
|
--spacing-gutter: 24px;
|
|
--spacing-unit: 8px;
|
|
--spacing-section-padding: 80px;
|
|
--spacing-container-max: 1200px;
|
|
--spacing-edge-margin-mobile: 20px;
|
|
|
|
--font-headline-md: "Playfair Display", serif;
|
|
--font-body-md: "Inter", sans-serif;
|
|
--font-display-lg-mobile: "Playfair Display", serif;
|
|
--font-headline-sm: "Playfair Display", serif;
|
|
--font-display-lg: "Playfair Display", serif;
|
|
--font-body-lg: "Inter", sans-serif;
|
|
--font-label-caps: "Montserrat", sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: var(--color-background);
|
|
--foreground: var(--color-on-surface);
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-background);
|
|
color: var(--color-on-surface);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.font-headline-md { font-family: var(--font-headline-md); }
|
|
.font-body-md { font-family: var(--font-body-md); }
|
|
.font-display-lg-mobile { font-family: var(--font-display-lg-mobile); }
|
|
.font-headline-sm { font-family: var(--font-headline-sm); }
|
|
.font-display-lg { font-family: var(--font-display-lg); }
|
|
.font-body-lg { font-family: var(--font-body-lg); }
|
|
.font-label-caps { font-family: var(--font-label-caps); }
|
|
|
|
.text-headline-md { font-size: 32px; line-height: 1.3; font-weight: 600; }
|
|
.text-body-md { font-size: 16px; line-height: 1.6; font-weight: 400; }
|
|
.text-display-lg-mobile { font-size: 40px; line-height: 1.2; font-weight: 700; }
|
|
.text-headline-sm { font-size: 24px; line-height: 1.4; font-weight: 600; }
|
|
.text-display-lg { font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
|
|
.text-body-lg { font-size: 18px; line-height: 1.6; font-weight: 400; }
|
|
.text-label-caps { font-size: 12px; line-height: 1.0; letter-spacing: 0.15em; font-weight: 600; }
|
|
|
|
.chiaroscuro-gradient {
|
|
background: linear-gradient(180deg, rgba(20,19,19,0) 0%, rgba(20,19,19,0.9) 80%, rgba(20,19,19,1) 100%);
|
|
}
|
|
.copper-glow {
|
|
box-shadow: inset 0 0 15px rgba(177, 109, 46, 0.1);
|
|
}
|
|
.copper-glow:hover {
|
|
box-shadow: 0 0 20px rgba(177, 109, 46, 0.3);
|
|
}
|
|
.copper-glow:focus-within {
|
|
box-shadow: 0 0 15px rgba(177, 109, 46, 0.3);
|
|
border-color: #b16d2e;
|
|
}
|
|
.vignette-overlay {
|
|
background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
|
|
}
|
|
.vignette-overlay-linear {
|
|
background: linear-gradient(to bottom, transparent 0%, rgba(20, 19, 19, 0.8) 70%, rgba(20, 19, 19, 1) 100%);
|
|
}
|
|
.section-divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent 0%, #ffb77b 50%, transparent 100%);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.booking-card {
|
|
backdrop-filter: blur(12px);
|
|
border: 0.5px solid rgba(177, 109, 46, 0.2);
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar Styles */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: #0e0e0e; }
|
|
::-webkit-scrollbar-thumb { background: #444748; border-radius: 10px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #ffb77b; }
|
|
|
|
/* Date/Time pickers */
|
|
input[type="date"]::-webkit-calendar-picker-indicator,
|
|
input[type="time"]::-webkit-calendar-picker-indicator {
|
|
filter: invert(0.8);
|
|
cursor: pointer;
|
|
} |