# Hero Cover

> A cover hero: a full-width picture under a monochrome veil with the title at the bottom left. The picture opens from the top edge and settles, the title lines rise. CSS only.

Hero · hero, section, landing, entrance, cover, image, overlay, css-only · HTML and CSS only · no dependencies · updated 2026-10-24
Demo: https://kodza.dev/components/hero-cover/

## Files

The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard).

- [`kodza-hero-cover.css`](https://kodza.dev/registry/hero-cover/kodza-hero-cover.css) · 16.8 KB
- [`kodza-hero-cover.html`](https://kodza.dev/registry/hero-cover/kodza-hero-cover.html) · 1.5 KB · the markup, to adapt and paste into your page

**Can you run shell commands? Download the CSS, don't retype it.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths):

```bash
curl -fsSL --create-dirs -o kodza/kodza-hero-cover.css https://kodza.dev/registry/hero-cover/kodza-hero-cover.css
```

Then load the file from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS from the Code section only if you can't run commands, exactly as it is. (Windows PowerShell: `curl.exe`.)

## API

- Root: `.kodza-hero-cover`
- Variables (set them on the root element itself: it declares its own defaults):
  - `--kz-hero-cover-light: #f2f2f0`
  - `--kz-hero-cover-ink: #0a0a0a`
  - `--kz-hero-cover-dim: rgba(242, 242, 240, 0.8)`
  - `--kz-hero-cover-faint: rgba(242, 242, 240, 0.7)`
  - `--kz-hero-cover-glass: rgba(242, 242, 240, 0.14)`
  - `--kz-hero-cover-shade: rgba(10, 10, 10, 0.8)`
  - `--kz-hero-cover-base: #1c1c1c`
  - `--kz-hero-cover-bg: transparent`
  - `--kz-hero-cover-height: clamp(560px, 54vw, 800px)`
  - `--kz-hero-cover-gutter: clamp(12px, 2vw, 24px)`
  - `--kz-hero-cover-pad: clamp(24px, 4.5vw, 64px)`
  - `--kz-hero-cover-radius: 16px`
  - `--kz-hero-cover-position: 50% 50%`
  - `--kz-hero-cover-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace`
  - `--kz-hero-cover-ease: cubic-bezier(0.22, 1, 0.36, 1)`
  - `--kz-hero-cover-glide: cubic-bezier(0.6, 0, 0.1, 1)`
  - `--kz-hero-cover-soft-ease: cubic-bezier(0.25, 1, 0.5, 1)`

## Dark mode

The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS:

```css
@media (prefers-color-scheme: dark) {
  .kodza-hero-cover {
    --kz-hero-cover-base: #161616;
  }
}
```

A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-hero-cover { … }`); a single dark section, under that section's class.

Its images have dark versions next to them (`kz-steps-2400.webp` → `kz-steps-dark-2400.webp`). To swap them on a dark page: `<picture><source media="(prefers-color-scheme: dark)" srcset="…-dark-….webp"><img …></picture>`.

## Use it

### Plain HTML page

- CSS: `kodza/kodza-hero-cover.css` next to the page (the Files commands as they are), linked in `<head>`: `<link rel="stylesheet" href="kodza/kodza-hero-cover.css">`. Without a shell, paste it in a `<style>` in `<head>` instead. It only touches `kodza-` classes.
- HTML: where the component goes. Paste it as many times as you need: instances never interfere.
- No JS.
- Restyle with the `--kz-…` variables, set on the component's root element itself (the root declares its own defaults, so a value on an ancestor is ignored), and with the modifiers / attributes listed under API.
- Font: it takes the page's own. The Kodza look is Geist: `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap">`.

### Claude artifact (claude.ai)

- Paste the CSS in a `<style>`, in the artifact itself: it loads stylesheets only from Google Fonts and scripts only from a few CDNs, so no `<link>` or `<script src>` to Kodza.
- Writing the artifact file with a shell? Insert the downloaded files (Files) with a command instead of retyping them: a line `KODZA-CSS` alone inside the `<style>`, then `sed -e '/^KODZA-CSS$/{r kodza/kodza-hero-cover.css' -e 'd' -e '}' page.html > artifact.html`.
- Font: load Geist from Google Fonts (allowed): `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap">`.
- Images: the artifact blocks every other host, `kodza.dev` included, without an error. Embed each one as a `data:` URI, with a command if you can run one (`curl -s <url> | base64`; the 1400 px files weigh 10 to 30 KB), never by typing base64 out. If you can't run commands, keep the `<img>` with its `width` and `height`, and tell the user the picture stays blank inside the artifact.
- Dark mode: the viewer sets `data-theme="dark"` or `"light"` on `<html>`, or nothing when it follows the system. Write the Dark mode rules twice: inside `@media (prefers-color-scheme: dark)` with `:root:not([data-theme="light"])` in front of each selector, and with `:root[data-theme="dark"]` in front of each selector.

### WordPress

- HTML: a **Custom HTML** block (or a pattern / template part). WordPress keeps this markup as it is only for users allowed to post unfiltered HTML (Administrators; Super Admins on multisite): for anyone else it strips tags such as `<svg>`, `<input>` or `<dialog>`, so add it from the theme (a pattern or template part) instead.
- This one spans the page: a block theme keeps a Custom HTML block to the width of the text column, so put it inside a **Group** block set to **Full width**, with **Inner blocks use content width** turned off.
- CSS: the downloaded file goes in the theme, under `wp-content/themes/<your-theme>/kodza/` (the child theme if there is one), enqueued from its functions.php (or a code-snippets plugin):
  ```php
  add_action('wp_enqueue_scripts', function () {
    $dir = get_stylesheet_directory() . '/kodza/';
    $uri = get_stylesheet_directory_uri() . '/kodza/';
    wp_enqueue_style('kodza-hero-cover', $uri . 'kodza-hero-cover.css', [], filemtime($dir . 'kodza-hero-cover.css'));
  });
  ```
  Scoped to `kodza-` classes, the CSS never touches the theme.
- No access to the theme files? The CSS can also go, as it is, in **Appearance → Customize → Additional CSS** (classic theme) or **Styles → Additional CSS** in the Site Editor (block theme).
- No JS.
- Colours: it takes the colour of the text around it (or keeps its own monochrome): nothing to point at the theme.
- WordPress turns straight quotes and `--` into typographic ones in the text of a Custom HTML block (not inside `<code>` or `<pre>`).

#### With Elementor

- HTML: an **HTML** widget (Elementor shows it to administrators only). It keeps the code exactly as pasted, straight quotes included.
- This one spans the page: give the widget its own container, **Content Width: Full Width**, padding 0.
- CSS: as above. Elementor's Site Settings → Theme Style styles every button, field, link and image of the page, components included; the theme guard at the end of the CSS keeps the component's buttons, fields and link colours as they are.
- No child theme: the CSS can go in the HTML widget instead, in a `<style>` before the HTML.

### Shopify

- Files: `assets/kodza-hero-cover.css` (the Files commands with `-o assets/…`).
- In the section: `{{ 'kodza-hero-cover.css' | asset_url | stylesheet_tag }}`, then the HTML.

### React / Next.js

- Files, side by side (e.g. in `components/kodza/`): `HeroCover.tsx` (below), the CSS block under Code saved as `hero-cover.css`, both as they are. The HTML block is already inside the component: skip it.
- Use it: `import { HeroCover } from '@/components/kodza/HeroCover';` then `<HeroCover />`. Props: `vars` (the `--kz-…` variables listed under API, e.g. `vars={{ '--kz-hero-cover-light': … }}`), `className`, `style` and the other props of its `<section>` (`onClick`, `aria-…`).
- Next.js App Router: it is a Client Component already (`'use client'`). Pages Router: Next.js takes global CSS only in `pages/_app`, so move the `import './hero-cover.css'` line there.

```tsx
'use client';
// Kodza — Hero Cover, for React. From https://kodza.dev/components/hero-cover/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: hero-cover.css, the component's CSS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
import { useRef, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './hero-cover.css';

export type HeroCoverProps = Omit<ComponentPropsWithoutRef<'section'>, "children" | "vars"> & {
  /** Settings, as CSS variables on the root */
  vars?: {
    /** default: #f2f2f0 */
    "--kz-hero-cover-light"?: string | number;
    /** default: #0a0a0a */
    "--kz-hero-cover-ink"?: string | number;
    /** default: rgba(242, 242, 240, 0.8) */
    "--kz-hero-cover-dim"?: string | number;
    /** default: rgba(242, 242, 240, 0.7) */
    "--kz-hero-cover-faint"?: string | number;
    /** default: rgba(242, 242, 240, 0.14) */
    "--kz-hero-cover-glass"?: string | number;
    /** default: rgba(10, 10, 10, 0.8) */
    "--kz-hero-cover-shade"?: string | number;
    /** default: #1c1c1c */
    "--kz-hero-cover-base"?: string | number;
    /** default: transparent */
    "--kz-hero-cover-bg"?: string | number;
    /** default: clamp(560px, 54vw, 800px) */
    "--kz-hero-cover-height"?: string | number;
    /** default: clamp(12px, 2vw, 24px) */
    "--kz-hero-cover-gutter"?: string | number;
    /** default: clamp(24px, 4.5vw, 64px) */
    "--kz-hero-cover-pad"?: string | number;
    /** default: 16px */
    "--kz-hero-cover-radius"?: string | number;
    /** default: 50% 50% */
    "--kz-hero-cover-position"?: string | number;
    /** default: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace */
    "--kz-hero-cover-mono"?: string | number;
    /** default: cubic-bezier(0.22, 1, 0.36, 1) */
    "--kz-hero-cover-ease"?: string | number;
    /** default: cubic-bezier(0.6, 0, 0.1, 1) */
    "--kz-hero-cover-glide"?: string | number;
    /** default: cubic-bezier(0.25, 1, 0.5, 1) */
    "--kz-hero-cover-soft-ease"?: string | number;
  };
  className?: string;
};

export function HeroCover({ vars, className, style, ...rest }: HeroCoverProps) {
  const ref = useRef<ComponentRef<'section'>>(null);
  const classes = ["kodza-hero-cover", className].filter(Boolean).join(' ');
  // Everything the markup is made of: when it changes, React gets a fresh element (see the top)
  const key = JSON.stringify([classes, vars, style, rest]);

  return (
    <section key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
      <div className="kodza-hero-cover__frame">
        <div className="kodza-hero-cover__media">
          <div className="kodza-hero-cover__curtain">
            <div className="kodza-hero-cover__hold">
              <img src="https://kodza.dev/media/kz-steps-2400.webp" srcSet="https://kodza.dev/media/kz-steps-1400.webp 1400w, https://kodza.dev/media/kz-steps-2400.webp 2400w" sizes="100vw" alt="A concrete staircase climbing to the right under a flat light" width="2400" height="1600" fetchPriority="high" />
            </div>
          </div>
        </div>
        <div className="kodza-hero-cover__content">
          <div className="kodza-hero-cover__copy">
            <h1 className="kodza-hero-cover__title">
              <span className="kodza-hero-cover__line">
                <span className="kodza-hero-cover__rise">Ship in small steps.</span>
              </span>
              {' '}
              <span className="kodza-hero-cover__line">
                <span className="kodza-hero-cover__rise">Roll back in one.</span>
              </span>
            </h1>
            <p className="kodza-hero-cover__lead">A full-bleed picture, a veil that keeps the words readable, and nothing to install.</p>
            <div className="kodza-hero-cover__actions">
              <a className="kodza-hero-cover__button kodza-hero-cover__button--solid" href="#">Get the code<svg className="kodza-hero-cover__arrow" viewBox="0 0 16 16" aria-hidden="true"> <path d="M2.5 8h10.5M9 3.5 13.5 8 9 12.5" /> </svg></a>
              {' '}
              <a className="kodza-hero-cover__button kodza-hero-cover__button--glass" href="#">See it live</a>
            </div>
          </div>
          <p className="kodza-hero-cover__caption">fig. 02 — kz-steps, rendered in numpy</p>
        </div>
      </div>
    </section>
  );
}
```

## Code

```html
<section class="kodza-hero-cover">
  <div class="kodza-hero-cover__frame">
    <div class="kodza-hero-cover__media"><div class="kodza-hero-cover__curtain"><div class="kodza-hero-cover__hold"><img src="https://kodza.dev/media/kz-steps-2400.webp" srcset="https://kodza.dev/media/kz-steps-1400.webp 1400w, https://kodza.dev/media/kz-steps-2400.webp 2400w" sizes="100vw" alt="A concrete staircase climbing to the right under a flat light" width="2400" height="1600" fetchpriority="high" /></div></div></div>
    <div class="kodza-hero-cover__content">
      <div class="kodza-hero-cover__copy">
        <h1 class="kodza-hero-cover__title"><span class="kodza-hero-cover__line"><span class="kodza-hero-cover__rise">Ship in small steps.</span></span> <span class="kodza-hero-cover__line"><span class="kodza-hero-cover__rise">Roll back in one.</span></span></h1>
        <p class="kodza-hero-cover__lead">A full-bleed picture, a veil that keeps the words readable, and nothing to install.</p>
        <div class="kodza-hero-cover__actions">
          <a class="kodza-hero-cover__button kodza-hero-cover__button--solid" href="#">Get the code<svg class="kodza-hero-cover__arrow" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.5 13.5 8 9 12.5" /></svg></a>
          <a class="kodza-hero-cover__button kodza-hero-cover__button--glass" href="#">See it live</a>
        </div>
      </div>
      <p class="kodza-hero-cover__caption">fig. 02 — kz-steps, rendered in numpy</p>
    </div>
  </div>
</section>
```

```css
/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Hero Cover
   A cover hero: a full-width picture under a monochrome veil, the title at the bottom left.
   On load the picture opens from the top edge down while it settles, and the title lines rise
   out of their masks. CSS only. Everything is tuned with the --kz-hero-cover-* variables. */
.kodza-hero-cover {
  --kz-hero-cover-light: #f2f2f0;
  --kz-hero-cover-ink: #0a0a0a;
  --kz-hero-cover-dim: rgba(242, 242, 240, 0.8);
  --kz-hero-cover-faint: rgba(242, 242, 240, 0.7);
  --kz-hero-cover-glass: rgba(242, 242, 240, 0.14);
  --kz-hero-cover-shade: rgba(10, 10, 10, 0.8);
  --kz-hero-cover-base: #1c1c1c;
  --kz-hero-cover-bg: transparent;
  --kz-hero-cover-height: clamp(560px, 54vw, 800px);
  --kz-hero-cover-gutter: clamp(12px, 2vw, 24px);
  --kz-hero-cover-pad: clamp(24px, 4.5vw, 64px);
  --kz-hero-cover-radius: 16px;
  --kz-hero-cover-position: 50% 50%;
  --kz-hero-cover-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --kz-hero-cover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kz-hero-cover-glide: cubic-bezier(0.6, 0, 0.1, 1);
  --kz-hero-cover-soft-ease: cubic-bezier(0.25, 1, 0.5, 1);

  container: kodza-hero-cover / inline-size;
  box-sizing: border-box;
  width: 100%;
  padding-block: var(--kz-hero-cover-gutter);
  padding-left: max(var(--kz-hero-cover-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--kz-hero-cover-gutter), env(safe-area-inset-right, 0px));
  background: var(--kz-hero-cover-bg);
  color: var(--kz-hero-cover-light);
}

.kodza-hero-cover__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--kz-hero-cover-height);
  overflow: hidden;
  border-radius: var(--kz-hero-cover-radius);
}

/* A dark base under the picture: the words stay readable while it loads. Inset by a pixel so it
   never bleeds past the picture's rounded edge */
.kodza-hero-cover__frame::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: max(0px, calc(var(--kz-hero-cover-radius) - 1px));
  background: var(--kz-hero-cover-base);
}

.kodza-hero-cover__media {
  position: absolute;
  inset: 0;
}

/* The curtain: the middle layer slides down from above while the inner one slides up into
   place, so the picture is uncovered from the top edge down and never moves itself */
.kodza-hero-cover__curtain,
.kodza-hero-cover__hold {
  height: 100%;
}

.kodza-hero-cover__curtain {
  overflow: hidden;
}

.kodza-hero-cover__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kz-hero-cover-position);
}

/* The veil: darkest under the words (bottom left), clear at the top right */
.kodza-hero-cover__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--kz-hero-cover-shade) 50%, transparent), transparent 70%),
    linear-gradient(to top, var(--kz-hero-cover-shade), color-mix(in srgb, var(--kz-hero-cover-shade) 35%, transparent) 62%, transparent);
}

.kodza-hero-cover__content {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: var(--kz-hero-cover-pad);
}

.kodza-hero-cover__copy {
  min-width: 0;
  max-width: 820px;
}

.kodza-hero-cover__title {
  margin: 0 0 22px;
  /* Bounded by the container too, so a short first line keeps to one line on a phone */
  font-size: min(clamp(38px, 6.4vw, 96px), 9.6cqi);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--kz-hero-cover-light);
}

/* Each line is its own mask: the words rise from behind its bottom edge */
.kodza-hero-cover__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.kodza-hero-cover__rise {
  display: block;
}

.kodza-hero-cover__lead {
  max-width: 36ch;
  margin: 0 0 32px;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--kz-hero-cover-dim);
  text-wrap: pretty;
}

.kodza-hero-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kodza-hero-cover__button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.kodza-hero-cover__button:focus-visible {
  outline: 2px solid var(--kz-hero-cover-light);
  outline-offset: 3px;
}

/* Solid: the arrow steps forward on hover */
.kodza-hero-cover__button--solid {
  background: var(--kz-hero-cover-light);
  color: var(--kz-hero-cover-ink);
}

.kodza-hero-cover__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--kz-hero-cover-ease);
}

/* Glass: frosted over the picture, light rises from the bottom edge on hover */
.kodza-hero-cover__button--glass {
  background: var(--kz-hero-cover-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--kz-hero-cover-light);
  transition: color 0.4s var(--kz-hero-cover-ease);
}

.kodza-hero-cover__button--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--kz-hero-cover-light);
  transform: translateY(101%);
  transition: transform 0.4s var(--kz-hero-cover-ease);
}

@media (hover: hover) {
  .kodza-hero-cover__button--solid:hover .kodza-hero-cover__arrow {
    transform: translateX(4px);
  }

  .kodza-hero-cover__button--glass:hover {
    color: var(--kz-hero-cover-ink);
  }

  .kodza-hero-cover__button--glass:hover::before {
    transform: none;
  }
}

/* Lined up with the middle of the buttons */
.kodza-hero-cover__caption {
  flex: none;
  margin: 0;
  padding-bottom: 18px;
  font-family: var(--kz-hero-cover-mono);
  font-size: 12.5px;
  line-height: 16px;
  color: var(--kz-hero-cover-faint);
}

/* Mid widths: the caption takes two lines, so it leaves the title its room */
@container kodza-hero-cover (min-width: 721px) and (max-width: 1100px) {
  .kodza-hero-cover__caption {
    max-width: 20ch;
    padding-bottom: 10px;
  }
}

/* One column: the caption goes under the buttons, which share the row */
@container kodza-hero-cover (max-width: 720px) {
  .kodza-hero-cover__content {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .kodza-hero-cover__caption {
    padding-bottom: 0;
  }

  .kodza-hero-cover__button {
    flex: 1 1 auto;
  }
}

/* The entrance, on load: the picture opens and settles, the title lines rise, then the rest */
@media (prefers-reduced-motion: no-preference) {
  .kodza-hero-cover__curtain {
    animation: kodza-hero-cover-curtain 1350ms var(--kz-hero-cover-glide) 100ms both;
  }

  .kodza-hero-cover__hold {
    animation: kodza-hero-cover-hold 1350ms var(--kz-hero-cover-glide) 100ms both;
  }

  .kodza-hero-cover__media img {
    animation: kodza-hero-cover-settle 2000ms var(--kz-hero-cover-soft-ease) 100ms both;
  }

  .kodza-hero-cover__rise {
    animation: kodza-hero-cover-rise 1170ms var(--kz-hero-cover-glide) 300ms both;
  }

  .kodza-hero-cover__line:nth-child(2) .kodza-hero-cover__rise {
    animation-delay: 425ms;
  }

  .kodza-hero-cover__line:nth-child(3) .kodza-hero-cover__rise {
    animation-delay: 550ms;
  }

  .kodza-hero-cover__line:nth-child(4) .kodza-hero-cover__rise {
    animation-delay: 675ms;
  }

  .kodza-hero-cover__lead {
    animation: kodza-hero-cover-in 900ms var(--kz-hero-cover-soft-ease) 750ms both;
  }

  .kodza-hero-cover__actions {
    animation: kodza-hero-cover-in 900ms var(--kz-hero-cover-soft-ease) 860ms both;
  }

  .kodza-hero-cover__caption {
    animation: kodza-hero-cover-in 900ms var(--kz-hero-cover-soft-ease) 970ms both;
  }
}

/* Closed 2px past the edge: a curtain closed exactly on the frame's edge can leak a hairline */
@keyframes kodza-hero-cover-curtain {
  from {
    transform: translateY(calc(-100% - 2px));
  }
}

@keyframes kodza-hero-cover-hold {
  from {
    transform: translateY(calc(100% + 2px));
  }
}

@keyframes kodza-hero-cover-settle {
  from {
    transform: scale(1.2);
  }
}

@keyframes kodza-hero-cover-rise {
  from {
    transform: translateY(105%);
  }
}

@keyframes kodza-hero-cover-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kodza-hero-cover *,
  .kodza-hero-cover *::before,
  .kodza-hero-cover *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* kodza-guard bbc797febe4f — generated by Kodza, do not edit.
   Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
   component. :not(#_) is always true and weighs as much as an id, so these lines win over
   theme rules made of classes and tags. Customise the component through its --kz-* variables. */

/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */

:where(.kodza-hero-cover__title):not(#_),
:where(.kodza-hero-cover__lead):not(#_),
:where(.kodza-hero-cover__hold img:where(:not([class*="kodza-"]))):not(#_) {
  transition-duration: revert;
}

:where(.kodza-hero-cover__button):not(#_) {
  outline: revert;
  transition: revert;
  outline-offset: revert;
}

:where(.kodza-hero-cover__caption):not(#_) {
  max-width: revert;
  transition-duration: revert;
}

/* What the browser gives, on everything the component leaves to it */

.kodza-hero-cover__frame:not(#_),
.kodza-hero-cover__media:not(#_),
.kodza-hero-cover__curtain:not(#_),
.kodza-hero-cover__hold:not(#_),
.kodza-hero-cover__content:not(#_),
.kodza-hero-cover__copy:not(#_),
.kodza-hero-cover__line:not(#_),
.kodza-hero-cover__rise:not(#_),
.kodza-hero-cover__actions:not(#_) {
  box-sizing: revert;
}

.kodza-hero-cover__title:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-style: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-hero-cover__lead:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-height: revert;
  font-family: revert;
  font-weight: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-hero-cover__button:not(#_) {
  margin: revert;
  list-style: revert;
  float: revert;
  box-shadow: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-hero-cover__arrow:not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-hero-cover__caption:not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  padding-top: revert;
  padding-right: revert;
  padding-left: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-height: revert;
  font-weight: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-hero-cover__hold img:where(:not([class*="kodza-"])):not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  transition-property: revert;
  transition-timing-function: revert;
  transition-delay: revert;
}

.kodza-hero-cover__title:not(#_):where(:not([hidden])),
.kodza-hero-cover__lead:not(#_):where(:not([hidden])),
.kodza-hero-cover__arrow:not(#_):where(:not([hidden])),
.kodza-hero-cover__caption:not(#_):where(:not([hidden])) {
  display: revert;
}

.kodza-hero-cover__title:not(#_):where([hidden]),
.kodza-hero-cover__lead:not(#_):where([hidden]),
.kodza-hero-cover__arrow:not(#_):where([hidden]),
.kodza-hero-cover__caption:not(#_):where([hidden]) {
  display: none;
}

.kodza-hero-cover__frame:not(#_)::before,
.kodza-hero-cover__media:not(#_)::after {
  box-sizing: revert;
}

/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */

.kodza-hero-cover__media img:not(#_) {
  display: block;
}

.kodza-hero-cover__title:not(#_) {
  margin: 0 0 22px;
  font-size: min(clamp(38px, 6.4vw, 96px), 9.6cqi);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--kz-hero-cover-light);
}

.kodza-hero-cover__lead:not(#_) {
  max-width: 36ch;
  margin: 0 0 32px;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--kz-hero-cover-dim);
}

.kodza-hero-cover__button:not(#_) {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.kodza-hero-cover__button:focus-visible:not(#_) {
  outline: 2px solid var(--kz-hero-cover-light);
  outline-offset: 3px;
}

.kodza-hero-cover__button--solid:not(#_) {
  background: var(--kz-hero-cover-light);
  color: var(--kz-hero-cover-ink);
}

.kodza-hero-cover__arrow:not(#_) {
  transition: transform 0.3s var(--kz-hero-cover-ease);
}

.kodza-hero-cover__button--glass:not(#_) {
  background: var(--kz-hero-cover-glass);
  color: var(--kz-hero-cover-light);
  transition: color 0.4s var(--kz-hero-cover-ease);
}

@media (hover: hover) {
  .kodza-hero-cover__button--glass:hover:not(#_) {
    color: var(--kz-hero-cover-ink);
  }
}

.kodza-hero-cover__caption:not(#_) {
  margin: 0;
  padding-bottom: 18px;
  font-family: var(--kz-hero-cover-mono);
  font-size: 12.5px;
  line-height: 16px;
  color: var(--kz-hero-cover-faint);
}

@container kodza-hero-cover (min-width: 721px) and (max-width: 1100px) {
  .kodza-hero-cover__caption:not(#_) {
    max-width: 20ch;
    padding-bottom: 10px;
  }
}

@container kodza-hero-cover (max-width: 720px) {
  .kodza-hero-cover__caption:not(#_) {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kodza-hero-cover *:where(img, h1, p, a, svg):not(#_) {
    transition-duration: 0.01ms !important;
  }
}
```

Free to use, from Kodza (https://kodza.dev).