/* ─── Path Theming System ─────────────────────────────────────────────────── */ :root { --path-primary: #e05; /* Default accent — changes per path */ --path-secondary: #7a9fe0; /* Default secondary */ } /* Named path themes — applied to via JS */ body.path-purple-tape { --path-primary: #534AB7; --path-secondary: #1D9E75; } body.path-cambridge-tech { --path-primary: #0F62FE; --path-secondary: #FFB81C; } body.path-boston-hiphop { --path-primary: #FF6B00; --path-secondary: #FFD700; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0e0e0e; color: #e8e8e8; line-height: 1.6; min-height: 100vh; } .pin-form-container { max-width: 680px; margin: 2rem auto; padding: 0 1rem 4rem; } h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2rem; } .form-group { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; } label { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #aaa; } .required { color: #e05; } .hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #666; } input[type="text"], textarea, select { background: #1a1a1a; border: 1px solid #333; color: #e8e8e8; border-radius: 4px; padding: 0.6rem 0.75rem; font-size: 1rem; font-family: inherit; width: 100%; transition: border-color 0.15s; } input[type="text"]:focus, textarea:focus, select:focus { outline: none; border-color: #666; } textarea { resize: vertical; } select option { background: #1a1a1a; } .char-counter, .word-counter { font-size: 0.75rem; color: #666; text-align: right; } .word-counter.satisfied { color: #4caf50; } .map-container { height: 360px; border-radius: 4px; overflow: hidden; border: 1px solid #333; } .category-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .category-option { display: flex; align-items: flex-start; gap: 0.4rem; background: #1a1a1a; border: 1px solid #333; border-radius: 4px; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.9rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: #e8e8e8; transition: border-color 0.15s; } .category-option:hover { border-color: #555; } .category-option input[type="checkbox"] { margin-top: 0.15rem; accent-color: #e05; } .category-desc { display: block; font-size: 0.75rem; color: #888; } .loading-text, .error-text { font-size: 0.875rem; color: #666; } input[type="file"] { font-size: 0.875rem; color: #aaa; } .image-preview-container { margin-top: 0.5rem; } .image-preview-container img { max-width: 100%; max-height: 300px; border-radius: 4px; border: 1px solid #333; object-fit: cover; } .field-error { font-size: 0.8rem; color: #e05; } .field-error:empty { display: none; } .global-error { background: #2a0008; border: 1px solid #e05; border-radius: 4px; padding: 0.75rem; font-size: 0.875rem; color: #ff6688; margin-bottom: 1rem; } .form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 2rem; } .btn { padding: 0.65rem 1.25rem; border-radius: 4px; border: none; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: #e05; color: #fff; } .btn-primary:not(:disabled):hover { opacity: 0.85; } .btn-secondary { background: #2a2a2a; color: #e8e8e8; border: 1px solid #444; } .btn-secondary:not(:disabled):hover { background: #333; } /* ─── Map page layout (T008) ──────────────────────────────────────────────── */ body.map-page { margin: 0; padding: 0; overflow: hidden; height: 100vh; width: 100vw; background: #0e0e0e; } #map { position: absolute; inset: 0; height: 100vh; width: 100vw; } /* ─── Filter bar (T011) ──────────────────────────────────────────────────── */ .filter-bar { position: absolute; top: 12px; left: 12px; right: 180px; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: #1a1a1aee; border: 1.5px solid #444; border-radius: 20px; color: #e8e8e8; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; backdrop-filter: blur(4px); } .filter-chip:hover { border-color: #888; } .filter-chip input[type="checkbox"] { display: none; } .filter-chip:has(input:checked) { background: var(--chip-color); border-color: var(--chip-color); color: #fff; } /* ─── Empty state (T014, T015) ───────────────────────────────────────────── */ .empty-state { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; background: #1a1a1aee; border: 1px solid #333; border-radius: 8px; padding: 1.5rem 2rem; text-align: center; color: #aaa; font-size: 0.95rem; backdrop-filter: blur(4px); pointer-events: none; } /* ─── Detail panel (T008) ────────────────────────────────────────────────── */ .detail-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; background: #111; border-left: 1px solid #222; z-index: 20; overflow-y: auto; display: flex; flex-direction: column; } .detail-panel[hidden] { display: none; } .detail-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #888; font-size: 1.5rem; cursor: pointer; line-height: 1; z-index: 1; } .detail-close:hover { color: #e8e8e8; } .detail-content { padding: 1.25rem; } .detail-image-wrap { margin-bottom: 1rem; } .detail-image-wrap img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; display: block; } .detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0.6rem; margin-top: 0.25rem; } .confidence-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; background: #2a2a2a; color: #ccc; border: 1px solid #444; } .confidence-badge.confidence-confirmed { background: #0d2b0d; color: #6fd46f; border-color: #3a6b3a; } .confidence-badge.confidence-oral_history { background: #1a1f2e; color: #7a9fe0; border-color: #3a4f7a; } .confidence-badge.confidence-contested { background: #2b1a00; color: #d4a055; border-color: #6b4a10; } .confidence-badge.confidence-lore { background: #1e0e2b; color: #b07de0; border-color: #5a3a7a; } .detail-categories { display: flex; gap: 6px; flex-wrap: wrap; } .category-tag { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; background: color-mix(in srgb, var(--cat-color) 20%, transparent); color: var(--cat-color); border: 1px solid color-mix(in srgb, var(--cat-color) 40%, transparent); } .detail-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.5rem 0 1rem; color: #f0f0f0; } .detail-lore { font-size: 0.9rem; line-height: 1.7; color: #c8c8c8; white-space: pre-wrap; } .marks-prompt { margin-top: 1.5rem; font-size: 0.85rem; color: #888; padding: 0.75rem; border-top: 1px solid #222; } .marks-prompt a { color: #e05; } /* ─── Mark gallery + form ────────────────────────────────────────────────── */ #detail-marks { margin-top: 1.25rem; border-top: 1px solid #222; padding-top: 1rem; } .marks-header { margin-bottom: 0.75rem; } .marks-count { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #666; } #mark-gallery { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .mark-item { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 6px; padding: 0.65rem 0.75rem; } .mark-meta { display: flex; justify-content: space-between; margin-bottom: 0.35rem; gap: 0.5rem; } .mark-author { font-size: 0.75rem; font-weight: 600; color: #aaa; } .mark-date { font-size: 0.72rem; color: #555; flex-shrink: 0; } .mark-content { font-size: 0.875rem; line-height: 1.6; color: #d0d0d0; margin: 0; white-space: pre-wrap; } .empty-marks { font-size: 0.85rem; color: #555; font-style: italic; margin: 0 0 0.75rem; } .marks-loading { font-size: 0.82rem; color: #555; margin: 0 0 0.75rem; } .mark-form { border-top: 1px solid #222; padding-top: 1rem; } .mark-textarea { width: 100%; background: #1a1a1a; border: 1px solid #333; color: #e8e8e8; border-radius: 4px; padding: 0.55rem 0.75rem; font-size: 0.875rem; font-family: inherit; resize: vertical; transition: border-color 0.15s; } .mark-textarea:focus { outline: none; border-color: #666; } .mark-form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; } .mark-char-count { font-size: 0.72rem; color: #666; } .mark-char-count.over-limit { color: #e05; } .btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; } /* Mobile: bottom sheet */ @media (max-width: 640px) { .detail-panel { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 65vh; border-left: none; border-top: 1px solid #222; border-radius: 12px 12px 0 0; } } /* ─── First-visit modal (T013) ──────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: #000000bb; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(3px); } .modal-overlay[hidden] { display: none; } .modal-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; padding: 2rem; max-width: 460px; width: 100%; } .modal-card h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .modal-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 1.5rem; } .modal-categories { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; } .modal-category-option { display: flex; flex-direction: column; gap: 2px; padding: 0.75rem 1rem; border: 1.5px solid #333; border-radius: 6px; cursor: pointer; transition: border-color 0.15s; } .modal-category-option:hover { border-color: #555; } .modal-category-option input[type="checkbox"] { display: none; } .modal-category-option:has(input:checked) { border-color: var(--cat-color); background: color-mix(in srgb, var(--cat-color) 10%, transparent); } .modal-cat-name { font-weight: 600; font-size: 0.95rem; color: #e8e8e8; } .modal-cat-desc { font-size: 0.78rem; color: #777; } .modal-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; } .modal-skip { font-size: 0.82rem; color: #666; text-decoration: none; } .modal-skip:hover { color: #999; } /* ─── Onboarding page ────────────────────────────────────────────────────── */ body.onboarding-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0e0e0e; padding: 1.5rem 1rem; } .onboarding-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; padding: 2.5rem 2rem; width: 100%; max-width: 520px; } .onboarding-card h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.4rem; } .onboarding-subtitle { color: #666; font-size: 0.9rem; margin-bottom: 1.75rem; } .onboarding-categories { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.75rem; } .onboarding-category-option { display: flex; flex-direction: column; gap: 2px; padding: 0.875rem 1rem; border: 1.5px solid #333; border-radius: 6px; cursor: pointer; transition: border-color 0.15s; } .onboarding-category-option:hover { border-color: #555; } .onboarding-category-option input[type="checkbox"] { display: none; } .onboarding-category-option:has(input:checked) { border-color: #7a9fe0; background: color-mix(in srgb, #7a9fe0 10%, transparent); } .onboarding-cat-name { font-weight: 600; font-size: 1rem; color: #e8e8e8; } .onboarding-cat-desc { font-size: 0.8rem; color: #777; } .onboarding-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .onboarding-actions .btn { width: 100%; } .onboarding-skip { text-align: center; font-size: 0.82rem; color: #666; text-decoration: none; padding: 0.25rem 0; } .onboarding-skip:hover { color: #999; } /* ─── Auth pages (register / login) ─────────────────────────────────────── */ body.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0e0e0e; padding: 1rem; } .auth-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; padding: 2rem; width: 100%; max-width: 420px; } .auth-card h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; } .auth-card .auth-subtitle { color: #666; font-size: 0.875rem; margin-bottom: 1.5rem; } .auth-form .form-group { margin-bottom: 1.1rem; } .auth-form label { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #aaa; margin-bottom: 0.35rem; } .auth-form input[type="email"], .auth-form input[type="password"] { width: 100%; background: #1a1a1a; border: 1px solid #333; color: #e8e8e8; border-radius: 4px; padding: 0.6rem 0.75rem; font-size: 1rem; font-family: inherit; transition: border-color 0.15s; } .auth-form input:focus { outline: none; border-color: #666; } .auth-form input.error { border-color: #e05; } .field-error { font-size: 0.78rem; color: #e05; margin-top: 0.3rem; display: block; } .field-error:empty { display: none; } .auth-hint { font-size: 0.75rem; color: #888; margin-top: 0.3rem; } .auth-form .btn { width: 100%; margin-top: 0.5rem; } .auth-footer { text-align: center; margin-top: 1.25rem; font-size: 0.85rem; color: #666; } .auth-footer a { color: #e05; text-decoration: none; } .auth-footer a:hover { text-decoration: underline; } /* ─── Account nav (shared overlay on map + pin creation pages) ───────────── */ .account-nav { position: absolute; top: 12px; right: 12px; z-index: 20; display: flex; gap: 8px; align-items: center; } .account-nav a { display: inline-block; padding: 5px 12px; background: #1a1a1aee; border: 1.5px solid #444; border-radius: 20px; color: #e8e8e8; font-size: 0.8rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(4px); transition: border-color 0.15s; } .account-nav a:hover { border-color: #888; } .account-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: #e05; border-radius: 20px; color: #fff; font-size: 0.8rem; font-weight: 700; cursor: pointer; user-select: none; border: none; } .account-chip:hover { opacity: 0.85; } .account-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; min-width: 140px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.5); } .account-dropdown[hidden] { display: none; } .account-dropdown button { display: block; width: 100%; padding: 0.65rem 1rem; background: none; border: none; color: #e8e8e8; font-size: 0.85rem; text-align: left; cursor: pointer; } .account-dropdown button:hover { background: #2a2a2a; } /* ─── Content pages (paths, my-paths) ───────────────────────────────────────── */ body.content-page { background: #0e0e0e; color: #e8e8e8; min-height: 100vh; } .content-header { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid #222; background: #111; position: sticky; top: 0; z-index: 10; } .header-back { color: #888; text-decoration: none; font-size: 0.85rem; white-space: nowrap; } .header-back:hover { color: #e8e8e8; } .header-title { font-size: 1.1rem; font-weight: 700; flex: 1; letter-spacing: -0.01em; margin: 0; } .header-nav { display: flex; gap: 0.75rem; } .header-nav a { color: #888; text-decoration: none; font-size: 0.85rem; } .header-nav a:hover { color: #e8e8e8; } .content-main { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } /* ─── Path list ─────────────────────────────────────────────────────────────── */ .path-list-page { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .filter-bar-paths { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .filter-bar-paths .filter-chip { padding: 5px 14px; background: #1a1a1a; border: 1.5px solid #333; border-radius: 20px; color: #aaa; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .filter-bar-paths .filter-chip:hover { border-color: #666; color: #e8e8e8; } .filter-bar-paths .filter-chip.active { border-color: #e05; color: #e05; } .paths-grid { display: flex; flex-direction: column; gap: 0.75rem; } .path-card { display: block; background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 1rem 1.25rem; text-decoration: none; color: inherit; transition: border-color 0.15s; } .path-card:hover { border-color: #444; } .path-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .path-card-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.35rem; color: #f0f0f0; } .path-card-desc { font-size: 0.85rem; color: #888; margin: 0 0 0.75rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .path-card-stats { display: flex; gap: 1rem; font-size: 0.78rem; color: #666; } /* ─── Difficulty badges ──────────────────────────────────────────────────────── */ .difficulty-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; background: #2a2a2a; color: #ccc; border: 1px solid #444; } .difficulty-badge.difficulty-short { background: #0d2b0d; color: #6fd46f; border-color: #3a6b3a; } .difficulty-badge.difficulty-medium { background: #1a1f2e; color: #7a9fe0; border-color: #3a4f7a; } .difficulty-badge.difficulty-long { background: #2b1a00; color: #d4a055; border-color: #6b4a10; } /* ─── Arrival UX ─────────────────────────────────────────────────────────────── */ .detail-proximity { font-size: 0.85rem; color: #777; margin: 0.5rem 0; line-height: 1.5; } .btn-proximity-action { display: inline-block; margin: 0.35rem 0.5rem 0 0; padding: 0.25rem 0.6rem; font-size: 0.8rem; background: #222; border: 1px solid #444; border-radius: 4px; color: #ccc; cursor: pointer; } .btn-proximity-action:hover { border-color: #666; color: #e8e8e8; } .btn-proximity-skip { color: #555; } .btn-proximity-skip:hover { color: #888; } .detail-countdown { font-size: 2rem; font-weight: 700; color: #e8e8e8; text-align: center; margin: 0.75rem 0; animation: arrival-pulse 1s ease-in-out infinite; } @keyframes arrival-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes arrival-unlock { 0% { box-shadow: 0 0 0 0 rgba(111, 212, 111, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(111, 212, 111, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 212, 111, 0); } } .detail-marks.unlocked { animation: arrival-unlock 0.6s ease-out forwards; } /* ─── Pin significance ──────────────────────────────────────────────────────── */ .detail-significance { font-size: 0.95rem; color: #ccc; line-height: 1.5; margin: 0.5rem 0 0.75rem; font-style: italic; } /* ─── Directions link ────────────────────────────────────────────────────────── */ .detail-directions { display: inline-block; margin: 0.75rem 0 0.5rem; font-size: 0.875rem; color: #7a9fe0; text-decoration: none; border: 1px solid #3a4f7a; border-radius: 4px; padding: 0.35rem 0.75rem; } .detail-directions::after { content: ' ↗'; opacity: 0.7; } .detail-directions:hover { background: #1a1f2e; } /* ─── Marks preview (unauthenticated) ────────────────────────────────────────── */ .marks-preview { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 0 0; } .marks-count { font-size: 0.875rem; font-weight: 600; color: #aaa; } .marks-last-visited { font-size: 0.8rem; color: #777; } .marks-snippet { margin: 0.25rem 0 0; padding-left: 0.75rem; border-left: 2px solid #444; font-style: italic; color: #bbb; font-size: 0.875rem; line-height: 1.5; } .marks-empty-preview { font-size: 0.85rem; color: #666; margin: 0.25rem 0 0; } .marks-cta { margin: 0.5rem 0 0; font-size: 0.875rem; color: #999; } .marks-cta a { color: #7a9fe0; } /* ─── Path detail ───────────────────────────────────────────────────────────── */ .path-detail-page { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .back-link { display: inline-block; color: #666; text-decoration: none; font-size: 0.85rem; margin-bottom: 1.25rem; } .back-link:hover { color: #e8e8e8; } .path-detail-header { margin-bottom: 1.25rem; } .path-detail-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; } .completion-count { font-size: 0.78rem; color: #666; } .path-detail-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; color: #f0f0f0; } .path-detail-description { font-size: 0.9rem; color: #888; line-height: 1.6; margin: 0; } .path-complete-banner { background: #0d2b0d; border: 1px solid #3a6b3a; color: #6fd46f; border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 1.25rem; } .follow-area { margin-bottom: 1.5rem; } .following-badge { display: inline-block; padding: 5px 14px; background: #1a2a1a; border: 1.5px solid #3a6b3a; border-radius: 20px; color: #6fd46f; font-size: 0.82rem; font-weight: 700; } /* ─── Pin list ──────────────────────────────────────────────────────────────── */ .pin-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .pin-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 6px; border: 1px solid #222; background: #161616; transition: border-color 0.15s; } .pin-row.pin-visited { background: #101e10; border-color: #1e3b1e; } .pin-row.pin-next { border-color: #3a4f7a; background: #111a28; } .pin-row-info { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; } .pin-order { font-size: 0.75rem; font-weight: 700; color: #555; width: 1.5rem; text-align: right; flex-shrink: 0; } .pin-name { font-size: 0.9rem; font-weight: 500; color: #d8d8d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pin-visited .pin-name { color: #5a9e5a; } .next-stop-label { font-size: 0.7rem; font-weight: 700; color: #7a9fe0; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .pin-row-action { flex-shrink: 0; } .pin-checked-date { font-size: 0.75rem; color: #5a9e5a; } .btn-checkin { background: #1a1f2e; border: 1px solid #3a4f7a; color: #7a9fe0; padding: 4px 12px; font-size: 0.78rem; font-weight: 600; border-radius: 4px; cursor: pointer; transition: background 0.15s; } .btn-checkin:hover:not(:disabled) { background: #222d40; } .btn-checkin:disabled { opacity: 0.45; cursor: not-allowed; } .btn-checkin-arrived { border-color: #3a6b3a; color: #6fd46f; } .btn-checkin-arrived:hover:not(:disabled) { background: #0d2b0d; } .btn-checkin-honor { border-color: #444; color: #777; font-style: italic; } /* ─── My Paths page ─────────────────────────────────────────────────────────── */ .section-heading { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin: 0 0 0.75rem; } section + section { margin-top: 2rem; } .path-card-completed { border-color: #1e3b1e; } .completed-check { font-size: 0.85rem; color: #6fd46f; font-weight: 700; } .completed-date { font-size: 0.8rem; color: #5a9e5a; margin: 0.35rem 0 0; } .progress-bar-wrap { height: 4px; background: #2a2a2a; border-radius: 2px; margin: 0.6rem 0 0.35rem; overflow: hidden; } .progress-bar { height: 100%; background: #7a9fe0; border-radius: 2px; transition: width 0.3s; } .progress-label { font-size: 0.78rem; color: #666; margin: 0; } .empty-text { color: #555; font-size: 0.9rem; } .empty-text a { color: #e05; text-decoration: none; } .empty-text a:hover { text-decoration: underline; } /* ─── Path theme: apply to interactive elements ────────────────────────────── */ .btn-primary { background: var(--path-primary); } .account-chip { background: var(--path-primary); } .filter-chip.active { background: var(--path-primary); border-color: var(--path-primary); } .filter-bar-paths .filter-chip.active { border-color: var(--path-primary); color: var(--path-primary); } .auth-footer a { color: var(--path-primary); } .empty-text a { color: var(--path-primary); } .marks-cta a { color: var(--path-primary); }