Foundation Day Theme

Preview it live

Pick Foundation Day from the theme switcher in the top bar: the site re-skins and the event slide appears. Switch back to undo.

Automatic

Add one tag to your shared <head>, after the NDS stylesheets and without defer. It applies the palette and the hero slide; remove it when the event ends. Every data-* below is optional (defaults shown); see the table for each one.

The pack is self-contained: copy docs-assets/events/foundation_day/ out of the template into your own assets folder, then point the tag at wherever you put it. The paths below assume assets/events/foundation_day/. The script finds its own CSS and images relative to itself, so the folder works at any location as long as its contents stay together.

One tag applies everything


<script src="/assets/events/foundation_day/nds-theme-foundation-day.min.js"
        data-title-ar="يوم بدينا"
        data-title-en="Our Story"
        data-description-ar="تأسيس نعتز به، ومستقبل نصنعه"
        data-description-en="A founding we cherish, a future we shape"
        data-image="https://cdn.example.sa/img/founding-hero-2026.webp"
        data-cta-url="https://www.foundingday.sa/"
        data-cta-label-ar="منصة يوم التأسيس"
        data-cta-label-en="Foundation Day Platform"
        data-cta-icon="founding-icon.svg"></script>

Manual (no JavaScript)

No-JS alternative: link the stylesheet for the palette, and paste the slide markup yourself. Add the CSS link in <head>, and place the slide as the first child of .nds-swiper-wrapper (raise the hero's --total by one).

No-JS setup: stylesheet link and slide markup


<link id="nds-theme-stylesheet" rel="stylesheet"
      href="/assets/events/foundation_day/nds-theme-foundation-day.min.css">


<div class="nds-swiper-slide nds-content-wrapper nds-foundingDay">
  <div class="nds-hero-image-wrapper nds-full-width" style="--overlay:0;position:absolute;inset:0;">
    <picture>
      <img src="/assets/events/foundation_day/Hero_bg.webp" class="nds-hero-image" alt=""
           style="width:100%;height:100%;object-fit:cover;display:block;" fetchpriority="high">
    </picture>
  </div>
  <div class="nds-section-body nds-full-width" style="position:relative;z-index:3;">
    <div class="nds-block nds-content-wrapper">
      <div>
        <h1 class="nds-section-title">يوم بدينا</h1>
        <p class="nds-section-description">تأسيس نعتز به، ومستقبل نصنعه</p>
        <div class="nds-section-action">
          <a class="nds-btn nds-primary nds-oncolor" href="https://www.foundingday.sa/"
             target="_blank" rel="noopener noreferrer">
            <img src="/assets/events/foundation_day/founding-icon.svg" class="nds-icon" width="24" height="24" alt="">
            <span class="nds-label">منصة يوم التأسيس</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Data Attributes

All go on the <script> tag, all optional. Asset values take a bare filename (resolved against the pack folder) or a full https URL.

Attribute	Default	Description
`data-title-ar` / `data-title-en`	يوم بدينا / Our Story	Slide heading per language.
`data-description-ar` / `data-description-en`	تأسيس نعتز به، ومستقبل نصنعه / A founding we cherish, a future we shape	Slide description. Empty value hides it.
`data-image`	`Hero_bg.webp`	Background photo. Empty value uses the brown background variant.
`data-cta-url`	`https://www.foundingday.sa/`	Button link. Empty removes the button; non-https is rejected.
`data-cta-label-ar` / `data-cta-label-en`	منصة يوم التأسيس / Foundation Day Platform	Button label per language.
`data-cta-icon`	`founding-icon.svg`	Button icon. Empty omits it.

Built-in Features

One-Tag Activation

One script tag applies the palette, root marker, and hero slide. No build, no markup edits.

Zero-Flash First Paint

Placed in the head, the stylesheet resolves before first paint, so the default colours never flash.

Configurable Hero Slide

Set the slide title, description, photo, and CTA with data-* attributes; defaults when omitted.

Bilingual Content

Each string has Arabic and English values; the pack picks one from the page lang.

Clean Removal

Delete the tag and the palette, token, and slide are gone on the next load.

Theme Switcher Integration

The same pack plugs into the theme switcher: loads on demand, applies on selection, tears down on switch-away.

Usage Guidelines

Best Practices

Use an event pack for a temporary, site-wide skin tied to an occasion. For a permanent brand colour, use a custom palette or stylesheet theme instead.
Add the tag to your shared <head> on every page, not just the home page, so the palette stays consistent.
Override data-cta-url to your own landing page so analytics stay on your domain.
Host the pack folder yourself instead of hotlinking a third-party origin.
Plan the removal up front: deleting the one line is the entire decommissioning.