right) so no page needs a wrapper element; the logged-out pages have no header and are unaffected. Banners (org join / invite) sit above the header and span both columns. */ body:has(> .site-header) { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-content: start; min-height: 100vh; } body:has(> .site-header) > .site-header, body:has(> .site-header) > .org-join-banner, body:has(> .site-header) > .org-invite-banner { grid-column: 1 / -1; } .sidebar { grid-column: 1; } main { grid-column: 2; max-width: 1180px; width: 100%; margin: 0; padding: 22px 24px 60px; } /* -- Header: navy bar, brand column as wide as the sidebar, menus left- aligned to the content edge, captioned segmented pills. */ header.site-header { background: linear-gradient(90deg, var(--nav-bg), var(--nav-bg-2)); box-shadow: 0 2px 10px rgba(15, 39, 71, 0.25); color: #fff; position: relative; z-index: 20; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .header-row { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto; align-items: center; padding: 10px 24px 10px 0; } .header-row h1 { display: flex; align-items: center; gap: 10px; margin: 0; padding-left: 24px; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; } .header-row h1 a { color: #fff; } .header-row h1 a:hover { text-decoration: none; } .header-row h1::before { content: ""; width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; background: linear-gradient(135deg, #6c9bff, #a9c6ff); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); } .brand-text { display: block; line-height: 1.2; } .brand-org { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: rgba(255, 255, 255, 0.7); } .header-center { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-left: 24px; min-width: 0; } .header-actions { display: flex; align-items: center; gap: 14px; font-size: 13px; } .header-actions .muted { color: rgba(255, 255, 255, 0.72); } .header-actions a { color: #b9d0ff; } .header-actions a:hover { color: #fff; text-decoration: none; } .app-menu-group { display: flex; flex-direction: column; gap: 3px; } .app-menu-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255, 255, 255, 0.62); line-height: 1; } .header-tabs { display: flex; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.06); } .header-tabs-external { border-color: var(--external-border); } .header-tabs .tab-btn { font-family: inherit; font-size: 12px; font-weight: 500; line-height: normal; padding: 5px 11px; color: #fff; background: transparent; border: none; border-left: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0; white-space: nowrap; } .header-tabs .tab-btn:first-child { border-left: none; } .header-tabs .tab-btn:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; } .header-tabs .tab-btn.active { background: rgba(255, 255, 255, 0.24); font-weight: 600; } /* -- Sidebar */ .sidebar { background: var(--card-bg); border-right: 1px solid var(--border); padding: 14px 12px 24px; min-height: calc(100vh - 59px); } .side-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: #334155; } .side-link:hover { background: var(--pill-bg); text-decoration: none; } .side-link.active { background: var(--tint-blue); color: var(--ink-blue); } .side-group { margin-top: 10px; } .side-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 6px 0 2px; padding: 6px 10px; background: none; border: none; border-radius: 8px; font-family: inherit; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; cursor: pointer; } .side-group-toggle:hover { background: var(--pill-bg); color: #64748b; } .side-group-toggle .ico { width: 16px; height: 16px; transition: transform 0.15s ease; } .side-group.collapsed .side-group-toggle .ico { transform: rotate(-90deg); } .side-group.collapsed .side-group-body { display: none; } .side-toggle { display: none; } /* Places a fixed set of .card sections side by side instead of each taking its own full-width row -- e.g. Organization/My Programs/ Organization Knowledge, or the two Request forms. Cards inside a row share the row's own bottom margin instead of stacking their own, and wrap to a single column once there isn't room, so this still works at phone width without a separate breakpoint rule. */ .card-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } .card-row .card { flex: 1 1 260px; margin-bottom: 0; } .card h2 { margin: 0 0 12px; font-size: 17px; } /* admin.php's dashboard -- each .card becomes a clickable tile linking to that section's own page, same box styling as every other .card, just wrapped in an instead of a

. */ .admin-tile-grid { display: flex; gap: 20px; flex-wrap: wrap; } .admin-tile-grid .admin-tile { flex: 1 1 260px; } .admin-tile { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s; } .admin-tile:hover { border-color: var(--accent); } .admin-tile p { margin: 0; } /* Flags a tile whose section has data the viewer hasn't actually opened yet since it last changed -- set/cleared client-side in admin.js (localStorage fingerprint per section, only ever cleared by visiting that section's own page), not a server-tracked read-state. The class selector must win over the [hidden] UA rule (display:none), so it's repeated below with the attribute selector. */ .updated-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--error); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle; } .updated-badge[hidden] { display: none; } .back-link { display: inline-block; margin-bottom: 16px; color: var(--muted); text-decoration: none; font-size: 13px; } .back-link:hover { color: var(--text); } .muted { color: var(--muted); font-size: 13px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .toolbar input, .toolbar select { padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; } button { cursor: pointer; } button[type="submit"], button { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 7px 14px; font-size: 13px; } button:hover:not(.btn-danger) { background: var(--accent-hover); } .btn-danger { background: none; border: 1px solid var(--error); color: var(--error); border-radius: 6px; padding: 4px 10px; font-size: 12px; } .error-text { color: var(--error); font-size: 13px; margin-bottom: 10px; min-height: 1em; } .notice-text { color: #166534; font-size: 13px; margin-bottom: 10px; } /* Sits above the topbar on every internal page (see header.php) until the recipient dismisses it -- not a .card, deliberately full-width and attention-grabbing since it's a one-off "something happened" notice, not part of the page's own content. */ .org-join-banner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 20px; background: #dbeafe; color: #1e3a8a; font-size: 13px; text-align: center; } .org-join-banner button { background: none; border: 1px solid #1e3a8a; color: #1e3a8a; border-radius: 6px; padding: 3px 10px; font-size: 12px; } .org-join-banner button:hover { background: #1e3a8a; color: #fff; } /* Same shape as .org-join-banner, red instead of blue -- this one's a nudge to actually go do something (accept the invite below), not just an FYI. */ .org-invite-banner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 20px; background: #fee2e2; color: #7a1712; font-size: 13px; font-weight: 600; text-align: center; } /* Draws the eye until the pending invite is actually accepted -- pauses automatically while the accept request is in flight (button disabled), rather than pulsing right up to the page reload. */ #invite-accept-btn { background: var(--error); animation: invite-accept-pulse 1.5s ease-in-out infinite; } #invite-accept-btn:hover { background: #8f1c12; } #invite-accept-btn:disabled { animation-play-state: paused; opacity: 0.7; } @keyframes invite-accept-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(180, 35, 24, 0); } } .field { margin-bottom: 14px; } .field label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); } .field input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; } .link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .link-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); background: var(--pill-bg); font-size: 12px; text-align: center; } .link-icon { font-size: 22px; } .pill { display: inline-block; background: var(--pill-bg); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--muted); } /* The public home page (logged-out visitor) -- everything else in this file assumes a logged-in topbar/main layout, so this gets its own full-viewport treatment instead of reusing .card/main. */ .landing { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 20px; text-align: center; } .landing-hero { max-width: 480px; } .landing-hero h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: 0.06em; } .landing-hero .sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; } .landing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .landing-actions a { display: inline-block; padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; } .landing-actions .btn-primary { background: var(--accent); color: #fff; } .landing-actions .btn-primary:hover { background: var(--accent-hover); } .landing-actions .btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); } .landing-actions .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .landing-admin-links { display: flex; gap: 18px; font-size: 12px; } .landing-admin-links a { color: var(--muted); text-decoration: none; } .landing-admin-links a:hover { color: var(--accent); text-decoration: underline; } .kb-search-result { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .kb-search-result:last-child { border-bottom: none; } .kb-search-result-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .kb-search-result-heading strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-search-result p { margin: 0; white-space: pre-wrap; } /* -- Cards, controls (shared look) */ .card { border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; } .toolbar input, .toolbar select, .field input { border-radius: 8px; } button, button[type="submit"] { border-radius: 8px; } .admin-tile:hover { border-color: var(--accent); box-shadow: 0 2px 4px rgba(15, 39, 71, 0.06), 0 12px 26px rgba(15, 39, 71, 0.10); } .org-join-banner, .org-invite-banner { border-radius: 0; } /* -- Logged-out landing page: same navy hero treatment */ main.landing { max-width: none; width: auto; margin: 0; padding: 20px; grid-column: auto; } .landing { background: linear-gradient(115deg, #0f2747 0%, #1a4585 55%, #3b7bd8 100%); color: #fff; } .landing-hero h1 { color: #fff; } .landing-hero .sub { color: rgba(255, 255, 255, 0.86); } .landing-actions .btn-primary { background: var(--ink-orange); } .landing-actions .btn-primary:hover { background: #b85f12; } .landing-actions .btn-secondary { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.4); } .landing-actions .btn-secondary:hover { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: #fff; } .landing-admin-links a { color: rgba(255, 255, 255, 0.7); } .landing-admin-links a:hover { color: #fff; } /* -- Narrow windows: menus drop to a second row, then the sidebar folds behind a Menu button. */ @media (max-width: 1180px) { .header-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; } .header-center { grid-column: 1 / -1; grid-row: 2; padding-left: 240px; } .header-actions { grid-column: 2; grid-row: 1; } } @media (max-width: 860px) { body:has(> .site-header) { grid-template-columns: minmax(0, 1fr); } .header-row { padding: 10px 16px; } .header-row h1 { padding-left: 0; } .header-center { padding-left: 0; } .side-toggle { display: flex; align-items: center; justify-content: space-between; grid-column: 1; margin: 10px 16px 0; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; } .side-toggle:hover { background: var(--pill-bg); } .side-toggle::after { content: "\25BE"; } .side-toggle[aria-expanded="true"]::after { content: "\25B4"; } .sidebar { display: none; grid-column: 1; min-height: 0; margin: 8px 16px 0; border: 1px solid var(--border); border-radius: 10px; } .sidebar.open { display: block; } main { grid-column: 1; padding: 16px; } } /* Quick nav (first header menu, identical in every app): the app you're in is the orange entry. */ .header-tabs .tab-current { background: var(--ink-orange); font-weight: 600; } .header-tabs .tab-current:hover { background: #b85f12; } /* Quick nav sits to the right of the app's own menus, pushed to the right end of the menu row. */ .header-center .quick-nav { margin-left: auto; } /* Header user block (identical in every app): the Log Out pill on top, the person's first name beneath it. */ .user-block { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; line-height: 1.25; font-size: 12.5px; } .user-block .user-name { color: rgba(255, 255, 255, 0.9); font-weight: 600; } /* Log Out: a pill button, white background with a red outline. */ .user-block #logout-link { padding: 4px 14px; background: #fff; border: 1px solid var(--error); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--error); } .user-block #logout-link:hover { background: var(--error); color: #fff; text-decoration: none; } .header-row { min-height: 67px; } @media (min-width: 861px) { .sidebar { min-height: calc(100vh - 67px); } }