The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: clean up Feline Grimace Scale styles and remove unused marketing tokens

+223 -199
+87 -32
assets/js/theme/custom/feline-grimace-scale.js
··· 8 8 label: 'Ear Position', 9 9 options: [ 10 10 { 11 - score: 0, label: 'Ears facing forward', sublabel: 'Absent', 11 + score: 0, 12 + label: 'Ears facing forward', 13 + sublabel: 'Absent', 12 14 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-0.jpg?t=1771863537" alt="Ear position - absent" loading="lazy">', 13 15 }, 14 16 { 15 - score: 1, label: 'Ears slightly pulled apart', sublabel: 'Moderately present or uncertain', 17 + score: 1, 18 + label: 'Ears slightly pulled apart', 19 + sublabel: 'Moderately present or uncertain', 16 20 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-1.jpg?t=1771863537" alt="Ear position - moderately present" loading="lazy">', 17 21 }, 18 22 { 19 - score: 2, label: 'Ears rotated outwards', sublabel: 'Markedly present', 23 + score: 2, 24 + label: 'Ears rotated outwards', 25 + sublabel: 'Markedly present', 20 26 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-2.jpg?t=1771863538" alt="Ear position - markedly present" loading="lazy">', 21 27 }, 22 28 ], ··· 26 32 label: 'Orbital Tightening', 27 33 options: [ 28 34 { 29 - score: 0, label: 'Eyes opened', sublabel: 'Absent', 35 + score: 0, 36 + label: 'Eyes opened', 37 + sublabel: 'Absent', 30 38 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-0.jpg?t=1771863539" alt="Orbital tightening - absent" loading="lazy">', 31 39 }, 32 40 { 33 - score: 1, label: 'Partially closed eyes', sublabel: 'Moderately present or uncertain', 41 + score: 1, 42 + label: 'Partially closed eyes', 43 + sublabel: 'Moderately present or uncertain', 34 44 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-1.jpg?t=1771863539" alt="Orbital tightening - moderately present" loading="lazy">', 35 45 }, 36 46 { 37 - score: 2, label: 'Squinted eyes', sublabel: 'Markedly present', 47 + score: 2, 48 + label: 'Squinted eyes', 49 + sublabel: 'Markedly present', 38 50 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-2.jpg?t=1771863540" alt="Orbital tightening - markedly present" loading="lazy">', 39 51 }, 40 52 ], ··· 44 56 label: 'Muzzle Tension', 45 57 options: [ 46 58 { 47 - score: 0, label: 'Relaxed (round shape)', sublabel: 'Absent', 59 + score: 0, 60 + label: 'Relaxed (round shape)', 61 + sublabel: 'Absent', 48 62 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-0.jpg?t=1771863541" alt="Muzzle tension - absent" loading="lazy">', 49 63 }, 50 64 { 51 - score: 1, label: 'Mild tension', sublabel: 'Moderately present or uncertain', 65 + score: 1, 66 + label: 'Mild tension', 67 + sublabel: 'Moderately present or uncertain', 52 68 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-1.jpg?t=1771863542" alt="Muzzle tension - moderately present" loading="lazy">', 53 69 }, 54 70 { 55 - score: 2, label: 'Tense (elliptical shape)', sublabel: 'Markedly present', 71 + score: 2, 72 + label: 'Tense (elliptical shape)', 73 + sublabel: 'Markedly present', 56 74 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-2.jpg?t=1771863542" alt="Muzzle tension - markedly present" loading="lazy">', 57 75 }, 58 76 ], ··· 62 80 label: 'Whiskers Change', 63 81 options: [ 64 82 { 65 - score: 0, label: 'Loose and curved', sublabel: 'Absent', 83 + score: 0, 84 + label: 'Loose and curved', 85 + sublabel: 'Absent', 66 86 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-0.jpg?t=1771863543" alt="Whiskers change - absent" loading="lazy">', 67 87 }, 68 88 { 69 - score: 1, label: 'Slightly curved or straight (closer together)', sublabel: 'Moderately present or uncertain', 89 + score: 1, 90 + label: 'Slightly curved or straight (closer together)', 91 + sublabel: 'Moderately present or uncertain', 70 92 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-1.jpg?t=1771863544" alt="Whiskers change - moderately present" loading="lazy">', 71 93 }, 72 94 { 73 - score: 2, label: 'Straight and moving forward', sublabel: 'Markedly present', 95 + score: 2, 96 + label: 'Straight and moving forward', 97 + sublabel: 'Markedly present', 74 98 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-2.jpg?t=1771863545" alt="Whiskers change - markedly present" loading="lazy">', 75 99 }, 76 100 ], ··· 80 104 label: 'Head Position', 81 105 options: [ 82 106 { 83 - score: 0, label: 'Head above the shoulder line', sublabel: 'Absent', 107 + score: 0, 108 + label: 'Head above the shoulder line', 109 + sublabel: 'Absent', 84 110 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-0.jpg?t=1771863545" alt="Head position - absent" loading="lazy">', 85 111 }, 86 112 { 87 - score: 1, label: 'Head aligned with the shoulder line', sublabel: 'Moderately present or uncertain', 113 + score: 1, 114 + label: 'Head aligned with the shoulder line', 115 + sublabel: 'Moderately present or uncertain', 88 116 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-1.jpg?t=1771863546" alt="Head position - moderately present" loading="lazy">', 89 117 }, 90 118 { 91 - score: 2, label: 'Head below the shoulder line or tilted down', sublabel: 'Markedly present', 119 + score: 2, 120 + label: 'Head below the shoulder line or tilted down', 121 + sublabel: 'Markedly present', 92 122 img: '<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-2.jpg?t=1771863547" alt="Head position - markedly present" loading="lazy">', 93 123 }, 94 124 ], ··· 121 151 } 122 152 123 153 function getInterpText(total) { 124 - if (total === 0) return 'This cat is not in pain. If you are a cat owner and are concerned, please consult your veterinary surgeon.'; 125 - if (total <= 3) return 'This cat is not in pain or has mild pain. Pain should be re-evaluated at regular intervals since FGS scores could increase, and the cat might require analgesics.'; 126 - if (total <= 8) return 'This cat is likely to be in pain. This score indicates the need for additional analgesia. This decision should be made by a veterinary surgeon based on clinical judgement. If in doubt, reassess in 10–15 minutes. Clinical judgement will differentiate if the FGS scores are high due to pain, rather than other factors such as stress, fear or sedation.'; 154 + if (total === 0) 155 + return 'This cat is not in pain. If you are a cat owner and are concerned, please consult your veterinary surgeon.'; 156 + if (total <= 3) 157 + return 'This cat is not in pain or has mild pain. Pain should be re-evaluated at regular intervals since FGS scores could increase, and the cat might require analgesics.'; 158 + if (total <= 8) 159 + return 'This cat is likely to be in pain. This score indicates the need for additional analgesia. This decision should be made by a veterinary surgeon based on clinical judgement. If in doubt, reassess in 10–15 minutes. Clinical judgement will differentiate if the FGS scores are high due to pain, rather than other factors such as stress, fear or sedation.'; 127 160 return 'This cat is likely to be in severe pain. This score indicates the need for additional analgesia. This decision should be made by a veterinary surgeon. If in doubt, reassess in 10–15 minutes. Clinical judgement will differentiate if the FGS scores are high due to pain, rather than other factors such as stress, fear or sedation.'; 128 161 } 129 162 ··· 131 164 132 165 export default class FelineGrimaceScale extends PageManager { 133 166 onReady() { 134 - this.scores = { ears: null, eyes: null, muzzle: null, whiskers: null, head: null }; 167 + this.scores = { 168 + ears: null, 169 + eyes: null, 170 + muzzle: null, 171 + whiskers: null, 172 + head: null, 173 + }; 135 174 this.buildUI(); 136 175 this.updateScorePanel(); 137 176 } ··· 148 187 totalEl.textContent = total; 149 188 totalEl.className = `total-number ${colorClass}`; 150 189 totalEl.classList.add('pop-animate'); 151 - totalEl.addEventListener('animationend', () => totalEl.classList.remove('pop-animate'), { once: true }); 190 + totalEl.addEventListener( 191 + 'animationend', 192 + () => totalEl.classList.remove('pop-animate'), 193 + { once: true }, 194 + ); 152 195 153 196 const badge = document.getElementById('interp-badge'); 154 197 badge.className = `interp-badge ${getBadgeClass(total)}`; 155 198 badge.textContent = getBadgeLabel(total); 156 199 157 - document.getElementById('interp-text').textContent = getInterpText(total); 200 + document.getElementById('interp-text').textContent = 201 + getInterpText(total); 158 202 159 203 const fill = document.getElementById('progress-fill'); 160 204 fill.style.width = `${(total / 10) * 100}%`; 161 205 fill.className = `progress-fill ${colorClass}`; 162 206 163 - unitIds.forEach(id => { 207 + unitIds.forEach((id) => { 164 208 const el = document.getElementById(`score-val-${id}`); 165 209 if (el) { 166 - el.textContent = this.scores[id] !== null ? this.scores[id] : '—'; 167 - el.style.color = this.scores[id] !== null ? 'var(--fgs-green)' : 'var(--fgs-text-muted)'; 210 + el.textContent = 211 + this.scores[id] !== null ? this.scores[id] : '—'; 212 + el.style.color = 213 + this.scores[id] !== null ? '#546153' : '#687d6a'; 168 214 } 169 215 }); 170 216 171 - unitIds.forEach(id => { 217 + unitIds.forEach((id) => { 172 218 const unitBadge = document.getElementById(`unit-badge-${id}`); 173 219 if (unitBadge) { 174 220 if (this.scores[id] !== null) { ··· 196 242 breakdown.appendChild(item); 197 243 }); 198 244 199 - units.forEach(unit => { 245 + units.forEach((unit) => { 200 246 const card = document.createElement('div'); 201 247 card.className = 'unit-card'; 202 248 card.innerHTML = /* html */ ` ··· 205 251 <span class="unit-score-badge" id="unit-badge-${unit.id}">Not scored</span> 206 252 </div> 207 253 <div class="options-row" role="group" aria-label="${unit.label}"> 208 - ${unit.options.map(opt => /* html */ ` 254 + ${unit.options 255 + .map( 256 + (opt) => /* html */ ` 209 257 <button class="option-btn" data-unit="${unit.id}" data-score="${opt.score}" aria-pressed="false"> 210 258 <div class="score-pill">${opt.score}</div> 211 259 <div class="cat-illustration">${opt.img}</div> 212 260 <div class="option-label">${opt.label}</div> 213 261 <div class="option-sublabel">${opt.sublabel}</div> 214 262 </button> 215 - `).join('')} 263 + `, 264 + ) 265 + .join('')} 216 266 </div> 217 267 `; 218 268 container.appendChild(card); 219 269 }); 220 270 221 - container.addEventListener('click', e => { 271 + container.addEventListener('click', (e) => { 222 272 const btn = e.target.closest('.option-btn'); 223 273 if (!btn) return; 224 274 const unitId = btn.dataset.unit; 225 275 const score = parseInt(btn.dataset.score, 10); 226 276 227 - const siblings = btn.closest('.options-row').querySelectorAll('.option-btn'); 228 - siblings.forEach(s => { s.classList.remove('selected'); s.setAttribute('aria-pressed', 'false'); }); 277 + const siblings = btn 278 + .closest('.options-row') 279 + .querySelectorAll('.option-btn'); 280 + siblings.forEach((s) => { 281 + s.classList.remove('selected'); 282 + s.setAttribute('aria-pressed', 'false'); 283 + }); 229 284 230 285 btn.classList.add('selected'); 231 286 btn.setAttribute('aria-pressed', 'true'); ··· 234 289 this.updateScorePanel(); 235 290 }); 236 291 } 237 - } 292 + }
-18
assets/scss/custom/_marketing-tokens.scss
··· 1 - // ── Shared Marketing Page Tokens ─────────────────────────────────────── 2 - // Used by Diet Builder, Feline Grimace Scale, and any future marketing/tool 3 - // pages that follow this design language. 4 - // Individual page files alias these into their own namespace (--db-*, --fgs-*) 5 - // so they can override per-page without breaking others. 6 - 7 - :root { 8 - --brand-bg: #f7f4f0; 9 - --brand-card: #fff; 10 - --brand-green: #546052; 11 - --brand-green-light: #edf1ec; 12 - --brand-green-mid: #859e7d; 13 - --brand-text: #2a3329; 14 - --brand-text-muted: #687e6b; 15 - --brand-border: #d4ddd3; 16 - --brand-radius: 16px; 17 - --brand-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); 18 - }
-1
assets/scss/custom/main.scss
··· 1 1 @import 'variables'; 2 - @import 'marketing-tokens'; 3 2 4 3 /* Custom Page Styling */ 5 4 @import 'pages/cart';
+77 -92
assets/scss/custom/pages/_diet-builder.scss
··· 1 1 // ── Diet Builder ───────────────────────────────────────────────────── 2 2 3 - // CSS Variables — aliased from shared marketing tokens (_marketing-tokens.scss) 4 - :root { 5 - --db-bg: var(--brand-bg); 6 - --db-card: var(--brand-card); 7 - --db-green: var(--brand-green); 8 - --db-green-light: var(--brand-green-light); 9 - --db-green-mid: var(--brand-green-mid); 10 - --db-text: var(--brand-text); 11 - --db-text-muted: var(--brand-text-muted); 12 - --db-selected: var(--brand-green); 13 - --db-border: var(--brand-border); 14 - --db-radius: var(--brand-radius); 15 - --db-transition: var(--brand-transition); 16 - } 17 - 18 3 // Import fonts 19 4 // @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap'); 20 5 ··· 22 7 .diet-builder-wrapper { 23 8 width: 100vw; 24 9 margin-left: calc(-50vw + 50%); 25 - background: var(--db-bg); 10 + background: $marketing-brand-bg; 26 11 min-height: 100vh; 27 12 position: relative; 28 13 padding: 2rem 1rem; ··· 45 30 animation: dbFadeDown 0.6s ease both; 46 31 47 32 em { 48 - color: var(--db-text-muted); 33 + color: $marketing-brand-text-muted; 49 34 font-size: 0.9rem; 50 35 } 51 36 ··· 58 43 h1 { 59 44 font-weight: 700; 60 45 font-size: clamp(1.8rem, 5vw, 2.8rem); 61 - color: var(--db-green); 46 + color: $marketing-brand-green; 62 47 line-height: 1.1; 63 48 letter-spacing: -0.5px; 64 49 margin-bottom: 1rem; ··· 67 52 p { 68 53 font-size: 1rem; 69 54 font-weight: 300; 70 - color: var(--db-text-muted); 55 + color: $marketing-brand-text-muted; 71 56 line-height: 1.6; 72 57 max-width: 480px; 73 58 margin-inline: auto; ··· 97 82 98 83 .diet-builder-step__heading { 99 84 font-weight: 600; 100 - color: var(--db-green); 85 + color: $marketing-brand-green; 101 86 font-size: 1.5rem; 102 87 text-align: center; 103 88 margin-bottom: 0.5rem; 104 89 } 105 90 106 91 .diet-builder-step__sub-heading { 107 - color: var(--db-green); 92 + color: $marketing-brand-green; 108 93 font-size: 0.95rem; 109 94 text-align: center; 110 95 margin-bottom: 1.5rem; ··· 116 101 117 102 // ── Buttons ────────────────────────────────────────────────── 118 103 .diet-builder-btn--primary { 119 - transition: all var(--db-transition); 120 - border: 2px solid var(--db-green) !important; 104 + transition: all $marketing-brand-transition; 105 + border: 2px solid $marketing-brand-green; 121 106 color: white; 122 107 font-size: 1rem; 123 108 font-weight: 600; ··· 127 112 justify-content: center; 128 113 min-width: 120px; 129 114 height: 3rem; 130 - background-color: var(--db-green); 131 - border-radius: var(--db-radius); 115 + background-color: $marketing-brand-green; 116 + border-radius: $marketing-brand-radius; 132 117 cursor: pointer; 133 118 134 119 &:hover { 135 - background-color: white !important; 136 - color: var(--db-green) !important; 120 + background-color: white; 121 + color: $marketing-brand-green; 137 122 box-shadow: 0 4px 16px rgba(84, 96, 82, 0.2); 138 123 } 139 124 ··· 146 131 .diet-builder-btn--secondary { 147 132 background-color: white; 148 133 font-weight: 600; 149 - color: var(--db-green); 150 - border: 2px solid var(--db-green); 151 - transition: all var(--db-transition); 152 - border-radius: var(--db-radius); 134 + color: $marketing-brand-green; 135 + border: 2px solid $marketing-brand-green; 136 + transition: all $marketing-brand-transition; 137 + border-radius: $marketing-brand-radius; 153 138 text-align: center; 154 139 min-width: 120px; 155 140 height: 3rem; ··· 159 144 cursor: pointer; 160 145 161 146 &:hover { 162 - background-color: var(--db-green-light); 147 + background-color: $marketing-brand-green-light; 163 148 } 164 149 } 165 150 ··· 218 203 219 204 .diet-builder-col__img--adolescent { 220 205 height: 106px; 221 - margin: 44px 0 30px 0; 206 + margin: 44px 0 30px; 222 207 } 223 208 224 209 .diet-builder-col__img--preAdult { 225 210 height: 128px; 226 - margin: 22px 0 30px 0; 211 + margin: 22px 0 30px; 227 212 } 228 213 229 214 .diet-builder-col__img--adult { ··· 245 230 .diet-builder-age-form__dob-label { 246 231 display: block; 247 232 text-transform: uppercase; 248 - color: var(--db-text); 233 + color: $marketing-brand-text; 249 234 font-size: 0.8rem; 250 235 font-weight: 600; 251 236 letter-spacing: 1px; ··· 260 245 #cat-name { 261 246 width: 100%; 262 247 height: 3.5rem; 263 - border: 2px solid var(--db-border); 264 - border-radius: var(--db-radius); 265 - background-color: var(--db-card); 266 - color: var(--db-text); 248 + border: 2px solid $marketing-brand-border; 249 + border-radius: $marketing-brand-radius; 250 + background-color: $marketing-brand-card; 251 + color: $marketing-brand-text; 267 252 font-size: 1rem; 268 253 padding: 0 20px; 269 254 transition: 270 - border-color var(--db-transition), 271 - box-shadow var(--db-transition); 255 + border-color $marketing-brand-transition, 256 + box-shadow $marketing-brand-transition; 272 257 273 258 &:focus { 274 259 outline: none; 275 - border-color: var(--db-green); 260 + border-color: $marketing-brand-green; 276 261 box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1); 277 262 } 278 263 279 264 &::placeholder { 280 - color: var(--db-text-muted); 265 + color: $marketing-brand-text-muted; 281 266 } 282 267 } 283 268 ··· 309 294 label { 310 295 display: block; 311 296 text-transform: uppercase; 312 - color: var(--db-text); 297 + color: $marketing-brand-text; 313 298 font-size: 0.8rem; 314 299 font-weight: 600; 315 300 letter-spacing: 1px; ··· 320 305 input[type='email'] { 321 306 width: 100%; 322 307 height: 3.5rem; 323 - border: 2px solid var(--db-border); 324 - border-radius: var(--db-radius); 325 - background-color: var(--db-card); 326 - color: var(--db-text); 308 + border: 2px solid $marketing-brand-border; 309 + border-radius: $marketing-brand-radius; 310 + background-color: $marketing-brand-card; 311 + color: $marketing-brand-text; 327 312 font-size: 1rem; 328 313 padding: 0 20px; 329 314 transition: 330 - border-color var(--db-transition), 331 - box-shadow var(--db-transition); 315 + border-color $marketing-brand-transition, 316 + box-shadow $marketing-brand-transition; 332 317 333 318 &:focus { 334 319 outline: none; 335 - border-color: var(--db-green); 320 + border-color: $marketing-brand-green; 336 321 box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1); 337 322 } 338 323 339 324 &::placeholder { 340 - color: var(--db-text-muted); 325 + color: $marketing-brand-text-muted; 341 326 } 342 327 } 343 328 ··· 353 338 354 339 input { 355 340 height: 3.5rem; 356 - border: 2px solid var(--db-border); 357 - border-radius: var(--db-radius); 358 - background-color: var(--db-card); 359 - color: var(--db-text); 341 + border: 2px solid $marketing-brand-border; 342 + border-radius: $marketing-brand-radius; 343 + background-color: $marketing-brand-card; 344 + color: $marketing-brand-text; 360 345 font-size: 1rem; 361 346 text-align: center; 362 347 appearance: textfield; 363 - -moz-appearance: textfield; 364 348 transition: 365 - border-color var(--db-transition), 366 - box-shadow var(--db-transition); 349 + border-color $marketing-brand-transition, 350 + box-shadow $marketing-brand-transition; 367 351 368 352 &:focus { 369 353 outline: none; 370 - border-color: var(--db-green); 354 + border-color: $marketing-brand-green; 371 355 box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1); 372 356 } 373 357 374 358 &::-webkit-outer-spin-button, 375 359 &::-webkit-inner-spin-button { 376 - -webkit-appearance: none; 360 + appearance: none; 377 361 margin: 0; 378 362 } 379 363 380 364 &::placeholder { 381 - color: var(--db-text-muted); 365 + color: $marketing-brand-text-muted; 382 366 } 383 367 } 384 368 ··· 423 407 max-width: 250px; 424 408 425 409 .diet-builder-weight__label { 426 - color: var(--db-text); 410 + color: $marketing-brand-text; 427 411 font-weight: 600; 428 412 text-transform: uppercase; 429 413 font-size: 0.8rem; ··· 435 419 #weight_input { 436 420 width: 100%; 437 421 height: 3.5rem; 438 - border: 2px solid var(--db-border); 439 - border-radius: var(--db-radius); 440 - background-color: var(--db-card); 441 - color: var(--db-text); 422 + border: 2px solid $marketing-brand-border; 423 + border-radius: $marketing-brand-radius; 424 + background-color: $marketing-brand-card; 425 + color: $marketing-brand-text; 442 426 font-size: 1.2rem; 443 427 text-align: center; 444 428 appearance: textfield; 445 - -moz-appearance: textfield; 446 429 transition: 447 - border-color var(--db-transition), 448 - box-shadow var(--db-transition); 430 + border-color $marketing-brand-transition, 431 + box-shadow $marketing-brand-transition; 449 432 450 433 &:focus { 451 434 outline: none; 452 - border-color: var(--db-green); 435 + border-color: $marketing-brand-green; 453 436 box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1); 454 437 } 455 438 456 439 &::-webkit-outer-spin-button, 457 440 &::-webkit-inner-spin-button { 458 - -webkit-appearance: none; 441 + appearance: none; 459 442 margin: 0; 460 443 } 461 444 } ··· 584 567 align-items: center; 585 568 586 569 .diet-builder-ingredients__description { 587 - color: var(--db-text-muted); 570 + color: $marketing-brand-text-muted; 588 571 font-size: 0.95rem; 589 572 text-align: center; 590 573 max-width: 500px; ··· 610 593 } 611 594 612 595 .diet-builder-ingredients__card { 613 - background-color: var(--db-card); 614 - border: 2px solid var(--db-border); 615 - border-radius: var(--db-radius); 596 + background-color: $marketing-brand-card; 597 + border: 2px solid $marketing-brand-border; 598 + border-radius: $marketing-brand-radius; 616 599 padding: 16px 12px; 617 600 font-size: 0.9rem; 618 601 font-weight: 600; 619 - color: var(--db-text); 602 + color: $marketing-brand-text; 620 603 text-align: center; 621 604 cursor: pointer; 622 - transition: all var(--db-transition); 605 + transition: all $marketing-brand-transition; 623 606 624 607 &:hover { 625 - background-color: var(--db-green-light); 626 - border-color: var(--db-green-mid); 608 + background-color: $marketing-brand-green-light; 609 + border-color: $marketing-brand-green-mid; 627 610 } 628 611 629 612 &--selected { 630 - background-color: var(--db-green); 613 + background-color: $marketing-brand-green; 631 614 color: white; 632 - border-color: var(--db-green); 615 + border-color: $marketing-brand-green; 633 616 634 617 &:hover { 635 618 background-color: #465444; ··· 675 658 } 676 659 677 660 .diet-builder-health__card { 678 - background-color: var(--db-card); 679 - border: 2px solid var(--db-border); 680 - border-radius: var(--db-radius); 661 + background-color: $marketing-brand-card; 662 + border: 2px solid $marketing-brand-border; 663 + border-radius: $marketing-brand-radius; 681 664 padding: 16px 12px; 682 665 display: flex; 683 666 align-items: center; 684 667 justify-content: center; 685 668 font-size: 0.85rem; 686 669 font-weight: 600; 687 - color: var(--db-text); 670 + color: $marketing-brand-text; 688 671 text-align: center; 689 672 cursor: pointer; 690 - transition: all var(--db-transition); 673 + transition: all $marketing-brand-transition; 691 674 min-height: 60px; 692 675 693 676 &:hover { 694 - background-color: var(--db-green-light); 695 - border-color: var(--db-green-mid); 677 + background-color: $marketing-brand-green-light; 678 + border-color: $marketing-brand-green-mid; 696 679 } 697 680 698 681 &--selected { 699 - background-color: var(--db-green); 682 + background-color: $marketing-brand-green; 700 683 color: white; 701 - border-color: var(--db-green); 684 + border-color: $marketing-brand-green; 702 685 703 686 &:hover { 704 687 background-color: #465444; ··· 1031 1014 .diet-builder-product-grid { 1032 1015 display: grid; 1033 1016 grid-template-columns: 1fr 1fr; 1034 - grid-gap: 13px; 1017 + gap: 13px; 1035 1018 1036 1019 @include breakpoint('medium') { 1037 1020 grid-template-columns: 1fr 1fr 1fr 1fr; ··· 1091 1074 opacity: 0; 1092 1075 transform: translateY(-16px); 1093 1076 } 1077 + 1094 1078 to { 1095 1079 opacity: 1; 1096 1080 transform: translateY(0); ··· 1102 1086 opacity: 0; 1103 1087 transform: translateY(20px); 1104 1088 } 1089 + 1105 1090 to { 1106 1091 opacity: 1; 1107 1092 transform: translateY(0);
-1
assets/scss/custom/pages/_dry-matter-basis-calculator.scss
··· 272 272 position: relative; 273 273 left: calc(-50vw + 50%); 274 274 padding: 3rem 0; 275 - background-color: $marketing-brand-green-light; 276 275 277 276 .dry-matter-info-table { 278 277 display: grid;
+59 -55
assets/scss/custom/pages/_feline-grimace-scale.scss
··· 3 3 // CSS Variables — aliased from shared marketing tokens (_marketing-tokens.scss) 4 4 // FGS-specific score colours are defined here only. 5 5 :root { 6 - --fgs-bg: var(--brand-bg); 7 - --fgs-card: var(--brand-card); 8 - --fgs-green: var(--brand-green); 9 - --fgs-green-light: var(--brand-green-light); 10 - --fgs-green-mid: var(--brand-green-mid); 11 - --fgs-text: var(--brand-text); 12 - --fgs-text-muted: var(--brand-text-muted); 13 - --fgs-border: var(--brand-border); 14 6 --fgs-score-low: #4caf87; 15 7 --fgs-score-mid: #e8a020; 16 8 --fgs-score-high: #e05555; 17 - --fgs-radius: var(--brand-radius); 18 - --fgs-transition: var(--brand-transition); 19 9 } 20 10 21 11 .fgs-page { 22 12 width: 100vw; 23 13 margin-left: calc(-50vw + 50%); 24 - background: var(--fgs-bg); 14 + background: $marketing-brand-bg; 25 15 min-height: 100vh; 26 16 position: relative; 27 17 ··· 74 64 h1 { 75 65 font-size: clamp(1.8rem, 5vw, 2.8rem); 76 66 font-weight: 700; 77 - color: var(--fgs-green); 67 + color: $marketing-brand-green; 78 68 line-height: 1.1; 79 69 letter-spacing: -0.5px; 80 70 } 81 71 82 72 p { 83 73 margin-top: 10px; 84 - color: var(--fgs-text-muted); 74 + color: $marketing-brand-text-muted; 85 75 font-size: 0.95rem; 86 76 font-weight: 300; 87 77 max-width: 480px; ··· 108 98 // ── Instructions ────────────────────────────────────────────────────── 109 99 110 100 .fgs-instructions { 111 - background: var(--fgs-green-light); 112 - border-radius: var(--fgs-radius); 101 + background: $marketing-brand-green-light; 102 + border-radius: $marketing-brand-radius; 113 103 padding: 18px 22px; 114 104 margin-bottom: 32px; 115 105 font-size: 0.88rem; 116 - color: var(--fgs-text); 106 + color: $marketing-brand-text; 117 107 line-height: 1.7; 118 108 animation: fgsFadeDown 0.75s ease both; 119 109 120 110 strong { 121 - color: var(--fgs-green); 111 + color: $marketing-brand-green; 122 112 } 123 113 124 114 .fgs-wait-list { ··· 133 123 padding: 4px 14px; 134 124 font-size: 0.82rem; 135 125 font-weight: 500; 136 - color: var(--fgs-green); 137 - border: 1.5px solid var(--fgs-green-mid); 126 + color: $marketing-brand-green; 127 + border: 1.5px solid $marketing-brand-green-mid; 138 128 } 139 129 } 140 130 } ··· 142 132 // ── Action Unit Cards ───────────────────────────────────────────────── 143 133 144 134 .unit-card { 145 - background: var(--fgs-card); 146 - border-radius: var(--fgs-radius); 147 - border: 1.5px solid var(--fgs-border); 135 + background: $marketing-brand-card; 136 + border-radius: $marketing-brand-radius; 137 + border: 1.5px solid $marketing-brand-border; 148 138 margin-bottom: 24px; 149 139 overflow: hidden; 150 140 animation: fgsFadeUp 0.5s ease both; 151 141 box-shadow: 0 2px 20px #54605208; 152 - transition: box-shadow var(--fgs-transition); 142 + transition: box-shadow $marketing-brand-transition; 153 143 154 144 &:hover { 155 145 box-shadow: 0 6px 32px #54605214; ··· 158 148 &:nth-child(1) { 159 149 animation-delay: 0.1s; 160 150 } 151 + 161 152 &:nth-child(2) { 162 153 animation-delay: 0.15s; 163 154 } 155 + 164 156 &:nth-child(3) { 165 157 animation-delay: 0.2s; 166 158 } 159 + 167 160 &:nth-child(4) { 168 161 animation-delay: 0.25s; 169 162 } 163 + 170 164 &:nth-child(5) { 171 165 animation-delay: 0.3s; 172 166 } 173 167 } 174 168 175 169 .unit-header { 176 - background: var(--fgs-green); 170 + background: $marketing-brand-green; 177 171 color: white; 178 172 padding: 14px 22px; 179 173 display: flex; ··· 195 189 padding: 4px 14px; 196 190 font-size: 0.82rem; 197 191 font-weight: 600; 198 - transition: background var(--fgs-transition); 192 + transition: background $marketing-brand-transition; 199 193 200 194 &.selected { 201 195 background: white; 202 - color: var(--fgs-green); 196 + color: $marketing-brand-green; 203 197 } 204 198 } 205 199 } ··· 208 202 display: grid; 209 203 grid-template-columns: repeat(3, 1fr); 210 204 gap: 0; 211 - border-top: 1px solid var(--fgs-border); 205 + border-top: 1px solid $marketing-brand-border; 212 206 } 213 207 214 208 .option-btn { ··· 220 214 cursor: pointer; 221 215 border: none; 222 216 background: transparent; 223 - transition: background var(--fgs-transition); 224 - border-right: 1px solid var(--fgs-border); 217 + transition: background $marketing-brand-transition; 218 + border-right: 1px solid $marketing-brand-border; 225 219 outline: none; 226 220 text-align: center; 227 221 -webkit-tap-highlight-color: transparent; ··· 231 225 } 232 226 233 227 &:hover { 234 - background: var(--fgs-green-light); 228 + background: $marketing-brand-green-light; 235 229 } 236 230 237 231 &.selected { 238 - background: var(--fgs-green-light); 232 + background: $marketing-brand-green-light; 239 233 240 234 &::after { 241 235 content: ''; 242 236 position: absolute; 243 237 inset: 0; 244 - border: 2.5px solid var(--fgs-green); 238 + border: 2.5px solid $marketing-brand-green; 245 239 border-radius: 0; 246 240 pointer-events: none; 247 241 } 248 242 249 243 .score-pill { 250 - border-color: var(--fgs-green); 251 - background: var(--fgs-green); 244 + border-color: $marketing-brand-green; 245 + background: $marketing-brand-green; 252 246 color: white; 253 247 transform: scale(1.1); 254 248 } ··· 259 253 width: 32px; 260 254 height: 32px; 261 255 border-radius: 50%; 262 - border: 2.5px solid var(--fgs-border); 256 + border: 2.5px solid $marketing-brand-border; 263 257 display: flex; 264 258 align-items: center; 265 259 justify-content: center; 266 260 font-weight: 700; 267 261 font-size: 0.9rem; 268 - color: var(--fgs-text-muted); 262 + color: $marketing-brand-text-muted; 269 263 margin-bottom: 14px; 270 - transition: all var(--fgs-transition); 264 + transition: all $marketing-brand-transition; 271 265 background: white; 272 266 } 273 267 ··· 288 282 .option-label { 289 283 font-size: 0.8rem; 290 284 font-weight: 600; 291 - color: var(--fgs-text); 285 + color: $marketing-brand-text; 292 286 line-height: 1.3; 293 287 margin-bottom: 4px; 294 288 } 295 289 296 290 .option-sublabel { 297 291 font-size: 0.72rem; 298 - color: var(--fgs-text-muted); 292 + color: $marketing-brand-text-muted; 299 293 line-height: 1.3; 300 294 font-weight: 400; 301 295 } ··· 303 297 // ── Score Panel ─────────────────────────────────────────────────────── 304 298 305 299 .score-panel { 306 - background: var(--fgs-card); 307 - border-radius: var(--fgs-radius); 308 - border: 1.5px solid var(--fgs-border); 300 + background: $marketing-brand-card; 301 + border-radius: $marketing-brand-radius; 302 + border: 1.5px solid $marketing-brand-border; 309 303 margin-bottom: 24px; 310 304 overflow: hidden; 311 305 animation: fgsFadeUp 0.5s 0.4s ease both; ··· 313 307 } 314 308 315 309 .score-panel-header { 316 - background: var(--fgs-text); 310 + background: $marketing-brand-text; 317 311 color: white; 318 312 padding: 16px 22px; 319 313 display: flex; ··· 339 333 min-width: 100px; 340 334 text-align: center; 341 335 padding: 12px 8px; 342 - border-right: 1px solid var(--fgs-border); 336 + border-right: 1px solid $marketing-brand-border; 343 337 344 338 &:last-child { 345 339 border-right: none; ··· 351 345 font-weight: 600; 352 346 letter-spacing: 1.5px; 353 347 text-transform: uppercase; 354 - color: var(--fgs-text-muted); 348 + color: $marketing-brand-text-muted; 355 349 margin-bottom: 6px; 356 350 } 357 351 358 352 .score-item-value { 359 353 font-size: 1.6rem; 360 354 font-weight: 700; 361 - color: var(--fgs-text); 362 - transition: all var(--fgs-transition); 355 + color: $marketing-brand-text; 356 + transition: all $marketing-brand-transition; 363 357 } 364 358 365 359 .total-section { ··· 367 361 display: flex; 368 362 align-items: center; 369 363 gap: 24px; 370 - border-top: 1.5px solid var(--fgs-border); 364 + border-top: 1.5px solid $marketing-brand-border; 371 365 margin-top: 16px; 372 366 flex-wrap: wrap; 373 367 } ··· 384 378 &.color-0 { 385 379 color: var(--fgs-score-low); 386 380 } 381 + 387 382 &.color-mild { 388 383 color: var(--fgs-score-low); 389 384 } 385 + 390 386 &.color-pain { 391 387 color: var(--fgs-score-mid); 392 388 } 389 + 393 390 &.color-severe { 394 391 color: var(--fgs-score-high); 395 392 } ··· 400 397 font-weight: 600; 401 398 letter-spacing: 1.5px; 402 399 text-transform: uppercase; 403 - color: var(--fgs-text-muted); 400 + color: $marketing-brand-text-muted; 404 401 margin-bottom: 4px; 405 402 } 406 403 ··· 412 409 413 410 .total-out-of { 414 411 font-size: 1rem; 415 - color: var(--fgs-text-muted); 412 + color: $marketing-brand-text-muted; 416 413 font-weight: 300; 417 414 align-self: flex-end; 418 415 padding-bottom: 8px; ··· 440 437 background: #e8f5ef; 441 438 color: #2d7a59; 442 439 } 440 + 443 441 &.badge-pain { 444 442 background: #fff3e0; 445 443 color: #b56b00; 446 444 } 445 + 447 446 &.badge-severe { 448 447 background: #fde8e8; 449 448 color: #c0392b; ··· 453 452 .interp-text { 454 453 font-size: 0.85rem; 455 454 line-height: 1.6; 456 - color: var(--fgs-text); 455 + color: $marketing-brand-text; 457 456 transition: opacity 0.3s ease; 458 457 } 459 458 ··· 467 466 display: flex; 468 467 justify-content: space-between; 469 468 font-size: 0.75rem; 470 - color: var(--fgs-text-muted); 469 + color: $marketing-brand-text-muted; 471 470 margin-bottom: 6px; 472 471 font-weight: 500; 473 472 } 474 473 475 474 .progress-track { 476 475 height: 8px; 477 - background: var(--fgs-border); 476 + background: $marketing-brand-border; 478 477 border-radius: 20px; 479 478 overflow: hidden; 480 479 } ··· 491 490 &.color-pain { 492 491 background: var(--fgs-score-mid); 493 492 } 493 + 494 494 &.color-severe { 495 495 background: var(--fgs-score-high); 496 496 } ··· 526 526 527 527 .fgs-attribution { 528 528 font-size: 0.65rem; 529 - color: var(--fgs-text-muted); 529 + color: $marketing-brand-text-muted; 530 530 text-align: right; 531 531 padding: 0 22px 12px; 532 532 font-style: italic; ··· 539 539 opacity: 0; 540 540 transform: translateY(-16px); 541 541 } 542 + 542 543 to { 543 544 opacity: 1; 544 545 transform: translateY(0); ··· 550 551 opacity: 0; 551 552 transform: translateY(20px); 552 553 } 554 + 553 555 to { 554 556 opacity: 1; 555 557 transform: translateY(0); ··· 560 562 0% { 561 563 transform: scale(1); 562 564 } 565 + 563 566 50% { 564 567 transform: scale(1.15); 565 568 } 569 + 566 570 100% { 567 571 transform: scale(1); 568 572 } ··· 581 585 582 586 .option-btn { 583 587 border-right: none; 584 - border-bottom: 1px solid var(--fgs-border); 588 + border-bottom: 1px solid $marketing-brand-border; 585 589 flex-direction: row; 586 590 gap: 14px; 587 591 text-align: left;