/* * Styling for the DE Contributor byline patterns (see * includes/class-de-cp-author-patterns.php). Loads on every single post, * not just contributor-program pages, since these patterns get inserted * into ordinary published articles by hand. * * Brand colors below aren't guesses - pulled directly from the live site: * --de-brand-blue matches the computed background-color of the site's own * buttons/links (e.g. .de-cp-submit on /contribute, confirmed already * live), --de-brand-text matches 's computed text color, and * --de-brand-accent is the dark olive green Nico gave directly and that's * already live on .de-cp-brand-accent. Structural borders/dividers are * left neutral gray on purpose - only labels, links, and the sponsored * disclosure accent carry brand color, to avoid overdoing it. */ :root { --de-brand-blue: #466079; --de-brand-text: #282f3b; --de-brand-accent: #2f5205; } .de-cp-contributor-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; margin: 18px 0 28px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .de-cp-contributor-top-text { flex: 1; } .de-cp-contributor-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 3px; color: var(--de-brand-blue); } .de-cp-contributor-name { font-size: 1.15rem; font-weight: 700; line-height: 1.25; margin: 0; color: var(--de-brand-text); } .de-cp-contributor-title { color: var(--de-brand-text); opacity: 0.8; margin: 3px 0 0; } .de-cp-contributor-top-photo { width: 72px; height: 72px; flex-shrink: 0; margin: 0; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--de-brand-accent); object-fit: cover; } .de-cp-contributor-bio { display: flex; gap: 22px; align-items: flex-start; padding: 24px; margin: 38px 0 24px; border: 1px solid #ddd; border-radius: 8px; } .de-cp-contributor-bio-photo { width: 130px; height: 130px; flex-shrink: 0; margin: 0; box-sizing: border-box; border-radius: 8px; border: 2px solid var(--de-brand-accent); object-fit: cover; } .de-cp-contributor-bio-content { flex: 1; } .de-cp-contributor-bio-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 3px; color: var(--de-brand-blue); } .de-cp-contributor-bio h3 { color: var(--de-brand-text); } .de-cp-contributor-bio-title { color: var(--de-brand-text); font-weight: 600; margin: 0 0 10px; } .de-cp-contributor-links a { color: var(--de-brand-blue); text-decoration: none; font-weight: 600; margin-right: 12px; } .de-cp-contributor-links a:hover, .de-cp-contributor-links a:focus { text-decoration: underline; } .de-sponsored-disclosure, .de-cp-sponsored-disclosure { padding: 12px 16px; margin: -16px 0 28px; font-size: 0.9rem; color: var(--de-brand-text); border-left: 4px solid var(--de-brand-blue); background: #eef2f5; } @media (max-width: 600px) { .de-cp-contributor-top { align-items: flex-start; } .de-cp-contributor-top-photo { width: 62px; height: 62px; } .de-cp-contributor-bio { flex-direction: column; } .de-cp-contributor-bio-photo { width: 100px; height: 100px; } }