/* Shared Portal Stylesheet — v1 Used by all standalone public-facing pages (speaker portal, supervisor review, attendance, my-attendance, feedback, topic suggestions, etc.) Reference design: suggest_topics.html */ /* ── CSS Variables (dark mode support) ── */ :root { --portal-bg: #f8fafc; --portal-card-bg: #ffffff; --portal-border: #e2e8f0; --portal-text: #1e293b; --portal-text-muted: #64748b; --portal-text-light: #94a3b8; /* Indigo accent — unified with marketing surfaces (landing/login/join). */ --portal-primary: #4f46e5; --portal-primary-hover: #3730a3; --portal-success: #16a34a; --portal-success-bg: rgba(22,163,74,0.08); --portal-error: #dc2626; --portal-error-bg: rgba(220,38,38,0.08); --portal-warning: #d97706; --portal-warning-bg: rgba(217,119,6,0.08); --portal-info-bg: rgba(79,70,229,0.06); --portal-input-bg: #ffffff; --portal-focus-ring: rgba(79,70,229,0.12); /* ── Form system token overrides ── */ --f-bg: var(--portal-input-bg); --f-border: var(--portal-border); --f-text: var(--portal-text); --f-placeholder: var(--portal-text-light); --f-primary: var(--portal-primary); --f-primary-bg: var(--portal-info-bg); --f-focus-shadow: var(--portal-focus-ring); --f-card-bg: var(--portal-card-bg); --f-option-hover-bg: var(--portal-info-bg); --f-option-hover-col: var(--portal-primary); --f-padding: 10px 14px; } @media (prefers-color-scheme: dark) { :root { --portal-bg: #0f172a; --portal-card-bg: #1e293b; --portal-border: #334155; --portal-text: #e2e8f0; --portal-text-muted: #94a3b8; --portal-text-light: #64748b; --portal-primary: #a5b4fc; --portal-primary-hover: #818cf8; --portal-success: #22c55e; --portal-success-bg: rgba(34,197,94,0.1); --portal-error: #f87171; --portal-error-bg: rgba(248,113,113,0.1); --portal-warning: #fbbf24; --portal-warning-bg: rgba(251,191,36,0.1); --portal-info-bg: rgba(79,70,229,0.12); --portal-input-bg: #0f172a; --portal-focus-ring: rgba(79,70,229,0.25); --f-focus-shadow: rgba(79,70,229,0.25); } } /* ── Base ── */ body.portal-body { background: var(--portal-bg); color: var(--portal-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; line-height: 1.6; } /* ── Container ── */ .portal-container { max-width: 600px; margin: 40px auto; padding: 0 20px; } .portal-container--narrow { max-width: 540px; } .portal-container--wide { max-width: 700px; } /* ── Branded portal header ── Slim dark-indigo gradient strip carries the marketing identity into token-based portals (speaker, supervisor, feedback, attendance, date-selection, profile). Same gradient as the landing/join hero, condensed to a card-shaped header at the top of the portal page. IMPORTANT: scoped to body.portal-body so the rule only applies on pages that opt in via the .portal-body class. Topics portal (topics_portal.html) uses a plain AND has its own .portal-header element inside its post-login view — we don't want to repaint that with this gradient. !important on text-colour rules defeats inline `style="color:var(--text-muted)"` overrides that pre-date this redesign in suggest_topics.html / profile_*.html. */ body.portal-body .portal-header { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%); border-radius: 16px; padding: 28px 24px 24px; margin: 0 0 32px; text-align: center; color: #fff; box-shadow: 0 4px 16px rgba(30, 27, 75, 0.18); } body.portal-body .portal-header h1 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); color: #fff !important; margin: 6px 0 4px; font-weight: 800; letter-spacing: -0.01em; } body.portal-body .portal-header p, body.portal-body .portal-header .portal-subtitle { color: rgba(255, 255, 255, 0.78) !important; font-size: 0.9rem; margin: 0; } body.portal-body .portal-header svg { margin-bottom: 8px; color: rgba(255, 255, 255, 0.9); } body.portal-body .portal-header .portal-logo-name { color: #fff !important; } /* Logo mark — used in all portal/standalone page headers. Frosted-glass treatment when sitting on the dark portal-header. Outside the dark header (e.g. on the topics portal post-login view), .portal-logo-dot keeps its solid indigo. */ .portal-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 10px; } .portal-logo-dot { width: 48px; height: 48px; background: #4f46e5; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -0.5px; } .portal-logo-name { font-weight: 700; font-size: 0.95rem; color: var(--portal-text, #1e293b); line-height: 1.2; letter-spacing: -0.01em; } /* Frosted-glass logo dot when inside the dark portal-header. */ body.portal-body .portal-header .portal-logo-dot { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); } /* Dark-mode override — the gradient itself stays valid, but soften the shadow so it doesn't punch a black hole on the dark page bg. */ @media (prefers-color-scheme: dark) { body.portal-body .portal-header { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); } } /* ── Card ── */ .portal-card { background: var(--portal-card-bg); border: 1px solid var(--portal-border); border-radius: 12px; padding: 28px; margin-bottom: 20px; } .portal-card--compact { padding: 20px; } .portal-card--flush { padding: 0; overflow: hidden; } /* ── Typography ── */ .portal-title { font-size: 1.1rem; font-weight: 700; color: var(--portal-text); margin: 0 0 12px; } .portal-subtitle { font-size: 0.9rem; color: var(--portal-text-muted); line-height: 1.6; margin-bottom: 16px; } /* ── Form ── */ .portal-form { display: flex; flex-direction: column; gap: 16px; } .portal-label { font-size: 0.85rem; font-weight: 600; color: var(--portal-text); margin-bottom: 4px; display: block; } .portal-hint { font-size: 0.75rem; color: var(--portal-text-muted); margin-top: 2px; } /* .portal-input, .portal-select, .portal-textarea visual styles are now provided by forms.css base element rules using --f-* tokens. The class names are preserved in HTML for semantic clarity. */ .portal-select { cursor: pointer; } /* ── Buttons ── */ .portal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 24px; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; text-decoration: none; line-height: 1; } .portal-btn:active { transform: scale(0.98); } /* When .portal-btn is used as an , the global a:hover rule in style.css adds an underline. Buttons are visually a button, so the underline shouldn't apply on hover or focus — kill it explicitly. */ .portal-btn:hover, .portal-btn:focus { text-decoration: none; } .portal-btn-primary { background: var(--portal-primary); color: #fff; } .portal-btn-primary:hover { background: var(--portal-primary-hover); } .portal-btn-success { background: var(--portal-success); color: #fff; } .portal-btn-success:hover { background: #15803d; } .portal-btn-warning { background: var(--portal-warning); color: #fff; } .portal-btn-warning:hover { background: #b45309; } .portal-btn-danger { background: var(--portal-error); color: #fff; } .portal-btn-danger:hover { background: #b91c1c; } .portal-btn-outline { background: transparent; color: var(--portal-primary); border: 1.5px solid var(--portal-primary); } .portal-btn-outline:hover { background: var(--portal-info-bg); } .portal-btn-sm { padding: 8px 16px; font-size: 0.85rem; } .portal-btn-block { width: 100%; } /* ── Feedback States ── */ .portal-success { background: var(--portal-success-bg); border: 1px solid var(--portal-success); border-radius: 12px; padding: 28px; text-align: center; } .portal-error { background: var(--portal-error-bg); border: 1px solid var(--portal-error); border-radius: 8px; padding: 12px 16px; color: var(--portal-error); font-size: 0.85rem; margin-bottom: 16px; } .portal-warning { background: var(--portal-warning-bg); border: 1px solid var(--portal-warning); border-radius: 8px; padding: 12px 16px; color: var(--portal-warning); font-size: 0.85rem; margin-bottom: 16px; } .portal-info { background: var(--portal-info-bg); border-radius: 8px; padding: 12px 16px; font-size: 0.8rem; color: var(--portal-text-muted); line-height: 1.5; } /* ── Status Badges ── */ .portal-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .portal-badge--success { background: var(--portal-success-bg); color: var(--portal-success); } .portal-badge--warning { background: var(--portal-warning-bg); color: var(--portal-warning); } .portal-badge--error { background: var(--portal-error-bg); color: var(--portal-error); } .portal-badge--info { background: var(--portal-info-bg); color: var(--portal-primary); } /* ── Table ── */ .portal-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .portal-table th { text-align: left; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--portal-text-muted); padding: 8px 12px; border-bottom: 2px solid var(--portal-border); } .portal-table td { padding: 10px 12px; border-bottom: 1px solid var(--portal-border); color: var(--portal-text); } /* ── Footer ── */ .portal-footer { text-align: center; margin-top: 24px; padding: 12px 0; } .portal-footer p { font-size: 0.75rem; color: var(--portal-text-muted); margin: 0; line-height: 1.5; } .portal-footer a { color: var(--portal-primary); text-decoration: none; } /* ── Star Rating (shared by feedback + attendance) ── */ .portal-stars { display: flex; gap: 4px; flex-direction: row-reverse; justify-content: flex-end; } .portal-stars input { display: none; } .portal-stars label { cursor: pointer; font-size: 1.8rem; color: var(--portal-border); transition: color 0.15s; } .portal-stars input:checked ~ label, .portal-stars label:hover, .portal-stars label:hover ~ label { color: #f59e0b; } /* ── Divider ── */ .portal-divider { border: none; border-top: 1px solid var(--portal-border); margin: 20px 0; } /* ── Verification Code Input (6-box style) ── */ .code-boxes { display: flex; gap: 8px; justify-content: center; margin: 16px 0; } .code-box { flex: 1; min-width: 0; max-width: 52px; aspect-ratio: 1 / 1.1; text-align: center; font-size: 1.5rem; font-weight: 700; border: 2px solid var(--portal-border); border-radius: 10px; background: var(--portal-card-bg); color: var(--portal-text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace; padding: 0; } .code-box:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .code-box.filled { border-color: var(--portal-primary); background: rgba(37,99,235,0.04); } /* ── Responsive ── */ @media (max-width: 640px) { .portal-container { margin: 16px auto; padding: 0 16px; } .portal-card { padding: 20px 16px; } .portal-header { margin-bottom: 20px; } .portal-header h1 { font-size: 1.3rem; } .code-boxes { gap: 6px; } } /* ── Dark-mode: status-badge & flash patterns ────────────────────── Many portal templates use inline `style="background:#…; color:#…"` for status pills and flash messages with hardcoded LIGHT bg + DARK text. Those patterns become unreadable in dark mode (dark text on slightly-tinted dark bg). Rather than refactor every inline style to a semantic class, override the common patterns via attribute selectors — caught here in portal.css so every portal page that loads the stylesheet gets the dark-mode treatment uniformly. The !important is necessary because inline styles otherwise win. */ @media (prefers-color-scheme: dark) { /* SUCCESS — light-green bg + dark-green text → emerald rgba + light text */ body.portal-body [style*="background:#f0fdf4"], body.portal-body [style*="background:#dcfce7"] { background: rgba(34, 197, 94, 0.12) !important; border-color: rgba(34, 197, 94, 0.45) !important; } body.portal-body [style*="color:#166534"], body.portal-body [style*="color:#15803d"] { color: #6ee7b7 !important; } /* WARNING — light-amber bg + dark-amber text */ body.portal-body [style*="background:#fef3c7"], body.portal-body [style*="background:#fffbeb"], body.portal-body [style*="background:rgba(217,119,6,0.07)"] { background: rgba(251, 191, 36, 0.13) !important; border-color: rgba(251, 191, 36, 0.45) !important; } body.portal-body [style*="color:#92400e"], body.portal-body [style*="color:#d97706"] { color: #fcd34d !important; } /* ERROR / DANGER — light-red bg + dark-red text */ body.portal-body [style*="background:#fef2f2"], body.portal-body [style*="background:#fee2e2"], body.portal-body [style*="background:rgba(220,38,38,0.08)"] { background: rgba(239, 68, 68, 0.13) !important; border-color: rgba(239, 68, 68, 0.45) !important; } body.portal-body [style*="color:#991b1b"], body.portal-body [style*="color:#dc2626"] { color: #fca5a5 !important; } /* Light-blue info badges */ body.portal-body [style*="background:#bbf7d0"] { border-color: rgba(34, 197, 94, 0.45) !important; } body.portal-body [style*="background:#fde68a"] { border-color: rgba(251, 191, 36, 0.45) !important; } body.portal-body [style*="background:#fecaca"] { border-color: rgba(239, 68, 68, 0.45) !important; } /* Status pill classes used in supervisor_review.html */ body.portal-body .status-approved { background: rgba(34, 197, 94, 0.12) !important; color: #6ee7b7 !important; } body.portal-body .status-pending { background: rgba(251, 191, 36, 0.13) !important; color: #fcd34d !important; } body.portal-body .status-changes { background: rgba(239, 68, 68, 0.13) !important; color: #fca5a5 !important; } /* Profile stat tints — inline rgba bg works fine in both modes, but the dark text colours need flipping. */ body.portal-body .profile-stat.green .profile-stat-num { color: #34d399 !important; } body.portal-body .profile-stat.amber .profile-stat-num { color: #fbbf24 !important; } } /* ────────────────────────────────────────────────────────────────────── Utility classes — portal-scoped clones of the same-named classes in style.css. Bug history (2026-05-12): portal pages reference classes like u-flex-1, u-flex-shrink-0, u-mb-3, u-bold, u-center etc. assuming they exist here. They didn't — only in style.css, which portal pages don't load. So every u-* class was silently inert for months. Most visible symptom: settings-row chevrons not pinned to the right edge because u-flex-1 on the middle div didn't apply. These duplicates make the same class name resolve in both CSS families. Long-term, these belong in a shared _utilities.css imported by both stylesheets — for now the duplicate is the minimum-risk fix and keeps portal pages working without touching style.css callers. ────────────────────────────────────────────────────────────────────── */ .u-primary { color: var(--portal-primary); } .u-meta-md { font-size: 0.85rem; color: var(--portal-text-muted); } .u-meta-sm { font-size: 0.78rem; color: var(--portal-text-muted); } .u-bold { font-weight: 600; } .u-bold-heavy { font-weight: 800; } .u-center { text-align: center; } .u-m-0 { margin: 0; } .u-mt-1 { margin-top: 4px; } .u-mt-2 { margin-top: 8px; } .u-mt-3 { margin-top: 12px; } .u-mt-4 { margin-top: 16px; } .u-mb-1 { margin-bottom: 4px; } .u-mb-2 { margin-bottom: 8px; } .u-mb-3 { margin-bottom: 12px; } .u-mb-4 { margin-bottom: 16px; } .u-hidden { display: none; } .u-inline { display: inline; } .u-inline-block { display: inline-block; } .u-inline-flex { display: inline-flex; align-items: center; } .u-flex-shrink-0 { flex-shrink: 0; } .u-relative { position: relative; } .u-flex-1 { flex: 1; } .u-flex-grow { flex: 1; min-width: 0; } .u-nowrap { white-space: nowrap; } .u-icon-prefix-1 { margin-right: 4px; vertical-align: -2px; } .u-icon-prefix-2 { margin-right: 6px; vertical-align: -2px; } .u-icon-prefix-2w { margin-right: 6px; vertical-align: -3px; } .u-text-xs { font-size: 0.72rem; }