Theming

Haven provides optional theme CSS files that control layout, spacing, and visual polish. You can use them as-is or extend them with your own styles.

Theme files

Load these after the Haven library:

<link rel="stylesheet" href="/haven-theme--default.css" />
<link rel="stylesheet" href="/haven-theme--directory.css" />
<!-- or for calendar -->
<link rel="stylesheet" href="/haven-theme--calendar.css" />

File	Purpose
haven-theme--default.css	Shared base: buttons, images, filters, breadcrumbs, print styles
haven-theme--directory.css	Directory grid layout and element ordering
haven-theme--calendar.css	Calendar list, upcoming/ongoing layouts, filter grid

The default theme is required; add the module theme matching your embed type.

CSS custom properties

Haven injects CSS variables at runtime. Theme files reference these:

Variable	Set by	Purpose
--haven-gap	Theme CSS	Standard spacing
--haven-grid-gap	Theme CSS	Grid gap between items
--haven-padding	Theme CSS	Container padding
--haven-breakpoint-mobile	haven.config({ breakpoints })	Mobile breakpoint (px)
--haven-breakpoint-tablet	breakpoints config	Tablet breakpoint
--haven-breakpoint-desktop	breakpoints config	Desktop breakpoint

Breakpoints

Pass breakpoints in haven.config() to inject responsive CSS variables:

haven.config({
  breakpoints: {
    mobile: 480,
    tablet: 800,
    desktop: 1024,
    'desktop-large': 1200,
    'desktop-xlarge': 1360,
  },
});

Haven adds a <style> block to <head>:

:root {
  --haven-breakpoint-mobile: 480px;
  --haven-breakpoint-tablet: 800px;
  /* ... */
}

Use these in your own media queries:

@media only screen and (max-width: 800px) {
  #haven-container {
    flex-direction: column;
  }
}

Directory layout

The directory theme uses CSS Grid on body.haven__view--directory-list to control element order:

1. Category title
2. Breadcrumb
3. Map
4. Filter
5. Product list

Override order or spacing in your own stylesheet by targeting Haven's BEM classes:

.haven__directory .haven__item {
  /* custom item styles */
}

.haven__filter {
  margin-bottom: 20px;
}

Calendar layout

The calendar theme styles list items, daily groupings, upcoming widgets, and ongoing sidebars. Widget embeds use:

options: {
  css: 'haven__calendar haven__calendar--widget',
}

Matching your brand

Override Haven styles with your site's CSS variables or direct selectors:

.haven__item__title a {
  color: var(--your-brand-color);
}

.haven__button {
  background-color: var(--your-accent-color);
}

Load your overrides after Haven theme files.

Base library styles

haven.min.css (loaded by the Kit or standalone) contains component styles for the gallery, lightbox, map controls, and filter fields. Theme files build on top of these base styles.

Print styles

haven-theme--default.css includes print rules that hide maps, filters, and navigation chrome when printing.