/*
* crewdecide.css
* Custom component stylesheet for CrewDecide
* Complements tailwind.css — do not duplicate Tailwind utilities here
*
* TABLE OF CONTENTS
* 1. CSS Custom Properties (Design Tokens)
* 2. Base / Reset
* 3. Cards
* 4. Buttons
* 5. Form Elements
* 6. Badges & Status Pills
* 7. Alerts & Flash Messages
* 8. Modals & Overlays
* 9. Navigation
* 10. Tables (Admin)
* 11. Homepage Components
* 12. Utility Helpers
*/
/* ============================================================
1. CSS CUSTOM PROPERTIES (Design Tokens)
============================================================
Single source of truth for all colors, radii, shadows.
Change a value here → updates everywhere instantly.
============================================================ */
:root {
/* Brand colors */
--cd-blue: rgb(37, 93, 209);
--cd-blue-light: rgb(239, 246, 255);
--cd-blue-border: rgb(191, 219, 254);
--cd-blue-hover: rgb(29, 78, 216);
--cd-green: rgb(116, 195, 101);
--cd-green-dark: rgb(22, 163, 74);
--cd-green-light: rgb(240, 253, 244);
--cd-green-border: rgb(187, 247, 208);
/* Semantic colors */
--cd-danger: rgb(220, 38, 38);
--cd-danger-light: rgb(254, 242, 242);
--cd-danger-border: rgb(254, 202, 202);
--cd-warning-light: rgb(254, 243, 199);
--cd-warning-border: rgb(252, 211, 77);
--cd-warning-text: rgb(146, 64, 14);
/* Text hierarchy */
--cd-text-primary: rgb(15, 23, 42);
--cd-text-body: rgb(71, 85, 105);
--cd-text-muted: rgb(100, 116, 139);
--cd-text-subtle: rgb(148, 163, 184);
--cd-text-faint: rgb(203, 213, 225);
/* Surfaces */
--cd-white: #ffffff;
--cd-bg: rgb(248, 250, 252);
--cd-bg-hover: rgb(241, 245, 249);
--cd-surface: rgb(51, 65, 85);
/* Borders */
--cd-border: rgb(226, 232, 240);
--cd-border-input: rgb(203, 213, 225);
--cd-border-dark: rgb(241, 245, 249);
/* Border radii */
--cd-radius-sm: 0.4rem;
--cd-radius: 0.5rem;
--cd-radius-md: 0.75rem;
--cd-radius-lg: 1rem;
--cd-radius-xl: 1.5rem;
--cd-radius-full: 9999px;
/* Shadows */
--cd-shadow-soft: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
--cd-shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.25);
--cd-shadow-hover: 0 8px 24px rgba(37, 93, 209, 0.12);
/* Transitions */
--cd-transition: 0.2s ease;
--cd-transition-all: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
/* Spacing */
--cd-gap-sm: 0.5rem;
--cd-gap: 0.75rem;
--cd-gap-md: 1rem;
--cd-gap-lg: 1.5rem;
}
/* ============================================================
2. BASE / RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
color: var(--cd-text-primary);
background: var(--cd-bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--cd-blue);
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* ============================================================
3. CARDS
============================================================
.cd-card Standard white card (most common)
.cd-card-lg Larger padding card
.cd-card-flush Card without padding (table inside)
.cd-card-info Light blue info card
.cd-card-section Section divider within a card
============================================================ */
.cd-card {
background: var(--cd-white);
border-radius: var(--cd-radius-lg);
border: 1px solid var(--cd-border);
padding: 1.25rem;
box-shadow: var(--cd-shadow-soft);
}
.cd-card-lg {
background: var(--cd-white);
border-radius: var(--cd-radius-xl);
border: 1px solid var(--cd-border);
padding: 1.5rem;
box-shadow: var(--cd-shadow-soft);
}
.cd-card-flush {
background: var(--cd-white);
border-radius: var(--cd-radius-lg);
border: 1px solid var(--cd-border);
overflow: visible;
box-shadow: var(--cd-shadow-soft);
}
.cd-card-info {
background: var(--cd-blue-light);
border: 1px solid var(--cd-blue-border);
border-radius: var(--cd-radius-md);
padding: 0.875rem 1rem;
}
.cd-card-muted {
background: var(--cd-bg);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-md);
padding: 1rem;
}
.cd-card-section {
border-top: 1px solid var(--cd-border-dark);
padding-top: 1.25rem;
margin-top: 0.25rem;
}
/* ── Send Poll Step 2: crew choice cards ─────────────────────────── */
.cd-crew-choice {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.cd-crew-choice-card {
border: 2px solid var(--cd-border);
border-radius: var(--cd-radius-lg);
background: white;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
overflow: hidden;
}
.cd-crew-choice-card:hover { border-color: var(--cd-blue-border); box-shadow: var(--cd-shadow-hover); }
.cd-crew-choice-card.is-selected { border-color: var(--cd-blue); box-shadow: 0 0 0 3px var(--cd-blue-border); }
.cd-crew-choice-header { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; user-select: none; }
.cd-crew-choice-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--cd-radius-md); background: var(--cd-blue-light); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; transition: background 0.15s ease; }
.cd-crew-choice-card.is-selected .cd-crew-choice-icon { background: var(--cd-blue); }
.cd-crew-choice-title { font-size: 0.95rem; font-weight: 700; color: var(--cd-text-primary); margin: 0 0 0.1rem; }
.cd-crew-choice-desc { font-size: 0.775rem; color: var(--cd-text-muted); margin: 0; line-height: 1.4; }
.cd-crew-choice-radio { width: 1.1rem; height: 1.1rem; margin-left: auto; flex-shrink: 0; accent-color: var(--cd-blue); cursor: pointer; }
.cd-crew-choice-body { display: none; padding: 0.75rem 1.25rem 1.25rem; border-top: 1px solid var(--cd-border); animation: cdFadeIn 0.18s ease; }
.cd-crew-choice-card.is-selected .cd-crew-choice-body { display: block; }
@keyframes cdFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.cd-crew-name-hint { background: var(--cd-warning-light); border: 1.5px solid var(--cd-warning-border, #fcd34d); border-radius: var(--cd-radius-sm); padding: 0.45rem 0.625rem; font-size: 0.78rem; color: var(--cd-warning-text); margin-top: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.cd-crew-locked { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; background: var(--cd-blue-light); border: 1.5px solid var(--cd-blue-border); border-radius: var(--cd-radius-lg); margin-bottom: 1.25rem; }
.cd-crew-locked-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--cd-radius-md); background: var(--cd-blue); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.cd-invite-expander { border: 1.5px solid var(--cd-border); border-radius: var(--cd-radius-lg); background: white; margin-bottom: 1.25rem; overflow: hidden; }
.cd-invite-expander-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.25rem; cursor: pointer; user-select: none; }
.cd-invite-expander-header:hover { background: var(--cd-bg); }
.cd-invite-expander-body { padding: 0.75rem 1.25rem 1.25rem; border-top: 1px solid var(--cd-border); }
.cd-invite-expander-body.is-hidden { display: none; }
.cd-chevron { font-size: 0.75rem; color: var(--cd-text-muted); transition: transform 0.2s ease; display: inline-block; }
.cd-chevron.is-open { transform: rotate(180deg); }
/* Card header row — title + action on same line */
.cd-card-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--cd-border-dark);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.cd-card-header h2,
.cd-card-header h3 {
font-size: 1rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0;
}
/* Step cards (homepage Create/Share/Decide) */
.cd-step-card {
display: block;
background: var(--cd-white);
border-radius: var(--cd-radius-xl);
border: 1px solid var(--cd-border);
padding: 1.5rem;
text-align: center;
text-decoration: none;
color: inherit;
transition: var(--cd-transition-all);
}
.cd-step-card:hover {
transform: scale(1.04);
box-shadow: var(--cd-shadow-hover);
border-color: var(--cd-blue-border);
text-decoration: none;
}
.cd-step-card .cd-step-icon {
display: inline-block;
font-size: 1.75rem;
margin-bottom: 0.5rem;
transition: transform var(--cd-transition);
}
.cd-step-card:hover .cd-step-icon {
transform: scale(1.12);
}
.cd-step-card h3 {
font-size: 0.9rem;
font-weight: 700;
color: var(--cd-text-primary);
margin-bottom: 0.4rem;
}
.cd-step-card p {
font-size: 0.8rem;
color: var(--cd-text-muted);
line-height: 1.6;
margin: 0;
}
/* ============================================================
4. BUTTONS
============================================================
.cd-btn Base button reset + shared styles
.cd-btn-primary Blue filled (main CTA)
.cd-btn-secondary White outlined (cancel, secondary)
.cd-btn-danger Red filled (destructive)
.cd-btn-danger-outline Red outlined (softer destructive)
.cd-btn-ghost Text only, no border
.cd-btn-sm Smaller size modifier
.cd-btn-xs Extra small (table actions)
.cd-btn-full Full width modifier
============================================================ */
.cd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.6rem 1.25rem;
border-radius: var(--cd-radius-md);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background var(--cd-transition),
border-color var(--cd-transition),
color var(--cd-transition),
transform var(--cd-transition);
border: 1px solid transparent;
text-decoration: none;
white-space: nowrap;
line-height: 1;
}
.cd-btn:active {
transform: scale(0.98);
}
.cd-btn-primary {
background: var(--cd-blue);
color: white;
border-color: var(--cd-blue);
}
.cd-btn-primary:hover {
background: var(--cd-blue-hover);
border-color: var(--cd-blue-hover);
text-decoration: none;
color: white;
}
.cd-btn-secondary {
background: var(--cd-white);
color: var(--cd-text-body);
border-color: var(--cd-border);
}
/* Light-blue "Sign in" buttons (header nav + the shared-poll signup
gate). Previously styled with inline style="" attributes, which is
exactly why hover never worked — an inline style always wins over a
class-based :hover rule for the same property, no matter what CSS is
added. Moving the colors into real classes is what makes the hover
state possible at all, not just a matter of picking a color. */
.cd-nav-signin-btn {
border: 1.5px solid var(--cd-blue-border);
color: var(--cd-blue);
background: var(--cd-blue-light);
transition: background 0.15s ease;
}
.cd-nav-signin-btn:hover {
background: rgb(219, 234, 254);
}
.cd-poll-signin-btn {
background: rgb(219, 234, 254);
border-color: var(--cd-blue-border);
color: var(--cd-blue);
transition: background 0.15s ease;
}
.cd-poll-signin-btn:hover {
background: var(--cd-blue-border);
}
.cd-btn-secondary:hover {
background: var(--cd-bg);
text-decoration: none;
color: var(--cd-text-body);
}
/* Manage dropdown button — matches secondary buttons exactly */
.cd-btn-manage {
border-color: var(--cd-border);
color: var(--cd-text-body);
}
.cd-btn-manage:hover {
border-color: #94a3b8;
color: var(--cd-text-body);
background: var(--cd-bg);
}
.cd-btn-danger {
background: var(--cd-danger);
color: white;
border-color: var(--cd-danger);
}
.cd-btn-danger:hover {
background: rgb(185, 28, 28);
text-decoration: none;
color: white;
}
.cd-btn-warning {
background: var(--cd-warning-text);
color: white;
border-color: var(--cd-warning-text);
}
.cd-btn-warning:hover {
background: rgb(120, 53, 15);
border-color: rgb(120, 53, 15);
}
.cd-btn-danger-outline {
background: var(--cd-danger-light);
color: var(--cd-danger);
border-color: var(--cd-danger-border);
}
.cd-btn-danger-outline:hover {
background: rgb(254, 226, 226);
text-decoration: none;
color: var(--cd-danger);
}
.cd-btn-success-outline {
background: var(--cd-green-light);
color: var(--cd-green-dark);
border-color: var(--cd-green-border);
}
.cd-btn-dashboard {
background: var(--cd-green-light);
color: rgb(30, 60, 30);
border: 1.5px solid rgb(134, 194, 134);
font-weight: 600;
letter-spacing: 0.01em;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.cd-btn-dashboard:hover {
background: rgb(220, 245, 220);
border-color: var(--cd-green-dark);
color: rgb(16, 48, 16);
box-shadow: 0 2px 8px rgba(22, 163, 74, 0.2);
transform: translateY(-1px);
}
.cd-btn-dashboard:active {
transform: translateY(0);
box-shadow: none;
}
.cd-btn-ghost {
background: none;
border-color: transparent;
color: var(--cd-text-muted);
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.cd-btn-ghost:hover {
color: var(--cd-text-body);
text-decoration: none;
}
/* Size modifiers */
.cd-btn-sm {
padding: 0.4rem 0.875rem;
font-size: 0.8rem;
border-radius: var(--cd-radius);
}
.cd-btn-xs {
padding: 0.25rem 0.6rem;
font-size: 0.7rem;
border-radius: var(--cd-radius-sm);
}
.cd-btn-full {
width: 100%;
}
.cd-btn-lg {
padding: 0.875rem 1.75rem;
font-size: 1rem;
border-radius: var(--cd-radius-xl);
}
/* ── Hero-sized buttons (homepage CTAs) ─────────────────────────
Same radius as cd-btn base (0.75rem) — matches the rest of the site.
Larger padding and font than cd-btn-lg.
Lift + shadow on hover, snap on click.
──────────────────────────────────────────────────────────────── */
.cd-btn-hero-lg {
padding: 0.875rem 1.75rem;
font-size: 1rem;
font-weight: 700;
border-radius: var(--cd-radius-md);
transition: background 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
}
.cd-btn-hero-lg:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(37, 93, 209, 0.28);
}
.cd-btn-hero-lg:active {
transform: translateY(0) scale(0.98);
box-shadow: none;
}
/* White with blue border — hero secondary (on light background) */
.cd-btn-outline-blue {
background: white;
color: var(--cd-blue);
border: 2px solid var(--cd-blue);
}
.cd-btn-outline-blue:hover {
background: var(--cd-blue-light);
color: var(--cd-blue);
border-color: var(--cd-blue);
text-decoration: none;
}
/* White fill — CTA on dark/blue background */
.cd-btn-cta-white {
background: white;
color: var(--cd-blue);
border: 2px solid white;
}
.cd-btn-cta-white:hover {
background: var(--cd-blue-light);
border-color: var(--cd-blue-light);
color: var(--cd-blue);
text-decoration: none;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
/* Ghost on dark — CTA secondary on blue background */
.cd-btn-cta-ghost {
background: rgba(255,255,255,0.12);
color: white;
border: 2px solid rgba(255,255,255,0.35);
}
.cd-btn-cta-ghost:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.6);
color: white;
text-decoration: none;
}
/* ============================================================
5. FORM ELEMENTS
============================================================ */
.cd-input {
width: 100%;
border: 1px solid var(--cd-border-input);
border-radius: var(--cd-radius-md);
padding: 0.6rem 1rem;
font-size: 0.875rem;
color: var(--cd-text-primary);
background: var(--cd-white);
transition: border-color var(--cd-transition),
box-shadow var(--cd-transition);
outline: none;
font-family: inherit;
}
.cd-input:focus {
border-color: var(--cd-blue);
box-shadow: 0 0 0 3px rgba(37, 93, 209, 0.12);
}
.cd-input::placeholder {
color: var(--cd-text-subtle);
}
/* Input with prefix symbol (e.g. @ for username) */
.cd-input-prefix-wrap {
display: flex;
align-items: center;
border: 1px solid var(--cd-border-input);
border-radius: var(--cd-radius-md);
background: var(--cd-white);
overflow: hidden;
transition: border-color var(--cd-transition), box-shadow var(--cd-transition);
}
.cd-input-prefix-wrap:focus-within {
border-color: var(--cd-blue);
box-shadow: 0 0 0 3px rgba(37, 93, 209, 0.12);
}
.cd-input-prefix {
padding: 0.6rem 0.6rem 0.6rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--cd-text-muted);
background: transparent;
flex-shrink: 0;
user-select: none;
}
.cd-input-has-prefix {
border: none;
border-radius: 0;
padding-left: 0.25rem;
box-shadow: none;
flex: 1;
min-width: 0;
}
.cd-input-has-prefix:focus {
border: none;
box-shadow: none;
outline: none;
}
.cd-textarea {
width: 100%;
border: 1px solid var(--cd-border-input);
border-radius: var(--cd-radius-md);
padding: 0.6rem 1rem;
font-size: 0.875rem;
color: var(--cd-text-primary);
background: var(--cd-white);
transition: border-color var(--cd-transition), box-shadow var(--cd-transition);
outline: none;
resize: vertical;
min-height: 80px;
box-sizing: border-box;
font-family: inherit;
line-height: 1.5;
}
.cd-textarea:focus {
border-color: var(--cd-blue);
box-shadow: 0 0 0 3px var(--cd-blue-light);
}
.cd-select {
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='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2.25rem;
}
.cd-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--cd-text-primary);
margin-bottom: 0.375rem;
margin-top: 0;
}
.cd-label-hint {
font-weight: 400;
color: var(--cd-text-subtle);
margin-left: 0.25rem;
}
.cd-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-bottom: 1rem;
}
.cd-field-hint {
font-size: 0.75rem;
color: var(--cd-text-muted);
margin-top: 0.1rem;
}
/* Radio option with label block */
.cd-radio-option {
display: flex;
align-items: flex-start;
gap: 0.6rem;
cursor: pointer;
}
.cd-radio-option input[type="radio"],
.cd-radio-option input[type="checkbox"] {
margin-top: 0.2rem;
accent-color: var(--cd-blue);
flex-shrink: 0;
}
.cd-radio-option-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--cd-text-primary);
}
.cd-radio-option-desc {
font-size: 0.75rem;
color: var(--cd-text-muted);
margin-top: 0.1rem;
}
/* ============================================================
6. BADGES & STATUS PILLS
============================================================ */
.cd-badge {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.5rem;
border-radius: var(--cd-radius-full);
font-size: 0.7rem;
font-weight: 700;
border: 1px solid transparent;
white-space: nowrap;
}
.cd-badge-live {
background: var(--cd-green-light);
color: var(--cd-green-dark);
border-color: var(--cd-green-border);
}
.cd-badge-closed {
background: var(--cd-bg);
color: var(--cd-text-muted);
border-color: var(--cd-border);
}
.cd-badge-pending {
background: var(--cd-warning-light);
color: var(--cd-warning-text);
border-color: rgb(253, 230, 138);
}
.cd-badge-approved {
background: var(--cd-green-light);
color: var(--cd-green-dark);
border-color: var(--cd-green-border);
}
.cd-badge-rejected {
background: var(--cd-danger-light);
color: var(--cd-danger);
border-color: var(--cd-danger-border);
}
.cd-badge-private {
background: var(--cd-bg);
color: var(--cd-text-muted);
border-color: var(--cd-border);
}
.cd-badge-admin {
background: var(--cd-blue-light);
color: var(--cd-blue);
border-color: var(--cd-blue-border);
}
.cd-badge-owner {
background: var(--cd-blue-light);
color: var(--cd-blue);
border-color: var(--cd-blue-border);
}
.cd-badge-member {
background: var(--cd-bg);
color: var(--cd-text-muted);
border-color: var(--cd-border);
}
.cd-badge-edited {
font-size: 0.65rem;
font-weight: 600;
color: var(--cd-text-muted);
background: var(--cd-bg-hover);
padding: 0.1rem 0.4rem;
border-radius: var(--cd-radius-full);
border: 1px solid var(--cd-border);
vertical-align: middle;
}
.cd-badge-founding {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: var(--cd-warning-light);
color: var(--cd-warning-text);
border: 1px solid var(--cd-warning-border, #fcd34d);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.03em;
padding: 2px 8px;
border-radius: var(--cd-radius-full);
}
/* ============================================================
7. ALERTS & FLASH MESSAGES
============================================================ */
/* ── Page tab navigation ──────────────────────────────────────────── */
.cd-tab-nav {
display: flex;
gap: 0;
border-bottom: 2px solid var(--cd-border);
flex-wrap: wrap;
}
.cd-tab-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1.1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--cd-text-muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.cd-tab-link:hover { color: var(--cd-text-primary); }
.cd-tab-link.is-active {
color: var(--cd-blue);
border-bottom-color: var(--cd-blue);
}
.cd-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.3rem;
border-radius: var(--cd-radius-full);
background: var(--cd-blue);
color: white;
font-size: 0.65rem;
font-weight: 800;
line-height: 1;
}
.cd-tab-link.is-active .cd-tab-count {
background: var(--cd-blue);
color: white;
}
.cd-alert {
padding: 0.75rem 1rem;
border-radius: var(--cd-radius-md);
font-size: 0.875rem;
font-weight: 500;
border: 1px solid transparent;
margin-bottom: 1rem;
}
.cd-alert-success {
background: var(--cd-green-light);
color: var(--cd-green-dark);
border-color: var(--cd-green-border);
font-weight: 600;
}
.cd-alert-error {
background: var(--cd-danger-light);
color: rgb(153, 27, 27);
border-color: var(--cd-danger-border);
}
.cd-alert-info {
background: var(--cd-blue-light);
color: var(--cd-blue);
border-color: var(--cd-blue-border);
}
.cd-alert-muted {
background: var(--cd-bg);
color: var(--cd-text-body);
border-color: var(--cd-border);
}
.cd-alert-warning {
background: var(--cd-warning-light);
color: var(--cd-warning-text);
border-color: var(--cd-warning-text);
}
/* ============================================================
8. MODALS & OVERLAYS
============================================================ */
.cd-modal-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15, 23, 42, 0.6);
align-items: center;
justify-content: center;
padding: 1rem;
}
.cd-modal-backdrop.is-open {
display: flex;
}
.cd-modal {
background: var(--cd-white);
border-radius: var(--cd-radius-xl);
padding: 2rem;
width: 100%;
max-width: 480px;
box-shadow: var(--cd-shadow-modal);
}
.cd-modal-sm {
max-width: 420px;
}
.cd-modal-lg {
max-width: 600px;
}
.cd-modal h3 {
font-size: 1.125rem;
font-weight: 700;
color: var(--cd-text-primary);
margin-bottom: 0.75rem;
}
.cd-modal-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
margin-top: 1.5rem;
}
/* ============================================================
9. NAVIGATION
============================================================ */
/* Admin top bar nav links */
.cd-admin-nav-link {
padding: 0.3rem 0.75rem;
border-radius: var(--cd-radius-sm);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
color: rgba(255, 255, 255, 0.85);
transition: background var(--cd-transition), color var(--cd-transition);
}
.cd-admin-nav-link:hover {
background: rgba(255, 255, 255, 0.15);
color: white;
text-decoration: none;
}
.cd-admin-nav-link.is-active {
background: rgba(255, 255, 255, 0.15);
color: white;
}
/* ============================================================
10. TABLES (Admin)
============================================================ */
.cd-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.cd-table th {
padding: 0.75rem 1.25rem;
text-align: left;
font-weight: 700;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--cd-text-body);
background: var(--cd-bg);
}
.cd-table td {
padding: 0.875rem 1.25rem;
border-top: 1px solid var(--cd-bg-hover);
color: var(--cd-text-body);
vertical-align: middle;
}
.cd-table tbody tr:hover td {
background: var(--cd-bg);
}
.cd-table-actions {
display: flex;
gap: 0.4rem;
justify-content: flex-end;
}
/* Empty state inside table */
.cd-table-empty {
padding: 2.5rem;
text-align: center;
color: var(--cd-text-subtle);
font-size: 0.875rem;
}
/* ============================================================
11. HOMEPAGE COMPONENTS
============================================================ */
/* Community poll feed row */
.cd-feed-row {
background: var(--cd-white);
border-radius: var(--cd-radius-lg);
border: 1px solid var(--cd-border);
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
position: relative;
transition: border-color var(--cd-transition), box-shadow var(--cd-transition);
}
.cd-feed-row:hover {
border-color: var(--cd-blue-border);
box-shadow: var(--cd-shadow-hover);
}
/* Whole-card click target (community poll cards). The stretched link
covers the entire row; every real in the row needs to sit above
it or it would swallow their clicks too. Cursor is inherited from
the stretched link itself, so the row shows a pointer everywhere. */
.cd-feed-row a {
position: relative;
z-index: 2;
}
/* Two classes beats ".cd-feed-row a" (class+element) in specificity — this
has to win over the rule above, or the stretched link inherits
position:relative/z-index:2 from being an inside .cd-feed-row and
never actually stretches across the card. */
.cd-feed-row .cd-card-stretched-link {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.cd-feed-row-title {
font-size: 1rem;
font-weight: 700;
color: var(--cd-text-primary);
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cd-feed-row-desc {
font-size: 0.8rem;
color: var(--cd-text-muted);
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cd-feed-row-meta {
font-size: 0.75rem;
color: var(--cd-text-subtle);
}
/* ============================================================
12. UTILITY HELPERS
============================================================ */
/* Section heading with muted subtitle inline */
.cd-section-heading {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cd-section-heading h2 {
font-size: 1.375rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0;
}
.cd-section-heading span {
font-size: 0.8rem;
color: var(--cd-text-muted);
}
/* Divider */
.cd-divider {
border: none;
border-top: 1px solid var(--cd-border-dark);
margin: 1.25rem 0;
}
/* Avatar circle */
.cd-avatar {
width: 2rem;
height: 2rem;
border-radius: var(--cd-radius-full);
background: var(--cd-blue-light);
color: var(--cd-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
flex-shrink: 0;
}
.cd-avatar-lg {
width: 3rem;
height: 3rem;
font-size: 1.25rem;
font-weight: 800;
}
/* Member row */
.cd-member-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0;
}
/* Inline form row */
.cd-form-row {
display: flex;
gap: 0.5rem;
align-items: flex-start;
flex-wrap: wrap;
}
/* Max widths for form pages */
.cd-max-form {
max-width: 640px;
margin: 0 auto;
}
.cd-max-narrow {
max-width: 480px;
margin: 0 auto;
}
/* Progress bar */
.cd-progress-track {
height: 8px;
background: var(--cd-bg-hover);
border-radius: var(--cd-radius-full);
overflow: hidden;
}
.cd-progress-bar {
height: 100%;
border-radius: var(--cd-radius-full);
background: var(--cd-blue);
transition: width 0.5s ease;
}
.cd-progress-bar-low {
background: rgb(147, 197, 253);
}
/* Typeahead dropdown */
.cd-typeahead {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--cd-white);
border: 1px solid var(--cd-border-input);
border-radius: var(--cd-radius);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 100;
overflow: hidden;
margin-top: 2px;
}
.cd-typeahead-item {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.6rem 0.875rem;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background var(--cd-transition);
border-bottom: 1px solid var(--cd-border-dark);
}
.cd-typeahead-item:last-child {
border-bottom: none;
}
.cd-typeahead-item:hover {
background: var(--cd-blue-light);
}
/* Empty state */
.cd-empty {
padding: 2.5rem;
text-align: center;
color: var(--cd-text-subtle);
}
.cd-empty-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.cd-empty h3 {
font-size: 1rem;
font-weight: 700;
color: var(--cd-text-primary);
margin-bottom: 0.25rem;
}
.cd-empty p {
font-size: 0.875rem;
color: var(--cd-text-subtle);
}
/* ============================================================
13. LEGAL PAGES
============================================================ */
.cd-legal-sections {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.cd-legal-sections .cd-card-lg h2 {
font-size: 1rem;
font-weight: 700;
color: var(--cd-text-primary);
margin-bottom: 0.75rem;
}
.cd-legal-sections .cd-card-lg p {
font-size: 0.875rem;
color: var(--cd-text-body);
line-height: 1.75;
margin: 0;
}
/* ── Upsell Card ─────────────────────────────────────────────────────────── */
.cd-upsell-card {
background: linear-gradient(135deg, rgb(37,99,235), rgb(29,78,216));
border-radius: 1.5rem;
padding: 1.75rem;
color: white;
box-shadow: 0 4px 24px rgba(37,99,235,0.25);
box-sizing: border-box;
width: 100%;
}
.cd-upsell-card-label {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #74c365;
margin: 0 0 0.5rem 0;
}
.cd-upsell-card-title {
font-size: 1.2rem;
font-weight: 800;
color: white;
margin: 0 0 0.35rem 0;
line-height: 1.3;
}
.cd-upsell-card-sub {
font-size: 0.8rem;
color: rgba(255,255,255,0.75);
margin: 0 0 1.25rem 0;
}
.cd-upsell-card-list {
list-style: none;
margin: 0 0 1.25rem 0;
padding: 0;
}
.cd-upsell-card-list li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.82rem;
color: rgba(255,255,255,0.9);
line-height: 1.4;
margin-bottom: 0.6rem;
}
.cd-upsell-card-list li:last-child {
margin-bottom: 0;
}
.cd-upsell-check {
flex-shrink: 0;
min-width: 1rem;
width: 1rem;
height: 1rem;
margin-top: 0.15rem;
border-radius: 50%;
background: #74c365;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cd-upsell-check svg {
width: 0.6rem;
height: 0.6rem;
}
.cd-upsell-btn {
display: block;
width: 100%;
text-align: center;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
background: #74c365;
color: white;
font-weight: 800;
font-size: 0.9rem;
text-decoration: none;
box-sizing: border-box;
transition: background 0.15s;
border: none;
cursor: pointer;
}
.cd-upsell-btn:hover {
background: #5eaa50;
color: white;
text-decoration: none;
}
/* ============================================================
14. ACCOUNT PAGES
============================================================ */
/* Standard account page card with header */
.cd-account-card {
background: var(--cd-white);
border-radius: var(--cd-radius-xl);
border: 1px solid var(--cd-border);
overflow: hidden;
box-shadow: var(--cd-shadow-soft);
}
.cd-account-card-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--cd-border-dark);
background: var(--cd-bg);
}
.cd-account-card-header h2 {
font-size: 0.9rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 0.2rem;
}
.cd-account-card-header p {
font-size: 0.82rem;
color: var(--cd-text-muted);
margin: 0;
}
.cd-account-card-body {
padding: 1.5rem;
}
/* Danger variant — red border */
.cd-account-card-danger {
border: 2px solid var(--cd-danger-border);
}
.cd-account-card-danger .cd-account-card-header {
background: rgb(255, 250, 250);
border-bottom-color: rgb(254, 226, 226);
}
.cd-account-card-danger .cd-account-card-header h2 {
color: rgb(185, 28, 28);
}
.cd-account-card-danger .cd-account-card-header p {
color: rgb(153, 27, 27);
}
/* Feature list used in settings (deactivate/delete) */
.cd-feature-list {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.82rem;
color: var(--cd-text-body);
}
.cd-feature-list li {
display: flex;
align-items: center;
gap: 0.5rem;
}
.cd-feature-list .cd-feature-yes { color: var(--cd-green-dark); font-weight: 700; }
.cd-feature-list .cd-feature-warn { color: rgb(251, 146, 60); font-weight: 700; }
.cd-feature-list .cd-feature-no { color: var(--cd-danger); font-weight: 700; }
/* Confirm delete input */
.cd-input-danger {
border-color: var(--cd-danger-border);
font-family: monospace;
}
.cd-input-danger:focus {
border-color: var(--cd-danger);
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
/* Read-only info grid (profile page) */
.cd-info-grid {
background: var(--cd-bg);
border-radius: var(--cd-radius-md);
padding: 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.cd-info-grid-label {
font-size: 0.7rem;
color: var(--cd-text-subtle);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
}
.cd-info-grid-value {
font-size: 0.85rem;
color: var(--cd-surface);
font-weight: 500;
}
.cd-info-grid-hint {
font-size: 0.7rem;
color: var(--cd-text-subtle);
margin-top: 0.15rem;
}
/* Back / navigation link */
.cd-back-link {
font-size: 0.875rem;
color: var(--cd-text-muted);
text-decoration: none;
}
.cd-back-link:hover {
color: var(--cd-text-body);
}
/* Page header block */
.cd-page-header {
margin-bottom: 0.25rem;
}
.cd-page-header h1 {
font-size: 1.875rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0 0 0.25rem;
}
.cd-page-header p {
font-size: 0.9rem;
color: var(--cd-text-muted);
margin: 0;
}
/* Modifier — used where a page-header needs to be centered (e.g. signup) */
.cd-page-header--center,
.cd-page-header--center h1,
.cd-page-header--center p {
text-align: center;
}
/* ============================================================
15. ONBOARDING
============================================================ */
.cd-onboard-card {
background: var(--cd-white);
border-radius: var(--cd-radius-xl);
border: 1px solid var(--cd-border);
padding: 1.5rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.cd-onboard-card.has-error {
border-color: var(--cd-danger-border);
}
.cd-onboard-card-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 0.2rem;
}
.cd-onboard-card-sub {
font-size: 0.78rem;
color: var(--cd-text-subtle);
margin: 0 0 1rem;
}
.cd-onboard-error {
font-size: 0.8rem;
color: var(--cd-danger);
font-weight: 600;
margin: 0 0 0.75rem;
}
.cd-onboard-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.875rem;
border-radius: var(--cd-radius-md);
border: 1px solid var(--cd-border);
cursor: pointer;
transition: border-color var(--cd-transition), background var(--cd-transition);
font-size: 0.85rem;
color: var(--cd-surface);
}
.cd-onboard-option:hover {
border-color: var(--cd-blue-border);
background: var(--cd-blue-light);
}
.cd-onboard-option input[type="checkbox"],
.cd-onboard-option input[type="radio"] {
width: 1rem;
height: 1rem;
accent-color: var(--cd-blue);
flex-shrink: 0;
}
/* Age dropdowns row */
.cd-birth-row {
display: flex;
gap: 0.75rem;
}
.cd-birth-row select {
flex: 1;
border: 1px solid var(--cd-border-input);
border-radius: var(--cd-radius-md);
padding: 0.65rem 1rem;
font-size: 0.875rem;
color: var(--cd-text-primary);
background: var(--cd-white);
font-family: inherit;
}
/* Pill-style radio (used for age range) */
.cd-pill-options {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.cd-pill-option {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
border-radius: var(--cd-radius-full);
border: 1px solid var(--cd-border);
cursor: pointer;
font-size: 0.82rem;
color: var(--cd-text-body);
transition: border-color var(--cd-transition), background var(--cd-transition);
}
.cd-pill-option:hover {
border-color: var(--cd-blue-border);
background: var(--cd-blue-light);
}
.cd-pill-option input[type="radio"] {
width: 0.875rem;
height: 0.875rem;
accent-color: var(--cd-blue);
}
/* ============================================================
16. CREATE POLL / SUCCESS
============================================================ */
/* Tips sidebar card */
.cd-tips-card {
background: var(--cd-white);
border-radius: var(--cd-radius-xl);
border: 1px solid var(--cd-border);
padding: 1.75rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.cd-tips-card-label {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cd-blue);
margin: 0 0 0.75rem;
}
.cd-tips-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cd-tip-item {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.cd-tip-icon {
font-size: 1.1rem;
line-height: 1;
flex-shrink: 0;
}
.cd-tip-title {
font-size: 0.82rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 0.15rem;
}
.cd-tip-desc {
font-size: 0.78rem;
color: var(--cd-text-muted);
margin: 0;
}
/* Crew upsell card on success page */
.cd-crew-upsell {
background: linear-gradient(135deg, rgb(15,23,42), rgb(30,41,59));
border-radius: var(--cd-radius-xl);
padding: 1.75rem;
color: white;
box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.cd-crew-upsell-label {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cd-blue-border);
margin: 0 0 0.5rem;
}
.cd-crew-upsell h2 {
font-size: 1.2rem;
font-weight: 800;
color: white;
margin: 0 0 0.5rem;
line-height: 1.3;
}
.cd-crew-upsell p {
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
margin: 0 0 1.25rem;
line-height: 1.6;
}
.cd-crew-upsell-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.cd-btn-crew-primary {
display: inline-block;
padding: 0.65rem 1.25rem;
border-radius: var(--cd-radius-md);
background: var(--cd-green);
color: var(--cd-text-primary);
font-weight: 800;
font-size: 0.875rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: background var(--cd-transition);
}
.cd-btn-crew-primary:hover {
background: var(--cd-green-dark);
color: white;
text-decoration: none;
}
.cd-btn-crew-ghost {
display: inline-block;
padding: 0.65rem 1.25rem;
border-radius: var(--cd-radius-md);
border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.8);
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: border-color var(--cd-transition), background var(--cd-transition);
}
.cd-btn-crew-ghost:hover {
border-color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.08);
color: white;
text-decoration: none;
}
/* Dashboard link card on success page */
.cd-success-dash-card {
background: var(--cd-white);
border-radius: var(--cd-radius-xl);
border: 1px solid var(--cd-border);
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
box-shadow: var(--cd-shadow-soft);
}
.cd-success-dash-card p:first-child {
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 0.2rem;
}
.cd-success-dash-card p:last-child {
font-size: 0.85rem;
color: var(--cd-text-muted);
margin: 0;
}
/* Onboarding welcome header */
.cd-onboard-header {
text-align: center;
padding: 2rem 0 1.75rem;
}
.cd-onboard-icon {
width: 4rem;
height: 4rem;
border-radius: var(--cd-radius-full);
background: var(--cd-blue-light);
border: 2px solid var(--cd-blue-border);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.cd-onboard-icon svg {
width: 1.75rem;
height: 1.75rem;
color: var(--cd-blue);
}
.cd-onboard-header h1 {
font-size: 1.75rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0 0 0.4rem;
}
.cd-onboard-header p {
font-size: 0.9rem;
color: var(--cd-text-muted);
margin: 0;
}
/* ========================================================================
PHASE 1: Crew-Based Polling Additions
======================================================================== */
/* Utility: hidden state */
.hidden {
display: none !important;
}
/* Admin badge styles */
.badge-owner {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: 9999px;
font-size: 0.65rem;
font-weight: 600;
background: rgb(239, 246, 255);
color: rgb(37, 93, 209);
border: 1px solid rgb(179, 212, 255);
}
.badge-admin {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: 9999px;
font-size: 0.65rem;
font-weight: 600;
background: rgb(240, 253, 244);
color: rgb(22, 163, 74);
border: 1px solid rgb(187, 247, 208);
}
.badge-member {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: 9999px;
font-size: 0.65rem;
font-weight: 600;
background: rgb(243, 244, 246);
color: rgb(75, 85, 99);
border: 1px solid rgb(209, 213, 219);
}
/* Moderation queue styles */
.flag-item {
padding: 1.5rem;
border-bottom: 1px solid rgb(241, 245, 249);
}
.flag-item:last-child {
border-bottom: none;
}
.flag-reason-box {
background: rgb(249, 250, 251);
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid rgb(226, 232, 240);
margin-bottom: 1rem;
}
.flag-content-preview {
background: rgb(249, 250, 251);
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid rgb(226, 232, 240);
word-break: break-word;
}
.flag-content-preview p {
color: rgb(71, 85, 105);
font-size: 0.875rem;
}
.flag-content-preview p strong {
font-weight: 600;
}
.flag-action-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-shrink: 0;
}
.flag-action-buttons input,
.flag-action-buttons button {
font-size: 0.875rem;
}
.btn-delete {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background: rgb(220, 38, 38);
color: white;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.2s ease;
}
.btn-delete:hover {
background: rgb(185, 28, 28);
}
.btn-approve {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background: rgb(226, 232, 240);
color: rgb(71, 85, 105);
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.2s ease;
}
.btn-approve:hover {
background: rgb(203, 213, 225);
}
/* Crew member table styles */
.crew-members-table {
width: 100%;
border-collapse: collapse;
}
.crew-members-table thead tr {
border-bottom: 1px solid rgb(226, 232, 240);
}
.crew-members-table th {
text-align: left;
padding: 0.75rem;
font-weight: 600;
color: rgb(71, 85, 105);
font-size: 0.875rem;
}
.crew-members-table tbody tr {
border-bottom: 1px solid rgb(241, 245, 249);
}
.crew-members-table td {
padding: 0.75rem;
}
.crew-members-table tbody tr:last-child {
border-bottom: none;
}
/* Empty state */
.empty-state {
padding: 3rem;
text-align: center;
}
.empty-state-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.empty-state h3 {
font-size: 1.125rem;
font-weight: 700;
color: rgb(15, 23, 42);
margin-bottom: 0.5rem;
}
.empty-state p {
color: rgb(100, 116, 139);
font-size: 0.875rem;
}
/* Alert/notification styles */
.alert-error {
background: rgb(254, 242, 242);
border: 1px solid rgb(254, 202, 202);
color: rgb(153, 27, 27);
padding: 0.75rem 1rem;
border-radius: 0.75rem;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.alert-success {
background: rgb(240, 253, 244);
border: 1px solid rgb(187, 247, 208);
color: rgb(22, 163, 74);
padding: 0.75rem 1rem;
border-radius: 0.75rem;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.alert-info {
background: rgb(239, 246, 255);
border: 1px solid rgb(191, 219, 254);
color: rgb(37, 93, 209);
padding: 0.75rem 1rem;
border-radius: 0.75rem;
margin-bottom: 1rem;
font-size: 0.875rem;
}
/* Crew selection dropdown */
.crew-select-container {
margin-bottom: 1.5rem;
}
.crew-select-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: rgb(15, 23, 42);
}
.crew-select-label .required {
color: rgb(220, 38, 38);
}
.crew-select-label .optional {
color: rgb(107, 114, 128);
font-weight: 400;
}
/* No crews state */
.no-crews-message {
background: rgb(254, 242, 242);
border: 1px solid rgb(254, 202, 202);
padding: 1rem;
border-radius: 0.75rem;
color: rgb(153, 27, 27);
}
.no-crews-message a {
display: inline-block;
margin-top: 0.5rem;
color: rgb(59, 130, 246);
text-decoration: underline;
}
/* Flex utilities for layouts */
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-column {
display: flex;
flex-direction: column;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
.flag-item {
flex-direction: column;
}
.flag-action-buttons {
flex-direction: row;
margin-top: 1rem;
}
.crew-members-table {
font-size: 0.875rem;
}
.crew-members-table th,
.crew-members-table td {
padding: 0.5rem;
}
}
/* ============================================================
Phase 2 CSS Additions
============================================================ */
/* Community Gallery Styles */
.cd-gallery-card {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
}
.cd-gallery-item {
background: white;
border: 1px solid rgb(226, 232, 240);
border-radius: 0.75rem;
padding: 1.5rem;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cd-gallery-item:hover {
box-shadow: var(--cd-shadow-hover);
transform: translateY(-2px);
}
.cd-gallery-badge {
display: inline-block;
background: rgb(239, 246, 255);
color: rgb(37, 93, 209);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgb(241, 245, 249);
}
.cd-gallery-title {
font-size: 1.125rem;
font-weight: 700;
color: rgb(15, 23, 42);
margin: 0 0 0.5rem;
}
.cd-gallery-description {
color: rgb(71, 85, 105);
font-size: 0.875rem;
margin: 0 0 1rem;
line-height: 1.5;
}
.cd-gallery-meta {
display: flex;
gap: 1.5rem;
margin: 1rem 0;
padding: 0.75rem 0;
border-top: 1px solid rgb(241, 245, 249);
border-bottom: 1px solid rgb(241, 245, 249);
}
.cd-gallery-stat {
text-align: center;
}
.cd-gallery-stat-label {
font-size: 0.7rem;
color: rgb(148, 163, 184);
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.25rem;
}
.cd-gallery-stat-value {
font-size: 1.5rem;
font-weight: 800;
color: rgb(37, 93, 209);
margin: 0;
}
/* Crew Management Styles */
.cd-crew-header {
margin-bottom: 2rem;
}
.cd-crew-title {
font-size: 1.875rem;
font-weight: 800;
color: rgb(15, 23, 42);
margin: 0 0 0.25rem;
}
.cd-crew-subtitle {
color: rgb(100, 116, 139);
margin: 0;
}
.cd-crew-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.cd-crew-stat-card {
background: white;
border: 1px solid rgb(226, 232, 240);
border-radius: 0.75rem;
padding: 1.5rem;
}
.cd-crew-stat-label {
font-size: 0.7rem;
color: rgb(148, 163, 184);
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5rem;
}
.cd-crew-stat-value {
font-size: 2rem;
font-weight: 800;
color: rgb(15, 23, 42);
margin: 0;
}
.cd-crew-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
@media (max-width: 1024px) {
.cd-crew-grid {
grid-template-columns: 1fr;
}
}
/* Join Request Queue */
.cd-join-request {
padding: 1rem 1.5rem;
border-bottom: 1px solid rgb(248, 250, 252);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.cd-join-request-info {
flex: 1;
}
.cd-join-request-name {
font-weight: 600;
color: rgb(15, 23, 42);
margin: 0 0 0.25rem;
}
.cd-join-request-handle {
color: rgb(100, 116, 139);
font-size: 0.875rem;
margin: 0;
}
.cd-join-request-actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
/* Lieutenant Assignment Panel */
.cd-lieutenant-current {
background: rgb(240, 253, 244);
border: 1px solid rgb(187, 247, 208);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
}
.cd-lieutenant-current-badge {
font-weight: 600;
color: rgb(22, 163, 74);
margin: 0 0 0.5rem;
}
.cd-lieutenant-permissions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cd-lieutenant-permission-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.cd-lieutenant-permission-item input[type="checkbox"] {
cursor: pointer;
}
.cd-lieutenant-permission-item label {
cursor: pointer;
color: rgb(71, 85, 105);
margin: 0;
}
/* Admin Showcase Queue */
.cd-showcase-item {
padding: 1.5rem;
border-bottom: 1px solid rgb(241, 245, 249);
}
.cd-showcase-item:last-child {
border-bottom: none;
}
.cd-showcase-title {
font-size: 1.125rem;
font-weight: 700;
color: rgb(15, 23, 42);
margin: 0 0 0.5rem;
}
.cd-showcase-crew {
color: rgb(100, 116, 139);
font-size: 0.875rem;
margin: 0 0 0.75rem;
}
.cd-showcase-description {
color: rgb(71, 85, 105);
font-size: 0.875rem;
margin: 0 0 1rem;
padding: 0.75rem;
background: rgb(248, 250, 252);
border-left: 3px solid rgb(37, 93, 209);
border-radius: 0.25rem;
}
.cd-showcase-meta {
display: flex;
gap: 2rem;
margin: 1rem 0;
padding: 0.75rem 0;
border-top: 1px solid rgb(241, 245, 249);
border-bottom: 1px solid rgb(241, 245, 249);
font-size: 0.875rem;
}
.cd-showcase-meta-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cd-showcase-meta-label {
font-size: 0.7rem;
color: rgb(148, 163, 184);
text-transform: uppercase;
font-weight: 700;
margin: 0;
}
.cd-showcase-meta-value {
font-weight: 600;
color: rgb(15, 23, 42);
margin: 0;
}
.cd-showcase-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1rem;
}
/* Modal Styles (Reject) */
/* Description Editor */
.cd-description-editor {
background: white;
border: 1px solid rgb(226, 232, 240);
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 2rem;
}
.cd-description-label {
font-weight: 700;
color: rgb(15, 23, 42);
margin: 0 0 1rem;
}
.cd-description-hint {
color: rgb(100, 116, 139);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.cd-char-count {
color: rgb(148, 163, 184);
font-size: 0.75rem;
margin: 0.5rem 0 1rem;
}
/* Search Bar */
.cd-search-container {
background: white;
border: 1px solid rgb(226, 232, 240);
border-radius: 0.75rem;
padding: 1.5rem;
margin-bottom: 2rem;
}
.cd-search-grid {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 1rem;
align-items: flex-end;
}
@media (max-width: 768px) {
.cd-search-grid {
grid-template-columns: 1fr;
}
}
/* Empty State */
.cd-empty-gallery {
text-align: center;
padding: 3rem 1.5rem;
background: white;
border: 1px solid rgb(226, 232, 240);
border-radius: 0.75rem;
}
.cd-empty-gallery-text {
font-size: 1.125rem;
color: rgb(100, 116, 139);
margin: 0;
}
.cd-empty-gallery-hint {
color: rgb(148, 163, 184);
font-size: 0.875rem;
margin: 0.5rem 0 0;
}
/* Responsive: Mobile */
@media (max-width: 768px) {
.cd-gallery-card {
grid-template-columns: 1fr;
}
.cd-crew-stats {
grid-template-columns: repeat(2, 1fr);
}
.cd-join-request {
flex-direction: column;
align-items: flex-start;
}
.cd-join-request-actions {
width: 100%;
}
.cd-showcase-meta {
flex-direction: column;
gap: 0.75rem;
}
}
/* ============================================================
14. CREW ADMIN COMPONENTS
============================================================ */
/* Solid green success button */
.cd-btn-success {
background: var(--cd-green-dark);
color: white;
border-color: var(--cd-green-dark);
}
.cd-btn-success:hover {
background: rgb(21, 128, 74);
border-color: rgb(21, 128, 74);
color: white;
text-decoration: none;
}
/* Stat card for crew admin dashboard */
.cd-stat-card {
background: var(--cd-white);
border-radius: var(--cd-radius-lg);
border: 1px solid var(--cd-border);
padding: 1.25rem 1.5rem;
box-shadow: var(--cd-shadow-soft);
}
.cd-stat-card-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cd-text-subtle);
margin: 0 0 0.35rem;
}
.cd-stat-card-value {
font-size: 2rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0;
line-height: 1;
}
.cd-stat-card-value.is-alert {
color: var(--cd-danger);
}
/* Lieutenant permissions checkbox list */
.cd-perm-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cd-perm-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--cd-text-body);
cursor: pointer;
}
.cd-perm-item input[type="checkbox"] {
accent-color: var(--cd-blue);
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
/* Crew admin grid layout */
.cd-crew-admin-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
@media (max-width: 768px) {
.cd-crew-admin-grid {
grid-template-columns: 1fr;
}
}
/* Stats row */
.cd-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
}
/* Lieutenant current badge panel */
.cd-lieutenant-panel {
background: var(--cd-green-light);
border: 1px solid var(--cd-green-border);
border-radius: var(--cd-radius-md);
padding: 1rem;
margin-bottom: 1rem;
}
/* Join request row */
.cd-join-request-row {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--cd-border-dark);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.cd-join-request-row:last-child {
border-bottom: none;
}
/* Badge for pending count on heading */
.cd-badge-count {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--cd-danger);
color: white;
font-size: 0.65rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: var(--cd-radius-full);
margin-left: 0.4rem;
vertical-align: middle;
}
/* ============================================================
15. SUB NAVIGATION
============================================================ */
.cd-subnav-bar {
background: var(--cd-bg);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-md);
margin-bottom: 1.25rem;
padding: 0;
display: flex;
overflow: hidden;
}
.cd-subnav-inner {
display: flex;
align-items: center;
gap: 0;
width: 100%;
}
.cd-subnav-back {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.5rem 1rem 0.5rem 0;
margin-right: 0.5rem;
border-right: 1px solid var(--cd-border);
font-size: 0.75rem;
font-weight: 500;
color: var(--cd-text-subtle);
text-decoration: none;
white-space: nowrap;
transition: color var(--cd-transition);
}
.cd-subnav-back:hover {
color: var(--cd-text-muted);
text-decoration: none;
}
.cd-subnav-links {
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.cd-subnav-links::-webkit-scrollbar {
display: none;
}
.cd-subnav-link {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.875rem;
font-size: 0.8rem;
font-weight: 500;
color: var(--cd-text-muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: color var(--cd-transition), border-color var(--cd-transition);
letter-spacing: 0.01em;
}
.cd-subnav-link:hover {
color: var(--cd-text-primary);
text-decoration: none;
background: var(--cd-bg-hover);
}
.cd-subnav-link.is-active {
color: var(--cd-blue);
border-bottom-color: var(--cd-blue);
font-weight: 600;
background: var(--cd-white);
}
/* ============================================================
Pill Nav (subnav.cfm app navigation)
============================================================ */
.cd-pill-nav {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 0.6rem 0;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--cd-border);
}
/* Remove last-child margin - not needed when wrapping */
.cd-pill-nav-link:last-child {
margin-right: 0;
}
.cd-pill-nav-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 14px;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
color: var(--cd-text-muted);
background: transparent;
border: 1px solid var(--cd-border);
transition: background var(--cd-transition), color var(--cd-transition), border-color var(--cd-transition);
}
.cd-pill-nav-link:hover {
background: var(--cd-bg-hover);
color: var(--cd-text-primary);
text-decoration: none;
}
.cd-pill-nav-link.is-active {
background: var(--cd-blue);
color: #fff;
border-color: var(--cd-blue);
}
/* Badge inside a pill nav link */
.cd-pill-nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 1px 7px;
font-size: 0.7rem;
font-weight: 700;
background: var(--cd-border);
color: var(--cd-text-muted);
}
.cd-pill-nav-link.is-active .cd-pill-nav-badge {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Pending-votes state: community tab highlighted blue when there are votes waiting */
.cd-pill-nav-link.has-pending {
background: var(--cd-blue-light);
color: var(--cd-blue);
border-color: var(--cd-blue-border);
}
.cd-pill-nav-link.has-pending .cd-pill-nav-badge {
background: var(--cd-blue);
color: #fff;
}
/* ============================================================
Admin Panel Components
============================================================ */
/* Stat cards on admin dashboard */
.cd-admin-stat-card {
background: var(--cd-white);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-lg);
padding: 0.875rem 1rem;
transition: transform 0.18s ease, box-shadow 0.18s ease;
text-decoration: none;
display: block;
cursor: pointer;
}
.cd-admin-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.cd-admin-stat-card:hover .cd-admin-stat-value {
color: var(--cd-blue);
}
.cd-admin-stat-card .cd-admin-stat-label {
font-size: 0.65rem;
font-weight: 700;
color: var(--cd-text-subtle);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.2rem;
}
.cd-admin-stat-card .cd-admin-stat-value {
font-size: 1.65rem;
font-weight: 800;
color: var(--cd-text-primary);
text-decoration: none;
display: block;
line-height: 1.1;
transition: color 0.18s ease;
}
.cd-admin-stat-card .cd-admin-stat-sub {
font-size: 0.7rem;
color: var(--cd-text-subtle);
margin-top: 0.2rem;
}
.cd-admin-stat-value-alert {
color: var(--cd-danger) !important;
}
/* Admin top nav links */
.cd-admin-nav-link {
padding: 0.3rem 0.75rem;
border-radius: var(--cd-radius-sm);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
color: rgba(255,255,255,0.85);
background: none;
transition: background var(--cd-transition);
}
.cd-admin-nav-link:hover {
background: rgba(255,255,255,0.1);
color: white;
}
.cd-admin-nav-link-active {
background: rgba(255,255,255,0.15);
color: white;
}
/* Status badges used across admin */
.cd-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: var(--cd-radius-full);
}
.cd-badge-pending { background: var(--cd-warning-light); color: var(--cd-warning-text); }
.cd-badge-approved { background: var(--cd-green-light); color: var(--cd-green-dark); }
.cd-badge-rejected { background: var(--cd-danger-light); color: var(--cd-danger); }
.cd-badge-inactive { background: rgb(241,245,249); color: var(--cd-text-muted); }
.cd-badge-admin { background: var(--cd-blue-light); color: var(--cd-blue); }
.cd-badge-moderator{ background: var(--cd-green-light); color: var(--cd-green-dark); }
.cd-badge-member { background: rgb(248,250,252); color: var(--cd-text-muted); }
.cd-badge-open { background: var(--cd-green-light); color: var(--cd-green-dark); }
.cd-badge-closed { background: rgb(248,250,252); color: var(--cd-text-muted); }
.cd-badge-showcased{ background: var(--cd-blue-light); color: var(--cd-blue); }
/* Crew badge as a link — resets default styling, adds a subtle
hover lift so it reads as clickable without looking like a button. */
.cd-crew-badge-link {
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.cd-crew-badge-link:hover {
background: var(--cd-blue);
color: var(--cd-white);
transform: translateY(-1px);
}
/* Admin grid layout for stat cards row */
.cd-admin-stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
margin-bottom: 2rem;
}
@media (max-width: 1024px) {
.cd-admin-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.cd-admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Admin two-column detail layout (content + sidebar) */
.cd-admin-detail-grid {
display: grid;
grid-template-columns: 1fr 280px;
gap: 1.5rem;
align-items: start;
}
@media (max-width: 900px) {
.cd-admin-detail-grid { grid-template-columns: 1fr; }
}
/* Admin action sidebar */
.cd-admin-action-panel {
background: var(--cd-white);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-lg);
padding: 1.25rem;
}
.cd-admin-action-panel h3 {
font-size: 0.875rem;
font-weight: 700;
color: var(--cd-text-primary);
margin-bottom: 1rem;
}
.cd-admin-action-section {
border-top: 1px solid var(--cd-border);
margin-top: 1rem;
padding-top: 1rem;
}
.cd-admin-action-section-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--cd-text-subtle);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.cd-admin-action-section-label-danger {
font-size: 0.7rem;
font-weight: 700;
color: var(--cd-danger);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.cd-admin-action-btn {
display: block;
width: 100%;
padding: 0.6rem;
border-radius: var(--cd-radius);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
text-align: center;
margin-bottom: 0.5rem;
border: 1px solid var(--cd-border);
background: var(--cd-white);
color: var(--cd-text-body);
transition: background var(--cd-transition), border-color var(--cd-transition);
}
.cd-admin-action-btn:hover {
background: var(--cd-bg-hover);
}
.cd-admin-action-btn-success {
border-color: var(--cd-green-border);
background: var(--cd-green-light);
color: var(--cd-green-dark);
}
.cd-admin-action-btn-success:hover {
background: rgb(220,252,231);
}
.cd-admin-action-btn-danger {
border-color: var(--cd-danger-border);
background: var(--cd-white);
color: var(--cd-danger);
}
.cd-admin-action-btn-danger:hover {
background: var(--cd-danger-light);
}
.cd-admin-action-btn-danger-solid {
border-color: var(--cd-danger);
background: var(--cd-danger);
color: var(--cd-white);
font-weight: 700;
}
.cd-admin-action-btn-danger-solid:hover {
background: rgb(185,28,28);
border-color: rgb(185,28,28);
}
/* Empty-state CTA — dark text, blue border, light blue hover */
.cd-btn-secondary-blue {
background: var(--cd-white) !important;
color: var(--cd-text-body) !important;
border: 1px solid var(--cd-blue) !important;
}
.cd-btn-secondary-blue:hover {
background: var(--cd-blue-light) !important;
color: var(--cd-text-body) !important;
border-color: var(--cd-blue) !important;
text-decoration: none;
}
/* Image upload preview */
.cd-img-preview {
margin-top: 0.5rem;
display: none;
}
.cd-img-preview-img {
max-height: 120px;
border-radius: var(--cd-radius);
border: 1px solid var(--cd-border);
display: block;
}
.cd-img-preview-size {
font-size: 0.75rem;
color: var(--cd-text-muted);
margin: 0.25rem 0 0;
}
/* Clickable stat card */
.cd-stat-card-link {
text-decoration: none;
display: block;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cd-stat-card-link:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.cd-stat-card-link:hover .cd-stat-card-value {
color: var(--cd-blue);
transition: color 0.18s ease;
}
.cd-stat-card-link .cd-stat-card-value {
transition: color 0.18s ease;
}
/* Invite list badges */
.cd-invite-badge {
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
border-radius: var(--cd-radius-full);
font-weight: 600;
flex-shrink: 0;
}
.cd-invite-badge-member {
background: var(--cd-blue-light);
color: var(--cd-blue);
}
.cd-invite-badge-new {
background: var(--cd-green-light);
color: var(--cd-green-dark);
}
/* ============================================================
Page Section Header — reusable centered title block
Used on Community Polls, gallery pages, etc.
============================================================ */
.cd-section-header {
text-align: center;
padding: 0.5rem 1rem 1.5rem;
}
.cd-section-header__title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 900;
color: var(--cd-text-primary);
margin: 0 0 0.4rem;
}
.cd-section-header__sub {
font-size: 1rem;
color: var(--cd-text-body);
max-width: 520px;
margin: 0 auto;
}
/* ============================================================
User Dropdown Menu
============================================================ */
.cd-dropdown {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.5rem);
width: 180px;
max-height: calc(100vh - 5rem);
overflow-x: hidden;
overflow-y: auto;
background: #ffffff;
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-xl);
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
z-index: 50;
}
.cd-dropdown.is-open {
display: block;
}
.cd-dropdown-identity {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--cd-border);
background: var(--cd-bg);
}
.cd-dropdown-identity-label {
font-size: 0.65rem;
font-weight: 600;
color: var(--cd-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 0.15rem;
}
.cd-dropdown-identity-name {
font-size: 0.875rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-dropdown-identity-username {
font-size: 0.75rem;
color: var(--cd-text-muted);
margin: 0;
}
.cd-dropdown-group {
padding: 0.25rem 0;
border-bottom: 1px solid var(--cd-border);
background: #ffffff;
}
.cd-dropdown-group:last-child {
border-bottom: none;
}
.cd-dropdown-item {
display: block;
padding: 0.5rem 1rem;
font-size: 0.825rem;
color: var(--cd-text-body);
text-decoration: none;
transition: background 0.12s ease;
background: #ffffff;
}
.cd-dropdown-item:hover {
background: var(--cd-blue-light);
color: var(--cd-blue);
}
.cd-dropdown-item--primary {
font-weight: 700;
color: var(--cd-blue);
padding: 0.625rem 1rem;
}
.cd-dropdown-item--primary:hover {
background: var(--cd-blue-light);
color: var(--cd-blue);
}
.cd-dropdown-item--admin {
font-weight: 700;
color: var(--cd-text-primary);
}
.cd-dropdown-item--danger {
color: var(--cd-danger);
}
.cd-dropdown-item--danger:hover {
background: #fff1f1;
color: var(--cd-danger);
}
/* ============================================================
User Avatar — cd-avatar system
Replaces initials circles consistently across the app.
Always circular. Falls back to initials if no photo.
============================================================ */
/* Base avatar — all sizes share these */
.cd-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--cd-blue);
color: #ffffff;
font-weight: 700;
flex-shrink: 0;
overflow: hidden;
line-height: 1;
user-select: none;
}
/* Size variants */
.cd-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.55rem; }
.cd-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.6rem; }
.cd-avatar--md { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
.cd-avatar--lg { width: 3rem; height: 3rem; font-size: 1rem; }
.cd-avatar--xl { width: 5rem; height: 5rem; font-size: 1.5rem; }
.cd-avatar--2xl { width: 7rem; height: 7rem; font-size: 2rem; }
/* Photo mode — img fills the circle */
.cd-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* Avatar upload UI */
.cd-avatar-upload-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border: 2px dashed var(--cd-border);
border-radius: var(--cd-radius-xl);
background: var(--cd-bg);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
text-align: center;
}
.cd-avatar-upload-area:hover,
.cd-avatar-upload-area.is-dragover {
border-color: var(--cd-blue);
background: var(--cd-blue-light);
}
.cd-avatar-upload-hint {
font-size: 0.78rem;
color: var(--cd-text-muted);
margin: 0;
}
.cd-avatar-upload-hint strong {
color: var(--cd-blue);
}
/* ============================================================
Avatar Upload Form — simple file input layout
============================================================ */
.cd-avatar-upload-form {
margin-bottom: 1rem;
}
.cd-avatar-file-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.4rem 0 0.35rem;
flex-wrap: wrap;
}
.cd-avatar-file-input {
flex: 1;
min-width: 0;
}
.cd-avatar-remove-form {
margin-top: 0.25rem;
}
/* ============================================================
Username availability feedback (HTMX checkUsername.cfm)
============================================================ */
.cd-username-feedback {
font-size: 0.78rem;
margin-top: 0.25rem;
display: block;
}
.cd-username-feedback:empty {
display: none;
}
.cd-username-feedback.available {
color: var(--cd-green-dark);
font-weight: 600;
}
.cd-username-feedback.taken {
color: var(--cd-danger);
font-weight: 600;
}
/* Password section hint */
.cd-password-hint {
font-size: 0.78rem;
color: var(--cd-text-muted);
margin-bottom: 1rem;
line-height: 1.5;
}
/* ============================================================
Auth Pages — forgot/reset password shared layout
============================================================ */
.cd-auth-wrap {
max-width: 420px;
margin: 0 auto;
padding: 1rem;
}
.cd-auth-card {
background: var(--cd-white);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-xl);
padding: 2rem;
box-shadow: var(--cd-shadow-card);
}
.cd-auth-title {
font-size: 1.75rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0 0 0.4rem;
}
.cd-auth-sub {
font-size: 0.875rem;
color: var(--cd-text-muted);
margin: 0 0 1.5rem;
}
.cd-auth-icon-wrap {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: var(--cd-blue-light);
border: 2px solid var(--cd-blue-border);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.cd-auth-icon {
width: 1.75rem;
height: 1.75rem;
color: var(--cd-blue);
}
.cd-auth-back {
display: inline-block;
margin-top: 1rem;
font-size: 0.875rem;
font-weight: 500;
}
.cd-auth-footer {
text-align: center;
margin-top: 1rem;
font-size: 0.875rem;
}
/* ============================================================
Generic Confirm Modal — reusable for deactivate, delete, etc.
============================================================ */
.cd-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 200;
align-items: center;
justify-content: center;
padding: 1rem;
}
.cd-modal-overlay.is-open {
display: flex;
}
.cd-confirm-modal {
width: min(400px, 95vw);
margin: auto;
}
.cd-confirm-modal-footer {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
padding-top: 1rem;
border-top: 1px solid var(--cd-border);
margin-top: 1rem;
}
/* Account Settings page helpers */
.cd-settings-step2 {
display: none;
}
.cd-settings-btn-row {
display: flex;
flex-direction: row;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.75rem;
}
/* ============================================================
Signup Page — agreement checkboxes and DOB
============================================================ */
.cd-signup-agreements {
background: var(--cd-bg);
border-radius: var(--cd-radius-lg);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cd-signup-check-label {
display: flex;
align-items: flex-start;
gap: 0.6rem;
cursor: pointer;
font-size: 0.825rem;
color: var(--cd-text-body);
line-height: 1.5;
}
.cd-signup-checkbox {
margin-top: 0.2rem;
accent-color: var(--cd-blue);
flex-shrink: 0;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.cd-inline-link {
background: none;
border: none;
padding: 0;
color: var(--cd-blue);
font-weight: 600;
font-size: inherit;
cursor: pointer;
text-decoration: underline;
}
.cd-inline-link:hover {
color: var(--cd-blue-hover);
}
.cd-tos-hint {
margin-left: 1.6rem;
}
.cd-required {
color: var(--cd-danger);
}
/* Date of birth dropdown row */
.cd-dob-row {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 0.5rem;
}
.cd-dob-select {
width: 100%;
}
/* ============================================================
Legal Pages — Terms of Service and Privacy Policy
============================================================ */
.cd-legal-header {
margin-bottom: 2rem;
}
.cd-legal-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 900;
color: var(--cd-text-primary);
margin: 0 0 0.4rem;
}
.cd-legal-meta {
font-size: 0.78rem;
color: var(--cd-text-subtle);
margin: 0.4rem 0 1rem;
}
.cd-legal-intro {
font-size: 0.925rem;
color: var(--cd-text-muted);
line-height: 1.7;
margin: 0;
}
.cd-legal-sections {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cd-legal-section {
background: var(--cd-white);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-xl);
padding: 1.5rem;
}
.cd-legal-section-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 0.75rem;
}
.cd-legal-section-body {
font-size: 0.875rem;
color: var(--cd-text-body);
line-height: 1.8;
margin: 0;
}
.cd-legal-footer {
margin-top: 2rem;
padding: 1.25rem;
background: var(--cd-bg);
border-radius: var(--cd-radius-xl);
text-align: center;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--cd-text-muted);
}
/* ============================================================
ToS Modal — signup page
============================================================ */
.cd-tos-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15,23,42,0.65);
backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
padding: 1rem;
}
.cd-tos-modal-overlay.is-open {
display: flex;
}
.cd-tos-modal {
background: var(--cd-white);
border-radius: var(--cd-radius-xl);
width: 100%;
max-width: 540px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}
.cd-tos-modal-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--cd-border);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.cd-tos-modal-title {
font-size: 1rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0;
}
.cd-tos-modal-body {
overflow-y: auto;
padding: 1.25rem 1.5rem;
flex: 1;
font-size: 0.8rem;
color: var(--cd-text-body);
line-height: 1.75;
}
.cd-tos-modal-meta {
font-size: 0.7rem;
color: var(--cd-text-subtle);
margin-bottom: 1rem;
}
.cd-tos-modal-alert {
background: var(--cd-blue-light);
border: 1px solid var(--cd-blue-border);
border-radius: var(--cd-radius-md);
padding: 0.75rem 1rem;
font-size: 0.8rem;
color: var(--cd-blue);
margin-bottom: 1.25rem;
line-height: 1.6;
}
.cd-tos-section-head {
font-weight: 700;
color: var(--cd-text-primary);
margin: 1rem 0 0.3rem;
font-size: 0.825rem;
}
.cd-tos-section-body {
margin-bottom: 0.25rem;
}
.cd-tos-modal-links {
font-size: 0.75rem;
color: var(--cd-text-subtle);
margin-top: 1.25rem;
}
.cd-tos-modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--cd-border);
flex-shrink: 0;
}
/* ============================================================
Signup Page Layout
============================================================ */
.cd-signup-wrap {
max-width: 520px;
margin: 0 auto;
}
.cd-signup-benefits-wrap {
max-width: 520px;
margin: 1.25rem auto 0;
}
.cd-signup-totally-free {
font-size: 0.8rem;
font-weight: 800;
color: rgba(255,255,255,0.85);
text-align: center;
margin: 0;
letter-spacing: 0.03em;
}
/* Invite context banner */
.cd-invite-banner {
background: var(--cd-blue-light);
border: 1px solid var(--cd-blue-border);
border-radius: var(--cd-radius-lg);
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
text-align: center;
}
.cd-invite-banner-title {
font-size: 1rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0 0 0.35rem;
}
.cd-invite-banner-sub {
font-size: 0.875rem;
color: var(--cd-text-muted);
margin: 0 0 1rem;
}
.cd-invite-banner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
text-align: left;
}
.cd-invite-banner-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--cd-text-body);
}
/* Signup card */
.cd-signup-card {
padding: 2rem;
position: relative;
overflow: hidden;
}
/* Gradient accent bar across the top edge of the card itself */
.cd-signup-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, var(--cd-blue), var(--cd-green));
}
/*
Full-bleed color backdrop behind the hero + card. "Break out of the
container" trick — width:100vw + negative margins based on viewport
width, not the parent's box model, so it works regardless of the
max-w-5xl/px-4 wrapper in layout_open.cfm. Scoped to this one wrapper;
doesn't touch anything else on the page or any other page.
*/
.cd-signup-backdrop {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 3rem 1rem 4rem;
background: radial-gradient(ellipse at top, var(--cd-blue-light) 0%, var(--cd-bg) 60%);
}
/* Backdrop is full-bleed; its content stays at the normal signup width */
.cd-signup-backdrop-inner {
max-width: 520px;
margin: 0 auto;
}
/* Alert variants with flex icon layout */
.cd-alert-flex {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.cd-alert-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
/* ToS hint agreed state */
.cd-tos-hint-agreed {
color: var(--cd-green-dark);
font-weight: 600;
}
/* Signup submit button */
.cd-btn-signup {
width: 100%;
padding: 0.875rem;
border-radius: var(--cd-radius-xl);
background: var(--cd-green);
color: #ffffff;
font-weight: 700;
font-size: 1rem;
border: none;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
letter-spacing: 0.01em;
}
.cd-btn-signup:hover {
background: var(--cd-green-dark);
}
.cd-btn-signup:active {
transform: scale(0.98);
}
/* Two-column form grid — always two columns, card width is the constraint */
.cd-form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.cd-form-grid-2 > * {
min-width: 0;
}
/* Stack on small phones only */
@media (max-width: 420px) {
.cd-form-grid-2 {
grid-template-columns: 1fr;
}
}
/* ============================================================
Homepage
============================================================ */
.cd-hero {
text-align: center;
padding: 2rem 1rem 1.5rem;
}
.cd-hero-eyebrow {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cd-blue);
margin: 0 0 1rem;
}
.cd-hero-h1 {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--cd-text-primary);
line-height: 1.1;
margin: 0 0 1.25rem;
}
.cd-hero-h1 em {
font-style: normal;
color: var(--cd-blue);
}
.cd-hero-sub {
font-size: 1.1rem;
color: var(--cd-text-muted);
max-width: 540px;
margin: 0 auto 0.75rem;
line-height: 1.7;
}
.cd-hero-18-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--cd-text-primary);
color: #ffffff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.3rem 0.75rem;
border-radius: var(--cd-radius-full);
margin-bottom: 1.25rem;
}
.cd-hero-cta-row {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.cd-hero-trust {
margin-top: 0.75rem;
font-size: 0.78rem;
color: var(--cd-text-muted);
}
/* 3-step cards row */
.cd-steps-section {
max-width: 860px;
margin: 0 auto 1.75rem;
padding: 0 1rem;
}
.cd-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
text-align: center;
}
@media (max-width: 600px) {
.cd-steps-grid {
grid-template-columns: 1fr;
}
}
/* 18+ section */
.cd-adults-section {
max-width: 860px;
margin: 0 auto 3.5rem;
padding: 0 1rem;
}
.cd-adults-card {
background: var(--cd-text-primary);
border-radius: var(--cd-radius-xl);
padding: 2.5rem 2rem;
text-align: center;
color: #ffffff;
}
.cd-adults-card-badge {
display: inline-block;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
border-radius: var(--cd-radius-full);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3rem 0.9rem;
color: rgba(255,255,255,0.85);
margin-bottom: 1.25rem;
}
.cd-adults-card-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 900;
margin: 0 0 0.75rem;
line-height: 1.2;
}
.cd-adults-card-sub {
font-size: 0.95rem;
color: rgba(255,255,255,0.72);
max-width: 500px;
margin: 0 auto 1.75rem;
line-height: 1.7;
}
.cd-adults-perks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-bottom: 2rem;
}
.cd-adults-perk {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--cd-radius-full);
padding: 0.35rem 0.9rem;
font-size: 0.8rem;
color: rgba(255,255,255,0.9);
font-weight: 500;
}
.cd-adults-cta-row {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.cd-btn-white {
background: #ffffff;
color: var(--cd-text-primary);
font-weight: 700;
border: none;
}
.cd-btn-white:hover {
background: rgba(255,255,255,0.9);
color: var(--cd-text-primary);
}
.cd-btn-ghost-white {
background: transparent;
color: #ffffff;
border: 2px solid rgba(255,255,255,0.4);
font-weight: 600;
}
.cd-btn-ghost-white:hover {
border-color: rgba(255,255,255,0.8);
background: rgba(255,255,255,0.08);
color: #ffffff;
}
/* Community section header */
.cd-community-header {
text-align: center;
padding: 0 1rem 1.5rem;
}
.cd-community-header-title {
font-size: 1.5rem;
font-weight: 900;
color: var(--cd-text-primary);
margin: 0 0 0.4rem;
}
.cd-community-header-sub {
font-size: 1rem;
color: var(--cd-text-body);
margin: 0;
}
/* ── Use Cases card grid — "What could you use CrewDecide for?" ── */
.cd-usecases-section {
max-width: 900px;
margin: 0 auto 2.5rem;
padding: 2rem 1rem 0;
text-align: center;
}
.cd-usecases-heading {
font-size: 1.5rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0 0 1.75rem;
}
.cd-usecases-heading-accent {
color: var(--cd-blue);
}
.cd-usecase-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.cd-usecase-card {
display: flex;
align-items: center;
gap: 0.75rem;
background: var(--cd-blue-light);
border: 1px solid var(--cd-blue-border);
border-radius: var(--cd-radius-lg);
padding: 1rem;
text-align: left;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cd-usecase-card:hover {
transform: translateY(-2px);
box-shadow: var(--cd-shadow-hover);
}
.cd-usecase-card-icon {
font-size: 1.6rem;
flex-shrink: 0;
line-height: 1;
}
.cd-usecase-card-text {
font-size: 0.85rem;
font-weight: 600;
color: var(--cd-text-body);
margin: 0;
line-height: 1.35;
}
@media (max-width: 900px) {
.cd-usecase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.cd-usecase-grid { grid-template-columns: 1fr; }
}
/* ============================================================
How It Works Page
============================================================ */
.cd-hiw-wrap {
max-width: 720px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
.cd-hiw-hero {
text-align: center;
margin-bottom: 3rem;
}
.cd-hiw-eyebrow {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cd-blue);
margin: 0 0 0.75rem;
}
.cd-hiw-title {
font-size: 2.25rem;
font-weight: 900;
color: var(--cd-text-primary);
margin: 0 0 1rem;
line-height: 1.15;
}
.cd-hiw-sub {
font-size: 1.05rem;
color: var(--cd-text-muted);
margin: 0 auto;
max-width: 500px;
line-height: 1.6;
}
.cd-hiw-step {
display: flex;
gap: 1.5rem;
margin-bottom: 2.5rem;
align-items: flex-start;
}
.cd-hiw-step-num {
flex-shrink: 0;
width: 3rem;
height: 3rem;
border-radius: 50%;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 900;
}
.cd-hiw-step-num--blue { background: var(--cd-blue); }
.cd-hiw-step-num--green { background: var(--cd-green); }
.cd-hiw-step-num--dark { background: var(--cd-text-primary); }
.cd-hiw-step-body { flex: 1; min-width: 0; }
.cd-hiw-step-title {
font-size: 1.25rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0 0 0.5rem;
}
.cd-hiw-step-text {
color: var(--cd-text-muted);
margin: 0 0 1rem;
line-height: 1.6;
}
.cd-hiw-example {
background: var(--cd-bg);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-lg);
padding: 1rem 1.25rem;
}
.cd-hiw-example-label {
font-size: 0.8rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 0.5rem;
}
.cd-hiw-example-text {
font-size: 0.875rem;
color: var(--cd-text-muted);
margin: 0;
font-style: italic;
}
.cd-hiw-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.cd-hiw-list-item {
font-size: 0.8rem;
color: var(--cd-text-muted);
margin: 0;
}
.cd-hiw-connector {
margin-left: 1.5rem;
width: 1px;
height: 2rem;
background: var(--cd-border);
margin-bottom: 0;
}
.cd-hiw-18-banner {
background: var(--cd-text-primary);
border-radius: var(--cd-radius-xl);
padding: 2rem;
margin-bottom: 2.5rem;
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.cd-hiw-18-icon {
font-size: 2.5rem;
flex-shrink: 0;
}
.cd-hiw-18-text { flex: 1; min-width: 200px; }
.cd-hiw-18-title {
font-size: 1rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 0.3rem;
}
.cd-hiw-18-sub {
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
margin: 0;
line-height: 1.5;
}
.cd-hiw-cta {
text-align: center;
background: var(--cd-blue-light);
border: 1px solid var(--cd-blue-border);
border-radius: var(--cd-radius-xl);
padding: 2.5rem 2rem;
}
.cd-hiw-cta-title {
font-size: 1.5rem;
font-weight: 900;
color: var(--cd-text-primary);
margin: 0 0 0.5rem;
}
.cd-hiw-cta-sub {
color: var(--cd-text-muted);
margin: 0 0 1.5rem;
}
.cd-hiw-cta-row {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
/* Utility — blue text for logo-style spans */
.cd-blue-text { color: var(--cd-blue); }
/* ============================================================
Poll Mockup — step visual on homepage
============================================================ */
.cd-poll-mockup {
background: var(--cd-white);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-xl);
padding: 1rem;
margin-top: 1rem;
text-align: left;
box-shadow: var(--cd-shadow-card);
}
.cd-poll-mockup-q {
font-size: 0.8rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 0.75rem;
}
.cd-poll-mockup-option {
margin-bottom: 0.5rem;
}
.cd-poll-mockup-option-label {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
color: var(--cd-text-muted);
margin-bottom: 0.2rem;
}
.cd-poll-mockup-bar-wrap {
background: var(--cd-border);
border-radius: var(--cd-radius-full);
height: 6px;
overflow: hidden;
}
.cd-poll-mockup-bar {
height: 100%;
border-radius: var(--cd-radius-full);
background: var(--cd-blue);
}
.cd-poll-mockup-bar--winner {
background: var(--cd-green);
}
.cd-poll-mockup-meta {
font-size: 0.68rem;
color: var(--cd-text-subtle);
margin: 0.6rem 0 0;
display: flex;
gap: 0.75rem;
}
/* ============================================================
Founding Crew Section
============================================================ */
.cd-founding-section {
max-width: 860px;
margin: 0 auto 3rem;
padding: 0 1rem;
}
.cd-founding-card {
background: linear-gradient(135deg, #1a1f3a 0%, #0f172a 60%, #1e2d4a 100%);
border-radius: var(--cd-radius-xl);
padding: 3rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
}
.cd-founding-card-glow {
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(37,93,209,0.25) 0%, transparent 70%);
pointer-events: none;
}
.cd-founding-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #ffffff;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.35rem 1rem;
border-radius: var(--cd-radius-full);
margin-bottom: 1.5rem;
box-shadow: 0 2px 12px rgba(245,158,11,0.4);
}
.cd-founding-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 900;
color: #ffffff;
margin: 0 0 1rem;
line-height: 1.15;
}
.cd-founding-title em {
font-style: normal;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cd-founding-sub {
font-size: 1rem;
color: rgba(255,255,255,0.65);
max-width: 520px;
margin: 0 auto 2rem;
line-height: 1.75;
}
.cd-founding-perks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
max-width: 780px;
margin: 0 auto 2.5rem;
}
@media (max-width: 700px) {
.cd-founding-perks {
grid-template-columns: repeat(2, 1fr);
max-width: 400px;
}
}
@media (max-width: 420px) {
.cd-founding-perks {
grid-template-columns: 1fr;
max-width: 280px;
}
}
.cd-founding-perk {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--cd-radius-lg);
padding: 1rem 0.75rem;
text-align: center;
}
.cd-founding-perk-icon {
font-size: 1.5rem;
margin-bottom: 0.4rem;
}
.cd-founding-perk-title {
font-size: 0.8rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 0.2rem;
}
.cd-founding-perk-sub {
font-size: 0.72rem;
color: rgba(255,255,255,0.5);
margin: 0;
line-height: 1.4;
}
.cd-founding-cta-row {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.cd-btn-gold {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #ffffff;
font-weight: 700;
border: none;
box-shadow: 0 4px 16px rgba(245,158,11,0.35);
transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.cd-btn-gold:hover {
box-shadow: 0 6px 20px rgba(245,158,11,0.5);
transform: translateY(-1px);
color: #ffffff;
}
.cd-founding-disclaimer {
font-size: 0.72rem;
color: rgba(255,255,255,0.35);
margin: 0;
}
/* ============================================================
Use Cases strip
============================================================ */
/* Superseded by the .cd-usecase-card grid above (2026-07-30).
Old chip-row design for this section — no longer referenced by
any .cfm. Left this comment instead of the dead ruleset so the
next person doesn't wonder whether something still depends on it. */
/* ============================================================
Category Filter Tabs — community polls
============================================================ */
.cd-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.5rem;
}
.cd-cat-tab {
display: inline-block;
padding: 0.35rem 0.875rem;
border-radius: var(--cd-radius-full);
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
border: 1px solid var(--cd-border);
background: var(--cd-white);
color: var(--cd-text-muted);
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.cd-cat-tab:hover {
border-color: var(--cd-blue);
color: var(--cd-blue);
}
.cd-cat-tab-active {
border-color: var(--cd-blue);
background: var(--cd-blue);
color: #ffffff;
}
.cd-cat-tab-active:hover {
background: var(--cd-blue);
color: #ffffff;
}
/* ============================================================
Mobile responsive — homepage & how-it-works
max-width: 600px covers most phones
============================================================ */
@media (max-width: 600px) {
/* Hero */
.cd-hero {
padding: 1.5rem 1rem 1rem;
}
.cd-hero-h1 {
font-size: 2.25rem;
}
.cd-hero-sub {
font-size: 0.95rem;
}
.cd-hero-cta-row {
flex-direction: column;
align-items: stretch;
}
.cd-hero-cta-row .cd-btn {
text-align: center;
}
/* Steps grid — stack on mobile */
.cd-steps-grid {
grid-template-columns: 1fr;
}
/* Poll mockup inside step cards */
.cd-poll-mockup {
margin-top: 0.75rem;
}
/* Founding card */
.cd-founding-card {
padding: 2rem 1.25rem;
}
.cd-founding-title {
font-size: 1.75rem;
}
.cd-founding-cta-row {
flex-direction: column;
align-items: stretch;
}
.cd-founding-cta-row .cd-btn {
text-align: center;
}
/* Adults card */
.cd-adults-card {
padding: 2rem 1.25rem;
}
.cd-adults-card-title {
font-size: 1.5rem;
}
.cd-adults-cta-row {
flex-direction: column;
align-items: stretch;
}
.cd-adults-cta-row .cd-btn {
text-align: center;
}
/* How it works */
.cd-hiw-wrap {
padding: 1.5rem 1rem 3rem;
}
.cd-hiw-title {
font-size: 1.75rem;
}
.cd-hiw-step {
flex-direction: column;
gap: 0.75rem;
}
.cd-hiw-step-num {
width: 2.25rem;
height: 2.25rem;
font-size: 1rem;
flex-shrink: 0;
}
.cd-hiw-connector {
margin-left: 1.1rem;
}
.cd-hiw-18-banner {
flex-direction: column;
text-align: center;
padding: 1.5rem 1.25rem;
gap: 0.75rem;
}
.cd-hiw-18-text {
min-width: 0;
}
.cd-hiw-cta-row {
flex-direction: column;
align-items: stretch;
}
.cd-hiw-cta-row .cd-btn {
text-align: center;
}
/* Community header */
.cd-community-header-title {
font-size: 1.25rem;
}
}
/* ============================================================
Comment cards — results page
============================================================ */
.cd-comment-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cd-comment-card {
background: var(--cd-bg);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-md);
padding: 0.875rem 1rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
}
.cd-comment-body { flex: 1; min-width: 0; }
.cd-comment-author {
font-size: 0.8rem;
font-weight: 600;
color: var(--cd-text-body);
margin: 0 0 0.35rem;
}
.cd-comment-text {
color: var(--cd-text-body);
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
}
.cd-comment-delete {
background: none;
border: none;
cursor: pointer;
color: var(--cd-text-subtle);
font-size: 1rem;
padding: 0.1rem 0.25rem;
border-radius: var(--cd-radius-sm);
flex-shrink: 0;
transition: color 0.15s ease, background 0.15s ease;
line-height: 1;
}
.cd-comment-delete:hover {
color: var(--cd-danger);
background: var(--cd-danger-light);
}
.cd-comment-edit {
background: none;
border: none;
cursor: pointer;
color: var(--cd-text-subtle);
font-size: 0.75rem;
padding: 0.1rem 0.3rem;
border-radius: var(--cd-radius-sm);
flex-shrink: 0;
transition: color 0.15s ease, background 0.15s ease;
line-height: 1;
font-weight: 500;
}
.cd-comment-edit:hover {
color: var(--cd-blue);
background: var(--cd-blue-light);
}
.cd-comment-actions {
display: flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
}
.cd-comment-edit-wrap {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.cd-comment-edit-textarea {
width: 100%;
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.5;
padding: 0.5rem 0.625rem;
border: 1px solid var(--cd-blue);
border-radius: var(--cd-radius-sm);
background: white;
color: var(--cd-text-body);
resize: vertical;
min-height: 3rem;
}
.cd-comment-edit-textarea:focus {
outline: none;
box-shadow: 0 0 0 2px var(--cd-blue-border);
}
.cd-comments-header {
font-size: 1.125rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 1rem;
}
.cd-comments-empty {
color: var(--cd-text-muted);
margin: 0;
}
/* ============================================================
Poll Launch Celebration — results.cfm ?new=1
Reuses .confetti-wrap/.cb animation from voteSuccess
============================================================ */
.cd-poll-launch-wrap {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--cd-green-light), var(--cd-blue-light));
border: 1px solid var(--cd-green-border);
border-radius: var(--cd-radius-xl);
padding: 1.75rem 1.5rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.cd-poll-launch-icon {
position: relative;
width: 56px;
height: 56px;
flex-shrink: 0;
}
.cd-poll-launch-rocket {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
animation: rocketLaunch 0.6s cubic-bezier(.34,1.56,.64,1) forwards;
z-index: 2;
}
@keyframes rocketLaunch {
0% { transform: scale(0) rotate(-45deg); opacity: 0; }
60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.cd-poll-launch-text {
flex: 1;
min-width: 200px;
}
.cd-poll-launch-title {
font-size: 1.1rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0 0 0.25rem;
}
.cd-poll-launch-sub {
font-size: 0.875rem;
color: var(--cd-text-muted);
margin: 0;
}
/* ============================================================
Send Poll page — copy confirm + skip link
============================================================ */
.cd-copy-confirm {
font-size: 0.72rem;
color: var(--cd-green-dark);
margin: 0.3rem 0 0;
display: none;
}
.cd-skip-link-wrap {
margin: 0.5rem 0 0;
text-align: center;
}
.cd-skip-link {
font-size: 0.8rem;
color: var(--cd-text-body);
text-decoration: underline;
text-underline-offset: 2px;
}
.cd-skip-link:hover {
color: var(--cd-text-primary);
text-decoration: underline;
}
/* ============================================================
Invite list utility classes
============================================================ */
.cd-badge-new {
font-size: 0.65rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 9999px;
flex-shrink: 0;
background: var(--cd-green-light);
color: var(--cd-green-dark);
}
/* cd-badge-member already exists — no duplicate needed */
.cd-btn-icon {
background: none;
border: none;
cursor: pointer;
color: var(--cd-text-muted);
font-size: 1.1rem;
line-height: 1;
padding: 0;
flex-shrink: 0;
}
.cd-btn-icon:hover {
color: var(--cd-danger);
}
.cd-btn-link {
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
padding: 0;
}
.cd-text-danger {
color: var(--cd-danger);
font-size: 0.8rem;
}
.cd-text-success {
color: var(--cd-green-dark);
font-size: 0.8rem;
font-weight: 600;
}
.cd-mt-sm {
margin-top: 0.4rem;
margin-bottom: 0;
}
.cd-mb-sm {
margin-bottom: 0.75rem;
}
/* ============================================================
Profile photo card layout
============================================================ */
.cd-avatar-info-row {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.cd-avatar-info-name {
font-size: 1.125rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0 0 0.2rem;
}
.cd-avatar-info-username {
font-size: 0.875rem;
color: var(--cd-text-muted);
margin: 0;
}
.cd-avatar-file-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.cd-avatar-file-input {
flex: 1;
min-width: 0;
}
/* ============================================================
My Progress dashboard card
============================================================ */
.cd-progress-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--cd-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.cd-progress-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--cd-text-primary);
margin: 0;
}
.cd-progress-link {
font-size: 0.75rem;
color: var(--cd-blue);
text-decoration: none;
}
.cd-progress-link:hover {
text-decoration: underline;
}
.cd-progress-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
}
.cd-progress-cell {
padding: 1.25rem 1.5rem;
}
.cd-progress-cell--border {
border-right: 1px solid var(--cd-border);
}
.cd-progress-score-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.cd-progress-score-icon {
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cd-progress-score-icon--voter {
background: var(--cd-blue-light);
border: 1px solid var(--cd-blue-border);
}
.cd-progress-score-icon--creator {
background: var(--cd-green-light);
border: 1px solid var(--cd-green-border);
}
.cd-progress-score-label {
font-size: 0.6rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
.cd-progress-score-label--voter { color: var(--cd-blue); }
.cd-progress-score-label--creator { color: var(--cd-green-dark); }
.cd-progress-score-level {
font-size: 1.1rem;
font-weight: 800;
color: var(--cd-text-primary);
margin: 0;
line-height: 1.2;
}
.cd-progress-bar-wrap {
height: 0.4rem;
background: var(--cd-border);
border-radius: var(--cd-radius-full);
overflow: hidden;
margin-bottom: 0.35rem;
}
.cd-progress-bar-fill {
height: 100%;
border-radius: var(--cd-radius-full);
transition: width 0.7s ease;
}
.cd-progress-bar-fill--voter { background: var(--cd-blue); }
.cd-progress-bar-fill--creator { background: var(--cd-green-dark); }
.cd-progress-score-sub {
font-size: 0.72rem;
color: var(--cd-text-muted);
margin: 0;
}
/* ============================================================
Toggle switch — green slider
Usage:
============================================================ */
.cd-toggle-wrap {
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
user-select: none;
}
.cd-toggle-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.cd-toggle-track {
position: relative;
display: inline-flex;
align-items: center;
width: 2.75rem;
height: 1.5rem;
border-radius: 9999px;
background: var(--cd-border);
transition: background 0.2s ease;
flex-shrink: 0;
}
.cd-toggle-input:checked + .cd-toggle-track {
background: var(--cd-green-dark);
}
.cd-toggle-thumb {
position: absolute;
left: 0.2rem;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.2s ease;
}
.cd-toggle-input:checked + .cd-toggle-track .cd-toggle-thumb {
transform: translateX(1.25rem);
}
.cd-toggle-label-text {
font-size: 0.875rem;
font-weight: 600;
color: var(--cd-text-primary);
}
.cd-toggle-status {
font-size: 0.72rem;
font-weight: 700;
color: var(--cd-text-muted);
min-width: 1.75rem;
}
.cd-toggle-input:checked ~ .cd-toggle-status {
color: var(--cd-green-dark);
}
/* Unsubscribe-all toggle — red when checked to signal danger */
.cd-toggle-input.cd-toggle-danger:checked + .cd-toggle-track {
background: var(--cd-danger);
}
/* ============================================================
Email preference status alert
============================================================ */
.cd-pref-alert {
background: var(--cd-bg);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-lg);
padding: 0.75rem 1rem;
margin-bottom: 1.25rem;
font-size: 0.82rem;
color: var(--cd-text-body);
font-weight: 500;
}
.cd-pref-alert-on { color: var(--cd-green-dark); font-weight: 700; }
.cd-pref-alert-off { color: var(--cd-danger); font-weight: 700; }
/* ════════════════════════════════════════════════════════════════
MOBILE RESPONSIVE SYSTEM
Breakpoint: 768px (tablet portrait and below)
════════════════════════════════════════════════════════════════ */
/* ── Hamburger button ──────────────────────────────────────────── */
.cd-mobile-actions {
display: none;
align-items: center;
gap: 0.625rem;
margin-left: auto; /* always push to right as last flex child */
}
.cd-mobile-create-btn {
padding: 0.45rem 0.875rem;
border-radius: var(--cd-radius-lg);
background: var(--cd-blue);
color: white;
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.cd-hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 2.25rem;
height: 2.25rem;
padding: 0.4rem 0.35rem;
background: none;
border: 1.5px solid var(--cd-border);
border-radius: var(--cd-radius-md);
cursor: pointer;
gap: 0;
}
.cd-hamburger-bar {
display: block;
width: 100%;
height: 2px;
background: var(--cd-text-primary);
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
transform-origin: center;
}
/* Animate to X when open */
.cd-hamburger.is-open .cd-hamburger-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.cd-hamburger.is-open .cd-hamburger-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.cd-hamburger.is-open .cd-hamburger-bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* ── Mobile drawer overlay ─────────────────────────────────────── */
.cd-mobile-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 39;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 0.25s ease;
}
.cd-mobile-overlay.is-open {
display: block;
opacity: 1;
}
/* ── Mobile drawer ─────────────────────────────────────────────── */
.cd-mobile-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 40;
width: min(320px, 85vw);
background: white;
box-shadow: -4px 0 24px rgba(0,0,0,0.15);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.32, 0, 0.14, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cd-mobile-drawer.is-open {
transform: translateX(0);
}
.cd-mobile-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.125rem 1.25rem;
border-bottom: 1px solid var(--cd-border);
flex-shrink: 0;
}
.cd-mobile-close {
font-size: 1.5rem;
line-height: 1;
background: none;
border: none;
color: var(--cd-text-muted);
cursor: pointer;
padding: 0.25rem;
border-radius: var(--cd-radius-sm);
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.cd-mobile-close:hover { background: var(--cd-bg-hover); }
.cd-mobile-nav { flex: 1; padding: 0.5rem 0; }
.cd-mobile-nav-section {
padding: 0.5rem 0;
border-bottom: 1px solid var(--cd-border);
}
.cd-mobile-nav-section:last-child { border-bottom: none; }
.cd-mobile-nav-link {
display: block;
padding: 0.75rem 1.25rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--cd-text-primary);
text-decoration: none;
transition: background 0.12s ease, color 0.12s ease;
}
.cd-mobile-nav-link:hover {
background: var(--cd-bg-hover);
color: var(--cd-blue);
}
.cd-mobile-nav-link--primary {
color: var(--cd-blue);
font-weight: 700;
}
.cd-mobile-nav-link--primary:hover { background: var(--cd-blue-light); }
.cd-mobile-nav-link--danger { color: var(--cd-danger); }
.cd-mobile-nav-link--danger:hover { background: var(--cd-danger-light); }
.cd-mobile-nav-footer { padding-top: 0.75rem; }
.cd-mobile-user {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem 0.5rem;
}
.cd-mobile-avatar { flex-shrink: 0; }
/* ── Scrollable tab navs ───────────────────────────────────────── */
/* Phase 2A: Horizontal scroll on subnav pill nav */
/* Phase 2A: Horizontal scroll on subnav pill nav — consolidated into base .cd-pill-nav above */
.cd-pill-nav::-webkit-scrollbar { display: none; }
.cd-pill-nav-link { flex-shrink: 0; }
/* Phase 2B: Horizontal scroll on crew dashboard tab nav */
.cd-tab-nav {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
/* Subtle fade at right edge only — doesn't cut off tabs */
-webkit-mask-image: linear-gradient(to right, black 96%, transparent 100%);
mask-image: linear-gradient(to right, black 96%, transparent 100%);
/* Ensure full-width scroll area */
padding-right: 1rem;
}
.cd-tab-nav::-webkit-scrollbar { display: none; }
.cd-tab-link { flex-shrink: 0; }
/* ── Responsive grid stacking ──────────────────────────────────── */
/* Two-col grids → single col on mobile */
.cd-grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 767px) {
/* Desktop nav hidden, hamburger shown */
.cd-nav-desktop { display: none !important; }
.cd-mobile-actions { display: flex !important; }
/* Stack 2-col grids */
.cd-grid-2col {
grid-template-columns: 1fr;
}
/* Stack participation voted/not-yet columns */
[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Main content padding */
main { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
/* Cards — reduce padding on mobile */
.cd-card-lg { padding: 1rem 0.875rem; }
/* Results page vote option cards */
.cd-max-form { max-width: 100% !important; }
/* Modal dialogs — full width with safe inset on small phones */
[id$="-modal"] > div,
[id$="confirm-modal"] > div {
max-width: calc(100vw - 2rem);
padding: 1.25rem;
}
}
@media (max-width: 540px) {
/* Subnav pills — slightly smaller */
.cd-pill-nav-link {
font-size: 0.73rem;
padding: 4px 10px;
}
/* My Polls row — stack buttons below poll info */
.cd-poll-row-actions {
flex-wrap: wrap;
gap: 0.35rem;
}
/* Crew rows — hide Crew Polls on very small, keep New Poll + Manage + Dashboard */
.cd-crew-row-crewpolls {
display: none;
}
}
@media (max-width: 480px) {
/* Very small phones */
.cd-mobile-create-btn { display: none; }
.cd-tab-link { padding: 0.5rem 0.8rem; font-size: 0.78rem; }
}
/* ── Desktop: tab nav wraps (pill nav already wraps everywhere) ── */
@media (min-width: 768px) {
.cd-tab-nav {
-webkit-mask-image: none;
mask-image: none;
flex-wrap: wrap;
}
.cd-mobile-drawer,
.cd-mobile-overlay {
display: none !important;
}
}
/* ════════════════════════════════════════════════════════════════
END MOBILE RESPONSIVE SYSTEM
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
22. SITEWIDE DROPDOWN MENU — .cd-dropdown-menu
Replaces scattered inline position:absolute styles.
right:0 by default; JS cdClampDropdown() flips to left:0
if it would clip past the left viewport edge.
════════════════════════════════════════════════════════════════ */
.cd-dropdown-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 4px);
background: var(--cd-white);
border: 1px solid var(--cd-border);
border-radius: var(--cd-radius-md);
box-shadow: var(--cd-shadow-hover);
min-width: 160px;
z-index: 200;
overflow: hidden;
}
.cd-dropdown-menu.is-open {
display: block;
}
.cd-dropdown-menu-item {
display: block;
width: 100%;
text-align: left;
padding: 0.5rem 0.875rem;
font-size: 0.8rem;
color: var(--cd-text-body);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
transition: background var(--cd-transition);
white-space: nowrap;
line-height: 1.4;
}
.cd-dropdown-menu-item:hover {
background: var(--cd-bg);
color: var(--cd-text-body);
text-decoration: none;
}
.cd-dropdown-menu-item--danger {
color: var(--cd-danger);
}
.cd-dropdown-menu-item--danger:hover {
background: var(--cd-danger-light);
color: var(--cd-danger);
}
.cd-dropdown-menu-divider {
border: none;
border-top: 1px solid var(--cd-border);
margin: 0.25rem 0;
}
/* ── Share widget ──────────────────────────────────────────────
.cd-share-wrap is the positioning context for one share button +
its fallback panel (id-suffixed per instance, see share_widget.cfm).
The panel itself reuses .cd-dropdown-menu — same proven component,
same viewport-clamp behavior — so it doesn't introduce a third
parallel dropdown system. --------------------------------------- */
.cd-share-wrap {
position: relative;
display: inline-block;
}
.cd-share-icon {
width: 1.3rem;
height: 1.3rem;
flex-shrink: 0;
}
.cd-share-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--cd-radius-md);
border: 1px solid var(--cd-border);
background: var(--cd-white);
color: var(--cd-text-muted);
cursor: pointer;
transition: background var(--cd-transition), color var(--cd-transition);
}
.cd-share-icon-btn:hover {
background: var(--cd-blue-light);
color: var(--cd-blue);
}
/* Additive modifier — does not change the base .cd-dropdown-menu-item
used elsewhere (block, text-only), so existing dropdowns are unaffected. */
.cd-dropdown-menu-item--icon {
display: flex;
align-items: center;
gap: 0.6rem;
}
.cd-dropdown-menu-item--icon svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
/* Wrapper — must be position:relative for the menu to anchor to */
.cd-dropdown-wrap {
position: relative;
display: inline-block;
}
/* ════════════════════════════════════════════════════════════════
23. myPolls TAB BAR — .cd-tab-nav-secondary
The myPolls "Polls I Created / Voted On / To Vote On" tabs
use inline styles currently. This class makes them scrollable
on mobile the same way .cd-tab-nav works on manage.cfm.
════════════════════════════════════════════════════════════════ */
.cd-tab-nav-secondary {
display: flex;
gap: 0;
border-bottom: 2px solid var(--cd-border);
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.cd-tab-nav-secondary::-webkit-scrollbar {
display: none;
}
.cd-tab-nav-secondary .cd-tab-link {
flex-shrink: 0;
}
/* Remove last-child margin - not needed when wrapping */
.cd-tab-nav-secondary .cd-tab-link:last-child {
margin-right: 0;
}
@media (min-width: 768px) {
.cd-tab-nav-secondary {
flex-wrap: wrap;
overflow-x: visible;
}
}
/* ════════════════════════════════════════════════════════════════
Fixes button overflow / squash on iPhone (390px)
════════════════════════════════════════════════════════════════ */
/* Poll row: title block grows, buttons block wraps cleanly */
.cd-poll-row {
padding: 1rem 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
border-bottom: 1px solid var(--cd-border);
}
.cd-poll-row:last-child {
border-bottom: none;
}
/* Status dot */
.cd-poll-row-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
flex-shrink: 0;
}
.cd-poll-row-dot--live { background: var(--cd-green-dark); }
.cd-poll-row-dot--closed { background: var(--cd-border); }
/* Title + meta — takes all available space, truncates */
.cd-poll-row-info {
flex: 1;
min-width: 0;
}
.cd-poll-row-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--cd-text-primary);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-poll-row-meta {
font-size: 0.72rem;
color: var(--cd-text-subtle);
margin: 0;
}
/* Action button group — wraps to new line on narrow viewports */
.cd-poll-row-actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.cd-poll-row-actions::-webkit-scrollbar { display: none; }
.cd-poll-row-actions > * { flex-shrink: 0; }
/* Pill-style action buttons used in poll rows (Vote link, Results, etc.) */
.cd-poll-action-pill {
display: inline-flex;
align-items: center;
font-size: 0.72rem;
font-weight: 600;
padding: 0.2rem 0.5rem;
border-radius: var(--cd-radius-sm);
text-decoration: none;
white-space: nowrap;
border: 1px solid var(--cd-border);
background: var(--cd-bg);
color: var(--cd-text-muted);
transition: background var(--cd-transition), color var(--cd-transition);
cursor: pointer;
line-height: 1.4;
}
.cd-poll-action-pill:hover {
background: var(--cd-bg-hover);
color: var(--cd-text-body);
text-decoration: none;
}
.cd-poll-action-pill--blue {
background: var(--cd-blue-light);
color: var(--cd-blue);
border-color: var(--cd-blue-border);
}
.cd-poll-action-pill--blue:hover {
background: rgb(219, 234, 254);
color: var(--cd-blue-hover);
}
/* On very small phones: Manage dropdown button same size as pills */
@media (max-width: 430px) {
.cd-poll-row-actions {
/* Full width on very narrow: aligns left so buttons don't stretch */
width: 100%;
}
.cd-poll-row {
/* Extra breathing room when buttons wrap */
row-gap: 0.4rem;
}
}
/* ════════════════════════════════════════════════════════════════
18. CREWS INDEX — ROW BUTTON OVERFLOW FIX
Boss/Lieutenant rows have 4 action buttons which crush on mobile
════════════════════════════════════════════════════════════════ */
.cd-crew-row {
padding: 1.125rem 1.5rem;
border-bottom: 1px solid var(--cd-border);
}
.cd-crew-row:last-child {
border-bottom: none;
}
.cd-crew-row-icon {
font-size: 1rem;
flex-shrink: 0;
align-self: center;
color: var(--cd-text-muted);
line-height: 1;
}
.cd-crew-row-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.cd-crew-row-info {
flex: 1;
min-width: 180px;
}
.cd-crew-row-name {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
margin-bottom: 0.2rem;
}
.cd-crew-row-name > span:first-child {
flex-shrink: 0;
line-height: 1;
}
.cd-crew-row-actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
flex-shrink: 0;
align-self: center;
}
/* On mobile: button group goes full width below info */
@media (max-width: 600px) {
.cd-crew-row-inner {
flex-direction: column;
gap: 0.6rem;
}
.cd-crew-row-actions {
width: 100%;
/* Align left, not stretched */
justify-content: flex-start;
}
/* Hide "Crew Polls" button on very small screens — it's in Manage dropdown */
.cd-crew-row-crewpolls {
display: none;
}
}
@media (min-width: 601px) and (max-width: 820px) {
/* Tablet: keep inline but hide Crew Polls to prevent overflow */
.cd-crew-row-crewpolls {
display: none;
}
}
/* ════════════════════════════════════════════════════════════════
19. COMMUNITY POLLS — FEED ROW MOBILE FIX
.cd-feed-row uses flex with flex-shrink:0 on actions;
on narrow screens the title/meta column gets crushed.
════════════════════════════════════════════════════════════════ */
/* Override: allow community poll rows to stack on mobile */
@media (max-width: 600px) {
.cd-feed-row {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
}
/* Action button(s) go full width, left-aligned */
.cd-feed-row > div:last-child,
.cd-feed-row-actions {
width: 100%;
flex-shrink: 1;
justify-content: flex-start;
}
/* Title doesn't need ellipsis when stacked */
.cd-feed-row-title {
white-space: normal;
overflow: visible;
}
.cd-feed-row-desc {
white-space: normal;
overflow: visible;
}
}
/* Community polls page wrapper — replace inline style */
.cd-community-feed-wrap {
max-width: 64rem;
margin: 0 auto;
padding: 0 1rem 3rem;
}
/* Remove the duplicate "Community Polls" h2 inside community.cfm
when already shown via cd-section-header on the parent page */
.cd-community-feed-inner-heading {
display: none;
}
/* Category filter area */
.cd-community-filter-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
/* Feed row action buttons — flex group, no shrink on desktop */
.cd-feed-row-actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════════
20. WELCOME HEADER — DASHBOARD NEW POLL BUTTON
Button goes full width and centered on mobile
════════════════════════════════════════════════════════════════ */
.cd-db-welcome {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cd-db-welcome-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.cd-db-new-poll-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: var(--cd-radius-xl);
background: var(--cd-green);
color: white;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
border: none;
cursor: pointer;
transition: background var(--cd-transition), transform var(--cd-transition);
box-shadow: 0 2px 8px rgba(116,195,101,0.3);
}
.cd-db-new-poll-btn:hover {
background: var(--cd-green-dark);
color: white;
text-decoration: none;
transform: translateY(-1px);
}
@media (max-width: 540px) {
.cd-db-welcome-row {
flex-direction: column;
align-items: flex-start;
}
.cd-db-new-poll-btn {
width: 100%;
justify-content: center;
}
}
/* Greeting text — above h1 */
.cd-db-greeting {
font-size: 0.78rem;
font-weight: 700;
color: var(--cd-green-dark);
text-transform: uppercase;
letter-spacing: 0.07em;
margin: 0 0 0.2rem;
}
.cd-db-headline {
font-size: clamp(1.5rem, 4vw, 1.875rem);
font-weight: 800;
color: var(--cd-text-primary);
margin: 0 0 0.2rem;
line-height: 1.2;
}
.cd-db-subline {
font-size: 0.875rem;
color: var(--cd-text-muted);
margin: 0;
}
/* ════════════════════════════════════════════════════════════════
21. MY CREWS PAGE — HEADER ROW MOBILE
"New Crew" button goes below the heading on very small screens
════════════════════════════════════════════════════════════════ */
.cd-crews-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.cd-crews-header-text p {
font-size: 0.875rem;
color: var(--cd-text-muted);
margin: 0;
}
@media (max-width: 480px) {
.cd-crews-header-row {
flex-direction: column;
align-items: flex-start;
}
.cd-crews-new-btn {
width: 100%;
justify-content: center;
}
}
/* ════════════════════════════════════════════════════════════════
24. TIER 1 PAGE LAYOUT SYSTEM
Mobile-first two-column layout used across vote, results,
create, send_poll, and manage pages.
════════════════════════════════════════════════════════════════ */
/* Page-level content wrapper — narrower than max-w-5xl */
.cd-page-wrap {
max-width: 720px;
margin: 0 auto;
padding-bottom: 3rem;
}
.cd-page-wrap--wide {
max-width: 900px;
margin: 0 auto;
padding-bottom: 3rem;
}
/* Two-column layout: main content + sidebar */
.cd-layout-cols {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
@media (min-width: 768px) {
.cd-layout-cols {
grid-template-columns: 1fr 320px;
}
}
/* Sidebar sticks on desktop */
@media (min-width: 768px) {
.cd-layout-sidebar {
position: sticky;
top: 5rem;
}
}
/* Stack of cards with consistent gap */
.cd-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cd-stack--lg {
gap: 1.5rem;
}
/* Page heading block */
.cd-page-title {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 900;
color: var(--cd-text-primary);
margin: 0 0 0.25rem;
line-height: 1.15;
}
.cd-page-subtitle {
font-size: 0.95rem;
color: var(--cd-text-muted);
margin: 0 0 1.25rem;
line-height: 1.6;
}
/* Step indicator — create / send_poll */
.cd-steps {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cd-step-dot {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 800;
flex-shrink: 0;
}
.cd-step-dot--active { background: var(--cd-blue); color: white; }
.cd-step-dot--done { background: var(--cd-green); color: white; }
.cd-step-dot--pending { border: 2px solid var(--cd-border); color: var(--cd-text-muted); }
.cd-step-label { font-size: 0.8rem; font-weight: 600; }
.cd-step-label--active { color: var(--cd-blue); }
.cd-step-label--muted { color: var(--cd-text-muted); opacity: 0.55; }
.cd-step-connector {
flex: 0 0 2rem;
height: 2px;
background: var(--cd-border);
}
.cd-step-connector--done { background: var(--cd-blue); }
/* Vote option cards */
.cd-vote-options {
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-bottom: 1.5rem;
}
.cd-vote-option {
display: block;
cursor: pointer;
border: 2px solid var(--cd-border);
border-radius: var(--cd-radius-lg);
background: var(--cd-white);
padding: 1.1rem 1.25rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
user-select: none;
}
.cd-vote-option:hover {
border-color: var(--cd-blue-border);
box-shadow: var(--cd-shadow-hover);
}
.cd-vote-option.is-selected {
border-color: var(--cd-blue);
box-shadow: 0 0 0 3px var(--cd-blue-border);
}
.cd-vote-option-img {
width: 100%;
max-height: 260px;
object-fit: contain;
background: var(--cd-bg);
border-radius: var(--cd-radius-md);
margin-bottom: 0.75rem;
display: block;
}
/* Wraps the option image so the zoom button can be pinned to a corner
without affecting the image's own sizing/margins above. */
.cd-vote-option-img-wrap {
position: relative;
}
/* Always-visible magnifier — not hover-only, since touch devices have no
real hover state. preventDefault() in its click handler (see app.js)
is what stops the parent