/* ========================================================================== GoneFinder — UI layer -------------------------------------------------------------------------- The last stylesheet in the cascade, and the only one you should need to edit for day-to-day UI work. Everything here is written against the tokens in design-tokens.css — no raw hex, no third palette. Cascade position (see the of index.html): styles.css base + legacy palette gf-app.css merged legacy component layers design-tokens.css design system: colours, spacing, type (source of truth) -> gf-ui.css THIS FILE Contents 1. Shell: navbar, tabs, skip link 2. Hero: the two primary jobs (search / report) 3. Search: controls, view switcher, result views 4. Report form: grouping, required/optional, validation states 5. States: empty, loading, error, success 6. Footer 7. Language picker 8. Accessibility + mobile baseline ========================================================================== */ /* ========================================================================== 1. Shell ========================================================================== */ .navbar { background: var(--bg-primary); border-bottom: 1px solid var(--border-primary); box-shadow: var(--gf-shadow-1); backdrop-filter: none; } .nav-container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: 1280px; margin: 0 auto; padding: var(--space-2) var(--space-4); min-height: 60px; } .nav-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none; } .nav-brand i { color: var(--primary-600); } .nav-menu { display: flex; align-items: center; gap: var(--space-1); } /* The four in-page views behave as a tab set; the wrapper carries role="tablist" and reproduces the flex layout .nav-menu used to apply to the links direct. */ .nav-tabs { display: flex; align-items: center; gap: var(--space-1); } .nav-link { color: var(--text-secondary); border-radius: var(--gf-radius-md); font-weight: 500; text-transform: none; letter-spacing: 0; padding: var(--space-2) var(--space-3); min-height: 44px; background: transparent; border: 1px solid transparent; } .nav-link:hover { background: var(--bg-secondary); color: var(--text-primary); transform: none; } .nav-link.active, .nav-link[aria-selected="true"] { background: var(--primary-50); color: var(--primary-600); border-color: var(--primary-100); font-weight: 600; } .nav-link.active::after, .nav-link::after { content: none; } .nav-link.nav-login { margin-inline-start: var(--space-2); border-color: var(--border-secondary); color: var(--text-secondary); } .nav-link.nav-login:hover { border-color: var(--primary-600); color: var(--primary-600); background: transparent; } .theme-toggle { min-width: 44px; min-height: 44px; border-radius: var(--gf-radius-md); border: 1px solid var(--border-primary); background: transparent; color: var(--text-secondary); } .theme-toggle:hover { background: var(--bg-secondary); color: var(--text-primary); } /* Filled surfaces use --gf-action, never --primary-600: in the dark theme --primary-600 flips to a light blue meant for TEXT on dark, so white on it measures 2.25:1. --gf-action stays #005ea2 in both themes (white = 6.7:1). */ .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: calc(var(--gf-z-nav) + 10); padding: var(--space-3) var(--space-4); border-radius: var(--gf-radius-md); background: var(--gf-action); color: #ffffff; font-weight: 600; text-decoration: none; transition: top var(--gf-dur-fast) var(--gf-ease); } .skip-link:focus { top: var(--space-2); } /* Tab panels: only the active one is exposed. `hidden` is set alongside the legacy .active class so assistive tech and find-in-page agree with the eye. */ .tab-content[hidden] { display: none !important; } /* ========================================================================== 2. Hero — the two primary jobs -------------------------------------------------------------------------- "Search the registry" and "Report an item" are the whole product. They get the first screen; everything else is secondary. ========================================================================== */ .hero { padding: clamp(2rem, 6vw, 3.5rem) var(--space-4) var(--space-8); } .hero-content { max-width: 720px; margin: 0 auto; text-align: center; } .hero-subtitle { max-width: 56ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.6; } /* --- Primary search: one big, obvious field --- */ .hero-search-wrap { display: flex; gap: var(--space-2); max-width: 640px; margin: var(--space-6) auto var(--space-3); } .hero-search-field { position: relative; flex: 1 1 auto; min-width: 0; } .hero-search-field > i { position: absolute; inset-inline-start: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } #hero-search { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); padding-inline-start: calc(var(--space-4) * 2 + 1em); border: 1px solid var(--border-secondary); border-radius: var(--gf-radius-md); background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; box-shadow: var(--gf-shadow-1); } #hero-search::placeholder { color: var(--text-muted); } #hero-search:focus { outline: none; border-color: var(--primary-600); box-shadow: var(--gf-ring); } #hero-search-btn { flex: 0 0 auto; min-height: 52px; padding-inline: var(--space-6); white-space: nowrap; } /* --- Secondary job: report --- */ .hero-secondary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); font-size: 0.9375rem; color: var(--text-secondary); } .hero-report-btn { min-height: 44px; } .trust-indicators { margin-top: var(--space-8); flex-wrap: wrap; justify-content: center; } @media (max-width: 640px) { .hero-search-wrap { flex-direction: column; } #hero-search-btn { width: 100%; } .hero-secondary { flex-direction: column; gap: var(--space-3); } .hero-report-btn { width: 100%; justify-content: center; } } /* ========================================================================== 3. Search ========================================================================== */ .section-header h2 { display: flex; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text-primary); font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 700; } .section-header h2 i { color: var(--primary-600); } .section-header p { color: var(--text-secondary); } .search-controls { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--gf-radius-lg); box-shadow: var(--gf-shadow-1); padding: var(--space-4); } .search-box input { min-height: 48px; } .search-box input:focus { box-shadow: var(--gf-ring); border-color: var(--primary-600); } .filter-select { min-height: 48px; border-radius: var(--gf-radius-md); border: 1px solid var(--border-secondary); background: var(--bg-primary); color: var(--text-primary); } /* --- View switcher (grid / list / details) --- */ .items-view-switcher { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 var(--space-4) auto; width: max-content; border: 1px solid var(--border-primary); border-radius: var(--gf-radius-md); background: var(--bg-primary); box-shadow: var(--gf-shadow-1); } .items-view-switcher .ivs-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 13px; border: 0; border-radius: var(--gf-radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background-color var(--gf-dur-fast) var(--gf-ease), color var(--gf-dur-fast) var(--gf-ease); } .items-view-switcher .ivs-btn:hover { background: var(--bg-secondary); color: var(--text-primary); } .items-view-switcher .ivs-btn[aria-pressed="true"] { background: var(--gf-action); color: #ffffff; } .items-view-switcher .ivs-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .items-view-switcher .ivs-btn { transition: none; } } /* --- LIST: comfortable horizontal rows --- */ /* --- Card status treatment --- `.status-stolen` / `.status-lost` / `.status-found` are badge utilities in gf-app.css: solid fill plus white or dark-red text. createItemCard also puts `status-` on the card ROOT, so a stolen card rendered as a solid red block — and in the details/list views as red-on-red text. Cards instead get the restrained treatment styles.css already defines for .item-card.status-recovered: a coloured border and a 5% wash. The status is communicated by the .item-card-status badge inside the card, not by repainting the whole surface. Two classes beat the single-class badge rule on specificity, so this holds wherever a card appears. */ .item-card.status-stolen, .item-card.status-lost, .item-card.status-found { color: inherit; font-weight: inherit; } .item-card.status-stolen { border: 1px solid rgba(220, 38, 38, 0.45); background: linear-gradient(to bottom, rgba(220, 38, 38, 0.05), transparent); } .item-card.status-lost { border: 1px solid rgba(217, 119, 6, 0.45); background: linear-gradient(to bottom, rgba(217, 119, 6, 0.05), transparent); } .item-card.status-found { border: 1px solid rgba(2, 132, 199, 0.45); background: linear-gradient(to bottom, rgba(2, 132, 199, 0.05), transparent); } /* GRID: a real multi-column grid of vertical cards. Without this, "Grid" was indistinguishable from "List": the container's base rule is `display: flex; flex-direction: column`, so every view rendered one full-width card per row. The base .item-card is itself a 3-column grid (120px 1fr auto), so it has to be flipped to a vertical stack here. */ #search-results.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--space-5); align-items: start; } #search-results.view-grid .item-card { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 0 var(--space-4); overflow: hidden; margin-bottom: 0; } #search-results.view-grid .item-image-container { width: 100%; height: 168px; position: relative; flex: 0 0 auto; } #search-results.view-grid .item-image { width: 100%; height: 168px; object-fit: cover; border-radius: 0; } #search-results.view-grid .item-info { padding: 0 var(--space-4); min-width: 0; } #search-results.view-grid .item-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #search-results.view-grid .item-meta { display: flex; flex-direction: column; gap: 4px; } #search-results.view-grid .item-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0 var(--space-4); margin-top: auto; } #search-results.view-grid .item-actions .btn { flex: 1 1 auto; justify-content: center; } #search-results.view-list { display: flex; flex-direction: column; gap: 10px; } #search-results.view-list .item-card { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px; } #search-results.view-list .item-image-container { flex: 0 0 68px; width: 68px; height: 68px; position: relative; } #search-results.view-list .item-image { width: 68px; height: 68px; object-fit: cover; border-radius: var(--gf-radius-sm); } #search-results.view-list .item-card-status { transform: scale(0.82); transform-origin: top left; } #search-results.view-list .item-info { flex: 1 1 auto; min-width: 0; } #search-results.view-list .item-description { margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #search-results.view-list .item-meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; } /* styles.css:1905 sets .item-actions to flex-direction: column, so the buttons stacked into a tall tower in the horizontal views. Force a row here. */ #search-results.view-list .item-actions { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; } /* --- DETAILS: dense, table-like single-line rows --- */ #items-details-header { display: flex; align-items: center; gap: 12px; padding: 6px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); border-bottom: 2px solid var(--border-primary); } #items-details-header[hidden] { display: none; } #items-details-header .dh-thumb { flex: 0 0 40px; } #items-details-header .dh-serial { flex: 0 0 132px; } #items-details-header .dh-desc { flex: 1 1 auto; min-width: 0; } #items-details-header .dh-meta { flex: 0 0 500px; } #items-details-header .dh-actions { flex: 0 0 120px; text-align: end; } #search-results.view-details { display: flex; flex-direction: column; /* .infinite-scroll-container sets gap: var(--space-6) (24px). Table rows sit flush against each other; the per-row border-bottom is the separator. */ gap: 0; } /* The base card carries margin-bottom: var(--space-6), which put 24px of air between rows that are meant to read as a table. The border-bottom below is the row separator. */ #search-results.view-details .item-card { margin-bottom: 0; /* styles.css:6838 sets min-height: 140px on the card. In a table view the row should be as tall as its tallest cell (the 44px action buttons), not a fixed card-sized block — that single declaration was most of why "Details" was not actually dense. */ min-height: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 0; border-bottom: 1px solid var(--border-primary); } #search-results.view-details .item-card:hover { background: var(--bg-secondary); } #search-results.view-details .item-image-container { flex: 0 0 40px; width: 40px; height: 40px; } #search-results.view-details .item-image { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; } /* The badge is wider than the 40px thumbnail column, so its label was clipped to "STO" / "LOS". In this dense view show the icon only — the full label is available in the grid and list views, and the row also carries the status-coloured border from .item-card.status-*. */ #search-results.view-details .item-card-status { inset-inline-start: 0; top: 0; padding: 3px 5px; font-size: 0; line-height: 1; border-radius: 4px; } #search-results.view-details .item-card-status > i { font-size: 10px; } #search-results.view-details .item-card-status > span { display: none; } #search-results.view-details .item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; } #search-results.view-details .item-header { flex: 0 0 132px; margin: 0; } #search-results.view-details .item-description { flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Owner + date + location + reward need ~707px of natural width; at the old 320px basis the location was clipped mid-character. Give the column real room (the description keeps the remainder and truncates, which is normal for a table) and let each field shrink with its own ellipsis so the degradation is graceful instead of a hard cut. Keep in sync with #items-details-header .dh-meta below, or the header stops lining up with the rows. */ #search-results.view-details .item-meta { flex: 0 0 500px; display: flex; flex-direction: row; align-items: center; gap: 14px; min-width: 0; white-space: nowrap; overflow: hidden; } #search-results.view-details .item-meta .meta-item { flex: 0 1 auto; min-width: 0; overflow: hidden; } #search-results.view-details .item-meta .meta-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The "Stolen:" label is redundant here — the column header already reads OWNER · DATE · LOCATION. Dropping it returns ~50px to the date and location, which is the difference between "Jul 11..." and the full date on rows that also carry a reward chip. */ #search-results.view-details .item-meta [data-i18n="card_stolen_prefix"] { display: none; } /* A partly-shown number is worse than none: "$ 3.." reads as three when the reward is three hundred. The amount never shrinks; the "Reward Available" wording is dropped since the currency icon already says what it is, and the surrounding text fields absorb the shrink instead. */ #search-results.view-details .item-meta .item-reward { flex: 0 0 auto; } #search-results.view-details .item-meta .item-reward .reward-amount { overflow: visible; text-overflow: clip; } #search-results.view-details .item-meta .item-reward [data-i18n="reward_available"] { display: none; } /* A fixed 96px basis plus the base rule's `flex-wrap: wrap` forced the three icon buttons onto three lines, which is what made these "dense" rows 156px tall. Size to content and never wrap. */ #search-results.view-details .item-actions { flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; display: flex; gap: 4px; } #search-results.view-details .item-actions .btn span { display: none; } #search-results.view-details .item-actions .btn { padding: 6px 8px; min-width: 36px; } @media (max-width: 640px) { .items-view-switcher .ivs-btn span { display: none; } .items-view-switcher .ivs-btn { padding: 6px 10px; min-width: 44px; justify-content: center; } #search-results.view-details .item-info { flex-direction: column; align-items: flex-start; gap: 2px; } #search-results.view-details .item-header, #search-results.view-details .item-meta { flex: 0 0 auto; } #search-results.view-details .item-meta { flex-wrap: wrap; white-space: normal; } #items-details-header { display: none; } } /* ========================================================================== 4. Report form -------------------------------------------------------------------------- The core flow. Fields are grouped into three plain-language steps so the form reads as a sequence rather than a wall, and required vs optional is stated rather than implied. ========================================================================== */ .emergency-form-wrapper { max-width: 860px; margin-inline: auto; } .form-container { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--gf-radius-lg); box-shadow: var(--gf-shadow-1); padding: var(--space-6); } @media (max-width: 640px) { .form-container { padding: var(--space-4); } } /* --- Quick-start chips --- */ .quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-6); } .quick-action-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-secondary); border-radius: var(--gf-radius-full); background: var(--bg-primary); color: var(--text-secondary); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; box-shadow: none; transition: border-color var(--gf-dur-fast) var(--gf-ease), color var(--gf-dur-fast) var(--gf-ease), background-color var(--gf-dur-fast) var(--gf-ease); } .quick-action-btn:hover, .quick-action-btn.is-active { border-color: var(--primary-600); color: var(--primary-600); background: var(--primary-50); transform: none; } .quick-action-btn i { color: var(--primary-600); font-size: 0.9375rem; margin: 0; } .quick-action-btn span { display: inline; font-size: inherit; } /* --- "Before you begin" --- */ .emergency-help { background: var(--gf-info-soft-bg); border: 1px solid transparent; border-inline-start: 3px solid var(--primary-600); border-radius: var(--gf-radius-md); color: var(--gf-info-soft-fg); padding: var(--space-4); margin-bottom: var(--space-6); } .emergency-help h4 { display: flex; align-items: center; gap: var(--space-2); color: inherit; font-size: 0.9375rem; margin: 0 0 var(--space-2); } .emergency-help p, .emergency-help li { color: inherit; font-size: 0.875rem; } .emergency-help ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); } /* --- Step grouping --- */ .form-step { border: 0; border-top: 1px solid var(--border-primary); margin: 0 0 var(--space-6); padding: var(--space-6) 0 0; min-width: 0; /* fieldset defaults break CSS grid children */ } .form-step:first-of-type { border-top: 0; padding-top: 0; } /* display:flex on is still inconsistent between engines, so the legend stays a block and the step number is laid out inline. */ .form-step > legend { display: block; padding: 0; margin-bottom: var(--space-4); font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--text-primary); } .form-step > legend .step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-inline-end: var(--space-3); vertical-align: -0.4em; border-radius: var(--gf-radius-full); background: var(--gf-action); color: #ffffff; font-size: 0.8125rem; font-weight: 700; } .form-grid { gap: var(--space-5); margin-bottom: 0; } .form-group label { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); } .form-group label i { color: var(--text-muted); } /* Required / optional stated in the label, not left to a lone asterisk. */ .form-group.required > label::after, .form-group:has(> input[required], > textarea[required], > select[required]) > label::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--error-600); flex: 0 0 auto; margin-inline-start: 2px; color: transparent; } .form-group .optional-tag { margin-inline-start: auto; padding: 2px 8px; border-radius: var(--gf-radius-full); background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .form-legend { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); font-size: 0.8125rem; color: var(--text-muted); } .form-legend .req-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--error-600); } /* --- Controls --- */ .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="date"], .form-group input[type="number"], .form-group input[type="tel"], .form-group textarea, .form-group select { width: 100%; min-height: 46px; padding: var(--space-3); border: 1px solid var(--border-secondary); border-radius: var(--gf-radius-md); background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 1rem; /* 16px: stops iOS zooming on focus */ } .form-group textarea { min-height: 96px; resize: vertical; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary-600); box-shadow: var(--gf-ring); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .form-hint { margin-top: var(--space-2); color: var(--text-muted); font-size: 0.8125rem; line-height: 1.5; } /* --- Identifier type radios --- */ .radio-group { display: flex; flex-wrap: wrap; gap: var(--space-2); } .radio-option { position: relative; } .radio-option input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .radio-option label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-secondary); border-radius: var(--gf-radius-full); background: var(--bg-primary); color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; } .radio-option input[type="radio"]:checked + label { border-color: var(--primary-600); background: var(--primary-50); color: var(--primary-600); } .radio-option input[type="radio"]:focus-visible + label { outline: 2px solid var(--primary-600); outline-offset: 2px; } /* Out-specifies the legacy `.form-group.required label::after { content:" *" }`, which reached the radio labels nested inside the required serial field. */ .form-group .radio-option label::after, .form-group.required .radio-option label::after { content: none; } /* --- Reward row --- */ .reward-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-primary); border-radius: var(--gf-radius-md); background: var(--bg-secondary); margin-bottom: var(--space-5); } .reward-row .checkbox-label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: 500; color: var(--text-primary); cursor: pointer; text-transform: none; letter-spacing: 0; } .reward-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary-600); cursor: pointer; } .reward-row .checkbox-label i { color: var(--success-600); } .reward-amount-field { display: none; align-items: center; gap: var(--space-2); max-width: 220px; } .reward-amount-field.is-visible { display: flex; } .reward-amount-field .currency { color: var(--text-secondary); font-weight: 700; } .reward-amount-field input { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-secondary); border-radius: var(--gf-radius-md); background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 1rem; } /* --- Actions --- */ .form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-primary); } .form-actions .btn { min-height: 48px; } .form-actions .submit-btn { padding-inline: var(--space-8); } @media (max-width: 640px) { .form-actions { flex-direction: column-reverse; align-items: stretch; } .form-actions .btn { width: 100%; justify-content: center; } } /* --- Upload --- */ .file-upload-area { border: 2px dashed var(--border-secondary); border-radius: var(--gf-radius-md); background: var(--bg-secondary); padding: var(--space-6); text-align: center; transition: border-color var(--gf-dur-fast) var(--gf-ease), background-color var(--gf-dur-fast) var(--gf-ease); } .file-upload-area:hover, .file-upload-area.dragover, .file-upload-area:focus-within { border-color: var(--primary-600); background: var(--primary-50); } .file-upload-area .upload-icon { font-size: 1.75rem; color: var(--primary-600); } .file-upload-area .upload-text p { color: var(--text-primary); font-weight: 600; margin: var(--space-2) 0 0; } .file-upload-area .upload-text span { color: var(--text-secondary); font-size: 0.875rem; } .file-upload-area .upload-encouragement { color: var(--text-muted); font-size: 0.8125rem; margin-top: var(--space-2); } .upload-link { border: 0; background: none; padding: 0; font: inherit; color: var(--primary-600); font-weight: 600; text-decoration: underline; cursor: pointer; } /* --- Validation feedback --- */ .form-group input.error, .form-group textarea.error, .form-group select.error { border-color: var(--error-600); } .form-group input.error:focus, .form-group textarea.error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25); } .form-group input.success, .form-group textarea.success { border-color: var(--success-600); } .field-error, .field-success { display: none; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: 0.8125rem; font-weight: 500; line-height: 1.45; } .field-error.show, .field-success.show { display: flex; } .field-error { color: var(--error-600); } .field-success { color: var(--success-600); } .field-error i, .field-success i { flex: 0 0 auto; } /* --- Submit result --- */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--gf-radius-md); border: 1px solid transparent; font-size: 0.9375rem; line-height: 1.5; } .alert.hidden { display: none; } .alert-success, .alert.success { background: var(--gf-success-soft-bg); color: var(--gf-success-soft-fg); border-color: var(--success-600); } .alert-error, .alert.error { background: var(--gf-danger-soft-bg); color: var(--gf-danger-soft-fg); border-color: var(--error-600); } .alert-info, .alert.info { background: var(--gf-info-soft-bg); color: var(--gf-info-soft-fg); border-color: var(--primary-600); } /* ========================================================================== 5. Empty / loading / error states ========================================================================== */ .enhanced-empty-state, .loading-error { max-width: 460px; margin: var(--space-12) auto; padding: var(--space-8) var(--space-6); border: 1px solid var(--border-primary); border-radius: var(--gf-radius-lg); background: var(--bg-primary); text-align: center; } .enhanced-empty-state.hidden, .loading-error.hidden, .all-items-loaded.hidden { display: none; } .empty-illustration, .loading-error .error-content > i { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--space-4); border-radius: var(--gf-radius-full); background: var(--bg-secondary); color: var(--text-secondary); font-size: 1.375rem; } .loading-error .error-content > i { background: var(--gf-danger-soft-bg); color: var(--gf-danger-soft-fg); } .empty-title, .loading-error h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-2); } .empty-description, .loading-error p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.6; margin: 0 0 var(--space-5); } .empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .retry-button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--gf-radius-md); background: var(--gf-action); color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; } .retry-button:hover { background: var(--gf-action-hover); } .loading-overlay { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); } .loading-overlay.hidden { display: none; } .loading-message { color: #ffffff; font-weight: 500; } /* ========================================================================== 6. Footer ========================================================================== */ .trust-footer { background: var(--bg-primary); border-top: 1px solid var(--border-primary); color: var(--text-secondary); margin-top: var(--space-16); padding: var(--space-12) var(--space-4) var(--space-8); } .trust-footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); max-width: 1280px; margin: 0 auto; } .trust-footer h4 { color: var(--text-primary); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--space-4); } .trust-footer ul { list-style: none; margin: 0; padding: 0; } .trust-footer li + li { margin-top: var(--space-1); } .trust-footer a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; color: var(--text-secondary); font-size: 0.875rem; text-decoration: none; } .trust-footer a:hover { color: var(--primary-600); text-decoration: underline; } .trust-footer a i { color: var(--text-muted); width: 1em; text-align: center; } .trust-footer a:hover i { color: var(--primary-600); } .trust-footer-bottom { max-width: 1280px; margin: var(--space-8) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--border-primary); color: var(--text-muted); font-size: 0.8125rem; text-align: center; } /* ========================================================================== 7. Language picker -------------------------------------------------------------------------- Markup is built by i18n.js; this only styles it. It previously referenced a token vocabulary (--gf-surface, --gf-border, --gf-focus) that no stylesheet ever defined, so every value silently fell back to a hard-coded hex and the picker drifted from the rest of the app — especially in dark mode. ========================================================================== */ .lang-picker { position: relative; display: inline-flex; } .lang-picker-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border-primary); border-radius: var(--gf-radius-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background-color var(--gf-dur-fast) var(--gf-ease), border-color var(--gf-dur-fast) var(--gf-ease); } .lang-picker-btn:hover { background: var(--bg-secondary); color: var(--text-primary); } .lang-picker-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; } .lang-picker-btn .lang-flag { font-size: 1.15rem; line-height: 1; } .lang-picker-btn .lang-caret { font-size: 0.7rem; opacity: 0.65; } .lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: var(--gf-z-dropdown); min-width: 208px; max-height: 340px; overflow-y: auto; padding: 5px; border: 1px solid var(--border-primary); border-radius: var(--gf-radius-lg); background: var(--bg-primary); box-shadow: var(--gf-shadow-3); } .lang-menu[hidden] { display: none; } .lang-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--gf-radius-sm); background: transparent; color: var(--text-primary); font: inherit; font-size: 0.9rem; text-align: start; cursor: pointer; } .lang-option:hover { background: var(--bg-secondary); } .lang-option:focus-visible { outline: 2px solid var(--primary-600); outline-offset: -2px; } .lang-option .lang-flag { font-size: 1.2rem; line-height: 1; } .lang-option.is-active { background: var(--gf-action); color: #ffffff; font-weight: 600; } @media (max-width: 640px) { .lang-picker-btn .lang-code, .lang-picker-btn .lang-caret { display: none; } .lang-picker-btn { padding: 6px 8px; min-width: 44px; justify-content: center; } .lang-menu { min-width: 180px; } } /* RTL: mirror the few places that assume left-to-right flow. */ [dir="rtl"] .item-card, [dir="rtl"] #items-details-header { direction: rtl; } [dir="rtl"] #search-results.view-list .item-card-status, [dir="rtl"] #search-results.view-details .item-card-status { transform-origin: top right; } /* ========================================================================== 8. Accessibility + mobile baseline ========================================================================== */ /* One focus ring, on everything, that survives the legacy `outline: none` patches scattered through styles.css. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary-600) !important; outline-offset: 2px !important; } /* Windows High Contrast / forced-colors: keep the ring visible. */ @media (forced-colors: active) { a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid Highlight !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Nothing should ever push the page sideways on a phone. */ html, body { max-width: 100%; overflow-x: hidden; } img, svg, video, canvas { max-width: 100%; height: auto; } /* Comfortable minimum hit area for every interactive control. */ @media (pointer: coarse) { a.nav-link, button, .btn, [role="button"] { min-height: 44px; } } @media (max-width: 768px) { .nav-container { flex-wrap: wrap; row-gap: var(--space-2); padding-inline: var(--space-3); } .nav-menu { width: 100%; justify-content: space-between; gap: 2px; } .nav-tabs { flex: 1 1 auto; justify-content: flex-start; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nav-tabs::-webkit-scrollbar { display: none; } .nav-link { padding: var(--space-2); font-size: 0.8125rem; white-space: nowrap; } .nav-link.nav-login span { display: none; } .trust-footer-content { gap: var(--space-6); } } /* --- Clickable result cards --------------------------------------------- The whole card opens the detail view (details + full-size image). Give it a pointer and a keyboard focus ring; the action buttons keep their own cursor and are excluded from the card's click handler in setupItemCardListeners. */ #search-results .item-card { cursor: pointer; } #search-results .item-card:focus-visible { outline: 2px solid var(--gf-focus, #2f63b8); outline-offset: 2px; } /* --- Inline location map in the detail modal ---------------------------- The detail view shows image + full description + map together. The map sits in the left column directly under the image (filling the space beside the info column), and matches the image's width. */ .item-detail-map-section { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); width: 100%; max-width: min(80vw, 600px); align-self: center; margin-top: var(--space-4, 1rem); } .item-detail-map-section.hidden { display: none; } .item-detail-map-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gf-text-muted, #64748b); } .item-detail-map { width: 100%; height: 240px; border-radius: var(--radius-lg, 12px); border: 1px solid var(--gf-border, #e2e8f0); overflow: hidden; background: #e8eef3; z-index: 0; } .item-detail-map .leaflet-container { border-radius: inherit; font: inherit; }