Cookie Banner — Northweek

Implementación personalizada del banner de cookies para la marca Northweek. La estructura y el comportamiento son idénticos a la variante EU & USA, con las siguientes diferencias visuales. El comportamiento interactivo es gestionado por el JavaScript compartido entre las tres variantes.

Logo: imagen externa desde la CDN de Northweek (no SVG inline).
Icono +: SVG inline con forma de cruz (en lugar de carácter de texto).
Texto "Ocultar detalles": color azul #3860be.
z-index inicial del panel: 0 (en EU & USA el panel no declara z-index hasta el estado .open).
Botón cerrar: SVG × inline en vez de texto.

Comportamiento

La barra principal aparece fija hasta que el usuario toma una decisión.
El overlay oscuro (#cookiebanner-overlay) bloquea el scroll de la página cuando el panel de preferencias está abierto.
El panel de preferencias se abre con transición de opacidad y se cierra con el botón × o con "Confirmar selección".
Cada categoría de cookies es expandible/colapsable — el icono + (SVG) rota 45° para indicar estado abierto.
En móvil los botones se apilan verticalmente; en escritorio (≥600px) se disponen en fila invertida.

Variables de plantilla

Los placeholders entre [# #] son sustituidos dinámicamente por Cookiebot:

Placeholder	Descripción
`[#LANGUAGE#]`	Código de idioma del documento (ej. `es`, `en`, `fr`).
`[#TEXTDIRECTION#]`	Dirección del texto: `ltr` o `rtl`.
`[#TITLE#]`	Título del banner y del panel de preferencias.
`[#TEXT#]`	Mensaje principal del banner.
`[#ACCEPT#]`	Texto del botón "Aceptar todo".
`[#DECLINE#]`	Texto del botón "Rechazar todo".
`[#CUSTOMIZE#]`	Texto del botón "Personalizar".
`[#COOKIESGENERALINTRO#]`	Introducción general a las cookies en el panel de preferencias.
`[#COOKIETYPE_NECESSARY_RAW#]`	Etiqueta de la categoría "Necesarias".
`[#COOKIETYPE_STATISTICS_RAW#]`	Etiqueta de la categoría "Estadísticas".
`[#COOKIETYPE_ADVERTISING_RAW#]`	Etiqueta de la categoría "Publicidad".
`[#COOKIETYPEINTRO_NECESSARY#]`	Descripción de las cookies necesarias.
`[#COOKIETYPEINTRO_STATISTICS#]`	Descripción de las cookies de estadísticas.
`[#COOKIETYPEINTRO_ADVERTISING#]`	Descripción de las cookies de publicidad.
`[#DETAILSHIDE#]`	Texto de "Ocultar detalles" en la categoría de necesarias (se muestra en azul `#3860be`).
`[#LEVELOPTIN_ALLOW_SELECTION#]`	Texto del botón "Confirmar selección" en el footer del panel.

Categorías de cookies

Categoría	ID del checkbox	Modificable
Necesarias	`CybotCookiebotDialogBodyLevelButtonNecessary`	No (checkbox oculto, siempre activas)
Estadísticas	`CybotCookiebotDialogBodyLevelButtonStatistics`	Sí
Publicidad	`CybotCookiebotDialogBodyLevelButtonMarketing`	Sí
Preferencias	`CybotCookiebotDialogBodyLevelButtonPreferences`	No (oculto, vinculado a publicidad)

Comportamiento responsive

Propiedad	Móvil (`< 600px`)	Escritorio (`≥ 600px`)
Posición barra	Fija en la parte inferior	Centrada en la parte superior
Botones	Columna vertical	Fila horizontal invertida (accept → customize)
Panel preferencias	Pantalla completa	Modal centrado `575 × 601px`

Estructura HTML

<div id="cookiebanner" lang="[#LANGUAGE#]" dir="[#TEXTDIRECTION#]" ng-non-bindable>

  <!-- Overlay oscuro de fondo -->
  <div id="cookiebanner-overlay"></div>

  <!-- Barra principal -->
  <div id="cookiebannerWrapper">
    <div id="header-text">
      <p class="c-header">[#TITLE#]</p>
      <p class="c-message">[#TEXT#]</p>
    </div>
    <div class="buttons-container">
      <button type="button"
        id="CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll"
        class="custom-button accept-button">
        [#ACCEPT#]
      </button>
      <button type="button"
        id="CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll"
        class="custom-button">
        [#DECLINE#]
      </button>
      <button type="button" id="config-button" class="custom-button">
        [#CUSTOMIZE#]
      </button>
    </div>
    <div style="clear: both"></div>
  </div>

  <!-- Panel de preferencias -->
  <div class="cookiebannerPreferencesWrapper">
    <header>
      <!-- Logo Northweek (imagen externa desde CDN) -->
      <div class="cookiebannerPreferences__logo">
        <img
          src="https://www.northweek.com/on/demandware.static/-/Sites-NorthweekWorldwide-Library/default/dw0d5d9f67/images/LOGO_NORTHWEEK_BLACK.png"
          alt="Hawkers"
        />
      </div>
      <!-- Botón cerrar con SVG inline -->
      <button type="button" id="close-preferences">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#202020">
          <path clip-rule="evenodd" fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414
               L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1
               1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" />
        </svg>
      </button>
    </header>

    <main>
      <!-- Texto introductorio -->
      <section class="preferences-privacy">
        <h2 style="margin-bottom: 8px">[#TITLE#]</h2>
        <p>[#COOKIESGENERALINTRO#]</p>
      </section>

      <!-- Categorías de cookies (acordeón) -->
      <section class="preferences-consent">
        <div style="margin-top: 16px">

          <!-- Necesarias (siempre activas) -->
          <div class="preferences-consent__option-wrapper">
            <button type="button" class="preferences-consent__option">
              <span class="preferences-consent__option__plus"><!-- SVG cruz --></span>
              <span>[#COOKIETYPE_NECESSARY_RAW#]</span>
              <!-- Ocultar detalles: texto azul #3860be -->
              <span class="preferences-consent__option__right"
                style="font-size: 13px; color: #3860be">
                [#DETAILSHIDE#]
              </span>
              <input type="checkbox" id="CybotCookiebotDialogBodyLevelButtonNecessary"
                style="display: none" />
            </button>
            <aside><p>[#COOKIETYPEINTRO_NECESSARY#]</p></aside>
          </div>

          <!-- Estadísticas -->
          <div class="preferences-consent__option-wrapper">
            <button type="button" class="preferences-consent__option">
              <span class="preferences-consent__option__plus"><!-- SVG cruz --></span>
              <span>[#COOKIETYPE_STATISTICS_RAW#]</span>
              <input id="CybotCookiebotDialogBodyLevelButtonStatistics"
                class="preferences-consent__option__right hw-form-checkbox"
                type="checkbox" />
            </button>
            <aside><p>[#COOKIETYPEINTRO_STATISTICS#]</p></aside>
          </div>

          <!-- Publicidad -->
          <div class="preferences-consent__option-wrapper">
            <button type="button" class="preferences-consent__option">
              <span class="preferences-consent__option__plus"><!-- SVG cruz --></span>
              <span>[#COOKIETYPE_ADVERTISING_RAW#]</span>
              <input id="CybotCookiebotDialogBodyLevelButtonMarketing"
                class="preferences-consent__option__right hw-form-checkbox"
                type="checkbox" />
              <!-- Preferencias: oculto, vinculado internamente -->
              <input style="display: none"
                id="CybotCookiebotDialogBodyLevelButtonPreferences"
                type="checkbox" />
            </button>
            <aside><p>[#COOKIETYPEINTRO_ADVERTISING#]</p></aside>
          </div>

        </div>
      </section>
    </main>

    <footer>
      <button type="button" class="confirm-selection"
        id="CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection">
        [#LEVELOPTIN_ALLOW_SELECTION#]
      </button>
    </footer>
  </div>

</div>

Clases y selectores CSS principales

Barra principal
Panel preferencias

Selector	Descripción
`#cookiebannerWrapper`	Contenedor de la barra. Fondo `#202020`, ancho máx. `700px`.
`#cookiebanner .c-header`	Título en blanco, negrita.
`#cookiebanner p.c-message ~ p`	Texto secundario bajo el mensaje principal.
`.buttons-container`	Flex column (móvil) / flex row-reverse (escritorio).
`.custom-button`	Botón base: fondo `#202020`, texto blanco.
`.accept-button`	Variante: fondo blanco, texto negro (invierte colores).

Selector	Descripción
`.cookiebannerPreferencesWrapper`	Drawer de preferencias. `z-index: 0` inicial, `opacity: 0`.
`.cookiebannerPreferencesWrapper.open`	Estado visible: `z-index: 21474836475`, `opacity: 1`.
`#cookiebannerWrapper:has(+ .cookiebannerPreferencesWrapper.open)`	Eleva el z-index de la barra mientras el panel está abierto.
`#cookiebanner-overlay`	Fondo oscuro semitransparente que bloquea la UI.
`.preferences-consent__option-wrapper`	Fila de categoría con bordes laterales e inferior (el primero también superior).
`.preferences-consent__option.open ~ aside`	Muestra la descripción de la categoría cuando está expandida.
`.preferences-consent__option__plus`	SVG cruz (12×12px) que rota 45° al abrir la categoría.
`.preferences-consent__option__right:is(input)`	Checkbox de consentimiento alineado a la derecha (20×20px).
`.cookiebannerPreferences__logo`	Logotipo Northweek: `<img>` con ancho 100px.
`.close-preferences` / `.allow-all` / `.confirm-selection`	Botones de acción del panel: fondo `#202020`, texto blanco.

Diferencias respecto a EU & USA

Aspecto	EU & USA	Northweek
Logo del panel	SVG Hawkers inline	`<img>` CDN Northweek
Icono expandir categoría	Carácter `+` (texto)	SVG inline (cruz)
Color texto "Ocultar detalles"	Hereda color por defecto	Azul `#3860be`
`z-index` inicial del panel	Sin declarar	`0`
Botón cerrar	SVG × (idéntico)	SVG × (idéntico)

Notas

IDs reservados por Cookiebot

Los id de los botones (CybotCookiebotDialogBodyLevelButton*) son utilizados internamente por Cookiebot para registrar el consentimiento. No los cambies ni los elimines.

Abrir/cerrar categorías

El comportamiento de acordeón se controla añadiendo/quitando la clase open al elemento .preferences-consent__option. Al estar presente, el <aside> adyacente pasa de display: none a display: block y el SVG + rota 45°.

Activar el panel de preferencias

El panel se muestra añadiendo la clase open. CSS bloquea automáticamente el scroll del documento mediante :has(.cookiebannerPreferencesWrapper.open) en html y body.

Comportamiento​

Variables de plantilla​

Categorías de cookies​

Comportamiento responsive​

Estructura HTML​

Clases y selectores CSS principales​

Diferencias respecto a EU & USA​

Notas​