# Hero Centered

> A centred hero with an announcement pill, a headline whose lines rise out of their masks, one sentence and two pill buttons. CSS only, the entrance plays on load.

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

## Files

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

- [`kodza-hero-centered.css`](https://kodza.dev/registry/hero-centered/kodza-hero-centered.css) · 15.9 KB
- [`kodza-hero-centered.html`](https://kodza.dev/registry/hero-centered/kodza-hero-centered.html) · 1.2 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-centered.css https://kodza.dev/registry/hero-centered/kodza-hero-centered.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-centered`
- Variables (set them on the root element itself: it declares its own defaults):
  - `--kz-hero-centered-ink: #0a0a0a`
  - `--kz-hero-centered-paper: #f2f2f0`
  - `--kz-hero-centered-dim: rgba(10, 10, 10, 0.62)`
  - `--kz-hero-centered-soft: rgba(10, 10, 10, 0.07)`
  - `--kz-hero-centered-bg: transparent`
  - `--kz-hero-centered-width: 1040px`
  - `--kz-hero-centered-pad-y: clamp(88px, 11vw, 168px)`
  - `--kz-hero-centered-gutter: clamp(16px, 4vw, 40px)`
  - `--kz-hero-centered-ease: cubic-bezier(0.22, 1, 0.36, 1)`
  - `--kz-hero-centered-glide: cubic-bezier(0.6, 0, 0.1, 1)`
  - `--kz-hero-centered-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-centered {
    --kz-hero-centered-ink: #f2f2f0;
    --kz-hero-centered-paper: #0a0a0a;
    --kz-hero-centered-dim: rgba(242, 242, 240, 0.64);
    --kz-hero-centered-soft: rgba(242, 242, 240, 0.1);
  }
}
```

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

## Use it

### Plain HTML page

- CSS: `kodza/kodza-hero-centered.css` next to the page (the Files commands as they are), linked in `<head>`: `<link rel="stylesheet" href="kodza/kodza-hero-centered.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-centered.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">`.
- 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-centered', $uri . 'kodza-hero-centered.css', [], filemtime($dir . 'kodza-hero-centered.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-centered.css` (the Files commands with `-o assets/…`).
- In the section: `{{ 'kodza-hero-centered.css' | asset_url | stylesheet_tag }}`, then the HTML.

### React / Next.js

- Files, side by side (e.g. in `components/kodza/`): `HeroCentered.tsx` (below), the CSS block under Code saved as `hero-centered.css`, both as they are. The HTML block is already inside the component: skip it.
- Use it: `import { HeroCentered } from '@/components/kodza/HeroCentered';` then `<HeroCentered />`. Props: `vars` (the `--kz-…` variables listed under API, e.g. `vars={{ '--kz-hero-centered-ink': … }}`), `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-centered.css'` line there.

```tsx
'use client';
// Kodza — Hero Centered, for React. From https://kodza.dev/components/hero-centered/
// 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-centered.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-centered.css';

export type HeroCenteredProps = Omit<ComponentPropsWithoutRef<'section'>, "children" | "vars"> & {
  /** Settings, as CSS variables on the root */
  vars?: {
    /** default: #0a0a0a */
    "--kz-hero-centered-ink"?: string | number;
    /** default: #f2f2f0 */
    "--kz-hero-centered-paper"?: string | number;
    /** default: rgba(10, 10, 10, 0.62) */
    "--kz-hero-centered-dim"?: string | number;
    /** default: rgba(10, 10, 10, 0.07) */
    "--kz-hero-centered-soft"?: string | number;
    /** default: transparent */
    "--kz-hero-centered-bg"?: string | number;
    /** default: 1040px */
    "--kz-hero-centered-width"?: string | number;
    /** default: clamp(88px, 11vw, 168px) */
    "--kz-hero-centered-pad-y"?: string | number;
    /** default: clamp(16px, 4vw, 40px) */
    "--kz-hero-centered-gutter"?: string | number;
    /** default: cubic-bezier(0.22, 1, 0.36, 1) */
    "--kz-hero-centered-ease"?: string | number;
    /** default: cubic-bezier(0.6, 0, 0.1, 1) */
    "--kz-hero-centered-glide"?: string | number;
    /** default: cubic-bezier(0.25, 1, 0.5, 1) */
    "--kz-hero-centered-soft-ease"?: string | number;
  };
  className?: string;
};

export function HeroCentered({ vars, className, style, ...rest }: HeroCenteredProps) {
  const ref = useRef<ComponentRef<'section'>>(null);
  const classes = ["kodza-hero-centered", 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-centered__inner">
        <p className="kodza-hero-centered__news">
          <a className="kodza-hero-centered__badge" href="#">
            <span className="kodza-hero-centered__badge-label">v2 is out</span>
            <span className="kodza-hero-centered__badge-more">See what changed</span>
            <svg className="kodza-hero-centered__badge-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>
        </p>
        <h1 className="kodza-hero-centered__title">
          <span className="kodza-hero-centered__line">
            <span className="kodza-hero-centered__rise">It's just HTML.</span>
          </span>
          {' '}
          <span className="kodza-hero-centered__line">
            <span className="kodza-hero-centered__rise">That's the feature.</span>
          </span>
        </h1>
        <p className="kodza-hero-centered__lead">Three pieces, zero dependencies. Paste it into the theme you already have, then deploy.</p>
        <div className="kodza-hero-centered__actions">
          <a className="kodza-hero-centered__button kodza-hero-centered__button--ink" href="#">Get the code<svg className="kodza-hero-centered__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-centered__button kodza-hero-centered__button--soft" href="#">See it live</a>
        </div>
      </div>
    </section>
  );
}
```

## Code

```html
<section class="kodza-hero-centered">
  <div class="kodza-hero-centered__inner">
    <p class="kodza-hero-centered__news"><a class="kodza-hero-centered__badge" href="#"><span class="kodza-hero-centered__badge-label">v2 is out</span><span class="kodza-hero-centered__badge-more">See what changed</span><svg class="kodza-hero-centered__badge-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></p>
    <h1 class="kodza-hero-centered__title"><span class="kodza-hero-centered__line"><span class="kodza-hero-centered__rise">It's just HTML.</span></span> <span class="kodza-hero-centered__line"><span class="kodza-hero-centered__rise">That's the feature.</span></span></h1>
    <p class="kodza-hero-centered__lead">Three pieces, zero dependencies. Paste it into the theme you already have, then deploy.</p>
    <div class="kodza-hero-centered__actions">
      <a class="kodza-hero-centered__button kodza-hero-centered__button--ink" href="#">Get the code<svg class="kodza-hero-centered__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-centered__button kodza-hero-centered__button--soft" href="#">See it live</a>
    </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 Centered
   A centred hero: an announcement pill, a tight headline, one sentence and two pill buttons.
   On load the pill and the title lines rise out of their masks, then the rest settles in.
   CSS only. Everything is tuned with the --kz-hero-centered-* variables. */
.kodza-hero-centered {
  --kz-hero-centered-ink: #0a0a0a;
  --kz-hero-centered-paper: #f2f2f0;
  --kz-hero-centered-dim: rgba(10, 10, 10, 0.62);
  --kz-hero-centered-soft: rgba(10, 10, 10, 0.07);
  --kz-hero-centered-bg: transparent;
  --kz-hero-centered-width: 1040px;
  --kz-hero-centered-pad-y: clamp(88px, 11vw, 168px);
  --kz-hero-centered-gutter: clamp(16px, 4vw, 40px);
  --kz-hero-centered-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kz-hero-centered-glide: cubic-bezier(0.6, 0, 0.1, 1);
  --kz-hero-centered-soft-ease: cubic-bezier(0.25, 1, 0.5, 1);

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

.kodza-hero-centered__inner {
  max-width: var(--kz-hero-centered-width);
  margin: 0 auto;
}

/* The pill's own mask, padded so the focus ring is never cut */
.kodza-hero-centered__news {
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin: -6px 0 22px;
  padding: 6px;
}

.kodza-hero-centered__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  max-width: 100%;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--kz-hero-centered-soft);
  color: var(--kz-hero-centered-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s var(--kz-hero-centered-ease);
}

.kodza-hero-centered__badge:focus-visible {
  outline: 2px solid var(--kz-hero-centered-ink);
  outline-offset: 3px;
}

/* A hairline between the news and its link */
.kodza-hero-centered__badge-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--kz-hero-centered-dim);
}

.kodza-hero-centered__badge-more::before {
  content: "";
  width: 1px;
  height: 12px;
  background: currentColor;
  opacity: 0.45;
}

.kodza-hero-centered__badge-arrow {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--kz-hero-centered-ease);
}

.kodza-hero-centered__title {
  margin: 0 0 26px;
  font-size: clamp(42px, 7.4vw, 104px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--kz-hero-centered-ink);
}

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

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

.kodza-hero-centered__lead {
  max-width: 34ch;
  margin: 0 auto 36px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  color: var(--kz-hero-centered-dim);
  text-wrap: pretty;
}

.kodza-hero-centered__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.kodza-hero-centered__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-centered__button:focus-visible {
  outline: 2px solid var(--kz-hero-centered-ink);
  outline-offset: 3px;
}

/* Solid: the arrow steps forward on hover */
.kodza-hero-centered__button--ink {
  background: var(--kz-hero-centered-ink);
  color: var(--kz-hero-centered-paper);
}

.kodza-hero-centered__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-centered-ease);
}

/* Soft: ink rises from the bottom edge on hover */
.kodza-hero-centered__button--soft {
  background: var(--kz-hero-centered-soft);
  color: var(--kz-hero-centered-ink);
  transition: color 0.4s var(--kz-hero-centered-ease);
}

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

@media (hover: hover) {
  .kodza-hero-centered__badge:hover {
    background: color-mix(in srgb, var(--kz-hero-centered-soft), var(--kz-hero-centered-ink) 5%);
  }

  .kodza-hero-centered__badge:hover .kodza-hero-centered__badge-arrow,
  .kodza-hero-centered__button--ink:hover .kodza-hero-centered__arrow {
    transform: translateX(3px);
  }

  .kodza-hero-centered__button--soft:hover {
    color: var(--kz-hero-centered-paper);
  }

  .kodza-hero-centered__button--soft:hover::before {
    transform: none;
  }
}

/* Narrow: the link half of the pill goes, and the buttons share the row */
@container kodza-hero-centered (max-width: 420px) {
  .kodza-hero-centered__badge-more {
    display: none;
  }

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

/* The entrance, on load: the pill, then the title lines one after the other, then the rest */
@media (prefers-reduced-motion: no-preference) {
  .kodza-hero-centered__badge {
    animation: kodza-hero-centered-pill 1000ms var(--kz-hero-centered-glide) both;
  }

  .kodza-hero-centered__rise {
    animation: kodza-hero-centered-rise 1170ms var(--kz-hero-centered-glide) 110ms both;
  }

  .kodza-hero-centered__line:nth-child(2) .kodza-hero-centered__rise {
    animation-delay: 235ms;
  }

  .kodza-hero-centered__line:nth-child(3) .kodza-hero-centered__rise {
    animation-delay: 360ms;
  }

  .kodza-hero-centered__line:nth-child(4) .kodza-hero-centered__rise {
    animation-delay: 485ms;
  }

  .kodza-hero-centered__lead {
    animation: kodza-hero-centered-in 900ms var(--kz-hero-centered-soft-ease) 700ms both;
  }

  .kodza-hero-centered__actions {
    animation: kodza-hero-centered-in 900ms var(--kz-hero-centered-soft-ease) 810ms both;
  }
}

@keyframes kodza-hero-centered-pill {
  from {
    transform: translateY(calc(100% + 8px));
  }
}

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

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

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

/* kodza-guard ec8354de1ebd — 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-centered__news):not(#_),
:where(.kodza-hero-centered__title):not(#_),
:where(.kodza-hero-centered__lead):not(#_) {
  transition-duration: revert;
}

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

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

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

.kodza-hero-centered__inner:not(#_),
.kodza-hero-centered__badge-label:not(#_),
.kodza-hero-centered__badge-more:not(#_),
.kodza-hero-centered__line:not(#_),
.kodza-hero-centered__rise:not(#_),
.kodza-hero-centered__actions:not(#_) {
  box-sizing: revert;
}

.kodza-hero-centered__news:not(#_) {
  border: 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-centered__badge:not(#_) {
  border: revert;
  margin: revert;
  list-style: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  appearance: 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-centered__badge-arrow:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  margin-top: revert;
  margin-right: revert;
  margin-bottom: 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-centered__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-centered__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-centered__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-centered__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-centered__badge-arrow:not(#_):where(:not([hidden])),
.kodza-hero-centered__title:not(#_):where(:not([hidden])),
.kodza-hero-centered__lead:not(#_):where(:not([hidden])),
.kodza-hero-centered__arrow:not(#_):where(:not([hidden])) {
  display: revert;
}

.kodza-hero-centered__badge-arrow:not(#_):where([hidden]),
.kodza-hero-centered__title:not(#_):where([hidden]),
.kodza-hero-centered__lead:not(#_):where([hidden]),
.kodza-hero-centered__arrow:not(#_):where([hidden]) {
  display: none;
}

.kodza-hero-centered__badge-more:not(#_)::before {
  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-centered__news:not(#_) {
  display: flex;
  margin: -6px 0 22px;
  padding: 6px;
}

.kodza-hero-centered__badge:not(#_) {
  display: inline-flex;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--kz-hero-centered-soft);
  color: var(--kz-hero-centered-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.25s var(--kz-hero-centered-ease);
}

.kodza-hero-centered__badge:focus-visible:not(#_) {
  outline: 2px solid var(--kz-hero-centered-ink);
  outline-offset: 3px;
}

.kodza-hero-centered__badge-arrow:not(#_) {
  margin-left: -2px;
  transition: transform 0.3s var(--kz-hero-centered-ease);
}

.kodza-hero-centered__title:not(#_) {
  margin: 0 0 26px;
  font-size: clamp(42px, 7.4vw, 104px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--kz-hero-centered-ink);
}

.kodza-hero-centered__lead:not(#_) {
  max-width: 34ch;
  margin: 0 auto 36px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  color: var(--kz-hero-centered-dim);
}

.kodza-hero-centered__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-centered__button:focus-visible:not(#_) {
  outline: 2px solid var(--kz-hero-centered-ink);
  outline-offset: 3px;
}

.kodza-hero-centered__button--ink:not(#_) {
  background: var(--kz-hero-centered-ink);
  color: var(--kz-hero-centered-paper);
}

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

.kodza-hero-centered__button--soft:not(#_) {
  background: var(--kz-hero-centered-soft);
  color: var(--kz-hero-centered-ink);
  transition: color 0.4s var(--kz-hero-centered-ease);
}

@media (hover: hover) {
  .kodza-hero-centered__badge:hover:not(#_) {
    background: color-mix(in srgb, var(--kz-hero-centered-soft), var(--kz-hero-centered-ink) 5%);
  }
}

@media (hover: hover) {
  .kodza-hero-centered__button--soft:hover:not(#_) {
    color: var(--kz-hero-centered-paper);
  }
}

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

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