/* ── Theme tokens ──────────────────────────────────────────── All color decisions live here as CSS variables. Swap a theme by setting data-theme on . ─────────────────────────────────────────────────────────── */ /* Campfire (default) */ :root { --dv-primary: #E8621A; --dv-accent: #C0392B; --dv-bg: #FFF8F0; --dv-surface: #FFFFFF; --dv-text: #2C2C2C; --dv-muted: #777; /* non-color tokens — shared across all themes */ --dv-radius: 1rem; --dv-radius-sm: 0.5rem; --dv-shadow: 0 4px 18px rgba(0,0,0,0.10); --dv-shadow-hover: 0 8px 28px rgba(0,0,0,0.16); } /* Forest Trail */ [data-theme="forest"] { --dv-primary: #2D6A4F; --dv-accent: #F4A261; --dv-bg: #F0F7F4; --dv-surface: #FFFFFF; --dv-text: #1A3A2A; --dv-muted: #5A7A6A; } /* Night Camp */ [data-theme="night"] { --dv-primary: #1B2A4A; --dv-accent: #F5A623; --dv-bg: #F7F3EC; --dv-surface: #FFFFFF; --dv-text: #1B2A4A; --dv-muted: #666; } /* ── Base ────────────────────────────────────────────────── */ body { background-color: var(--dv-bg); color: var(--dv-text); font-family: 'Nunito', sans-serif; display: flex; flex-direction: column; min-height: 100vh; transition: background-color 0.35s ease, color 0.35s ease; } h1, h2, h3, .dv-brand { font-family: 'Fredoka One', cursive; letter-spacing: 0.01em; } /* ── Navbar ──────────────────────────────────────────────── */ .dv-navbar { background-color: var(--dv-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: background-color 0.35s ease; } .dv-brand { font-size: 1.6rem; color: #fff !important; } .dv-brand-icon { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); border-radius: 50%; width: 1.8rem; height: 1.8rem; font-size: 1rem; vertical-align: middle; margin-right: 0.1rem; } .dv-navbar .nav-link { color: rgba(255,255,255,0.85) !important; font-weight: 700; border-radius: var(--dv-radius-sm); padding: 0.35rem 0.75rem; transition: background 0.15s; } .dv-navbar .nav-link:hover, .dv-navbar .nav-link.active { background: rgba(255,255,255,0.22); color: #fff !important; } /* ── Forecast picker ─────────────────────────────────────── */ .dv-forecast { display: flex; align-items: center; gap: 0.35rem; margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.25); } .dv-forecast-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); white-space: nowrap; } .dv-forecast-btn { background: none; border: 2px solid transparent; border-radius: 50%; width: 2rem; height: 2rem; font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color 0.15s, transform 0.1s; display: flex; align-items: center; justify-content: center; } .dv-forecast-btn:hover { transform: scale(1.15); } .dv-forecast-btn.active { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.15); } /* On mobile, stack nicely inside the collapsed nav */ @media (max-width: 767px) { .dv-forecast { margin-left: 0; padding-left: 0; border-left: none; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.2); margin-top: 0.5rem; } } /* ── Hero ────────────────────────────────────────────────── */ .dv-hero { background-color: #1a1a1a; background-size: cover; background-position: top center; background-repeat: no-repeat; border-bottom: 3px solid var(--dv-primary); position: relative; transition: border-color 0.35s ease; height: 420px; display: flex; align-items: flex-end; padding-bottom: 1.5rem; } .dv-hero > * { position: relative; width: 100%; } @media (max-width: 767px) { .dv-hero { display: none; } } .dv-hero-title { font-size: clamp(2.2rem, 6vw, 4rem); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } .dv-hero-title--pill { display: inline-block; background: rgba(0,0,0,0.45); border-radius: 0.75rem; padding: 0.35em 0.75em; } /* ── Buttons ─────────────────────────────────────────────── */ .dv-btn-primary { background-color: var(--dv-primary); border-color: var(--dv-primary); color: #fff; font-family: 'Fredoka One', cursive; font-size: 1.1rem; border-radius: var(--dv-radius); padding: 0.55rem 1.6rem; transition: filter 0.15s, transform 0.1s, background-color 0.35s ease, border-color 0.35s ease; } .dv-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; } .dv-btn-outline { border: 2px solid var(--dv-primary); color: var(--dv-primary); font-weight: 700; border-radius: var(--dv-radius); background: transparent; transition: background 0.15s, color 0.15s, border-color 0.35s ease; } .dv-btn-outline:hover { background: var(--dv-primary); color: #fff; } /* ── Cards ───────────────────────────────────────────────── */ .dv-card { background: var(--dv-surface); border: none; border-radius: var(--dv-radius); box-shadow: var(--dv-shadow); transition: box-shadow 0.2s, transform 0.15s, background-color 0.35s ease; } .dv-card:hover { box-shadow: var(--dv-shadow-hover); transform: translateY(-3px); } .dv-card-icon { font-size: 2.8rem; line-height: 1; } .dv-card-title { font-family: 'Fredoka One', cursive; color: var(--dv-text); } .dv-card-body { color: var(--dv-muted); font-size: 0.95rem; } /* ── Footer ──────────────────────────────────────────────── */ .dv-footer { background-color: var(--dv-primary); color: #fff; font-weight: 600; margin-top: auto; transition: background-color 0.35s ease; } .dv-footer a { color: #fff; text-decoration: underline; } .dv-footer-copy { font-size: 0.8rem; opacity: 0.75; font-weight: 400; }