/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* You can use the following syntax to include files in this manifest: *= require_tree . *= require_self */ /* Base Reset & Layout */ /** {*/ /*margin: 0;*/ /*padding: 0;*/ /*box-sizing: border-box;*/ /*}*/ body { font-family: 'Segoe UI', sans-serif; line-height: 1.5; background-color: var(--bg); color: var(--text); /*padding: 1rem;*/ } /* Color Themes */ :root { --bg: #fdfcf8; --text: #1e1e1e; --button-bg-1: #e0c097; /* sand */ --button-bg-2: #d4a373; /* wheat */ --button-bg-3: #a3b18a; /* grass */ --button-bg-4: #8ecae6; /* sky */ --button-bg-5: #90be6d; /* spring green */ --button-bg-6: #cdb4db; /* lavender */ --button-text: #1e1e1e; --card-bg: #ffffff; --section-bg: #f4f1ee; } @media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #f0f0f0; --button-bg-1: #665c54; --button-bg-2: #7c6f64; --button-bg-3: #5f7c6f; --button-bg-4: #4e6e81; --button-bg-5: #586e4d; --button-bg-6: #6c5d6e; --button-text: #ffffff; --card-bg: #1e1e1e; --section-bg: #1a1a1a; } } /* Footer */ footer { margin-top: 2rem; padding: 1rem; text-align: center; background-color: var(--section-bg); border-radius: 10px; } /* Flatpickr dark mode overrides — applied when the element has the .dark class */ .dark .flatpickr-calendar { background: #1f2937; border-color: #374151; box-shadow: 0 4px 12px rgba(0,0,0,0.4); color: #f3f4f6; } .dark .flatpickr-calendar .flatpickr-months, .dark .flatpickr-calendar .flatpickr-weekdays, .dark .flatpickr-calendar .flatpickr-month { background: #111827; } .dark .flatpickr-calendar .flatpickr-current-month, .dark .flatpickr-calendar .flatpickr-current-month .numInputWrapper input, .dark .flatpickr-calendar .flatpickr-monthDropdown-months { color: #f3f4f6; } .dark .flatpickr-calendar .flatpickr-weekday { color: #9ca3af; background: #111827; } .dark .flatpickr-calendar .flatpickr-day { color: #e5e7eb; } .dark .flatpickr-calendar .flatpickr-day:hover, .dark .flatpickr-calendar .flatpickr-day:focus { background: #374151; border-color: #374151; } .dark .flatpickr-calendar .flatpickr-day.selected, .dark .flatpickr-calendar .flatpickr-day.selected:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; } .dark .flatpickr-calendar .flatpickr-day.today { border-color: #3b82f6; } .dark .flatpickr-calendar .flatpickr-day.prevMonthDay, .dark .flatpickr-calendar .flatpickr-day.nextMonthDay { color: #6b7280; } .dark .flatpickr-calendar .flatpickr-day.disabled { color: #4b5563; } .dark .flatpickr-calendar .flatpickr-time { background: #1f2937; border-top-color: #374151; } .dark .flatpickr-calendar .flatpickr-time input { color: #f3f4f6; background: #1f2937; } .dark .flatpickr-calendar .flatpickr-time .flatpickr-time-separator, .dark .flatpickr-calendar .flatpickr-time .flatpickr-am-pm { color: #9ca3af; } .dark .flatpickr-calendar svg path { fill: #9ca3af; } .dark .flatpickr-calendar .numInputWrapper:hover, .dark .flatpickr-calendar .numInputWrapper span:hover { background: #374151; } .dark .flatpickr-calendar .flatpickr-prev-month:hover svg path, .dark .flatpickr-calendar .flatpickr-next-month:hover svg path { fill: #f3f4f6; } /* Post Modal Overlay */ .post-modal-overlay > div:first-child { opacity: 0; transition: opacity 200ms ease-out; } .post-modal-visible > div:first-child { opacity: 1; } .post-modal-dialog { transform: translateY(24px) scale(0.97); opacity: 0; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease-out; } .post-modal-visible .post-modal-dialog { transform: translateY(0) scale(1); opacity: 1; } /* Constrain single-column pages so content does not stretch too wide */ .page-container { max-width: 64rem; /* 1024px */ margin-left: auto; margin-right: auto; } .page-container.max-w-full { max-width: none; } /* Keep multi-column layouts readable on ultra-wide displays */ .page-container.max-w-multicol { max-width: 87.5rem; /* 1400px */ }