/* ============================================================
* Organization Website Theme - Base
* ============================================================
* Single customizable theme for standalone org websites.
* All colors/fonts use CSS custom properties so they can be
* overridden per-org via OrgWebsiteBrandingHelper.
*
* Future: expand to 3 themes (Clean/Bold/Elegant) by overriding
* the layout/spacing variables below.
* ============================================================ */
/* ----------------------------------------------------------
* Website-specific tokens (extend the global design tokens)
* ---------------------------------------------------------- */
:root {
--website-nav-height: 72px;
--website-nav-bg: var(--bg-primary);
--website-nav-border: var(--border-default);
--website-nav-link-color: var(--text-primary);
--website-nav-link-hover: var(--color-primary-600);
--website-nav-link-hover-bg: var(--color-primary-50);
--website-nav-link-active: var(--color-primary-700);
--website-nav-link-active-bg: transparent;
--website-nav-brand-weight: var(--font-weight-bold);
--website-nav-brand-size: var(--font-size-lg);
--website-footer-bg: var(--color-neutral-900);
--website-footer-text: var(--color-neutral-300);
--website-footer-heading: var(--color-neutral-50);
--website-footer-link: var(--color-neutral-400);
--website-footer-link-hover: var(--color-primary-400);
--website-footer-border: var(--color-neutral-800);
--website-footer-padding-y: var(--space-6);
--website-footer-padding-x: clamp(1.25rem, 4vw, 3rem);
--website-footer-gutter: var(--space-8);
--website-section-padding-y: var(--space-20);
--website-section-gap: 0;
/* Content spacing (Spacing & Edges "Content (inside)" ring):
--website-content-gap / --website-card-pad are deliberately NOT
defined here. A global pick (OrgWebsiteBrandingHelper) defines them on
:root, a per-section pick inline on .website-section; the `wb-cgap`
wrapper class (set by views/website/_section.php in either case) is
what switches the `.wb-grid` overrides on, so every untouched grid
keeps its own Bootstrap g-* / literal gap byte for byte.
--website-section-padding-x (side padding) is likewise undefined by
default so existing sections keep padding-left/right: 0. */
/* Body-copy text alignment. `inherit` = keep whatever each section already
sets, so the default is a visual no-op; the global Text Alignment control
(OrgWebsiteBrandingHelper) overrides this on :root, and a per-section
inline value on .website-section beats both. */
--website-text-align: inherit;
/* Design Theme structural tokens (overridden per-site by
WebsiteDesignThemeRegistry via OrgWebsiteBrandingHelper). Defaults below
reproduce the pre-theme look (classic). */
--website-card-padding: 1.5rem;
--website-section-divider: none;
--website-page-max-width: 860px;
--website-page-padding-y: var(--space-16);
/* Section Width scale (config[content_width] 'wide'/'narrow' steps). Kept
* deliberately separate from any --website-wide-max-width name -
* EntitySpotlightSectionWidget's .es-w-wide relies on an UNDEFINED such var
* falling back to its own inline 1320px; defining one here would silently
* resize every existing spotlight section. */
--website-width-wide: 1600px;
--website-width-narrow: 960px;
}
[data-theme="dark"] {
--website-nav-bg: var(--bg-primary);
--website-nav-border: var(--border-default);
--website-footer-bg: var(--color-neutral-950);
--website-footer-border: var(--color-neutral-800);
}
/* ----------------------------------------------------------
* Navigation
* ---------------------------------------------------------- */
.website-navbar {
background-color: var(--website-nav-bg);
border-bottom: 1px solid var(--website-nav-border);
min-height: var(--website-nav-height);
transition: var(--transition-colors);
}
/* When the navbar lives inside a header strip (as a main_menu section),
* the strip already provides its own background via .website-header-strip-bg-*.
* Suppress the navbar's own background + border so the strip's bg
* paints through; otherwise the menu area renders as a dark block on
* top of an otherwise colored strip.
*
* `!important` is required to beat theme.css:20 which declares
* `.navbar { background-color: var(--bg-secondary) !important; }`
* for the main-app header. Theme.css loads via ThemeAsset (registered
* by the theme-switcher in the strip), so it's present on the org
* website too. Without !important here, the main-app rule wins
* regardless of specificity. */
.website-header-strip .navbar,
.website-header-strip .website-navbar {
background-color: transparent !important;
border-bottom: 0 !important;
min-height: 0;
}
.website-navbar .navbar-brand {
font-weight: var(--website-nav-brand-weight);
font-size: var(--website-nav-brand-size);
font-family: var(--font-family-brand, var(--font-family-heading));
color: var(--text-primary);
text-decoration: none;
}
.website-navbar .navbar-brand:hover {
color: var(--color-primary-600);
}
.website-nav-logo {
max-height: var(--website-nav-logo-height, 40px);
width: auto;
object-fit: contain;
flex: 0 0 auto;
}
/* ---------------------------------------------------------------------------
* Logo set - light/dark theme swap
*
* When an org configures a dark-mode logo, the renderer emits two ![]()
s
* (website-logo--light + website-logo--dark). We show the one that matches
* the active theme. Sites with only a primary logo emit a single ![]()
with
* neither class, so these rules never apply and markup is unchanged.
*
* theme.js always writes an explicit [data-theme] on at load, so the
* prefers-color-scheme block below only covers the brief pre-hydration / no-JS
* window.
* ------------------------------------------------------------------------- */
.website-logo--dark {
display: none;
}
[data-theme="dark"] .website-logo--light {
display: none;
}
[data-theme="dark"] .website-logo--dark {
display: inline-block;
}
/* Footer logo is display:block - keep it block when swapped. */
[data-theme="dark"] .website-footer-logo.website-logo--dark {
display: block;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .website-logo--light {
display: none;
}
html:not([data-theme]) .website-logo--dark {
display: inline-block;
}
html:not([data-theme]) .website-footer-logo.website-logo--dark {
display: block;
}
}
.website-nav-brand-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ----------------------------------------------------------
* Navigation - Mobile (< 992px)
* No header strip - the hero takes the full top of the page.
* A floating hamburger in the top-right opens the off-canvas
* menu (wired by web/js/mobile-menu.js via #mobileMenuBtn).
* ---------------------------------------------------------- */
@media (max-width: 991.98px) {
.website-navbar {
display: none;
}
.website-nav-toggle {
position: fixed;
top: 12px;
right: 16px;
z-index: 1031;
width: 44px;
height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-primary);
color: var(--website-nav-link-color);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
font-size: 1.1rem;
transition: var(--transition-colors);
}
.website-nav-toggle:hover,
.website-nav-toggle:focus {
background: var(--bg-secondary);
color: var(--color-primary-600);
}
}
.website-navbar .nav-link {
color: var(--website-nav-link-color);
font-weight: var(--font-weight-medium);
font-family: var(--font-family-menu-left, inherit);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
transition: var(--transition-colors);
}
.website-navbar .nav-link:hover,
.website-navbar .nav-link:focus {
color: var(--website-nav-link-hover);
background-color: var(--website-nav-link-hover-bg);
}
.website-navbar .nav-link.active {
color: var(--website-nav-link-active);
background-color: var(--website-nav-link-active-bg);
font-weight: var(--font-weight-semibold);
}
/* Dark-theme default for the hover pill. Declared as a variable (not a
background override) so a custom org "Menu Hover Background" still wins in
dark mode - an override rule here would out-specify the variable. */
[data-theme="dark"] {
--website-nav-link-hover-bg: var(--color-neutral-800);
}
.website-navbar .dropdown-menu {
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-2);
}
.website-navbar .dropdown-item {
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
font-weight: var(--font-weight-normal);
transition: var(--transition-colors);
}
.website-navbar .dropdown-item:hover {
background-color: var(--color-primary-50);
color: var(--color-primary-700);
}
[data-theme="dark"] .website-navbar .dropdown-item:hover {
background-color: var(--color-neutral-800);
}
/* Active dropdown item - use the variant's primary tint, not Bootstrap blue.
One shade stronger than hover (-100 vs -50) so active reads as more prominent.
Cover both .active and :active - Bootstrap colors both. */
.website-navbar .dropdown-item.active,
.website-navbar .dropdown-item:active {
background-color: var(--color-primary-100);
color: var(--color-primary-700);
font-weight: var(--font-weight-medium);
}
[data-theme="dark"] .website-navbar .dropdown-item.active,
[data-theme="dark"] .website-navbar .dropdown-item:active {
background-color: var(--color-primary-900);
color: var(--color-primary-300);
}
.website-navbar .nav-divider {
width: 1px;
height: 24px;
background-color: var(--border-default);
margin: 0 var(--space-2);
align-self: center;
}
/* Child dividers inside a dropdown menu. Bootstrap's .dropdown-divider
* already handles the "line" variant; these add the "space" and "dot"
* variants so all three top-level styles translate cleanly to the
* vertical stack of a dropdown. */
.nav-dropdown-divider--space {
height: var(--space-3);
pointer-events: none;
}
.nav-dropdown-divider--dot {
text-align: center;
padding: var(--space-1) 0;
color: var(--text-tertiary);
font-size: 0.25rem;
opacity: 0.6;
pointer-events: none;
}
/* ----------------------------------------------------------
* Navbar: Language & Theme widgets
* ---------------------------------------------------------- */
.website-navbar .language-switcher {
margin: 0;
}
.website-navbar .language-flags {
display: flex;
align-items: center;
gap: var(--space-1);
}
.website-navbar .language-flag {
opacity: 0.5;
transition: var(--transition-all);
font-size: 1.25rem;
line-height: 1;
text-decoration: none;
}
.website-navbar .language-flag:hover,
.website-navbar .language-flag.active {
opacity: 1;
}
.website-navbar .theme-toggle-switch {
margin-bottom: 0;
}
.website-navbar .theme-switcher {
margin: 0;
}
/* ----------------------------------------------------------
* Main Content Area
* ---------------------------------------------------------- */
.website-body {
min-height: 100vh;
}
.website-body main {
flex: 1;
}
/* Headings inside an org website must follow the org's heading font knob.
* site.css unconditionally overrides h1 to use --font-family-brand (an
* Eventure.si design opinion), which leaks into org websites and makes
* the per-org "Heading font" setting look broken: changing it only moves
* h2-h6, while the hero h1 stays on the brand font. Re-binding h1-h6
* here keeps every heading - including widget-emitted h1s like the hero
* title - on --font-family-heading. The navbar brand keeps its own
* font via .website-navbar .navbar-brand (higher specificity). */
/* Per-level typography defaults. Each named style (Display / Heading 1-3 /
* Lead) falls back to the umbrella --font-family-heading (or -tagline/-body
* for lead) until the org picks a font for that level in Appearance -> Fonts.
* OrgWebsiteBrandingHelper::getCssOverrides() overrides these on :root when a
* level is set, so the cascade lets an unset level inherit the heading font. */
.website-body {
--font-family-h1: var(--font-family-heading);
--font-family-h2: var(--font-family-heading);
--font-family-h3: var(--font-family-heading);
--font-family-display: var(--font-family-heading);
--font-family-lead: var(--font-family-tagline, var(--font-family-body));
}
/* Bind each heading tag to its own level token so widget-emitted headings
* (hero h1, cta h2, ...) automatically pick up the per-level font. h4-h6
* share the Heading 3 font. */
.website-body h1 { font-family: var(--font-family-h1); }
.website-body h2 { font-family: var(--font-family-h2); }
.website-body h3,
.website-body h4,
.website-body h5,
.website-body h6 {
font-family: var(--font-family-h3);
}
/* Brand display: any element that renders the organisation name as the
* site's identity (navbar wordmark, auto-hero title, footer brand). Must
* outrank `.website-body h1-h6` above so the brand h1 in the auto-hero
* picks up --font-family-brand instead of the heading font. Specificity
* 0,2,0 (.website-body .website-brand-display) > 0,1,1 (.website-body h1). */
.website-body .website-brand-display {
font-family: var(--font-family-brand, var(--font-family-heading));
}
/* Tagline / "voice" copy: the lead paragraph under a hero, slider
* subheadings, section kicker lines, and testimonial sub-titles. These
* are semantically different from body copy (they're marketing voice,
* not running text) and historically had no font binding - the
* --font-family-tagline knob was registered in the helper but read by
* nothing. The .website-body prefix keeps this rule org-scoped (the
* main Eventure.si site has its own .brand-tagline / .navbar-brand-tagline
* consumers in site.css). */
.website-body .lead,
.website-body .hero-slider-subheading,
.website-body .video-feature-kicker,
.website-body .testimonial-subtitle {
font-family: var(--font-family-tagline, inherit);
}
/* Apply-a-style classes: a section title can opt into a named typography
* level (Word-style "apply Heading 1") without changing its