/* ==========================================================================
AffiliateWP — BRPDP / v2 restyle
Brings every AffiliateWP front-end surface (Affiliate Area dashboard + all
tabs: URLs, Creatives, Statistics, Graphs, Referrals, Payouts, Visits,
Settings; plus Login and Registration) into the Beauty Retouch (brpdp)
design system.
Tokens come from inc/brpdp-tokens.css (:root --brpdp-*), loaded site-wide.
Loads only on the 3 affiliate pages (see inc/brpdp-enqueue.php), which also
adds the `brpdp-affwp` body class. Last in the cascade.
Scope: body.brpdp-v2.brpdp-affwp
Editorial look: warm paper, Geist sans, Geist Mono labels, single red
accent (#C70606), hairline rules, pill buttons + pill status badges, flat
(no shadows), horizontal table lines only. Mirrors woocommerce-account.css.
========================================================================== */
body.brpdp-v2.brpdp-affwp {
--aff-pill: 999px;
--aff-r: 8px;
--aff-r-lg: 10px;
--aff-neg: rgba(199, 6, 6, 0.32); /* hairline tint of the red accent */
}
/* --------------------------------------------------------------------------
1. Base — typography + comfortable rhythm on the affiliate content
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard,
body.brpdp-v2.brpdp-affwp .affwp-form,
body.brpdp-v2.brpdp-affwp .affwp-tab-content {
font-family: var(--brpdp-sans);
color: var(--brpdp-ink-2);
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard {
max-width: var(--brpdp-max);
margin: 0 auto;
padding: 8px 0 56px;
}
body.brpdp-v2.brpdp-affwp .affwp-tab-content {
padding-top: 4px;
}
/* Content links — ink, red on hover (not the loud theme link colour) */
body.brpdp-v2.brpdp-affwp .affwp-tab-content a:not(.button):not(.affwp-copy-to-clipboard),
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs a {
color: var(--brpdp-ink);
text-decoration: none;
transition: color 0.15s ease;
}
body.brpdp-v2.brpdp-affwp .affwp-tab-content a:not(.button):not(.affwp-copy-to-clipboard):hover {
color: var(--brpdp-accent);
}
/* --------------------------------------------------------------------------
2. Dashboard tab navigation — horizontal editorial bar on a hairline rule.
Muted links; active = ink + 2px red underline bar. "Log out" pushed right.
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 2px 28px;
list-style: none;
margin: 0 0 36px;
padding: 0;
border: 0;
border-bottom: 1px solid var(--brpdp-line);
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
background: none;
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li::before {
display: none; /* kill any theme list glyph */
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li a {
position: relative;
display: block;
padding: 0 0 12px;
font-family: var(--brpdp-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--brpdp-muted);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease;
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--brpdp-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.18s ease;
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li a:hover {
color: var(--brpdp-ink);
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li.active a {
color: var(--brpdp-ink);
font-weight: 600;
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li.active a::after {
transform: scaleX(1);
}
/* Set "Log out" apart on the right */
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li:has(a[href*="action=logout"]),
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li:has(a[href*="logout"]) {
margin-left: auto;
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li:has(a[href*="logout"]) a {
color: var(--brpdp-muted);
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li:has(a[href*="logout"]) a:hover {
color: var(--brpdp-accent);
}
/* --------------------------------------------------------------------------
3. Headings (h2/h3/h4 inside the dashboard & tabs) + legends
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard h2,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard h3,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard h4,
body.brpdp-v2.brpdp-affwp .affwp-tab-content h2,
body.brpdp-v2.brpdp-affwp .affwp-tab-content h3,
body.brpdp-v2.brpdp-affwp .affwp-tab-content h4 {
font-family: var(--brpdp-sans);
font-weight: 500;
color: var(--brpdp-ink);
letter-spacing: -0.02em;
line-height: 1.2;
text-transform: none;
}
body.brpdp-v2.brpdp-affwp .affwp-tab-content h4 {
font-size: 18px;
margin: 36px 0 16px;
}
body.brpdp-v2.brpdp-affwp .affwp-tab-content > h4:first-child,
body.brpdp-v2.brpdp-affwp .affwp-tab-content > *:first-child > h4:first-child {
margin-top: 0;
}
/* mono "//" red eyebrow on section headings */
body.brpdp-v2.brpdp-affwp .affwp-tab-content h4::before {
content: "// ";
font-size: 0.62em;
letter-spacing: 0.06em;
color: var(--brpdp-accent);
vertical-align: middle;
}
/* --------------------------------------------------------------------------
4. Tables — paper card; horizontal hairline rules only (never vertical
cell borders). Mono uppercase header eyebrow. Mirrors the account tables.
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-table-wrap {
margin: 0 0 var(--brpdp-space-lg);
}
body.brpdp-v2.brpdp-affwp table.affwp-table {
width: 100%;
margin: 0 0 var(--brpdp-space-lg);
border: 1px solid var(--brpdp-line);
border-radius: var(--aff-r-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--brpdp-paper);
}
body.brpdp-v2.brpdp-affwp table.affwp-table th,
body.brpdp-v2.brpdp-affwp table.affwp-table td {
border: 0 !important;
border-bottom: 1px solid var(--brpdp-line) !important;
padding: 14px 16px;
background: transparent;
vertical-align: middle;
text-align: left;
}
body.brpdp-v2.brpdp-affwp table.affwp-table thead th {
font-family: var(--brpdp-sans);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brpdp-muted);
background: var(--brpdp-paper) !important;
padding-top: 13px;
padding-bottom: 13px;
}
body.brpdp-v2.brpdp-affwp table.affwp-table tbody td {
font-family: var(--brpdp-sans);
font-size: 14px;
color: var(--brpdp-ink-2);
}
body.brpdp-v2.brpdp-affwp table.affwp-table tbody tr:last-child td {
border-bottom: 0 !important;
}
body.brpdp-v2.brpdp-affwp table.affwp-table tbody tr:hover td {
background: rgba(17, 17, 16, 0.018);
}
body.brpdp-v2.brpdp-affwp table.affwp-table a {
color: var(--brpdp-ink);
text-decoration: none;
}
body.brpdp-v2.brpdp-affwp table.affwp-table a:hover {
color: var(--brpdp-accent);
}
/* Empty-state rows */
body.brpdp-v2.brpdp-affwp .affwp-table-no-data,
body.brpdp-v2.brpdp-affwp td.affwp-table-no-data,
body.brpdp-v2.brpdp-affwp .affwp-no-results {
color: var(--brpdp-muted);
font-style: italic;
text-align: center;
}
/* --------------------------------------------------------------------------
5. Status badges (pills) — .affwp-badge--{slug}. Positive = ink fill,
neutral = muted hairline, negative = red.
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-badge {
display: inline-block;
font-family: var(--brpdp-sans);
font-size: 10px;
line-height: 1;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: var(--aff-pill);
border: 1px solid var(--brpdp-line);
color: var(--brpdp-ink-2);
background: transparent;
white-space: nowrap;
}
/* positive / settled */
body.brpdp-v2.brpdp-affwp .affwp-badge--paid,
body.brpdp-v2.brpdp-affwp .affwp-badge--active,
body.brpdp-v2.brpdp-affwp .affwp-badge--accepted,
body.brpdp-v2.brpdp-affwp .affwp-badge--complete,
body.brpdp-v2.brpdp-affwp .affwp-badge--completed {
background: var(--brpdp-ink);
border-color: var(--brpdp-ink);
color: var(--brpdp-bg);
}
/* in-progress / neutral */
body.brpdp-v2.brpdp-affwp .affwp-badge--unpaid,
body.brpdp-v2.brpdp-affwp .affwp-badge--pending,
body.brpdp-v2.brpdp-affwp .affwp-badge--processing,
body.brpdp-v2.brpdp-affwp .affwp-badge--inactive,
body.brpdp-v2.brpdp-affwp .affwp-badge--onhold,
body.brpdp-v2.brpdp-affwp .affwp-badge--on-hold {
color: var(--brpdp-muted);
}
/* negative */
body.brpdp-v2.brpdp-affwp .affwp-badge--rejected,
body.brpdp-v2.brpdp-affwp .affwp-badge--failed,
body.brpdp-v2.brpdp-affwp .affwp-badge--cancelled,
body.brpdp-v2.brpdp-affwp .affwp-badge--canceled,
body.brpdp-v2.brpdp-affwp .affwp-badge--expired,
body.brpdp-v2.brpdp-affwp .affwp-badge--draft {
color: var(--brpdp-accent);
border-color: var(--aff-neg);
}
/* --------------------------------------------------------------------------
6. Buttons — pills. Primary = ink fill → red on hover (−1px lift).
Secondary / copy = ghost. !important to beat Qode/Brunn .button cascade.
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-form input[type="submit"],
body.brpdp-v2.brpdp-affwp .affwp-form button[type="submit"],
body.brpdp-v2.brpdp-affwp .affwp-form .button,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="submit"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard button[type="submit"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard a.button,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 22px;
width: auto;
border: 1px solid var(--brpdp-ink) !important;
border-radius: var(--aff-pill) !important;
background: var(--brpdp-ink) !important;
color: var(--brpdp-bg) !important;
font-family: var(--brpdp-sans) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.01em;
line-height: 1;
text-transform: none !important;
text-decoration: none !important;
text-shadow: none !important;
box-shadow: none !important;
cursor: pointer;
transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.brpdp-v2.brpdp-affwp .affwp-form input[type="submit"]:hover,
body.brpdp-v2.brpdp-affwp .affwp-form button[type="submit"]:hover,
body.brpdp-v2.brpdp-affwp .affwp-form .button:hover,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="submit"]:hover,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard button[type="submit"]:hover,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard a.button:hover,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard .button:hover {
background: var(--brpdp-accent) !important;
border-color: var(--brpdp-accent) !important;
color: var(--brpdp-accent-ink) !important;
transform: translateY(-1px);
}
/* kill any theme arrow glyph appended to buttons */
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard .button::after,
body.brpdp-v2.brpdp-affwp .affwp-form .button::after,
body.brpdp-v2.brpdp-affwp .affwp-form input[type="submit"]::after {
content: none !important;
display: none !important;
}
/* Secondary / ghost actions (copy-to-clipboard, generic links styled as buttons) */
body.brpdp-v2.brpdp-affwp .affwp-copy-to-clipboard,
body.brpdp-v2.brpdp-affwp button.affwp-copy-to-clipboard {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 0 18px;
border: 1px solid var(--brpdp-ink) !important;
border-radius: var(--aff-pill) !important;
background: transparent !important;
color: var(--brpdp-ink) !important;
font-family: var(--brpdp-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
text-transform: none !important;
box-shadow: none !important;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.brpdp-v2.brpdp-affwp .affwp-copy-to-clipboard:hover {
background: var(--brpdp-ink) !important;
color: var(--brpdp-bg) !important;
}
/* --------------------------------------------------------------------------
7. Forms — inputs, labels, fieldsets. Paper fields, hairline border, red
focus ring, mono uppercase field labels (48px min-height).
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-form input[type="text"],
body.brpdp-v2.brpdp-affwp .affwp-form input[type="email"],
body.brpdp-v2.brpdp-affwp .affwp-form input[type="password"],
body.brpdp-v2.brpdp-affwp .affwp-form input[type="number"],
body.brpdp-v2.brpdp-affwp .affwp-form input[type="url"],
body.brpdp-v2.brpdp-affwp .affwp-form input[type="tel"],
body.brpdp-v2.brpdp-affwp .affwp-form input[type="search"],
body.brpdp-v2.brpdp-affwp .affwp-form textarea,
body.brpdp-v2.brpdp-affwp .affwp-form select,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="text"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="email"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="url"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="number"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard textarea,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard select {
font-family: var(--brpdp-sans) !important;
font-size: 15px !important;
color: var(--brpdp-ink);
background: var(--brpdp-paper);
border: 1px solid var(--brpdp-line) !important;
border-radius: var(--aff-r) !important;
padding: 12px 14px !important;
min-height: 48px;
line-height: 1.4;
box-shadow: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.brpdp-v2.brpdp-affwp .affwp-form textarea,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard textarea {
min-height: 120px;
font-family: var(--brpdp-mono) !important;
font-size: 13px !important;
line-height: 1.6;
}
body.brpdp-v2.brpdp-affwp .affwp-form input:focus,
body.brpdp-v2.brpdp-affwp .affwp-form textarea:focus,
body.brpdp-v2.brpdp-affwp .affwp-form select:focus,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input:focus,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard textarea:focus,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard select:focus {
border-color: var(--brpdp-accent) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(199, 6, 6, 0.14) !important;
}
body.brpdp-v2.brpdp-affwp .affwp-form ::placeholder {
color: var(--brpdp-muted);
}
/* Field rows + labels (mono uppercase eyebrow), but NOT checkbox/inline labels */
body.brpdp-v2.brpdp-affwp .affwp-form fieldset {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
body.brpdp-v2.brpdp-affwp .affwp-form fieldset > p,
body.brpdp-v2.brpdp-affwp .affwp-form .affwp-wrap {
margin: 0 0 18px;
}
body.brpdp-v2.brpdp-affwp .affwp-form fieldset > p > label,
body.brpdp-v2.brpdp-affwp .affwp-wrap > label,
body.brpdp-v2.brpdp-affwp .affwp-form label[for="affwp-payment-email"] {
display: block;
margin-bottom: 6px;
font-family: var(--brpdp-sans);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--brpdp-muted);
}
/* Inline (checkbox) labels stay sentence-case */
body.brpdp-v2.brpdp-affwp .affwp-user-remember,
body.brpdp-v2.brpdp-affwp .affwp-send-notifications-wrap label,
body.brpdp-v2.brpdp-affwp .affwp-tos label,
body.brpdp-v2.brpdp-affwp label.affwp-checkbox-label {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--brpdp-sans);
font-size: 14px;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--brpdp-ink-2);
}
body.brpdp-v2.brpdp-affwp .affwp-send-notifications-wrap,
body.brpdp-v2.brpdp-affwp .affwp-user-remember {
display: flex;
align-items: center;
gap: 8px;
}
/* checkboxes inside inline labels shouldn't inherit the big input frame */
body.brpdp-v2.brpdp-affwp .affwp-form input[type="checkbox"],
body.brpdp-v2.brpdp-affwp .affwp-form input[type="radio"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="checkbox"] {
width: 16px;
height: 16px;
min-height: 0;
margin: 0;
accent-color: var(--brpdp-accent);
}
body.brpdp-v2.brpdp-affwp .required {
color: var(--brpdp-accent);
border: 0;
}
/* Helper / description text */
body.brpdp-v2.brpdp-affwp .description,
body.brpdp-v2.brpdp-affwp .affwp-payment-email-desc,
body.brpdp-v2.brpdp-affwp .affwp-creative-desc {
color: var(--brpdp-muted);
font-size: 13px;
line-height: 1.55;
margin-top: 6px;
}
body.brpdp-v2.brpdp-affwp .affwp-save-profile-wrap {
margin-top: 24px;
}
/* --------------------------------------------------------------------------
8. Login / Registration — centered paper cards
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-login-form,
body.brpdp-v2.brpdp-affwp .affwp-register-form {
max-width: 460px;
margin: 8px auto 40px;
padding: 32px;
background: var(--brpdp-paper);
border: 1px solid var(--brpdp-line);
border-radius: 12px;
}
body.brpdp-v2.brpdp-affwp .affwp-register-form {
max-width: 560px;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form legend,
body.brpdp-v2.brpdp-affwp .affwp-register-form legend {
width: 100%;
float: none;
margin: 0 0 20px;
padding: 0;
font-family: var(--brpdp-sans);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--brpdp-ink);
border: 0;
}
body.brpdp-v2.brpdp-affwp .affwp-lost-password {
margin-top: 14px;
font-size: 13px;
}
body.brpdp-v2.brpdp-affwp .affwp-lost-password a {
color: var(--brpdp-muted);
}
body.brpdp-v2.brpdp-affwp .affwp-lost-password a:hover {
color: var(--brpdp-accent);
}
/* register section headings */
body.brpdp-v2.brpdp-affwp .affwp-register-form h3,
body.brpdp-v2.brpdp-affwp .affwp-register-form legend + p {
color: var(--brpdp-ink);
}
/* --------------------------------------------------------------------------
9. Notices / messages — paper card with a 3px red left accent bar
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-notice,
body.brpdp-v2.brpdp-affwp p.affwp-notice {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 24px;
padding: 16px 20px;
background: var(--brpdp-paper);
border: 1px solid var(--brpdp-line);
border-left: 3px solid var(--brpdp-accent);
border-radius: var(--aff-r);
color: var(--brpdp-ink-2);
font-family: var(--brpdp-sans);
font-size: 14px;
list-style: none;
}
body.brpdp-v2.brpdp-affwp .affwp-notice-error {
color: var(--brpdp-accent);
font-weight: 500;
}
body.brpdp-v2.brpdp-affwp .affwp-notice-success {
border-left-color: var(--brpdp-ink);
}
/* --------------------------------------------------------------------------
10. Pagination — flex of hairline pills
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
}
body.brpdp-v2.brpdp-affwp .affwp-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border: 1px solid var(--brpdp-line);
border-radius: var(--aff-pill);
font-family: var(--brpdp-sans);
font-size: 13px;
color: var(--brpdp-ink-2);
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease;
}
body.brpdp-v2.brpdp-affwp .affwp-pagination .page-numbers:hover {
border-color: var(--brpdp-ink);
color: var(--brpdp-ink);
}
body.brpdp-v2.brpdp-affwp .affwp-pagination .page-numbers.current {
background: var(--brpdp-ink);
border-color: var(--brpdp-ink);
color: var(--brpdp-bg);
}
/* --------------------------------------------------------------------------
11. URL generator (URLs tab) — referral URL field + copy, custom generator
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-url-generator {
display: block;
}
body.brpdp-v2.brpdp-affwp #affwp-referral-url,
body.brpdp-v2.brpdp-affwp input.affwp-referral-url,
body.brpdp-v2.brpdp-affwp input#affwp-referral-url {
font-family: var(--brpdp-mono) !important;
font-size: 13px !important;
color: var(--brpdp-ink) !important;
}
/* the URL field + copy button sit on a row */
body.brpdp-v2.brpdp-affwp .affwp-referral-url-wrap,
body.brpdp-v2.brpdp-affwp .affwp-generate-url-wrap {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
}
body.brpdp-v2.brpdp-affwp .affwp-referral-url-wrap input[type="text"],
body.brpdp-v2.brpdp-affwp .affwp-generate-url-wrap input[type="text"] {
flex: 1 1 280px;
}
/* --------------------------------------------------------------------------
12. Payout method / summary blocks (Settings + Payouts tabs)
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-payout-method-context,
body.brpdp-v2.brpdp-affwp .affwp-payout-summary {
margin: 0 0 20px;
padding: 18px 20px;
background: var(--brpdp-paper);
border: 1px solid var(--brpdp-line);
border-radius: var(--aff-r-lg);
}
body.brpdp-v2.brpdp-affwp .affwp-payout-method-context__heading,
body.brpdp-v2.brpdp-affwp .affwp-payout-summary__label {
display: block;
font-family: var(--brpdp-sans);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--brpdp-muted);
margin-bottom: 6px;
}
body.brpdp-v2.brpdp-affwp .affwp-payout-method-context__detail,
body.brpdp-v2.brpdp-affwp .affwp-payout-summary__value {
font-family: var(--brpdp-sans);
font-size: 15px;
color: var(--brpdp-ink);
margin: 0;
}
body.brpdp-v2.brpdp-affwp .affwp-payout-method-status {
font-family: var(--brpdp-sans);
font-size: 14px;
color: var(--brpdp-ink-2);
margin: 0 0 18px;
}
/* --------------------------------------------------------------------------
13. Creatives tab — paper cards with image, description, embed code
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-creative {
margin: 0 0 24px;
padding: 22px;
background: var(--brpdp-paper);
border: 1px solid var(--brpdp-line);
border-radius: var(--aff-r-lg);
}
body.brpdp-v2.brpdp-affwp .affwp-creative img {
max-width: 100%;
height: auto;
border-radius: var(--aff-r);
border: 1px solid var(--brpdp-line);
}
body.brpdp-v2.brpdp-affwp .affwp-creative h3,
body.brpdp-v2.brpdp-affwp .affwp-creative h4 {
margin: 0 0 10px;
}
/* --------------------------------------------------------------------------
14. Graphs tab — date filter form + chart container
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp #affwp-graphs-date-options,
body.brpdp-v2.brpdp-affwp .affwp-graph-filter,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-graphs form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
margin: 0 0 28px;
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-graphs canvas {
max-width: 100%;
}
/* --------------------------------------------------------------------------
15. Responsive
-------------------------------------------------------------------------- */
@media (max-width: 782px) {
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs {
gap: 2px 18px;
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li:has(a[href*="logout"]) {
margin-left: 0;
}
/* AffiliateWP responsive tables: stack rows, reveal data-th labels */
body.brpdp-v2.brpdp-affwp table.affwp-table.affwp-table-responsive thead {
position: absolute;
left: -9999px;
}
body.brpdp-v2.brpdp-affwp table.affwp-table.affwp-table-responsive tr {
display: block;
border-top: 1px solid var(--brpdp-ink);
padding: 6px 14px;
}
body.brpdp-v2.brpdp-affwp table.affwp-table.affwp-table-responsive tbody tr:first-child {
border-top: 0;
}
body.brpdp-v2.brpdp-affwp table.affwp-table.affwp-table-responsive td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--brpdp-line) !important;
text-align: right;
}
body.brpdp-v2.brpdp-affwp table.affwp-table.affwp-table-responsive td:last-child {
border-bottom: 0 !important;
}
body.brpdp-v2.brpdp-affwp table.affwp-table.affwp-table-responsive td::before {
content: attr(data-th);
font-family: var(--brpdp-sans);
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brpdp-muted);
text-align: left;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form,
body.brpdp-v2.brpdp-affwp .affwp-register-form {
padding: 24px;
}
}
/* --------------------------------------------------------------------------
16. Refinements (2026-06-23)
-------------------------------------------------------------------------- */
/* Keep pill-button labels on one line. The "Copy Link" button in the URLs tab
was wrapping to two lines when squeezed beside the referral-URL field. */
body.brpdp-v2.brpdp-affwp .affwp-form input[type="submit"],
body.brpdp-v2.brpdp-affwp .affwp-form button[type="submit"],
body.brpdp-v2.brpdp-affwp .affwp-form .button,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="submit"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard button[type="submit"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard a.button,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard .button,
body.brpdp-v2.brpdp-affwp .affwp-copy-to-clipboard {
white-space: nowrap;
flex: 0 0 auto;
}
/* --------------------------------------------------------------------------
17. Fixes (2026-06-23, round 2)
-------------------------------------------------------------------------- */
/* (a) Breathing room above the dashboard tab nav and the login/register cards. */
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard {
padding-top: 48px;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form,
body.brpdp-v2.brpdp-affwp .affwp-register-form {
margin-top: 32px;
}
/* (b) AffiliateWP Tippy.js hint popovers (data-theme="affwp"): the inner
inherited dark ink, rendering black-on-dark and illegible. Make legible and
on-brand — frame-dark card, paper text. */
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] {
background: var(--brpdp-frame-dark) !important;
color: var(--brpdp-paper) !important;
border-radius: var(--aff-r) !important;
font-family: var(--brpdp-sans);
font-size: 13px;
line-height: 1.55;
}
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] .tippy-content,
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] .tippy-content p,
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] .tippy-content span,
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] .tippy-content strong,
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] .tippy-content a {
color: var(--brpdp-paper) !important;
}
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] .tippy-content p {
margin: 0 0 8px;
}
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] .tippy-content p:last-child {
margin-bottom: 0;
}
body.brpdp-v2.brpdp-affwp .tippy-box[data-theme~="affwp"] > .tippy-arrow {
color: var(--brpdp-frame-dark) !important;
}
/* (c) Generic AffiliateWP buttons (.affwp-button) — e.g. the Creatives
"View Details" / "Copy" actions — were rendering as raw native buttons.
Style as compact ghost pills (secondary actions). */
body.brpdp-v2.brpdp-affwp .affwp-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
padding: 0 16px;
width: auto;
border: 1px solid var(--brpdp-ink) !important;
border-radius: var(--aff-pill) !important;
background: transparent !important;
color: var(--brpdp-ink) !important;
font-family: var(--brpdp-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.01em;
line-height: 1;
text-transform: none !important;
text-decoration: none !important;
text-shadow: none !important;
box-shadow: none !important;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
body.brpdp-v2.brpdp-affwp .affwp-button:hover {
background: var(--brpdp-ink) !important;
color: var(--brpdp-bg) !important;
border-color: var(--brpdp-ink) !important;
}
body.brpdp-v2.brpdp-affwp .affwp-button::after,
body.brpdp-v2.brpdp-affwp .affwp-button::before {
content: none !important;
}
/* icon-only variant → square-ish pill */
body.brpdp-v2.brpdp-affwp .affwp-button--as-icon {
width: 36px;
padding: 0;
}
body.brpdp-v2.brpdp-affwp .affwp-button svg {
width: 16px;
height: 16px;
}
/* tidy the creatives action cell */
body.brpdp-v2.brpdp-affwp .affwp-creatives-item-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
/* --------------------------------------------------------------------------
18. Fixes (2026-06-23, round 3)
-------------------------------------------------------------------------- */
/* (a) Keep the Creatives action button(s) clear of the card's right edge (>=15px). */
body.brpdp-v2.brpdp-affwp .affwp-creatives-item-actions {
box-sizing: border-box;
padding-right: 16px;
}
/* (b) Consistent primary-button height. The "Copy Link" button was stretching to
fill its flex row (63px) while "Create Custom Link" and the others were 44px.
Pin every primary button to 48px (matching the inputs) and stop the stretch. */
body.brpdp-v2.brpdp-affwp .affwp-form input[type="submit"],
body.brpdp-v2.brpdp-affwp .affwp-form button[type="submit"],
body.brpdp-v2.brpdp-affwp .affwp-form .button,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard input[type="submit"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard button[type="submit"],
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard a.button,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard .button {
height: 48px;
min-height: 48px;
align-self: center;
}
/* center the referral URL field + Copy Link button on one baseline */
body.brpdp-v2.brpdp-affwp .affwp-affiliate-link__display {
align-items: center;
}
/* --------------------------------------------------------------------------
19. Login page — white input fields (stand out against the paper card)
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-login-form input[type="text"],
body.brpdp-v2.brpdp-affwp .affwp-login-form input[type="email"],
body.brpdp-v2.brpdp-affwp .affwp-login-form input[type="password"] {
background: #ffffff !important;
}
/* --------------------------------------------------------------------------
20. Login page — right-align the Log In button; recovery link beneath it
-------------------------------------------------------------------------- */
/* The submit lives in a
(with hidden inputs); the lost-password link is the
next
. Right-align both so the button moves right and "Lost your password?"
sits directly under it. */
body.brpdp-v2.brpdp-affwp .affwp-login-form p:has(> input[type="submit"]) {
text-align: right;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form .affwp-lost-password {
text-align: right;
}
/* --------------------------------------------------------------------------
21. Registration page — white input fields (match the login form)
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-register-form input[type="text"],
body.brpdp-v2.brpdp-affwp .affwp-register-form input[type="email"],
body.brpdp-v2.brpdp-affwp .affwp-register-form input[type="url"],
body.brpdp-v2.brpdp-affwp .affwp-register-form input[type="password"],
body.brpdp-v2.brpdp-affwp .affwp-register-form textarea,
body.brpdp-v2.brpdp-affwp .affwp-register-form select {
background: #ffffff !important;
}
/* --------------------------------------------------------------------------
22. Login page — Remember Me on the same row as the Log In button
-------------------------------------------------------------------------- */
/* Float Remember Me left so the right-aligned Log In button (see §20) sits beside
it on the same line; the recovery link clears below (still right-aligned). The
row is 48px tall so the checkbox vertically centers against the 48px button. */
body.brpdp-v2.brpdp-affwp .affwp-login-form p:has(> .affwp-user-remember) {
float: left;
margin: 0;
min-height: 48px;
display: flex;
align-items: center;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form p:has(> input[type="submit"]) {
margin-top: 0;
overflow: hidden; /* contain the right-aligned button beside the float */
}
body.brpdp-v2.brpdp-affwp .affwp-login-form .affwp-lost-password {
clear: both;
}
/* --------------------------------------------------------------------------
23. Login page — tighten the vertical rhythm
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-login-form {
padding-top: 26px;
padding-bottom: 26px;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form legend {
margin-bottom: 14px;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form fieldset > p {
margin-bottom: 12px;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form fieldset > p > label {
margin-bottom: 4px;
}
body.brpdp-v2.brpdp-affwp .affwp-login-form .affwp-lost-password {
margin-top: 8px;
}
/* §24: login form — reduce bottom padding further */
body.brpdp-v2.brpdp-affwp .affwp-login-form {
padding-bottom: 14px;
}
/* §25: login card — more breathing room above and below the form container */
body.brpdp-v2.brpdp-affwp .affwp-login-form {
margin-top: 60px;
margin-bottom: 64px;
}
/* --------------------------------------------------------------------------
26. Registration form — parity with the login card (§23–§25)
Same fieldset/
/legend structure as login, so the same rhythm applies.
Unverified on-screen: public registration is currently disabled (the
[affiliate_registration] shortcode renders nothing while off).
-------------------------------------------------------------------------- */
body.brpdp-v2.brpdp-affwp .affwp-register-form {
padding-top: 26px;
padding-bottom: 14px;
margin-top: 60px;
margin-bottom: 64px;
}
body.brpdp-v2.brpdp-affwp .affwp-register-form legend {
margin-bottom: 14px;
}
body.brpdp-v2.brpdp-affwp .affwp-register-form fieldset > p {
margin-bottom: 12px;
}
body.brpdp-v2.brpdp-affwp .affwp-register-form fieldset > p > label {
margin-bottom: 4px;
}
/* =====================================================================
UNIFIED TITLE STYLING (2026-07-02)
Geist · weight 600 · tracking -1px · #181410
Targets: dashboard tab-nav labels (incl. active) + per-tab content
headings (h2/h3/h4). Active tab keeps its red underline bar.
===================================================================== */
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li a,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard-tabs li.active a {
font-family: var(--brpdp-sans);
font-weight: 600;
letter-spacing: -1px;
color: #181410;
}
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard h2,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard h3,
body.brpdp-v2.brpdp-affwp #affwp-affiliate-dashboard h4,
body.brpdp-v2.brpdp-affwp .affwp-tab-content h2,
body.brpdp-v2.brpdp-affwp .affwp-tab-content h3,
body.brpdp-v2.brpdp-affwp .affwp-tab-content h4 {
font-family: var(--brpdp-sans);
font-weight: 600;
letter-spacing: -1px;
color: #181410;
}