maverick-wave 5.30.0 → 5.32.0

package/src/partials/form-field-container.html

@@ -1,166 +0,0 @@
-<h3 class="mw-section-subtitle">Form Field Pattern</h3>
-<p class="mw-text-muted mw-text-measure">
-  Label, field, hint and error as one unit, so the spacing between them is not
-  re-invented per form. Written with Angular reactive forms in mind; the markup
-  is plain HTML.
-</p>
-
-<div class="mw-grid-2 mw-gap-6">
-  <!-- LEFT: mw-field wrapper -->
-  <div>
-    <h3 class="mw-card-title mw-mb-4">Field Wrapper (mw-field)</h3>
-    <div class="mw-card mw-card-simple">
-      <p class="mw-text-muted mw-text-sm mw-mb-4">
-        The <code>mw-field</code> wrapper groups label, input, hint, and error
-        message as a single unit - the recommended pattern for Angular reactive
-        forms.
-      </p>
-
-      <!-- Normal field with hint -->
-      <div class="mw-field mw-mb-4">
-        <label class="mw-field-label mw-required" for="ff-email"
-          >Email address</label
-        >
-        <input
-          id="ff-email"
-          type="email"
-          class="mw-input"
-          placeholder="user@example.com"
-        />
-        <span class="mw-field-hint"
-          >We'll never share your email with anyone.</span
-        >
-      </div>
-
-      <!-- Field in error state -->
-      <div class="mw-field mw-field-has-error mw-mb-4">
-        <label class="mw-field-label mw-required" for="ff-email-err"
-          >Email address</label
-        >
-        <input
-          id="ff-email-err"
-          type="email"
-          class="mw-input"
-          value="not-an-email"
-        />
-        <span class="mw-field-error">
-          <i class="fas fa-exclamation-circle"></i>
-          Please enter a valid email address.
-        </span>
-      </div>
-
-      <!-- Select field with hint -->
-      <div class="mw-field mw-mb-4">
-        <label class="mw-field-label" for="ff-country">Country</label>
-        <select id="ff-country" class="mw-select">
-          <option value="" disabled selected>Select a country</option>
-          <option>Germany</option>
-          <option>Austria</option>
-          <option>Switzerland</option>
-        </select>
-        <span class="mw-field-hint"
-          >Your billing country for tax purposes.</span
-        >
-      </div>
-
-      <!-- Textarea with character hint -->
-      <div class="mw-field">
-        <label class="mw-field-label mw-required" for="ff-bio">Bio</label>
-        <textarea
-          id="ff-bio"
-          class="mw-textarea"
-          rows="3"
-          placeholder="Tell us about yourself..."
-        ></textarea>
-        <span class="mw-field-hint">Maximum 500 characters.</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- RIGHT: error, single-control error, readonly, disabled -->
-  <div>
-    <h3 class="mw-card-title mw-mb-4">Validation & Readonly States</h3>
-    <div class="mw-card mw-card-simple">
-      <p class="mw-text-muted mw-text-sm mw-mb-4">
-        The error look is not automatic: bind
-        <code>mw-field-has-error</code> to the control state (in Angular
-        <code>[class.mw-field-has-error]="c.invalid &amp;&amp; c.touched"</code
-        >). A control without a field wrapper - also a
-        <code>mw-checkbox-group</code>, <code>mw-radio-group</code> or
-        <code>mw-slider-container</code> - takes
-        <code>mw-form-element-error</code> instead.
-      </p>
-
-      <!-- Field wrapper in error state -->
-      <div class="mw-field mw-field-has-error mw-mb-4">
-        <label class="mw-field-label mw-required" for="ff-username"
-          >Username (invalid &amp; touched)</label
-        >
-        <input
-          id="ff-username"
-          type="text"
-          class="mw-input"
-          value=""
-          placeholder="Required"
-        />
-        <span class="mw-field-error">
-          <i class="fas fa-exclamation-circle"></i> Username is required.
-        </span>
-      </div>
-
-      <!-- Single control without a wrapper -->
-      <div class="mw-field mw-mb-4">
-        <label class="mw-field-label mw-required" for="ff-password"
-          >Password (single control error)</label
-        >
-        <input
-          id="ff-password"
-          type="password"
-          class="mw-input mw-form-element-error"
-          value="123"
-        />
-        <span class="mw-field-hint">At least 8 characters.</span>
-      </div>
-
-      <!-- Readonly -->
-      <div class="mw-field mw-mb-4">
-        <label class="mw-field-label" for="ff-account-id"
-          >Account ID (readonly)</label
-        >
-        <input
-          id="ff-account-id"
-          type="text"
-          class="mw-input"
-          readonly
-          value="USR-00042"
-        />
-        <span class="mw-field-hint">This value cannot be changed.</span>
-      </div>
-
-      <!-- Disabled -->
-      <div class="mw-field mw-mb-4">
-        <label class="mw-field-label" for="ff-plan">Plan (disabled)</label>
-        <select id="ff-plan" class="mw-select" disabled>
-          <option>Enterprise</option>
-        </select>
-        <span class="mw-field-hint">Contact support to change your plan.</span>
-      </div>
-
-      <!-- Prefilled -->
-      <div class="mw-field">
-        <label class="mw-field-label" for="ff-company">Company</label>
-        <input
-          id="ff-company"
-          type="text"
-          class="mw-input mw-prefilled"
-          value="ACME GmbH"
-          aria-describedby="ff-company-hint"
-        />
-        <span class="mw-field-hint" id="ff-company-hint"
-          >Prefilled from your account - marked with
-          <code>mw-prefilled</code>.</span
-        >
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/gallery-container.html

@@ -1,62 +0,0 @@
-<h3 class="mw-section-subtitle">Image Gallery</h3>
-<p class="mw-text-muted mw-text-measure">
-  A slider for photos: swipe, arrows, dots and a caption read off the slide
-  itself. The dots are real buttons, so the fourth picture is reachable without
-  a mouse.
-</p>
-
-<div class="mw-gallery-container">
-  <div class="mw-gallery">
-    <!-- Prev button -->
-    <button type="button" class="mw-gallery-navi mw-gallery-navi-prev">
-      &#10094;
-    </button>
-
-    <!-- Track -->
-    <div class="mw-gallery-track">
-      <div class="mw-gallery-slide" data-desc="Beautiful Mountain">
-        <img
-          src="images/gallery-mountain.svg"
-          alt="Beautiful Mountain"
-          loading="lazy"
-        />
-      </div>
-      <div class="mw-gallery-slide" data-desc="Peaceful Lake">
-        <img src="images/gallery-lake.svg" alt="Peaceful Lake" loading="lazy" />
-      </div>
-      <div class="mw-gallery-slide" data-desc="City Vibes">
-        <img src="images/gallery-city.svg" alt="City Vibes" loading="lazy" />
-      </div>
-      <div class="mw-gallery-slide" data-desc="Golden Forest">
-        <img
-          src="images/gallery-forest.svg"
-          alt="Golden Forest"
-          loading="lazy"
-        />
-      </div>
-      <div class="mw-gallery-slide" data-desc="Desert View">
-        <img src="images/gallery-desert.svg" alt="Desert View" loading="lazy" />
-      </div>
-      <div class="mw-gallery-slide" data-desc="Ocean Breeze">
-        <img src="images/gallery-ocean.svg" alt="Ocean Breeze" loading="lazy" />
-      </div>
-      <div class="mw-gallery-slide" data-desc="Old Town">
-        <img src="images/gallery-oldtown.svg" alt="Old Town" loading="lazy" />
-      </div>
-      <div class="mw-gallery-slide" data-desc="Snowy Hills">
-        <img src="images/gallery-snow.svg" alt="Snowy Hills" loading="lazy" />
-      </div>
-    </div>
-
-    <!-- Next button -->
-    <button type="button" class="mw-gallery-navi mw-gallery-navi-next">
-      &#10095;
-    </button>
-  </div>
-
-  <!-- Description below slider -->
-  <div class="mw-gallery-desc">Beautiful Mountain</div>
-
-  <!-- Dots -->
-  <div class="mw-gallery-dots"></div>
-</div>

package/src/partials/get-started-container.html

@@ -1,423 +0,0 @@
-<h3>Installation</h3>
-<p>
-  Add MaverickWave CSS framework to your project using one of these methods:
-</p>
-
-<h4 class="mw-mt-4">Option 1: CDN</h4>
-<pre
-  class="mw-code-block"
-><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maverick-wave@{{VERSION}}/maverick-wave.min.css"&gt;
-&lt;script src="https://cdn.jsdelivr.net/npm/maverick-wave@{{VERSION}}/maverick-wave.min.js"&gt;&lt;/script&gt;</code></pre>
-
-<h4 class="mw-mt-4">Option 2: Direct Download</h4>
-<div class="mw-d-flex mw-gap-4">
-  <a href="maverick-wave.min.css" download class="mw-btn mw-btn-primary">
-    Download CSS
-  </a>
-  <a href="maverick-wave.min.js" download class="mw-btn mw-btn-outline">
-    Download JS
-  </a>
-</div>
-
-<h3 class="mw-mt-6">Integration Options</h3>
-
-<div class="mw-tabs mw-mb-6">
-  <div class="mw-tabs-nav">
-    <button
-      type="button"
-      class="mw-tabs-nav-item mw-active"
-      data-tab="html-css"
-    >
-      HTML/CSS
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="scss">
-      SCSS Projects
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="angular">
-      Angular
-    </button>
-    <button type="button" class="mw-tabs-nav-item" data-tab="react">
-      React
-    </button>
-  </div>
-
-  <div class="mw-tabs-content">
-    <!-- HTML/CSS Tab -->
-    <div class="mw-tabs-panel mw-active" id="html-css">
-      <div class="mw-card mw-card-simple">
-        <h4>Using Pre-compiled CSS (CDN or Download)</h4>
-        <p>
-          This is the simplest method if you don't need SCSS customization. Link
-          the compiled <code>maverick-wave.min.css</code> and
-          <code>maverick-wave.min.js</code> files in your HTML head and before
-          the closing body tag, respectively.
-        </p>
-        <pre class="mw-code-block"><code>&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;!-- viewport-fit=cover is what makes env(safe-area-inset-*) resolve on a notched phone --&gt;
-    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"&gt;
-    &lt;title&gt;My MaverickWave Project&lt;/title&gt;
-    &lt;!-- Framework CSS --&gt;
-    &lt;link rel="stylesheet" href="path/to/maverick-wave.min.css"&gt;
-
-    &lt;!-- Your Custom Styles (load AFTER framework) --&gt;
-    &lt;link rel="stylesheet" href="your-custom-styles.css"&gt;
-&lt;/head&gt;
-&lt;body&gt;
-    &lt;!-- Your content --&gt;
-
-    &lt;!-- Framework JS --&gt;
-    &lt;script src="path/to/maverick-wave.min.js"&gt;&lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</code></pre>
-
-        <h5 class="mw-mt-4">Customizing via CSS Variables</h5>
-        <p>
-          Even without SCSS, you can customize colors and fonts by overriding
-          the CSS custom properties. Create your own CSS file and load it
-          <strong>after</strong> the MaverickWave CSS.
-        </p>
-        <pre class="mw-code-block"><code>/* your-custom-styles.css */
-:root {
-  /* Brand colors */
-  --mw-primary-color: #0f766e;
-  --mw-secondary-color: #b45309;
-
-  /* Text on every solid colored surface. The one token that cannot be
-     derived: a light brand color needs a dark label, a dark one a light
-     label - set it opposite your primary. */
-  --mw-accent-text-color: #f2fafa;
-
-  /* Per color override of that label, for a palette that does not sit on
-     one side of the lightness scale - a neon primary needs a dark label
-     while the rest of the palette keeps the light one. Same token for
-     secondary, success, warning, danger and info. */
-  --mw-primary-accent-text-color: #0b0f0a;
-
-  /* Page backgrounds. Card, footer and border are derived from them, so
-     these two are usually all you set. */
-  --mw-dark-page-background: #172127;
-  --mw-light-page-background: #f2f6f7;
-
-  /* Font */
-  --mw-font-family-base: 'Your Custom Font', sans-serif;
-}</code></pre>
-      </div>
-    </div>
-
-    <!-- SCSS Tab -->
-    <div class="mw-tabs-panel" id="scss">
-      <div class="mw-card mw-card-simple">
-        <h4>Using SCSS Source Files</h4>
-        <p>
-          For full customization, clone the repository and integrate the SCSS
-          source directly into your project's Sass build (Dart Sass required).
-          The entry point is <code>src/scss/main.scss</code>.
-        </p>
-        <p>
-          MaverickWave uses <code>@use</code> / <code>@forward</code> (modern
-          Sass module syntax). Pass your overrides through
-          <code>@use ... with (...)</code> - a plain assignment before the
-          <code>@use</code> has no effect, because the root colors are declared
-          with <code>!default</code>.
-        </p>
-
-        <h5 class="mw-mt-4">Theme Mode</h5>
-        <p>Set <code>$mw-theme-mode</code> to control theme behavior:</p>
-        <ul>
-          <li>
-            <code>'switchable'</code> (default) - dark base, toggleable to light
-            via <code>.mw-theme-light</code> on <code>&lt;body&gt;</code>
-          </li>
-          <li><code>'dark'</code> - compile dark theme only</li>
-          <li><code>'light'</code> - compile light theme only</li>
-        </ul>
-        <p class="mw-text-warning">
-          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
-          <strong>Note:</strong> The main header and navigation always use the
-          dark appearance regardless of theme mode.
-        </p>
-
-        <h5 class="mw-mt-4">Example - your main SCSS file</h5>
-        <pre class="mw-code-block"><code>// styles.scss
-
-@use 'path/to/maverick-wave/src/scss/main' with (
-  // Theme mode (optional, default is 'switchable')
-  $mw-theme-mode: 'switchable',
-
-  // Root colors - everything else is derived from them at runtime
-  $primary-color: #0f766e,
-  $secondary-color: #b45309,
-  $accent-text-color: #f2fafa,
-  $dark-background: #172127,
-  $light-background: #f2f6f7,
-  $dark-text-color: #e8eef0,
-  $light-text-color: #172127,
-
-  // How far card and footer sit from the page background. Below 1 steps
-  // toward black, above 1 toward white - 0.85 means the card sits at 85%
-  // of the page's lightness.
-  $card-surface-dark: 0.85,
-  $card-surface-light: 1.05,
-  $footer-surface-dark: 0.75,
-  $footer-surface-light: 0.95
-);
-
-// Your additional styles
-body {
-  // custom overrides
-}</code></pre>
-
-        <h5 class="mw-mt-4">Importing Only What You Need</h5>
-        <p>
-          Every layer forwards one module per file and no
-          <code>@extend</code> crosses a file boundary, so components can be
-          imported individually. Applications usually have no use for the
-          marketing components (<code>blog-post</code>, <code>gallery</code>,
-          <code>content-slider</code>, <code>techstack-bucket</code>,
-          <code>tiles</code>, <code>coming-soon</code>, <code>ratings</code>,
-          <code>home</code>).
-        </p>
-        <pre
-          class="mw-code-block"
-        ><code>// styles.scss - the configuration has to come first
-@use 'maverick-wave/src/scss/abstracts/variables' with (
-  $primary-color: #0f766e
-);
-
-@use 'maverick-wave/src/scss/base'; // required - carries the :root tokens
-@use 'maverick-wave/src/scss/layout/grid';
-@use 'maverick-wave/src/scss/layout/page-header';
-@use 'maverick-wave/src/scss/components/buttons';
-@use 'maverick-wave/src/scss/components/cards';
-@use 'maverick-wave/src/scss/components/modals';
-@use 'maverick-wave/src/scss/components/tables';
-@use 'maverick-wave/src/scss/components/tags';
-@use 'maverick-wave/src/scss/form-elements';
-@use 'maverick-wave/src/scss/utilities';</code></pre>
-        <p class="mw-text-warning">
-          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
-          Without <code>base</code> every component renders without colors - it
-          carries the <code>:root</code> custom properties. A subset like the
-          one above compiles to roughly 113 kB raw / 17 kB gzipped, against 281
-          kB / 40 kB for the full build.
-        </p>
-
-        <h5 class="mw-mt-4">Mixins and Functions</h5>
-        <p>
-          <code>abstracts</code> brings these into your own rules. They exist on
-          the SCSS path only - the compiled CSS carries none of them.
-        </p>
-        <ul class="mw-list">
-          <li>
-            <code>fluid($min, $max, $from: 'xs', $to: 'md')</code> - a clamp
-            between two sizes. Each end is a key of <code>$font-sizes</code> or
-            a plain rem/px length, so a hero that does not sit on the scale
-            still gets one. The rem term is the point: a vw-only clamp ignores
-            the reader's font size. The default range stops at <code>md</code>,
-            a headline passes <code>$to: 'xl'</code>.
-          </li>
-          <li>
-            <code>media-up($bp)</code> / <code>media-down($bp)</code> - the
-            <code>$breakpoints</code> map as a query.
-          </li>
-          <li>
-            <code>touch-context($bp: 'md')</code> - coarse pointer
-            <em>or</em> narrow viewport, the condition every target-size rule in
-            the framework hangs under.
-          </li>
-          <li>
-            <code>touch-floor($size: 2.75rem)</code> - that condition plus a
-            <code>min-height</code>. Not for a link inside a sentence: WCAG
-            2.5.8 exempts those, and a <code>min-height</code> there pushes the
-            lines of the paragraph apart.
-          </li>
-          <li>
-            <code>hit-area($grow: 6px)</code> - grows the hit area through
-            <code>::after</code> without touching the silhouette, for a control
-            whose size is the design. Neighbours need a gap of at least twice
-            <code>$grow</code>, or two hit areas overlap.
-          </li>
-        </ul>
-        <pre
-          class="mw-code-block"
-        ><code>@use 'maverick-wave/src/scss/abstracts' as *;
-
-.hero h1 {
-  font-size: fluid(1.95rem, 4.2rem, $to: 'xl');
-}
-
-.my-close-button {
-  @include touch-floor;
-}</code></pre>
-      </div>
-    </div>
-
-    <!-- Angular Tab -->
-    <div class="mw-tabs-panel" id="angular">
-      <div class="mw-card mw-card-simple">
-        <h4>Angular Integration</h4>
-        <p>
-          Download the compiled files and place them in your Angular project
-          (e.g. <code>src/assets/</code>), then reference them in
-          <code>angular.json</code>:
-        </p>
-        <pre class="mw-code-block"><code>// angular.json
-"styles": [
-  "src/assets/maverick-wave.min.css",
-  "src/styles.scss"
-]</code></pre>
-        <p class="mw-text-warning">
-          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
-          <strong>No <code>"scripts"</code> entry for the JS file.</strong>
-          <code>maverick-wave.min.js</code> wires everything up once on
-          <code>DOMContentLoaded</code> and writes straight into the DOM - in a
-          SPA everything rendered afterwards stays uninitialized, and the class
-          toggles happen behind change detection. Rebuild the behaviors in
-          components; the state classes (<code>mw-active</code>,
-          <code>open</code>, <code>mw-selected</code>) are the whole contract. A
-          modal is the exception - write it as a
-          <code>&lt;dialog class="mw-modal"&gt;</code> and the element brings
-          Escape, the focus trap and the scroll lock with it.
-        </p>
-        <p>
-          Alternatively, use the CDN link directly in
-          <code>src/index.html</code>:
-        </p>
-        <pre class="mw-code-block"><code>&lt;link rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/maverick-wave@{{VERSION}}/maverick-wave.min.css"&gt;</code></pre>
-        <p>
-          For SCSS integration, use the npm package (or a local copy of
-          <code>src/scss/</code>) from <code>src/styles.scss</code>:
-        </p>
-        <pre class="mw-code-block"><code>// src/styles.scss
-@use 'maverick-wave/src/scss/main' with (
-  $primary-color: #3f51b5,
-  $mw-theme-mode: 'switchable'
-);</code></pre>
-        <h5 class="mw-mt-4">Theme switching</h5>
-        <p>
-          Light mode is one class on <code>&lt;body&gt;</code>. Keep it in a
-          service so the choice survives navigation:
-        </p>
-        <pre class="mw-code-block"><code>// theme.service.ts
-readonly light = signal(localStorage.getItem('mw-theme') === 'light');
-
-constructor() {
-  effect(() =&gt; {
-    const light = this.light();
-    document.body.classList.toggle('mw-theme-light', light);
-    localStorage.setItem('mw-theme', light ? 'light' : 'dark');
-  });
-}</code></pre>
-        <h5 class="mw-mt-4">Reactive Forms</h5>
-        <p>
-          The <code>mw-field</code> wrapper groups label, control, hint and
-          error. Bind the error state yourself - the framework does not style
-          Angular's <code>ng-invalid</code> / <code>ng-touched</code>
-          classes:
-        </p>
-        <pre
-          class="mw-code-block"
-        ><code>&lt;div class="mw-field" [class.mw-field-has-error]="email.invalid && email.touched"&gt;
-  &lt;label class="mw-field-label mw-required" for="email"&gt;Email&lt;/label&gt;
-  &lt;input id="email" type="email" class="mw-input" formControlName="email" /&gt;
-  &lt;span class="mw-field-error" *ngIf="email.invalid && email.touched"&gt;
-    &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt; Please enter a valid email.
-  &lt;/span&gt;
-&lt;/div&gt;</code></pre>
-      </div>
-    </div>
-
-    <!-- React Tab -->
-    <div class="mw-tabs-panel" id="react">
-      <div class="mw-card mw-card-simple">
-        <h4>React Integration</h4>
-        <p>
-          Download the compiled CSS file and import it in your entry point, or
-          use the CDN link in <code>index.html</code>:
-        </p>
-        <pre class="mw-code-block"><code>// main.jsx / index.js
-import './assets/maverick-wave.min.css';</code></pre>
-        <p class="mw-text-warning">
-          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
-          Do not import <code>maverick-wave.min.js</code> in a SPA - it binds
-          once on <code>DOMContentLoaded</code> and never sees anything rendered
-          later. Accordion, tabs, modal and theme toggle are class toggles; bind
-          them with <code>className</code> from state.
-        </p>
-        <p>Example usage in a React component:</p>
-        <pre class="mw-code-block"><code>function App() {
-  return (
-    &lt;div className="mw-container"&gt;
-      &lt;h1 className="mw-text-primary"&gt;Hello, MaverickWave!&lt;/h1&gt;
-      &lt;button className="mw-btn mw-btn-primary"&gt;Get Started&lt;/button&gt;
-    &lt;/div&gt;
-  );
-}</code></pre>
-        <p>
-          For SCSS integration with Vite, copy the source and import from your
-          main stylesheet:
-        </p>
-        <pre class="mw-code-block"><code>/* src/index.css or src/App.scss */
-@use './maverick-wave/src/scss/main';</code></pre>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mt-6">Adding Custom Fonts</h3>
-<p>
-  To use custom fonts with MaverickWave, load the font files using
-  <code>@font-face</code> and then override the CSS font variable.
-</p>
-<div class="mw-card mw-card-simple">
-  <h4 class="mw-mb-2">1. Load the Font</h4>
-  <pre class="mw-code-block"><code>/* your-custom-styles.css */
-@font-face {
-  font-family: 'Your Custom Font';
-  src: url('/path/to/font.woff2') format('woff2'),
-       url('/path/to/font.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Your Custom Font';
-  src: url('/path/to/font-bold.woff2') format('woff2'),
-       url('/path/to/font-bold.woff') format('woff');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-</code></pre>
-
-  <h4 class="mw-mt-4 mw-mb-2">2. Apply the Font</h4>
-  <p>
-    <strong>CSS Variable Method:</strong>
-  </p>
-  <pre
-    class="mw-code-block"
-  ><code>/* your-custom-styles.css - load AFTER maverick-wave.min.css */
-:root {
-  --mw-font-family-base: 'Your Custom Font', system-ui, sans-serif;
-  --mw-font-family-heading: 'Your Custom Font', system-ui, sans-serif;
-}</code></pre>
-</div>
-
-<div class="mw-d-flex mw-flex-wrap mw-gap-4 mw-justify-center mw-mt-6">
-  <a href="#documentation" class="mw-btn mw-btn-primary">
-    Explore Documentation
-  </a>
-  <a
-    href="https://github.com/m1well/maverick-wave"
-    target="_blank"
-    rel="noopener noreferrer"
-    class="mw-btn mw-btn-outline"
-  >
-    <i class="fab fa-github"></i> GitHub Repository
-  </a>
-</div>