/* HSLC theme — warm cream + shelter blue, matching the Forever Home / HSLC materials. */ :root { --hslc-blue: #2f6f9f; --hslc-blue-dark: #1d4e72; --hslc-ink: #2b2b2b; --hslc-cream: #f7f4ec; --hslc-green: #4a8a3d; --hslc-border: #e3ddcf; --tint: #eef7fb; } /* Dark theme for the admin area (data-theme is set on ; see App.razor). Flips the admin palette; the navy bar/badges stay navy on purpose (white text), the logo stays on white. */ :root[data-theme="dark"] { --hslc-blue: #5AB0E6; --hslc-blue-dark: #8CCBF0; --hslc-ink: #E7EEF2; --hslc-cream: #0F1A20; --hslc-green: #6FBF60; --hslc-border: #2A3A44; --tint: #16242C; } [data-theme="dark"] .admin-bar, [data-theme="dark"] .admin-thumb-badge, [data-theme="dark"] .admin-view-tab.on, [data-theme="dark"] .cover-badge { background: #16455F; color: #fff; } [data-theme="dark"] .admin-brand img { background: #fff; } [data-theme="dark"] .admin-tip, [data-theme="dark"] .admin-tip-collapse, [data-theme="dark"] .admin-side-card, [data-theme="dark"] .admin-side-empty { background: var(--tint); border-color: var(--line); } /* Dark-mode contrast fixes for admin tables, tabs, tips, callouts. */ [data-theme="dark"] .admin-tip li { color: var(--muted); } [data-theme="dark"] .admin-table thead th { background: #16323F; } [data-theme="dark"] .admin-table tbody tr:hover { background: #1E3440; } [data-theme="dark"] .admin-view-tab { background: #16242C; color: var(--ink); border-color: var(--line); } [data-theme="dark"] .angel-block { background: #2A2410; border-color: #4A3F1A; } [data-theme="dark"] .pill-gray { background: #33414B; color: var(--ink); } body { color: var(--hslc-ink); background-color: var(--hslc-cream); } /* Interior (non-home) pages render inside a centered wrap with vertical padding. */ .site-main { min-height: 55vh; } /* Higher specificity than .wrap (which sets `padding: 0 24px`) so the top/bottom breathing room sticks and content never butts against the header or footer. */ .site-main.wrap { padding-top: 40px; padding-bottom: 80px; } /* Content links (the redesign resets to inherit) — make them visibly clickable, without affecting buttons, filter chips, pet cards, or memorial cards. */ .site-main a:not(.btn):not(.chip):not(.pet-card):not(.memorial-card) { color: var(--terracotta-dk, #1E80B8); font-weight: 600; } .site-main a:not(.btn):not(.chip):not(.pet-card):not(.memorial-card):hover { text-decoration: underline; } /* Restore readable spacing for generic content (the redesign reset removes default margins). */ .site-main h1 { margin-bottom: .4rem; color: var(--bark); } .site-main h2 { margin: 1.9rem 0 .6rem; color: var(--bark); } .site-main h3 { margin: 1rem 0 .4rem; } .site-main p { margin-bottom: .8rem; } .site-main ul:not(.req-list) { padding-left: 1.4rem; margin-bottom: .8rem; } .site-main li { margin-bottom: .25rem; } .site-main .lead { font-size: 1.15rem; color: var(--moss-dk); margin-bottom: 1rem; } .site-main .page-hero { width: 100%; height: 420px; max-height: 50vh; object-fit: cover; border-radius: 16px; margin: .5rem 0 1.5rem; display: block; } @media (max-width: 700px) { .site-main .page-hero { height: 260px; } } .site-main .info-stack { display: flex; flex-direction: column; gap: 20px; } /* Animal detail: photo left (sized to fit), details right (stacks on mobile) */ .detail-grid { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 36px; align-items: start; margin-top: .5rem; } /* Detail page shows the WHOLE animal at its natural shape (no crop, no box, no stretch) */ .detail-hero { display: block; width: 100%; height: auto; border-radius: 14px; } .detail-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 10px; } .detail-thumbs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center top; border-radius: 8px; } @media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } } /* Real photos inside hero carousel slides */ .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } a, .btn-link { color: var(--hslc-blue); } a:hover { color: var(--hslc-blue-dark); } h1, h2, h3 { color: var(--hslc-blue-dark); } h1 { font-weight: 700; } h2 { margin-top: 1.6rem; } .content { max-width: 1100px; padding-bottom: 2rem; } /* Buttons */ .btn-primary { background-color: var(--hslc-blue); border-color: var(--hslc-blue); color: #fff; } .btn-primary:hover { background-color: var(--hslc-blue-dark); border-color: var(--hslc-blue-dark); } .btn-success { background-color: var(--hslc-green); border-color: var(--hslc-green); } /* Hero */ .hero { background: linear-gradient(180deg, var(--paper) 0%, var(--hslc-cream) 100%); border: 1px solid var(--hslc-border); border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem; } .hero .lead { font-size: 1.25rem; color: var(--hslc-blue); font-style: italic; } .cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; } /* Hero / page banner images */ .hero-img { width: 100%; height: 340px; object-fit: cover; border-radius: 10px; margin-bottom: 1.25rem; display: block; } .page-hero { width: 100%; height: auto; border-radius: 10px; margin: 0.5rem 0 1.5rem; display: block; } /* Info grid (home) */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } /* Card grids (animals, memorials) */ .animal-grid, .memorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; } .card { border: 1px solid var(--hslc-border); border-radius: 10px; overflow: hidden; background: var(--paper); text-decoration: none; color: inherit; transition: box-shadow .15s ease; } .card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); } .animal-card img, .memorial-card img { width: 100%; height: 180px; object-fit: cover; display: block; } .card .card-body { padding: 0.75rem 1rem; } .card h3 { margin: 0 0 .25rem; font-size: 1.1rem; } /* News & events */ .news-item, .event-item { border-bottom: 1px solid var(--hslc-border); padding: 1.25rem 0; } .news-image, .event-image { max-width: 100%; border-radius: 8px; margin: .5rem 0; } /* Admin stat cards */ .stat-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 1.5rem; } .stat { background: var(--paper); border: 1px solid var(--hslc-border); border-radius: 10px; padding: 1rem 1.5rem; min-width: 140px; text-align: center; } .stat .num { display: block; font-size: 2rem; font-weight: 700; color: var(--hslc-blue); } .stat .label { color: var(--muted); font-size: .9rem; } a.stat { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } a.stat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.10); border-color: var(--hslc-blue); } /* Friendly admin action tiles (simple for non-technical volunteers) */ .admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 1rem 0 2rem; } .admin-tile { display: flex; flex-direction: column; gap: 7px; background: var(--paper); border: 1px solid var(--hslc-border); border-radius: 16px; padding: 22px; text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .admin-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.10); border-color: var(--hslc-blue); } .admin-tile .t-ico { font-size: 34px; line-height: 1; } .admin-tile .t-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; color: var(--hslc-blue-dark); } .admin-tile .t-desc { font-size: 13.5px; color: var(--muted); line-height: 1.45; } /* Dedicated admin layout bar (replaces the public nav while in the admin) */ .admin-bar { background: var(--bark, #16455F); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); } .admin-bar-inner { max-width: none; margin: 0 auto; padding: 11px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .admin-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; } .admin-brand:hover { color: #fff; } .admin-brand img { height: 36px; width: auto; background: var(--paper); border-radius: 8px; padding: 3px; box-sizing: border-box; } .admin-brand span { font-weight: 700; font-size: 15px; line-height: 1.15; } .admin-brand small { display: block; font-size: 10.5px; font-weight: 500; opacity: .8; letter-spacing: .1em; text-transform: uppercase; } .admin-bar-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: none; position: static; backdrop-filter: none; border: 0; box-shadow: none; z-index: auto; } .admin-bar-nav > a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; padding: 4px 2px; } .admin-bar-nav > a:hover { text-decoration: underline; } .admin-who { font-size: 13.5px; font-weight: 600; color: #fff; opacity: .82; } .admin-logout { margin: 0; } .admin-logout button { background: none; border: none; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 2px; } .admin-logout button:hover { text-decoration: underline; } .admin-main { max-width: none; margin: 0 auto; padding: 18px 32px 48px; } .admin-foot { max-width: none; margin: 24px auto 0; padding: 18px 32px 30px; border-top: 1px solid var(--line, var(--line)); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; } .admin-foot a { color: var(--hslc-blue, #2f6f9f); font-weight: 600; } /* Tighten the admin page header: the bar already says "Staff area", so drop the redundant eyebrow and pull the back-link + title together. */ .admin-main .eyebrow { display: none; } .admin-main .admin-back { margin: 0 0 2px; } .admin-main > h1, .admin-main .admin-head h1 { margin-top: 0; margin-bottom: .35rem; } /* Two-column editor: form + helpful sidebar (photos, tips). Uses the width without ultra-wide fields. */ .admin-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; } .admin-editor .admin-form { max-width: none; } .admin-editor-side { display: flex; flex-direction: column; gap: 18px; } .admin-editor-side h3 { margin: 0 0 8px; font-size: 16px; color: var(--bark, #16455F); } .admin-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; } .admin-editor-side .admin-media-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .admin-side-card { background: #fafdff; border: 1px solid var(--line, var(--line)); border-radius: 14px; padding: 14px 16px; } .admin-side-empty { background: #f6fafd; } .angel-block { background: #fff8e6; border: 1px solid #f3e2a8; border-radius: 12px; padding: 12px 14px; } .admin-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--hslc-blue, #2f6f9f); text-decoration: none; margin: 2px 0 8px; } .admin-back:hover { text-decoration: underline; } .admin-form-wide { max-width: 1200px; } .admin-narrow { max-width: 1500px; } .admin-form-wide .admin-form { max-width: none; } .admin-tip-collapse { margin: 18px 0 0; border: 1px solid var(--line, var(--line)); border-radius: 12px; padding: 10px 16px; background: #fafdff; } .admin-tip-collapse > summary { cursor: pointer; font-weight: 600; color: var(--bark, #16455F); } .admin-tip-collapse ul { margin: 10px 0 4px; padding-left: 20px; color: var(--muted); font-size: 14px; } .admin-tip-collapse li { margin-bottom: 4px; } .admin-photos-section { margin-top: 30px; } .admin-photos-section > h3 { font-size: 18px; color: var(--bark, #16455F); margin: 0 0 4px; } .admin-media-grid .card { border: none; } .admin-media-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line, var(--line)); display: block; } .admin-media-grid .ph { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: #eef7fb; border-radius: 10px; } .admin-tip { background: #eef7fb; border: 1px solid var(--line, var(--line)); border-radius: 14px; padding: 16px 18px; } .admin-tip ul { margin: 0; padding-left: 18px; } .admin-tip li { font-size: 13.5px; color: #4a5963; margin-bottom: 7px; line-height: 1.4; } @media (max-width: 860px) { .admin-editor { grid-template-columns: 1fr; } } /* Admin */ .admin-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 1rem; } .admin-table { width: 100%; background: var(--paper); border: 1px solid var(--line, var(--line)); border-radius: 12px; overflow: hidden; border-collapse: collapse; margin-bottom: 1rem; } .admin-table th, .admin-table td { text-align: left; padding: 11px 14px; font-size: 14px; border-bottom: 1px solid var(--line, var(--line)); } .admin-table thead th { background: #eef7fb; color: var(--bark, #16455F); font-weight: 600; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover { background: #f7fbfe; } .admin-table a { color: var(--terracotta-dk, #1E80B8); font-weight: 600; } /* Animal list thumbnails + status pills */ .admin-thumb-link { position: relative; display: inline-block; line-height: 0; } .admin-thumb { width: 140px; height: 140px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line, var(--line)); display: block; } .admin-thumb-badge { position: absolute; bottom: -6px; right: -6px; background: var(--bark, #16455F); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; line-height: 1.5; } .admin-thumb-missing { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 140px; height: 140px; padding: 0 8px; border-radius: 14px; border: 2px dashed var(--terracotta, #2BA0DA); color: var(--terracotta-dk, #1E80B8); font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; line-height: 1.2; } .admin-thumb-missing:hover { background: #f0f9ff; } .admin-animal-name { font-size: 15px; } .pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 30px; } .pill-green { background: #e2f2ee; color: #1f6f5c; } .pill-gray { background: #eee; color: var(--muted); } .pill-amber { background: #fbeecf; color: #8a5a09; } .pill-blue { background: #dceefb; color: #1E80B8; } /* Volunteer roster filters */ .vol-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 16px; } .vol-filters .chip { display: inline-block; background: var(--paper); border: 1px solid var(--line); color: var(--hslc-ink); padding: 6px 14px; border-radius: 30px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: .15s; } .vol-filters .chip:hover { border-color: var(--hslc-blue); } .vol-filters .chip.on { background: var(--hslc-blue); border-color: var(--hslc-blue); color: #fff; } .vol-search-form { margin-left: auto; min-width: 220px; flex: 1 1 220px; max-width: 340px; } .vol-search-form .form-control { margin: 0; } .vol-search-form { display: flex; align-items: center; } .sup-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: inline-block; vertical-align: middle; border: 1px solid var(--line); } .sup-thumb-none { display: inline-flex; align-items: center; justify-content: center; background: var(--tint); color: var(--muted); font-size: 13px; font-weight: 700; } /* Volunteer schedule grid */ .sched-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 18px; } .sched-weeklabel { font-weight: 700; font-size: 17px; color: var(--bark); } .sched-thisweek { font-size: 13.5px; font-weight: 600; color: var(--hslc-blue); } .sched-area { margin: 22px 0 10px; font-size: 22px; } .sched-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sched-grid { width: 100%; border-collapse: collapse; min-width: 760px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .sched-grid th, .sched-grid td { border: 1px solid var(--line); padding: 8px 9px; text-align: left; vertical-align: top; } .sched-grid thead th { background: var(--tint); color: var(--bark); text-align: center; font-size: 13px; } .sched-dow { display: block; font-weight: 700; } .sched-date { display: block; font-size: 11.5px; color: var(--muted); } .sched-timecol { width: 78px; background: var(--tint); color: var(--bark); font-weight: 700; font-size: 13px; white-space: nowrap; } .sched-cell { min-width: 96px; } .seat { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; } .seat:last-of-type { border-bottom: none; } .seat-name { color: var(--hslc-ink); } .seat-openlbl { color: var(--muted); font-style: italic; } .seat-open .seat-name { color: var(--muted); } .seat-tag { font-size: 10.5px; font-weight: 700; color: #1f6f5c; background: #e2f2ee; border-radius: 20px; padding: 0 7px; } .seat-claim { font-size: 11.5px; font-weight: 700; color: #fff; background: var(--hslc-blue); border: none; border-radius: 20px; padding: 2px 9px; cursor: pointer; } .seat-claim:hover { background: var(--hslc-blue-dark); } .seat-tag-out { color: #8a5a09; background: #fbeecf; } .seat-mini { font-size: 11px; font-weight: 600; color: var(--muted); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; } .seat-mini:hover { color: var(--terracotta-dk, #1E80B8); } .seat form { display: inline; margin: 0; } .sched-edit { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--hslc-blue); } .shift-seat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .shift-rm { display: inline; margin: 0; } /* Animals: views toolbar + search */ .admin-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 8px 0 18px; } .admin-views { display: flex; flex-wrap: wrap; gap: 8px; } .admin-view-tab { display: inline-block; padding: 8px 16px; border-radius: 30px; background: #eef6fb; color: var(--bark, #16455F); font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid var(--line, var(--line)); } .admin-view-tab:hover { background: #e0f0fa; } .admin-view-tab.on { background: var(--bark, #16455F); color: #fff; border-color: transparent; } .admin-view-tab .cnt { opacity: .65; font-weight: 500; margin-left: 2px; } .admin-view-tab.on .cnt { opacity: .85; } .admin-count { font-size: 14px; color: var(--muted); font-weight: 500; white-space: nowrap; } .admin-views-stat { font-size: 14px; color: var(--muted); margin: -2px 0 14px; } .doc-list { margin: 18px 0 0; border-top: 1px solid var(--line, var(--line)); padding-top: 14px; } .doc-list h3 { font-size: 16px; color: var(--bark, #16455F); margin: 0 0 10px; } .doc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line, var(--line)); } .doc-row > a { font-weight: 600; } .doc-row form { margin: 0 0 0 auto; } /* Site Stats: hover a pet name to preview its photo */ .pet-cell { position: relative; } .pet-cell .pet-hover-thumb { position: absolute; left: 0; bottom: calc(100% + 6px); width: 130px; height: 130px; object-fit: cover; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.28); display: none; z-index: 20; pointer-events: none; } .pet-cell:hover .pet-hover-thumb { display: block; } .stat-grid + .stat-grid { margin-top: 14px; } /* Admin tables scroll horizontally on small screens instead of overflowing the page */ @media (max-width: 700px) { .admin-main table.admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } .admin-search { display: flex; gap: 8px; align-items: center; } .admin-search input { padding: 9px 15px; border-radius: 30px; border: 1px solid var(--line, var(--line)); min-width: 210px; font-size: 14px; } /* Animals: grouped card grid */ .admin-group-head { font-size: 13px; font-weight: 700; color: var(--bark, #16455F); text-transform: uppercase; letter-spacing: .05em; margin: 26px 0 12px; } .admin-group-head .cnt { opacity: .55; font-weight: 600; } .admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; } .admin-animal-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line, var(--line)); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; } .admin-animal-card:hover { box-shadow: 0 8px 22px rgba(22, 69, 95, .12); transform: translateY(-2px); } .admin-animal-card .aac-photo { position: relative; line-height: 0; } .admin-animal-card .aac-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f0f7fc; } .admin-animal-card .aac-photo .admin-thumb-badge { bottom: 8px; right: 8px; } .admin-animal-card .aac-miss { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 24px; color: var(--terracotta-dk, #1E80B8); background: #f6fbfe; border-bottom: 2px dashed var(--terracotta, #2BA0DA); } .admin-animal-card .aac-miss span { font-size: 13px; font-weight: 700; } .admin-animal-card .aac-body { padding: 11px 14px 14px; } .admin-animal-card .aac-name { font-size: 16px; font-weight: 700; color: var(--bark, #16455F); } .admin-animal-card .aac-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; } .admin-animal-card .aac-sp { font-size: 13px; color: var(--muted); } /* Animals: pager */ .admin-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 28px 0 8px; } .admin-pager-info { font-size: 14px; color: var(--muted); } /* Animal editor: paste/drag photo dropzone */ .photo-drop { border: 2px dashed var(--terracotta, #2BA0DA); border-radius: 14px; background: #f6fbfe; padding: 16px; transition: background .15s ease, border-color .15s ease; } .photo-drop.drag { background: #e6f4fd; border-color: var(--terracotta-dk, #1E80B8); } .photo-drop-cta { text-align: center; margin-bottom: 12px; } .photo-drop-cta .pd-icon { font-size: 28px; display: block; } .photo-drop-cta .pd-main { margin: 4px 0 2px; color: var(--bark, #16455F); font-size: 15px; } .photo-drop-cta .pd-hint { margin: 0; color: var(--muted); font-size: 13px; } .photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .photo-preview:empty { display: none; } .drop-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, var(--line)); } .drop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .drop-thumb-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(22,69,95,.85); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .drop-thumb-x:hover { background: #16455F; } /* Video = beta, tucked away */ .beta-block { border: 1px solid var(--line, var(--line)); border-radius: 12px; padding: 10px 14px; background: #fafdff; } .beta-block > summary { cursor: pointer; font-weight: 600; color: var(--bark, #16455F); list-style: revert; } .beta-tag { display: inline-block; background: #fbeecf; color: #8a5a09; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 20px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; } .beta-body { margin-top: 6px; } /* Current-photos cover badge + actions */ .admin-media-grid .card { position: relative; } .admin-media-grid .card.is-cover { outline: 2px solid var(--terracotta, #2BA0DA); outline-offset: 1px; border-radius: 12px; } .cover-badge { position: absolute; top: 6px; left: 6px; background: var(--bark, #16455F); color: #fff; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 2px 8px; } .media-actions { display: flex; gap: 6px; margin-top: 6px; } .media-actions .media-btn { padding: 5px 10px; font-size: 12px; width: 100%; } /* Donate: aluminum cans graphic */ .cans-img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 12px; border: 1px solid var(--line, var(--line)); margin: 4px 0 12px; } /* Event editor flyer preview */ .current-flyer { margin-bottom: 10px; } .current-flyer img { display: block; max-width: 320px; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line, var(--line)); margin-bottom: 6px; } .admin-form { background: var(--paper); border: 1px solid var(--line, var(--line)); border-radius: 16px; padding: 26px; max-width: 640px; } .admin-form .form-label { font-weight: 600; color: var(--bark, #16455F); font-size: 14px; } .admin-card { background: var(--paper); border: 1px solid var(--line, var(--line)); border-radius: 14px; padding: 20px 24px; } .admin-links { list-style: none; padding: 0; } .admin-links li { padding: 10px 0; border-bottom: 1px solid var(--line, var(--line)); } .admin-links li:last-child { border-bottom: none; } /* "Today" event highlight */ .today-badge { display:inline-block; background:#F1582F; color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 9px; border-radius:20px; margin-bottom:4px; } .event.event-today { border-color:#2BA0DA; box-shadow:0 0 0 2px #2BA0DA inset; } /* Simple bar chart (site stats) */ .bar-chart { margin: 1rem 0; max-width: 640px; } .bar-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; } .bar-label { width: 4rem; font-size: .85rem; color: var(--muted); text-align: right; } .bar { flex: 1; background: #eee; border-radius: 4px; height: 1.1rem; overflow: hidden; } .bar-fill { display: block; height: 100%; background: var(--hslc-blue); } .bar-value { width: 3rem; font-size: .85rem; } /* Top row tagline + footer */ .brand-tagline { color: var(--hslc-blue-dark); font-style: italic; } .site-footer { background: var(--paper); border-top: 1px solid var(--hslc-border); padding: 1.5rem 2rem; margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; } .site-footer a { text-decoration: none; }