Make banner and button styling configurable via CSS custom properties

Sites had to copy the entire stylesheet to change colors or sizing.
Every value is now backed by a --cookie-* custom property with the
original value as fallback, so sites can override just what they need
from their own CSS. Also fixes the README's @import path, which had
gone stale since the stylesheet was renamed and moved in 5597e11.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

README.md

@@ -49,10 +49,10 @@ structure with `_partials` and `_shortcode` directories with leading underscores
    ```
 
 6. Ensure that the SCSS style sheet is being loaded, e.g. by adding this line to
-   your main *.css file:
+   your main *.scss file:
 
    ```scss
-   @import "hugo_cookie_consent/style";   
+   @import "hugo_cookie_consent";
    ```
 
 7. Optionally, insert a `hugo_cookie_consent/settings` partial somewhere on your
@@ -85,8 +85,51 @@ hugo_cookie_consent:
 | `matomo_host`        | URL of the Matomo host.                    |
 | `matomo_site_id`     | Matomo site ID to use for tracking.        |
 
+## Styling
+
+The banner and its buttons are styled with a small set of [CSS custom
+properties][css-vars], each with a sensible default baked in. To adjust the
+look of the banner on your site, set any of these properties in your own
+stylesheet (no need to copy or override `hugo_cookie_consent.scss`):
+
+```css
+:root {
+  --cookie-banner-bg: #1e293b;
+  --cookie-banner-color: #f1f5f9;
+  --cookie-accept-bg: #16a34a;
+  --cookie-decline-bg: #dc2626;
+}
+```
+
+| Custom property                  | Default         | Applies to                                  |
+|----------------------------------|-----------------|---------------------------------------------|
+| `--cookie-banner-bg`             | `#4A5568`       | Banner background                           |
+| `--cookie-banner-color`          | `#E2E8F0`       | Banner text color                           |
+| `--cookie-banner-border-color`   | `#e2e2e2`       | Banner border                               |
+| `--cookie-banner-border-radius`  | `12px`          | Banner corner radius                        |
+| `--cookie-banner-shadow`         | `0 0 36px #111` | Banner drop shadow                          |
+| `--cookie-banner-max-width`      | `480px`         | Banner max width                            |
+| `--cookie-banner-top`            | `2.5rem`        | Banner distance from top of viewport        |
+| `--cookie-banner-padding`        | `1rem 1.25rem`  | Banner inner padding                        |
+| `--cookie-banner-font-size`      | `14px`          | Banner message text size                    |
+| `--cookie-banner-z-index`        | `9999`          | Banner stacking order                       |
+| `--cookie-button-padding`        | `.45rem 1rem`   | All buttons                                 |
+| `--cookie-button-border-radius`  | `8px`           | All buttons                                 |
+| `--cookie-button-border-color`   | `#ccc`          | All buttons (overridden by the three below) |
+| `--cookie-button-font-size`      | `13px`          | All buttons                                 |
+| `--cookie-accept-bg`             | `#4A5E52`       | Accept button background                    |
+| `--cookie-accept-color`          | `#fff`          | Accept button text                          |
+| `--cookie-accept-border-color`   | `#1a1a1a`       | Accept button border                        |
+| `--cookie-decline-bg`            | `#2D3748`       | Decline button background                   |
+| `--cookie-decline-color`         | `#fff`          | Decline button text                         |
+| `--cookie-decline-border-color`  | `#1a1a1a`       | Decline button border                       |
+| `--cookie-settings-bg`           | `#272b2e`       | Settings-shortcode button background        |
+| `--cookie-settings-color`        | `#fff`          | Settings-shortcode button text              |
+| `--cookie-settings-border-color` | `#1a1a1a`       | Settings-shortcode button border            |
+
 [anthropic claude]: https://claude.ai
+[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 [gdpr]: https://en.wikipedia.org/wiki/GDPR
 [matomo]: https://matomo.org
 [mod-doc]: https://gohugo.io/hugo-modules/use-modules/#import
-[v0.146.0]: https://github.com/gohugoio/hugo/releases/tag/v0.146.0
+[v0.146.0]: https://github.com/gohugoio/hugo/releases/tag/v0.146.0

assets/scss/hugo_cookie_consent.scss

@@ -1,20 +1,20 @@
 #cookie-banner {
-  color: #E2E8F0;
+  color: var(--cookie-banner-color, #E2E8F0);
-  background-color: #4A5568;
+  background-color: var(--cookie-banner-bg, #4A5568);
   position: fixed;
-  top: 2.5rem;
+  top: var(--cookie-banner-top, 2.5rem);
   left: 50%;
   transform: translateX(-50%);
   width: calc(100vw - 2rem);
-  max-width: 480px;
+  max-width: var(--cookie-banner-max-width, 480px);
-  border: 1px solid #e2e2e2;
+  border: 1px solid var(--cookie-banner-border-color, #e2e2e2);
-  border-radius: 12px;
+  border-radius: var(--cookie-banner-border-radius, 12px);
-  padding: 1rem 1.25rem;
+  padding: var(--cookie-banner-padding, 1rem 1.25rem);
-  box-shadow: 0 0 36px #111;
+  box-shadow: var(--cookie-banner-shadow, 0 0 36px #111);
   display: flex;
   align-items: center;
   gap: 1rem;
-  z-index: 9999;
+  z-index: var(--cookie-banner-z-index, 9999);
   transition: opacity 0.5s ease;
 
   @media (max-width: 420px) {
@@ -31,7 +31,7 @@
 
 #cookie-banner p {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--cookie-banner-font-size, 14px);
   flex: 1;
 }
 
@@ -51,22 +51,28 @@
 
 #cookie-banner button {
   margin: 0.1rem 0;
-  padding: .45rem 1rem;
+  padding: var(--cookie-button-padding, .45rem 1rem);
-  border-radius: 8px;
+  border-radius: var(--cookie-button-border-radius, 8px);
-  border: 1px solid #ccc;
+  border: 1px solid var(--cookie-button-border-color, #ccc);
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--cookie-button-font-size, 13px);
   white-space: nowrap;
 }
 
 #cookie-accept {
-  background: #4A5E52; color: #fff; border-color: #1a1a1a;
+  background: var(--cookie-accept-bg, #4A5E52);
+  color: var(--cookie-accept-color, #fff);
+  border-color: var(--cookie-accept-border-color, #1a1a1a);
 }
 
 #cookie-decline {
-  background: #2D3748; color: #fff; border-color: #1a1a1a;
+  background: var(--cookie-decline-bg, #2D3748);
+  color: var(--cookie-decline-color, #fff);
+  border-color: var(--cookie-decline-border-color, #1a1a1a);
 }
 
 #cookie-settings-button {
-  background: #272b2e; color: #fff; border-color: #1a1a1a;
+  background: var(--cookie-settings-bg, #272b2e);
+  color: var(--cookie-settings-color, #fff);
+  border-color: var(--cookie-settings-border-color, #1a1a1a);
 }