:root { --pine: #1F4A3D; /* primary brand green */ --pine-dark: #143027; /* hover / deep accents */ --pine-light: #2F6B58; /* lighter green for borders / hovers */ --moss: #6E8B5B; /* muted secondary green */ --bone: #EAEFEA; /* off-white page tone */ --bone-card: rgba(247, 250, 246, 0.94); /* frosted card fill */ --ink: #16231E; /* near-black text with a green undertone */ --danger: #9E3B2E; /* earthy red, not Bootstrap's bright red */ --radius: 14px; --shadow: 0 10px 30px rgba(15, 40, 30, 0.18); } /* ---- Page canvas: mist gradient over the fixed forest backdrop ---------- */ html { height: 100%; } body { min-height: 100vh; margin: 0; color: var(--ink); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; /* Layer 1 (top): mist that fades out, keeps upper content readable. Layer 2 (bottom): the immersive forest, pinned to the viewport. */ background-color: var(--bone); background-image: linear-gradient(to bottom, rgba(234, 239, 234, 0.78) 0%, rgba(234, 239, 234, 0.30) 22%, rgba(234, 239, 234, 0.00) 45%), url("/static/img/forest.svg"); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: cover, cover; background-attachment: fixed, fixed; /* both pinned → parallax feel */ } /* Bootstrap's bg-light on would paint over our forest — neutralize it */ body.bg-light { background-color: var(--bone) !important; } /* ---- Brand wordmark (coyote mark + "ToYote List") ----------------------- */ .toyote-brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--pine); } .toyote-brand:hover { color: var(--pine-dark); } .toyote-brand img { height: 2.1rem; width: auto; display: block; } .toyote-brand .wordmark { font-weight: 800; letter-spacing: 0.5px; font-size: 1.5rem; line-height: 1; } .toyote-brand .wordmark .yote { color: var(--moss); } /* tint the "Yote" pun */ /* A centered brand header for the auth pages (login / register) */ .brand-header { text-align: center; margin: 2.5rem 0 1.25rem; } .brand-header img { height: 4rem; width: auto; } .brand-header .wordmark { display: block; margin-top: 0.6rem; font-weight: 800; font-size: 1.9rem; color: var(--pine); letter-spacing: 0.5px; } .brand-header .tagline { color: var(--pine-light); font-size: 0.95rem; } /* ---- Frosted cards: content floats above the forest --------------------- */ .card { background: var(--bone-card); border: 1px solid rgba(31, 74, 61, 0.16); border-radius: var(--radius); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .card-title { color: var(--pine-dark); } /* List rows (todos) sit on the frosted card; keep them legible */ .list-group-item { background: transparent; border-color: rgba(31, 74, 61, 0.12); } /* ---- Buttons: recolor Bootstrap to the pine palette --------------------- */ .btn-primary { --bs-btn-bg: var(--pine); --bs-btn-border-color: var(--pine); --bs-btn-hover-bg: var(--pine-dark); --bs-btn-hover-border-color: var(--pine-dark); --bs-btn-active-bg: var(--pine-dark); --bs-btn-active-border-color: var(--pine-dark); --bs-btn-disabled-bg: var(--pine); --bs-btn-disabled-border-color: var(--pine); } .btn-outline-primary { --bs-btn-color: var(--pine); --bs-btn-border-color: var(--pine); --bs-btn-hover-bg: var(--pine); --bs-btn-hover-border-color: var(--pine); --bs-btn-active-bg: var(--pine-dark); --bs-btn-active-border-color: var(--pine-dark); } .btn-success { --bs-btn-bg: var(--moss); --bs-btn-border-color: var(--moss); --bs-btn-hover-bg: var(--pine-light); --bs-btn-hover-border-color: var(--pine-light); } .btn-outline-secondary { --bs-btn-color: var(--pine-dark); --bs-btn-border-color: rgba(31, 74, 61, 0.45); --bs-btn-hover-bg: var(--pine-dark); --bs-btn-hover-border-color: var(--pine-dark); } .btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); } .btn-outline-danger{ --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); } /* Focus ring in brand green instead of Bootstrap blue */ .form-control:focus { border-color: var(--pine-light); box-shadow: 0 0 0 0.2rem rgba(47, 107, 88, 0.25); } a { color: var(--pine); } a:hover { color: var(--pine-dark); } /* Make the "Signed in as" line readable against the lighter top band */ .text-muted { color: #4a5a52 !important; } /* Empty-state alert in a soft pine tint instead of Bootstrap blue */ .alert-info { --bs-alert-bg: rgba(110, 139, 91, 0.16); --bs-alert-border-color: rgba(31, 74, 61, 0.25); --bs-alert-color: var(--pine-dark); }