(or carries role=heading aria-level=1). Reset the
UA heading margin so promoting the old
to
doesn't shift layout. */
margin: 0;
}
.hv-page-subtitle {
font-size: var(--hv-sz-sm);
color: var(--hv-text-light);
margin-top: 4px;
font-weight: 500;
}
/* ── Buttons ────────────────────────────────────────────────── */
/* Base button */
.hv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 66px;
padding: 0 36px;
border-radius: var(--hv-r-pill);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-md);
font-weight: 800;
cursor: pointer;
border: 2.5px solid transparent;
transition: all 0.15s;
white-space: nowrap;
text-decoration: none;
/* keeps the native push-button look in WebKit, which
paints it grey and ignores the variant background below. Every .hv-btn-*
variant sets its own background, so resetting the appearance is safe. */
appearance: none;
-webkit-appearance: none;
}
/* Disabled state — used by App.StripePayment.notReady() while the Stripe
Payment Element is still mounting, and any other JS that toggles the
disabled prop instead of painting inline colors */
.hv-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
/* Primary — green, for main submit/save actions */
.hv-btn-primary {
background: var(--hv-green);
color: white;
border-color: var(--hv-green);
box-shadow: 0 4px 16px rgba(var(--hv-green-rgb),0.30);
}
.hv-btn-primary:hover {
background: var(--hv-green-dark);
border-color: var(--hv-green-dark);
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(var(--hv-green-rgb),0.40);
}
/* Secondary — yellow, for draft/save-later actions */
.hv-btn-secondary {
background: var(--hv-btn-secondary-bg, var(--hv-yellow-light));
color: var(--hv-btn-secondary-text, var(--hv-navy));
border-color: var(--hv-btn-secondary-border, var(--hv-yellow-mid));
}
.hv-btn-secondary:hover {
background: var(--hv-btn-secondary-hover-bg, var(--hv-yellow-mid));
transform: translateY(-1px);
}
/* Ghost — for cancel/back */
.hv-btn-ghost {
background: transparent;
color: var(--hv-text-light);
border-color: var(--hv-border-warm);
}
.hv-btn-ghost:hover {
color: var(--hv-text);
border-color: var(--hv-text-light);
}
/* Danger — soft red, for destructive delete actions */
.hv-btn-danger {
background: #fee2e2;
color: #991b1b;
border-color: #fca5a5;
}
.hv-btn-danger:hover {
background: #fecaca;
border-color: #f87171;
transform: translateY(-1px);
}
/* Anchor .hv-btn defaults to white text (see a.hv-btn rule above); override so
danger anchors keep the soft dark-red foreground. */
.hv-page-wrap a.hv-btn-danger,
.hv-page-wrap a.hv-btn-danger:hover { color: #991b1b; }
/* Help pill — yellow action button (e.g. phone help) */
.hv-help-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FBF0A0;
color: var(--hv-navy);
border: 2.5px solid #E8D870;
padding: 10px 22px;
border-radius: var(--hv-r-pill);
font-size: var(--hv-sz-sm);
font-weight: 700;
box-shadow: 0 1px 6px rgba(200,170,0,0.15);
transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
cursor: pointer;
text-decoration: none;
}
.hv-help-pill:hover {
background: #F5E870;
border-color: #D4C440;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(200,170,0,0.22);
}
/* Search button (inside search bar) */
.hv-search-btn {
height: var(--hv-input-h);
padding: 0 30px;
background: var(--hv-green);
border: none;
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-sm);
font-weight: 800;
color: white;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.hv-search-btn:hover { background: var(--hv-green-dark); }
/* ── Search bar ─────────────────────────────────────────────── */
.hv-search-section { margin-bottom: 20px; }
.hv-search-wrap {
background: var(--hv-card-bg);
border: 2px solid var(--hv-border);
border-radius: var(--hv-r);
display: flex;
align-items: center;
overflow: hidden;
box-shadow: 0 1px 6px rgba(30,60,20,0.05);
transition: border-color 0.15s, box-shadow 0.15s;
}
.hv-search-wrap:focus-within {
border-color: var(--hv-green);
box-shadow: 0 0 0 4px rgba(var(--hv-green-rgb),0.13);
}
.hv-search-icon { padding: 0 18px; color: var(--hv-text-light); flex-shrink: 0; }
.hv-search-wrap input {
flex: 1;
min-width: 0; /* a flex item won't shrink below its intrinsic width otherwise, pushing the Search button out on a phone */
height: var(--hv-input-h);
border: none;
background: transparent;
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-md);
color: var(--hv-text);
outline: none;
}
.hv-search-wrap input::placeholder { color: #A8B8A0; font-style: italic; }
@media (max-width: 640px) {
.hv-search-wrap .hv-search-icon { padding: 0 10px; }
.hv-search-wrap .hv-search-btn { padding: 0 16px; }
}
/* ── Cards ──────────────────────────────────────────────────── */
.hv-card {
background: var(--hv-card-bg);
border: 2px solid var(--hv-border);
border-radius: var(--hv-r-lg);
overflow: hidden;
box-shadow: 0 1px 8px rgba(30,60,20,0.05);
}
/* Numbered section card (with pale yellow header) */
.hv-card-header {
padding: 16px 26px;
border-bottom: 2px solid var(--hv-border);
display: flex;
align-items: center;
gap: 14px;
background: var(--hv-yellow-header);
}
.hv-card-num {
width: 36px;
height: 36px;
background: var(--hv-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--hv-sz-sm);
font-weight: 800;
color: white;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(var(--hv-green-rgb),0.30);
}
.hv-card-title {
font-size: var(--hv-sz-md);
font-weight: 800;
color: var(--hv-navy);
}
.hv-card-body { padding: 28px 26px; }
/* Card entrance animation */
.hv-card { animation: hvRiseIn 0.35s ease both; }
.hv-card:nth-child(1){animation-delay:0.00s}
.hv-card:nth-child(2){animation-delay:0.06s}
.hv-card:nth-child(3){animation-delay:0.12s}
.hv-card:nth-child(4){animation-delay:0.18s}
.hv-card:nth-child(5){animation-delay:0.24s}
.hv-card:nth-child(6){animation-delay:0.30s}
@keyframes hvRiseIn {
from { opacity:0; transform:translateY(14px); }
to { opacity:1; transform:translateY(0); }
}
/* ── Form fields ────────────────────────────────────────────── */
.hv-field-group { margin-bottom: 24px; }
.hv-field-group:last-child { margin-bottom: 0; }
.hv-field { margin-bottom: 20px; }
.hv-field:last-child { margin-bottom: 0; }
.hv-label {
display: block;
font-size: var(--hv-sz-sm);
font-weight: 700;
color: var(--hv-text-mid);
margin-bottom: 10px;
letter-spacing: 0.01em;
}
.hv-required {
color: var(--hv-error);
margin-left: 3px;
font-size: 22px;
vertical-align: middle;
line-height: 1;
}
.hv-input {
width: 100%;
height: var(--hv-input-h);
padding: 0 20px;
border: 2px solid var(--hv-border-warm);
border-radius: var(--hv-r);
background: var(--hv-white);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-md);
color: var(--hv-text);
outline: none;
appearance: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.hv-input:focus {
border-color: var(--hv-green);
box-shadow: 0 0 0 4px rgba(var(--hv-green-rgb),0.13);
background: var(--hv-warm-white);
}
.hv-input::placeholder { color: #B0C0A8; font-style: italic; }
/* Read-only field — same shape as hv-input but non-editable appearance */
.hv-static-val {
width: 100%;
min-height: var(--hv-input-h);
padding: 0 20px;
border: 2px solid var(--hv-border);
border-radius: var(--hv-r);
background: var(--hv-page-bg);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-md);
color: var(--hv-text);
display: flex;
align-items: center;
}
select.hv-input {
display: block;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234AAE2A' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
padding-right: 48px;
cursor: pointer;
box-shadow: none !important;
}
textarea.hv-input {
height: auto;
padding: 18px 20px;
min-height: 120px;
line-height: 1.55;
resize: vertical;
}
.hv-field-hint {
font-size: var(--hv-sz-xs);
color: var(--hv-text-light);
margin-top: 7px;
display: flex;
align-items: center;
gap: 6px;
}
/* Inline validation error message + invalid-field treatment.
(WCAG 3.3.1 Error Identification / 3.3.3 Error Suggestion.) The error text is
referenced from the field via aria-describedby; the red border is paired with
that text + aria-invalid, so meaning is not conveyed by colour alone (1.4.1). */
.hv-field-error {
font-size: var(--hv-sz-xs);
color: var(--hv-error);
font-weight: 600;
margin-top: 7px;
display: flex;
align-items: center;
gap: 6px;
}
.hv-input[aria-invalid="true"] { border-color: var(--hv-error); }
/* ── Checkbox rows ──────────────────────────────────────────── */
.hv-check-row {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 22px;
border: 2px solid var(--hv-border-warm);
border-radius: var(--hv-r);
cursor: pointer;
margin-bottom: 12px;
background: var(--hv-white);
transition: border-color 0.15s, background 0.15s;
}
.hv-check-row:last-child { margin-bottom: 0; }
.hv-check-row:hover {
border-color: var(--hv-green);
background: var(--hv-green-light);
}
.hv-check-row input[type="checkbox"] {
appearance: none;
width: 34px;
height: 34px;
border: 2.5px solid var(--hv-border-warm);
border-radius: 7px;
background: var(--hv-white);
flex-shrink: 0;
cursor: pointer;
transition: all 0.15s;
position: relative;
}
.hv-check-row input[type="checkbox"]:checked {
background: var(--hv-green);
border-color: var(--hv-green);
}
.hv-check-row input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 7px;
top: 8px;
width: 16px;
height: 9px;
border-left: 3px solid white;
border-bottom: 3px solid white;
transform: rotate(-45deg);
}
.hv-check-row input[type="checkbox"]:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(var(--hv-green-rgb),0.20);
}
/* ── Styled file upload ─────────────────────────────────────── */
.hv-file-upload {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.hv-file-upload .hv-file-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.hv-file-name {
font-size: var(--hv-sz-sm);
color: var(--hv-text-light);
font-style: italic;
min-width: 0;
word-break: break-all;
}
.hv-check-title { font-size: var(--hv-sz-base); font-weight: 700; color: var(--hv-text); }
.hv-check-desc { font-size: 16px; color: var(--hv-text-light); margin-top: 3px; }
/* ── Member display ─────────────────────────────────────────── */
.hv-member-row {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 22px;
background: var(--hv-green-light);
border: 2px solid var(--hv-green-mid);
border-radius: var(--hv-r);
}
.hv-member-avatar {
width: 58px;
height: 58px;
background: var(--hv-green-mid);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--hv-sz-md);
font-weight: 800;
color: var(--hv-green-deep);
flex-shrink: 0;
}
.hv-member-name { font-size: var(--hv-sz-md); font-weight: 700; color: var(--hv-navy); }
.hv-member-addr { font-size: var(--hv-sz-sm); color: var(--hv-text-mid); margin-top: 3px; }
/* ── Duration button grid ───────────────────────────────────── */
.hv-dur-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.hv-dur-btn {
padding: 18px 10px;
border: 2px solid var(--hv-border-warm);
border-radius: var(--hv-r);
background: var(--hv-white);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-base);
font-weight: 700;
color: var(--hv-text-mid);
cursor: pointer;
text-align: center;
transition: all 0.15s;
}
.hv-dur-btn:hover {
border-color: var(--hv-green);
color: var(--hv-green-dark);
background: var(--hv-green-light);
}
.hv-dur-btn.hv-selected {
background: var(--hv-green);
border-color: var(--hv-green);
color: white;
font-weight: 800;
box-shadow: 0 3px 10px rgba(var(--hv-green-rgb),0.30);
}
/* ── Flash / alert notices ──────────────────────────────────── */
.hv-flash {
display: flex;
align-items: center;
gap: 16px;
background: var(--hv-yellow-light);
border: 2px solid var(--hv-yellow-mid);
border-radius: var(--hv-r);
padding: 18px 20px;
margin-bottom: 28px;
animation: hvRiseIn 0.3s ease both;
}
.hv-flash-icon {
width: 44px;
height: 44px;
background: var(--hv-yellow-mid);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hv-flash-icon svg { width: 22px; height: 22px; stroke: var(--hv-navy); stroke-width: 3; fill: none; }
.hv-flash-text { flex: 1; font-size: var(--hv-sz-base); font-weight: 600; color: var(--hv-navy); }
.hv-flash-dismiss {
width: 36px;
height: 36px;
background: #D8D4C8;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
}
.hv-flash-dismiss:hover { background: #C4C0B4; }
.hv-flash-dismiss svg { width: 14px; height: 14px; stroke: var(--hv-text-mid); stroke-width: 2.5; fill: none; }
/* ── Info strip ─────────────────────────────────────────────── */
.hv-info-strip {
background: var(--hv-green-light);
border: 2px solid var(--hv-green-mid);
border-radius: var(--hv-r);
padding: 14px 20px;
display: flex;
align-items: center;
gap: 12px;
font-size: var(--hv-sz-sm);
color: var(--hv-green-deep);
font-weight: 600;
}
.hv-info-strip svg { stroke: var(--hv-green); flex-shrink: 0; fill: none; }
/* ── Layout helpers ─────────────────────────────────────────── */
.hv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hv-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.hv-grid-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.hv-grid-campaign { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; }
.hv-grid-addr { display: grid; grid-template-columns: 110px 1fr; gap: 14px; }
.hv-divider { height: 2px; background: var(--hv-border); margin: 24px 0; border-radius: 2px; }
.hv-sep-dashed { margin-top: 20px; padding-top: 20px; border-top: 2px dashed var(--hv-border); }
.hv-btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hv-mb-0 { margin-bottom: 0 !important; }
/* ── Focus ring ─────────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--hv-yellow-mid); outline-offset: 3px; }
/* ── Tablet / iPad portrait (form grids stack) ──────────────── */
@media (max-width: 900px) {
.hv-grid-2,
.hv-grid-3,
.hv-grid-sidebar,
.hv-grid-campaign { grid-template-columns: 1fr; }
.hv-grid-campaign .hv-campaign-aside { order: -1; }
}
/* ── Mobile (form pages) ─────────────────────────────────────── */
@media (max-width: 620px) {
.hv-top-bar,
.hv-bottom-bar { padding: 12px 18px; }
.hv-page-wrap { padding: 28px 16px 80px; }
/* Fundraising show2: the donation form shell nests _form2's own hv-cards;
flatten it so the inner boxes align with the 16px page gutter. The navy
header keeps its background and becomes a standalone section banner. */
.fc2-form-shell { border: none; background: transparent; box-shadow: none; overflow: visible; }
.fc2-form-shell > .hv-card-header { border-radius: var(--hv-r-lg); margin-bottom: 16px; }
.fc2-form-shell > .hv-card-body { padding: 0; }
.hv-card-body,
.hv-submit-area { padding: 22px 18px; }
.hv-card-header { padding: 16px 18px; }
.hv-grid-addr { grid-template-columns: 1fr; }
.hv-dur-grid { grid-template-columns: 1fr 1fr; }
.hv-btn-row { flex-direction: column; }
.hv-btn-row .hv-btn { width: 100%; }
.hv-logo-img { height: 40px; }
}
/* ── Village Talk (posts/index) groups + interactions panel ──── */
/* Section heading shared by the desktop sidebar cards and the mobile panel. */
.hv-posts-side-title {
font-size: var(--hv-sz-xs);
font-weight: 600;
color: var(--hv-text-mid);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .04em;
}
/* Mobile collapsible panel: hidden on desktop, shown ≤620px (below). */
.hv-posts-mobile-panel { display: none; margin-bottom: 16px; }
.hv-posts-mobile-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
font-size: var(--hv-sz-sm);
font-weight: 600;
color: var(--hv-text-dark);
}
.hv-posts-mobile-summary::-webkit-details-marker { display: none; }
.hv-posts-mobile-caret { transition: transform .15s ease; }
.hv-posts-mobile-panel[open] .hv-posts-mobile-caret { transform: rotate(180deg); }
.hv-posts-mobile-body { padding: 0 18px 16px; }
/* Flat sections inside the mobile panel (no nested cards), divided by a rule. */
.hv-posts-side-section { padding: 14px 0; border-top: 1px solid var(--hv-border); }
.hv-posts-side-section:first-child { padding-top: 4px; border-top: none; }
@media (max-width: 620px) {
.hv-posts-sidebar { display: none; }
.hv-posts-mobile-panel { display: block; }
}
/* ── Blog post (blog_posts/show2) archive ────────────────────── */
/* Desktop shows the .hv-blog-sidebar column; ≤620px it's hidden and the archive
collapses into .hv-blog-mobile-panel above the post. Reuses the shared
.hv-posts-mobile-summary/-body/-caret styling above. */
.hv-blog-mobile-panel { display: none; margin-bottom: 16px; }
.hv-blog-mobile-panel[open] .hv-posts-mobile-caret { transform: rotate(180deg); }
@media (max-width: 620px) {
.hv-blog-sidebar { display: none; }
.hv-blog-mobile-panel { display: block; }
}
/* ── Detail / Show page ──────────────────────────────────────── */
/* Summary & trip table cards */
.hv-table-card {
background: var(--hv-card-bg);
border: 2px solid var(--hv-border);
border-radius: var(--hv-r-lg);
overflow: hidden;
box-shadow: 0 1px 8px rgba(30,60,20,0.05);
margin-bottom: 22px;
}
.hv-col-headers {
display: grid;
background: var(--hv-green-light);
border-bottom: 2px solid var(--hv-border);
padding: 12px 22px;
}
.hv-col-headers.summary-cols {
grid-template-columns: 160px 120px 120px 100px 1fr 180px 180px;
}
.hv-col-headers.trip-cols {
grid-template-columns: 1fr 1fr 200px 200px 120px;
}
.hv-col-header {
font-size: var(--hv-sz-xs);
font-weight: 800;
color: var(--hv-green-deep);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.hv-data-row {
display: grid;
padding: 18px 22px;
border-bottom: 2px solid var(--hv-border);
align-items: center;
}
.hv-data-row:last-child { border-bottom: none; }
.hv-data-row.summary-cols {
grid-template-columns: 160px 120px 120px 100px 1fr 180px 180px;
}
.hv-data-row.trip-cols {
grid-template-columns: 1fr 1fr 200px 200px 120px;
}
.hv-cell {
font-size: var(--hv-sz-sm);
color: var(--hv-text);
padding-right: 12px;
line-height: 1.4;
}
.hv-cell-date { font-weight: 800; color: var(--hv-navy); }
.hv-cell-status { font-weight: 700; color: var(--hv-green-dark); }
.hv-member-link {
font-weight: 700;
color: var(--hv-green-dark);
text-decoration: underline;
}
.hv-badge-important {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--hv-yellow-active);
border: 2px solid var(--hv-yellow-border);
color: var(--hv-navy);
font-size: 12px;
font-weight: 800;
padding: 2px 10px;
border-radius: var(--hv-r-pill);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 4px;
}
/* Trip actions footer */
.hv-trip-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 22px;
border-top: 2px solid var(--hv-border);
background: var(--hv-yellow-header);
}
/* Two-column detail layout */
.hv-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
align-items: start;
}
/* Info card */
.hv-info-card {
background: var(--hv-card-bg);
border: 2px solid var(--hv-border);
border-radius: var(--hv-r-lg);
overflow: hidden;
box-shadow: 0 1px 8px rgba(30,60,20,0.05);
margin-bottom: 18px;
}
/* Info rows */
.hv-info-row {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--hv-border);
font-size: var(--hv-sz-sm);
line-height: 1.5;
}
.hv-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.hv-info-row:first-child { padding-top: 0; }
.hv-info-label {
font-weight: 700;
color: var(--hv-text-mid);
flex-shrink: 0;
min-width: 140px;
}
.hv-info-value { color: var(--hv-text); flex: 1; }
.hv-info-link {
color: var(--hv-green-dark);
font-weight: 700;
text-decoration: underline;
}
/* Collapsible sections */
.hv-collapsible {
background: var(--hv-card-bg);
border: 2px solid var(--hv-border);
border-radius: var(--hv-r);
margin-bottom: 8px;
overflow: hidden;
}
.hv-collapsible-trigger {
width: 100%;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
background: none;
border: none;
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-sm);
font-weight: 700;
color: var(--hv-navy);
cursor: pointer;
text-align: left;
transition: background 0.15s;
}
.hv-collapsible-trigger:hover { background: var(--hv-green-light); }
.hv-collapsible-trigger svg {
width: 18px;
height: 18px;
stroke: var(--hv-text-light);
fill: none;
transition: transform 0.2s;
flex-shrink: 0;
}
.hv-collapsible.hv-open .hv-collapsible-trigger svg { transform: rotate(180deg); }
.hv-collapsible-body {
display: none;
padding: 16px 20px;
border-top: 2px solid var(--hv-border);
font-size: var(--hv-sz-sm);
color: var(--hv-text-mid);
}
.hv-collapsible.hv-open .hv-collapsible-body { display: block; }
/* Volunteer CTA button */
.hv-btn-volunteer {
width: 100%;
height: 66px;
background: var(--hv-green);
color: white;
border: none;
border-radius: var(--hv-r);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-md);
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 16px rgba(var(--hv-green-rgb),0.32);
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
text-decoration: none;
margin-bottom: 18px;
}
.hv-btn-volunteer:hover {
background: var(--hv-green-dark);
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(var(--hv-green-rgb),0.42);
}
/* Admin search inputs */
.hv-search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.hv-search-input {
width: 100%;
height: 48px;
padding: 0 16px;
border: 2px solid var(--hv-border-warm);
border-radius: var(--hv-r);
background: var(--hv-white);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-sm);
color: var(--hv-text);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.hv-search-input:focus {
border-color: var(--hv-green);
box-shadow: 0 0 0 3px rgba(var(--hv-green-rgb),0.13);
}
.hv-search-input::placeholder { color: #B0C0A8; font-style: italic; }
.hv-btn-search {
height: 48px;
padding: 0 24px;
background: var(--hv-green);
color: white;
border: none;
border-radius: var(--hv-r);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-sm);
font-weight: 800;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.hv-btn-search:hover { background: var(--hv-green-dark); }
.hv-text-link {
font-size: var(--hv-sz-sm);
color: var(--hv-green-dark);
text-decoration: underline;
display: block;
margin-bottom: 6px;
font-weight: 600;
}
/* Page title row (detail variant — space-between) */
.hv-page-title-row-detail {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
flex-wrap: wrap;
gap: 16px;
}
.hv-page-title-left { display: flex; align-items: center; gap: 18px; }
/* ── Detail page responsive ──────────────────────────────────── */
@media (max-width: 860px) {
.hv-detail-grid { grid-template-columns: 1fr; }
.hv-col-headers.summary-cols,
.hv-data-row.summary-cols {
grid-template-columns: 100px 80px 80px 70px 1fr 130px 110px;
font-size:var(--hv-sz-sm);
}
}
@media (max-width: 620px) {
.hv-col-headers.summary-cols,
.hv-data-row.summary-cols { display: none; }
.hv-col-headers.trip-cols,
.hv-data-row.trip-cols { grid-template-columns: 1fr 1fr; }
.hv-data-row.trip-cols .hv-cell:nth-child(3),
.hv-data-row.trip-cols .hv-cell:nth-child(4) { display: none; }
}
/* ── List of Requests (index2) ───────────────────────────────── */
/* Tab strip */
.hv-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--hv-border);
margin-bottom: 0;
}
.hv-tab {
display: inline-block;
padding: 14px 32px;
font-size: var(--hv-sz-sm);
font-weight: 700;
color: var(--hv-text-light);
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: color 0.15s, border-color 0.15s;
text-decoration: none;
}
.hv-tab:hover { color: var(--hv-green); }
.hv-tab.active { color: var(--hv-navy); border-bottom-color: var(--hv-navy); }
/* Filter header row */
.hv-table-filters {
background: var(--hv-yellow-header);
border-bottom: 2px solid var(--hv-border);
padding: 14px 22px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.hv-filter-label {
font-size: var(--hv-sz-xs);
font-weight: 700;
color: var(--hv-text-light);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-right: 4px;
}
.hv-filter-select {
height: 40px;
padding: 0 36px 0 14px;
border: 2px solid var(--hv-border-warm);
border-radius: var(--hv-r);
background: var(--hv-white);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-sm);
font-weight: 600;
color: var(--hv-text);
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234AAE2A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
transition: border-color 0.15s;
}
.hv-filter-select:focus {
border-color: var(--hv-green);
box-shadow: 0 0 0 3px rgba(var(--hv-green-rgb),0.13);
}
/* Index column headers — 8-column grid */
.hv-col-headers.index-cols {
grid-template-columns: 130px 80px 80px 100px 160px 200px 1fr 80px;
padding: 12px 22px;
border-bottom: 2px solid var(--hv-border);
column-gap: 16px;
}
/* Request rows */
.hv-req-row {
display: grid;
padding: 20px 22px;
border-bottom: 2px solid var(--hv-border);
align-items: start;
transition: background 0.12s;
column-gap: 8px;
}
.hv-req-row.index-cols {
grid-template-columns: 130px 80px 80px 100px 160px 200px 1fr 80px;
}
.hv-req-row:last-child { border-bottom: none; }
.hv-req-row:hover { background: var(--hv-green-light); }
.hv-req-row--overdue { background: #fff0f0; }
.hv-req-row--overdue:hover { background: #ffd6d6; }
.hv-req-row--new { background: #e8f4fd; }
.hv-req-row--new:hover { background: #c8e6f9; }
/* ── Multiple-selection mode (index2) ── */
.hv-ms-checkbox { display: none; align-items: center; justify-content: center; }
.hv-ms-bar {
display: none;
align-items: center;
padding: 10px 22px;
background: var(--hv-navy-light);
border-bottom: 2px solid var(--hv-border);
gap: 12px;
}
#index2-table-card.hv-ms-active .hv-ms-checkbox { display: flex; }
#index2-table-card.hv-ms-active .hv-ms-bar { display: flex; }
#index2-table-card.hv-ms-active .hv-col-headers.index-cols,
#index2-table-card.hv-ms-active .hv-req-row.index-cols {
grid-template-columns: 40px 130px 80px 80px 100px 160px 200px 1fr 80px;
}
.hv-req-date {
font-size: var(--hv-sz-sm);
font-weight: 800;
color: var(--hv-navy);
line-height: 1.4;
}
.hv-req-date-sub {
font-size: var(--hv-sz-xs);
font-weight: 600;
color: var(--hv-text-light);
margin-top: 2px;
}
.hv-req-time {
font-size: var(--hv-sz-sm);
color: var(--hv-text-mid);
font-weight: 600;
padding-top: 2px;
text-align: center;
}
.hv-req-status {
font-size: var(--hv-sz-sm);
font-weight: 700;
padding-top: 2px;
text-align: center;
}
.hv-status-open { color: var(--hv-green-dark); }
.hv-status-matched { color: var(--hv-navy); }
.hv-status-closed { color: var(--hv-text-light); }
.hv-req-member {
font-size: var(--hv-sz-sm);
font-weight: 700;
color: var(--hv-green-dark);
text-decoration: underline;
cursor: pointer;
line-height: 1.4;
text-align: center;
}
.hv-req-village {
font-size: var(--hv-sz-xs);
color: var(--hv-text-light);
font-weight: 600;
text-align: center;
}
.hv-req-service {
font-size: var(--hv-sz-sm);
color: var(--hv-text-mid);
font-weight: 600;
padding-top: 2px;
line-height: 1.4;
text-align: center;
}
.hv-req-purpose {
font-size: var(--hv-sz-sm);
color: var(--hv-text);
padding-top: 2px;
line-height: 1.5;
}
/* View button */
.hv-btn-view {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 44px;
padding: 0 22px;
background: var(--hv-green);
color: white;
border: none;
border-radius: var(--hv-r);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-sm);
font-weight: 800;
cursor: pointer;
transition: background 0.15s, transform 0.12s;
box-shadow: 0 2px 8px rgba(var(--hv-green-rgb),0.25);
text-decoration: none;
white-space: nowrap;
}
.hv-btn-view:hover {
background: var(--hv-green-dark);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--hv-green-rgb),0.35);
}
/* index2 service-requests table: compact View button so its column can be
narrower, giving the Purpose column more width. Scoped to rows in this table
so the standalone .hv-btn-view used elsewhere keeps its full size. */
.hv-req-row .hv-btn-view {
height: 36px;
padding: 0 16px;
font-weight: 400;
}
/* Pagination wrapper */
.hv-pagination {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 44px;
margin-top: 20px;
}
/* Style will_paginate output to look like HV buttons */
.hv-pagination .pagination {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.hv-pagination .pagination a,
.hv-pagination .pagination span.disabled,
.hv-pagination .pagination em.current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 52px;
padding: 0 16px;
border: 2px solid var(--hv-border-warm);
border-radius: var(--hv-r);
background: var(--hv-card-bg);
font-family: 'Nunito', sans-serif;
font-size: var(--hv-sz-sm);
font-weight: 700;
color: var(--hv-text-mid);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: all 0.15s;
}
.hv-pagination .pagination a:hover {
border-color: var(--hv-green);
color: var(--hv-green-dark);
background: var(--hv-green-light);
}
.hv-pagination .pagination em.current {
background: var(--hv-navy);
border-color: var(--hv-navy);
color: white;
box-shadow: 0 2px 8px rgba(26,42,108,0.25);
font-style: normal;
}
.hv-pagination .pagination span.disabled {
opacity: 0.45;
cursor: not-allowed;
}
.hv-pagination .pagination .previous_page,
.hv-pagination .pagination .next_page {
padding: 0 22px;
min-width: auto;
}
/* Search service requests section (index bottom) */
.hv-search-section-wrap {
background: var(--hv-card-bg);
border: 2px solid var(--hv-border);
border-radius: var(--hv-r-lg);
overflow: hidden;
box-shadow: 0 1px 8px rgba(30,60,20,0.05);
}
.hv-search-section-header {
background: var(--hv-yellow-header);
border-bottom: 2px solid var(--hv-border);
padding: 18px 28px;
display: flex;
align-items: center;
gap: 14px;
}
.hv-search-section-icon {
width: 38px;
height: 38px;
background: var(--hv-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hv-search-section-icon svg {
width: 18px;
height: 18px;
stroke: white;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
}
.hv-search-section-title {
font-size: var(--hv-sz-md);
font-weight: 800;
color: var(--hv-navy);
}
.hv-search-section-body { padding: 28px; }
.hv-search-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 14px;
align-items: end;
}
.hv-search-field { display: flex; flex-direction: column; gap: 8px; }
/* Filter selects that duplicate the column-header filters — hidden on desktop
(headers do the job there) but kept in the DOM so the header→form JS sync
still finds them. Revealed at the ≤900px breakpoint where headers disappear. */
.hv-search-grid .hv-mobile-only { display: none; }
.hv-search-field-label {
font-size: var(--hv-sz-xs);
font-weight: 700;
color: var(--hv-text-mid);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Index responsive */
/* Base 8-col grid is ~982px min and .hv-table-card clips overflow, so squeeze
already from 1100px down; below 900 (iPad portrait) switch to card mode. */
@media (max-width: 1100px) {
.hv-col-headers.index-cols,
.hv-req-row.index-cols {
grid-template-columns: 100px 70px 70px 80px 140px 160px 1fr 100px;
}
}
@media (max-width: 900px) {
.hv-col-headers.index-cols { display: none; }
.hv-req-row.index-cols {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.hv-search-grid { grid-template-columns: 1fr 1fr; }
/* Column-header status/service-type filters are hidden on mobile, so the
equivalent selects inside the search form take over there. */
.hv-search-grid .hv-mobile-only { display: flex; }
}
@media (max-width: 620px) {
.hv-search-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════
EVENT SHOW PAGE (ev-*)
════════════════════════════════════════════════════════════ */
/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Navy Hero ──────────────────────────────────────────── */
/* Draft (not-yet-validated) event banner — V2 counterpart of V1's pink
when/where box. Shown on show2 to admins/organizer only.
.hv-draft-banner is the same look for other draftable records (blog posts). */
.ev-draft-banner,
.hv-draft-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #FFB6C1;
color: #7a1f33;
padding: 12px 24px;
font-size: var(--hv-sz-sm);
font-weight: 700;
text-align: center;
}
.ev-draft-banner svg,
.hv-draft-banner svg {
width: 18px;
height: 18px;
stroke: #7a1f33;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.ev-hero {
position: relative;
background: var(--hv-navy-deep);
overflow: hidden;
}
.ev-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.ev-hero::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5px;
background: linear-gradient(180deg, var(--hv-green) 0%, rgba(var(--hv-green-rgb),0.2) 100%);
}
.ev-hero-glow {
position: absolute;
top: -80px; left: -80px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(var(--hv-green-rgb),0.12) 0%, transparent 65%);
pointer-events: none;
}
.ev-hero-glow2 {
position: absolute;
bottom: -100px; right: -60px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(26,42,108,0.6) 0%, transparent 70%);
pointer-events: none;
}
.ev-hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 26px 48px 52px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.ev-hero-left { flex: 1; min-width: 0; }
.ev-hero-right { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ev-breadcrumb {
display: flex; align-items: center; justify-content: flex-end; gap: 8px;
font-size: var(--hv-sz-xs); color: rgba(255,255,255,0.45);
animation: slideDown 0.5s ease both;
}
.ev-breadcrumb a { color: rgba(255,255,255,0.60) !important; text-decoration: underline; font-weight: 600; transition: color 0.15s; }
.ev-breadcrumb a:hover { color: var(--hv-green-mid) !important; }
.ev-category-badge {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(var(--hv-green-rgb),0.15);
border: 1.5px solid rgba(var(--hv-green-rgb),0.40);
color: var(--hv-green-mid);
font-size:var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
padding: 5px 14px; border-radius: var(--hv-r-pill);
margin-bottom: 14px; width: fit-content;
animation: fadeUp 0.5s 0.05s ease both;
}
.ev-badge-dot { width: 6px; height: 6px; background: var(--hv-green); border-radius: 50%; flex-shrink: 0; }
.ev-hero-title {
font-family: 'Nunito', sans-serif;
font-size: clamp(36px, 4.5vw, 62px);
font-weight: 900; color: #fff;
line-height: 1.05; letter-spacing: -0.01em;
margin-bottom: 28px;
animation: fadeUp 0.55s 0.12s ease both;
}
.ev-hero-pills { display: flex; flex-wrap: wrap; gap: 10px; animation: fadeUp 0.55s 0.22s ease both; }
.ev-pill {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.08);
border: 1.5px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.88);
font-size: var(--hv-sz-xs); font-weight: 600;
padding: 7px 15px; border-radius: var(--hv-r-pill);
}
.ev-pill svg { width: 14px; height: 14px; stroke: var(--hv-green-mid); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ev-pill-free { background: rgba(var(--hv-green-rgb),0.18); border-color: rgba(var(--hv-green-rgb),0.40); color: var(--hv-green-mid); font-weight: 800; }
.ev-hero-img-wrap {
flex-shrink: 0; width: 500px; max-width: 100%;
border-radius: var(--hv-r-lg); overflow: hidden;
border: 3px solid rgba(255,255,255,0.12);
box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);
animation: fadeUp 0.6s 0.18s ease both;
position: relative; z-index: 3;
}
.ev-hero-img-wrap img { width: 100%; height: 300px; object-fit: cover; object-position: center 60%; display: block; }
/* ── Body layout ────────────────────────────────────────── */
.ev-body {
max-width: 1200px; margin: 0 auto;
padding: 60px 48px 100px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 32px; align-items: start;
}
/* ── Sidebar ────────────────────────────────────────────── */
.ev-sidebar { position: sticky; top: 148px; display: flex; flex-direction: column; gap: 14px; }
.ev-info-card {
background: var(--hv-white); border: 2px solid var(--hv-border);
border-radius: var(--hv-r-lg); box-shadow: 0 4px 24px rgba(30,60,20,0.09);
overflow: hidden; animation: fadeUp 0.5s 0.1s ease both;
}
.ev-info-card-header { background: var(--hv-navy); padding: 16px 22px; }
.ev-info-card-header-label { font-size: var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hv-green-mid); margin-bottom: 3px; }
.ev-info-card-header-title { font-family: 'Nunito', sans-serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; }
.ev-info-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--hv-border); transition: background 0.12s; }
.ev-info-row:last-child { border-bottom: none; }
.ev-info-row:hover { background: var(--hv-green-light); }
.ev-info-icon { width: 34px; height: 34px; background: var(--hv-green-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.ev-info-icon svg { width: 18px; height: 18px; stroke: var(--hv-green-dark); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ev-info-content { flex: 1; min-width: 0; }
.ev-info-label { font-size: var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--hv-green-dark); margin-bottom: 3px; }
.ev-info-primary { font-size: var(--hv-sz-base); font-weight: 700; color: var(--hv-text); line-height: 1.35; }
.ev-info-secondary { font-size: var(--hv-sz-sm); color: var(--hv-text-light); margin-top: 2px; line-height: 1.4; }
.ev-cal-links { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.ev-cal-link { font-size: var(--hv-sz-xs); color: var(--hv-green-dark) !important; text-decoration: underline; font-weight: 600; transition: color 0.12s; }
.ev-cal-link:hover { color: var(--hv-green) !important; }
/* Add-to-calendar dropdown */
.ev-cal-dropdown { position: relative; display: inline-block; margin-top: 8px; }
.ev-cal-btn { display: inline-flex; align-items: center; gap: 7px; font-size: var(--hv-sz-xs); font-weight: 700; color: var(--hv-green-dark); background: var(--hv-green-light); border: 1.5px solid var(--hv-green-mid); border-radius: var(--hv-r-pill); padding: 6px 13px; cursor: pointer; white-space: nowrap; transition: background 0.15s; font-family: inherit; }
.ev-cal-btn svg { width: 12px; height: 12px; stroke: var(--hv-green-dark); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.ev-cal-btn:hover, .ev-cal-btn.open { background: var(--hv-green-mid); }
.ev-cal-chevron { transition: transform 0.2s; flex-shrink: 0; }
.ev-cal-btn.open .ev-cal-chevron { transform: rotate(180deg); }
.ev-cal-menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--hv-white); border: 1.5px solid var(--hv-border); border-radius: var(--hv-r-lg); box-shadow: 0 8px 24px rgba(30,60,20,0.14); min-width: 215px; z-index: 60; overflow: hidden; display: none; }
.ev-cal-menu.open { display: block; animation: slideDown 0.15s ease both; }
.ev-cal-option { display: flex; align-items: center; gap: 10px; padding: 10px 15px; font-size: var(--hv-sz-sm); font-weight: 600; color: var(--hv-text); text-decoration: none; transition: background 0.12s; border-bottom: 1px solid var(--hv-border); }
.ev-cal-option:last-child { border-bottom: none; }
.ev-cal-option:hover { background: var(--hv-green-light); color: var(--hv-green-deep) !important; }
.ev-cal-option-icon { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ev-capacity-bar { margin-top: 7px; background: var(--hv-border); border-radius: 99px; height: 5px; overflow: hidden; }
.ev-capacity-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--hv-green), var(--hv-green-dark)); border-radius: 99px; transition: width 1.2s cubic-bezier(0.25,1,0.5,1); }
.ev-capacity-label { display: flex; justify-content: space-between; font-size: var(--hv-sz-xs); color: var(--hv-text-light); margin-top: 4px; font-weight: 600; }
.ev-price-badge { display: inline-block; background: var(--hv-green-light); border: 2px solid var(--hv-green-mid); color: var(--hv-green-deep); font-size: 17px; font-weight: 900; padding: 3px 16px; border-radius: var(--hv-r-pill); }
.ev-btn-register {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 17px 24px;
background: var(--hv-green); color: #fff !important;
font-family: 'Nunito', sans-serif;
font-size: 15px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
border: none; border-radius: var(--hv-r-lg); cursor: pointer;
box-shadow: 0 6px 22px rgba(var(--hv-green-rgb),0.35);
transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
animation: fadeUp 0.5s 0.18s ease both;
text-decoration: none;
}
.ev-btn-register:hover { background: var(--hv-green-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--hv-green-rgb),0.45); color: #fff !important; }
.ev-btn-register svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ev-share-card { background: var(--hv-white); border: 2px solid var(--hv-border); border-radius: var(--hv-r-lg); padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 12px rgba(30,60,20,0.06); animation: fadeUp 0.5s 0.24s ease both; }
.ev-share-label { font-size: var(--hv-sz-xs); font-weight: 700; color: var(--hv-text-mid); }
.ev-fb-btn { display: inline-flex; align-items: center; gap: 7px; background: #1877F2; color: #fff !important; font-size: var(--hv-sz-xs); font-weight: 700; padding: 8px 15px; border-radius: 8px; transition: background 0.15s; }
.ev-fb-btn:hover { background: #145DBF; color: #fff !important; }
.ev-fb-btn svg { width: 14px; height: 14px; fill: white; stroke: none; }
/* Status strips */
.ev-registered-strip {
background: var(--hv-green-light); border: 2px solid var(--hv-green-mid);
border-radius: var(--hv-r-lg); padding: 16px 22px;
font-size: 15px; font-weight: 700; color: var(--hv-green-deep);
display: flex; align-items: center; gap: 10px;
}
.ev-waiting-strip {
background: var(--hv-yellow-active); border: 2px solid var(--hv-yellow-border);
border-radius: var(--hv-r-lg); padding: 16px 22px;
font-size: 15px; font-weight: 700; color: var(--hv-navy);
display: flex; align-items: center; gap: 10px;
}
/* ── Main column ────────────────────────────────────────── */
.ev-main { display: flex; flex-direction: column; gap: 24px; }
.ev-card { background: var(--hv-white); border: 2px solid var(--hv-border); border-radius: var(--hv-r-lg); box-shadow: 0 2px 16px rgba(30,60,20,0.07); overflow: hidden; animation: fadeUp 0.5s ease both; }
.ev-card:nth-child(1) { animation-delay: 0.15s; }
.ev-card:nth-child(2) { animation-delay: 0.22s; }
.ev-card:nth-child(3) { animation-delay: 0.29s; }
.ev-card-header { padding: 18px 28px; border-bottom: 2px solid var(--hv-border); background: var(--hv-yellow-header); display: flex; align-items: center; gap: 12px; }
.ev-card-header-icon { width: 32px; height: 32px; background: var(--hv-green); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(var(--hv-green-rgb),0.28); }
.ev-card-header-icon svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ev-card-title { font-size: var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hv-navy); }
.ev-card-body { padding: 28px; }
.ev-description { font-size: var(--hv-sz-base); color: var(--hv-text); line-height: 1.80; }
.ev-description p { margin-bottom: 20px; }
.ev-description p:last-child { margin-bottom: 0; }
/* ── Comments ───────────────────────────────────────────── */
.ev-comment { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--hv-border); }
.ev-comment:last-of-type { border-bottom: none; padding-bottom: 0; }
.ev-comment:first-of-type { padding-top: 0; }
.ev-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--hv-navy) 0%, var(--hv-green-dark) 100%); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(26,42,108,0.22); }
.ev-comment-body { flex: 1; }
.ev-comment-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ev-comment-author { font-size: var(--hv-sz-sm); font-weight: 800; color: var(--hv-navy); }
.ev-comment-time { font-size: var(--hv-sz-xs); color: var(--hv-text-light); font-weight: 600; }
.ev-comment-actions { margin-left: auto; display: flex; gap: 10px; }
.ev-comment-action { font-size: var(--hv-sz-xs); color: var(--hv-text-light); text-decoration: underline; font-weight: 600; cursor: pointer; transition: color 0.12s; }
.ev-comment-action:hover { color: var(--hv-error); }
.ev-comment-text { font-size: var(--hv-sz-sm); color: var(--hv-text-mid); line-height: 1.6; }
/* ── Comment composer ───────────────────────────────────── */
.ev-composer { margin-top: 24px; }
.ev-composer-label { font-size: var(--hv-sz-xs); font-weight: 700; color: var(--hv-text-mid); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.07em; }
.ev-composer-wrap { border: 2px solid var(--hv-border-warm); border-radius: var(--hv-r-lg); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.ev-composer-wrap:focus-within { border-color: var(--hv-green); box-shadow: 0 0 0 4px rgba(var(--hv-green-rgb),0.12); }
.ev-composer-textarea { width: 100%; min-height: 110px; padding: 14px 16px; border: none; background: #fff; font-family: 'Nunito', sans-serif; font-size: var(--hv-sz-sm); color: var(--hv-text); resize: vertical; outline: none; line-height: 1.6; }
.ev-composer-textarea::placeholder { color: #b0c0a8; font-style: italic; }
.ev-composer-footer { background: #f9faf7; border-top: 1px solid var(--hv-border); padding: 10px 14px; display: flex; justify-content: flex-end; }
.ev-btn-post { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 22px; background: var(--hv-green); color: #fff; font-family: 'Nunito', sans-serif; font-size: var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: none; border-radius: var(--hv-r); cursor: pointer; box-shadow: 0 2px 10px rgba(var(--hv-green-rgb),0.28); transition: background 0.15s, transform 0.12s; }
.ev-btn-post:hover { background: var(--hv-green-dark); transform: translateY(-1px); }
.ev-btn-post svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* ── Attendees list ─────────────────────────────────────── */
.ev-attendees-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ev-attendee-chip { background: var(--hv-green-light); border: 1.5px solid var(--hv-green-mid); border-radius: var(--hv-r-pill); padding: 5px 14px; font-size: var(--hv-sz-xs); font-weight: 600; color: var(--hv-green-deep); text-decoration: none; }
.ev-attendee-chip:hover { background: var(--hv-green-mid); color: var(--hv-green-deep) !important; }
/* ── Admin panel ────────────────────────────────────────── */
.ev-admin-panel { background: var(--hv-white); border: 2px solid var(--hv-border); border-radius: var(--hv-r-lg); box-shadow: 0 2px 16px rgba(30,60,20,0.07); overflow: hidden; animation: fadeUp 0.5s 0.34s ease both; }
.ev-admin-header { background: var(--hv-yellow-header); border-bottom: 2px solid var(--hv-border); padding: 13px 28px; display: flex; align-items: center; }
.ev-admin-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--hv-yellow-active); border: 1.5px solid var(--hv-yellow-border); color: var(--hv-navy); font-size:var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--hv-r-pill); }
.ev-admin-body { padding: 20px 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.ev-btn-admin { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; background: var(--hv-navy); color: #fff !important; font-family: 'Nunito', sans-serif; font-size:var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; border: none; border-radius: var(--hv-r); cursor: pointer; box-shadow: 0 2px 8px rgba(26,42,108,0.18); transition: background 0.15s, transform 0.12s; text-decoration: none; }
.ev-btn-admin:hover { background: var(--hv-navy-deep); transform: translateY(-1px); color: #fff !important; }
.ev-btn-admin svg { width: 13px; height: 13px; stroke: rgba(255,255,255,0.65); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev-btn-admin-danger { background: var(--hv-error); box-shadow: 0 2px 8px rgba(192,48,32,0.2); }
.ev-btn-admin-danger:hover { background: #a02010; color: #fff !important; }
/* ── Clone section ──────────────────────────────────────── */
.ev-clone-section { background: var(--hv-yellow-header); border: 2px solid var(--hv-border); border-radius: var(--hv-r-lg); overflow: hidden; }
.ev-clone-toggle { padding: 14px 22px; font-size: var(--hv-sz-xs); font-weight: 700; color: var(--hv-navy); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.ev-clone-toggle:hover { background: var(--hv-yellow-mid); }
.ev-clone-body { padding: 20px 22px; border-top: 2px solid var(--hv-border); background: white; }
/* ── Event responsive ───────────────────────────────────── */
@media (max-width: 960px) {
.ev-hero-content { flex-direction: column; align-items: flex-start; padding: 40px 28px 44px; gap: 32px; }
.ev-hero-right { width: 100%; }
.ev-hero-img-wrap { width: 100%; }
.ev-hero-img-wrap img { height: 220px; }
.ev-body { grid-template-columns: 1fr; padding: 32px 28px 80px; }
.ev-sidebar { position: static; }
}
@media (max-width: 620px) {
.ev-hero-content { padding: 32px 20px 36px; }
.ev-hero-title { font-size: 34px; }
.ev-hero-pills { gap: 8px; }
.ev-pill { font-size:var(--hv-sz-xs); padding: 6px 12px; }
.ev-body { padding: 24px 20px 60px; }
.ev-admin-body { flex-direction: column; }
.ev-btn-admin { width: 100%; justify-content: center; }
.ev-card-body { padding: 20px; }
.ev-card-header { padding: 14px 20px; }
.ev-info-card-header { padding: 14px 18px; }
.ev-info-row { padding: 12px 18px; gap: 10px; }
.ev-comment-actions { margin-left: 0; width: 100%; }
.ev-comment-header { row-gap: 4px; }
}
@media (max-width: 400px) {
.ev-hero-title { font-size: 28px; }
.ev-card-body { padding: 14px; }
.ev-card-header { padding: 12px 14px; }
.ev-info-row { padding: 10px 14px; }
.ev-btn-register { font-size:var(--hv-sz-xs); padding: 14px 18px; }
}
/* ════════════════════════════════════════════════════════════
CANCEL REGISTRATION PAGE (event_participations/confirm_cancel)
Event page hero (no image) above a single centred card.
════════════════════════════════════════════════════════════ */
.ev-hero-compact .ev-hero-content { padding: 26px 48px 40px; align-items: flex-start; }
.ev-hero-compact .ev-hero-title { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 22px; }
.ev-back-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: var(--hv-sz-sm); font-weight: 700; color: rgba(255,255,255,0.75) !important; text-decoration: underline; white-space: nowrap; }
.ev-back-link:hover { color: var(--hv-green-mid) !important; }
.ev-back-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ev-single { max-width: 760px; margin: 0 auto; padding: 48px 48px 100px; }
.ev-notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--hv-r); border: 1.5px solid var(--hv-border); background: #f9faf7; font-size: var(--hv-sz-sm); color: var(--hv-text); line-height: 1.55; }
.ev-notice + .ev-notice, .ev-notice + .ev-cancel-section, .ev-cancel-section + .ev-notice, .ev-cancel-section + .ev-cancel-section { margin-top: 20px; }
.ev-notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; stroke: var(--hv-text-mid); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ev-notice-warn { background: #fffbeb; border-color: #fde68a; }
.ev-notice-warn svg { stroke: #b45309; }
.ev-cancel-section .ev-info-label { margin-bottom: 8px; }
.ev-cancel-section p { margin: 0; font-size: var(--hv-sz-sm); color: var(--hv-text-mid); line-height: 1.55; }
/* Footer row: buttons sit on their own band, clear of the notices above */
.ev-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px 28px; border-top: 2px solid var(--hv-border); background: #f9faf7; }
.ev-card-actions form { margin: 0; }
.ev-card-actions .hv-btn { height: auto; min-height: 50px; padding: 12px 22px; font-size: var(--hv-sz-sm); white-space: normal; text-align: center; line-height: 1.25; }
.ev-card-actions a.hv-btn-ghost { color: var(--hv-text-mid); background: #fff; }
.ev-card-actions a.hv-btn-ghost:hover { color: var(--hv-text); }
@media (max-width: 960px) {
.ev-hero-compact .ev-hero-content { padding: 32px 28px 36px; gap: 18px; }
.ev-hero-compact .ev-hero-right { order: -1; }
.ev-single { padding: 32px 28px 80px; }
}
@media (max-width: 620px) {
.ev-hero-compact .ev-hero-content { padding: 24px 20px 30px; }
.ev-hero-compact .ev-hero-title { font-size: 30px; }
.ev-single { padding: 24px 20px 60px; }
.ev-card-actions { padding: 16px 20px; flex-direction: column; align-items: stretch; }
.ev-card-actions form, .ev-card-actions .hv-btn { width: 100%; }
}
@media (max-width: 400px) {
.ev-hero-compact .ev-hero-title { font-size: 26px; }
.ev-single { padding: 16px 16px 48px; }
.ev-card-actions { padding: 14px; }
}
/* ════════════════════════════════════════════════════════════
EVENT LIST PAGE (index_list2)
════════════════════════════════════════════════════════════ */
/* Hero — single-column override for list page */
.ev-list-hero-content { flex-direction: column; align-items: flex-start; }
/* Page badge */
.ev-page-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(var(--hv-green-rgb),0.15); border: 1.5px solid rgba(var(--hv-green-rgb),0.40); color: var(--hv-green-mid); font-size:var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--hv-r-pill); margin-bottom: 14px; width: fit-content; }
/* Hero controls row */
.ev-hero-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 24px; width: 100%; }
/* View toggle */
.ev-view-toggle { display: flex; align-items: center; gap: 6px; }
.ev-view-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.18); border-radius: var(--hv-r-pill); font-family: inherit; font-size: var(--hv-sz-xs); font-weight: 700; color: rgba(255,255,255,0.70); cursor: pointer; transition: all 0.15s; text-decoration: none; }
.ev-view-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.ev-view-btn:hover { background: rgba(255,255,255,0.14); color: #fff !important; }
.ev-view-btn.active { background: var(--hv-green); border-color: var(--hv-green); color: #fff !important; box-shadow: 0 3px 12px rgba(var(--hv-green-rgb),0.35); }
/* Hero action buttons */
.ev-hero-actions { display: flex; align-items: center; gap: 10px; }
/* Admin button — yellow-tinted, for use on navy hero */
.ev-admin-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: rgba(245,224,128,0.14); border: 1.5px solid rgba(245,224,128,0.32); border-radius: var(--hv-r-pill); font-family: inherit; font-size: var(--hv-sz-xs); font-weight: 700; color: var(--hv-yellow-mid); cursor: pointer; transition: all 0.15s; text-decoration: none; }
.ev-admin-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.ev-admin-btn:hover { background: rgba(245,224,128,0.24); color: #fffde0 !important; }
/* Filter button */
.ev-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.18); border-radius: var(--hv-r-pill); font-family: inherit; font-size: var(--hv-sz-xs); font-weight: 700; color: rgba(255,255,255,0.75); cursor: pointer; transition: all 0.15s; }
.ev-filter-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.ev-filter-btn:hover, .ev-filter-btn.open { background: rgba(255,255,255,0.18); color: #fff; }
/* Filter panel */
.ev-filter-panel { background: var(--hv-white); border-bottom: 2px solid var(--hv-border); display: none; }
.ev-filter-panel.open { display: block; }
.ev-filter-inner { max-width: 1200px; margin: 0 auto; padding: 24px 48px; display: flex; flex-direction: column; gap: 18px; }
.ev-filter-field { display: flex; flex-direction: column; gap: 8px; }
.ev-filter-label { font-size: var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--hv-text-light); }
.ev-filter-select { height: 42px; padding: 0 14px; border: 2px solid var(--hv-border-warm); border-radius: var(--hv-r); background: var(--hv-page-bg); font-family: inherit; font-size: 15px; font-weight: 600; color: var(--hv-text); outline: none; transition: border-color 0.15s; }
.ev-filter-select:focus { border-color: var(--hv-green); box-shadow: 0 0 0 3px rgba(var(--hv-green-rgb),0.13); }
.ev-filter-divider { height: 1px; background: var(--hv-border); margin: 4px 0; }
.ev-filter-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* List body */
.ev-list-body { max-width: 1200px; margin: 0 auto; padding: 48px 48px 100px; }
/* Month groups */
.ev-month-group { margin-bottom: 52px; }
.ev-month-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ev-month-label { font-size: 22px; font-weight: 800; color: var(--hv-navy-deep); letter-spacing: -0.01em; font-family: 'Nunito', sans-serif; }
.ev-month-line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--hv-border) 0%, transparent 100%); border-radius: 2px; }
/* Event card list */
.ev-event-cards { display: flex; flex-direction: column; gap: 14px; }
.ev-event-card { background: var(--hv-white); border: 2px solid var(--hv-border); border-radius: var(--hv-r-lg); display: flex; align-items: stretch; overflow: hidden; box-shadow: 0 2px 12px rgba(30,60,20,0.06); transition: box-shadow 0.18s, transform 0.15s, border-color 0.15s; cursor: pointer; text-decoration: none; color: var(--hv-text); }
.ev-event-card:hover { border-color: var(--hv-green-mid); box-shadow: 0 6px 24px rgba(var(--hv-green-rgb),0.14); transform: translateY(-3px); }
.ev-event-card.canceled { opacity: 0.82; }
/* Thumbnail */
.ev-card-thumb { width: 200px; flex-shrink: 0; position: relative; overflow: hidden; background: var(--hv-green-light); }
.ev-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ev-event-card:hover .ev-card-thumb img { transform: scale(1.04); }
.ev-card-free-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(17,29,82,0.72); backdrop-filter: blur(2px); color: #fff; font-size:var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; text-align: center; padding: 6px 0; }
.ev-canceled-banner { position: absolute; top: 14px; left: -28px; background: var(--hv-error); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 36px; transform: rotate(-45deg); box-shadow: 0 2px 8px rgba(192,48,32,0.35); }
/* Info column */
.ev-card-info { flex: 1; min-width: 0; padding: 22px 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; border-left: 2px solid var(--hv-border); }
.ev-card-category { display: inline-flex; align-items: center; gap: 6px; font-size:var(--hv-sz-xs); font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hv-green-dark); width: fit-content; }
.ev-card-category-dot { width: 5px; height: 5px; background: var(--hv-green); border-radius: 50%; flex-shrink: 0; }
.ev-card-category-dot.canceled { background: var(--hv-error); }
.ev-event-card .ev-card-title { font-size: 22px; font-weight: 700; color: var(--hv-navy-deep); line-height: 1.15; transition: color 0.15s; font-family: 'Nunito', sans-serif; }
.ev-event-card:hover .ev-card-title { color: var(--hv-green-dark); }
.ev-event-card .ev-card-title.canceled-title { color: var(--hv-error); }
.ev-event-card:hover .ev-card-title.canceled-title { color: #a02010; }
.ev-card-datetime { display: flex; align-items: center; gap: 7px; font-size: var(--hv-sz-sm); font-weight: 700; color: var(--hv-text-mid); }
.ev-card-datetime svg { width: 14px; height: 14px; stroke: var(--hv-green-dark); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ev-card-meta-rows { display: flex; flex-direction: column; gap: 3px; }
.ev-card-meta-row { font-size: var(--hv-sz-sm); color: var(--hv-text-mid); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ev-card-meta-row svg { width: 13px; height: 13px; stroke: var(--hv-green-dark); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; opacity: 0.65; }
/* Date badge */
.ev-card-date { width: 105px; flex-shrink: 0; background: var(--hv-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; gap: 0; position: relative; }
.ev-card-date::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--hv-green); }
.ev-card-date-month { font-size:var(--hv-sz-xs); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hv-green-mid); margin-bottom: 4px; }
.ev-card-date-num { font-size: 50px; font-weight: 900; color: #fff; line-height: 1.0; letter-spacing: -0.02em; }
.ev-card-date-dow { font-size:var(--hv-sz-xs); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 5px; }
.ev-card-date.canceled { background: #8a0e1a; }
.ev-card-date.canceled::before { background: rgba(255,255,255,0.25); }
/* List responsive */
@media (max-width: 860px) {
.ev-list-body { padding: 32px 28px 80px; }
.ev-card-thumb { width: 150px; }
.ev-card-date { width: 100px; }
.ev-card-date-num { font-size: 42px; }
}
@media (max-width: 640px) {
.ev-list-body { padding: 24px 20px 60px; }
.ev-filter-inner { padding: 18px 20px; gap: 16px; }
.ev-card-thumb { width: 90px; }
.ev-card-date { width: 80px; }
.ev-card-date-num { font-size: 32px; }
.ev-event-card .ev-card-title { font-size: 17px; }
.ev-card-info { padding: 14px 16px; gap: 6px; }
.ev-hero-controls { flex-direction: column; align-items: flex-start; }
}
/* The V2 list card design: same 5:3 proportions, but the thumb full-bleeds the card's height
and left edge (no margins) — width derives from the stretched height via
aspect-ratio. The card's own border-radius + overflow:hidden clip the
outer-left corners round and leave the inner edge square, mirroring the
ev-card-date badge on the right. width:auto overrides the base 200px.
The image itself is pinned to 300px wide (was a hand-tuned tweak on the
shared .ev-card-thumb img rule; scoped here so the other variants keep
their natural sizing). (.ev-card-2c is the historical name of this design.) */
.ev-card-2c .ev-card-thumb { width: auto; aspect-ratio: 5 / 3; }
.ev-card-2c .ev-card-thumb img { max-width: 300px; min-width: 300px; }
@media (max-width: 640px) {
/* Mobile: the card flips from 3 columns to 3 full-width stacked rows —
image on top (kept 5:3), info in the middle, date bar at the bottom with
its month/day/weekday laid out inline instead of stacked. */
.ev-card-2c { flex-direction: column; }
.ev-card-2c .ev-card-thumb { width: 100%; aspect-ratio: 5 / 3; }
.ev-card-2c .ev-card-thumb img { max-width: none; min-width: 0; }
.ev-card-2c .ev-card-info { border-left: 0; border-top: 2px solid var(--hv-border); }
.ev-card-2c .ev-card-date { width: 100%; flex-direction: row; align-items: baseline; justify-content: center; gap: 10px; padding: 10px 14px; }
.ev-card-2c .ev-card-date .ev-card-date-month { margin-bottom: 0; }
.ev-card-2c .ev-card-date .ev-card-date-num { font-size: 26px; }
.ev-card-2c .ev-card-date .ev-card-date-dow { margin-top: 0; }
}
/* ── User Admin Edit (edit2) ─────────────────────────────────── */
/* Profile header */
.uba-profile-header {
display: flex;
align-items: center;
gap: 24px;
padding: 24px 28px;
background: var(--hv-card-bg);
border: 1.5px solid var(--hv-border);
border-radius: var(--hv-radius);
margin-bottom: 16px;
}
.uba-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--hv-green);
color: #fff;
font-size: 24px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: 1px;
overflow: hidden;
}
.uba-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uba-profile-info { flex: 1; min-width: 0; }
.uba-name {
font-size: 22px;
font-weight: 800;
color: var(--hv-navy);
line-height: 1.2;
}
.uba-meta { font-size:var(--hv-sz-sm); color: var(--hv-text-mid); margin-top: 4px; }
.uba-assoc { font-size:var(--hv-sz-sm); color: var(--hv-text-mid); margin-top: 2px; }
.uba-assoc a { color: var(--hv-green-dark); font-weight: 600; }
.uba-archived-badge {
display: inline-block;
padding: 3px 10px;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
color: #92400e;
margin-left: 10px;
}
.uba-profile-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; }
/* Section heading inside a card */
.hv-section-title {
font-size: var(--hv-sz-sm);
font-weight: 800;
color: var(--hv-navy);
margin: 28px 0 14px;
padding-bottom: 8px;
border-bottom: 1.5px solid var(--hv-border);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hv-section-title:first-child { margin-top: 0; }
/* Table wrapper */
.hv-table-wrap {
overflow-x: auto;
border: 1px solid var(--hv-border);
border-radius: 10px;
margin-bottom: 16px;
}
.hv-table-wrap table {
width: 100%;
border-collapse: collapse;
font-size: var(--hv-sz-sm);
}
.hv-table-wrap th,
table.hv-table th,
table.prospect_tasks_table th,
table.pt2-sortable-table th {
background: var(--hv-yellow-header);
color: var(--hv-navy);
font-weight: 700;
font-size: var(--hv-sz-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 10px 14px;
text-align: left;
border-bottom: 1.5px solid var(--hv-border);
}
.hv-table-wrap td,
table.hv-table td,
table.prospect_tasks_table td,
table.pt2-sortable-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--hv-border);
color: var(--hv-navy);
vertical-align: middle;
}
.hv-table-wrap tr:last-child td,
table.hv-table tr:last-child td,
table.prospect_tasks_table tr:last-child td,
table.pt2-sortable-table tr:last-child td { border-bottom: none; }
.hv-table-wrap tr:hover td,
table.hv-table tr:hover td,
table.prospect_tasks_table tr:hover td,
table.pt2-sortable-table tr:hover td { background: var(--hv-yellow-header); }
/* Attendance and waiting list tables (event_participations#index): on a phone, only
checkbox / name / action, and the Edit button becomes a compact View link
with a 44px tap target */
.ep-view-link {
display: none;
align-items: center;
min-height: 44px;
min-width: 44px;
padding: 0 10px;
color: var(--hv-green-dark);
font-weight: 700;
font-size: var(--hv-sz-sm);
text-decoration: underline;
}
@media (max-width: 640px) {
table.ep-phone-table { table-layout: auto !important; }
table.ep-phone-table .ep-col-extra,
table.ep-phone-table .ep-edit-btn { display: none; }
table.ep-phone-table .ep-view-link { display: inline-flex; }
table.ep-phone-table th,
table.ep-phone-table td { width: auto !important; padding: 8px 10px; }
table.ep-phone-table .ep-col-action { width: 1% !important; white-space: normal !important; text-align: right; }
table.ep-phone-table tfoot .hv-btn { width: 100%; padding-left: 12px; padding-right: 12px; white-space: normal; }
}
/* Tags grid */
.hv-tags-grid {
display: flex;
flex-wrap: wrap;
gap: 6px 24px;
padding: 4px 0;
}
.hv-tags-grid > div {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--hv-sz-sm);
color: var(--hv-navy);
}
/* Day-of-week checkboxes — pill card style */
.hv-days-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 24px;
}
.hv-days-row > label {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: var(--hv-sz-sm);
font-weight: 700;
color: var(--hv-text-mid);
cursor: pointer;
padding: 16px 20px;
min-width: 72px;
border: 2px solid var(--hv-border-warm);
border-radius: var(--hv-r);
background: var(--hv-white);
transition: border-color 0.15s, background 0.15s, color 0.15s;
user-select: none;
text-align: center;
}
.hv-days-row > label:hover {
border-color: var(--hv-green);
background: var(--hv-green-light);
}
.hv-days-row > label:has(input[type="checkbox"]:checked) {
background: var(--hv-green-light);
border-color: var(--hv-green);
color: var(--hv-green-deep);
}
.hv-days-row > label input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 26px;
height: 26px;
border: 2px solid var(--hv-border-warm);
border-radius: 6px;
background: #fff;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
position: relative;
}
.hv-days-row > label input[type="checkbox"]:checked {
background: var(--hv-green);
border-color: var(--hv-green);
}
.hv-days-row > label input[type="checkbox"]:checked::after {
content: '';
display: block;
width: 7px;
height: 13px;
border: 2.5px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
position: absolute;
top: 2px;
left: 7px;
}
/* Info strip */
.hv-info-strip {
background: var(--hv-yellow-header);
border: 1px solid var(--hv-border);
border-radius: 8px;
padding: 10px 16px;
font-size:var(--hv-sz-sm);
color: var(--hv-text-mid);
margin-bottom: 16px;
}
/* Roles checkboxes within admin card */
.hv-roles-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.hv-roles-grid > div {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--hv-sz-sm);
}
/* Profile pic upload form */
.uba-pic-upload { font-size:var(--hv-sz-sm); color: var(--hv-text-mid); }
/* More-fields collapsible */
.uba-more-fields-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size:var(--hv-sz-sm);
font-weight: 700;
color: var(--hv-green-dark);
cursor: pointer;
margin: 8px 0 14px;
text-decoration: none;
}
.uba-more-fields-toggle:hover { text-decoration: underline; }
.uba-more-fields { display: none; }
/* ══════════════════════════════════════════════════════════════
PROFILE HERO (edit2 — full-width dark navy banner)
══════════════════════════════════════════════════════════════ */
.pr-hero {
position: relative;
background: var(--hv-navy-deep);
overflow: hidden;
}
.pr-hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.065) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.pr-hero::after {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: linear-gradient(180deg, var(--hv-green) 0%, rgba(var(--hv-green-rgb),0.18) 100%);
}
.pr-hero-glow {
position: absolute; top: -80px; left: -80px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(var(--hv-green-rgb),0.11) 0%, transparent 65%);
pointer-events: none;
}
.pr-hero-glow2 {
position: absolute; bottom: -80px; right: -60px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(var(--hv-green-rgb),0.06) 0%, transparent 70%);
pointer-events: none;
}
.pr-hero-content {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto;
padding: 20px 24px 24px;
display: flex; align-items: center; gap: 36px;
}
/* Avatar */
.pr-avatar-wrap {
flex-shrink: 0;
position: relative;
}
.pr-avatar {
width: 148px; height: 148px;
border-radius: var(--hv-r-lg);
object-fit: cover;
border: 4px solid rgba(255,255,255,0.15);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
display: block;
}
.pr-avatar-initials {
width: 200px; height: 200px;
border-radius: var(--hv-r-lg);
background: var(--hv-green);
border: 4px solid rgba(255,255,255,0.15);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
display: flex; align-items: center; justify-content: center;
font-size: 54px; font-weight: 800; color: #fff; letter-spacing: -1px;
}
.pr-avatar-remove {
position: absolute; top: -8px; right: -8px;
width: 30px; height: 30px;
background: var(--hv-error);
border: 3px solid var(--hv-navy-deep);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform 0.15s, background 0.15s;
box-shadow: 0 2px 8px rgba(192,48,32,0.4);
text-decoration: none;
}
.pr-avatar-remove:hover { transform: scale(1.12); background: #d63020; }
.pr-avatar-remove svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; }
/* Hero text */
.pr-hero-info { flex: 1; }
.pr-page-badge {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(var(--hv-green-rgb),0.15);
border: 1.5px solid rgba(var(--hv-green-rgb),0.40);
color: var(--hv-green-mid);
font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
padding: 5px 14px; border-radius: var(--hv-r-pill);
margin-bottom: 12px; width: fit-content;
}
.pr-badge-dot {
width: 6px; height: 6px;
background: var(--hv-green);
border-radius: 50%; flex-shrink: 0;
}
.pr-hero-name {
font-size: clamp(28px, 3.5vw, 46px);
font-weight: 900; color: #fff;
line-height: 1.1; letter-spacing: -0.01em;
margin-bottom: 8px;
}
.pr-hero-preferred {
font-size: 0.6em; font-weight: 600;
color: rgba(255,255,255,0.55);
letter-spacing: 0;
}
.pr-archived-badge {
display: inline-block;
font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
background: rgba(192,48,32,0.25); color: #ffaaaa;
border: 1px solid rgba(192,48,32,0.4);
padding: 3px 10px; border-radius: var(--hv-r-pill);
vertical-align: middle; margin-left: 10px;
}
/* Email communication status icons (hero — side-by-side row with name) */
.pr-hero-name-row {
display: flex; align-items: center; gap: 14px;
margin-bottom: 8px;
}
.pr-hero-name-row .pr-hero-name {
margin-bottom: 0;
min-width: 0; /* allow h1 to shrink so the badges stay inline at the right */
}
.pr-email-status {
display: flex; gap: 6px; align-items: center;
flex-shrink: 0;
}
.pr-email-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
border: 1.5px solid;
cursor: help;
}
.pr-email-badge svg {
width: 14px; height: 14px;
stroke-width: 2; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
.pr-email-badge--ok { background: rgba(var(--hv-green-rgb),0.20); border-color: rgba(var(--hv-green-rgb),0.55); color: #d6f0c8; }
.pr-email-badge--off { background: rgba(192,48,32,0.25); border-color: rgba(192,48,32,0.55); color: #ffaaaa; }
.pr-email-badge--none { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); color: rgba(255,255,255,0.65); }
.pr-hero-assoc {
font-size:var(--hv-sz-xs); font-weight: 700;
letter-spacing: 0.07em; text-transform: uppercase;
color: rgba(255,255,255,0.48);
margin-bottom: 18px;
}
.pr-hero-assoc a, .pr-hero-assoc span { color: rgba(255,255,255,0.78); }
.pr-hero-assoc a:hover { color: var(--hv-green-mid); }
/* Action buttons */
.pr-hero-actions {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.pr-action-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px;
border-radius: var(--hv-r-pill);
font-family: var(--hv-font);
font-size:var(--hv-sz-xs); font-weight: 700;
cursor: pointer; transition: all 0.15s;
border: none; text-decoration: none;
white-space: nowrap;
}
.pr-action-btn svg {
width: 13px; height: 13px;
stroke: currentColor; fill: none;
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
.pr-action-ghost {
background: rgba(255,255,255,0.08);
border: 1.5px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.78);
}
.pr-action-ghost:hover { background: rgba(255,255,255,0.16); color: #fff; }
.pr-action-admin {
background: rgba(245,224,128,0.14);
border: 1.5px solid rgba(245,224,128,0.32);
color: var(--hv-yellow-mid);
}
.pr-action-admin:hover { background: rgba(245,224,128,0.26); color: #fffde0; }
/* Photo upload inline form */
.pr-photo-upload-label {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px;
border-radius: var(--hv-r-pill);
font-family: var(--hv-font);
font-size:var(--hv-sz-xs); font-weight: 700;
cursor: pointer; transition: all 0.15s;
background: rgba(255,255,255,0.08);
border: 1.5px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.78);
}
.pr-photo-upload-label:hover { background: rgba(255,255,255,0.16); color: #fff; }
.pr-photo-upload-label svg {
width: 13px; height: 13px;
stroke: currentColor; fill: none;
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* Hero responsive */
@media (max-width: 960px) {
.pr-hero-content { flex-direction: column; text-align: center; align-items: center; gap: 20px; padding: 32px 28px 36px; }
.pr-hero-actions { justify-content: center; }
.pr-page-badge { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
.pr-hero-content { padding: 24px 20px 28px; }
.pr-avatar, .pr-avatar-initials { width: 100px; height: 100px; }
.pr-avatar-initials { font-size: 38px; }
.pr-hero-name { font-size: 26px; }
}
/* ── jQuery UI tab overrides (.hv-jq-tabs) ───────────────────── */
.hv-jq-tabs.ui-tabs {
padding: 0;
border: none;
background: transparent;
border-radius: 0;
}
/* Nav row: sits just above the panel border */
.hv-jq-tabs .ui-tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 0;
padding: 0;
background: transparent;
border: none;
border-bottom: none;
border-radius: 0;
margin: 0;
}
/* Individual tab button — bordered pill with rounded top corners */
.hv-jq-tabs .ui-tabs-nav .ui-tabs-tab {
background: var(--hv-green-light);
border: 1px solid var(--hv-border);
border-bottom: none;
border-radius: 8px 8px 0 0;
margin: 0 3px -1px 0;
padding: 0;
list-style: none;
top: 0;
position: relative;
}
/* Active tab: white bg that visually merges with the panel */
.hv-jq-tabs .ui-tabs-nav .ui-state-active {
background: var(--hv-white);
border-color: var(--hv-border);
border-bottom-color: var(--hv-white);
z-index: 1;
}
/* Tab link text */
.hv-jq-tabs .ui-tabs-nav .ui-tabs-anchor {
display: block;
padding: 10px 17px;
font-size:var(--hv-sz-sm);
font-weight: 700;
color: var(--hv-text-light);
text-decoration: none;
font-family: var(--hv-font);
outline: none;
float: none;
}
/* Keyboard focus indicator for the tab anchors. The base rule above clears the
default outline (so mouse focus is clean); re-assert a visible ring for
keyboard users via :focus-visible. Inset offset so the tab border/overflow
doesn't clip it. (WCAG 2.4.7) */
.hv-jq-tabs .ui-tabs-nav .ui-tabs-anchor:focus-visible {
outline: 3px solid var(--hv-yellow-mid);
outline-offset: -3px;
}
.hv-jq-tabs .ui-tabs-nav .ui-state-active .ui-tabs-anchor {
color: var(--hv-navy);
}
.hv-jq-tabs .ui-tabs-nav .ui-tabs-tab:not(.ui-state-active):hover {
background: var(--hv-green-mid);
}
.hv-jq-tabs .ui-tabs-nav .ui-tabs-tab:not(.ui-state-active):hover .ui-tabs-anchor {
color: var(--hv-green-deep);
}
/* Panel: bordered content area below the tabs */
.hv-jq-tabs .ui-tabs-panel {
padding: 20px;
border: 1px solid var(--hv-border);
border-radius: 0 8px 8px 8px;
background: var(--hv-white);
margin-top: 0;
}
/* HV jq-tabs responsive */
@media (max-width: 640px) {
.uba-profile-header { flex-direction: column; align-items: flex-start; }
.uba-profile-actions { align-items: flex-start; }
.hv-tabs { overflow-x: auto; flex-wrap: nowrap; }
.hv-tab { padding: 12px 18px; white-space: nowrap; }
.hv-jq-tabs .ui-tabs-nav { flex-wrap: nowrap; overflow-x: auto; padding-left: 0; }
.hv-jq-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 9px 14px; white-space: nowrap; }
}
/* ── FullCalendar: show full event title on the V2 calendars ── */
.events.index .fc-day-grid-event .fc-title,
.events.carss_calendar .fc-day-grid-event .fc-title { white-space: normal; overflow: visible; }
.events.index .fc-day-grid-event,
.events.carss_calendar .fc-day-grid-event { height: auto; overflow: visible; }
/* events/index2 page-title action buttons (list view toggle + New Event) */
.ev2-title-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
/* On phones the V2 calendars open in listMonth (see events_.js
displayFullCalendar); stack the toolbar so the title and button groups
don't overlap. The header's list-view / new-event buttons duplicate
FullCalendar's toolbar and the bottom admin card, so drop them from the
title row. */
@media (max-width: 640px) {
.events.index .ev2-title-actions { display: none; }
.events.index .fc-toolbar .fc-left,
.events.index .fc-toolbar .fc-center,
.events.index .fc-toolbar .fc-right,
.events.carss_calendar .fc-toolbar .fc-left,
.events.carss_calendar .fc-toolbar .fc-center,
.events.carss_calendar .fc-toolbar .fc-right {
float: none;
display: block;
text-align: center;
margin-bottom: 8px;
}
.events.index .fc-toolbar .fc-center h2,
.events.carss_calendar .fc-toolbar .fc-center h2 { float: none; display: inline-block; }
}
/* ── Mobile service request index (views_mobile/service_requests/index) ── */
.mob-sr-page-header { display:flex; align-items:center; justify-content:space-between; padding:16px; background:#fff; border-bottom:1px solid var(--hv-border); margin-bottom:12px; }
.mob-sr-page-title { font-size:18px; font-weight:700; color:var(--hv-navy); }
.mob-sr-new-btn { height:40px; padding:0 16px; font-size:var(--hv-sz-sm); }
.mob-sr-tabs { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; border-bottom:2px solid var(--hv-border); background:#fff; margin-bottom:12px; scrollbar-width:none; }
.mob-sr-tabs::-webkit-scrollbar { display:none; }
.mob-sr-tabs .hv-tab { flex-shrink:0; padding:10px 16px; font-size:var(--hv-sz-sm); }
.mob-sr-notice { margin:0 12px 12px; background:var(--hv-yellow-soft); border-radius:var(--hv-r); padding:12px 16px; font-size:var(--hv-sz-sm); font-weight:600; color:var(--hv-navy); }
.mob-sr-filter-strip { display:flex; align-items:center; gap:8px; padding:0 12px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.mob-sr-filter-strip::-webkit-scrollbar { display:none; }
.mob-sr-filter-strip select { flex-shrink:0; height:36px; border:1px solid var(--hv-border); border-radius:var(--hv-r); font-size:var(--hv-sz-sm); padding:0 8px; background:#fff; color:var(--hv-navy); }
.mob-sr-list { padding:0 12px; display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.mob-sr-card { background:#fff; border:1px solid var(--hv-border); border-radius:var(--hv-r); overflow:hidden; }
.mob-sr-card.mob-sr-card--overdue { border-left:4px solid var(--hv-error); }
.mob-sr-card.mob-sr-card--new { border-left:4px solid var(--hv-green); }
.mob-sr-card.mob-sr-card--matched { background:var(--hv-navy-light); }
.mob-sr-top { display:flex; align-items:flex-start; justify-content:space-between; padding:12px 14px 6px; gap:8px; }
.mob-sr-datetime { display:flex; flex-direction:column; gap:2px; }
.mob-sr-date { font-size:15px; font-weight:700; color:var(--hv-navy); }
.mob-sr-time { font-size:var(--hv-sz-sm); color:var(--hv-text-mid); }
.mob-sr-status { font-size:11px; padding:3px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; margin-top:2px; }
.mob-sr-badges { padding:0 14px 6px; display:flex; gap:6px; flex-wrap:wrap; }
.mob-sr-body { padding:4px 14px 8px; border-top:1px solid #f0f0f0; }
.mob-sr-row { display:flex; align-items:baseline; gap:6px; padding:5px 0; font-size:var(--hv-sz-sm); border-bottom:1px solid #f7f7f7; }
.mob-sr-row:last-child { border-bottom:none; }
.mob-sr-label { flex-shrink:0; width:90px; font-weight:600; color:var(--hv-text-light); font-size:12px; text-transform:uppercase; letter-spacing:0.02em; }
.mob-sr-value { color:var(--hv-navy); line-height:1.4; }
.mob-sr-purpose { font-style:italic; color:var(--hv-text-mid); }
.mob-sr-footer { padding:8px 14px 12px; display:flex; justify-content:flex-end; }
.mob-sr-view-btn { height:36px; padding:0 20px; font-size:var(--hv-sz-sm); }
.mob-sr-empty { text-align:center; padding:40px 20px; color:var(--hv-text-light); font-style:italic; font-size:var(--hv-sz-sm); }
.mob-sr-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--hv-text-light); padding:0 12px 6px; }
.mob-sr-search { margin:0 12px 20px; background:#fff; border:1px solid var(--hv-border); border-radius:var(--hv-r); overflow:hidden; }
.mob-sr-search-header { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--hv-border); font-weight:700; font-size:var(--hv-sz-sm); color:var(--hv-navy); cursor:pointer; }
.mob-sr-search-header svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.mob-sr-search-toggle { margin-left:auto; font-size:20px; color:var(--hv-text-light); line-height:1; }
.mob-sr-search-body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.mob-sr-search-body.is-hidden { display:none; }
.mob-sr-search-body .hv-search-input { width:100%; box-sizing:border-box; }
.mob-sr-search-body .hv-search-field-label { font-size:12px; font-weight:600; color:var(--hv-text-light); margin-bottom:4px; }
.mob-sr-date-range { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mob-sr-search-btn { width:100%; height:44px; font-size:var(--hv-sz-sm); }
.mob-sr-pagination { padding:0 12px 24px; }
/* ── Mobile service request show (views_mobile/service_requests/show) ── */
.mob-show-header { display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff; border-bottom:1px solid var(--hv-border); margin-bottom:12px; }
.mob-show-back { font-size:var(--hv-sz-sm); color:var(--hv-green-dark); font-weight:600; text-decoration:none; white-space:nowrap; }
.mob-show-back:hover { text-decoration:underline; }
.mob-show-title { font-size:17px; font-weight:700; color:var(--hv-navy); }
.mob-show-summary-card { margin:0 12px 12px; background:#fff; border:1px solid var(--hv-border); border-radius:var(--hv-r); overflow:hidden; padding:14px 16px; }
.mob-show-summary-date { font-size:18px; font-weight:700; color:var(--hv-navy); display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.mob-show-summary-badges { display:flex; gap:6px; flex-wrap:wrap; }
.mob-show-summary-status { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:12px; }
.mob-show-summary-vol { font-weight:500; font-size:12px; }
.mob-show-summary-rows { border-top:1px solid #f0f0f0; margin-top:4px; }
.mob-show-info-row { display:flex; align-items:baseline; gap:8px; padding:7px 0; font-size:var(--hv-sz-sm); border-bottom:1px solid #f7f7f7; }
.mob-show-info-row:last-child { border-bottom:none; }
.mob-show-info-label { flex-shrink:0; width:80px; font-weight:600; font-size:11px; color:var(--hv-text-light); text-transform:uppercase; letter-spacing:0.04em; }
.mob-show-info-value { color:var(--hv-navy); line-height:1.4; flex:1; }
.mob-show-info-purpose { font-style:italic; color:var(--hv-text-mid); }
.mob-show-section { margin:0 12px 12px; }
.mob-show-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--hv-text-light); margin-bottom:6px; }
.mob-show-info-block { background:#fff; border:1px solid var(--hv-border); border-radius:var(--hv-r); padding:8px 16px 4px; }
.mob-show-trips { display:flex; flex-direction:column; gap:8px; }
.mob-show-trip-card { background:#fff; border:1px solid var(--hv-border); border-radius:var(--hv-r); padding:12px 14px; }
.mob-show-trip-card.mob-show-trip-card--split { background:#f3f4f6; border-color:#d1d5db; }
.mob-show-trip-route { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.mob-show-trip-stop { display:flex; align-items:flex-start; gap:10px; }
.mob-show-trip-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.mob-show-trip-dot.mob-show-trip-dot--origin { background:var(--hv-green); }
.mob-show-trip-dot.mob-show-trip-dot--dest { background:var(--hv-error); }
.mob-show-trip-line { width:2px; height:10px; background:var(--hv-border); margin-left:4px; }
.mob-show-trip-addr { font-size:var(--hv-sz-sm); color:var(--hv-navy); line-height:1.4; }
.mob-show-trip-time { font-size:12px; color:var(--hv-text-mid); margin-bottom:8px; }
.mob-show-trip-comment { font-size:12px; color:var(--hv-text-mid); font-style:italic; margin-bottom:8px; padding-top:4px; border-top:1px solid #f0f0f0; }
.mob-show-trip-split-label { font-size:12px; color:#6b7280; font-style:italic; }
.mob-show-trip-actions { display:flex; gap:8px; margin-top:4px; border-top:1px solid #f0f0f0; padding-top:10px; }
.mob-show-trip-btn { height:36px; padding:0 16px; font-size:var(--hv-sz-xs); border-radius:var(--hv-r); }
.mob-show-map-card { background:#fff; border:1px solid var(--hv-border); border-radius:var(--hv-r); overflow:hidden; padding:12px 14px; }
.mob-show-map-navigate { display:flex; align-items:center; gap:8px; font-size:var(--hv-sz-sm); font-weight:600; color:var(--hv-green-dark); text-decoration:none; margin-bottom:6px; }
.mob-show-map-navigate svg { width:18px; height:18px; flex-shrink:0; }
.mob-show-map-navigate:hover { text-decoration:underline; }
.mob-show-map-empty { padding:30px; text-align:center; color:var(--hv-text-light); background:var(--hv-green-light); border-radius:var(--hv-r); font-size:var(--hv-sz-sm); }
@media (max-width: 768px) {
.se2-form-actions { flex-direction: column-reverse; align-items: stretch; }
.se2-form-actions .hv-btn { text-align: center; }
}
/* ── Events plugin widget (V2) ─────────────────────────────────
Overrides the inline styles emitted by the TinyMCE
"Upcoming events" plugin block (#events_plugin_for_style) so it
matches the HV V2 card aesthetic on editable pages. */
#events_plugin_for_style {
background: var(--hv-card-bg) !important;
border: 2px solid var(--hv-border);
border-radius: var(--hv-r-lg);
padding: 22px 26px !important;
box-shadow: 0 1px 8px rgba(30,60,20,0.05);
margin: 18px 0;
}
#events_plugin_for_style h3 {
font-size: var(--hv-sz-md) !important;
font-weight: 800;
color: var(--hv-navy);
margin: 0 0 10px !important;
padding: 0 !important;
letter-spacing: -0.01em;
}
#events_plugin_for_style h3 span {
font-size: inherit !important;
font-family: inherit !important;
}
#events_plugin_for_style h3 a,
#events_plugin_for_style h3 a:visited {
color: var(--hv-navy) !important;
text-decoration: none;
}
#events_plugin_for_style h3 a:hover {
color: var(--hv-green-dark) !important;
}
#events_plugin_for_style > hr {
border: 0 !important;
height: 3px !important;
background: var(--hv-green) !important;
border-radius: 2px;
margin: 0 0 18px !important;
width: 56px;
}
#events_plugin_for_style #events_plugin_in_editable_page > div {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 12px 0 0;
}
/* image wrapper — fixed width so it stops eating the row */
#events_plugin_for_style #events_plugin_in_editable_page > div > div:nth-of-type(1) {
flex: 0 0 auto !important;
width: 100px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clear: none !important;
position: static !important;
min-height: 0 !important;
}
/* text wrapper — flexes to fill space next to the image */
#events_plugin_for_style #events_plugin_in_editable_page > div > div:nth-of-type(2) {
flex: 1 1 0 !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
display: block !important;
position: static !important;
min-height: 0 !important;
line-height: 1.35 !important;
}
#events_plugin_for_style #events_plugin_in_editable_page img {
display: block;
width: 100px !important;
height: auto;
border-radius: var(--hv-r);
object-fit: cover;
}
/* hr drops to its own line within the flex row */
#events_plugin_for_style #events_plugin_in_editable_page > div > hr {
flex: 0 0 100%;
width: 100%;
}
#events_plugin_for_style #events_plugin_in_editable_page > div > div:nth-of-type(2) a:first-of-type {
color: var(--hv-navy) !important;
font-family: inherit !important;
font-weight: 700 !important;
font-size: var(--hv-sz-sm) !important;
text-decoration: none;
line-height: 1.3;
}
#events_plugin_for_style #events_plugin_in_editable_page > div > div:nth-of-type(2) a:first-of-type:hover {
color: var(--hv-green-dark) !important;
text-decoration: underline;
}
#events_plugin_for_style #events_plugin_in_editable_page > div > div:nth-of-type(2) a:last-of-type {
color: var(--hv-text-light) !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 500;
text-decoration: none;
}
#events_plugin_for_style #events_plugin_in_editable_page hr {
border: 0 !important;
border-top: 1px solid var(--hv-border) !important;
height: 0 !important;
background: none !important;
margin: 14px 0 0 !important;
clear: both;
}
#events_plugin_for_style #events_plugin_in_editable_page > div:last-child hr {
display: none;
}
/* ── Galleria slideshow: the stage is hard-coded to a fixed pixel size in the
page content (e.g. width:700px;height:450px), which overflowed the viewport
on phones. Capping the width lets it shrink to its container; albums_.js runs
Galleria with responsive:true + a height ratio so the stage re-measures and
keeps its aspect ratio as the width changes. Desktop is unaffected (the stage
stays at its authored width until the container is narrower). ── */
.galleria { max-width: 100%; }
/* ── Touch-device adaptations (iPad, touch laptops) ─────────── */
@media (pointer: coarse) {
.hv-btn { min-height: 44px; } /* rescues inline height:38/40px buttons — min-height beats inline height */
.hv-filter-select { height: 44px; }
.hv-nav-sub-item { padding: 15px 20px; }
}
/* ── Hover states moved off inline onmouseover/onmouseout (CSP-safe) ────────
Production CSP blocks inline event-handler attributes, so these hovers were
dead for real users. !important overrides the elements' inline base styles
(border / background) that would otherwise win on specificity. */
.hv-radio-option:hover {
border-color: var(--hv-green-mid) !important;
background: var(--hv-green-light) !important;
}
.post_menu_button:hover {
background: rgba(0, 0, 0, 0.07) !important;
}
/* ── jQuery UI datepicker: stack above sticky header AND modals ──────
The shared #ui-datepicker-div popup is appended to and gets a
low z-index (jQuery UI derives it from the field's ancestors, ~1). It
must clear the V2 sticky site header (z-index:20, e.g. the vetting-steps
"Add Step" form where jQuery UI flips the calendar above the field) AND
the reports filter overlay (z-index:9999 in reporting_spreadsheets2.html.erb,
where the birthday-report date-range picker opens inside the modal).
Inline z-index set by jQuery UI requires !important to override. */
#ui-datepicker-div { z-index: 10000 !important; }
/* reCAPTCHA v2 checkbox fallback — shown after an invisible v3 check didn't
pass. It appears mid-flow, so we frame it and (via recaptcha_fallback_.js)
scroll it into view and briefly pulse it so it isn't missed. */
.hv-captcha-fallback {
border: 1px solid var(--hv-border);
border-radius: var(--hv-r);
padding: 14px 16px;
background: #fff;
}
.hv-captcha-fallback-hint {
font-size: var(--hv-sz-sm);
font-weight: 600;
color: var(--hv-navy);
margin-bottom: 10px;
/* Yellow informational box so the instruction is the first thing the user
sees when the fallback scrolls into view. */
background: var(--hv-yellow-soft);
border: 1px solid var(--hv-yellow-mid);
border-radius: var(--hv-r);
padding: 12px 14px;
}
.hv-captcha-pulse {
animation: hv-captcha-pulse 1.2s ease-out 2;
}
@keyframes hv-captcha-pulse {
0% { box-shadow: 0 0 0 0 rgba(26, 42, 108, 0.45); }
70% { box-shadow: 0 0 0 10px rgba(26, 42, 108, 0); }
100% { box-shadow: 0 0 0 0 rgba(26, 42, 108, 0); }
}
/* ── Subscription toggle (.ui.checkbox .slider) ──────────────────────────
Shared by the interest-group subscriptions page and the posts index.
The markup (link > hidden checkbox + .slider) is what subscriptions.js
and the subscriptions/users/*.js.erb responses drive; only the look
lives here. Moved out of the subscriptions index inline