:root { --color-bg: #f5f3ef; --color-surface: #f6f9f2; --color-text: #26331f; --color-text-on-dark: #e9f1e3; --color-muted: #5d6b58; --color-primary: #2e5d43; --color-primary-dark: #1e4230; --color-secondary: #7a8a75; --color-secondary-light: #d8e2cf; --color-accent: #d9a441; --color-border: #c9d6c0; --font-main: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --radius: 12px; --shadow-soft: 0 2px 5px rgba(9, 22, 13, 0.22), 0 12px 30px rgba(9, 22, 13, 0.26); --shadow-lift: 0 4px 10px rgba(9, 22, 13, 0.26), 0 20px 44px rgba(9, 22, 13, 0.34); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-main); background-color: #18301f; color: var(--color-text-on-dark); line-height: 1.5; } /* Deep forest backdrop: soft light from the top, dark edges, and a pair of blurred leaf silhouettes (blur is baked into the SVGs). Fixed pseudo-layer so it stays put while the page scrolls; admin.css disables it for the cabinet, which keeps its own plain background. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='%230a1e11'%3E%3Cg opacity='.55'%3E%3Cpath d='M350 650 C 295 420 295 250 350 60 C 405 250 405 420 350 650 Z'/%3E%3C/g%3E%3Cg opacity='.4' transform='rotate(-34 350 650)'%3E%3Cpath d='M350 650 C 300 440 300 300 350 130 C 400 300 400 440 350 650 Z'/%3E%3C/g%3E%3Cg opacity='.4' transform='rotate(34 350 650)'%3E%3Cpath d='M350 650 C 300 440 300 300 350 130 C 400 300 400 440 350 650 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left -170px bottom -180px / 720px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='%230a1e11'%3E%3Cg opacity='.45' transform='rotate(155 350 350)'%3E%3Cpath d='M350 650 C 295 420 295 250 350 60 C 405 250 405 420 350 650 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right -190px top -140px / 640px auto no-repeat, radial-gradient(ellipse 130% 75% at 50% -12%, rgba(96, 168, 122, 0.5), rgba(96, 168, 122, 0) 62%), linear-gradient(176deg, #2f5f41 0%, #24492f 42%, #16301f 100%); } /* Footer sticks to the bottom of the viewport on short pages, but scrolls with content normally once content is taller than the screen. */ body > main { flex: 1 0 auto; } body > footer { flex-shrink: 0; } /* Every media slot on the site accepts an uploaded clip as readily as a photo (see the uploader in backend/routes/media.js), so