/* ========================================================================== TheFamousPerson — main stylesheet Brand: --tfp-blue #0088ff · --tfp-navy #00307a Supports light + dark mode via [data-theme] on . ========================================================================== */ :root { --tfp-blue: #0088ff; --tfp-navy: #00307a; /* One shared width for the whole site — header, homepage sections, and every sub-page (single biography, pages, archives, search) all measure against this, so there's a single source of truth instead of independent guesses that can drift out of sync with each other. */ --tfp-content-width: 1240px; --tfp-ink: #0c1e3a; --tfp-body: #3b4a63; --tfp-muted: #71809b; --tfp-line: #e3eaf5; --tfp-bg: #f6f9fe; --tfp-card: #ffffff; --tfp-tint: #eef5ff; --tfp-tint-2: #f4f8ff; --tfp-radius: 14px; --tfp-radius-sm: 9px; --tfp-shadow: 0 1px 2px rgba(0, 48, 122, .06), 0 8px 24px rgba(0, 48, 122, .07); --tfp-shadow-lg: 0 4px 12px rgba(0, 48, 122, .10), 0 16px 40px rgba(0, 48, 122, .12); --tfp-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --tfp-serif: "Source Serif 4", Georgia, serif; --tfp-ease: cubic-bezier(.22, .82, .32, 1); } [data-theme="dark"] { --tfp-ink: #eef3ff; --tfp-body: #b9c6de; --tfp-muted: #8695b3; --tfp-line: rgba(255, 255, 255, .10); --tfp-bg: #0a1120; --tfp-card: #121b2e; --tfp-tint: rgba(0, 136, 255, .14); --tfp-tint-2: rgba(255, 255, 255, .045); --tfp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --tfp-shadow-lg: 0 4px 16px rgba(0, 0, 0, .45), 0 20px 48px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html[data-theme="dark"] { color-scheme: dark; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .tfp-hero__chip, .tfp-hero__mesh { animation: none !important; } } body.tfp-theme { margin: 0; font-family: var(--tfp-font); font-size: 16px; line-height: 1.65; color: var(--tfp-body); background: var(--tfp-bg); -webkit-font-smoothing: antialiased; transition: background-color .25s var(--tfp-ease), color .25s var(--tfp-ease); } img { max-width: 100%; height: auto; } a { color: var(--tfp-blue); text-decoration: none; } a:hover { color: var(--tfp-ink); } :focus-visible { outline: 3px solid var(--tfp-blue); outline-offset: 2px; border-radius: 4px; } h1, h2, h3, h4 { color: var(--tfp-ink); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; } .tfp-skip { position: absolute; left: -9999px; top: 0; background: var(--tfp-navy); color: #fff; padding: 10px 18px; z-index: 999; border-radius: 0 0 8px 0; } .tfp-skip:focus { left: 0; color: #fff; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tfp-muted { color: var(--tfp-muted); font-size: .92rem; } .tfp-icon { flex: none; vertical-align: -3px; } /* --------------------------------------------------------------- Buttons */ .tfp-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--tfp-blue); color: #fff; border: 2px solid var(--tfp-blue); padding: 9px 20px; border-radius: 999px; font: 700 .92rem var(--tfp-font); cursor: pointer; transition: background .18s, border-color .18s, transform .12s, box-shadow .18s; } .tfp-btn:hover { background: var(--tfp-navy); border-color: var(--tfp-navy); color: #fff; transform: translateY(-1px); box-shadow: var(--tfp-shadow); } .tfp-btn--ghost { background: transparent; color: var(--tfp-ink); border-color: var(--tfp-line); } .tfp-btn--ghost:hover { background: var(--tfp-tint); color: var(--tfp-ink); border-color: var(--tfp-blue); } .tfp-btn--lg { padding: 13px 30px; font-size: 1rem; } .tfp-btn--stop { background: transparent; color: var(--tfp-muted); border-color: var(--tfp-line); } .tfp-btn--stop:hover { background: var(--tfp-card); color: var(--tfp-ink); } .tfp-btn.is-loading { opacity: .6; pointer-events: none; } /* Small circular icon buttons: dark toggle, saved, drawer close, back-to-top */ .tfp-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--tfp-line); background: var(--tfp-card); color: var(--tfp-ink); cursor: pointer; flex: none; transition: background .15s, border-color .15s, transform .12s, color .15s; } .tfp-icon-btn:hover { background: var(--tfp-tint); border-color: var(--tfp-blue); color: var(--tfp-blue); transform: translateY(-1px); } .tfp-icon-btn__count { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--tfp-blue); color: #fff; font: 700 .64rem/16px var(--tfp-font); border-radius: 999px; text-align: center; } html[data-theme="dark"] .tfp-icon-sun { display: none; } html:not([data-theme="dark"]) .tfp-icon-moon { display: none; } /* ---------------------------------------------------------------- Header */ .tfp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 90; background: linear-gradient(90deg, var(--tfp-blue), #33c3ff); transition: width .12s linear; } .tfp-header { background: color-mix(in srgb, var(--tfp-card) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--tfp-line); position: sticky; top: 0; z-index: 60; transition: box-shadow .2s, background-color .25s; } .tfp-header.tfp-header--static { position: static; } .tfp-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 48, 122, .08); } .tfp-header__bar { max-width: var(--tfp-content-width); margin: 0 auto; padding: var(--tfp-header-pad-y, 12px) 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; } .tfp-header__brand { display: flex; align-items: center; gap: 14px; flex: 1 1 0; min-width: 0; position: relative; z-index: 1; } .tfp-logo { display: flex; align-items: center; flex: none; } .tfp-logo img { height: var(--tfp-logo-height, 34px); width: auto; max-width: none; display: block; } /* Both logo images are always in the markup; only the one matching the active theme shows. */ html[data-theme="dark"] .tfp-logo-light { display: none; } html:not([data-theme="dark"]) .tfp-logo-dark { display: none; } /* Search sits in the same row as the logo/actions, centered independently of their widths via absolute positioning (a flex/grid split centers unevenly if the two sides differ in width — this doesn't). Falls back to its own full-width row on narrower screens where there isn't reliably enough clearance either side. */ .tfp-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 34vw); z-index: 2; } .tfp-search__form { display: flex; align-items: center; gap: 8px; background: var(--tfp-bg); border: 1.5px solid var(--tfp-line); border-radius: 999px; padding: 6px 8px 6px 16px; transition: border-color .15s, box-shadow .15s; } .tfp-search__form:focus-within { border-color: var(--tfp-blue); box-shadow: 0 0 0 4px rgba(0, 136, 255, .14); background: var(--tfp-card); } .tfp-search__icon { color: var(--tfp-muted); flex: none; } .tfp-search__input { flex: 1; border: 0; background: transparent; font: 500 .95rem var(--tfp-font); color: var(--tfp-ink); min-width: 0; } .tfp-search__input:focus { outline: none; } .tfp-search__btn { border: 0; background: var(--tfp-blue); color: #fff; font: 700 .85rem var(--tfp-font); padding: 8px 18px; border-radius: 999px; cursor: pointer; flex: none; } .tfp-search__btn:hover { background: var(--tfp-navy); } /* Live search suggestions dropdown (shared: header / hero / standalone) */ .tfp-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70; background: var(--tfp-card); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); box-shadow: var(--tfp-shadow-lg); overflow: hidden; max-height: 70vh; overflow-y: auto; } .tfp-suggest__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; text-align: left; width: 100%; border: 0; background: none; font: inherit; color: inherit; } .tfp-suggest__row:hover, .tfp-suggest__row.is-active { background: var(--tfp-tint); } .tfp-suggest__thumb { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; flex: none; background: var(--tfp-tint); } .tfp-suggest__thumb img { width: 100%; height: 100%; object-fit: cover; } .tfp-suggest__text { min-width: 0; } .tfp-suggest__name { display: block; font-weight: 700; color: var(--tfp-ink); font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tfp-suggest__meta { display: block; font-size: .78rem; color: var(--tfp-muted); } .tfp-suggest__note { padding: 14px; font-size: .85rem; color: var(--tfp-muted); text-align: center; } .tfp-suggest__seeall { display: block; padding: 11px 14px; text-align: center; font-weight: 700; font-size: .85rem; background: var(--tfp-tint-2); border-top: 1px solid var(--tfp-line); } .tfp-quick-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1 1 0; min-width: 0; position: relative; z-index: 1; } .tfp-account { display: flex; gap: 10px; flex: none; } /* Header button color/radius is customizable independently of the site-wide button style. */ .tfp-header .tfp-btn:not(.tfp-btn--ghost) { background: var(--tfp-header-btn-bg, var(--tfp-blue)); border-color: var(--tfp-header-btn-bg, var(--tfp-blue)); border-radius: var(--tfp-header-btn-radius, 999px); } .tfp-header .tfp-btn:not(.tfp-btn--ghost):hover { filter: brightness(.88); } .tfp-header .tfp-btn--ghost { border-radius: var(--tfp-header-btn-radius, 999px); } .tfp-nav-toggle { display: none; flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--tfp-line); background: var(--tfp-card); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .tfp-nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tfp-ink); transition: transform .2s, opacity .2s; } .tfp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .tfp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .tfp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Category strip — scrollable pills with a sliding active indicator, plus a "More" button built into the row itself (not an overlay) so it can never overlap the last visible pill — it simply takes its own space in the row. */ .tfp-cats { background: var(--tfp-cats-bg, var(--tfp-navy)); } .tfp-cats__inner { max-width: var(--tfp-content-width); margin: 0 auto; padding: 0 12px; position: relative; display: flex; align-items: stretch; } .tfp-cats__scroll { flex: 1; min-width: 0; position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; justify-content: space-between; } .tfp-cats__scroll::-webkit-scrollbar { display: none; } .tfp-cats__indicator { position: absolute; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--tfp-blue); transition: left .25s var(--tfp-ease), width .25s var(--tfp-ease); opacity: 0; } .tfp-cats__link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .82); font: 600 .88rem var(--tfp-font); padding: 11px 14px; white-space: nowrap; transition: color .15s; } .tfp-cats__icon { font-size: .95em; } .tfp-cats__link:hover { color: #fff; } .tfp-cats__link.is-active { color: #fff; } /* flex:none + its own space in the row — never stacked on top of pills. */ .tfp-cats__more { flex: none; position: relative; display: flex; align-items: stretch; } .tfp-cats__more[hidden] { display: none; } .tfp-cats__more-btn { display: flex; align-items: center; gap: 5px; border: 0; cursor: pointer; padding: 0 18px; color: #fff; font: 600 .86rem var(--tfp-font); background: var(--tfp-cats-bg, var(--tfp-navy)); border-left: 1px solid rgba(255, 255, 255, .15); } .tfp-cats__more-btn::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; } .tfp-cats__more-btn[aria-expanded="true"]::after { transform: rotate(-135deg); } .tfp-cats__dropdown { position: absolute; top: 100%; right: 0; z-index: 65; margin-top: 4px; min-width: 230px; max-height: 60vh; overflow-y: auto; background: var(--tfp-card); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); box-shadow: var(--tfp-shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px; } /* [hidden] must win over the display:flex above, or the dropdown never actually hides — an equal-specificity author rule otherwise beats the UA [hidden] default. */ .tfp-cats__dropdown[hidden] { display: none; } .tfp-cats__dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--tfp-ink); font-weight: 600; font-size: .9rem; } .tfp-cats__dropdown a:hover { background: var(--tfp-tint); color: var(--tfp-blue); } .tfp-cats__dropdown a.is-active { color: var(--tfp-blue); background: var(--tfp-tint); } /* Off-canvas drawer (mobile nav + saved-for-later panel) */ .tfp-drawer-backdrop { position: fixed; inset: 0; background: rgba(5, 12, 26, .55); z-index: 95; opacity: 0; transition: opacity .2s; } .tfp-drawer-backdrop.is-open { opacity: 1; } .tfp-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); z-index: 96; background: var(--tfp-card); box-shadow: var(--tfp-shadow-lg); transform: translateX(-105%); transition: transform .28s var(--tfp-ease); display: flex; flex-direction: column; } .tfp-drawer.is-open { transform: translateX(0); } .tfp-drawer--right { left: auto; right: 0; transform: translateX(105%); } .tfp-drawer--right.is-open { transform: translateX(0); } .tfp-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--tfp-line); } .tfp-drawer__title { font-weight: 800; color: var(--tfp-ink); } .tfp-drawer__nav { display: flex; flex-direction: column; padding: 10px; overflow-y: auto; flex: 1; } .tfp-drawer__nav a { color: var(--tfp-ink); font-weight: 600; padding: 12px 12px; border-radius: 10px; } .tfp-drawer__nav a:hover { background: var(--tfp-tint); color: var(--tfp-blue); } .tfp-drawer__foot { padding: 14px 16px; border-top: 1px solid var(--tfp-line); display: flex; gap: 10px; } .tfp-drawer__foot .tfp-btn { flex: 1; justify-content: center; } .tfp-drawer__body { padding: 14px; overflow-y: auto; flex: 1; } .tfp-saved-empty { text-align: center; padding: 20px 10px; } .tfp-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; pointer-events: none; } .tfp-toast { background: var(--tfp-ink); color: var(--tfp-bg); font: 600 .88rem var(--tfp-font); padding: 11px 20px; border-radius: 999px; box-shadow: var(--tfp-shadow-lg); animation: tfpToastIn .22s var(--tfp-ease) both; pointer-events: auto; white-space: nowrap; } .tfp-toast.is-leaving { animation: tfpToastOut .18s ease both; } @keyframes tfpToastIn { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } } @keyframes tfpToastOut { to { opacity: 0; transform: translateY(6px) scale(.95); } } .tfp-to-top { position: fixed; right: 20px; bottom: 24px; z-index: 55; width: 46px; height: 46px; border-radius: 50%; background: var(--tfp-ink); color: var(--tfp-bg); border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: var(--tfp-shadow-lg); opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; transition: opacity .2s, transform .2s var(--tfp-ease), background .2s; } .tfp-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .tfp-to-top:hover { background: var(--tfp-blue); color: #fff; } /* ------------------------------------------------------------------ Hero */ .tfp-main { min-height: 60vh; } .tfp-hero { position: relative; overflow: hidden; text-align: center; padding: 76px 20px 20px; background: var(--tfp-card); border-bottom: 1px solid var(--tfp-line); } .tfp-hero__mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(620px 300px at 12% -10%, rgba(0, 136, 255, .14), transparent 65%), radial-gradient(620px 320px at 88% 0%, rgba(0, 48, 122, .14), transparent 65%), radial-gradient(500px 280px at 50% 110%, rgba(0, 136, 255, .08), transparent 70%); animation: tfpMeshDrift 16s ease-in-out infinite alternate; } @keyframes tfpMeshDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(1.5%, -1.5%, 0) scale(1.03); } } .tfp-hero__orbit { position: absolute; inset: 0; z-index: 0; pointer-events: none; max-width: var(--tfp-content-width); margin: 0 auto; } .tfp-hero__chip { position: absolute; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; box-shadow: var(--tfp-shadow); opacity: .85; animation: tfpFloat 7s ease-in-out infinite; border: 2px solid var(--tfp-card); } .tfp-hero__chip img, .tfp-hero__chip .tfp-avatar-fallback { width: 100%; height: 100%; } .tfp-hero__chip .tfp-avatar-fallback span { font-size: 1.2rem; } .tfp-hero__chip--1 { top: 8%; left: 6%; animation-delay: 0s; } .tfp-hero__chip--2 { top: 62%; left: 3%; width: 40px; height: 40px; animation-delay: .6s; } .tfp-hero__chip--3 { top: 20%; left: 88%; animation-delay: 1.1s; } .tfp-hero__chip--4 { top: 68%; left: 90%; width: 46px; height: 46px; animation-delay: 1.7s; } .tfp-hero__chip--5 { top: 4%; left: 30%; width: 34px; height: 34px; animation-delay: 2.2s; } .tfp-hero__chip--6 { top: 78%; left: 22%; width: 30px; height: 30px; animation-delay: 2.8s; } .tfp-hero__chip--7 { top: 10%; left: 68%; width: 32px; height: 32px; animation-delay: 3.3s; } .tfp-hero__chip--8 { top: 82%; left: 70%; width: 38px; height: 38px; animation-delay: 3.9s; } @keyframes tfpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (max-width: 860px) { .tfp-hero__orbit { display: none; } } .tfp-hero__inner { position: relative; z-index: 1; } .tfp-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: var(--tfp-tint); color: var(--tfp-navy); font: 700 .82rem var(--tfp-font); padding: 7px 16px; border-radius: 999px; margin-bottom: 18px; } [data-theme="dark"] .tfp-eyebrow { color: #bfe0ff; } .tfp-hero__tag { font-family: var(--tfp-hero-font, var(--tfp-serif)); font-weight: 500; font-size: var(--tfp-hero-size, clamp(1.7rem, 4.4vw, 2.7rem)); line-height: 1.3; color: var(--tfp-hero-color, var(--tfp-ink)); margin: 0 0 30px; } html[data-theme="dark"] .tfp-hero__tag { color: var(--tfp-hero-color-dark, var(--tfp-hero-color, var(--tfp-ink))); } .tfp-hero__search { position: relative; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--tfp-card); border: 1.5px solid var(--tfp-line); border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: var(--tfp-shadow); transition: box-shadow .18s, border-color .18s; } .tfp-hero__search:focus-within { border-color: var(--tfp-blue); box-shadow: var(--tfp-shadow-lg); } .tfp-hero__search svg { color: var(--tfp-muted); flex: none; } .tfp-hero__search input[type="search"] { flex: 1; border: 0; background: transparent; font: 500 1.05rem var(--tfp-font); color: var(--tfp-ink); min-width: 0; } .tfp-hero__search input[type="search"]:focus { outline: none; } .tfp-hero__search button { border: 0; background: var(--tfp-blue); color: #fff; font: 700 .95rem var(--tfp-font); padding: 12px 26px; border-radius: 999px; cursor: pointer; } .tfp-hero__search button:hover { background: var(--tfp-navy); } .tfp-suggest--hero { top: calc(100% + 10px); } .tfp-hero__cta { margin-top: 22px; font-size: .95rem; position: relative; z-index: 1; } .tfp-hero__stats { position: relative; z-index: 1; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; } .tfp-stat-pill { background: var(--tfp-tint-2); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); padding: 12px 24px; min-width: 130px; } .tfp-stat-pill strong { display: block; font: 800 1.5rem var(--tfp-font); color: var(--tfp-ink); } .tfp-stat-pill span { font-size: .78rem; color: var(--tfp-muted); } /* Animated category showcase — the homepage's sole category navigation now that the header menu is hidden there. Cards cascade in via .tfp-reveal's existing scroll-triggered fade, staggered per-card with inline transition-delay, then get a playful lift + icon spin on hover. */ .tfp-showcase { max-width: var(--tfp-content-width); margin: 0 auto; padding: 50px 20px 20px; } .tfp-showcase__head { text-align: center; margin-bottom: 30px; } .tfp-showcase__head h2 { font-size: 1.8rem; margin: 0 0 6px; } .tfp-showcase__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .tfp-showcase__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 12px 20px; border-radius: var(--tfp-radius); background: var(--tfp-card); border: 1px solid var(--tfp-line); box-shadow: var(--tfp-shadow); transition: transform .22s var(--tfp-ease), box-shadow .22s var(--tfp-ease), border-color .22s; } .tfp-showcase__card:hover, .tfp-showcase__card:focus-visible { transform: translateY(-6px) scale(1.03); box-shadow: var(--tfp-shadow-lg); border-color: rgba(0, 136, 255, .45); } .tfp-showcase__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--tfp-tint), var(--tfp-tint-2)); color: var(--tfp-blue); transition: transform .35s var(--tfp-ease), background .22s; } .tfp-showcase__card:hover .tfp-showcase__icon { transform: rotate(-8deg) scale(1.12); background: linear-gradient(135deg, var(--tfp-blue), var(--tfp-navy)); color: #fff; } .tfp-showcase__name { font-weight: 700; color: var(--tfp-ink); font-size: .96rem; } .tfp-showcase__count { font-size: .78rem; color: var(--tfp-muted); } @media (max-width: 560px) { .tfp-showcase__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .tfp-showcase__card { padding: 18px 8px 16px; } } /* -------------------------------------------------------------- Sections */ .tfp-section { max-width: var(--tfp-content-width); margin: 0 auto; padding: 44px 20px 10px; } /* Sub-pages (archives, search, category pages, related-people, blog index, 404) get the narrower 1080px content column — the homepage's own sections stay at 1240px. */ /* Sub-pages now share the exact same width as the rest of the site — no separate, narrower value. */ .tfp-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .tfp-section__head h2 { font-size: 1.5rem; margin: 0; position: relative; padding-left: 16px; display: flex; align-items: center; gap: 10px; } .tfp-section__head h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--tfp-blue), var(--tfp-navy)); } .tfp-section__icon { font-size: 1.1rem; } .tfp-section__all { font-weight: 700; font-size: .9rem; white-space: nowrap; } .tfp-section--bday { background: linear-gradient(180deg, rgba(0, 136, 255, .06), transparent); border-radius: var(--tfp-radius); } .tfp-section__more { text-align: center; padding: 22px 0 8px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Scroll-reveal (progressive enhancement — content is visible without JS) */ .tfp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--tfp-ease), transform .5s var(--tfp-ease); } .tfp-reveal.is-visible { opacity: 1; transform: none; } .no-js .tfp-reveal, .tfp-reveal.is-visible { opacity: 1; transform: none; } /* ------------------------------------------------------------------ Grid */ .tfp-grid { display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1100px) { .tfp-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 860px) { .tfp-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .tfp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .tfp-grid--drawer { grid-template-columns: repeat(2, 1fr); gap: 12px; } .tfp-card { position: relative; background: var(--tfp-card); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; animation: tfpFadeUp .35s ease both; } .tfp-card:hover, .tfp-card:focus-within { transform: translateY(-4px); box-shadow: var(--tfp-shadow-lg); border-color: rgba(0, 136, 255, .4); } @keyframes tfpFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .tfp-card__media { display: block; position: relative; aspect-ratio: 5 / 6; background: linear-gradient(135deg, var(--tfp-tint), var(--tfp-tint-2)); } .tfp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .tfp-avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--tfp-blue), var(--tfp-navy)); } .tfp-avatar-fallback span { font: 800 3rem var(--tfp-font); color: rgba(255, 255, 255, .9); } .tfp-card__bday { position: absolute; top: 10px; left: 10px; background: #fff; color: var(--tfp-navy); font: 700 .74rem var(--tfp-font); padding: 4px 10px; border-radius: 999px; box-shadow: var(--tfp-shadow); } .tfp-card__tag { position: absolute; bottom: 8px; left: 8px; background: rgba(10, 17, 32, .55); backdrop-filter: blur(4px); color: #fff; font: 600 .68rem var(--tfp-font); padding: 4px 9px; border-radius: 999px; } .tfp-card__actions { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(6px); transition: opacity .15s, transform .15s; } .tfp-card:hover .tfp-card__actions, .tfp-card:focus-within .tfp-card__actions { opacity: 1; transform: none; } .tfp-card__act { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--tfp-ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--tfp-shadow); transition: background .15s, color .15s, transform .12s; } .tfp-card__act:hover { background: var(--tfp-blue); color: #fff; transform: scale(1.08); } .tfp-card__act[aria-pressed="true"] { background: var(--tfp-blue); color: #fff; } .tfp-card__body { padding: 12px 14px 14px; } .tfp-card__name { font-size: 1rem; margin: 0 0 4px; } .tfp-card__name a { color: var(--tfp-ink); } .tfp-card__name a:hover { color: var(--tfp-blue); } .tfp-card__meta { margin: 0; font-size: .82rem; color: var(--tfp-muted); } .tfp-card--text .tfp-card__body { padding: 18px; } /* List view (client-side toggle on archive/category pages) */ .tfp-grid--list { grid-template-columns: 1fr !important; gap: 10px; } .tfp-grid--list .tfp-card { display: flex; animation: none; } .tfp-grid--list .tfp-card__media { width: 76px; flex: none; aspect-ratio: 1 / 1; } .tfp-grid--list .tfp-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px; } .tfp-grid--list .tfp-card__actions { position: static; flex-direction: row; opacity: 1; transform: none; margin-left: auto; align-self: center; padding-right: 12px; } .tfp-grid--list .tfp-card__tag, .tfp-grid--list .tfp-card__bday { display: none; } /* Empty state */ .tfp-empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; background: var(--tfp-tint-2); border: 1px dashed var(--tfp-line); border-radius: var(--tfp-radius); } .tfp-empty p:first-child { font-size: 1.05rem; color: var(--tfp-ink); font-weight: 600; } /* Skeleton loading placeholders shown while "See more" fetches */ .tfp-skeleton-card { border-radius: var(--tfp-radius); overflow: hidden; background: var(--tfp-card); border: 1px solid var(--tfp-line); } .tfp-skeleton-card__media { aspect-ratio: 5 / 6; } .tfp-skeleton-card__media, .tfp-skeleton-line { background: linear-gradient(100deg, var(--tfp-tint-2) 30%, var(--tfp-tint) 50%, var(--tfp-tint-2) 70%); background-size: 200% 100%; animation: tfpShimmer 1.3s ease-in-out infinite; } .tfp-skeleton-card__body { padding: 12px 14px 14px; } .tfp-skeleton-line { height: 10px; border-radius: 6px; margin-bottom: 8px; } .tfp-skeleton-line--60 { width: 60%; } @keyframes tfpShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* -------------------------------------------------------- Single biography */ .tfp-single { max-width: var(--tfp-content-width); margin: 0 auto; padding: 30px 20px 50px; } .tfp-crumbs { font-size: .85rem; color: var(--tfp-muted); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .tfp-single__title { font-size: clamp(1.8rem, 4.5vw, 2.7rem); margin: 0 0 6px; } .tfp-single__sub { font-family: var(--tfp-serif); font-size: 1.1rem; color: var(--tfp-body); margin: 0 0 10px; } .tfp-age { color: var(--tfp-blue); font-weight: 600; } .tfp-single__layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: start; } @media (max-width: 900px) { .tfp-single__layout { grid-template-columns: 1fr; } } .tfp-single__content { font-size: 1.04rem; } .tfp-bio-section h2 { font-size: 1.4rem; border-bottom: 2px solid var(--tfp-line); padding-bottom: 8px; margin: 38px 0 16px; } .tfp-bio-section p { margin: 0 0 1.1em; } .tfp-toc { position: sticky; top: calc(var(--tfp-header-h, 108px) + 14px); z-index: 10; background: var(--tfp-card); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); padding: 16px 20px; margin-bottom: 26px; font-size: .92rem; } /* Every section the TOC links to needs enough top clearance to land below BOTH sticky elements — the header AND the TOC itself (which stays pinned on screen once you've scrolled past it) — otherwise the target heading ends up hidden underneath one of them right after the jump. */ [data-tfp-spy] { scroll-margin-top: calc(var(--tfp-header-h, 108px) + var(--tfp-toc-h, 150px) + 24px); } .tfp-toc ol { margin: 8px 0 0; padding-left: 20px; columns: 2; } .tfp-toc a { color: var(--tfp-body); transition: color .15s; } .tfp-toc a.is-active { color: var(--tfp-blue); font-weight: 700; } @media (max-width: 620px) { .tfp-toc ol { columns: 1; } .tfp-toc { position: static; } /* The TOC isn't sticky here, so it never covers content — only the header needs clearing. */ [data-tfp-spy] { scroll-margin-top: calc(var(--tfp-header-h, 108px) + 16px); } } /* Detailed fact-sheet: General / Personal / Family / Career Information + Social */ .tfp-facts { margin-bottom: 8px; } .tfp-facts__group { margin-bottom: 22px; border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); overflow: hidden; background: var(--tfp-card); } .tfp-facts__head { margin: 0; padding: 13px 20px; font-size: 1rem; text-align: center; color: #fff; background: linear-gradient(90deg, var(--tfp-blue), var(--tfp-navy)); letter-spacing: .02em; } .tfp-facts__table { width: 100%; border-collapse: collapse; font-size: .93rem; } .tfp-facts__table tr:nth-child(even) { background: var(--tfp-tint-2); } .tfp-facts__table th { text-align: left; color: var(--tfp-muted); font-weight: 600; padding: 11px 18px; width: 38%; vertical-align: top; border-top: 1px solid var(--tfp-line); } .tfp-facts__table td { padding: 11px 18px 11px 0; color: var(--tfp-ink); font-weight: 600; border-top: 1px solid var(--tfp-line); } .tfp-facts__table tr:first-child th, .tfp-facts__table tr:first-child td { border-top: 0; } @media (max-width: 480px) { .tfp-facts__table th, .tfp-facts__table td { padding: 9px 12px; font-size: .87rem; } } .tfp-live-age { color: var(--tfp-blue); font-variant-numeric: tabular-nums; } .tfp-live-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(20, 176, 96, .14); color: #14b060; font: 800 .68rem var(--tfp-font); letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; vertical-align: 1px; } .tfp-live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #14b060; animation: tfpPulse 1.4s ease-in-out infinite; } @keyframes tfpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } /* References — Wikipedia-style citation list */ .tfp-references { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--tfp-line); } .tfp-references h2 { font-size: 1.3rem; margin: 0 0 14px; } .tfp-references ol { margin: 0; padding-left: 22px; } .tfp-references li { margin-bottom: 9px; font-size: .92rem; color: var(--tfp-body); line-height: 1.5; } .tfp-references a { font-weight: 600; } .tfp-references__domain { color: var(--tfp-muted); font-size: .82rem; margin-left: 6px; } .tfp-references__domain::before { content: "— "; } /* Filmography / Discography / Bibliography — a clean Wikipedia-style table */ .tfp-filmography-section h2 { margin-bottom: 14px; } .tfp-filmography { width: 100%; border-collapse: collapse; font-size: .94rem; border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); overflow: hidden; } .tfp-filmography thead th { background: var(--tfp-tint); color: var(--tfp-ink); text-align: left; padding: 10px 14px; font-weight: 700; } .tfp-filmography td { padding: 10px 14px; border-top: 1px solid var(--tfp-line); color: var(--tfp-body); vertical-align: top; } .tfp-filmography td:first-child { white-space: nowrap; font-weight: 700; color: var(--tfp-ink); width: 90px; } .tfp-filmography tbody tr:nth-child(even) { background: var(--tfp-tint-2); } @media (max-width: 560px) { .tfp-filmography { font-size: .86rem; } .tfp-filmography thead th, .tfp-filmography td { padding: 8px 10px; } } /* External Links — simple bulleted list, distinct from the numbered References citations */ .tfp-external-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tfp-external-links li::before { content: "↗ "; color: var(--tfp-blue); } .tfp-external-links a { font-weight: 600; } .tfp-photo-credit { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--tfp-line); font-size: .8rem; color: var(--tfp-muted); } .tfp-photo-credit a { color: var(--tfp-muted); text-decoration: underline; } .tfp-photo-credit a:hover { color: var(--tfp-blue); } .tfp-infobox { background: var(--tfp-card); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); overflow: hidden; box-shadow: var(--tfp-shadow); position: sticky; top: calc(var(--tfp-header-h, 108px) + 18px); text-align: center; z-index: 5; } /* On mobile the layout stacks to a single column, and the infobox must NOT stay sticky there — it needs to sit above the article in normal flow (order: -1), or it stays pinned to the screen while the article scrolls up underneath it, hiding content behind the photo. This must be declared AFTER the base rule above (not just inside an earlier media query elsewhere in the file) — two rules with equal selector specificity resolve by source order, so a mobile override placed earlier in the file gets silently overridden by this later base rule once the media query condition is also true. That was the actual bug, fixed by ordering. */ @media (max-width: 900px) { .tfp-infobox { order: -1; position: static; top: auto; } } .tfp-infobox__media { aspect-ratio: 4 / 5; background: var(--tfp-tint); } .tfp-infobox__media img { width: 100%; height: 100%; object-fit: contain; display: block; } .tfp-infobox__title { text-align: center; margin: 14px 16px 6px; font-size: 1.15rem; } .tfp-infobox__table { width: 100%; border-collapse: collapse; font-size: .88rem; text-align: left; } .tfp-infobox__table th { text-align: left; color: var(--tfp-ink); padding: 8px 14px; width: 42%; vertical-align: top; font-weight: 700; } .tfp-infobox__table td { padding: 8px 14px 8px 0; color: var(--tfp-body); text-align: left; } .tfp-infobox__table tr:nth-child(odd) { background: var(--tfp-tint-2); } .tfp-infobox__social { padding: 14px 16px 18px; border-top: 1px solid var(--tfp-line); font-size: .9rem; } .tfp-infobox__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; } .tfp-infobox__icon-link { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--tfp-tint); border: 1px solid var(--tfp-line); border-radius: 50%; color: var(--tfp-ink); transition: background .15s, color .15s, transform .12s; } .tfp-infobox__icon-link svg { width: 18px; height: 18px; } .tfp-infobox__icon-link:hover { background: var(--tfp-blue); color: #fff; border-color: var(--tfp-blue); transform: translateY(-2px); } .tfp-single__foot { border-top: 1px solid var(--tfp-line); margin-top: 34px; padding-top: 16px; } /* Floating share/save/copy-link toolbar on single biography */ .tfp-fab-toolbar { position: fixed; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 10px; /* Sits just outside the centered content's own margin, not a fixed distance from the raw browser edge — a fixed offset can land on top of the infobox sidebar at viewport widths where the centered content doesn't fill the whole window. */ right: max(22px, calc((100vw - var(--tfp-content-width)) / 2 + 22px)); } .tfp-fab { display: flex; align-items: center; gap: 8px; background: var(--tfp-card); border: 1px solid var(--tfp-line); color: var(--tfp-ink); border-radius: 999px; padding: 10px; cursor: pointer; box-shadow: var(--tfp-shadow); transition: background .15s, color .15s, transform .12s, padding .15s; overflow: hidden; } .tfp-fab span { max-width: 0; opacity: 0; white-space: nowrap; font: 700 .82rem var(--tfp-font); transition: max-width .2s, opacity .15s; } .tfp-fab:hover { background: var(--tfp-blue); color: #fff; transform: translateX(-2px); } .tfp-fab:hover span { max-width: 90px; opacity: 1; margin-right: 4px; } .tfp-fab[aria-pressed="true"] { background: var(--tfp-blue); color: #fff; } .tfp-fab svg { flex: none; margin-left: 2px; } @media (max-width: 900px) { .tfp-fab-toolbar { right: 0; left: 0; top: auto; bottom: 0; transform: none; flex-direction: row; justify-content: center; background: var(--tfp-card); border-top: 1px solid var(--tfp-line); padding: 10px; box-shadow: 0 -6px 20px rgba(0, 48, 122, .08); } .tfp-fab { flex: 1; justify-content: center; border-radius: 12px; } .tfp-fab span { max-width: none; opacity: 1; } } /* --------------------------------------------------------------- Archive */ .tfp-section__head--archive { display: block; } .tfp-section__head--archive h1 { font-size: 2rem; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; } .tfp-pagination { text-align: center; padding: 26px 0; } .tfp-pagination .page-numbers { display: inline-block; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--tfp-line); background: var(--tfp-card); margin: 0 3px; font-weight: 600; } .tfp-pagination .page-numbers.current { background: var(--tfp-blue); border-color: var(--tfp-blue); color: #fff; } /* Sort + view toolbar */ .tfp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .tfp-toolbar__sort { display: flex; gap: 4px; background: var(--tfp-tint-2); border: 1px solid var(--tfp-line); border-radius: 999px; padding: 4px; } .tfp-toolbar__opt { padding: 7px 14px; border-radius: 999px; font: 600 .84rem var(--tfp-font); color: var(--tfp-body); } .tfp-toolbar__opt.is-active { background: var(--tfp-card); color: var(--tfp-ink); box-shadow: var(--tfp-shadow); } .tfp-toolbar__view { display: flex; gap: 4px; background: var(--tfp-tint-2); border: 1px solid var(--tfp-line); border-radius: 999px; padding: 4px; } .tfp-toolbar__icon { width: 32px; height: 32px; border: 0; background: none; border-radius: 999px; color: var(--tfp-body); display: grid; place-items: center; cursor: pointer; } .tfp-toolbar__icon.is-active { background: var(--tfp-card); color: var(--tfp-blue); box-shadow: var(--tfp-shadow); } /* ------------------------------------------------------------------- Ads */ .tfp-ad { max-width: var(--tfp-content-width); margin: 20px auto; padding: 0 20px; text-align: center; } .tfp-ad__label { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tfp-muted); margin-bottom: 4px; } .tfp-ad--mid { margin: 28px 0; padding: 0; } /* --------------------------------------------------------- Forms & pages */ .tfp-page { max-width: var(--tfp-content-width); margin: 0 auto; padding: 40px 20px 60px; } .tfp-page__head h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); } .tfp-page__content { background: var(--tfp-card); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); padding: 30px 34px; font-size: 1.02rem; } @media (max-width: 620px) { .tfp-page__content { padding: 20px; } } .tfp-form-card { background: var(--tfp-card); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); padding: 28px; max-width: 480px; margin: 0 auto; box-shadow: var(--tfp-shadow); } /* Login / Register tabs — replaces the default WordPress login page entirely */ .tfp-auth-card { max-width: 440px; } .tfp-auth-tabs { display: flex; gap: 4px; background: var(--tfp-tint-2); border: 1px solid var(--tfp-line); border-radius: 999px; padding: 4px; margin-bottom: 22px; } .tfp-auth-tab { flex: 1; border: 0; background: transparent; padding: 11px; border-radius: 999px; font: 700 .92rem var(--tfp-font); color: var(--tfp-muted); cursor: pointer; transition: background .15s, color .15s; } .tfp-auth-tab:hover { color: var(--tfp-ink); } .tfp-auth-tab.is-active { background: var(--tfp-card); color: var(--tfp-blue); box-shadow: var(--tfp-shadow); } .tfp-auth-panel { display: none; } .tfp-auth-panel.is-active { display: block; } .tfp-auth-panel h3 { margin: 0 0 4px; text-align: center; } .tfp-auth-panel > p.tfp-muted { text-align: center; margin: 0 0 18px; } @media (max-width: 480px) { .tfp-auth-card { padding: 22px 18px; } .tfp-auth-tab { font-size: .86rem; padding: 10px 6px; } } .tfp-form-card--wide { max-width: 100%; } .tfp-form label { display: block; font-weight: 600; color: var(--tfp-ink); font-size: .9rem; margin-bottom: 14px; } .tfp-form input, .tfp-form select, .tfp-form textarea { width: 100%; margin-top: 5px; padding: 11px 14px; border: 1.5px solid var(--tfp-line); border-radius: 10px; font: 500 .95rem var(--tfp-font); color: var(--tfp-ink); background: var(--tfp-bg); transition: border-color .15s, box-shadow .15s; } .tfp-form input:focus, .tfp-form select:focus, .tfp-form textarea:focus { outline: none; border-color: var(--tfp-blue); background: var(--tfp-card); box-shadow: 0 0 0 4px rgba(0, 136, 255, .12); } .tfp-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 18px; } @media (max-width: 900px) { .tfp-form-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tfp-form-grid { grid-template-columns: 1fr; } } .tfp-form--inline { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; } .tfp-form--inline label { flex: 1; min-width: 200px; margin: 0; } .tfp-form-alt { text-align: center; margin-top: 14px; font-size: .9rem; } .tfp-earn-strip { background: linear-gradient(90deg, var(--tfp-blue), var(--tfp-navy)); color: #fff; border-radius: 10px; padding: 12px 18px; font-size: .95rem; margin-bottom: 22px; } .tfp-wordcount { background: var(--tfp-tint); border-radius: 10px; padding: 12px 18px; margin: 16px 0; font-weight: 600; color: var(--tfp-ink); } .tfp-wordcount__earn { color: var(--tfp-blue); } .tfp-notice { border-radius: 10px; padding: 12px 18px; margin-bottom: 18px; background: var(--tfp-tint); border: 1px solid var(--tfp-line); } .tfp-notice--ok { background: #e9f9ef; border-color: #b8e7c8; color: #14663b; } .tfp-notice--err { background: #fdeeee; border-color: #f3c1c1; color: #a12626; } /* --------------------------------------------------------- Writer dashboard */ .tfp-dashboard { max-width: 100%; } .tfp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; } @media (max-width: 760px) { .tfp-stats { grid-template-columns: repeat(2, 1fr); } } .tfp-stat { background: var(--tfp-card); border: 1px solid var(--tfp-line); border-radius: var(--tfp-radius); padding: 20px; text-align: center; box-shadow: var(--tfp-shadow); } .tfp-stat__num { display: block; font: 800 1.6rem var(--tfp-font); color: var(--tfp-ink); } .tfp-stat__label { font-size: .82rem; color: var(--tfp-muted); } .tfp-table { width: 100%; border-collapse: collapse; background: var(--tfp-card); border-radius: var(--tfp-radius); overflow: hidden; border: 1px solid var(--tfp-line); } .tfp-table th, .tfp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--tfp-line); font-size: .92rem; } .tfp-table th { background: var(--tfp-tint); color: var(--tfp-ink); } .tfp-status { font: 700 .76rem var(--tfp-font); padding: 4px 10px; border-radius: 999px; } .tfp-status--publish { background: #e9f9ef; color: #14663b; } .tfp-status--pending { background: #fff5e5; color: #935c00; } .tfp-status--draft { background: #fdeeee; color: #a12626; } .tfp-reject { color: #a12626; } /* ---------------------------------------------------------------- Footer */ .tfp-footer { background: var(--tfp-navy); color: rgba(255, 255, 255, .8); margin-top: 60px; } .tfp-footer__grid { max-width: var(--tfp-content-width); margin: 0 auto; padding: 48px 20px 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; } @media (max-width: 860px) { .tfp-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .tfp-footer__grid { grid-template-columns: 1fr; } } .tfp-footer__logo { height: 30px; width: auto; max-width: none; display: block; margin-bottom: 12px; } .tfp-footer h4 { color: #fff; font-size: 1rem; margin: 0 0 12px; } .tfp-footer ul { list-style: none; margin: 0; padding: 0; } .tfp-footer li { margin-bottom: 8px; } .tfp-footer a { color: rgba(255, 255, 255, .8); } .tfp-footer a:hover { color: #fff; } .tfp-footer__social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .tfp-footer__social a { border: 1px solid rgba(255, 255, 255, .3); padding: 5px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; } .tfp-footer__social a:hover { background: var(--tfp-blue); border-color: var(--tfp-blue); } .tfp-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .15); text-align: center; padding: 16px 20px; font-size: .85rem; } /* ------------------------------------------------------------- Responsive header */ @media (max-width: 1080px) { /* Below this width, brand + actions content can get close enough to the centered search box to risk overlapping it — safer to let it wrap to its own full row. */ .tfp-search { position: static; transform: none; width: 100%; max-width: 100%; order: 3; flex-basis: 100%; margin-top: 4px; } .tfp-header__bar { flex-wrap: wrap; } } /* JS-measured fallback (main.js: checkHeaderOverlap) — a viewport-width media query alone can't catch every case, because .tfp-header__bar's max-width is capped at var(--tfp-content-width) regardless of how wide the browser window is, and the header's own content varies by which optional buttons are enabled in TFP Theme options. This class is added the moment real overlap is measured, at any width. */ .tfp-header--stack-search .tfp-search { position: static; transform: none; width: 100%; max-width: 100%; order: 3; flex-basis: 100%; margin-top: 4px; } .tfp-header--stack-search .tfp-header__bar { flex-wrap: wrap; } @media (max-width: 900px) { .tfp-nav-toggle { display: flex; } .tfp-header__bar { flex-wrap: wrap; gap: 10px; } /* The Dashboard/Add Biography buttons are already in the hamburger drawer below — keeping them in the header row too, alongside the icon buttons, has no room to breathe on phone-width screens. Icons alone stay compact and fit comfortably. */ .tfp-quick-actions .tfp-account { display: none; } } @media (max-width: 560px) { .tfp-logo img { height: min(var(--tfp-logo-height, 34px), 28px); } .tfp-fab-toolbar .tfp-fab span { display: none; } } /* ------------------------------------------------------------- Make Your Profile (paid PR) */ .tfp-profile-pr { max-width: 760px; margin: 0 auto; } .tfp-profile-pr__hero { text-align: center; margin-bottom: 36px; } .tfp-profile-pr__hero h1 { margin: 0 0 10px; } .tfp-profile-pr__tag { color: var(--tfp-muted); font-size: 1.08rem; max-width: 560px; margin: 0 auto; } .tfp-profile-pr__section { margin-bottom: 34px; } .tfp-profile-pr__section h2 { font-size: 1.25rem; border-bottom: 2px solid var(--tfp-line); padding-bottom: 8px; margin: 0 0 14px; } .tfp-profile-pr__rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .tfp-profile-pr__rules li { display: flex; align-items: flex-start; gap: 10px; } .tfp-profile-pr__rules li svg { flex: none; margin-top: 3px; color: #14b060; } .tfp-profile-pr__steps { list-style: none; margin: 0; padding: 0; counter-reset: pr-step; display: flex; flex-direction: column; gap: 18px; } .tfp-profile-pr__steps li { position: relative; padding-left: 44px; counter-increment: pr-step; } .tfp-profile-pr__steps li::before { content: counter(pr-step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--tfp-tint); color: var(--tfp-blue); font-weight: 800; display: flex; align-items: center; justify-content: center; } .tfp-profile-pr__steps strong { display: block; margin-bottom: 2px; } .tfp-profile-pr__steps p { margin: 0; color: var(--tfp-body); } .tfp-profile-pr__editnote { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tfp-line); } .tfp-profile-pr__price-card { background: linear-gradient(135deg, var(--tfp-blue), var(--tfp-navy)); border-radius: var(--tfp-radius); padding: 36px 24px; text-align: center; color: #fff; } .tfp-profile-pr__price-label { display: block; font-size: .9rem; opacity: .85; margin-bottom: 6px; } .tfp-profile-pr__price { display: block; font-size: 2.4rem; font-weight: 800; margin-bottom: 18px; } .tfp-profile-pr__price-card .tfp-btn { background: #fff; color: var(--tfp-navy); } .tfp-profile-pr__price-card .tfp-btn:hover { filter: brightness(.95); } .tfp-profile-pr__price-card p a { color: #fff; text-decoration: underline; } @media (max-width: 560px) { .tfp-profile-pr__price { font-size: 1.9rem; } .tfp-profile-pr__steps li { padding-left: 40px; } }