/* ============================================================ Forthea Brand Shell v1.1 — shared visual shell for Forthea pages Apply to (Pass 2): /, /admin, /admin/scorecard, and any future /admin/* magnet pages. Opt-in via class="pd-shell" on plus in . Pages should also import DM Sans from Google Fonts. EXCLUDED: /report?t= (the owner-facing Visibility Scorecard report) is intentionally excluded from this shell. That page has its own inline styling we want to preserve. Do not link this stylesheet from the report and do not add class="pd-shell" to its . Scoping rule: every selector that targets a bare element (body, h1-h6, a, p, img, *) is wrapped under .pd-shell so this file cannot leak styles to a non-opt-in page even if it is somehow loaded. The :root token block is the only allowed global selector — tokens render nothing on their own. ============================================================ */ /* ---------- Avenir webfonts (self-hosted) ---------- */ @font-face { font-family: "Avenir Book"; src: url("/fonts/Avenir-Book.woff2") format("woff2"), url("/fonts/Avenir-Book.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Avenir Heavy"; src: url("/fonts/Avenir-Heavy.woff2") format("woff2"), url("/fonts/Avenir-Heavy.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* ---------- Design tokens (global; safe — no rendered styles) ---------- */ :root { /* Color: primary */ --pd-midnight: #252525; --pd-thea-white: #FAFAFA; --pd-fortuna-green: #97B944; /* Color: secondary */ --pd-charcoal: #383838; --pd-slate: #323E4A; --pd-dust: #AEAEAE; --pd-silver: #E5E5E5; /* Color: backgrounds */ --pd-bg-light: #FAFAFA; --pd-bg-subtle: #F4F4F4; --pd-bg-silver: #E5E5E5; --pd-bg-dark: #323E4A; /* Color: states */ --pd-success: #6B8E23; --pd-error: #B0322B; --pd-warning: #C68F2F; --pd-info: #476582; /* Color: hover */ --pd-green-hover: #82A23A; --pd-link-hover: #97B944; /* Color: button-specific (centralized for easy swap) */ --pd-btn-primary-bg: var(--pd-fortuna-green); --pd-btn-primary-text: var(--pd-midnight); --pd-btn-secondary-color: var(--pd-midnight); /* Color: overlays */ --pd-overlay-heavy: rgba(37, 37, 37, 0.75); --pd-overlay-medium: rgba(37, 37, 37, 0.65); --pd-overlay-light: rgba(37, 37, 37, 0.55); /* Typography — Avenir self-hosted, DM Sans web fallback, then system-safe Avenir-adjacent geometric sans, Arial final */ --pd-font-display: "Avenir Heavy", "Avenir", "DM Sans", "Nunito Sans", "Century Gothic", Helvetica, Arial, sans-serif; --pd-font-body: "Avenir Book", "Avenir", "DM Sans", "Nunito Sans", "Century Gothic", Helvetica, Arial, sans-serif; /* Type scale */ --pd-text-h1: 36px; --pd-text-h2: 28px; --pd-text-h3: 24px; --pd-text-h4: 14px; --pd-text-body-lg: 18px; --pd-text-body: 16px; --pd-text-small: 14px; --pd-text-caption: 12px; /* Layout */ --pd-max-width: 800px; --pd-page-pad-x: 20px; --pd-section-gap: 60px; --pd-header-height: 64px; --pd-footer-pad-y: 48px; /* Radius */ --pd-radius: 4px; --pd-radius-button: 6px; --pd-radius-card: 6px; /* Elevation */ --pd-shadow-card: 0 1px 3px rgba(37, 37, 37, 0.08), 0 8px 24px rgba(37, 37, 37, 0.06); /* Transitions */ --pd-ease: cubic-bezier(0.2, 0, 0, 1); } /* Tablet+ token overrides (still global because :root only) */ @media (min-width: 768px) { :root { --pd-page-pad-x: 32px; --pd-section-gap: 80px; --pd-header-height: 80px; } } /* ---------- Reset / base (scoped to .pd-shell) ---------- */ .pd-shell *, .pd-shell *::before, .pd-shell *::after { box-sizing: border-box; } body.pd-shell { -webkit-text-size-adjust: 100%; margin: 0; font-family: var(--pd-font-body); font-size: var(--pd-text-body); line-height: 1.6; color: var(--pd-midnight); background: var(--pd-bg-light); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pd-shell img, .pd-shell svg { max-width: 100%; display: block; } .pd-shell a { color: var(--pd-midnight); text-decoration: none; transition: color 180ms var(--pd-ease); } .pd-shell a:hover { color: var(--pd-link-hover); } .pd-shell a.pd-link-inline:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- Typography (scoped) ---------- */ .pd-shell h1, .pd-shell h2, .pd-shell h3, .pd-shell h4, .pd-shell h5, .pd-shell h6 { font-family: var(--pd-font-display); font-weight: 700; margin: 0 0 0.5em 0; text-align: left; } .pd-shell h1 { font-size: var(--pd-text-h1); line-height: 1.15; letter-spacing: -0.02em; } .pd-shell h2 { font-size: var(--pd-text-h2); line-height: 1.2; letter-spacing: -0.015em; } .pd-shell h3 { font-size: var(--pd-text-h3); line-height: 1.3; letter-spacing: -0.005em; } .pd-eyebrow { font-family: var(--pd-font-body); font-size: var(--pd-text-h4); font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pd-dust); margin: 0 0 16px 0; } .pd-eyebrow::before { content: "// "; color: var(--pd-fortuna-green); } .pd-shell p { margin: 0 0 1em 0; } .pd-lead { font-size: var(--pd-text-body-lg); line-height: 1.6; } .pd-small { font-size: var(--pd-text-small); } .pd-caption { font-size: var(--pd-text-caption); letter-spacing: 0.04em; color: var(--pd-dust); } .pd-text-dust { color: var(--pd-dust); } .pd-text-green { color: var(--pd-fortuna-green); } .pd-text-on-dark { color: var(--pd-thea-white); } /* ---------- Layout primitives ---------- */ .pd-container { width: 100%; max-width: var(--pd-max-width); margin: 0 auto; padding-left: var(--pd-page-pad-x); padding-right: var(--pd-page-pad-x); } .pd-section { padding-top: var(--pd-section-gap); padding-bottom: var(--pd-section-gap); } .pd-section--subtle { background: var(--pd-bg-subtle); } .pd-section--dark { background: var(--pd-bg-dark); color: var(--pd-thea-white); } .pd-section--dark h1, .pd-section--dark h2, .pd-section--dark h3 { color: var(--pd-thea-white); } .pd-section--dark .pd-eyebrow { color: var(--pd-dust); } /* ---------- Header ---------- */ .pd-header { position: sticky; top: 0; z-index: 50; height: var(--pd-header-height); background: var(--pd-thea-white); border-bottom: 1px solid var(--pd-silver); display: flex; align-items: center; } .pd-header__inner { width: 100%; max-width: var(--pd-max-width); margin: 0 auto; padding: 0 var(--pd-page-pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .pd-header__logo img { height: 32px; width: auto; } @media (min-width: 768px) { .pd-header__logo img { height: 40px; } } .pd-header__label { display: none; font-family: var(--pd-font-body); font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; color: var(--pd-dust); } .pd-header__label::before { content: "// "; color: var(--pd-fortuna-green); } @media (min-width: 768px) { .pd-header__label { display: block; } } /* ---------- Footer ---------- */ .pd-footer { background: var(--pd-bg-dark); color: var(--pd-thea-white); border-top: 4px solid var(--pd-fortuna-green); padding: var(--pd-footer-pad-y) 0; } .pd-footer__inner { max-width: var(--pd-max-width); margin: 0 auto; padding: 0 var(--pd-page-pad-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .pd-footer__logo img { height: 32px; width: auto; filter: brightness(0) invert(1); } .pd-footer__meta { text-align: right; font-size: var(--pd-text-small); color: var(--pd-thea-white); } .pd-footer__meta-line { display: block; margin-bottom: 4px; } .pd-footer__links { display: inline-flex; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; color: var(--pd-dust); } .pd-footer__links a { color: var(--pd-dust); } .pd-footer__links a:hover { color: var(--pd-fortuna-green); } .pd-footer__sep { color: var(--pd-fortuna-green); } @media (max-width: 639px) { .pd-footer__inner { flex-direction: column; align-items: flex-start; } .pd-footer__meta { text-align: left; } } /* ---------- Buttons ---------- */ .pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--pd-font-display); font-weight: 700; font-size: 16px; line-height: 1; padding: 16px 32px; min-height: 52px; border-radius: var(--pd-radius-button); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background 180ms var(--pd-ease), color 180ms var(--pd-ease), border-color 180ms var(--pd-ease), transform 180ms var(--pd-ease); user-select: none; } .pd-btn:focus-visible { outline: none; } .pd-btn:active { transform: translateY(1px); } .pd-btn svg { pointer-events: none; } .pd-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .pd-btn--sm { font-size: 14px; padding: 10px 20px; min-height: 38px; } /* Primary: solid Fortuna Green fill + Midnight text (forced to defeat any legacy inline near-black/bright-green button styles) */ .pd-btn--primary { background: var(--pd-fortuna-green) !important; color: var(--pd-midnight) !important; border-color: var(--pd-fortuna-green) !important; } .pd-btn--primary:hover { background: var(--pd-green-hover); border-color: var(--pd-green-hover); } .pd-btn--primary:focus-visible { box-shadow: 0 0 0 3px rgba(151, 185, 68, 0.35); } /* Secondary: Midnight outline + Midnight text */ .pd-btn--secondary { background: transparent; color: var(--pd-btn-secondary-color); border-color: var(--pd-btn-secondary-color); } .pd-btn--secondary:hover { background: var(--pd-slate); color: var(--pd-thea-white); border-color: var(--pd-slate); } .pd-btn--secondary:focus-visible { box-shadow: 0 0 0 3px rgba(50, 62, 74, 0.25); } /* Inverse secondary (use on dark backgrounds) */ .pd-btn--secondary-inverse { background: transparent; color: var(--pd-thea-white); border-color: var(--pd-thea-white); } .pd-btn--secondary-inverse:hover { background: var(--pd-thea-white); color: var(--pd-midnight); } /* Tertiary (text link as button) */ .pd-btn--tertiary { background: transparent; color: var(--pd-midnight); border: none; padding: 0; min-height: auto; text-decoration: none; } .pd-btn--tertiary:hover { color: var(--pd-fortuna-green); text-decoration: underline; text-underline-offset: 4px; } .pd-btn[disabled], .pd-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ---------- Forms ---------- */ .pd-input, .pd-select, .pd-textarea { width: 100%; font-family: var(--pd-font-body); font-size: 16px; line-height: 1.5; color: var(--pd-midnight); background: var(--pd-thea-white); border: 1px solid var(--pd-silver); border-radius: var(--pd-radius); padding: 12px 14px; transition: border-color 180ms var(--pd-ease), box-shadow 180ms var(--pd-ease); } .pd-input:focus, .pd-select:focus, .pd-textarea:focus { outline: none; border-color: var(--pd-fortuna-green); box-shadow: 0 0 0 3px rgba(151, 185, 68, 0.18); } .pd-input--error { border-color: var(--pd-error); } .pd-input--error:focus { box-shadow: 0 0 0 3px rgba(176, 50, 43, 0.18); } .pd-label { display: block; font-family: var(--pd-font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pd-midnight); margin-bottom: 6px; } .pd-help { font-size: 13px; color: var(--pd-dust); margin-top: 4px; } .pd-error-text { font-size: 13px; color: var(--pd-error); margin-top: 4px; } .pd-success-text { font-size: 13px; color: var(--pd-success); margin-top: 4px; } /* ---------- Cards ---------- */ .pd-card { background: var(--pd-thea-white); border: 1px solid var(--pd-silver); border-radius: var(--pd-radius-card); padding: 24px; box-shadow: var(--pd-shadow-card); } /* ---------- Utilities ---------- */ .pd-divider { height: 1px; background: var(--pd-silver); border: 0; margin: 32px 0; } .pd-divider--green { height: 4px; width: 48px; background: var(--pd-fortuna-green); border: 0; margin: 0 0 24px 0; } .pd-stack > * + * { margin-top: 16px; } .pd-stack-lg > * + * { margin-top: 32px; } .pd-mt-0 { margin-top: 0; } .pd-mb-0 { margin-bottom: 0; } /* ---------- Admin nav ---------- */ .pd-anav-desktop { max-width: 1200px; margin: 0 auto; padding: 0 8px; display: flex; gap: 0; } /* Mobile: active-page label + "All Tools" toggle button */ .pd-anav-mobile { display: none; align-items: center; justify-content: space-between; padding: 0 16px; } .pd-anav-toggle { background: transparent; border: none; color: #FAFAFA; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: inherit; padding: 12px 0; } /* Drawer: stacked links, hidden by default (toggled via JS) */ .pd-anav-drawer { display: none; border-top: 1px solid rgba(255,255,255,0.07); } @media (max-width: 639px) { .pd-anav-desktop { display: none; } .pd-anav-mobile { display: flex; } } /* ---------- Skip link ---------- */ .pd-skip-link { position: absolute; left: -9999px; top: 0; background: var(--pd-slate); color: var(--pd-thea-white); padding: 12px 16px; z-index: 100; } .pd-skip-link:focus { left: 0; }