/* ========================================================================== Portal CSS - Self-Service Portal Mobile-first, responsive. THEMING ------- Everything visual is routed through CSS custom properties (design tokens) declared in :root below. Three "brand" tokens are injected by the layout template from admin settings: --portal-primary, --portal-accent, --portal-header The rest (surfaces, text, borders, radius, shadows, fonts) have sensible defaults here and are re-skinned in bulk by theme presets, selected via the [data-portal-theme="..."] attribute on (see "Theme presets" near the bottom of this file). Adding a new preset = one attribute block. ========================================================================== */ :root { /* ---- Brand (overridden inline by layout.php from settings) ---- */ --portal-primary: #4361ee; --portal-accent: #2b8a3e; --portal-header: #1e293b; /* ---- Derived brand ---- */ --portal-primary-strong: color-mix(in srgb, var(--portal-primary) 78%, #000); --portal-primary-soft: color-mix(in srgb, var(--portal-primary) 12%, transparent); --portal-primary-tint: color-mix(in srgb, var(--portal-primary) 6%, transparent); --portal-on-primary: #fff; /* Brand color used for body text/links - kept dark enough for contrast on light surfaces (a light brand color falls back to the muted text color). */ --portal-link: var(--portal-primary); /* ---- Page + surfaces ---- */ --portal-bg: #eef1f6; --portal-bg-halo: radial-gradient(1200px 480px at 50% -120px, var(--portal-primary-tint), transparent 70%); --portal-surface: #ffffff; --portal-surface-2: #f8fafc; /* sidebars, related, quiet panels */ --portal-surface-inset: #f1f5f9; /* hovers, table heads, separators-as-fill */ /* ---- Text ---- */ --portal-text: #1e293b; --portal-text-muted: #475569; --portal-text-subtle: #64748b; --portal-text-faint: #94a3b8; /* ---- Borders ---- */ --portal-border: #e2e8f0; --portal-border-strong: #cbd5e1; --portal-border-width: 1px; /* ---- Header / footer text (on the dark header color) ---- */ --portal-header-text: #ffffff; --portal-header-muted: rgba(255,255,255,0.72); --portal-header-hover: rgba(255,255,255,0.12); --portal-footer-text: rgba(255,255,255,0.55); /* ---- Radius scale ---- */ --portal-radius-sm: 0.375rem; --portal-radius: 0.625rem; --portal-radius-lg: 0.875rem; --portal-radius-pill: 999px; /* ---- Shadow scale ---- */ --portal-shadow-sm: 0 1px 3px rgba(15,23,42,0.06); --portal-shadow-md: 0 6px 20px rgba(15,23,42,0.08); --portal-shadow-lg: 0 16px 40px rgba(15,23,42,0.14); --portal-shadow-hero: 0 10px 40px rgba(15,23,42,0.18); /* ---- Typography ---- */ --portal-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --portal-font-heading: var(--portal-font); /* ---- Hero ---- */ --portal-hero-overlay: linear-gradient(135deg, rgba(15,23,42,0.58), rgba(30,41,59,0.42)); } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; /* Override Tabler's anti-jitter rule (html { margin-left: calc(100vw - 100%) }), which shifts the whole page right by one scrollbar width once a viewport scrollbar exists - leaving a gap to the left of the header. Reserve the gutter instead so the layout stays stable without the offset. */ margin-left: 0 !important; scrollbar-gutter: stable; } body { background-color: var(--portal-bg); background-image: var(--portal-bg-halo); background-repeat: no-repeat; background-attachment: fixed; color: var(--portal-text); font-family: var(--portal-font); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .portal-main { flex: 1; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; top: -100%; left: 0; padding: 0.5rem 1rem; background: var(--portal-primary); color: var(--portal-on-primary); font-size: 0.875rem; font-weight: 600; text-decoration: none; z-index: 9999; border-radius: 0 0 var(--portal-radius-sm) 0; transition: top 0.15s; } .skip-link:focus { top: 0; } /* ---------- Header (dark branded) ---------- */ .portal-header { background: var(--portal-header); border-bottom: none; padding: 0 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 18px rgba(15,23,42,0.18); min-height: 58px; } .portal-brand { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; } .portal-brand-logo { height: 26px; width: auto; object-fit: contain; } .portal-brand-name { font-size: 1.1rem; font-weight: 700; color: var(--portal-header-text); white-space: nowrap; letter-spacing: -0.01em; } .portal-nav { flex: 1; } .portal-nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.125rem; flex-wrap: wrap; } .portal-nav-links li a { display: block; padding: 0.45rem 0.875rem; color: var(--portal-header-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; border-radius: var(--portal-radius-sm); transition: color 0.15s, background 0.15s; } .portal-nav-links li a:hover, .portal-nav-links li a.active { color: var(--portal-header-text); background: var(--portal-header-hover); } .portal-lang-picker { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .portal-lang-picker a { padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--portal-header-muted); text-decoration: none; border-radius: var(--portal-radius-sm); border: 1px solid transparent; transition: all 0.15s; } .portal-lang-picker a:hover, .portal-lang-picker a.active { color: var(--portal-header-text); border-color: rgba(255,255,255,0.3); background: var(--portal-header-hover); } /* ---------- Banner ---------- */ .portal-banner { background: var(--portal-primary-soft); border-bottom: 1px solid color-mix(in srgb, var(--portal-primary) 25%, transparent); color: var(--portal-text); font-size: 0.875rem; font-weight: 500; text-align: center; padding: 0.55rem 1rem; } /* ---------- Main content area ---------- */ .portal-main { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem 2.5rem 3rem; /* clip (not hidden) the hero's full-bleed margins. `overflow-x: hidden` forces overflow-y to compute as `auto`, which turned this centered container into its own scroll region - a scrollbar stranded mid-page on wide displays. `clip` contains the bleed without a scroll container. */ overflow-x: clip; } /* ---------- Footer ---------- */ .portal-footer { background: var(--portal-header); border-top: none; padding: 1rem 1rem; text-align: center; color: var(--portal-footer-text); font-size: 0.75rem; } .portal-footer p { margin: 0; } /* ---------- Flash alert styles ---------- */ .alert { padding: 0.75rem 1rem; border-radius: var(--portal-radius); margin-bottom: 1rem; font-size: 0.875rem; font-weight: 500; } .alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .alert-danger, .alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } .alert-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; } .alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; } /* ---------- Announcements strip above hero ---------- */ .portal-announcements-strip { margin: -2rem -2.5rem 0; background: linear-gradient(135deg, #fef3c7, #fde68a); border-bottom: 2px solid #f59e0b; box-shadow: 0 2px 8px rgba(245,158,11,0.15); } .portal-announcements-strip__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 2.5rem; font-size: 0.825rem; color: #92400e; } .portal-announcements-strip__item + .portal-announcements-strip__item { border-top: 1px solid #fde68a; } .portal-announcements-strip__icon { flex-shrink: 0; display: flex; } .portal-announcements-strip__title { font-weight: 700; flex-shrink: 0; } .portal-announcements-strip__title::after { content: "|"; margin: 0 0.5rem; font-weight: 300; opacity: 0.35; } .portal-announcements-strip__text { /* Darkened from #a16207 (3.95:1 on the amber gradient) to meet WCAG AA (4.5:1). */ color: #854d0e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .portal-announcements-strip__date { margin-left: auto; font-size: 0.75rem; /* Darkened from #b45309 (4.03:1) to meet WCAG AA at this small size. */ color: #854d0e; white-space: nowrap; } .portal-announcements-strip__more { text-align: center; padding: 0.35rem 2.5rem; border-top: 1px solid #fde68a; font-size: 0.75rem; } .portal-announcements-strip__more a { color: #92400e; text-decoration: underline; } .portal-announcements-strip + .portal-hero { margin-top: 0; } /* Type variants */ .portal-announcements-strip--info { background: #eff6ff; border-bottom-color: #bfdbfe; } .portal-announcements-strip--info .portal-announcements-strip__item { color: #1e40af; } .portal-announcements-strip--info .portal-announcements-strip__item + .portal-announcements-strip__item, .portal-announcements-strip--info .portal-announcements-strip__more { border-top-color: #bfdbfe; } /* Darkened from #3b82f6/#2563eb (3.4-4.3:1 on #eff6ff) to meet WCAG AA. */ .portal-announcements-strip--info .portal-announcements-strip__text { color: #1e40af; } .portal-announcements-strip--info .portal-announcements-strip__date { color: #1d4ed8; } .portal-announcements-strip--info .portal-announcements-strip__more a { color: #1e40af; } /* ---------- Hero section ---------- */ .portal-hero { margin: -2rem -2.5rem 2.5rem; padding: 2.25rem 2.5rem 2.5rem; background: linear-gradient(150deg, var(--portal-primary) 0%, color-mix(in srgb, var(--portal-primary) 60%, var(--portal-header)) 100%); text-align: center; color: #fff; position: relative; overflow-x: hidden; overflow-y: visible; box-shadow: var(--portal-shadow-hero); } /* Gradient-only hero: layered radial texture + soft vignette for depth */ .portal-hero:not(.portal-hero--image)::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 18% 84%, rgba(255,255,255,0.16) 0%, transparent 52%), radial-gradient(ellipse at 78% 16%, rgba(255,255,255,0.10) 0%, transparent 46%), radial-gradient(ellipse at 50% 120%, rgba(0,0,0,0.22) 0%, transparent 60%); pointer-events: none; } /* Image hero: background element + dark overlay for text contrast */ .portal-hero--image { background: #0f172a; } .portal-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } .portal-hero--image::before { content: ''; position: absolute; inset: 0; background: var(--portal-hero-overlay); pointer-events: none; z-index: 1; } .portal-hero-logo { margin-bottom: 0.85rem; position: relative; z-index: 2; } .portal-hero-logo img { height: 56px; width: auto; object-fit: contain; border-radius: var(--portal-radius); } .portal-hero-title { font-family: var(--portal-font-heading); font-size: 2rem; font-weight: 800; margin: 0 0 0.5rem; line-height: 1.15; position: relative; z-index: 2; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0,0,0,0.12); } .portal-hero-subtitle { font-size: 1.05rem; opacity: 0.9; margin: 0 auto 1.25rem; max-width: 540px; line-height: 1.5; position: relative; z-index: 2; } .portal-hero-search { max-width: 580px; margin: 0 auto; position: relative; z-index: 2; } .portal-hero-search form { display: flex; gap: 0.5rem; align-items: stretch; } .portal-hero-search .portal-search-input { flex: 1; background: #fff; border: none; color: #1e293b; font-size: 1rem; height: 54px; padding: 0.875rem 1.25rem; border-radius: var(--portal-radius); box-shadow: 0 6px 24px rgba(0,0,0,0.14); outline: none; transition: box-shadow 0.2s, transform 0.2s; margin-bottom: 0; } .portal-hero-search .portal-search-input:focus { box-shadow: 0 8px 30px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,255,255,0.55); } .portal-hero-search .portal-search-input::placeholder { color: #94a3b8; } .portal-hero-search .portal-search-btn { background: #fff; border: none; color: var(--portal-primary); font-size: 1rem; font-weight: 700; padding: 0 1.85rem; height: 54px; border-radius: var(--portal-radius); cursor: pointer; white-space: nowrap; transition: background 0.15s, transform 0.1s, box-shadow 0.15s; box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .portal-hero-search .portal-search-btn:hover { background: #f8fafc; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.24); } /* Hero action links (Submit Feedback, Check Status) */ .portal-hero-actions { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; margin-bottom: 0.5rem; position: relative; z-index: 3; } .portal-hero-action { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.35rem; border-radius: var(--portal-radius); font-size: 0.85rem; font-weight: 600; color: #fff; text-decoration: none; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.15s, transform 0.1s, box-shadow 0.15s; } .portal-hero-action:hover { background: rgba(255,255,255,0.26); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); } /* Primary CTA in the hero: solid white, brand-colored text */ .portal-hero-action--primary { background: #fff; color: var(--portal-primary); border-color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .portal-hero-action--primary:hover { background: #f8fafc; color: var(--portal-primary-strong); } /* ---------- Typeahead dropdown ---------- */ .portal-typeahead { position: relative; flex: 1; } .portal-typeahead-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--portal-surface); border-radius: var(--portal-radius); box-shadow: var(--portal-shadow-lg); z-index: 10; max-height: 320px; overflow-y: auto; text-align: left; } .portal-typeahead-dropdown.is-open { display: block; } .portal-typeahead-item { display: block; padding: 0.75rem 1rem; text-decoration: none; color: var(--portal-text); border-bottom: 1px solid var(--portal-surface-inset); transition: background 0.1s; } .portal-typeahead-item:last-child { border-bottom: none; } .portal-typeahead-item:hover, .portal-typeahead-item.is-active { background: var(--portal-surface-inset); color: var(--portal-text); } .portal-typeahead-item-title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; } .portal-typeahead-item-cat { font-size: 0.75rem; color: var(--portal-text-subtle); margin-top: 0.125rem; } .portal-typeahead-empty { padding: 1rem; text-align: center; color: var(--portal-text-faint); font-size: 0.85rem; } /* ---------- Section spacing ---------- */ .portal-section { margin-bottom: 2.5rem; } /* ---------- Hub layout ---------- */ .portal-hub { display: flex; gap: 2rem; align-items: flex-start; } .portal-hub-main { flex: 1; min-width: 0; } .portal-sidebar { width: 340px; flex-shrink: 0; } /* ---------- Search ---------- */ .portal-search { margin-bottom: 2rem; } .portal-search form { display: flex; gap: 0.5rem; } .portal-search-input { flex: 1; padding: 0.75rem 1rem; border: 2px solid var(--portal-border); border-radius: var(--portal-radius); font-size: 1rem; color: var(--portal-text); background: var(--portal-surface); transition: border-color 0.15s, box-shadow 0.15s; outline: none; } .portal-search-input:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 3px var(--portal-primary-soft); } .portal-search-btn { padding: 0.75rem 1.25rem; background: var(--portal-primary); color: var(--portal-on-primary); border: none; border-radius: var(--portal-radius); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; } .portal-search-btn:hover { opacity: 0.9; } /* ---------- Category grid ---------- */ .portal-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; } .portal-category-card { background: var(--portal-surface); border: var(--portal-border-width) solid var(--portal-border); border-radius: var(--portal-radius-lg); padding: 1.75rem 1.25rem; text-decoration: none; color: var(--portal-text); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; box-shadow: var(--portal-shadow-sm); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .portal-category-card:hover { box-shadow: var(--portal-shadow-md); transform: translateY(-3px); border-color: color-mix(in srgb, var(--portal-primary) 35%, var(--portal-border)); color: var(--portal-text); } .portal-category-icon { width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.75rem; line-height: 1; margin-bottom: 0.35rem; background: var(--portal-primary-soft); color: var(--portal-primary); border-radius: var(--portal-radius-pill); } .portal-category-name { font-size: 1rem; font-weight: 600; color: var(--portal-text); } .portal-category-desc { font-size: 0.8rem; color: var(--portal-text-muted); line-height: 1.45; } .portal-category-count { font-size: 0.75rem; color: var(--portal-text-subtle); margin-top: auto; padding-top: 0.25rem; } /* ---------- Action buttons ---------- */ .portal-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.5rem; } .portal-action-btn { padding: 0.875rem 1.75rem; border-radius: var(--portal-radius); font-size: 0.95rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: transform 0.15s, box-shadow 0.15s; } .portal-action-btn:hover { transform: translateY(-2px); box-shadow: var(--portal-shadow-md); } .portal-action-primary { background: var(--portal-primary); color: var(--portal-on-primary); } .portal-action-secondary { background: var(--portal-surface); color: var(--portal-text-muted); border: 1px solid var(--portal-border-strong); box-shadow: var(--portal-shadow-sm); } /* ---------- Announcements ---------- */ .portal-announcements { margin-bottom: 1.5rem; } .portal-announcements h2 { font-size: 0.875rem; font-weight: 700; color: var(--portal-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } /* ---------- Service alerts status bar ---------- */ .portal-alerts-status { border-radius: var(--portal-radius-lg); margin-bottom: 2rem; font-size: 0.875rem; } /* Clear state - subtle green bar */ .portal-alerts-status--clear { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 0.5rem; color: #166534; font-weight: 500; } .portal-alerts-status--clear svg { flex-shrink: 0; color: #16a34a; } /* Active alerts state - amber container */ .portal-alerts-status--active { background: #fffbeb; border: 1px solid #fde68a; overflow: hidden; } .portal-alerts-status-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.25rem; background: #fef3c7; border-bottom: 1px solid #fde68a; color: #92400e; } .portal-alerts-status-header svg { flex-shrink: 0; color: #d97706; } .portal-alerts-status-header strong { font-size: 0.85rem; font-weight: 700; } .portal-alerts-status-list { padding: 0.75rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .portal-service-alert { background: var(--portal-surface); border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 0 var(--portal-radius) var(--portal-radius) 0; padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--portal-text-muted); } .portal-service-alert-title { font-weight: 600; color: #92400e; margin-bottom: 0.125rem; } .portal-service-alert-desc { color: #78350f; font-size: 0.8rem; line-height: 1.5; } /* ---------- Service status region (announcements + live alerts) ---------- */ .portal-status > * + * { margin-top: 0.75rem; } .portal-status:not(:empty) { margin-bottom: 1.5rem; } /* Live-alerts host is always in the DOM for HTMX; collapse it when empty so it adds no gap before content has loaded. */ #portal-service-alerts-home:empty { display: none; } #portal-service-alerts-home > * + * { margin-top: 0.5rem; } /* The band owns its own spacing; let inner boxes drop their stock margins. */ .portal-status .portal-alerts-status, .portal-status .portal-announcements-strip { margin-bottom: 0; } /* ---------- Survey invitation strip ---------- A FLAT, full-width band inside the status region, matching the announcement bar (same full-bleed + gutter) so it reads as a second announcement stacked flush below any real announcements/alerts - not a floating card. Accent-tinted with a bottom hairline. Dismiss is client-side (localStorage); see home.php. */ .portal-survey-banner { display: flex; align-items: center; gap: 0.75rem; margin: 0 -2.5rem; /* full-bleed, matching .portal-announcements-strip */ padding: 0.55rem 2.5rem; /* content on the page gutter, like the announcement text */ background: color-mix(in srgb, var(--portal-accent) 10%, var(--portal-surface)); border-bottom: 1px solid color-mix(in srgb, var(--portal-accent) 28%, transparent); color: var(--portal-text); } .portal-survey-banner[hidden] { display: none; } /* Flush below the announcements/alerts above (drop the status band's inter-item gap). */ .portal-status > .portal-survey-banner { margin-top: 0; } /* When a VISIBLE survey strip is the band's tail, sit the hero flush beneath it: the band's bottom margin would gap it and the hero's -2rem pull would overlap it. Scoped to :not([hidden]) so a dismissed strip restores the normal snug. */ .portal-status:has(.portal-survey-banner:not([hidden])) { margin-bottom: 0; } .portal-status:has(.portal-survey-banner:not([hidden])) + .portal-hero { margin-top: 0; } .portal-survey-banner__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--portal-accent); color: #fff; } .portal-survey-banner__text { display: flex; align-items: baseline; gap: 0.1rem 0.5rem; flex-wrap: wrap; min-width: 0; } .portal-survey-banner__text b { font-size: 0.9rem; font-weight: 650; } .portal-survey-banner__text span { font-size: 0.82rem; color: var(--portal-text-muted); } .portal-survey-banner__cta { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; white-space: nowrap; background: var(--portal-accent); color: #fff; font-weight: 600; font-size: 0.82rem; padding: 0.4rem 0.85rem; border-radius: 8px; text-decoration: none; } .portal-survey-banner__cta:hover { background: color-mix(in srgb, var(--portal-accent) 85%, #000); color: #fff; } .portal-survey-banner__dismiss { flex-shrink: 0; border: 0; background: transparent; cursor: pointer; color: var(--portal-text-muted); width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; } .portal-survey-banner__dismiss:hover { background: color-mix(in srgb, var(--portal-text) 8%, transparent); } /* Keep it to a single line on small screens: drop the sub-text. */ @media (max-width: 640px) { .portal-survey-banner__text span { display: none; } } /* Match the narrower full-bleed + gutter the announcement strip uses at 480. */ @media (max-width: 480px) { .portal-survey-banner { margin: 0 -0.75rem; padding: 0.5rem 0.75rem; } } /* ---------- Action hub grid ---------- */ .portal-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .portal-section-head .portal-section-title { margin-bottom: 0; } .portal-section-link { font-size: 0.85rem; font-weight: 600; color: var(--portal-primary); text-decoration: none; white-space: nowrap; } .portal-section-link:hover { text-decoration: underline; } .portal-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .portal-hub-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--portal-surface); border: var(--portal-border-width) solid var(--portal-border); border-radius: var(--portal-radius-lg); box-shadow: var(--portal-shadow-sm); text-decoration: none; color: var(--portal-text); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .portal-hub-card:hover { box-shadow: var(--portal-shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--portal-primary) 35%, var(--portal-border)); color: var(--portal-text); } .portal-hub-card-icon { flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; background: var(--portal-primary-soft); color: var(--portal-primary); border-radius: var(--portal-radius-pill); } .portal-hub-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .portal-hub-card-title { font-size: 0.98rem; font-weight: 600; color: var(--portal-text); } .portal-hub-card-desc { font-size: 0.8rem; color: var(--portal-text-muted); line-height: 1.4; } .portal-hub-card-arrow { flex-shrink: 0; color: var(--portal-text-faint); transition: transform 0.2s, color 0.2s; } .portal-hub-card:hover .portal-hub-card-arrow { color: var(--portal-primary); transform: translateX(2px); } /* Chat entry: a hub card that opens the live chat widget instead of navigating. It renders as a