/* * barn.css * SK Land Trust — The Barn Reservation System * Shared stylesheet for: calendar, list, reservation form, * reservation detail, and login pages. * * Google Fonts (add to every page ): * * * * Flatpickr (add to pages that use date/time pickers): * * */ /* ============================================================ 1. RESET & ROOT VARIABLES ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --forest: #2c4a2e; --moss: #4a7c52; --bark: #7a5c3a; --straw: #d4a843; --fog: #f2ede6; --parchment: #e8dfd0; --stone: #c8bfb0; --ink: #1e1a16; --highlight: #fffbf4; --cancelled: #5a2020; --error: #8b2e2e; --warning: #7a4a10; --warning-bg: #fdf3e0; --warning-border: #d4a843; } /* ============================================================ 2. BASE / BODY ============================================================ */ body { font-family: 'Source Serif 4', Georgia, serif; background-color: var(--fog); color: var(--ink); min-height: 100vh; } /* Login page needs flex column to vertically center the card */ body.page-login { display: flex; flex-direction: column; } /* ============================================================ 3. SITE HEADER ============================================================ */ .site-header { background: linear-gradient(160deg, var(--forest) 0%, #1a3020 100%); padding: 1.5rem 2rem 2rem; position: relative; overflow: hidden; } /* Straw dashed stripe along the bottom */ .site-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient( 90deg, var(--straw) 0px, var(--straw) 20px, transparent 20px, transparent 30px ); } .header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .site-logo { max-width: 260px; height: auto; filter: brightness(1.15); } .header-title { color: var(--fog); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: 0.02em; border-left: 3px solid var(--straw); padding-left: 1.25rem; } .header-subtitle { color: var(--straw); font-size: 0.85rem; font-weight: 300; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.25rem; } /* ============================================================ 4. MAIN CONTENT AREA ============================================================ */ main { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem; } /* Narrower max-width for form/detail/list pages */ main.narrow { max-width: 860px; } /* Login page: stretch main to fill remaining height and center */ body.page-login main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; max-width: none; } /* ============================================================ 5. SHARED NAVIGATION & LINKS ============================================================ */ /* ── Back link ── */ .back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--forest); font-size: 0.82rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--straw); padding-bottom: 1px; margin-bottom: 1.5rem; } .back-link:hover { color: var(--bark); } /* ── Action links (below calendar / list) ── */ .action-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .action-links a { display: inline-block; padding: 0.6rem 1.4rem; border-radius: 4px; font-size: 0.87rem; font-weight: 600; font-family: 'Source Serif 4', serif; text-decoration: none; transition: opacity 0.15s, transform 0.1s; } .action-links a.secondary, .action-links a:first-child { background: var(--parchment); color: var(--forest); border: 1px solid var(--stone); } .action-links a.primary, .action-links a:last-child { background: var(--forest); color: var(--fog); } .action-links a:hover { opacity: 0.88; transform: translateY(-1px); } /* ============================================================ 6. SHARED CARD SHELL ============================================================ */ .form-card, .detail-card, .events-wrapper, .login-card, .calendar-wrapper { background: var(--highlight); border: 1px solid var(--stone); border-radius: 6px; overflow: hidden; box-shadow: 0 4px 24px rgba(44,74,46,0.09); } /* Green heading bar shared by all cards */ .form-card-heading, .detail-card-heading, .events-heading, .login-card-heading, .calendar-heading { background: var(--forest); color: var(--fog); padding: 1rem 1.75rem; } .form-card-heading h2, .detail-card-heading h2, .login-card-heading h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1rem, 2.5vw, 1.35rem); font-weight: 700; letter-spacing: 0.05em; } .form-card-heading p { font-size: 0.78rem; font-weight: 300; color: rgba(242,237,230,0.75); margin-top: 0.35rem; line-height: 1.5; } .events-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1rem, 2.5vw, 1.35rem); font-weight: 700; letter-spacing: 0.05em; } .calendar-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 700; text-align: center; letter-spacing: 0.05em; } /* Card footer strip */ .form-footer, .detail-footer, .login-footer { padding: 1.25rem 1.75rem; background: var(--parchment); border-top: 1px solid var(--stone); display: flex; align-items: center; gap: 1rem; } .form-footer { justify-content: space-between; flex-wrap: wrap; } .detail-footer { justify-content: flex-end; } .login-footer { flex-direction: column; padding: 1rem 1.75rem 1.5rem; } .form-footer p { font-size: 0.75rem; font-style: italic; color: #7a6a5a; } /* ============================================================ 7. SHARED SECTION TITLE ============================================================ */ .section-title { font-family: 'Playfair Display', Georgia, serif; font-size: 0.95rem; font-weight: 700; color: var(--bark); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.6rem; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--stone); } /* ── Form & detail sections ── */ .form-section, .detail-section { padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--stone); } .form-section:last-of-type, .detail-section:last-of-type { border-bottom: none; } /* ============================================================ 8. FIELD GRIDS (FORM & DETAIL) ============================================================ */ .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } .field-grid.three-col { grid-template-columns: 1fr 1fr 1fr; } .field-grid.one-col { grid-template-columns: 1fr; } .span-2 { grid-column: span 2; } /* ── Form fields ── */ .field { display: flex; flex-direction: column; gap: 0.35rem; } label { font-size: 0.78rem; font-weight: 600; color: var(--bark); letter-spacing: 0.03em; } input[type='text'], input[type='email'], input[type='tel'], input[type='password'], textarea { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.88rem; color: var(--ink); background: var(--fog); border: 1px solid var(--stone); border-radius: 3px; padding: 0.5rem 0.7rem; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; } input[type='text']:focus, input[type='email']:focus, input[type='tel']:focus, input[type='password']:focus, textarea:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(74,124,82,0.15); } textarea { resize: vertical; min-height: 120px; } .field-hint { font-size: 0.7rem; font-style: italic; color: #8a7a6a; margin-top: -0.1rem; } /* ── Detail view field rows ── */ .field-row { display: flex; flex-direction: column; gap: 0.2rem; } .field-label { font-size: 0.72rem; font-weight: 700; color: var(--bark); letter-spacing: 0.06em; text-transform: uppercase; } .field-value { font-size: 0.9rem; color: var(--ink); line-height: 1.55; min-height: 1.3rem; } .field-value:empty::after { content: '—'; color: var(--stone); font-style: italic; } /* ============================================================ 9. DURATION GRID (FORM & DETAIL) ============================================================ */ .duration-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1.5rem; } .duration-col-header { font-size: 0.8rem; font-weight: 700; color: var(--forest); letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 0.5rem; border-bottom: 2px solid var(--straw); margin-bottom: 0.85rem; } .duration-col .field + .field, .duration-col .field-row + .field-row { margin-top: 0.75rem; } /* ============================================================ 10. BUTTONS ============================================================ */ button[type='submit'] { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.9rem; font-weight: 600; color: var(--fog); background: var(--forest); border: none; border-radius: 4px; padding: 0.7rem 2rem; cursor: pointer; letter-spacing: 0.03em; transition: background 0.15s, transform 0.1s; } button[type='submit']:hover { background: var(--moss); transform: translateY(-1px); } button[type='submit']:active { transform: translateY(0); } /* Full-width submit (login) */ .login-footer button[type='submit'] { width: 100%; font-size: 0.95rem; padding: 0.75rem; } /* Edit / secondary action button */ .btn-edit { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.9rem; font-weight: 600; color: var(--fog); background: var(--bark); border: none; border-radius: 4px; padding: 0.65rem 1.75rem; cursor: pointer; letter-spacing: 0.03em; text-decoration: none; display: inline-block; transition: background 0.15s, transform 0.1s; } .btn-edit:hover { background: #6a4c2a; transform: translateY(-1px); } .btn-edit:active { transform: translateY(0); } /* ============================================================ 11. INPUT ICON WRAPPER (datepicker / login fields) ============================================================ */ .input-icon-wrap { position: relative; } .input-icon-wrap input { padding-right: 2.2rem; } .input-icon-wrap .icon, .input-icon-wrap .field-icon { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); pointer-events: none; user-select: none; color: var(--bark); opacity: 0.5; font-size: 0.9rem; } /* ============================================================ 12. FACILITIES (FORM & DETAIL) ============================================================ */ /* Form checkboxes */ .checkbox-group { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; user-select: none; } .checkbox-label input[type='checkbox'] { width: 1.1rem; height: 1.1rem; accent-color: var(--forest); cursor: pointer; flex-shrink: 0; } /* Detail view pills */ .facility-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .facility-pill { display: inline-block; background: var(--parchment); border: 1px solid var(--stone); border-radius: 3px; padding: 0.3rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--forest); } .facility-empty { font-size: 0.82rem; font-style: italic; color: var(--stone); } /* ============================================================ 13. RECURRENCE (reservation form only) ============================================================ */ .recurrence-toggle-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0; } .recurrence-toggle-row label { font-size: 0.88rem; font-weight: 600; color: var(--ink); cursor: pointer; letter-spacing: 0; } /* iOS-style toggle switch */ .toggle-switch { position: relative; width: 2.6rem; height: 1.4rem; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-track { position: absolute; inset: 0; background: var(--stone); border-radius: 999px; cursor: pointer; transition: background 0.2s; } .toggle-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 1.1rem; height: 1.1rem; background: white; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .toggle-switch input:checked + .toggle-track { background: var(--forest); } .toggle-switch input:checked + .toggle-track::after { transform: translateX(1.2rem); } .recurrence-body { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--stone); display: none; } .recurrence-body.visible { display: block; } .recurrence-type-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; } .recurrence-type-btn { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.82rem; font-weight: 600; color: var(--bark); background: var(--parchment); border: 1px solid var(--stone); border-radius: 3px; padding: 0.4rem 1rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .recurrence-type-btn:hover { border-color: var(--moss); color: var(--forest); } .recurrence-type-btn.active { background: var(--forest); color: var(--fog); border-color: var(--forest); } .recurrence-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-bottom: 1.25rem; } .recurrence-options input[type='number'] { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.88rem; color: var(--ink); background: var(--fog); border: 1px solid var(--stone); border-radius: 3px; padding: 0.5rem 0.7rem; width: 100%; -webkit-appearance: none; transition: border-color 0.15s, box-shadow 0.15s; } .recurrence-options input[type='number']:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(74,124,82,0.15); } .recurrence-options .field-hint { margin-top: 0.2rem; } .recurrence-preview { background: var(--parchment); border: 1px solid var(--stone); border-radius: 4px; overflow: hidden; } .recurrence-preview-header { background: var(--bark); color: var(--fog); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45rem 0.9rem; display: flex; justify-content: space-between; align-items: center; } .recurrence-preview-header span { font-weight: 300; letter-spacing: 0; text-transform: none; font-size: 0.72rem; } .recurrence-preview-empty { padding: 1rem 0.9rem; font-size: 0.78rem; font-style: italic; color: #8a7a6a; } .recurrence-date-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .recurrence-date-chip { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--stone); border-right: 1px solid var(--stone); font-size: 0.78rem; gap: 0.4rem; } .chip-date { font-weight: 600; color: var(--forest); } .chip-dow { font-size: 0.68rem; color: var(--bark); font-style: italic; } .chip-remove { background: none; border: none; cursor: pointer; color: var(--bark); font-size: 0.75rem; padding: 0; line-height: 1; opacity: 0.5; transition: opacity 0.15s, color 0.15s; margin-left: auto; flex-shrink: 0; } .chip-remove:hover { opacity: 1; color: var(--error); } /* ============================================================ 14. FLATPICKR THEME OVERRIDES (reservation form only) ============================================================ */ .flatpickr-calendar { font-family: 'Source Serif 4', Georgia, serif !important; border: 1px solid var(--stone) !important; border-radius: 6px !important; box-shadow: 0 8px 32px rgba(44,74,46,0.15) !important; } .flatpickr-months { background: var(--forest) !important; border-radius: 5px 5px 0 0 !important; } .flatpickr-month, .flatpickr-prev-month, .flatpickr-next-month { color: var(--fog) !important; fill: var(--fog) !important; } .flatpickr-current-month { font-family: 'Playfair Display', Georgia, serif !important; font-size: 1rem !important; color: var(--fog) !important; } .flatpickr-current-month select { color: var(--fog) !important; } .flatpickr-weekday { background: var(--parchment) !important; color: var(--bark) !important; font-weight: 700 !important; font-size: 0.7rem !important; } .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--parchment) !important; border-color: var(--stone) !important; } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--forest) !important; border-color: var(--forest) !important; color: var(--fog) !important; } .flatpickr-day.today { border-color: var(--straw) !important; font-weight: 700; } .flatpickr-day.today:hover { background: var(--straw) !important; border-color: var(--straw) !important; color: var(--ink) !important; } .flatpickr-time input, .flatpickr-time .flatpickr-am-pm { font-family: 'Source Serif 4', Georgia, serif !important; font-size: 0.9rem !important; color: var(--ink) !important; } .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: var(--parchment) !important; } .numInputWrapper:hover { background: var(--parchment) !important; } /* ============================================================ 15. CALENDAR PAGE ============================================================ */ /* Month navigation */ .month-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.75rem; } .month-nav a { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 3px; border: 1px solid var(--stone); background: var(--highlight); color: var(--forest); font-family: 'Source Serif 4', serif; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .month-nav a:hover, .month-nav a.active { background: var(--forest); color: var(--fog); border-color: var(--forest); } /* Calendar grid */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-dow { background: var(--parchment); border-bottom: 2px solid var(--bark); text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 0.25rem; color: var(--bark); } .cal-day { border-right: 1px solid var(--stone); border-bottom: 1px solid var(--stone); background: var(--parchment); min-height: 110px; padding: 0.45rem 0.5rem 0.5rem; position: relative; transition: background 0.12s; } .cal-day:nth-child(7n) { border-right: none; } .cal-day.empty { background: var(--fog); } .cal-day.highlighted { background: #fff8ec; border: 2px solid var(--straw); } .day-num { font-size: 0.7rem; font-weight: 600; color: var(--bark); margin-bottom: 0.35rem; display: block; } /* Calendar events */ .events { display: flex; flex-direction: column; gap: 0.3rem; } .event { background: var(--moss); border-radius: 3px; padding: 0.2rem 0.4rem; text-decoration: none; display: block; } .event .event-name { display: block; font-size: 0.68rem; font-weight: 600; color: #e8f5e9; line-height: 1.3; } .event .event-time { display: block; font-size: 0.6rem; color: rgba(232,245,233,0.75); margin-top: 1px; } .event:hover { background: var(--forest); } .event.cancelled { background: #5a2020; text-decoration: line-through; } .event.cancelled .event-name { color: #f5c6c6; } .event.cancelled .event-time { color: rgba(245,198,198,0.7); } /* Year navigation */ .year-nav { display: flex; justify-content: space-between; padding: 0.9rem 1.25rem; border-top: 1px solid var(--stone); background: var(--parchment); } .year-nav a { color: var(--forest); font-size: 0.85rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--straw); padding-bottom: 1px; } .year-nav a:hover { color: var(--bark); } /* ============================================================ 16. EVENT LIST PAGE ============================================================ */ .event-row { display: grid; grid-template-columns: 7rem 1fr; gap: 0 1rem; padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--stone); align-items: start; transition: background 0.12s; } .event-row:last-child { border-bottom: none; } .event-row:hover { background: #fdf8f0; } .event-row.cancelled { background: #fdf4f4; } .event-row.cancelled:hover { background: #fbeaea; } .event-date { font-size: 0.78rem; font-weight: 600; color: var(--bark); letter-spacing: 0.04em; padding-top: 0.15rem; white-space: nowrap; } .event-link { font-size: 0.95rem; font-weight: 600; color: var(--forest); text-decoration: none; line-height: 1.4; display: inline-block; } .event-link:hover { color: var(--moss); text-decoration: underline; } .event-row.cancelled .event-link { color: var(--cancelled); text-decoration: line-through; } .cancelled-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--cancelled); color: #fde8e8; border-radius: 2px; padding: 0.1rem 0.45rem; margin-left: 0.5rem; vertical-align: middle; } .event-desc { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 300; font-style: italic; color: #5a4e42; line-height: 1.55; } .date-band { background: var(--parchment); border-bottom: 1px solid var(--stone); padding: 0.4rem 1.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bark); } /* ============================================================ 17. LOGIN PAGE ============================================================ */ .login-card { width: 100%; max-width: 420px; } .login-card-heading { text-align: center; padding: 1.1rem 1.75rem; } .login-card-heading h2 { font-size: 1.2rem; } .login-warning { background: var(--warning-bg); border-bottom: 1px solid var(--warning-border); padding: 0.75rem 1.25rem; display: flex; gap: 0.6rem; align-items: flex-start; } .login-warning-icon { font-size: 0.95rem; flex-shrink: 0; margin-top: 0.05rem; } .login-warning p { font-size: 0.75rem; color: var(--warning); line-height: 1.55; } .login-warning strong { font-weight: 700; } .login-body { padding: 1.75rem 1.75rem 1.5rem; } .show-password-wrap { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; } .show-password-wrap input[type='checkbox'] { width: 0.95rem; height: 0.95rem; accent-color: var(--forest); cursor: pointer; } .show-password-wrap label { font-size: 0.72rem; color: #8a7a6a; cursor: pointer; letter-spacing: 0; font-weight: 400; } .session-note { background: var(--parchment); border-top: 1px solid var(--stone); padding: 0.8rem 1.25rem; font-size: 0.72rem; font-style: italic; color: #7a6a5a; line-height: 1.55; text-align: center; } /* ============================================================ 18. RESPONSIVE BREAKPOINTS ============================================================ */ /* ── Calendar ── */ @media (max-width: 700px) { .cal-day { min-height: 70px; padding: 0.3rem; } .cal-dow { font-size: 0.6rem; padding: 0.5rem 0; } .event .event-name { font-size: 0.6rem; } .event .event-time { display: none; } } @media (max-width: 460px) { .cal-dow span.full { display: none; } .cal-dow span.short { display: inline; } } @media (min-width: 461px) { .cal-dow span.short { display: none; } } /* ── Event list ── */ @media (max-width: 520px) { .event-row { grid-template-columns: 1fr; gap: 0.2rem; } .event-date { font-size: 0.72rem; } } /* ── Forms & detail ── */ @media (max-width: 640px) { .field-grid, .field-grid.three-col { grid-template-columns: 1fr; } .span-2 { grid-column: span 1; } .duration-grid { grid-template-columns: 1fr; gap: 1.25rem 0; } .form-section, .detail-section { padding: 1.25rem 1rem; } .form-card-heading, .detail-card-heading { padding: 1rem; } .form-footer, .detail-footer { padding: 1rem; } } /* ── Login ── */ @media (max-width: 480px) { .login-body { padding: 1.25rem 1rem 1rem; } .login-footer { padding: 0.75rem 1rem 1.25rem; } } /* ── Header title — remove left border on very small screens ── */ @media (max-width: 560px) { .header-title { border-left: none; padding-left: 0; } }