Skip to content

Commit a40fbc2

Browse files
guyofeckclaude
guyofeck
and
claude
authored
Re-skin Wix cookie consent banner + settings modal for the dark theme (#38)
Wix's injected consent UI ([data-hook^="ccsu-"]) ships a light "wix.com" look (white surfaces, Madefor font, outlined pill buttons) that clashes on this dark site and inherits our light --fg onto white = unreadable. Re-skin the bottom banner and the "Advanced" settings modal onto the site's design tokens, all via global !important rules on the stable data-hooks (the consent bundle injects its stylesheet after ours and regenerates its hashed classes each build). - Dark card surfaces, accent primary, Inter body / mono controls. - Keyboard focus: on-brand :focus-visible rings (the bundle's native ring is built for its light theme and washes out on dark) — WCAG 2.4.7 / 1.4.11. - Consent symmetry: "Decline all" kept at full --fg so reject reads as an equal-weight choice to accept (not a demoted, dark-pattern nudge). - Pin every banner control (incl. "Advanced"/decline links) to --mono so none falls back to the unloaded Madefor (serif) — they declare their own font-family, which beats the inherited wrapper rule. - Modal headings in mono, scaled to 0.85em so the wider mono glyphs keep the bundle's row footprint instead of wrapping and misaligning the toggles. - Modal panel matched via `> section` AND `> div:not([data-hook])`, and accent-color on the wrapper to theme native consent toggles. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 6ce534f commit a40fbc2

1 file changed

Lines changed: 152 additions & 0 deletions

File tree

‎src/layouts/Layout.astro‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,158 @@ const ogUrl = canonical ?? SITE_URL + "/";
5454
})} />
5555
<link rel="preconnect" href="https://rsms.me/" />
5656
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
57+
<!--
58+
Wix's injected cookie consent UI ([data-hook^="ccsu-"]) ships a light
59+
"wix.com" look: white surfaces, Madefor brand font, black-outlined pill
60+
buttons. On this dark site that clashed (and it sets no text color of its
61+
own, so it inherited our light --fg onto white = unreadable). Re-skin both
62+
the bottom banner AND the "Advanced" settings modal onto the site's design
63+
tokens: dark card surfaces, Inter body / mono buttons, accent primary.
64+
65+
Notes:
66+
- !important is required: the consent bundle injects its stylesheet AFTER
67+
ours, so equal-specificity rules would lose on source order.
68+
- Target the stable data-hooks, not the hashed classes (.aspXfg, ._4q546…)
69+
the bundle regenerates each build. The one exception is the modal panel,
70+
which has no hook — it's the only child of [data-hook="ccsu-modal"].
71+
- We set the font on the shared wrapper so nothing falls back to serif
72+
(the bundle requests Madefor-Text, which we no longer load).
73+
-->
74+
<style is:global>
75+
/* Shared: font for the whole consent UI (banner + modal). accent-color
76+
natively themes the modal's consent toggles/checkboxes (inherits down)
77+
so they don't render as a light-theme control on our dark surfaces. */
78+
[data-hook="ccsu-banner-wrapper"] {
79+
font-family: var(--sans) !important;
80+
accent-color: var(--accent) !important;
81+
}
82+
83+
/* Keyboard focus: the bundle's native ring is built for its light theme
84+
and washes out on dark. Give every interactive control a visible,
85+
on-brand focus-visible ring (WCAG 2.4.7 / 1.4.11). */
86+
[data-hook="ccsu-banner-accept"]:focus-visible,
87+
[data-hook="ccsu-banner-decline-all"]:focus-visible,
88+
[data-hook="ccsu-banner-decline"]:focus-visible,
89+
[data-hook="ccsu-banner-settings"]:focus-visible,
90+
[data-hook="ccsu-cookie-policy-link"]:focus-visible,
91+
[data-hook="ccsu-modal-save"]:focus-visible,
92+
[data-hook="ccsu-modal-close"]:focus-visible {
93+
outline: 2px solid var(--accent) !important;
94+
outline-offset: 2px !important;
95+
border-radius: 8px !important;
96+
}
97+
98+
/* ---- Bottom banner ---- */
99+
[data-hook="ccsu-banner-root"] {
100+
background: var(--bg-card) !important;
101+
color: var(--fg) !important;
102+
border-top: 1px solid var(--border-strong) !important;
103+
box-shadow: 0 -10px 40px -16px rgba(0, 0, 0, 0.7) !important;
104+
}
105+
[data-hook="ccsu-cookie-policy-link"] {
106+
color: var(--accent) !important;
107+
}
108+
/* "Advanced"/settings + decline are text-link controls. They carry the
109+
bundle's own font-family: Madefor-Text, which beats the --sans we set
110+
on the wrapper (a directly-matched rule wins over an inherited one),
111+
so without an explicit family they render in the unloaded-Madefor
112+
fallback — a different font from the mono action buttons beside them.
113+
Pin them to --mono so every banner control shares one font. */
114+
[data-hook="ccsu-banner-settings"],
115+
[data-hook="ccsu-banner-decline"] {
116+
color: var(--fg-muted) !important;
117+
font-family: var(--mono) !important;
118+
}
119+
[data-hook="ccsu-banner-settings"]:hover,
120+
[data-hook="ccsu-banner-decline"]:hover {
121+
color: var(--fg) !important;
122+
}
123+
[data-hook="ccsu-banner-accept"],
124+
[data-hook="ccsu-banner-decline-all"],
125+
[data-hook="ccsu-modal-save"] {
126+
font-family: var(--mono) !important;
127+
border-radius: 8px !important;
128+
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
129+
}
130+
/* Reject must read as an equal-weight choice to Accept, not a demoted
131+
one — keep its label at full --fg (consent symmetry, not a dark
132+
pattern). It stays visually distinct via fill: outlined vs. accent. */
133+
[data-hook="ccsu-banner-decline-all"] {
134+
background: transparent !important;
135+
border: 1px solid var(--border-strong) !important;
136+
color: var(--fg) !important;
137+
}
138+
[data-hook="ccsu-banner-decline-all"]:hover {
139+
background: var(--bg-card-2) !important;
140+
border-color: var(--fg-faint) !important;
141+
}
142+
[data-hook="ccsu-banner-accept"],
143+
[data-hook="ccsu-modal-save"] {
144+
background: var(--accent-fade) !important;
145+
/* Derive the border from --accent so a rebrand moves it too,
146+
instead of leaving a hardcoded yellow behind. */
147+
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
148+
color: var(--accent) !important;
149+
}
150+
[data-hook="ccsu-banner-accept"]:hover,
151+
[data-hook="ccsu-modal-save"]:hover {
152+
background: var(--accent) !important;
153+
border-color: var(--accent) !important;
154+
color: var(--bg) !important;
155+
}
156+
157+
/* ---- "Advanced" settings modal ---- */
158+
/* Scrim behind the dialog */
159+
[data-hook="ccsu-modal"] {
160+
background: rgba(0, 0, 0, 0.6) !important;
161+
}
162+
/* The dialog panel (only child of the scrim; has no data-hook of its
163+
own). Match both <section> and a hookless <div> so a bundle markup
164+
change doesn't strip the panel back to white-on-light. */
165+
[data-hook="ccsu-modal"] > section,
166+
[data-hook="ccsu-modal"] > div:not([data-hook]) {
167+
background: var(--bg-card) !important;
168+
color: var(--fg) !important;
169+
border: 1px solid var(--border-strong) !important;
170+
border-radius: var(--radius) !important;
171+
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7) !important;
172+
}
173+
/*
174+
The modal's text elements declare their own `font-family: Madefor-Text`,
175+
so the wrapper rule above can't reach them — without Madefor loaded they
176+
fall back to Times (serif). Force the site font directly on each hook.
177+
*/
178+
/* Headings use the mono face so the "Advanced" panel matches the site's
179+
terminal/button aesthetic (the modal buttons are already mono);
180+
the descriptive paragraphs below stay --sans for readability. */
181+
[data-hook="ccsu-modal-title"],
182+
[data-hook="ccsu-modal-s1-title"],
183+
[data-hook="ccsu-modal-s2-title"] {
184+
color: var(--fg) !important;
185+
font-family: var(--mono) !important;
186+
/* Mono glyphs are ~20% wider and carry a taller line box than the
187+
Madefor these rows were sized for, so headings wrapped and the
188+
toggles fell out of alignment. Scale down to recover roughly the
189+
original footprint and pin the line-height to the bundle's
190+
rhythm — keeps the mono look without breaking the layout. */
191+
font-size: 0.85em !important;
192+
line-height: 1.3 !important;
193+
letter-spacing: 0 !important;
194+
}
195+
[data-hook="ccsu-modal-content"],
196+
[data-hook="ccsu-modal-s1-text"],
197+
[data-hook="ccsu-modal-s2-text"],
198+
[data-hook="ccsu-modal-recommended-checkbox-label"] {
199+
color: var(--fg-muted) !important;
200+
font-family: var(--sans) !important;
201+
}
202+
[data-hook="ccsu-modal-close"] {
203+
color: var(--fg-muted) !important;
204+
}
205+
[data-hook="ccsu-modal-close"]:hover {
206+
color: var(--fg) !important;
207+
}
208+
</style>
57209
</head>
58210
<body>
59211
<slot />

0 commit comments

Comments
 (0)