/* ========================================================================== 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%; } 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; overflow-x: hidden; } /* ---------- 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 { color: #a16207; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .portal-announcements-strip__date { margin-left: auto; font-size: 0.75rem; color: #b45309; 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; } .portal-announcements-strip--info .portal-announcements-strip__text { color: #3b82f6; } .portal-announcements-strip--info .portal-announcements-strip__date { color: #2563eb; } .portal-announcements-strip--info .portal-announcements-strip__more a { color: #1e40af; } /* ---------- Hero section ---------- */ .portal-hero { margin: -2rem -2.5rem 2.5rem; padding: 3rem 2.5rem 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: 1.1rem; position: relative; z-index: 2; } .portal-hero-logo img { height: 80px; width: auto; object-fit: contain; border-radius: var(--portal-radius); } .portal-hero-title { font-family: var(--portal-font-heading); font-size: 2.35rem; font-weight: 800; margin: 0 0 0.6rem; 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 2rem; 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; } /* ---------- Knowledge base styles ---------- */ .kb-breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8rem; color: var(--portal-text-muted); margin-bottom: 1.5rem; flex-wrap: wrap; } /* Fixed dark slate (not the brand var): breadcrumb links sit on the gray page background where a light brand color can fall under 4.5:1 (WCAG 1.4.3). */ .kb-breadcrumb a { color: var(--portal-text-muted); text-decoration: underline; } .kb-breadcrumb a:hover { text-decoration: underline; } .kb-breadcrumb-sep { color: var(--portal-text-faint); } .kb-article { background: var(--portal-surface); border: var(--portal-border-width) solid var(--portal-border-strong); border-radius: var(--portal-radius-lg); padding: 2rem; max-width: 760px; box-shadow: var(--portal-shadow-sm); } .kb-article h1 { font-size: 1.5rem; font-weight: 700; color: var(--portal-text); margin-bottom: 0.5rem; line-height: 1.3; } .kb-article-meta { font-size: 0.8rem; color: var(--portal-text-subtle); margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--portal-surface-inset); } .kb-article-body { color: var(--portal-text-muted); line-height: 1.7; font-size: 0.95rem; } .kb-article-body h2, .kb-article-body h3, .kb-article-body h4 { color: var(--portal-text); font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; } .kb-article-body h2 { font-size: 1.15rem; } .kb-article-body h3 { font-size: 1rem; } .kb-article-body h4 { font-size: 0.95rem; } .kb-article-body p { margin-bottom: 1rem; } .kb-article-body ul, .kb-article-body ol { padding-left: 1.5rem; margin-bottom: 1rem; } .kb-article-body li { margin-bottom: 0.25rem; } .kb-article-body a { color: var(--portal-link); } .kb-article-body blockquote { border-left: 3px solid var(--portal-primary); margin: 1rem 0; padding: 0.5rem 1rem; background: var(--portal-surface-2); color: var(--portal-text-muted); font-style: italic; } .kb-article-body pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: var(--portal-radius); overflow-x: auto; font-size: 0.85rem; margin-bottom: 1rem; } .kb-article-body code { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.875em; } .kb-callout { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--portal-radius); padding: 0.875rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; color: #1e40af; } .kb-image { margin: 1.25rem 0; text-align: center; } .kb-image img { max-width: 100%; border-radius: var(--portal-radius); border: 1px solid var(--portal-border); } .kb-image figcaption { font-size: 0.8rem; color: var(--portal-text-subtle); margin-top: 0.35rem; font-style: italic; } .kb-article-body img { max-width: 100%; height: auto; border-radius: var(--portal-radius); } .kb-article-body figure { margin: 1.25rem 0; text-align: center; } .kb-article-body figure.image { display: inline-block; } .kb-article-body figcaption { font-size: 0.8rem; color: var(--portal-text-subtle); margin-top: 0.35rem; font-style: italic; } .kb-article-body table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.875rem; } .kb-article-body th, .kb-article-body td { border: 1px solid var(--portal-border); padding: 0.5rem 0.75rem; text-align: left; } .kb-article-body th { background: var(--portal-surface-inset); font-weight: 600; color: var(--portal-text); } .kb-article-body hr { border: none; border-top: 1px solid var(--portal-border); margin: 1.5rem 0; } /* ---------- KB article list (category/search) ---------- */ .kb-article-list { display: flex; flex-direction: column; gap: 0.75rem; } .kb-article-item { background: var(--portal-surface); border: var(--portal-border-width) solid var(--portal-border-strong); border-radius: var(--portal-radius); padding: 1rem 1.25rem; text-decoration: none; display: block; box-shadow: var(--portal-shadow-sm); transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; } .kb-article-item:hover { box-shadow: var(--portal-shadow-md); border-color: var(--portal-primary); transform: translateY(-1px); } .kb-article-item-title { font-size: 0.9rem; font-weight: 600; color: var(--portal-link); margin-bottom: 0.25rem; } .kb-article-item-excerpt { font-size: 0.8rem; color: var(--portal-text-muted); line-height: 1.5; margin-bottom: 0.35rem; } .kb-article-item-meta { font-size: 0.75rem; color: var(--portal-text-subtle); } /* ---------- Search results ---------- */ .kb-search-header { margin-bottom: 1.5rem; } .kb-search-header h1 { font-size: 1.25rem; font-weight: 700; color: var(--portal-text); margin-bottom: 0.5rem; } .kb-search-form { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .kb-no-results { text-align: center; padding: 2.5rem 1rem; color: var(--portal-text-muted); } .kb-no-results p { margin-bottom: 1rem; font-size: 0.9rem; } /* ---------- Related articles sidebar ---------- */ .kb-related { background: var(--portal-surface-2); border: var(--portal-border-width) solid var(--portal-border-strong); border-radius: var(--portal-radius-lg); padding: 1.25rem; } .kb-related h3 { font-size: 0.8rem; font-weight: 700; color: var(--portal-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .kb-related-list { list-style: none; padding: 0; margin: 0; } .kb-related-list li { padding: 0.375rem 0; border-bottom: 1px solid var(--portal-border); } .kb-related-list li:last-child { border-bottom: none; } .kb-related-list a { font-size: 0.85rem; color: var(--portal-link); text-decoration: none; line-height: 1.4; } .kb-related-list a:hover { text-decoration: underline; } /* ---------- CTA blocks ---------- */ .kb-cta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--portal-surface-inset); text-align: center; } .kb-cta p { font-size: 0.875rem; color: var(--portal-text-muted); margin-bottom: 0.75rem; } /* ---------- Section headings ---------- */ .portal-section-title { font-family: var(--portal-font-heading); font-size: 1.15rem; font-weight: 700; color: var(--portal-text); margin-bottom: 1rem; letter-spacing: -0.01em; } /* ---------- Sidebar widget ---------- */ .portal-sidebar-widget { background: var(--portal-surface); border: var(--portal-border-width) solid var(--portal-border-strong); border-radius: var(--portal-radius-lg); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--portal-shadow-sm); } .portal-sidebar-widget h3 { font-size: 0.8rem; font-weight: 700; color: var(--portal-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } /* ---------- Recent articles list ---------- */ .portal-recent-list { list-style: none; padding: 0; margin: 0; } .portal-recent-list li { padding: 0.375rem 0; border-bottom: 1px solid var(--portal-surface-inset); } .portal-recent-list li:last-child { border-bottom: none; } .portal-recent-list a { font-size: 0.85rem; color: var(--portal-link); text-decoration: none; line-height: 1.4; } .portal-recent-list a:hover { text-decoration: underline; } /* ---------- Utility link ---------- */ .portal-link { color: var(--portal-link); text-decoration: none; font-weight: 500; font-size: 0.875rem; } .portal-link:hover { text-decoration: underline; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .portal-hub { flex-direction: column; } .portal-sidebar { width: 100%; } .portal-header { padding: 0 1rem; gap: 0.5rem; } .portal-nav-links { gap: 0; } .portal-categories { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .portal-actions { flex-direction: column; align-items: stretch; } .portal-action-btn { justify-content: center; } .kb-article { padding: 1.25rem; } .portal-announcements-strip { margin: -2rem -2.5rem 0; } .portal-announcements-strip__item { padding: 0.5rem 1.5rem; } .portal-hero { margin: -2rem -2.5rem 2rem; padding: 2.25rem 1.5rem 2.25rem; } .portal-hero-logo img { height: 64px; } .portal-hero-title { font-size: 1.8rem; } .portal-hero-subtitle { font-size: 0.95rem; } .portal-announcements-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .portal-brand-name { font-size: 0.875rem; } .portal-nav-links li a { padding: 0.25rem 0.5rem; font-size: 0.8rem; } .portal-categories { grid-template-columns: repeat(2, 1fr); } .portal-main { padding: 1rem 0.75rem 2rem; } .portal-announcements-strip { margin: -1rem -0.75rem 0; } .portal-announcements-strip__item { padding: 0.4rem 0.75rem; font-size: 0.775rem; flex-wrap: wrap; } .portal-announcements-strip__date { margin-left: 0; width: 100%; } .portal-hero { margin: -1rem -0.75rem 1.5rem; padding: 2rem 1rem 1.75rem; } .portal-hero-logo img { height: 56px; } .portal-hero-title { font-size: 1.55rem; } .portal-hero-search form { flex-direction: column; } .portal-hero-search .portal-search-input { padding: 0.75rem 1rem; font-size: 16px; } .portal-hero-search .portal-search-btn { padding: 0.85rem 1rem; height: auto; } .portal-category-card { padding: 1.25rem 1rem; } .portal-category-icon { width: 48px; height: 48px; font-size: 1.5rem; } } /* ---------- Forms (feedback form, lookup, status reply) ---------- */ .portal-main label { display: block; font-weight: 500; margin-bottom: 0.25rem; font-size: 0.875rem; color: var(--portal-text); } .portal-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .portal-main select, .portal-main textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--portal-border-strong); border-radius: var(--portal-radius-sm); font-size: 0.9rem; margin-bottom: 1rem; font-family: inherit; color: var(--portal-text); background: var(--portal-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .portal-main input:focus, .portal-main select:focus, .portal-main textarea:focus { outline: none; border-color: var(--portal-primary); box-shadow: 0 0 0 3px var(--portal-primary-soft); } .portal-main input[type="checkbox"] { width: auto; margin-right: 0.5rem; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 0.55rem 1rem; border: none; border-radius: var(--portal-radius-sm); font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--portal-text-muted); background: var(--portal-surface-inset); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .btn:hover:not(:disabled) { background: var(--portal-border); transform: translateY(-1px); box-shadow: var(--portal-shadow-sm); } .btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; } .btn-primary { background: var(--portal-primary); color: var(--portal-on-primary); } .btn-primary:hover:not(:disabled) { background: var(--portal-primary-strong); transform: translateY(-1px); box-shadow: var(--portal-shadow-sm); } /* ---------- Tabler bridge ---------- Sub-pages (trip-planner, rider-alerts, account, my-submissions) use a few Tabler utility classes. Form fields/labels are already covered by the .portal-main element rules above; muted text needs a token override so it stays legible on dark/warm/contrast themes. */ .portal-main .text-secondary { color: var(--portal-text-subtle) !important; } /* ---------- File Upload Area ---------- */ .file-upload-area { border: 2px dashed var(--portal-border-strong); border-radius: var(--portal-radius); cursor: pointer; margin-bottom: 1rem; transition: border-color 0.15s ease, background-color 0.15s ease; } .file-upload-area:hover, .file-upload-area.drag-over { border-color: var(--portal-primary); background: var(--portal-primary-tint); } /* ---------- Generic card (shared portal surface primitive) ---------- Used across many portal pages (status, trip-planner, account, lookup, verify, my-submissions, rider-alerts). Defined once here so every page gets a consistent, theme-aware card. */ .portal-card { background: var(--portal-surface); border: var(--portal-border-width) solid var(--portal-border); border-radius: var(--portal-radius-lg); box-shadow: var(--portal-shadow-md); padding: 1.75rem; margin-bottom: 1.5rem; } /* ---------- Form card (feedback form, centered content) ---------- */ .portal-form-card { max-width: 640px; margin: 0 auto; background: var(--portal-surface); border: var(--portal-border-width) solid var(--portal-border); border-radius: var(--portal-radius-lg); box-shadow: var(--portal-shadow-md); padding: 2rem; } .portal-form-card h2 { font-family: var(--portal-font-heading); font-size: 1.35rem; font-weight: 700; color: var(--portal-text); letter-spacing: -0.01em; } /* ---------- Mobile form optimizations ---------- */ @media (max-width: 640px) { .portal-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .portal-main select, .portal-main textarea { padding: 0.625rem 0.75rem; font-size: 16px; } .portal-main select { min-height: 44px; } .portal-main label { font-size: 0.9rem; margin-bottom: 0.35rem; } .btn { min-height: 44px; padding: 0.625rem 1rem; font-size: 0.95rem; } .portal-form-card, .portal-card { padding: 1.25rem; } } /* ========================================================================== Theme presets -------------------------------------------------------------------------- Each preset re-skins the shell tokens (surfaces, text, borders, radius, shadows, font). The three brand tokens (--portal-primary/-accent/-header) are intentionally NOT touched here - they stay under the admin color pickers, so any preset combines with the agency's brand colors. Selected via in layout.php. Keep the KEY list in sync with PortalTheme::PRESETS (PHP) for the admin picker/validation. ========================================================================== */ /* --- Rounded: soft, friendly, generous corners + softer shadows --- */ [data-portal-theme="rounded"] { --portal-bg: #eef2f9; --portal-surface: #ffffff; --portal-surface-2: #f5f8fd; --portal-surface-inset: #eef3fa; --portal-border: #e6ecf5; --portal-border-strong: #d6deea; --portal-radius-sm: 0.625rem; --portal-radius: 1rem; --portal-radius-lg: 1.5rem; --portal-shadow-sm: 0 2px 6px rgba(15,23,42,0.05); --portal-shadow-md: 0 10px 28px rgba(15,23,42,0.09); --portal-shadow-lg: 0 20px 48px rgba(15,23,42,0.14); } /* --- Flat: crisp, square, hairline borders, minimal shadow --- */ [data-portal-theme="flat"] { --portal-bg: #f4f5f7; --portal-bg-halo: none; --portal-surface: #ffffff; --portal-surface-2: #fafbfc; --portal-surface-inset: #f1f3f5; --portal-border: #dde1e6; --portal-border-strong: #c7ccd3; --portal-radius-sm: 0.125rem; --portal-radius: 0.25rem; --portal-radius-lg: 0.3125rem; --portal-radius-pill: 0.3125rem; --portal-shadow-sm: none; --portal-shadow-md: 0 1px 0 rgba(15,23,42,0.04); --portal-shadow-lg: 0 4px 16px rgba(15,23,42,0.08); --portal-shadow-hero: none; } /* --- Warm: cream surfaces, warm neutrals --- */ [data-portal-theme="warm"] { --portal-bg: #f6f1e9; --portal-bg-halo: radial-gradient(1200px 480px at 50% -120px, color-mix(in srgb, var(--portal-primary) 8%, transparent), transparent 70%); --portal-surface: #fffdf8; --portal-surface-2: #f8f2e8; --portal-surface-inset: #f1e9da; --portal-text: #3a322a; --portal-text-muted: #6b5f4f; --portal-text-subtle: #897a64; --portal-text-faint: #b3a48a; --portal-border: #e9ddc8; --portal-border-strong: #ddcdb0; --portal-radius-lg: 1rem; --portal-font: "Iowan Old Style", "Palatino Linotype", "Hoefler Text", Georgia, Cambria, "Times New Roman", serif; --portal-font-heading: var(--portal-font); } /* --- High Contrast: accessibility-forward, strong borders --- */ [data-portal-theme="contrast"] { --portal-bg: #ffffff; --portal-bg-halo: none; --portal-surface: #ffffff; --portal-surface-2: #f5f5f5; --portal-surface-inset: #ebebeb; --portal-text: #0a0a0a; --portal-text-muted: #1f1f1f; --portal-text-subtle: #383838; --portal-text-faint: #555555; --portal-border: #6b7280; --portal-border-strong: #374151; --portal-border-width: 2px; --portal-radius-sm: 0.375rem; --portal-radius: 0.5rem; --portal-radius-lg: 0.625rem; --portal-shadow-sm: none; --portal-shadow-md: 0 0 0 1px rgba(0,0,0,0.08); --portal-shadow-lg: 0 8px 24px rgba(0,0,0,0.2); } /* --- Midnight: dark surfaces, light text (admin-selected dark theme) --- */ [data-portal-theme="midnight"] { --portal-bg: #0b1120; --portal-bg-halo: radial-gradient(1200px 520px at 50% -140px, color-mix(in srgb, var(--portal-primary) 22%, transparent), transparent 72%); --portal-surface: #121a2c; --portal-surface-2: #0f1626; --portal-surface-inset: #1c2740; --portal-text: #e7ecf5; --portal-text-muted: #aeb9cc; --portal-text-subtle: #8693aa; --portal-text-faint: #64718a; --portal-border: #25324d; --portal-border-strong: #32425f; --portal-shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --portal-shadow-md: 0 8px 24px rgba(0,0,0,0.5); --portal-shadow-lg: 0 18px 44px rgba(0,0,0,0.6); --portal-shadow-hero: 0 16px 48px rgba(0,0,0,0.55); /* Brand color may be dark; on dark surfaces link/title text needs lift. */ --portal-link: color-mix(in srgb, var(--portal-primary) 65%, #ffffff); --portal-primary-soft: color-mix(in srgb, var(--portal-primary) 26%, transparent); --portal-primary-tint: color-mix(in srgb, var(--portal-primary) 14%, transparent); } /* Midnight: lift the brand-tinted category-icon chip so emoji read on dark */ [data-portal-theme="midnight"] .portal-category-icon { color: color-mix(in srgb, var(--portal-primary) 60%, #ffffff); } /* ========================================================================== Font override -------------------------------------------------------------------------- Optional, independent of the theme preset. Set via . Placed AFTER the preset blocks so an explicit font wins over a preset's own --portal-font (e.g. choosing "Modern Sans" on the Warm theme). System-font stacks only - no webfont downloads. Keep keys in sync with PortalTheme::FONTS. ========================================================================== */ [data-portal-font="sans"] { --portal-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; } [data-portal-font="rounded"] { --portal-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Quicksand", "Segoe UI", system-ui, sans-serif; } [data-portal-font="humanist"] { --portal-font: "Segoe UI", "Trebuchet MS", "Lucida Grande", Verdana, Geneva, sans-serif; } [data-portal-font="serif"] { --portal-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, "Times New Roman", serif; } /* Reduced motion: honor user preference for the lift/transition flourishes */ @media (prefers-reduced-motion: reduce) { .portal-category-card, .kb-article-item, .portal-action-btn, .portal-hero-action, .btn { transition: none; } .portal-category-card:hover, .kb-article-item:hover, .portal-action-btn:hover, .portal-hero-action:hover, .btn:hover:not(:disabled) { transform: none; } } /* ========================================================================== "Learn about our system" - system map, route list, route pages (.psys) ========================================================================== */ .psys-head { margin-bottom: 1.25rem; } .psys-head h1 { margin: 0 0 .35rem; } .psys-sub { color: var(--portal-text-muted); margin: 0; max-width: 60ch; } .psys-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; } .psys-stat { display: flex; flex-direction: column; line-height: 1.1; } .psys-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--portal-text); } .psys-stat-label { font-size: .8rem; color: var(--portal-text-subtle); text-transform: uppercase; letter-spacing: .04em; } .psys-quicklinks { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; } .psys-quicklink { display: inline-block; padding: .45rem .9rem; border-radius: var(--portal-radius-pill); background: var(--portal-primary-soft); color: var(--portal-link); font-weight: 600; font-size: .9rem; text-decoration: none; } .psys-quicklink:hover { background: var(--portal-primary); color: var(--portal-on-primary); } .psys-map-card { padding: 0; overflow: hidden; } .psys-map { height: 420px; width: 100%; background: var(--portal-surface-inset); } .psys-map-fallback { padding: 1rem; margin: 0; color: var(--portal-text-subtle); } .psys-section-title { margin: 1.5rem 0 .75rem; font-size: 1.15rem; } .psys-empty { color: var(--portal-text-subtle); } .psys-routes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; } .psys-route-link { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; background: var(--portal-surface); border: var(--portal-border-width) solid var(--portal-border); border-radius: var(--portal-radius); text-decoration: none; color: var(--portal-text); } .psys-route-link:hover { border-color: var(--portal-primary); box-shadow: var(--portal-shadow-sm); } .psys-route-badge { flex: 0 0 auto; min-width: 2.25rem; height: 2.25rem; padding: 0 .4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--portal-radius-sm); font-weight: 700; background: var(--portal-primary); color: var(--portal-on-primary); } .psys-route-badge--lg { min-width: 3rem; height: 3rem; font-size: 1.25rem; } .psys-route-name { flex: 1 1 auto; min-width: 0; } .psys-route-name strong { display: block; font-weight: 600; } .psys-route-go { color: var(--portal-text-faint); font-size: 1.4rem; line-height: 1; } .psys-back { display: inline-block; margin-bottom: .9rem; color: var(--portal-link); text-decoration: none; font-weight: 600; } .psys-route-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .psys-route-titles { flex: 1 1 auto; min-width: 0; } .psys-route-titles h1 { margin: 0; font-size: 1.4rem; } .psys-route-sub { margin: .15rem 0 0; color: var(--portal-text-subtle); } .psys-report-btn { margin-left: auto; padding: .55rem 1rem; border-radius: var(--portal-radius); background: var(--portal-primary); color: var(--portal-on-primary); font-weight: 600; text-decoration: none; white-space: nowrap; } .psys-report-btn:hover { background: var(--portal-primary-strong); } .psys-freq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .psys-freq-day h3 { margin: 0 0 .4rem; font-size: 1rem; } .psys-freq-row { padding: .4rem 0; border-top: 1px solid var(--portal-border); font-size: .9rem; } .psys-freq-row:first-of-type { border-top: 0; } .psys-freq-dir { display: block; font-weight: 600; } .psys-freq-times { color: var(--portal-text-muted); } .psys-freq-count { display: block; color: var(--portal-text-subtle); font-size: .82rem; } .psys-dir-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; } .psys-dir-tab { padding: .4rem .85rem; border-radius: var(--portal-radius-pill); border: var(--portal-border-width) solid var(--portal-border); background: var(--portal-surface); color: var(--portal-text-muted); font-weight: 600; font-size: .88rem; cursor: pointer; } .psys-dir-tab.is-active { background: var(--portal-primary); color: var(--portal-on-primary); border-color: var(--portal-primary); } .psys-stop-list { list-style: none; margin: 0; padding: 0; } .psys-stop { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .25rem .5rem 1.25rem; border-left: 2px solid var(--portal-border-strong); position: relative; } .psys-stop::before { content: ""; position: absolute; left: -5px; top: .9rem; width: 8px; height: 8px; border-radius: 50%; background: var(--portal-surface); border: 2px solid var(--portal-primary); } .psys-stop-name { flex: 1 1 auto; } .psys-stop-code { color: var(--portal-text-subtle); font-size: .82rem; font-variant-numeric: tabular-nums; } .psys-howto-section { margin-bottom: 1rem; } .psys-howto-section h2 { margin: 0 0 .4rem; font-size: 1.1rem; } .psys-howto-section p { margin: 0; color: var(--portal-text-muted); }