File size: 2,304 Bytes
ffc05fe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | /* ββ Chirp Global Styles βββββββββββββββββββββββββββββββββββββββββββββββββββ */
:root {
/* Palette */
--beige-50: #faf7f2;
--beige-100: #f5efe4;
--beige-200: #ede0cc;
--beige-300: #dfc9aa;
--mauve-100: #e8dde8;
--mauve-200: #d4c0d4;
--mauve-300: #b89ab8;
--mauve-400: #9a749a;
--mauve-500: #7d567d;
--mauve-600: #5e3f5e;
--sage: #7a9e7e;
--terracotta:#c4714a;
--gold: #c9a84c;
--ink: #2a1f2a;
--ink-light: #4a3a4a;
/* Typography */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'DM Sans', -apple-system, sans-serif;
/* Spacing */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
/* Shadows */
--shadow-soft: 0 4px 24px rgba(42, 31, 42, 0.08);
--shadow-card: 0 8px 40px rgba(42, 31, 42, 0.12);
--shadow-lift: 0 16px 60px rgba(42, 31, 42, 0.18);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
background-color: var(--beige-50);
color: var(--ink);
min-height: 100vh;
overflow-x: hidden;
}
/* Grain texture overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
opacity: 0.6;
}
button {
font-family: var(--font-body);
cursor: pointer;
border: none;
outline: none;
}
a {
color: inherit;
text-decoration: none;
}
/* Leaflet override */
.leaflet-container {
background: var(--beige-100) !important;
border-radius: var(--radius-md);
font-family: var(--font-body) !important;
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--beige-100); }
::-webkit-scrollbar-thumb { background: var(--mauve-300); border-radius: 3px; }
|