/* =========================================================== PFA Design System — Shared Tokens Single source of truth for the CAF Investment Project site. Edit a value here and every page that links this file picks it up automatically. Usage in HTML : Note: existing sub-pages still carry their own inline :root blocks for safety. To switch a sub-page over to the shared tokens, simply delete its inline :root { ... } block. =========================================================== */ :root { /* === Primary brand === */ --pfa-blue: #00517b; --pfa-blue-dark: #003a57; --pfa-blue-light: #bbe1f8; --pfa-orange: #df7f43; --pfa-orange-light: #f5d4b8; /* === Section / semantic === */ --pfa-section-blue: #0c5b82; --pfa-section-green: #9aae6b; --pfa-cover-bg: #1a6a8a; --pfa-callout-bg: #edf6f9; /* === Neutrals === */ --pfa-white: #ffffff; --pfa-dark: #333333; --pfa-gray: #666666; --pfa-light-gray: #f4f7fa; --pfa-border: #e0e6ed; /* === Status === */ --status-positive-bg: #d4edda; --status-positive-text: #155724; --status-info-bg: #cce5ff; --status-info-text: #004085; --status-warning-bg: #fff3cd; --status-warning-text: #856404; --status-danger-bg: #f8d7da; --status-danger-text: #721c24; --status-negative: #c0392b; /* === Elevation === */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); /* === Radii === */ --radius: 8px; --radius-lg: 12px; /* === Typography === */ --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-display: 'Segoe UI', system-ui, -apple-system, sans-serif; /* === Shell-specific (used by INDEX.html top bar) === */ --tab-bar-h: 56px; --sub-tab-bar-h: 44px; } /* ============================================================ Bilingual visibility helpers (used by pages with mixed inline EN/ES that don't go through pfa-i18n.js) ============================================================ */ [data-lang="en"] .lang-es-only { display: none !important; } [data-lang="es"] .lang-en-only { display: none !important; } /* ============================================================ Coming Soon splash (placeholder pages in early build phases) ============================================================ */ .pfa-coming-soon { min-height: 100vh; display: grid; place-items: center; background: var(--pfa-light-gray); color: var(--pfa-dark); font-family: var(--font-body); padding: 40px 20px; text-align: center; } .pfa-coming-soon__card { max-width: 560px; background: var(--pfa-white); border: 1px solid var(--pfa-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 56px 48px; } .pfa-coming-soon__eyebrow { display: inline-block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--pfa-orange); background: var(--pfa-orange-light); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } .pfa-coming-soon__title { font-size: 28px; font-weight: 700; color: var(--pfa-blue-dark); margin: 0 0 12px; } .pfa-coming-soon__sub { font-size: 15px; line-height: 1.6; color: var(--pfa-gray); margin: 0; } .pfa-coming-soon__divider { width: 48px; height: 3px; background: var(--pfa-orange); border-radius: 2px; margin: 24px auto; } /* ============================================================ Landing-page card grid (used by overall.html, future indexes) ============================================================ */ .pfa-landing { min-height: 100vh; background: var(--pfa-light-gray); font-family: var(--font-body); color: var(--pfa-dark); padding: 40px 32px; } .pfa-landing__header { max-width: 1100px; margin: 0 auto 32px; } .pfa-landing__eyebrow { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pfa-orange); font-weight: 700; margin-bottom: 8px; } .pfa-landing__title { font-size: 32px; font-weight: 700; color: var(--pfa-blue-dark); margin: 0 0 6px; } .pfa-landing__sub { font-size: 15px; color: var(--pfa-gray); max-width: 720px; line-height: 1.55; } .pfa-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .pfa-card { background: var(--pfa-white); border: 1px solid var(--pfa-border); border-radius: var(--radius-lg); padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; position: relative; overflow: hidden; } .pfa-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pfa-orange); opacity: 0; transition: opacity 0.15s ease; } .pfa-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--pfa-blue-light); } .pfa-card:hover::before { opacity: 1; } .pfa-card__icon { font-size: 22px; width: 40px; height: 40px; border-radius: 8px; background: var(--pfa-callout-bg); color: var(--pfa-blue); display: grid; place-items: center; font-weight: 700; } .pfa-card__title { font-size: 17px; font-weight: 600; color: var(--pfa-blue-dark); margin: 0; } .pfa-card__desc { font-size: 13px; color: var(--pfa-gray); line-height: 1.5; margin: 0; } .pfa-card__meta { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--pfa-orange); font-weight: 600; letter-spacing: 0.3px; } .pfa-card.is-placeholder { opacity: 0.65; } .pfa-card.is-placeholder .pfa-card__meta { color: var(--pfa-gray); } /* ============================================================ Icon buttons (LinkedIn / Email / Website / etc.) Used across all card-based pages — paired with PFA.icons SVGs ============================================================ */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--pfa-border); border-radius: 6px; background: var(--pfa-white); color: var(--pfa-blue-dark); cursor: pointer; text-decoration: none; font-family: inherit; font-size: 11px; font-weight: 600; transition: background 0.12s, border-color 0.12s, transform 0.08s, color 0.12s; } .icon-btn:hover { background: var(--pfa-callout-bg); border-color: var(--pfa-blue-light); } .icon-btn:active { transform: scale(0.96); } .icon-btn svg { width: 14px; height: 14px; display: block; } /* Brand-specific tints */ .icon-btn--linkedin { color: #0A66C2; } .icon-btn--email { color: var(--pfa-blue-dark); } /* "Naked" larger variant for inline brand icons (no border, no background). Hover provides subtle feedback via opacity shift instead of a chrome box. */ .icon-btn--linkedin, .icon-btn--email { width: auto; height: auto; padding: 4px; border: none; background: transparent; border-radius: 4px; } .icon-btn--linkedin svg, .icon-btn--email svg { width: 21px; height: 21px; } .icon-btn--linkedin:hover, .icon-btn--email:hover { background: transparent; border: none; opacity: 0.78; } /* Copy-confirmation state — keep a subtle green wash so the user gets visual feedback when their email is copied. */ .icon-btn--email.is-copied { background: var(--status-positive-bg); color: var(--status-positive-text); opacity: 1; } /* ============================================================ Email text button (shows the actual email; click to copy) Replaces the envelope-icon variant on people cards. ============================================================ */ .email-btn { display: inline-block; background: none; border: none; margin: 0; padding: 3px 0; font: inherit; font-size: 11.5px; color: var(--pfa-blue); cursor: pointer; text-align: left; text-decoration: none; border-radius: 4px; word-break: break-all; line-height: 1.35; transition: color 0.12s, background 0.12s; font-family: inherit; } .email-btn:hover { color: var(--pfa-blue-dark); text-decoration: underline; } .email-btn::before { /* small inline envelope mark to keep it scannable as an email */ content: "✉"; margin-right: 5px; color: var(--pfa-gray); font-size: 12px; } .email-btn.is-copied { color: var(--status-positive-text); text-decoration: none; background: var(--status-positive-bg); padding: 3px 8px; } .email-btn.is-copied::before { content: "✓"; color: var(--status-positive-text); font-weight: 700; } /* Wide variant: icon + label (used for Website button) */ .icon-btn--text { width: auto; padding: 0 10px; gap: 6px; } .icon-btn--website { color: var(--pfa-blue); } .icon-btn--website svg { width: 13px; height: 13px; }