/* ========================================================== Global Donor Catalog — Front-End Stylesheet Design System: Deep Navy · Warm Stone · Antique Gold v2.0 — Full Visual Redesign ========================================================== */ /* ---------- 0. Google Fonts fallback (already linked in ) ---------- */ /* ---------- 1. Design Tokens ---------- */ :root { /* Background */ --bg: #EDE9E2; --bg-alt: #F3F0EA; --bg-warm: #F7F5F1; /* Surface */ --panel: #FFFFFF; --panel-soft: #FAFAF8; --panel-tint: #F6F3EE; /* Text */ --text: #1A1714; --text-2: #3A3633; --muted: #7B7672; --muted-light: #A09C98; /* Lines */ --line: rgba(26, 23, 20, 0.10); --line-soft: rgba(26, 23, 20, 0.06); --line-strong: rgba(26, 23, 20, 0.18); /* Brand: Deep Navy Blue — professional, medical, international */ --brand: #1E3E5C; --brand-dark: #142B40; --brand-mid: #2A5278; --brand-pale: rgba(30, 62, 92, 0.06); --brand-hover: rgba(30, 62, 92, 0.10); /* Gold Accent — restrained luxury */ --gold: #9A7B42; --gold-mid: #B4914D; --gold-pale: rgba(154, 123, 66, 0.10); /* Status: sage green */ --accent: #3A6652; --accent-bg: rgba(58, 102, 82, 0.08); /* Tags / Chips */ --tag-bg: #EBE7DF; --tag-text: #4A4540; /* Shadows */ --shadow-xs: 0 1px 3px rgba(26, 23, 20, 0.05); --shadow-sm: 0 2px 8px rgba(26, 23, 20, 0.07); --shadow: 0 4px 16px rgba(26, 23, 20, 0.09); --shadow-lg: 0 8px 32px rgba(26, 23, 20, 0.10); /* Border Radius */ --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; /* Spacing */ --page-x: clamp(20px, 4vw, 48px); } /* ---------- 2. Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--text); background-color: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, p { margin: 0; } /* ---------- 3. Typography Scale ---------- */ /* Display font for hero headings */ .hero-grid h2 { font-family: 'Cormorant Garamond', 'Noto Serif CJK SC', 'SimSun', Georgia, serif; font-weight: 400; font-size: clamp(32px, 4.5vw, 58px); line-height: 1.12; letter-spacing: -0.015em; color: var(--text); } h1 { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; } h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); } h4 { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text); } .eyebrow, .section-kicker { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 8px; } .kicker-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } /* ---------- 4. Header & Navigation ---------- */ .hero { background: var(--panel); border-bottom: 1px solid var(--line); padding: 0 var(--page-x); } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; position: relative; } .brand { display: flex; align-items: center; gap: 14px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1.5px solid var(--brand); color: var(--brand); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 14px; letter-spacing: 0.05em; border-radius: var(--r-xs); flex-shrink: 0; } .brand-mark-sm { width: 28px; height: 28px; font-size: 11px; } .brand-text .eyebrow { color: var(--muted-light); letter-spacing: 0.14em; } .brand-text h1 { color: var(--text); } .topbar-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .topbar-center-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; pointer-events: none; } .fs-center-logo { display: block; width: auto; height: 38px; max-width: min(220px, 18vw); opacity: 0.96; } .ghost-link { padding: 8px 16px; font-size: 13px; color: var(--text-2); border-radius: var(--r-sm); transition: background 0.16s, color 0.16s; font-weight: 400; } .ghost-link:hover { background: var(--bg-alt); color: var(--text); } .admin-link { color: var(--muted); font-size: 12px; } /* Thin gold rule between nav and hero content */ .hero-rule { height: 1px; background: linear-gradient(to right, var(--gold-pale), var(--gold-pale), transparent); margin: 0 -1px; } /* ---------- 5. Hero Section ---------- */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.7fr); gap: 40px; padding: 48px 0 56px; align-items: start; } .hero-content { display: flex; flex-direction: column; } .hero-copy { margin-top: 20px; max-width: 600px; line-height: 1.75; color: var(--muted); font-size: 14px; } .hero-stats { margin-top: 36px; display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; width: fit-content; max-width: 100%; } .hero-stat { padding: 18px 28px; border-right: 1px solid var(--line); min-width: 110px; } .hero-stat:last-child { border-right: none; } .hero-stat strong { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 36px; line-height: 1; color: var(--brand); letter-spacing: -0.02em; } .hero-stat strong sup { font-size: 18px; vertical-align: super; letter-spacing: 0; } .hero-stat span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; } /* Hero aside panel */ .hero-panel { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-top: 4px; } .hero-panel-header { display: flex; align-items: center; gap: 8px; color: var(--muted); margin-bottom: 16px; } .panel-icon { color: var(--gold); display: flex; align-items: center; } .hero-panel-label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .hero-panel-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .hero-panel-list li { font-size: 13.5px; color: var(--text-2); padding: 10px 14px; background: var(--panel); border-radius: var(--r-sm); border: 1px solid var(--line-soft); line-height: 1.5; } .hero-panel-note { margin-top: 16px; font-size: 12px; color: var(--muted-light); line-height: 1.65; padding-top: 14px; border-top: 1px solid var(--line-soft); } .br-desktop { display: block; } /* ---------- 6. Layout ---------- */ .layout { padding: 28px var(--page-x) 40px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; } .lower-layout { padding-top: 0; } .full-span { grid-column: 1 / -1; } /* ---------- 7. Card Base ---------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-xs); } /* ---------- 8. Filter Panel ---------- */ .filter-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; margin-bottom: 20px; } .filter-head-text h3 { font-size: 16px; } .reset-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-family: inherit; transition: color 0.16s, border-color 0.16s, background 0.16s; white-space: nowrap; } .reset-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--bg-alt); } .filter-grid { display: flex; flex-direction: column; gap: 14px; } .filter-label { display: flex; flex-direction: column; gap: 6px; } .filter-label span { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; } /* Input with icon wrapper */ .input-wrap { position: relative; } .input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted-light); pointer-events: none; } .input-wrap input { padding-left: 36px; } /* Select wrapper for custom arrow */ .select-wrap { position: relative; } .select-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-light); pointer-events: none; } .select-wrap select { padding-right: 32px; } /* Form controls */ input, select, textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: var(--r-sm); font-family: inherit; font-size: 14px; line-height: 1.5; transition: border-color 0.18s, box-shadow 0.18s; -webkit-appearance: none; appearance: none; } input::placeholder { color: var(--muted-light); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px var(--brand-pale); } textarea { resize: vertical; min-height: 80px; } .filter-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; align-items: flex-start; gap: 8px; color: var(--muted-light); font-size: 12px; line-height: 1.6; } .filter-footer svg { flex-shrink: 0; margin-top: 1px; color: var(--gold-mid); } /* ---------- 9. Catalog Panel ---------- */ .catalog-panel { display: flex; flex-direction: column; gap: 20px; } .results-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } .results-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .sort-control { display: flex; align-items: center; gap: 6px; } .sort-control span { font-size: 11px; color: var(--muted); white-space: nowrap; } .sort-control .select-wrap { min-width: 96px; } .sort-control .select-wrap select { min-height: 36px; padding: 7px 30px 7px 12px; font-size: 12px; border-radius: 8px; } .sort-control .select-arrow { right: 10px; } .result-summary { font-size: 13px; color: var(--muted); } /* ---------- 10. Donor Card ---------- */ .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; align-items: start; } .donor-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow 0.22s ease, transform 0.22s ease; cursor: pointer; } .donor-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); } /* ── Photo zone ── */ .portrait-placeholder { position: relative; height: 220px; background: var(--bg-alt); overflow: hidden; flex-shrink: 0; } /* No-photo placeholder content */ .portrait-no-photo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .portrait-placeholder.has-photo .portrait-no-photo { display: none; } .portrait-rings { position: relative; width: 106px; height: 106px; display: flex; align-items: center; justify-content: center; } .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(30, 62, 92, 0.10); } .ring-1 { width: 48px; height: 48px; } .ring-2 { width: 76px; height: 76px; border-color: rgba(30, 62, 92, 0.07); } .ring-3 { width: 106px; height: 106px; border-color: rgba(30, 62, 92, 0.04); } .portrait-label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-light); } /* Overlay: gradient bottom strip */ .card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 10px 9px; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%); display: flex; align-items: flex-end; justify-content: space-between; z-index: 3; pointer-events: none; } .donor-view-count { font-size: 9.5px; color: rgba(255,255,255,0.65); letter-spacing: 0.06em; line-height: 1; } .status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-xs); background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: rgba(255,255,255,0.92); font-size: 10px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; pointer-events: auto; } .status-chip::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .status-chip.has-docs { background: rgba(154, 123, 66, 0.80); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; } /* ── Info zone ── */ .card-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 0; overflow: hidden; } .donor-id { font-size: 9.5px; font-weight: 500; letter-spacing: 0.10em; color: var(--brand); text-transform: uppercase; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .donor-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 2px; } .donor-meta { font-size: 11.5px; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 8px; } /* Tag row */ .tag-row { display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden; } .tag-row span { display: inline-flex; align-items: center; padding: 3px 8px; background: var(--tag-bg); color: var(--tag-text); border-radius: var(--r-xs); font-size: 11px; font-weight: 400; line-height: 1; white-space: nowrap; flex-shrink: 0; } /* Card action area */ .card-action { display: none; } /* ---------- 11. Buttons ---------- */ .primary-btn { display: block; width: 100%; padding: 11px 18px; font-size: 13px; font-weight: 500; font-family: inherit; color: #fff; background: var(--brand); border: 1.5px solid var(--brand); border-radius: var(--r-sm); cursor: pointer; letter-spacing: 0.04em; transition: background 0.18s, border-color 0.18s; text-align: center; } .primary-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .secondary-btn { display: inline-flex; align-items: center; padding: 9px 18px; font-size: 13px; font-weight: 400; font-family: inherit; color: var(--text-2); background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; letter-spacing: 0.02em; transition: border-color 0.18s, background 0.18s, color 0.18s; } .secondary-btn:hover { border-color: var(--line-strong); background: var(--bg-alt); color: var(--text); } /* ---------- 12. Article Spotlight ---------- */ .article-spotlight { display: flex; flex-direction: column; gap: 20px; } .article-spotlight-grid, .article-library { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .article-mini-card, .article-card, .article-detail { padding: 20px; border-radius: var(--r); background: var(--panel-tint); border: 1px solid var(--line-soft); transition: border-color 0.18s; } .article-mini-card:hover { border-color: var(--line); } .article-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-xs); background: var(--gold-pale); color: var(--gold); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .article-mini-card h4, .article-card h4, .article-detail-head h3 { margin-top: 12px; font-size: 14px; } .article-mini-card p, .article-card p, .article-detail p, .article-detail li { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; } /* ---------- 13. Article Page Styles ---------- */ .article-layout { padding: 28px var(--page-x) 40px; display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr); gap: 24px; align-items: start; } .article-library-card, .article-list-card { display: flex; flex-direction: column; gap: 14px; } .article-detail-list { display: flex; flex-direction: column; gap: 14px; } .article-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted-light); font-size: 12px; } .article-link { display: inline-flex; width: fit-content; margin-top: 14px; } .article-disclaimer { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); font-size: 13px; line-height: 1.65; border-left: 2px solid var(--accent); } .article-section { margin-top: 20px; } .article-section h4 { margin-bottom: 8px; font-size: 16px; } .article-section ul { margin: 10px 0 0; padding-left: 18px; } .source-list a { color: var(--brand-mid); text-decoration: underline; text-underline-offset: 2px; } /* ---------- 14. Footer ---------- */ .site-footer { background: var(--panel); border-top: 1px solid var(--line); padding: 28px var(--page-x); } .footer-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .footer-brand { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; white-space: nowrap; flex-shrink: 0; } .footer-note { font-size: 12px; color: var(--muted-light); line-height: 1.6; } /* ---------- 15. Admin & Login (preserve existing) ---------- */ .admin-header, .admin-layout { padding: 22px var(--page-x) 40px; } .admin-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--panel); border-bottom: 1px solid var(--line); padding-top: 18px; padding-bottom: 18px; } .admin-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .auth-badge { padding: 7px 14px; border-radius: var(--r-sm); background: var(--bg-alt); border: 1px solid var(--line); font-size: 12px; color: var(--muted); } .admin-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; align-items: stretch; } .admin-form, .filter-grid.admin-form { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .intake-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .intake-item { padding: 16px; border-radius: var(--r-sm); background: var(--panel-tint); border: 1px solid var(--line-soft); } .intake-item strong { display: block; margin-bottom: 8px; font-size: 13px; } .intake-item p { color: var(--muted); font-size: 13px; line-height: 1.6; } .smart-tools { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--panel-tint); border: 1px solid var(--line-soft); } .smart-tools p { margin-top: 10px; font-size: 13px; color: var(--muted); } .upload-panel { margin-top: 8px; padding: 16px; border-radius: var(--r-sm); background: var(--panel-tint); border: 1px solid var(--line-soft); } .file-preview { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .file-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line-soft); } .file-chip span { font-size: 12px; color: var(--muted); } .dashboard-card { overflow: hidden; } .dashboard-stats { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stat-card { padding: 16px; border-radius: var(--r-sm); background: var(--panel-tint); border: 1px solid var(--line-soft); } .stat-card strong { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1; color: var(--brand); } .stat-card span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; } .stat-card-analytics { background: rgba(255, 251, 244, 0.72); } .analytics-card { overflow: hidden; } .analytics-monitor { margin-top: 18px; } .analytics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .analytics-metric { padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: #fffdf8; } .analytics-metric strong { display: block; color: var(--brand); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1; } .analytics-metric span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; } .analytics-columns { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .analytics-panel { min-height: 174px; padding: 16px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--panel-tint); } .analytics-panel h3 { margin: 0 0 12px; font-size: 14px; color: var(--ink); } .analytics-rank, .analytics-visitors { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .analytics-rank li, .analytics-visitors li { display: grid; gap: 3px; color: var(--ink); font-size: 13px; } .analytics-rank li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } .analytics-rank span, .analytics-visitors span, .analytics-visitors small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .analytics-rank strong { color: var(--brand); } .analytics-visitors small, .empty-row { color: var(--muted); } .trend-bars { height: 112px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 8px; } .trend-bar { min-width: 0; display: grid; gap: 6px; justify-items: center; color: var(--muted); font-size: 11px; } .trend-bar span { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(154, 112, 64, 0.88), rgba(55, 72, 70, 0.82)); } .form-actions { display: flex; gap: 10px; } .admin-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } #donor-list-card { display: flex; flex-direction: column; } #donor-list-card .admin-list { flex: 1 1 auto; } .admin-item { padding: 14px 16px; border-radius: var(--r-sm); background: var(--panel-tint); border: 1px solid var(--line-soft); } .admin-item p + p { margin-top: 6px; } .admin-item select, .admin-item textarea, .admin-item input { margin-top: 10px; } .permission-row { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .permission-row input[type="checkbox"] { width: 16px; height: 16px; } .list-pagination { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pagination-btn { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text-2); font-size: 13px; font-family: inherit; cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s; } .pagination-btn:hover { border-color: var(--line-strong); background: var(--bg-alt); color: var(--text); } .pagination-btn.is-active { border-color: var(--brand); background: var(--brand); color: #fff; } .pagination-ellipsis { color: var(--muted-light); font-size: 13px; padding: 0 2px; } .login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg-alt); } .login-card { width: min(100%, 480px); } .login-tips { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--panel-tint); border: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; line-height: 1.7; } .full-width { grid-column: 1 / -1; } .full { grid-column: 1 / -1; } label { display: flex; flex-direction: column; gap: 6px; } label span { font-size: 12px; font-weight: 500; color: var(--muted); } /* ---------- 16. Utilities ---------- */ .hidden { display: none !important; } .empty-state { color: var(--muted); font-size: 14px; padding: 24px; text-align: center; } .muted { color: var(--muted); } /* ---------- 17. Animations ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .donor-card { animation: fadeUp 0.36s ease both; } .donor-card:nth-child(1) { animation-delay: 0.04s; } .donor-card:nth-child(2) { animation-delay: 0.08s; } .donor-card:nth-child(3) { animation-delay: 0.12s; } .donor-card:nth-child(4) { animation-delay: 0.16s; } .donor-card:nth-child(5) { animation-delay: 0.20s; } .donor-card:nth-child(6) { animation-delay: 0.24s; } .donor-card:nth-child(n+7) { animation-delay: 0.28s; } /* ---------- 18. Responsive ---------- */ @media (max-width: 1024px) { .hero-stats { flex-wrap: wrap; } } @media (max-width: 900px) { .layout, .admin-layout, .hero-grid, .article-layout { grid-template-columns: 1fr; } .hero-grid { gap: 32px; padding: 36px 0 44px; } .hero-stats { width: 100%; } .hero-stat { flex: 1; min-width: 90px; } .admin-form, .filter-grid.admin-form, .intake-grid { grid-template-columns: 1fr; } .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .analytics-grid, .analytics-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .br-desktop { display: inline; } .topbar { padding-top: 18px; flex-wrap: wrap; justify-content: space-between; } .topbar-center-logo { position: static; order: 3; transform: none; width: 100%; margin-top: 8px; } .fs-center-logo { height: 32px; max-width: min(180px, 46vw); } } /* ---------- 19. 供者卡片 — 照片 & 资料完整徽标 ---------- */ /* 有照片时的容器 */ .portrait-placeholder.has-photo { background: #111; } /* 所有照片统一：绝对定位铺满，object-fit: cover */ .portrait-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: brightness(0.93) saturate(0.88); transition: filter 0.3s ease, transform 0.3s ease; z-index: 1; } .donor-card:hover .portrait-photo { filter: brightness(0.98) saturate(0.94); transform: scale(1.03); } /* 所有 photo 变体都保持 cover，仅调整 object-position */ .donor-card-photo { object-position: center 15%; } .donor-card-photo-xlsx { object-position: center 10%; } .donor-card-photo-portrait { object-position: center 12%; } .donor-card-photo-contained, .donor-card-photo-xlsx-contained { object-fit: cover; object-position: center top; } /* 「资料完整」chip — 替换默认 status-chip 颜色 */ .status-chip.has-docs { background: rgba(154, 123, 66, 0.10); color: var(--gold); display: inline-flex; align-items: center; gap: 5px; } /* ---------- 20. 档案完整度角标（备用方案：叠加在照片右上角）---------- */ .portrait-placeholder .portrait-badge { position: absolute; top: 8px; right: 8px; padding: 3px 8px; background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(4px); border: 0.5px solid rgba(154, 123, 66, 0.30); border-radius: 4px; font-size: 10px; font-weight: 500; color: var(--gold); letter-spacing: 0.06em; pointer-events: none; } /* ---------- 21. Detail Gallery ---------- */ .detail-cover { position: relative; height: clamp(340px, 44vw, 520px); overflow: hidden; border-radius: var(--r-lg); background: var(--bg-alt); border: 1px solid var(--line-soft); } .detail-cover .portrait-photo { width: 100%; height: 100%; min-height: 0; object-position: center 12%; } .profile-sheet { min-height: 340px; padding: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 243, 238, 0.98)), linear-gradient(135deg, rgba(30, 62, 92, 0.04), rgba(154, 123, 66, 0.05)); } .profile-sheet-head h3 { margin-top: 6px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1.08; color: var(--text); } .profile-sheet-kicker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .profile-sheet-note { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.7; } .profile-sheet-primary { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .profile-sheet-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .profile-sheet-block, .profile-sheet-row { padding: 14px 16px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line-soft); } .profile-sheet-block span, .profile-sheet-row span { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light); } .profile-sheet-block strong { display: block; margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--text); } .profile-sheet-row p { margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.7; } .detail-summary { display: grid; gap: 12px; } .detail-summary p { color: var(--text-2); line-height: 1.8; } .detail-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; } .gallery-item { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel-tint); box-shadow: var(--shadow-xs); } .gallery-item img { display: block; width: 100%; max-height: 760px; height: auto; object-fit: contain; background: #111217; } .gallery-item video { display: block; width: 100%; height: auto; background: #000; } .gallery-item figcaption { padding: 10px 12px 12px; font-size: 13px; color: var(--text-2); } @media (max-width: 600px) { :root { --page-x: 16px; } .topbar { padding: 16px 0; } .brand-text .eyebrow { display: none; } .hero-grid { padding: 28px 0 36px; } .hero-stats { flex-direction: column; } .hero-stat { border-right: none; border-bottom: 1px solid var(--line); padding: 14px 20px; } .hero-stat:last-child { border-bottom: none; } .catalog-grid { grid-template-columns: 1fr; } .article-spotlight-grid { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; } .results-head { flex-direction: column; align-items: flex-start; } .profile-sheet { padding: 20px; } .profile-sheet-primary, .profile-sheet-grid { grid-template-columns: 1fr; } .detail-cover { height: min(420px, 72vh); } .detail-gallery { grid-template-columns: 1fr; } .gallery-item img { max-height: 72vh; } .analytics-grid, .analytics-columns { grid-template-columns: 1fr; } }