/* ============================================================= DARK MODE — Midnight Slate Applied via .dark-mode on element ============================================================= */ /* Dark mode toggle button */ .darkmode-btn { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 50px; border: 1.5px solid #d1d5db; background: transparent; color: #64748b; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; white-space: nowrap; line-height: 1; } .darkmode-btn:hover { background: #f1f5f9; color: #6366f1; border-color: #6366f1; } .dm-icon { font-size: 15px; line-height: 1; } .dm-label { font-size: 14px; } /* ── BASE ── */ .dark-mode, .dark-mode body { color: #F0F2F5 !important; background-color: #1E2128 !important; } /* ── NAVBAR ── */ .dark-mode .navbar { background: #262B34 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important; } .dark-mode .logo, .dark-mode a.logo { color: #5BA4F5 !important; } .dark-mode .nav-link { color: #A8B0BC !important; } .dark-mode .nav-link:hover, .dark-mode .nav-link.active { color: #5BA4F5 !important; } .dark-mode .wildcard-badge { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; color: #fff !important; } .dark-mode .darkmode-btn { border-color: #3A4150 !important; color: #A8B0BC !important; background: transparent !important; } .dark-mode .darkmode-btn:hover { background: #2D3440 !important; color: #5BA4F5 !important; border-color: #5BA4F5 !important; } /* ── HERO ── */ .dark-mode .hero { background: #1E2128 !important; } .dark-mode .hero-title { color: #F0F2F5 !important; } .dark-mode .hero-subtitle { color: #A8B0BC !important; } /* ── SEARCH BAR (home) ── */ .dark-mode .search-container { background: #262B34 !important; border-color: #2D7DD2 !important; box-shadow: 0 4px 12px rgba(45,125,210,0.2) !important; } .dark-mode .search-input { background: transparent !important; color: #F0F2F5 !important; } .dark-mode .search-input::placeholder { color: #5A6270 !important; } .dark-mode .search-icon { color: #5A6270 !important; } .dark-mode .search-button { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; color: #fff !important; } /* ── AUTOCOMPLETE ── */ .dark-mode .autocomplete-dropdown { background: #262B34 !important; border-color: #3A4150 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important; } .dark-mode .autocomplete-item { color: #F0F2F5 !important; border-bottom-color: #3A4150 !important; } .dark-mode .autocomplete-item:hover { background-color: #2D3440 !important; } .dark-mode .autocomplete-item svg { color: #5A6270 !important; } /* ── FILTER CHIPS (home) ── */ .dark-mode .filters-label { color: #A8B0BC !important; } .dark-mode .filter-chip { background: rgba(45,125,210,0.12) !important; color: #5BA4F5 !important; border-color: rgba(45,125,210,0.3) !important; } .dark-mode .filter-chip:hover { background: rgba(45,125,210,0.22) !important; border-color: #2D7DD2 !important; } .dark-mode .wildcard-chip { background: rgba(45,125,210,0.15) !important; border-color: rgba(45,125,210,0.35) !important; } /* ── FEATURES SECTION (home) ── */ .dark-mode .features-section { background: #171A20 !important; } .dark-mode .features-section h2, .dark-mode .features-section-header h2 { color: #F0F2F5 !important; } .dark-mode .features-section p, .dark-mode .features-section-header p { color: #A8B0BC !important; } .dark-mode .feature-card { background: #262B34 !important; border-color: #3A4150 !important; } .dark-mode .feature-card:hover { border-color: #2D7DD2 !important; box-shadow: 0 10px 24px rgba(45,125,210,0.15) !important; } .dark-mode .feature-title { color: #F0F2F5 !important; } .dark-mode .feature-description { color: #A8B0BC !important; } /* ── MODAL ── */ .dark-mode .modal-overlay { background: rgba(0,0,0,0.72) !important; } .dark-mode .modal-content { background: #262B34 !important; box-shadow: 0 20px 50px rgba(0,0,0,0.55) !important; } .dark-mode .modal-header { border-bottom-color: #3A4150 !important; } .dark-mode .modal-header h3 { color: #F0F2F5 !important; } .dark-mode .modal-close { color: #5A6270 !important; } .dark-mode .modal-close:hover { color: #A8B0BC !important; } .dark-mode .filter-group label { color: #A8B0BC !important; } .dark-mode .filter-group input[type="text"], .dark-mode .filter-group input[type="number"] { background: #1E2128 !important; border-color: #3A4150 !important; color: #F0F2F5 !important; } .dark-mode .filter-group input:focus { border-color: #2D7DD2 !important; } .dark-mode .modal-footer { border-top-color: #3A4150 !important; } .dark-mode .btn-primary { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; color: #fff !important; } .dark-mode .btn-secondary { background: #2D3440 !important; color: #A8B0BC !important; } .dark-mode .btn-secondary:hover { background: #363D4A !important; } /* ── ABOUT PAGE ── */ .dark-mode .about-section { background: #1E2128 !important; } .dark-mode .about-title { color: #F0F2F5 !important; } .dark-mode .about-description { background: linear-gradient(135deg, #1E2535 0%, #1E1E2E 100%) !important; border-color: #2D3A5C !important; } .dark-mode .about-text-large { color: #D0D5DD !important; } .dark-mode .feature-detail-card { background: #262B34 !important; border-color: #3A4150 !important; } .dark-mode .feature-detail-card:hover { border-color: #2D7DD2 !important; box-shadow: 0 10px 24px rgba(0,0,0,0.2) !important; } .dark-mode .feature-detail-card h3 { color: #F0F2F5 !important; } .dark-mode .feature-detail-card p { color: #A8B0BC !important; } .dark-mode .tech-stack-section { background: #1A1E27 !important; border-color: #2D3A5C !important; } .dark-mode .section-title { color: #F0F2F5 !important; } .dark-mode .tech-list li { color: #A8B0BC !important; border-bottom-color: #2D3A5C !important; } .dark-mode .tech-list li:before { color: #5BA4F5 !important; } .dark-mode .project-info { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; } /* ── WILDCARD PAGE ── */ .dark-mode .wildcard-section { background: #1E2128 !important; } .dark-mode .wildcard-title { color: #F0F2F5 !important; } .dark-mode .wildcard-subtitle { color: #A8B0BC !important; } .dark-mode .guide-section { background: #1A1E27 !important; border-color: #2D3A5C !important; } .dark-mode .guide-section h2 { color: #F0F2F5 !important; } .dark-mode .guide-icon.boolean { background: #2D3440 !important; color: #A8B0BC !important; } .dark-mode .example-item { background: #262B34 !important; border-color: #3A4150 !important; } .dark-mode .example-description { color: #A8B0BC !important; } .dark-mode .tips-section { background: #1A1E27 !important; border-color: #2D3A5C !important; } .dark-mode .tips-section h3 { color: #F0F2F5 !important; } .dark-mode .tips-list li { color: #A8B0BC !important; } .dark-mode .tips-list code { background: #1A3A5C !important; color: #5BA4F5 !important; } /* ── SEARCH RESULTS PAGE ── */ .dark-mode .search-header { background: #262B34 !important; border-bottom-color: #3A4150 !important; } .dark-mode .search-header-container { background: #1E2128 !important; border-color: #3A4150 !important; } .dark-mode .search-header-input { color: #F0F2F5 !important; background: transparent !important; } .dark-mode .search-header-input::placeholder { color: #5A6270 !important; } .dark-mode .search-icon-small { color: #5A6270 !important; } .dark-mode .search-header-button { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; color: #fff !important; } /* ── FILTERS SIDEBAR ── */ .dark-mode .filters-sidebar { background: #262B34 !important; border-color: #3A4150 !important; } .dark-mode .filters-header { border-bottom-color: #3A4150 !important; } .dark-mode .filters-header h3 { color: #F0F2F5 !important; } .dark-mode .filters-header svg { color: #5BA4F5 !important; } .dark-mode .clear-filter-btn { background: #1E2128 !important; color: #5BA4F5 !important; border-color: #2D3A5C !important; } .dark-mode .clear-filter-btn:hover { background: #2D3440 !important; } .dark-mode .filter-section-header label { color: #F0F2F5 !important; } .dark-mode .filter-section-header svg { color: #5BA4F5 !important; } .dark-mode .filter-input { background: #1E2128 !important; border-color: #3A4150 !important; color: #F0F2F5 !important; } .dark-mode .filter-input:focus { border-color: #2D7DD2 !important; } .dark-mode .filter-input::placeholder { color: #5A6270 !important; } .dark-mode .year-separator { color: #5A6270 !important; } .dark-mode .toggle-label { background: #3A4150 !important; } .dark-mode .apply-filters-btn { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; color: #fff !important; } /* ── RESULTS MAIN ── */ .dark-mode .results-main { background: #262B34 !important; border-color: #3A4150 !important; } .dark-mode .results-count { color: #A8B0BC !important; } .dark-mode .results-count strong { color: #F0F2F5 !important; } .dark-mode .active-filter-tag { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; color: #fff !important; } .dark-mode .wildcard-active { background: rgba(45,125,210,0.15) !important; color: #5BA4F5 !important; border-color: #2D3A5C !important; } .dark-mode .result-item { border-color: #3A4150 !important; } .dark-mode .result-item:hover { border-color: #2D7DD2 !important; box-shadow: 0 3px 10px rgba(45,125,210,0.12) !important; } .dark-mode .result-title { color: #5BA4F5 !important; } .dark-mode .result-meta { color: #A8B0BC !important; } .dark-mode .result-abstract { color: #D0D5DD !important; } .dark-mode .result-tag { background: #1A3A5C !important; color: #5BA4F5 !important; border-color: #2D3A5C !important; } .dark-mode .open-access-badge { background: #0D6B3E !important; color: #6EE7B7 !important; } /* ── PAGINATION ── */ .dark-mode .pagination { border-top-color: #3A4150 !important; } .dark-mode .pagination-btn { background: #262B34 !important; border-color: #3A4150 !important; color: #A8B0BC !important; } .dark-mode .pagination-btn:hover:not(:disabled) { border-color: #2D7DD2 !important; color: #5BA4F5 !important; } .dark-mode .pagination-btn.active { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; color: #fff !important; border-color: transparent !important; } .dark-mode .pagination-ellipsis { color: #5A6270 !important; } /* ── PAPER DETAIL PAGE ── */ .dark-mode .paper-detail-section { background: #1E2128 !important; } .dark-mode .back-button { color: #5BA4F5 !important; } .dark-mode .paper-title { color: #F0F2F5 !important; } .dark-mode .paper-meta-info { color: #A8B0BC !important; border-bottom-color: #3A4150 !important; } .dark-mode .paper-authors { color: #D0D5DD !important; } .dark-mode .separator { color: #3A4150 !important; } .dark-mode .paper-section h2, .dark-mode .paper-section h3 { color: #F0F2F5 !important; } .dark-mode .paper-abstract { color: #D0D5DD !important; } .dark-mode .citation-box { background: #1A1E27 !important; border-color: #2D3A5C !important; } .dark-mode .citation-box code { color: #D0D5DD !important; } .dark-mode .copy-btn { background: linear-gradient(135deg, #2D7DD2 0%, #1A5FA8 100%) !important; color: #fff !important; } .dark-mode .topic-tag { background: rgba(45,125,210,0.12) !important; color: #5BA4F5 !important; border-color: #2D3A5C !important; } .dark-mode .citation-item { background: #1A1E27 !important; border-color: #2D3A5C !important; } .dark-mode .citation-item:hover { border-color: #2D7DD2 !important; background: #262B34 !important; } .dark-mode .citation-title { color: #5BA4F5 !important; } .dark-mode .citation-meta { color: #A8B0BC !important; } .dark-mode .features-section-title { color: #F0F2F5 !important; } .dark-mode .features-section-subtitle { color: #A8B0BC !important; } /* ── ADVANCED SEARCH MODAL (extra classes) ── */ .dark-mode .modal-header { background: linear-gradient(135deg, #1E2535 0%, #1E1E2E 100%) !important; } .dark-mode .search-criteria-label { color: #5BA4F5 !important; background: rgba(45,125,210,0.15) !important; border-color: rgba(45,125,210,0.3) !important; } .dark-mode .search-rows { color: #F0F2F5 !important; } .dark-mode .search-row { background: #1E2128 !important; border-color: #3A4150 !important; overflow: hidden !important; } .dark-mode .search-row:hover { border-color: #4A6A9C !important; } .dark-mode .search-row:focus-within { border-color: #2D7DD2 !important; box-shadow: 0 0 0 3px rgba(45,125,210,0.1) !important; } .dark-mode .bool-select { background: #262B34 !important; color: #5BA4F5 !important; border-color: #3A4150 !important; } .dark-mode .bool-select:focus { border-color: #2D7DD2 !important; } .dark-mode .field-select { background: #262B34 !important; color: #F0F2F5 !important; border-color: #3A4150 !important; } .dark-mode .field-select:focus { border-color: #2D7DD2 !important; } .dark-mode .condition-select { background: #262B34 !important; color: #F0F2F5 !important; border-color: #3A4150 !important; } .dark-mode .condition-select:focus { border-color: #2D7DD2 !important; } .dark-mode .search-row-input { background: #262B34 !important; color: #F0F2F5 !important; border-color: #3A4150 !important; } .dark-mode .search-row-input:focus { border-color: #2D7DD2 !important; } .dark-mode .search-row-input::placeholder { color: #5A6270 !important; } .dark-mode .remove-row-btn { color: #5A6270 !important; } .dark-mode .remove-row-btn:hover { color: #f87171 !important; background: rgba(248,113,113,0.1) !important; } .dark-mode .row-action-btn { background: transparent !important; border-color: #3A4150 !important; color: #A8B0BC !important; } .dark-mode .row-action-btn:hover { background: #1E2535 !important; border-color: #2D7DD2 !important; color: #5BA4F5 !important; } .dark-mode .row-action-btn.clear:hover { background: rgba(248,113,113,0.08) !important; border-color: #f87171 !important; color: #f87171 !important; } .dark-mode .adv-date-section { border-top-color: #3A4150 !important; } .dark-mode .adv-date-title { color: #5A6270 !important; } .dark-mode .adv-date-label { color: #A8B0BC !important; } .dark-mode .adv-date-select { background: #262B34 !important; color: #F0F2F5 !important; border-color: #3A4150 !important; } .dark-mode .adv-date-select:focus { border-color: #2D7DD2 !important; } .dark-mode .adv-date-year { background: #262B34 !important; color: #F0F2F5 !important; border-color: #3A4150 !important; } .dark-mode .adv-date-year:focus { border-color: #2D7DD2 !important; } .dark-mode .adv-date-year::placeholder { color: #5A6270 !important; } .dark-mode .adv-query-preview { background: linear-gradient(135deg, #1E2535 0%, #1A1E2E 100%) !important; border-color: #2D3A5C !important; } .dark-mode .adv-query-arrow { color: #5BA4F5 !important; } .dark-mode .adv-query-text { color: #A8B0BC !important; } .dark-mode .adv-query-text strong { color: #F0F2F5 !important; } .dark-mode .adv-query-op { color: #5BA4F5 !important; } /* Modal footer buttons */ .dark-mode .modal-footer .btn-secondary { background: #2D3440 !important; color: #A8B0BC !important; border: none !important; } .dark-mode .modal-footer .btn-secondary:hover { background: #363D4A !important; color: #F0F2F5 !important; } /* Advanced search trigger button */ .dark-mode .advanced-search-btn { background: rgba(45,125,210,0.1) !important; color: #5BA4F5 !important; border-color: rgba(45,125,210,0.3) !important; } .dark-mode .advanced-search-btn:hover { background: rgba(45,125,210,0.18) !important; border-color: #2D7DD2 !important; } /* ── FEATURE CARD HOVER DETAIL PANEL ── */ .dark-mode .feature-card { background: #262B34 !important; border-color: #3A4150 !important; } .dark-mode .feature-card:hover { border-color: #2D7DD2 !important; box-shadow: 0 10px 28px rgba(45,125,210,0.18) !important; } .dark-mode .card-detail { background: #1E2535 !important; } .dark-mode .card-detail-title { color: #5BA4F5 !important; border-bottom-color: #2D3A5C !important; } .dark-mode .card-detail-label { color: #5A6270 !important; } .dark-mode .card-detail-code { background: #1A2A40 !important; border-color: #2D3A5C !important; color: #7EB8F5 !important; } .dark-mode .card-detail-list li { color: #D0D5DD !important; } .dark-mode .card-detail-list li::before { color: #5BA4F5 !important; } .dark-mode .card-detail-note { background: rgba(251,191,36,0.07) !important; border-color: rgba(251,191,36,0.2) !important; color: #FCD34D !important; } .dark-mode .card-example { background: rgba(45,125,210,0.1) !important; color: #5BA4F5 !important; border-color: rgba(45,125,210,0.25) !important; } .dark-mode .card-title { color: #F0F2F5 !important; } .dark-mode .card-desc { color: #A8B0BC !important; } /* ============================================================= END DARK MODE ============================================================= */ /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #1a1a2e; background-color: #f5f5f5; } .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; } /* Navigation */ .navbar { background: white; padding: 18px 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); position: sticky; top: 0; z-index: 100; } .nav-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 28px; font-weight: 700; color: #6366f1; text-decoration: none; letter-spacing: -0.5px; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-link { color: #64748b; text-decoration: none; font-size: 16px; font-weight: 500; transition: color 0.2s; } .nav-link:hover, .nav-link.active { color: #6366f1; } .wildcard-badge { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white !important; padding: 8px 18px; border-radius: 50px; display: flex; align-items: center; gap: 6px; } .wildcard-icon { font-size: 14px; } /* Hero Section */ .hero { background: white; padding: 70px 0 80px 0; } .hero-title { font-size: 48px; font-weight: 700; text-align: center; margin-bottom: 16px; letter-spacing: -1px; color: #1a1a2e; } .hero-subtitle { font-size: 19px; text-align: center; margin-bottom: 45px; color: #64748b; max-width: 750px; margin-left: auto; margin-right: auto; } /* Search Form */ .search-form { max-width: 850px; margin: 0 auto; } .search-container { position: relative; display: flex; align-items: center; background: white; border: 3px solid #6366f1; border-radius: 60px; padding: 6px 6px 6px 24px; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); margin-bottom: 20px; } .search-icon { color: #64748b; flex-shrink: 0; margin-right: 14px; } .search-input { flex: 1; border: none; outline: none; font-size: 17px; padding: 14px 0; color: #1a1a2e; } .search-input::placeholder { color: #94a3b8; font-size: 16px; } /* Autocomplete Dropdown */ .autocomplete-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 60px; background: white; border: 2px solid #e0e7ff; border-radius: 12px; margin-top: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); z-index: 1000; max-height: 300px; overflow-y: auto; } .autocomplete-item { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 16px; color: #1a1a2e; border-bottom: 1px solid #f1f5f9; transition: background-color 0.2s; } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover { background-color: #f8f9ff; } .autocomplete-item svg { color: #94a3b8; flex-shrink: 0; } .search-button { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border: none; padding: 14px 32px; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; } .search-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35); } /* Quick Filters */ .quick-filters { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .filters-label { font-size: 15px; font-weight: 500; color: #64748b; } .filter-chip { background: rgba(99, 102, 241, 0.08); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.2); padding: 9px 18px; border-radius: 50px; font-size: 15px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .filter-chip:hover { background: rgba(99, 102, 241, 0.15); border-color: #6366f1; transform: translateY(-2px); } .wildcard-chip { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.3); } /* Features Section */ .features-section { padding: 70px 0; background: #f8f9fa; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .feature-card { text-align: center; padding: 36px 24px; border-radius: 14px; background: white; border: 2px solid #e2e8f0; transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(99, 102, 241, 0.12); border-color: #6366f1; } .feature-title { font-size: 20px; font-weight: 600; color: #1a1a2e; margin-bottom: 10px; } .feature-description { font-size: 16px; color: #64748b; } /* Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } .modal.show { display: flex; align-items: center; justify-content: center; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); } .modal-content { position: relative; background: white; border-radius: 20px; width: 90%; max-width: 550px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); z-index: 1001; animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .modal-header { padding: 24px 28px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { font-size: 22px; font-weight: 600; color: #1a1a2e; } .modal-close { background: none; border: none; font-size: 32px; color: #94a3b8; cursor: pointer; line-height: 1; transition: color 0.2s; } .modal-close:hover { color: #64748b; } .modal-body { padding: 28px; } .filter-group { margin-bottom: 20px; } .filter-group label { display: block; font-size: 15px; font-weight: 600; color: #1a1a2e; margin-bottom: 8px; } .filter-group input[type="text"], .filter-group input[type="number"] { width: 100%; padding: 12px 16px; font-size: 15px; border: 2px solid #e2e8f0; border-radius: 10px; outline: none; transition: border-color 0.2s; } .filter-group input:focus { border-color: #6366f1; } .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .checkbox-label { display: flex; align-items: center; cursor: pointer; font-weight: 500 !important; } .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; margin-right: 10px; cursor: pointer; } .modal-footer { padding: 20px 28px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px; } .btn-primary, .btn-secondary { padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.2s; border: none; } .btn-primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3); } .btn-secondary { background: #f1f5f9; color: #64748b; } .btn-secondary:hover { background: #e2e8f0; } /* About Page */ .about-section { padding: 70px 0; background: white; } .about-content { max-width: 1100px; margin: 0 auto; } .about-title { font-size: 44px; font-weight: 700; color: #1a1a2e; margin-bottom: 36px; text-align: center; } .about-description { background: linear-gradient(135deg, #f8f9ff 0%, #ede9fe 100%); padding: 42px; border-radius: 16px; margin-bottom: 52px; border: 2px solid #e0e7ff; } .about-text-large { font-size: 19px; line-height: 1.7; color: #1a1a2e; margin-bottom: 20px; } .about-text-large:last-child { margin-bottom: 0; } .features-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* Force exactly 3 columns */ gap: 24px; margin-bottom: 52px; } .feature-detail-card { background: white; padding: 28px; border-radius: 14px; border: 2px solid #e2e8f0; transition: all 0.3s ease; } .feature-detail-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); border-color: #6366f1; } .feature-icon { font-size: 36px; margin-bottom: 14px; } .feature-detail-card h3 { font-size: 19px; font-weight: 600; color: #1a1a2e; margin-bottom: 10px; } .feature-detail-card p { font-size: 15px; color: #64748b; line-height: 1.6; } .tech-stack-section { background: #f8f9ff; padding: 36px; border-radius: 14px; border: 2px solid #e0e7ff; margin-bottom: 36px; } .section-title { font-size: 24px; font-weight: 600; color: #1a1a2e; margin-bottom: 20px; } .tech-list { list-style: none; } .tech-list li { font-size: 16px; color: #64748b; padding: 12px 0; border-bottom: 1px solid #e0e7ff; padding-left: 28px; position: relative; } .tech-list li:before { content: "✓"; color: #6366f1; font-weight: bold; font-size: 18px; position: absolute; left: 0; } .tech-list li:last-child { border-bottom: none; } .project-info { text-align: center; padding: 28px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border-radius: 14px; } .project-text { font-size: 17px; line-height: 1.6; } /* Wildcard Page */ .wildcard-section { padding: 70px 0; background: white; } .wildcard-title { font-size: 44px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; text-align: center; } .wildcard-subtitle { font-size: 19px; color: #64748b; margin-bottom: 52px; text-align: center; } .search-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 28px; margin-bottom: 52px; } .guide-section { background: #f8f9ff; padding: 36px; border-radius: 16px; border: 2px solid #e0e7ff; } .guide-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .guide-icon { font-size: 28px; } .guide-icon.wildcard { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .guide-icon.boolean { background: #f1f5f9; color: #64748b; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .guide-section h2 { font-size: 24px; font-weight: 600; color: #1a1a2e; } .examples-list { display: flex; flex-direction: column; gap: 16px; } .example-item { background: white; padding: 18px; border-radius: 10px; border: 1px solid #e0e7ff; } .query-code { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; padding: 7px 14px; border-radius: 7px; font-size: 16px; font-family: 'Courier New', monospace; font-weight: 600; display: inline-block; margin-bottom: 8px; } .example-description { font-size: 15px; color: #64748b; line-height: 1.6; } .tips-section { background: #f8f9ff; padding: 36px; border-radius: 14px; border: 2px solid #e0e7ff; } .tips-section h3 { font-size: 22px; font-weight: 600; color: #1a1a2e; margin-bottom: 18px; } .tips-list { list-style: none; } .tips-list li { font-size: 16px; color: #64748b; padding: 10px 0; padding-left: 28px; position: relative; } .tips-list li:before { content: "💡"; position: absolute; left: 0; } .tips-list code { background: #e0e7ff; color: #6366f1; padding: 3px 9px; border-radius: 5px; font-size: 15px; font-family: 'Courier New', monospace; } /* Search Results Page */ .search-header { background: white; padding: 20px 0; border-bottom: 1px solid #e2e8f0; margin-bottom: 28px; } .search-header-form { max-width: 850px; } .search-header-container { display: flex; align-items: center; background: #f8f9ff; border: 2px solid #e0e7ff; border-radius: 50px; padding: 6px 6px 6px 18px; } .search-icon-small { color: #64748b; flex-shrink: 0; margin-right: 10px; } .search-header-input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; padding: 11px 0; color: #1a1a2e; } .search-header-button { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border: none; padding: 12px 28px; border-radius: 50px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .search-header-button:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(99, 102, 241, 0.3); } /* Results Layout */ .results-layout { padding-bottom: 56px; } .results-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; } /* Filters Sidebar */ .filters-sidebar { background: white; padding: 24px; border-radius: 14px; border: 2px solid #e2e8f0; height: fit-content; position: sticky; top: 90px; } .filters-header { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 2px solid #e2e8f0; } .filters-header svg { color: #6366f1; } .filters-header h3 { font-size: 19px; font-weight: 600; color: #1a1a2e; flex: 1; } .clear-filter-btn { background: #f8f9ff; color: #6366f1; border: 1px solid #e0e7ff; padding: 6px 11px; border-radius: 7px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .clear-filter-btn:hover { background: #e0e7ff; } .filter-section { margin-bottom: 20px; } .filter-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .filter-section-header svg { color: #6366f1; } .filter-section-header label { font-size: 15px; font-weight: 600; color: #1a1a2e; } .filter-input { width: 100%; padding: 10px 14px; font-size: 15px; border: 2px solid #e2e8f0; border-radius: 9px; outline: none; transition: border-color 0.2s; } .filter-input:focus { border-color: #6366f1; } .year-range { display: flex; align-items: center; gap: 10px; } .year-input { width: 95px; } .year-separator { color: #94a3b8; font-size: 16px; } .toggle-switch { display: flex; align-items: center; } .toggle-input { display: none; } .toggle-label { position: relative; display: inline-block; width: 52px; height: 28px; background: #e2e8f0; border-radius: 50px; cursor: pointer; transition: background 0.3s; } .toggle-input:checked + .toggle-label { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); } .toggle-label:before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: white; border-radius: 50%; transition: transform 0.3s; } .toggle-input:checked + .toggle-label:before { transform: translateX(24px); } .toggle-text { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: white; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity 0.3s; } .toggle-input:checked ~ .toggle-text { opacity: 1; } .apply-filters-btn { width: 100%; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border: none; padding: 12px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 6px; } .apply-filters-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(99, 102, 241, 0.3); } /* Results Main */ .results-main { background: white; padding: 28px; border-radius: 14px; border: 2px solid #e2e8f0; } .results-header { margin-bottom: 24px; } .results-count { font-size: 16px; color: #64748b; margin-bottom: 14px; } .results-count strong { color: #1a1a2e; font-weight: 600; } .active-filters { display: flex; flex-wrap: wrap; gap: 9px; } .active-filter-tag { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; padding: 7px 14px; border-radius: 50px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; } .remove-filter { background: rgba(255, 255, 255, 0.3); border: none; color: white; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; transition: background 0.2s; } .remove-filter:hover { background: rgba(255, 255, 255, 0.5); } .wildcard-active { background: rgba(99, 102, 241, 0.12); color: #6366f1; border: 2px solid #e0e7ff; } /* Results List */ .results-list { display: flex; flex-direction: column; gap: 24px; } .result-item { padding: 24px; border: 2px solid #e2e8f0; border-radius: 11px; transition: all 0.2s; } .result-item:hover { border-color: #6366f1; box-shadow: 0 3px 10px rgba(99, 102, 241, 0.08); } .result-title { font-size: 19px; font-weight: 600; color: #6366f1; margin-bottom: 10px; text-decoration: none; display: block; line-height: 1.4; cursor: pointer; } .result-title:hover { text-decoration: underline; } .result-meta { font-size: 15px; color: #64748b; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .result-abstract { font-size: 15px; color: #1a1a2e; line-height: 1.6; margin-bottom: 12px; } .result-tags { display: flex; gap: 9px; flex-wrap: wrap; } .cq-highlight { background: #fef08a; color: #1f2937; padding: 0 2px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .dark-mode .cq-highlight { background: #facc15; color: #0f172a; } .result-tag { background: #f8f9ff; color: #6366f1; padding: 5px 12px; border-radius: 18px; font-size: 14px; font-weight: 500; border: 1px solid #e0e7ff; } .open-access-badge { background: #10b981; color: white; padding: 5px 12px; border-radius: 18px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; } /* Pagination */ .pagination { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 36px; padding-top: 28px; border-top: 2px solid #e2e8f0; } .pagination-ellipsis { color: #94a3b8; padding: 0 4px; font-size: 16px; user-select: none; } .pagination-btn { padding: 10px 18px; font-size: 15px; border: 2px solid #e2e8f0; background: white; border-radius: 9px; cursor: pointer; color: #64748b; font-weight: 500; transition: all 0.2s; } .pagination-btn:hover:not(:disabled) { border-color: #6366f1; color: #6366f1; } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-btn.active { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border-color: transparent; } /* Paper Detail Page */ .paper-detail-section { padding: 40px 0 70px 0; background: white; } .back-button { display: inline-flex; align-items: center; gap: 8px; color: #6366f1; text-decoration: none; font-size: 15px; font-weight: 500; margin-bottom: 28px; transition: all 0.2s; } .back-button:hover { gap: 10px; } .paper-detail-content { max-width: 950px; margin: 0 auto; } .paper-title { font-size: 36px; font-weight: 700; color: #1a1a2e; margin-bottom: 20px; line-height: 1.3; } .paper-meta-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 16px; color: #64748b; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 2px solid #e2e8f0; } .paper-authors { color: #1a1a2e; font-weight: 500; } .separator { color: #cbd5e1; } .paper-section { margin-bottom: 36px; } .paper-section h2 { font-size: 24px; font-weight: 600; color: #1a1a2e; margin-bottom: 16px; } .paper-section h3 { font-size: 19px; font-weight: 600; color: #1a1a2e; margin-bottom: 14px; } .paper-abstract { font-size: 16px; line-height: 1.8; color: #1a1a2e; } .citation-box { background: #f8f9ff; padding: 20px; border-radius: 12px; border: 2px solid #e0e7ff; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .citation-box code { font-size: 15px; color: #1a1a2e; font-family: 'Courier New', monospace; flex: 1; } .copy-btn { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .copy-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } .paper-topics { display: flex; gap: 10px; flex-wrap: wrap; } .topic-tag { background: rgba(99, 102, 241, 0.1); color: #6366f1; padding: 7px 16px; border-radius: 20px; font-size: 15px; font-weight: 500; border: 1px solid #e0e7ff; } .two-column-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .citation-list { display: flex; flex-direction: column; gap: 16px; } .citation-item { padding: 14px; background: #f8f9ff; border-radius: 10px; border: 1px solid #e0e7ff; transition: all 0.2s; } .citation-item:hover { border-color: #6366f1; background: white; } .citation-title { font-size: 16px; font-weight: 500; color: #6366f1; text-decoration: none; display: block; margin-bottom: 6px; line-height: 1.4; } .citation-title:hover { text-decoration: underline; } .citation-meta { font-size: 14px; color: #64748b; } /* Responsive */ @media (max-width: 1100px) { .results-grid { grid-template-columns: 1fr; } .filters-sidebar { position: static; } .search-guide-grid { grid-template-columns: 1fr; } .two-column-sections { grid-template-columns: 1fr; } } @media (max-width: 768px) { .hero-title { font-size: 36px; } .hero-subtitle { font-size: 17px; } .search-button { padding: 12px 22px; font-size: 15px; } .nav-links { gap: 18px; } .filter-row { grid-template-columns: 1fr; } .paper-title { font-size: 28px; } } /* ── Skeleton Loader ── */ @keyframes shimmer { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } } .skeleton { background: linear-gradient(90deg, #e8e8f0 25%, #f4f4f8 37%, #e8e8f0 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 6px; display: block; } .skeleton-result-item { padding: 24px; border: 2px solid #e2e8f0; border-radius: 11px; margin-bottom: 24px; } .skeleton-title { height: 20px; width: 68%; margin-bottom: 12px; } .skeleton-meta { height: 14px; width: 45%; margin-bottom: 14px; } .skeleton-line { height: 13px; width: 100%; margin-bottom: 8px; } .skeleton-line.w80 { width: 80%; } .skeleton-line.w55 { width: 55%; margin-bottom: 0; } .skeleton-badge { height: 26px; width: 110px; border-radius: 18px; margin-top: 14px; } /* ── Search Feature Cards ── */ .features-section-header { text-align: center; margin-bottom: 32px; } .features-section-title { font-size: 26px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; } .features-section-subtitle { font-size: 16px; color: #64748b; } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .feature-card { background: white; border: 2px solid #e2e8f0; border-radius: 14px; padding: 24px 20px; position: relative; overflow: hidden; min-height: 185px; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .feature-card:hover { border-color: #6366f1; box-shadow: 0 10px 28px rgba(99, 102, 241, 0.14); transform: translateY(-4px); } .card-front { transition: opacity 0.2s; } .feature-card:hover .card-front { opacity: 0; pointer-events: none; } .card-icon { font-size: 26px; margin-bottom: 10px; } .card-example { display: inline-block; background: rgba(99, 102, 241, 0.08); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-family: 'Courier New', monospace; margin-bottom: 10px; } /* Hover detail panel */ .card-detail { position: absolute; inset: 0; background: white; border-radius: 12px; padding: 18px 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s; overflow-y: auto; } .feature-card:hover .card-detail { opacity: 1; pointer-events: auto; } .card-detail-title { font-size: 13px; font-weight: 700; color: #6366f1; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e0e7ff; } .card-detail-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 4px; } .card-detail-code { background: #f8f9ff; border: 1px solid #e0e7ff; border-radius: 7px; padding: 6px 11px; font-family: 'Courier New', monospace; font-size: 12px; color: #4f46e5; margin-bottom: 10px; } .card-detail-list { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; } .card-detail-list li { font-size: 12px; color: #334155; line-height: 1.5; padding-left: 13px; position: relative; } .card-detail-list li::before { content: '›'; position: absolute; left: 0; color: #6366f1; font-weight: 700; } .card-detail-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 9px; font-size: 11px; color: #92400e; line-height: 1.5; margin-top: 6px; } @media (max-width: 1100px) { .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } } /* ── Advanced Search Button ── */ .advanced-search-btn { background: rgba(99,102,241,0.08); color: #6366f1; border: 1px solid rgba(99,102,241,0.3); padding: 10px 24px; border-radius: 50px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; } .advanced-search-btn:hover { background: rgba(99,102,241,0.15); border-color: #6366f1; transform: translateY(-2px); } /* ── Advanced Search Modal overrides ── */ .modal-header { background: linear-gradient(135deg, #fafbff 0%, #f5f3ff 100%); border-radius: 20px 20px 0 0; } .modal-header-left { display: flex; align-items: center; gap: 12px; } .search-criteria-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #6366f1; background: rgba(99,102,241,0.1); padding: 3px 10px; border-radius: 20px; border: 1px solid rgba(99,102,241,0.2); } .modal-close { background: #f1f5f9; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; } .modal-close:hover { background: #e2e8f0; color: #475569; } /* Search rows */ .search-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .search-row { display: flex; align-items: center; gap: 8px; background: #fafbff; border: 1px solid #e8eaf0; border-radius: 10px; padding: 10px 12px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .search-row:hover { border-color: #c4b5fd; } .search-row:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.07); } .bool-spacer { width: 60px; flex-shrink: 0; } .bool-select { width: 60px; flex-shrink: 0; padding: 6px 2px; font-size: 12px; font-weight: 700; border: 1.5px solid #e2e8f0; border-radius: 7px; background: white; color: #6366f1; cursor: pointer; outline: none; } .bool-select:focus { border-color: #6366f1; } .field-select { width: 90px; flex-shrink: 0; padding: 6px 2px; font-size: 13px; border: 1.5px solid #e2e8f0; border-radius: 7px; background: white; color: #1a1a2e; cursor: pointer; outline: none; } .field-select:focus { border-color: #6366f1; } .condition-select { width: 145px; flex-shrink: 0; padding: 6px 2px; font-size: 13px; border: 1.5px solid #e2e8f0; border-radius: 7px; background: white; color: #1a1a2e; cursor: pointer; outline: none; } .condition-select:focus { border-color: #6366f1; } .search-row-input { flex: 1 1 0; min-width: 80px; padding: 6px 10px; font-size: 13px; border: 1.5px solid #e2e8f0; border-radius: 7px; color: #1a1a2e; outline: none; background: white; overflow: hidden; text-overflow: ellipsis; } .search-row-input:focus { border-color: #6366f1; } .search-row-input::placeholder { color: #94a3b8; } .remove-row-btn { background: none; border: none; color: #cbd5e1; font-size: 16px; cursor: pointer; flex-shrink: 0; padding: 4px 5px; border-radius: 6px; transition: all 0.2s; } .remove-row-btn:hover { color: #ef4444; background: #fef2f2; } /* Add / Clear buttons — same size and format */ .row-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; } .row-action-btn { background: none; border: 1.5px solid #e2e8f0; border-radius: 8px; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 14px; transition: all 0.2s; } .row-action-btn:hover { background: #f8f9ff; border-color: #6366f1; color: #6366f1; } .row-action-btn.clear:hover { background: #fff5f5; border-color: #fca5a5; color: #ef4444; } /* Date section */ .adv-date-section { border-top: 1px solid #e2e8f0; padding-top: 20px; margin-bottom: 20px; } .adv-date-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 14px; } .adv-date-rows { display: flex; flex-direction: column; gap: 10px; } .adv-date-row { display: flex; align-items: center; gap: 14px; } .adv-date-label { font-size: 14px; font-weight: 500; color: #475569; width: 80px; flex-shrink: 0; } .adv-date-selects { display: flex; gap: 8px; align-items: center; } .adv-date-select { padding: 7px 10px; font-size: 14px; border: 1.5px solid #e2e8f0; border-radius: 7px; background: white; color: #1a1a2e; cursor: pointer; outline: none; transition: border-color 0.2s; } .adv-date-select:focus { border-color: #6366f1; } .adv-day-sel { width: 70px; } .adv-month-sel { width: 118px; } .adv-date-year { width: 105px; padding: 7px 10px; font-size: 14px; border: 1.5px solid #e2e8f0; border-radius: 7px; color: #1a1a2e; outline: none; transition: border-color 0.2s; } .adv-date-year:focus { border-color: #6366f1; } .adv-date-year::placeholder { color: #94a3b8; } /* Query preview */ .adv-query-preview { background: linear-gradient(135deg, #f8f9ff 0%, #f3f0ff 100%); border: 1px solid #e0e7ff; border-radius: 12px; padding: 14px 18px; display: flex; align-items: flex-start; gap: 10px; } .adv-query-arrow { color: #6366f1; font-size: 18px; flex-shrink: 0; } .adv-query-text { font-size: 14px; color: #475569; line-height: 1.7; } .adv-query-text strong { color: #1a1a2e; } .adv-query-op { color: #6366f1; font-weight: 700; } /* ============================================================= RESPONSIVE STYLES Based on exact HTML structure of all pages. Breakpoints: 1100px — large tablet / small desktop 768px — tablet / landscape phone 480px — portrait phone (iPhone SE, Galaxy S) 360px — small phones ============================================================= */ /* ── Global: prevent horizontal overflow on all pages ── */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } /* ============================================================ 1100px — Large tablet / small desktop ============================================================ */ @media (max-width: 1100px) { /* --- ALL PAGES: Navbar --- */ .nav-links { gap: 18px; } /* --- HOME: Features grid 4→2 cols --- */ .features-grid { grid-template-columns: repeat(2, 1fr); } /* --- SEARCH RESULTS: sidebar stacks above results --- */ .results-grid { grid-template-columns: 1fr; } .filters-sidebar { position: static; } /* --- WILDCARD: guide grid stacks --- */ .search-guide-grid { grid-template-columns: 1fr; } /* --- PAPER DETAIL: two columns stack --- */ .two-column-sections { grid-template-columns: 1fr; } /* --- ABOUT: 3-col feature grid → 2 cols --- */ .features-detail-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ 768px — Tablet / landscape phone ============================================================ */ @media (max-width: 768px) { /* ───────────────────────────────────────── ALL PAGES: Navbar ───────────────────────────────────────── */ .navbar { padding: 12px 0; } .container { padding: 0 18px; } .nav-content { flex-wrap: wrap; gap: 10px; row-gap: 8px; } .logo { font-size: 22px; } .nav-links { gap: 12px; flex-wrap: wrap; align-items: center; } .nav-link { font-size: 14px; } .wildcard-badge { font-size: 13px !important; padding: 6px 14px !important; } .darkmode-btn { padding: 6px 12px; font-size: 13px; } /* ───────────────────────────────────────── HOME PAGE ───────────────────────────────────────── */ .hero { padding: 44px 0 52px; } .hero-title { font-size: 32px; letter-spacing: -0.5px; } .hero-subtitle { font-size: 16px; margin-bottom: 32px; } /* Search bar stacks vertically */ .search-container { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 14px 16px; gap: 10px; } .search-icon { display: none; } .search-input { width: 100%; font-size: 16px; padding: 8px 0; } .search-button { width: 100%; justify-content: center; border-radius: 12px; padding: 13px 20px; font-size: 15px; } /* Quick filters */ .quick-filters { gap: 8px; } .filters-label { width: 100%; text-align: center; } .filter-chip { font-size: 13px; padding: 7px 14px; } .advanced-search-btn { font-size: 14px; padding: 9px 18px; } /* Feature cards 2→2 (keep), shrink */ .features-section { padding: 44px 0; } .features-section-title { font-size: 22px; } .features-section-subtitle { font-size: 15px; } .feature-card { padding: 20px 16px; min-height: 155px; } .feature-title { font-size: 16px; } .feature-description { font-size: 14px; } /* ───────────────────────────────────────── ADVANCED SEARCH MODAL (home page) ───────────────────────────────────────── */ .modal.show { align-items: flex-end; } .modal-content { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-header { padding: 16px 18px; } .modal-header h3 { font-size: 18px; } .modal-body { padding: 16px 18px; } .modal-footer { padding: 14px 18px; flex-direction: column; gap: 8px; } .modal-footer .btn-primary, .modal-footer .btn-secondary { width: 100%; justify-content: center; font-size: 15px; padding: 13px 20px; } /* Advanced search rows wrap */ .search-row { flex-wrap: wrap; gap: 8px; padding: 10px; } .bool-spacer { display: none; } .bool-select { width: 64px; font-size: 12px; } .field-select { flex: 1 1 120px; min-width: 100px; } .condition-select { flex: 1 1 130px; min-width: 110px; } .search-row-input { width: 100%; min-width: 0; } .row-action-btn { font-size: 13px; padding: 7px 12px; } /* Date section */ .adv-date-row { flex-wrap: wrap; gap: 8px; align-items: flex-start; } .adv-date-label { width: 80px; flex-shrink: 0; font-size: 13px; } .adv-date-selects { flex-wrap: wrap; gap: 6px; } .adv-day-sel { width: 66px; } .adv-month-sel { width: 110px; } .adv-date-year { width: 90px; } /* Filter group inside old modal */ .filter-row { grid-template-columns: 1fr; } /* ───────────────────────────────────────── SEARCH RESULTS PAGE (search.html) ───────────────────────────────────────── */ .search-header { padding: 12px 0; } .search-header-form { max-width: 100%; } .search-header-container { padding: 5px 5px 5px 14px; border-radius: 40px; } .search-header-input { font-size: 15px; padding: 9px 0; } .search-header-button { padding: 10px 20px; font-size: 14px; } /* Sidebar becomes collapsible-looking box on top */ .results-grid { grid-template-columns: 1fr; gap: 16px; } .filters-sidebar { position: static; border-radius: 12px; padding: 18px; } .filters-header { margin-bottom: 16px; padding-bottom: 14px; } .filters-header h3 { font-size: 17px; } .year-range { gap: 8px; } .year-input { width: 80px; } .apply-filters-btn { padding: 11px; font-size: 14px; } /* Results main */ .results-main { padding: 18px; } .results-count { font-size: 15px; margin-bottom: 12px; } .result-item { padding: 18px; border-radius: 10px; } .result-title { font-size: 16px; margin-bottom: 8px; } .result-meta { font-size: 14px; gap: 8px; flex-wrap: wrap; } .result-abstract { font-size: 14px; } .result-tags { gap: 7px; } .result-tag { font-size: 13px; padding: 4px 10px; } .open-access-badge { font-size: 13px; padding: 4px 10px; } /* Pagination */ .pagination { gap: 6px; margin-top: 24px; padding-top: 20px; } .pagination-btn { padding: 8px 13px; font-size: 14px; } /* ───────────────────────────────────────── ABOUT PAGE (about.html) ───────────────────────────────────────── */ .about-section { padding: 44px 0; } .about-title { font-size: 32px; margin-bottom: 24px; } .about-description { padding: 22px; margin-bottom: 32px; } .about-text-large { font-size: 16px; line-height: 1.7; } /* Feature detail cards 2→1 */ .features-detail-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } .feature-detail-card { padding: 22px; } .feature-detail-card h3 { font-size: 17px; } .feature-detail-card p { font-size: 14px; } .tech-stack-section { padding: 24px; margin-bottom: 24px; } .section-title { font-size: 20px; } .tech-list li { font-size: 15px; } .project-info { padding: 22px; } .project-text { font-size: 15px; } /* ───────────────────────────────────────── WILDCARD PAGE (wildcard.html) ───────────────────────────────────────── */ .wildcard-section { padding: 44px 0; } .wildcard-title { font-size: 32px; margin-bottom: 10px; } .wildcard-subtitle { font-size: 16px; margin-bottom: 32px; } .search-guide-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; } .guide-section { padding: 24px; } .guide-header { margin-bottom: 18px; gap: 12px; } .guide-section h2 { font-size: 20px; } .examples-list { gap: 12px; } .example-item { padding: 14px; } .query-code { font-size: 14px; padding: 5px 11px; } .example-description { font-size: 14px; } .tips-section { padding: 24px; } .tips-section h3 { font-size: 18px; margin-bottom: 14px; } .tips-list li { font-size: 14px; padding-left: 24px; } .tips-list code { font-size: 13px; } /* ───────────────────────────────────────── PAPER DETAIL PAGE (paper.html) ───────────────────────────────────────── */ .paper-detail-section { padding: 28px 0 52px; } .back-button { font-size: 14px; margin-bottom: 20px; } .paper-title { font-size: 26px; line-height: 1.35; margin-bottom: 14px; } .paper-meta-info { font-size: 14px; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 18px; } .separator { display: none; } .paper-authors { width: 100%; } .open-access-badge { font-size: 13px; } .paper-section { margin-bottom: 24px; } .paper-section h2 { font-size: 20px; margin-bottom: 12px; } .paper-section h3 { font-size: 17px; margin-bottom: 10px; } .paper-abstract { font-size: 15px; line-height: 1.75; } /* Citation box stacks */ .citation-box { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; } .citation-box code { font-size: 13px; word-break: break-all; } .copy-btn { width: 100%; text-align: center; justify-content: center; } /* Topics */ .paper-topics { gap: 8px; } .topic-tag { font-size: 14px; padding: 6px 14px; } /* Two-column citations/references stack */ .two-column-sections { grid-template-columns: 1fr; gap: 20px; } .citation-list { gap: 12px; } .citation-item { padding: 12px; } .citation-title { font-size: 15px; } .citation-meta { font-size: 13px; } } /* ============================================================ 480px — Portrait phone (iPhone SE, Galaxy S, Pixel) ============================================================ */ @media (max-width: 480px) { /* ─── ALL PAGES: Navbar ─── */ .container { padding: 0 14px; } .logo { font-size: 20px; } .nav-links { gap: 8px; } .nav-link { font-size: 13px; } .darkmode-btn { padding: 5px 9px; font-size: 12px; } /* Hide "Dark/Light" label on tiny screens, keep icon */ .dm-label { display: none; } .wildcard-badge { padding: 5px 10px !important; font-size: 12px !important; } /* ─── HOME ─── */ .hero { padding: 32px 0 40px; } .hero-title { font-size: 24px; } .hero-subtitle { font-size: 15px; margin-bottom: 24px; } .search-container { padding: 12px 14px; gap: 8px; } .search-input { font-size: 15px; } .search-button { font-size: 14px; padding: 11px 16px; } .filter-chip { font-size: 12px; padding: 6px 11px; } .advanced-search-btn { font-size: 13px; padding: 8px 14px; } /* Feature cards go single column */ .features-grid { grid-template-columns: 1fr; gap: 10px; } .feature-card { min-height: auto; padding: 16px 14px; } .feature-title { font-size: 15px; } .feature-description { font-size: 13px; } /* ─── ADVANCED MODAL ─── */ .modal-content { border-radius: 16px 16px 0 0; max-height: 92vh; } .modal-body { padding: 14px; } .modal-header { padding: 14px 16px; } .modal-header h3 { font-size: 16px; } .search-criteria-label { font-size: 10px; } .bool-select { width: 54px; font-size: 11px; } .field-select { min-width: 90px; } .condition-select { min-width: 100px; } .row-action-btn { font-size: 12px; padding: 6px 10px; } .adv-date-label { font-size: 12px; width: 70px; } .adv-day-sel { width: 60px; } .adv-month-sel { width: 100px; } .adv-date-year { width: 80px; } .adv-query-text { font-size: 13px; } .modal-footer .btn-primary, .modal-footer .btn-secondary { font-size: 14px; padding: 12px; } /* ─── SEARCH RESULTS ─── */ .search-header-input { font-size: 14px; } .search-header-button { padding: 9px 16px; font-size: 13px; } .filters-sidebar { padding: 14px; } .filter-section-header label { font-size: 14px; } .filter-input { font-size: 14px; padding: 9px 12px; } .year-input { width: 72px; font-size: 14px; } .results-main { padding: 14px; } .result-item { padding: 14px; } .result-title { font-size: 15px; } .result-meta { font-size: 13px; } .result-abstract { font-size: 13px; } .result-tag { font-size: 12px; padding: 3px 9px; } .active-filter-tag { font-size: 12px; padding: 5px 10px; } .pagination-btn { padding: 7px 10px; font-size: 13px; } .pagination { gap: 4px; } /* ─── ABOUT ─── */ .about-title { font-size: 26px; } .about-description { padding: 16px; } .about-text-large { font-size: 15px; } .feature-detail-card { padding: 18px; } .tech-stack-section { padding: 18px; } .tech-list li { font-size: 14px; padding-left: 22px; } .project-text { font-size: 14px; } /* ─── WILDCARD ─── */ .wildcard-title { font-size: 26px; } .wildcard-subtitle { font-size: 15px; margin-bottom: 24px; } .guide-section { padding: 18px; } .guide-section h2 { font-size: 18px; } .query-code { font-size: 13px; } .example-description { font-size: 13px; } .tips-section { padding: 18px; } .tips-list li { font-size: 13px; } /* ─── PAPER DETAIL ─── */ .paper-title { font-size: 22px; } .paper-meta-info { font-size: 13px; } .paper-section h2 { font-size: 18px; } .paper-section h3 { font-size: 16px; } .paper-abstract { font-size: 14px; } .citation-box code { font-size: 12px; } .topic-tag { font-size: 13px; padding: 5px 11px; } .citation-title { font-size: 14px; } } /* ============================================================ 360px — Small phones (older Galaxy, budget phones) ============================================================ */ @media (max-width: 360px) { .container { padding: 0 12px; } .logo { font-size: 18px; } .hero-title { font-size: 21px; } .hero-subtitle { font-size: 14px; } .search-button { font-size: 13px; padding: 10px 12px; } .about-title { font-size: 22px; } .wildcard-title { font-size: 22px; } .paper-title { font-size: 19px; } .result-title { font-size: 14px; } .features-section-title { font-size: 19px; } .pagination-btn { padding: 6px 8px; font-size: 12px; } } /* ============================================================ Touch devices — disable broken hover states (card detail panels, lift animations) ============================================================ */ @media (hover: none) { .feature-card:hover .card-front { opacity: 1 !important; pointer-events: auto !important; } .feature-card:hover .card-detail { opacity: 0 !important; pointer-events: none !important; } .feature-card:hover { transform: none !important; box-shadow: none !important; } .feature-card:hover { border-color: #e2e8f0 !important; } .search-button:hover { transform: none !important; box-shadow: none !important; } .filter-chip:hover { transform: none !important; } .advanced-search-btn:hover { transform: none !important; } .search-header-button:hover { transform: none !important; box-shadow: none !important; } .apply-filters-btn:hover { transform: none !important; box-shadow: none !important; } .btn-primary:hover { transform: none !important; box-shadow: none !important; } .result-item:hover { border-color: #e2e8f0 !important; box-shadow: none !important; } .feature-detail-card:hover { transform: none !important; box-shadow: none !important; } .citation-item:hover { border-color: #e0e7ff !important; } .pagination-btn:hover:not(:disabled) { border-color: #e2e8f0 !important; color: #64748b !important; } } /* ============================================================= MOBILE FILTER SIDEBAR — Collapsible panel + toggle button ============================================================= */ /* ── Filter toggle button (hidden on desktop) ── */ #filter-toggle-btn { display: none; align-items: center; gap: 8px; background: #6366f1; color: #fff; border: none; padding: 11px 20px; border-radius: 10px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; margin: 0 0 16px 0; transition: background 0.2s; width: 100%; justify-content: center; } #filter-toggle-btn:hover { background: #4f46e5; } #filter-toggle-btn svg { flex-shrink: 0; } /* ── Overlay behind sidebar on mobile ── */ #sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 299; } #sidebar-overlay.sidebar-overlay-active { display: block; } /* Dark mode variants */ .dark-mode #filter-toggle-btn { background: #2D7DD2; } .dark-mode #filter-toggle-btn:hover { background: #1A5FA8; } /* ── Placeholder colour fix (sidebar filters) ── */ #authorFilter::placeholder, #yearFrom::placeholder, #yearTo::placeholder { color: #b0b8c4; font-style: italic; } .dark-mode #authorFilter::placeholder, .dark-mode #yearFrom::placeholder, .dark-mode #yearTo::placeholder { color: #4A5260; } /* ── Mobile: sidebar becomes a slide-in drawer ── */ @media (max-width: 768px) { /* Show toggle button */ #filter-toggle-btn { display: flex; } /* Hide sidebar by default — slide in from left */ .filters-sidebar { position: fixed !important; top: 0; left: -100%; width: 85vw; max-width: 320px; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 300; border-radius: 0 !important; border-left: none !important; border-top: none !important; border-bottom: none !important; box-shadow: 4px 0 24px rgba(0,0,0,0.18); transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1); padding: 24px 20px 32px !important; } /* Open state */ .filters-sidebar.sidebar-open { left: 0; } /* Results grid: full width, no sidebar column */ .results-grid { grid-template-columns: 1fr !important; } } /* ── Sidebar: search row stacks vertically to fit narrow column ── */ .filters-sidebar .search-rows { margin-bottom: 12px; } .filters-sidebar .row-actions { margin-bottom: 14px; } /* Stack the search row fields vertically inside the sidebar */ .filters-sidebar .search-row { flex-direction: column !important; align-items: stretch !important; gap: 7px !important; padding: 10px !important; } .filters-sidebar .search-row .bool-spacer { display: none !important; } .filters-sidebar .search-row .bool-select { width: 100% !important; } .filters-sidebar .search-row .field-select { width: 100% !important; } .filters-sidebar .search-row .condition-select { width: 100% !important; } .filters-sidebar .search-row .search-row-input { width: 100% !important; min-width: 0 !important; } .filters-sidebar .search-row .remove-row-btn { align-self: flex-end !important; margin-top: -4px !important; } /* Date: label above, selects fill the full row on one line */ .filters-sidebar .adv-date-row { flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; } .filters-sidebar .adv-date-label { width: auto !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #94a3b8 !important; } .filters-sidebar .adv-date-selects { display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; width: 100% !important; } .filters-sidebar .adv-day-sel { flex: 0 0 68px !important; min-width: 0 !important; width: 68px !important; } .filters-sidebar .adv-month-sel { flex: 1 !important; min-width: 0 !important; width: auto !important; } .filters-sidebar .adv-date-year { flex: 0 0 72px !important; min-width: 0 !important; width: 72px !important; }