/* Phinder portal base styles, skinned to the Lamplight design system so the portal reads as the same product as the search page. Palette values mirror phinder_frontend static/tokens.css: warm dark by default, "Swedish summer" light for visitors whose device prefers light. theme.js adds .dark-theme or .light-theme on only when the visitor has a stored choice; those blocks below override the device setting. Component rules are variable driven, so the theming lives almost entirely in these variable blocks. */ :root { color-scheme: dark; --brand-color: #f5a524; --brand-accent: #f5a524; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --space-unit: 0.5rem; --max-content-width: 900px; --bg: #0a0a0a; --surface-bg: #131210; --input-bg: #1b1916; --text: #f5f1e8; --text-muted: #b6b0a4; --border: #2a2722; --input-border: #3a362f; --button-bg: #f5a524; --button-hover: #ffb84d; --button-text: #0a0a0a; --link-color: #f5a524; --link-hover: #ffb84d; --message-bg: #1b1916; --message-border: #3a362f; --badge-bg: #24211c; --badge-text: #f5a524; --error-bg: #2a1713; --error-text: #d97757; --focus-ring: rgba(245, 165, 36, 0.28); --panel-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4); } /* Device prefers light and no stored choice: Lamplight light (amber darkened to hold WCAG AA on warm paper). */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --brand-color: #9a6206; --brand-accent: #9a6206; --bg: #f7f4ec; --surface-bg: #fffdf8; --input-bg: #f0ece1; --text: #231f19; --text-muted: #544f46; --border: #d7d1c1; --input-border: #bcb4a1; --button-bg: #9a6206; --button-hover: #7d4f04; --button-text: #fffdf8; --link-color: #9a6206; --link-hover: #7d4f04; --message-bg: #f0ece1; --message-border: #bcb4a1; --badge-bg: #e8e3d5; --badge-text: #9a6206; --error-bg: #fbeae3; --error-text: #b34a2b; --focus-ring: rgba(154, 98, 6, 0.28); --panel-shadow: 0 1px 2px rgba(35, 31, 25, 0.06); } } /* Stored preference (theme.js reads the search page's "phinder.theme" key, then the legacy portal "theme" key): overrides the device setting. */ :root.dark-theme { color-scheme: dark; --brand-color: #f5a524; --brand-accent: #f5a524; --bg: #0a0a0a; --surface-bg: #131210; --input-bg: #1b1916; --text: #f5f1e8; --text-muted: #b6b0a4; --border: #2a2722; --input-border: #3a362f; --button-bg: #f5a524; --button-hover: #ffb84d; --button-text: #0a0a0a; --link-color: #f5a524; --link-hover: #ffb84d; --message-bg: #1b1916; --message-border: #3a362f; --badge-bg: #24211c; --badge-text: #f5a524; --error-bg: #2a1713; --error-text: #d97757; --focus-ring: rgba(245, 165, 36, 0.28); --panel-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4); } :root.light-theme { color-scheme: light; --brand-color: #9a6206; --brand-accent: #9a6206; --bg: #f7f4ec; --surface-bg: #fffdf8; --input-bg: #f0ece1; --text: #231f19; --text-muted: #544f46; --border: #d7d1c1; --input-border: #bcb4a1; --button-bg: #9a6206; --button-hover: #7d4f04; --button-text: #fffdf8; --link-color: #9a6206; --link-hover: #7d4f04; --message-bg: #f0ece1; --message-border: #bcb4a1; --badge-bg: #e8e3d5; --badge-text: #9a6206; --error-bg: #fbeae3; --error-text: #b34a2b; --focus-ring: rgba(154, 98, 6, 0.28); --panel-shadow: 0 1px 2px rgba(35, 31, 25, 0.06); } body { font-family: var(--font-body); line-height: 1.6; margin: 0; color: var(--text); background: var(--bg); } *, *::before, *::after { box-sizing: border-box; } ::selection { background: var(--button-bg); color: var(--button-text); } .site-header { background: var(--surface-bg); border-bottom: 1px solid var(--border); padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3); } .site-brand { margin: 0 0 0.5rem; font-size: 1.4rem; } a { color: var(--link-color); } a:hover { color: var(--link-hover); } .site-header a { text-decoration: none; } /* Header mirrors the search page: quiet brand and nav, amber on hover. */ .site-brand a { color: var(--text); } .site-nav a { color: var(--text-muted); } .site-brand a:hover, .site-nav a:hover { color: var(--link-color); } .site-nav { display: flex; flex-wrap: wrap; gap: 0.9rem; } main { max-width: var(--max-content-width); margin: 0 auto; padding: calc(var(--space-unit) * 3); } .panel, .card { background: var(--surface-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--panel-shadow); padding: 1rem 1.1rem; margin-bottom: 1rem; max-width: 100%; } .page-intro { max-width: 42rem; color: var(--text-muted); } .text-muted { color: var(--text-muted); } .workflow-list { margin: 1rem 0; padding-left: 1.25rem; } .workflow-list li { margin-bottom: 0.45rem; } .account-section { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1.1rem; } .account-section h3, .account-claim h4 { margin-bottom: 0.35rem; } .account-claim { border: 1px solid var(--border); border-radius: 8px; margin-top: 0.85rem; padding: 0.9rem; } .account-claim p { margin: 0.35rem 0; } .term-list { display: grid; gap: 0.25rem 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0.35rem 0 1rem; padding-left: 1.2rem; } .form-stack { display: grid; gap: 0.95rem; margin-top: 1rem; } .form-field { display: grid; gap: 0.35rem; } .field-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.35rem; } .field-label, .form-fieldset legend { font-weight: 700; } .required-marker { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; } .help-text { margin: 0; color: var(--text-muted); font-size: 0.92rem; } .field-errors { list-style: none; margin: 0.2rem 0 0; padding: 0; color: var(--error-text); font-size: 0.92rem; } .field-errors li + li { margin-top: 0.25rem; } .form-fieldset { border: 0; margin: 0; padding: 0; } .form-section-title { margin: 0.5rem 0 0; } .action-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.25rem; } .review-priority-callout { background: var(--message-bg); border-left: 4px solid var(--brand-accent); border-radius: 4px; font-weight: 700; padding: 0.75rem 0.9rem; } .elix-register-scale { background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; margin: 0.35rem 0 1.25rem; padding: 1rem 0.75rem 0.8rem; } .elix-register-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; position: relative; } .elix-register-steps::before { background: var(--input-border); content: ""; height: 2px; left: 10%; position: absolute; right: 10%; top: 0.85rem; } .elix-register-steps li { align-items: center; color: var(--text-muted); display: flex; flex-direction: column; font-size: 0.75rem; gap: 0.18rem; min-width: 0; position: relative; text-align: center; } .elix-register-tick { align-items: center; background: var(--surface-bg); border: 2px solid var(--input-border); border-radius: 50%; color: var(--text-muted); display: inline-flex; font-size: 0.7rem; font-weight: 800; height: 1.7rem; justify-content: center; line-height: 1; width: 1.7rem; } .elix-register-steps .is-active .elix-register-tick { background: var(--brand-accent); border-color: var(--brand-accent); box-shadow: 0 0 0 4px var(--focus-ring); color: var(--button-text); } .elix-register-glyph { color: var(--text); height: 1.5rem; width: 1.5rem; } .review-level-heading { font-size: 1rem; margin: 0; } .review-level-chip { align-items: center; background: var(--badge-bg); border: 1px solid var(--border); border-radius: 999px; color: var(--text); display: inline-flex; gap: 0.75rem; padding: 0.45rem 0.8rem; } .review-level-glyph { flex: 0 0 auto; height: 1.5rem; width: 1.5rem; } .review-feedback-hint { margin-bottom: 0; } .review-matrix-scroll { max-width: 100%; overflow-x: auto; } .review-progress-matrix { border-collapse: collapse; min-width: 46rem; width: 100%; } .review-progress-matrix th, .review-progress-matrix td { border-bottom: 1px solid var(--border); padding: 0.7rem 0.6rem; text-align: center; white-space: nowrap; } .review-progress-matrix th:first-child, .review-progress-matrix .review-matrix-ghost td { text-align: left; } .review-priority-badge { font-size: 0.7rem; margin-left: 0.2rem; padding: 0.1rem 0.35rem; vertical-align: middle; } .review-matrix-ghost td { color: var(--text-muted); font-style: italic; } .review-level + .review-level { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1.25rem; } .review-text { display: grid; gap: 0.9rem; margin-top: 0.9rem; } .review-text h4, .review-text p { margin: 0; } .review-score-heading { align-items: center; display: flex; justify-content: space-between; gap: 1rem; } .review-score-value { color: var(--text-muted); font-weight: 700; min-width: 5.5rem; text-align: right; } input.review-score { accent-color: var(--brand-accent); cursor: pointer; min-height: 3rem; touch-action: pan-y; width: 100%; } .button-link { align-items: center; background: var(--button-bg); border: 0; border-radius: 8px; color: var(--button-text); display: inline-flex; font-weight: 700; justify-content: center; line-height: 1.2; padding: 0.65rem 0.9rem; text-decoration: none; } .button-link:hover { background: var(--button-hover); color: var(--button-text); } .button-link.secondary { background: transparent; border: 1px solid var(--input-border); color: var(--link-color); } .button-link.secondary:hover { background: var(--message-bg); color: var(--link-hover); } .beta-activation-actions .button-link { min-height: 3rem; padding: 0.8rem 1.1rem; } .secondary-action { font-weight: 700; } .notice { background: var(--message-bg); border: 1px solid var(--message-border); border-radius: 8px; margin: 1rem 0; padding: 0.75rem 0.9rem; } .notice p { margin: 0; } .notice p + p { margin-top: 0.45rem; } .notice-error { background: var(--error-bg); border-color: color-mix(in srgb, var(--error-text) 35%, var(--border)); color: var(--error-text); } .sow-rendered { overflow-x: auto; } .sow-rendered > :first-child { margin-top: 0; } .sow-rendered > :last-child { margin-bottom: 0; } .sow-rendered code, .sow-rendered pre { font-family: var(--font-mono); } .sow-rendered pre { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; overflow-x: auto; padding: 0.8rem; } .sow-rendered table { border-collapse: collapse; margin: 0.85rem 0; min-width: 100%; } .sow-rendered th, .sow-rendered td { border: 1px solid var(--border); padding: 0.45rem 0.55rem; text-align: left; vertical-align: top; } .option-list { display: grid; gap: 0.65rem; margin-top: 0.35rem; } .option-row { align-items: flex-start; background: color-mix(in srgb, var(--surface-bg) 90%, var(--message-bg)); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; display: grid; gap: 0.65rem; grid-template-columns: auto 1fr; min-width: 0; padding: 0.7rem 0.8rem; } .option-row:has(input:checked) { border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--focus-ring); } .option-row input { margin-top: 0.25rem; } .option-row > span { min-width: 0; } .option-title { display: block; font-weight: 700; } .option-description { color: var(--text-muted); display: block; font-size: 0.92rem; margin-top: 0.15rem; } .field-group { margin-bottom: 0.9rem; } .field-group label { display: block; font-weight: 600; margin-bottom: 0.35rem; } .field-group small { display: block; margin-top: 0.25rem; color: var(--text-muted); } .messages { list-style: none; padding: 0; margin: 0 0 1rem; } .messages li { background: var(--message-bg); border: 1px solid var(--message-border); border-radius: 8px; padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; } .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--badge-bg); color: var(--badge-text); font-size: 0.9rem; font-weight: 600; } button, input[type="submit"] { background: var(--button-bg); color: var(--button-text); border: 0; border-radius: 8px; padding: 0.65rem 0.9rem; cursor: pointer; font-weight: 700; } button:hover, input[type="submit"]:hover { background: var(--button-hover); } button + button { margin-left: 0.5rem; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: 0.65rem; border: 1px solid var(--input-border); border-radius: 8px; font: inherit; color: var(--text); background: var(--input-bg); } input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-accent); height: 1rem; width: 1rem; } input:focus, select:focus, textarea:focus, button:focus-visible, .button-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .site-footer { max-width: var(--max-content-width); margin: 0 auto; padding: calc(var(--space-unit) * 3); color: var(--text-muted); font-size: 0.92rem; border-top: 1px solid var(--border); } /* Footer mirrors the landing-page footer (phinder_frontend) so the two surfaces read as one product: brand blurb + three link columns + the AI-provenance and copyright meta lines. */ .footer-top { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-bottom: 1.25rem; } .footer-brand { flex: 1 1 16rem; max-width: 22rem; } .footer-brandmark { display: block; font-weight: 600; color: var(--text); margin-bottom: 0.4rem; } .footer-brand p { margin: 0; color: var(--text-muted); } .footer-columns { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; } .footer-column { display: flex; flex-direction: column; gap: 0.4rem; } .footer-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); opacity: 0.75; margin-bottom: 0.15rem; } .footer-column a { color: var(--text-muted); text-decoration: none; } .footer-column a:hover { color: var(--link-hover); text-decoration: underline; } .footer-meta { margin: 0.35rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); opacity: 0.85; } .legal-page { background: var(--surface-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--panel-shadow); padding: clamp(1rem, 3vw, 2rem); width: 100%; } .legal-page h2 { margin-top: 0; } .legal-page h3 { margin-top: 1.7rem; } .legal-note { border-left: 4px solid var(--brand-accent); margin: 0 0 1.5rem; padding: 0.7rem 0 0.7rem 1rem; color: var(--text-muted); background: color-mix(in srgb, var(--brand-accent) 10%, transparent); } .legal-details { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 0.5rem 1rem; } .legal-details dt { color: var(--text-muted); font-weight: 700; } .legal-details dd { margin: 0; } /* About page (shares the .legal-page shell). */ .about-brandline { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.02em; margin: -0.4rem 0 0; } .about-tagline { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; } .stakeholder-grid { display: grid; gap: 0.9rem; margin: 1rem 0; } .steps-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1rem 0; } .stakeholder-card, .step-box { background: var(--message-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; } .stakeholder-card h4, .step-box h4 { color: var(--link-color); margin: 0 0 0.5rem; } .stakeholder-card p, .step-box p { margin: 0; } .origin-story { border-left: 3px solid var(--button-bg); font-style: italic; margin: 1rem 0; padding-left: 1.25rem; } .about-signature { color: var(--text-muted); margin-top: 2rem; } input::placeholder, textarea::placeholder { color: var(--text-muted); } ul { padding-left: 1.2rem; } p, li, label, .option-description { overflow-wrap: break-word; } @media (max-width: 640px) { main { max-width: 22rem; margin: 0; padding: 1rem; width: auto; } .site-header, .site-footer { padding: 1rem; } .site-footer { margin: 0; max-width: 22rem; } .site-nav { gap: 0.5rem 0.65rem; } .panel, .card, .legal-page { max-width: 100%; width: 100%; } .term-list { grid-template-columns: 1fr; } .option-row { grid-template-columns: 1rem minmax(0, 1fr); } .legal-details { grid-template-columns: 1fr; } button, input[type="submit"], .button-link { width: 100%; margin: 0.35rem 0 0; } .action-row { align-items: stretch; flex-direction: column; } .elix-register-scale { padding-inline: 0.35rem; } .elix-register-steps li { font-size: 0.65rem; } .review-level-chip { align-items: flex-start; border-radius: 10px; flex-direction: column; width: 100%; } button + button { margin-left: 0; } } /* Embedded auth: the search UI's sign-in modal iframes the account pages (?next=/auth/popup-complete). Hide the portal chrome and re-skin to the search page's Lamplight dark palette (values mirror phinder_frontend static/tokens.css) so the modal reads as one surface. The portal styles are variable-driven, so this is mostly a variable remap on body. */ body.embedded-auth { color-scheme: dark; --bg: #131210; --surface-bg: #131210; --input-bg: #1b1916; --text: #f5f1e8; --text-muted: #a8a39a; --border: #2a2722; --input-border: #3a362f; --button-bg: #f5a524; --button-hover: #ffb84d; --button-text: #0a0a0a; --link-color: #f5a524; --link-hover: #ffb84d; --message-bg: #1b1916; --message-border: #3a362f; --badge-bg: #24211c; --badge-text: #f5a524; --error-bg: #2a1713; --error-text: #d97757; --focus-ring: rgba(245, 165, 36, 0.28); background: var(--bg); } body.embedded-auth .site-header, body.embedded-auth .site-footer, body.embedded-auth footer { display: none; } body.embedded-auth main { max-width: none; margin: 0; padding: 4px 24px 20px; } body.embedded-auth .panel { border: none; box-shadow: none; background: transparent; max-width: none; margin: 0; padding: 8px 0 0; } body.embedded-auth .panel h2 { margin: 0 0 0.4rem; font-size: 1.35rem; } body.embedded-auth .page-intro { margin: 0 0 1rem; font-size: 0.9rem; } body.embedded-auth .form-stack { gap: 0.75rem; } body.embedded-auth .form-field { margin: 0; } body.embedded-auth .notice { margin-top: 1rem; padding: 0.6rem 0.8rem; font-size: 0.85rem; } /* Embedded auth, light variant: follows the device setting, matching the search page's auto default (palette mirrors tokens.css light). If the viewer explicitly toggles the page theme against the OS setting, the modal keeps the OS look - a known cosmetic edge. */ @media (prefers-color-scheme: light) { body.embedded-auth { color-scheme: light; --bg: #fffdf8; --surface-bg: #fffdf8; --input-bg: #f0ece1; --text: #231f19; --text-muted: #544f46; --border: #d7d1c1; --input-border: #bcb4a1; --button-bg: #9a6206; --button-hover: #7d4f04; --button-text: #fffdf8; --link-color: #9a6206; --link-hover: #7d4f04; --message-bg: #f0ece1; --message-border: #bcb4a1; --badge-bg: #e8e3d5; --badge-text: #9a6206; --error-bg: #fbeae3; --error-text: #b34a2b; --focus-ring: rgba(154, 98, 6, 0.28); } }