| 1 |
/* Intro card spacing (the white card itself is styled by the shared .charitable-title-card rules). */ |
| 2 |
.charitable-site-analysis .charitable-title-card { margin-bottom: 16px; } |
| 3 |
.charitable-site-analysis .charitable-title-card-content h2 { margin-top: 20px; } |
| 4 |
.charitable-site-analysis-disclosure { color: #757781; max-width: 760px; } |
| 5 |
.charitable-site-analysis-actions { margin-top: 23px; margin-bottom: 0; } |
| 6 |
|
| 7 |
/* ---- Score hero (PLACEHOLDER preview - static until the score backend lands) ---- */ |
| 8 |
.charitable-sa-score { |
| 9 |
display: flex; |
| 10 |
gap: 28px; |
| 11 |
align-items: flex-start; |
| 12 |
flex-wrap: wrap; |
| 13 |
margin: 18px 0 22px; |
| 14 |
padding: 20px 22px; |
| 15 |
border: 1px solid #e6e6eb; |
| 16 |
border-radius: 6px; |
| 17 |
background: #fafafb; |
| 18 |
} |
| 19 |
.charitable-sa-ring { |
| 20 |
position: relative; |
| 21 |
width: 120px; |
| 22 |
height: 120px; |
| 23 |
border-radius: 50%; |
| 24 |
flex: none; |
| 25 |
display: grid; |
| 26 |
place-items: center; |
| 27 |
} |
| 28 |
.charitable-sa-ring--est { background: conic-gradient(#dba617 0 48%, #edeef0 48% 100%); } |
| 29 |
.charitable-sa-ring::before { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: #fafafb; } |
| 30 |
.charitable-sa-ring-v { position: relative; text-align: center; } |
| 31 |
.charitable-sa-ring-v b { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: #1d2327; } |
| 32 |
.charitable-sa-ring-v s { font-size: 11px; color: #757781; text-decoration: none; } |
| 33 |
.charitable-sa-score-meta { flex: 1; min-width: 280px; } |
| 34 |
.charitable-sa-score-title { margin: 2px 0 6px; font-size: 16px; } |
| 35 |
.charitable-sa-estpill { |
| 36 |
display: inline-block; |
| 37 |
font-size: 11px; |
| 38 |
font-weight: 700; |
| 39 |
letter-spacing: .03em; |
| 40 |
text-transform: uppercase; |
| 41 |
color: #757781; |
| 42 |
background: #fff; |
| 43 |
border: 1px solid #e6e6eb; |
| 44 |
border-radius: 20px; |
| 45 |
padding: 2px 9px; |
| 46 |
vertical-align: middle; |
| 47 |
margin-left: 6px; |
| 48 |
} |
| 49 |
.charitable-sa-score-desc { color: #757781; margin: 0 0 14px; max-width: 560px; } |
| 50 |
.charitable-sa-dims { display: flex; gap: 18px; flex-wrap: wrap; } |
| 51 |
.charitable-sa-dim { flex: 1; min-width: 120px; } |
| 52 |
.charitable-sa-dim-n { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #757781; } |
| 53 |
.charitable-sa-dim-bar { display: block; height: 7px; background: #edeef0; border-radius: 4px; margin-top: 6px; overflow: hidden; } |
| 54 |
.charitable-sa-dim-bar i { display: block; height: 100%; } |
| 55 |
.charitable-sa-dim--locked .charitable-sa-dim-bar { background: transparent; border: 1px dashed #c7cace; } |
| 56 |
.charitable-sa-dim--locked .charitable-sa-dim-n { color: #aeb1b6; } |
| 57 |
.charitable-sa-dim-hint { display: block; font-size: 10.5px; font-weight: 600; color: #3f7539; margin-top: 4px; } |
| 58 |
|
| 59 |
/* "?" help icon + hover/focus tooltip beside each scored-area label. */ |
| 60 |
.charitable-sa-tip { |
| 61 |
display: inline-flex; align-items: center; justify-content: center; |
| 62 |
width: 14px; height: 14px; margin-left: 5px; |
| 63 |
border-radius: 50%; background: #c3c4c7; color: #fff; |
| 64 |
font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; |
| 65 |
text-transform: none; cursor: help; position: relative; vertical-align: middle; |
| 66 |
} |
| 67 |
.charitable-sa-tip:hover, .charitable-sa-tip:focus { background: #757781; outline: none; } |
| 68 |
.charitable-sa-tip::after { |
| 69 |
content: attr( data-tip ); |
| 70 |
position: absolute; bottom: calc( 100% + 8px ); left: 50%; transform: translateX( -50% ); |
| 71 |
width: 210px; |
| 72 |
background: #1d2327; color: #fff; |
| 73 |
text-transform: none; letter-spacing: 0; text-align: left; |
| 74 |
font-size: 12px; font-weight: 400; line-height: 1.4; |
| 75 |
padding: 8px 10px; border-radius: 4px; white-space: normal; |
| 76 |
opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 100; pointer-events: none; |
| 77 |
} |
| 78 |
.charitable-sa-tip::before { |
| 79 |
content: ''; position: absolute; bottom: calc( 100% + 2px ); left: 50%; transform: translateX( -50% ); |
| 80 |
border: 6px solid transparent; border-top-color: #1d2327; |
| 81 |
opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 100; pointer-events: none; |
| 82 |
} |
| 83 |
.charitable-sa-tip:hover::after, .charitable-sa-tip:focus::after, |
| 84 |
.charitable-sa-tip:hover::before, .charitable-sa-tip:focus::before { opacity: 1; visibility: visible; } |
| 85 |
|
| 86 |
/* ---- Charitable-branded green buttons (brand green #5AA152, hover #3f7539) instead of WP blue. ---- */ |
| 87 |
.charitable-site-analysis .button-primary { |
| 88 |
background: #5AA152; |
| 89 |
border-color: #5AA152; |
| 90 |
color: #fff; |
| 91 |
border-radius: 5px; |
| 92 |
box-shadow: none; |
| 93 |
text-shadow: none; |
| 94 |
} |
| 95 |
.charitable-site-analysis .button-primary:hover, |
| 96 |
.charitable-site-analysis .button-primary:focus { |
| 97 |
background: #3f7539; |
| 98 |
border-color: #3f7539; |
| 99 |
color: #fff; |
| 100 |
box-shadow: none; |
| 101 |
} |
| 102 |
.charitable-site-analysis .button-primary:disabled, |
| 103 |
.charitable-site-analysis .button-primary[disabled] { |
| 104 |
background: #a7cba2 !important; |
| 105 |
border-color: #a7cba2 !important; |
| 106 |
color: #fff !important; |
| 107 |
} |
| 108 |
|
| 109 |
/* Per-recommendation CTA: solid orange (matches the "More Information" addon buttons), right-aligned. */ |
| 110 |
.charitable-sa-rec .button { |
| 111 |
flex: none; |
| 112 |
margin-left: auto; |
| 113 |
white-space: nowrap; |
| 114 |
color: #fff; |
| 115 |
background: #f99d33; |
| 116 |
border-color: #f99d33; |
| 117 |
border-radius: 5px; |
| 118 |
box-shadow: none; |
| 119 |
text-shadow: none; |
| 120 |
text-transform: capitalize; |
| 121 |
font-weight: 700; |
| 122 |
} |
| 123 |
.charitable-sa-rec .button:hover, |
| 124 |
.charitable-sa-rec .button:focus { |
| 125 |
color: #fff; |
| 126 |
background: #ef8f1c; |
| 127 |
border-color: #ef8f1c; |
| 128 |
box-shadow: none; |
| 129 |
} |
| 130 |
|
| 131 |
/* Results render inside a white card (matching the other report tabs) only once populated. */ |
| 132 |
#charitable-site-analysis-results:not(:empty) { |
| 133 |
margin-top: 0; |
| 134 |
max-width: 900px; |
| 135 |
} |
| 136 |
|
| 137 |
.charitable-sa-group { margin: 0 0 24px; } |
| 138 |
.charitable-sa-group:last-child { margin-bottom: 0; } |
| 139 |
.charitable-sa-group h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #757781; } |
| 140 |
.charitable-sa-rec { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #e6e6eb; border-radius: 5px; margin: 0 0 10px; background: #fbfbfc; max-width: 820px; } |
| 141 |
.charitable-sa-loading { display: flex; align-items: center; gap: 8px; padding: 26px 4px; color: #50575e; font-size: 14px; } |
| 142 |
.charitable-sa-loading .spinner { float: none; margin: 0; } |
| 143 |
.charitable-sa-rec-icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } |
| 144 |
.charitable-sa-rec-icon img { max-width: 40px; max-height: 40px; width: auto; height: auto; display: block; } |
| 145 |
.charitable-sa-rec-icon--fa .fa { font-size: 22px; line-height: 1; color: #5AA152; } |
| 146 |
.charitable-sa-rec-main { flex: 0 1 auto; min-width: 0; max-width: 550px; } |
| 147 |
.charitable-sa-rec strong { display: block; font-size: 14px; color: #1d2327; text-transform: capitalize; } |
| 148 |
.charitable-sa-rec .charitable-sa-gain { display: inline-block; font-size: 11px; font-weight: 700; color: #3f7539; background: #eaf4e8; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; text-transform: none; } |
| 149 |
.charitable-sa-rec .charitable-sa-detail { color: #757781; margin: 4px 0 0; } |
| 150 |
.charitable-sa-rec .charitable-sa-after { color: #9a9da3; font-style: italic; } |
| 151 |
.charitable-sa-more { font-size: 13px; font-weight: 600; color: #3f7539; cursor: pointer; margin: 2px 0 0; display: inline-block; } |
| 152 |
.charitable-sa-more:hover { text-decoration: underline; } |
| 153 |
|
| 154 |
/* Recommended-plan box: branded green accent. */ |
| 155 |
.charitable-sa-plan { padding: 18px 20px; border: 1px solid #5AA152; border-radius: 5px; background: #f3f8f2; max-width: 820px; margin-top: 4px; } |
| 156 |
.charitable-sa-plan strong { font-size: 15px; color: #1d2327; } |
| 157 |
.charitable-sa-plan > div { color: #757781; margin: 6px 0 4px; } |
| 158 |
.charitable-site-analysis .charitable-sa-plan .button-primary { background: #f99d33; border-color: #f99d33; color: #fff; text-shadow: none; text-transform: capitalize; font-weight: 700; } |
| 159 |
.charitable-site-analysis .charitable-sa-plan .button-primary:hover, |
| 160 |
.charitable-site-analysis .charitable-sa-plan .button-primary:focus { background: #ef8f1c; border-color: #ef8f1c; color: #fff; } |
| 161 |
|
| 162 |
/* Band pill (complete score) and live-hero top margin reset. */ |
| 163 |
.charitable-sa-band { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 20px; padding: 2px 10px; color: #fff; vertical-align: middle; margin-left: 6px; text-transform: capitalize; } |
| 164 |
.charitable-sa-score--live { margin-top: 0; margin-bottom: 18px; max-width: 820px; } |
| 165 |
/* Once a live report renders, replace the pre-run explainer with the results, keeping only the headline. */ |
| 166 |
.charitable-site-analysis.charitable-sa-has-results .charitable-title-card-content > *:not( h2 ) { display: none; } |
| 167 |
|
| 168 |
/* ---- Intro: flat (no card chrome) so the sample reads as a preview, not a live panel. ---- */ |
| 169 |
.charitable-site-analysis .charitable-title-card.charitable-container { |
| 170 |
background: transparent; |
| 171 |
border: 0; |
| 172 |
border-radius: 0; |
| 173 |
padding: 0; |
| 174 |
} |
| 175 |
|
| 176 |
/* Larger, more legible disclosure + consent copy. */ |
| 177 |
.charitable-site-analysis .charitable-site-analysis-disclosure { font-size: 14.5px; line-height: 1.6; } |
| 178 |
.charitable-site-analysis .charitable-site-analysis-consent { display: flex; align-items: center; gap: 12px; max-width: 900px; } |
| 179 |
|
| 180 |
/* ---- Sample ("Example data") hero: blur the illustrative score and overlay a clear label. ---- */ |
| 181 |
.charitable-sa-ring--sample { background: conic-gradient( #5AA152 0 72%, #edeef0 72% 100% ); } |
| 182 |
.charitable-sa-sample { position: relative; margin: 4px 0 22px; max-width: 900px; } |
| 183 |
.charitable-sa-sample .charitable-sa-score { margin: 0; filter: blur( 2.5px ); opacity: .7; user-select: none; } |
| 184 |
.charitable-sa-sample-badge { |
| 185 |
position: absolute; |
| 186 |
top: 50%; |
| 187 |
left: 50%; |
| 188 |
transform: translate( -50%, -50% ); |
| 189 |
z-index: 2; |
| 190 |
background: rgba( 29, 35, 39, .9 ); |
| 191 |
color: #fff; |
| 192 |
font-size: 15px; |
| 193 |
font-weight: 700; |
| 194 |
letter-spacing: .08em; |
| 195 |
text-transform: uppercase; |
| 196 |
padding: 10px 22px; |
| 197 |
border-radius: 6px; |
| 198 |
white-space: nowrap; |
| 199 |
box-shadow: 0 2px 12px rgba( 0, 0, 0, .18 ); |
| 200 |
} |
| 201 |
|
| 202 |
/* ---- Pre-run explainer: "what you get" value list + send/never-send privacy columns. ---- */ |
| 203 |
.charitable-site-analysis-intro { font-size: 14.5px; line-height: 1.6; max-width: 900px; color: #3c434a; font-style: normal; } |
| 204 |
.charitable-sa-value { max-width: 900px; margin: 2px 0 22px; } |
| 205 |
.charitable-sa-value-title { margin: 0 0 10px; font-size: 15px; color: #1d2327; } |
| 206 |
.charitable-sa-value ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } |
| 207 |
.charitable-sa-value li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: #3c434a; } |
| 208 |
.charitable-sa-value li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #5AA152; font-weight: 700; } |
| 209 |
.charitable-sa-value li strong { color: #1d2327; } |
| 210 |
|
| 211 |
/* ---- The four scored areas as color-coded icon cards. ---- */ |
| 212 |
.charitable-sa-area-cards { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 12px; max-width: 900px; margin: 0 0 22px; } |
| 213 |
@media screen and ( max-width: 1100px ) { .charitable-sa-area-cards { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } |
| 214 |
.charitable-sa-area-card { flex: 1 1 190px; min-width: 180px; background: #fff; border: 1px solid #e6e6eb; border-radius: 8px; padding: 16px 16px 18px; } |
| 215 |
.charitable-sa-area-card .charitable-sa-area-icon { display: block; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 12px; text-align: center; font-size: 20px; line-height: 44px; } |
| 216 |
.charitable-sa-area-name { display: block; font-weight: 700; font-size: 14px; color: #1d2327; margin-bottom: 4px; } |
| 217 |
.charitable-sa-area-desc { display: block; font-size: 13px; line-height: 1.5; color: #646970; } |
| 218 |
.charitable-sa-area--activation .charitable-sa-area-icon { color: #3f7539; background: #eaf4e8; } |
| 219 |
.charitable-sa-area--health .charitable-sa-area-icon { color: #1e5f8f; background: #e6f0f8; } |
| 220 |
.charitable-sa-area--growth .charitable-sa-area-icon { color: #a86a00; background: #fbf1da; } |
| 221 |
.charitable-sa-area--optimization .charitable-sa-area-icon { color: #6438b0; background: #efe8f9; } |
| 222 |
|
| 223 |
.charitable-sa-privacy-note { font-size: 13px; color: #757781; margin: 6px 0 4px; max-width: 900px; } |
| 224 |
/* The container floats/blocks card links at 23px; force this one to flow inline at the note's own size. */ |
| 225 |
.charitable-site-analysis .charitable-sa-privacy-note a, |
| 226 |
.charitable-site-analysis .charitable-sa-toggle-label a { display: inline !important; float: none !important; font-size: inherit !important; line-height: inherit !important; color: #2271b1; text-decoration: underline; } |
| 227 |
.charitable-site-analysis .charitable-sa-privacy-note a:hover, |
| 228 |
.charitable-site-analysis .charitable-sa-toggle-label a:hover { text-decoration: underline; } |
| 229 |
|
| 230 |
/* ---- Usage-data toggle (switch built from a checkbox). ---- */ |
| 231 |
.charitable-sa-toggle { position: relative; display: inline-flex; flex: none; cursor: pointer; } |
| 232 |
.charitable-sa-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } |
| 233 |
.charitable-sa-toggle-track { position: relative; flex: none; width: 40px; height: 22px; background: #c3c4c7; border-radius: 22px; transition: background .15s ease; } |
| 234 |
.charitable-sa-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba( 0, 0, 0, .25 ); transition: transform .15s ease; } |
| 235 |
.charitable-sa-toggle input:checked + .charitable-sa-toggle-track { background: #5AA152; } |
| 236 |
.charitable-sa-toggle input:checked + .charitable-sa-toggle-track .charitable-sa-toggle-thumb { transform: translateX( 18px ); } |
| 237 |
.charitable-sa-toggle input:focus-visible + .charitable-sa-toggle-track { box-shadow: 0 0 0 2px rgba( 90, 161, 82, .4 ); } |
| 238 |
.charitable-sa-toggle-label { font-size: 14px; color: #3c434a; line-height: 1.45; } |
| 239 |
.charitable-sa-toggle-label strong { color: #1d2327; } |
| 240 |
|
| 241 |
/* "Last analyzed X ago" note next to the Refresh link. */ |
| 242 |
.charitable-sa-refresh-row { margin: 16px 0 0; } |
| 243 |
.charitable-sa-analyzed { color: #757781; font-size: 13px; } |
| 244 |
.charitable-sa-refresh-wait { color: #8c8f94; font-size: 13px; font-style: italic; } |
| 245 |
|
