/* ========================================================= YHZ Crew Alerts — Help Center styles (v7) Scope: only applies when is present Goal: neutral background + readable card grid ========================================================= */ /* ---------- Page background + frame ---------- */ .help { /* Kill any busy global background behind cards */ background: #0b1020; /* deep navy, matches brand tone */ background-image: none; color: var(--card); } .help .page { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem 4rem; } /* Page heading + intro */ .help .page h1 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); line-height: 1.2; color: #fff; } .help .page > p { margin: 0 0 1.25rem; color: #c9d1e5; } /* ---------- Toolbar & Filters ---------- */ .help .toolbar { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .5rem; } .help .search { flex: 1; } .help input[type="search"] { width: 100%; padding: .75rem .9rem; border: 1px solid rgba(255,255,255,.12); border-radius: .75rem; background: rgba(255,255,255,.06); color: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .help input[type="search"]::placeholder { color: #b8c0d8; } .help input[type="search"]:focus { border-color: var(--brand, #2563eb); box-shadow: 0 0 0 3px var(--ring, rgba(37,99,235,.25)); background: rgba(255,255,255,.09); } .help .filters { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; color: #d7def2; } .help .filters label { font-size: .9rem; color: #b8c0d8; } .help .filters select { appearance: none; padding: .6rem .9rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .help .filters select:focus { border-color: var(--brand, #2563eb); box-shadow: 0 0 0 3px var(--ring, rgba(37,99,235,.25)); background: rgba(255,255,255,.09); } /* ---------- Card grid ---------- */ .help .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } /* Individual card */ .help .card { display: block; text-decoration: none; background: var(--card, #ffffff); color: var(--ink, #0f172a); border: 1px solid rgba(15, 23, 42, .06); border-radius: 1rem; padding: 1rem 1rem 1.1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(2,6,23,.05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .help .card:hover { transform: translateY(-1px); border-color: rgba(37,99,235,.25); box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 10px 24px rgba(2,6,23,.08); } .help .card h2 { margin: 0 0 .5rem; font-size: 1.05rem; line-height: 1.35; display: flex; align-items: center; gap: .5rem; color: inherit; } .help .card p { margin: 0; color: #334155; } /* Category badge */ .help .badge { display: inline-block; font-size: .72rem; line-height: 1; padding: .35rem .5rem; border-radius: .5rem; background: rgba(37,99,235,.10); color: #1d4ed8; border: 1px solid rgba(37,99,235,.15); white-space: nowrap; } /* Empty state text */ .help .muted { color: #b8c0d8; text-align: center; padding: 1.5rem 0; } /* ---------- Small screens ---------- */ @media (max-width: 520px) { .help .page { padding: 1.25rem 1rem 3rem; } .help .filters { flex-wrap: wrap; } }