The repo for Purrform's main BigCommerce store.
refactor: clean up Feline Grimace Scale styles and remove unused marketing tokens
+223
-199
+87
-32
assets/js/theme/custom/feline-grimace-scale.js
+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
-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
assets/scss/custom/main.scss
+77
-92
assets/scss/custom/pages/_diet-builder.scss
+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
-1
assets/scss/custom/pages/_dry-matter-basis-calculator.scss
+59
-55
assets/scss/custom/pages/_feline-grimace-scale.scss
+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;