*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --brand: #059669; --brand-dark: #047857; --brand-light: #10b981; --brand-subtle: #ecfdf5; --text-primary: #1a1a2e; --text-secondary: #4b5563; --text-muted: #9ca3af; --surface: #ffffff; --surface-alt: #f9fafb; --border: #e5e7eb; --radius: 10px; --transition: 200ms ease; /* Status colors */ --color-success: #16a34a; --color-success-bg: #dcfce7; --color-success-text: #166534; --color-error: #dc2626; --color-error-bg: #fef2f2; --color-error-border: #fecaca; --color-warning-bg: #fef3c7; --color-warning-text: #92400e; --color-info-bg: #e0e7ff; --color-info-text: #3730a3; --color-special-bg: #f3e8ff; --color-special-text: #6b21a8; --color-due-soon: #ea580c; /* Region group */ --region-bg: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%); --region-border: #e5e7eb; --region-shadow: rgba(0, 0, 0, 0.05); --region-header-border: #d1d5db; --region-hover-bg: linear-gradient(to right, #ecfdf5 0%, transparent 100%); /* Library option */ --lib-border: #d1d5db; --lib-checked-bg: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); --lib-checked-text: #047857; --lib-hover-bg: #f0fdf4; --lib-hover-shadow: rgba(5, 150, 105, 0.15); --lib-checked-shadow: rgba(5, 150, 105, 0.2); --lib-checkbox-border: #9ca3af; --lib-checkbox-hover-bg: #f0fdf4; --lib-region-hover-ring: #d1fae5; --lib-region-indeterminate-bg: #d1fae5; /* Scrollbar */ --scrollbar-thumb: #ccc; /* Sticky shadow */ --sticky-shadow: rgba(0, 0, 0, 0.06); /* Misc */ --disclaimer-color: #999; --legend-color: #111827; --checkbox-check: #ffffff; --cta-hover-shadow: rgba(0, 0, 0, 0.12); } /* Dark mode overrides — activated by .dark class on */ html.dark { --brand: #10b981; --brand-dark: #059669; --brand-light: #34d399; --brand-subtle: #064e3b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; --surface: #0f172a; --surface-alt: #1e293b; --border: #334155; --color-success: #22c55e; --color-success-bg: #052e16; --color-success-text: #86efac; --color-error: #f87171; --color-error-bg: #450a0a; --color-error-border: #7f1d1d; --color-warning-bg: #451a03; --color-warning-text: #fde68a; --color-info-bg: #1e1b4b; --color-info-text: #a5b4fc; --color-special-bg: #3b0764; --color-special-text: #d8b4fe; --color-due-soon: #fb923c; --region-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --region-border: #334155; --region-shadow: rgba(0, 0, 0, 0.3); --region-header-border: #475569; --region-hover-bg: linear-gradient(to right, #064e3b 0%, transparent 100%); --lib-border: #475569; --lib-checked-bg: linear-gradient(135deg, #064e3b 0%, #052e16 100%); --lib-checked-text: #6ee7b7; --lib-hover-bg: #1a3a2a; --lib-hover-shadow: rgba(16, 185, 129, 0.2); --lib-checked-shadow: rgba(16, 185, 129, 0.3); --lib-checkbox-border: #64748b; --lib-checkbox-hover-bg: #1a3a2a; --lib-region-hover-ring: #064e3b; --lib-region-indeterminate-bg: #064e3b; --scrollbar-thumb: #475569; --sticky-shadow: rgba(0, 0, 0, 0.3); --disclaimer-color: #64748b; --legend-color: #e2e8f0; --checkbox-check: #ffffff; --lib-card-hover-shadow: rgba(16, 185, 129, 0.15); --cta-hover-shadow: rgba(0, 0, 0, 0.4); } html { overflow-x: hidden; } body { font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; color: var(--text-primary); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } body>main { flex: 1; } /* Skip link (sr-only, visible only on :focus) */ .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 16px; left: 16px; width: auto; height: auto; padding: 8px 16px; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; background: var(--brand); color: #fff; border-radius: var(--radius); z-index: 100; font-size: 0.9rem; text-decoration: none; } h1, h2, h3 { font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .container { max-width: 960px; margin: 0 auto; padding: 0 24px; } h2 { font-size: 1.5rem; font-weight: 600; text-align: center; margin-bottom: 40px; color: var(--text-primary); letter-spacing: -0.01em; } /* Hero */ .hero { background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 60%, var(--brand-light) 100%); color: #fff; padding: 80px 24px 88px; text-align: center; } .hero h1 { font-size: 2.75rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.03em; display: flex; align-items: center; justify-content: center; gap: 10px; } .hero-logo-icon { flex-shrink: 0; height: 0.75em; width: auto; } .hero-subtitle { font-size: 1.15rem; opacity: 0.95; margin-bottom: 8px; font-weight: 400; } .hero-desc { font-size: 0.95rem; color: rgba(255, 255, 255, 0.88); margin-bottom: 36px; } .cta-btn { display: inline-block; background: #fff; color: var(--brand-dark); padding: 14px 40px; border-radius: var(--radius); text-decoration: none; font-family: "Outfit", sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition); } .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--cta-hover-shadow); } .cta-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; } html.dark .cta-btn { background: #fff; color: var(--brand-dark); } html.dark .cta-btn:focus-visible { outline-color: var(--brand-light); } /* Features */ .features { padding: 80px 24px; background: var(--surface-alt); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .feature-card { text-align: center; padding: 32px 20px; border-radius: var(--radius); transition: background var(--transition); } .feature-card:hover { background: var(--surface); } .feature-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--brand); background: var(--brand-subtle); border-radius: 12px; } .feature-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); } .feature-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; } /* Libraries — map section */ .libraries { padding: 80px 24px; } .map-subtitle { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 32px; } /* Steps */ .steps { padding: 80px 24px; background: var(--surface-alt); } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .step-card { text-align: center; padding: 32px 20px; } .step-number { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--brand); color: #fff; margin: 0 auto 18px; } .step-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); } .step-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; } .step-card a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition); } .step-card a:hover { color: var(--brand-dark); } html.dark .step-card a { color: var(--brand-light); } html.dark .step-card a:hover { color: var(--brand); } /* Footer */ .footer { padding: 40px 24px; border-top: 1px solid var(--border); text-align: center; } .footer-links { display: flex; justify-content: center; align-items: center; gap: 24px; margin-bottom: 16px; } .footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color var(--transition); cursor: pointer; } .footer-links a:hover { color: var(--brand); } .footer-links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; } .footer-copy { font-size: 0.8rem; color: var(--text-muted); } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ===== Lookup Page ===== */ /* Navbar */ .lookup-nav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 24px; position: sticky; top: 0; z-index: 50; } .lookup-nav-inner { display: flex; align-items: center; justify-content: space-between; } .lookup-logo { font-family: "Outfit", sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--brand); text-decoration: none; letter-spacing: -0.02em; } .lookup-logo:hover { color: var(--brand-dark); } .lookup-logo-icon { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } /* Secondary CTA — visually subordinate to the primary "查詢" submit button so first-time visitors don't get confused about which action to take. */ .cta-btn-sm { padding: 8px 16px; font-size: 0.85rem; background: transparent; color: var(--brand-dark); border: 1.5px solid var(--brand); box-shadow: none; } .cta-btn-sm:hover { background: var(--brand-subtle); box-shadow: none; color: var(--brand-dark); } html.dark .cta-btn-sm { background: transparent; color: var(--brand-light); border-color: var(--brand); } html.dark .cta-btn-sm:hover { background: rgba(16, 185, 129, 0.12); color: var(--brand-light); } html.dark .cta-btn-sm:focus-visible { outline-color: var(--brand-light); } /* Lookup hero */ .lookup-hero { background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 60%, var(--brand-light) 100%); color: #fff; padding: 48px 24px; text-align: center; } .lookup-hero h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; } .lookup-hero-desc { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); } /* Lookup form */ .lookup-form-section { padding: 40px 24px 24px; } .lookup-form { max-width: 640px; margin: 0 auto; } .lookup-info-banner { max-width: 640px; margin: 0 auto 24px; padding: 16px 20px; background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 12px; display: flex; gap: 12px; align-items: flex-start; } .lookup-info-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); margin-top: 2px; } .lookup-info-content { flex: 1; } .lookup-info-content p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); } .lookup-info-content p + p { margin-top: 4px; } .lookup-info-content a { color: var(--accent); text-decoration: underline; font-weight: 500; } .lookup-info-content a:hover { color: var(--accent-hover); } .lookup-input-row { display: flex; gap: 12px; } /* Sticky wrapper for ISBN input + query button */ .lookup-input-sticky-wrapper { position: sticky; top: var(--nav-height, 61px); /* Set dynamically by JS; fallback accounts for nav with toggle + CTA */ z-index: 40; /* Below nav (50) but above content */ background: var(--surface); /* Solid background to prevent overlap */ padding: 16px 0; /* Vertical breathing room */ margin: 0 -24px; /* Break out of container horizontal padding */ padding-left: 24px; /* Re-add horizontal padding */ padding-right: 24px; border-bottom: 1px solid transparent; /* Prepare for optional shadow */ transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Optional: Subtle shadow when scrolled (requires JS to add .is-stuck class) */ .lookup-input-sticky-wrapper.is-stuck { border-bottom-color: var(--border); box-shadow: 0 2px 8px var(--sticky-shadow); } .lookup-input-row input { flex: 1; padding: 12px 16px; font-size: 1rem; font-family: inherit; border: 2px solid var(--border); border-radius: var(--radius); outline: none; transition: border-color var(--transition); color: var(--text-primary); background: var(--surface); } .lookup-input-row input:focus { border-color: var(--brand); } .lookup-input-row input::placeholder { color: var(--text-muted); } .lookup-input-row button { padding: 12px 28px; font-size: 1rem; font-family: "Outfit", sans-serif; font-weight: 600; background: var(--brand); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); white-space: nowrap; } .lookup-input-row button:hover:not(:disabled) { background: var(--brand-dark); } .lookup-input-row button:disabled { opacity: 0.6; cursor: not-allowed; } .lookup-input-row button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .lookup-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; } .lookup-error { font-size: 0.85rem; color: var(--color-error); margin-top: 8px; } /* Library checkboxes */ .lookup-libraries { border: none; margin-top: 24px; } .lookup-libraries legend { font-family: "Outfit", sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--legend-color); margin-bottom: 16px; letter-spacing: 0.01em; } .lookup-library-grid { display: flex; flex-direction: column; gap: 28px; } .lookup-region-group { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--region-bg); border-radius: 12px; border: 1px solid var(--region-border); box-shadow: 0 1px 3px var(--region-shadow); } .lookup-region-header { position: relative; display: flex; align-items: center; gap: 12px; background: none; border: none; border-bottom: 2px solid var(--region-header-border); padding: 10px 8px; cursor: pointer; font-family: "Outfit", sans-serif; font-size: 1rem; font-weight: 700; color: var(--brand); letter-spacing: 0.02em; transition: all 0.2s ease; user-select: none; } .lookup-region-header:hover { background: var(--region-hover-bg); color: var(--brand-dark); border-bottom-color: var(--brand); } /* Hide native region checkbox */ .lookup-region-checkbox { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Custom region checkbox */ .lookup-region-header::before { content: ""; position: relative; flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--brand); border-radius: 5px; background: var(--surface); transition: all 0.2s ease; } .lookup-region-header:hover::before { background: var(--lib-hover-bg); box-shadow: 0 0 0 2px var(--lib-region-hover-ring); } .lookup-region-header:has(input:checked)::before { background: var(--brand) url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2.5-2.5a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") center / 14px no-repeat; } .lookup-region-header:has(input:indeterminate)::before { background: var(--lib-region-indeterminate-bg) url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='7' width='10' height='2' rx='1' fill='%232e7d32'/%3e%3c/svg%3e") center / 12px no-repeat; border-color: var(--brand); } .lookup-region-header:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .lookup-region-libraries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; } .lookup-library-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid var(--lib-border); border-radius: 10px; cursor: pointer; font-size: 0.9rem; color: var(--text-secondary); background: var(--surface); transition: all 0.2s ease; user-select: none; } .lookup-library-option:hover { border-color: var(--brand); background: var(--lib-hover-bg); transform: translateY(-2px); box-shadow: 0 4px 12px var(--lib-hover-shadow); } .lookup-library-option:has(input:checked) { border-color: var(--brand); background: var(--lib-checked-bg); color: var(--lib-checked-text); font-weight: 600; box-shadow: 0 2px 8px var(--lib-checked-shadow); } /* Hide native checkbox */ .lookup-library-option input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Custom checkbox */ .lookup-library-option::before { content: ""; position: relative; flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--lib-checkbox-border); border-radius: 5px; background: var(--surface); transition: all 0.2s ease; } .lookup-library-option:hover::before { border-color: var(--brand); background: var(--lib-checkbox-hover-bg); } .lookup-library-option:has(input:checked)::before { border-color: var(--brand); background: var(--brand); } /* Checkmark */ .lookup-library-option:has(input:checked)::after { content: ""; position: absolute; left: 23px; top: 18px; width: 5px; height: 10px; border: solid var(--checkbox-check); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .lookup-library-note { margin-left: 4px; font-size: 0.75rem; color: var(--text-muted); font-weight: 400; } /* Results section */ .lookup-results { padding: 24px 24px 48px; } .lookup-results .container { max-width: 640px; } /* Book info */ .lookup-book-info { padding: 20px 24px; background: var(--brand-subtle); border-radius: var(--radius); margin-bottom: 24px; border-left: 4px solid var(--brand); } .book-title { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; text-align: left; } .book-details { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; } /* Library result cards */ .library-result-card { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; overflow-x: auto; } .library-result-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--surface-alt); border-bottom: 1px solid var(--border); gap: 12px; } .library-result-header h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; } .library-result-summary { font-size: 0.8rem; color: var(--text-secondary); text-align: right; } .avail-count { font-weight: 600; } .avail-green { color: var(--color-success); } .avail-red { color: var(--color-error); } .library-result-status { font-size: 0.8rem; padding: 2px 10px; border-radius: 4px; white-space: nowrap; } .library-result-status.status-not-found { color: var(--text-muted); background: var(--surface); } .library-result-status.status-error { color: var(--color-error); background: var(--color-error-bg); } .deep-link { font-size: 0.75rem; color: var(--brand); text-decoration: none; margin-left: 8px; } .deep-link:hover { text-decoration: underline; } /* Holdings table */ .holdings-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .holdings-table th { text-align: left; padding: 8px 10px; font-weight: 500; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); } .holdings-table td { padding: 8px 10px; color: var(--text-secondary); border-bottom: 1px solid var(--border); } /* Column width hints — prevent status/due-date squeeze */ .holdings-table th:nth-child(1), .holdings-table td:nth-child(1) { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .holdings-table th:nth-child(4), .holdings-table td:nth-child(4) { min-width: 90px; white-space: nowrap; } .holdings-table th:nth-child(5), .holdings-table td:nth-child(5) { min-width: 85px; white-space: nowrap; } .holdings-table tr:last-child td { border-bottom: none; } .holdings-empty { padding: 16px 20px; font-size: 0.85rem; color: var(--text-muted); } /* Scrollable holdings wrapper */ .holdings-scroll-wrapper.scrollable { max-height: 300px; overflow-y: auto; } .holdings-scroll-wrapper.scrollable::-webkit-scrollbar { width: 4px; } .holdings-scroll-wrapper.scrollable::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; } .holdings-scroll-wrapper.scrollable .holdings-table thead { position: sticky; top: 0; background: var(--surface); z-index: 1; } /* Holdings collapsible toggle */ .holdings-toggle { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); padding: 10px 20px; cursor: pointer; font-size: 0.8rem; font-family: inherit; color: var(--text-secondary); transition: background var(--transition), color var(--transition); } .holdings-toggle:hover { background: var(--surface-alt); color: var(--text-primary); } .holdings-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .holdings-toggle-arrow { display: inline-block; font-size: 0.65rem; transition: transform 0.2s ease; } .holdings-toggle-arrow.expanded { transform: rotate(90deg); } .holdings-collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .holdings-collapsible.expanded { max-height: 500px; overflow-y: auto; } .holdings-collapsible.expanded::-webkit-scrollbar { width: 4px; } .holdings-collapsible.expanded::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; } .due-date-cell { white-space: nowrap; } .due-date-cell .due-soon { color: var(--color-due-soon); font-weight: 500; } /* Status badges */ .status-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 500; white-space: nowrap; } .status-available { background: var(--color-success-bg); color: var(--color-success-text); } .status-checked-out { background: var(--color-warning-bg); color: var(--color-warning-text); } .status-processing { background: var(--color-info-bg); color: var(--color-info-text); } .status-restricted { background: var(--color-special-bg); color: var(--color-special-text); } .status-other { background: var(--surface-alt); color: var(--text-secondary); } .due-date { font-size: 0.75rem; color: var(--text-muted); margin-left: 4px; } .holding-note { font-size: 0.75rem; color: var(--text-muted); font-style: italic; margin-left: 4px; } /* Skeleton loading */ .library-result-card.skeleton .skeleton-text { color: var(--text-muted); } .skeleton-rows { padding: 12px 20px; } .skeleton-row { height: 14px; background: var(--surface-alt); border-radius: 4px; margin-bottom: 10px; animation: skeleton-pulse 1.5s ease-in-out infinite; } .skeleton-row:nth-child(1) { width: 80%; } .skeleton-row:nth-child(2) { width: 65%; } .skeleton-row:nth-child(3) { width: 50%; } @keyframes skeleton-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* Error block */ .lookup-error-block { text-align: center; padding: 32px 24px; background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius); } .lookup-error-block p { color: var(--color-error); font-size: 0.9rem; margin-bottom: 16px; } .retry-btn { padding: 8px 24px; font-size: 0.9rem; font-family: "Outfit", sans-serif; font-weight: 500; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition); } .retry-btn:hover { border-color: var(--brand); } /* Soft CTA */ .lookup-soft-cta { text-align: center; padding: 32px 24px; margin-top: 24px; background: var(--surface-alt); border-radius: var(--radius); } .lookup-soft-cta p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 16px; } .lookup-soft-cta .cta-btn { background: var(--brand); color: #fff; padding: 10px 28px; font-size: 0.9rem; } .lookup-soft-cta .cta-btn:hover { background: var(--brand-dark); } /* Dark mode: soft CTA button matches the search button (green bg, white text) */ html.dark .lookup-soft-cta .cta-btn { background: var(--brand); color: #fff; } html.dark .lookup-soft-cta .cta-btn:hover { background: var(--brand-dark); } /* Landing page teaser */ .hero-teaser { margin-top: 16px; font-size: 0.85rem; } .hero-teaser a { color: rgba(255, 255, 255, 0.85); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); transition: color var(--transition), border-color var(--transition); } .hero-teaser a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.8); } .hero-teaser a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; border-radius: 2px; } .deep-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; } .retry-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .cta-btn, .feature-card, .footer-links a, .lookup-input-row input, .lookup-input-row button, .lookup-library-option, .lookup-region-header, .retry-btn { transition: none; } .cta-btn:hover, .lookup-library-option:hover { transform: none; } .skeleton-row { animation: none; opacity: 0.6; } .holdings-toggle-arrow, .holdings-collapsible { transition: none; } } /* Responsive */ @media (max-width: 768px) { .hero { padding: 56px 24px 64px; } .hero h1 { font-size: 2rem; } .hero-subtitle { font-size: 1.05rem; } .features, .libraries, .steps { padding: 56px 24px; } .features-grid, .steps-grid { grid-template-columns: 1fr; } h2 { font-size: 1.3rem; margin-bottom: 28px; } /* Lookup page mobile */ .lookup-hero { padding: 32px 24px; } .lookup-hero h1 { font-size: 1.4rem; } .lookup-input-row { flex-direction: column; } /* Sticky wrapper on mobile */ .lookup-input-sticky-wrapper { top: var(--nav-height, 61px); margin: 0 -24px; padding-left: 24px; padding-right: 24px; } .lookup-region-libraries { grid-template-columns: 1fr 1fr; } .library-result-header { flex-direction: column; align-items: flex-start; gap: 6px; } .library-result-summary { text-align: left; } .holdings-table th, .holdings-table td { padding: 6px 8px; font-size: 0.8rem; } /* Hide collection type and call number on mobile to fit 3 key columns */ .holdings-table th:nth-child(2), .holdings-table td:nth-child(2), .holdings-table th:nth-child(3), .holdings-table td:nth-child(3) { display: none; } } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: color var(--transition), border-color var(--transition), background var(--transition); width: 36px; height: 36px; } .theme-toggle:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-alt); } .theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; } /* Hide the moon icon by default (light mode shows sun) */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: block; } html.dark .theme-toggle .icon-sun { display: none; } .lookup-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; } .footer-disclaimer { font-size: 0.75em; color: var(--disclaimer-color); margin-top: 4px; } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--brand); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 40; } .back-to-top:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } .back-to-top:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; } .back-to-top svg { width: 1.5rem; height: 1.5rem; } @media (max-width: 768px) { .back-to-top { bottom: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; } .back-to-top svg { width: 1.25rem; height: 1.25rem; } } /* ============================================================ * Progress bar (Worker fan-out) * ============================================================ */ .progress { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 10px 14px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; color: var(--text-secondary); } .progress[data-state="done"] { opacity: 0.7; transition: opacity 0.4s ease; } .progress-bar { flex: 1; height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: var(--brand); border-radius: 3px; transition: width 0.3s ease; } .progress-label { font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; color: var(--text-muted); } /* ============================================================ * Scan button (inside the ISBN input row) * ============================================================ */ .scan-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); cursor: pointer; color: var(--text-primary); font-size: 1.1rem; flex-shrink: 0; transition: background 0.15s ease, border-color 0.15s ease; } .scan-button:hover { background: var(--surface-alt); border-color: var(--brand); } .scan-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .scan-icon { line-height: 1; } /* ============================================================ * Scanner overlay (camera preview) * ============================================================ */ .scanner-overlay { position: fixed; inset: 0; background: #000; z-index: 10000; display: flex; align-items: center; justify-content: center; } .scanner-overlay[hidden] { display: none !important; } .scanner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scanner-viewfinder { position: relative; width: min(80vw, 360px); aspect-ratio: 16 / 9; pointer-events: none; } .scanner-frame { position: absolute; inset: 0; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); } .scanner-hint { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0, 0, 0, 0.55); padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; } .scanner-close { position: absolute; top: env(safe-area-inset-top, 16px); right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .scanner-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ========================================================================= * UX improvements — Tier 0/1/2 (PR: feat/lookup-ux-tier-0-1-2) * * Status differentiation, filter/sort toolbar, responsive grid, cover image, * bulk-select toolbar, global focus rings, hover states, larger mobile text. * Everything below this comment is additive — does not override earlier rules. * ========================================================================= */ /* --- Global focus ring fallback so checkboxes / chips / tag-buttons all * show a visible focus indicator for keyboard users. Earlier rules * covered .cta-btn, .footer-links, .lookup-input-row button; this * catches everything else without overriding them. */ :where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* --- Book info card — cover image + text in flex row */ .lookup-book-info { display: flex; gap: 16px; align-items: flex-start; } .book-cover { width: 80px; height: auto; max-height: 120px; flex-shrink: 0; border-radius: 4px; background: var(--surface-alt); object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } html.dark .book-cover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .book-text { flex: 1; min-width: 0; } /* --- Results toolbar (filter chips + sort) */ .results-toolbar { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .results-toolbar-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); } .results-toolbar-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; } .results-filter { display: flex; flex-wrap: wrap; gap: 6px; } .results-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: 999px; font-size: 0.85rem; cursor: pointer; transition: background 150ms, color 150ms, border-color 150ms; min-height: 32px; } .results-filter-chip:hover { background: var(--surface-alt); color: var(--text-primary); } .results-filter-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .results-filter-chip.is-active .chip-count { background: rgba(255, 255, 255, 0.2); color: #fff; } .chip-count { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 10px; background: var(--surface-alt); color: var(--text-muted); font-size: 0.75rem; font-weight: 600; } .results-sort { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: 6px; font-size: 0.85rem; cursor: pointer; transition: background 150ms, color 150ms, border-color 150ms; min-height: 32px; } .results-sort:hover { background: var(--surface-alt); color: var(--text-primary); } .results-sort.is-active { background: var(--brand-subtle); color: var(--brand-dark); border-color: var(--brand); } html.dark .results-sort.is-active { background: rgba(16, 185, 129, 0.12); color: var(--brand-light); } /* --- Bulk-select toolbar inside lookup-libraries fieldset */ .lookup-libraries-toolbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 0.85rem; } .lookup-libraries-count { color: var(--text-secondary); } .lookup-libraries-bulk { display: inline-flex; align-items: center; gap: 4px; } .link-btn { background: none; border: none; padding: 4px 6px; color: var(--brand); font-size: 0.85rem; cursor: pointer; font-family: inherit; border-radius: 4px; min-height: 32px; } .link-btn:hover { text-decoration: underline; color: var(--brand-dark); } html.dark .link-btn:hover { color: var(--brand-light); } .bulk-sep { color: var(--text-muted); } /* --- Library result cards: grid layout + min-height + hover + status colors */ #library-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; } .library-result-card { margin-bottom: 0; /* override the 16px from the legacy rule — grid handles spacing now */ min-height: 88px; transition: border-color 200ms, box-shadow 200ms; } .library-result-card:hover { border-color: var(--brand-light); box-shadow: 0 4px 12px var(--lib-card-hover-shadow, rgba(5, 150, 105, 0.08)); } /* Friendly fallback (ilpl/ntpl) — distinct from "error" so users know it's not a failure, the data just isn't reachable from us. */ .library-result-status.status-fallback { color: var(--warn, #b45309); background: var(--warn-bg, #fef3c7); } html.dark .library-result-status.status-fallback { color: #fbbf24; background: rgba(180, 83, 9, 0.2); } .library-result-body { padding: 12px 20px 16px; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; } /* --- Mobile: ensure body text and hint stay ≥ 16px to prevent iOS auto-zoom * on input focus and to satisfy WCAG readable-font-size guidance. */ @media (max-width: 640px) { .lookup-hint { font-size: 14px; line-height: 1.5; } #isbn-input { font-size: 16px; } .book-cover { width: 64px; max-height: 96px; } .results-toolbar-controls { flex-direction: column; align-items: stretch; } .results-sort { align-self: flex-end; } }