/* Theme Name: Edelvault Theme URI: https://suisserex.digital/ Description: Child theme of Hello Elementor for the Edelvault digital-asset site. Holds design tokens and custom CSS (free Elementor has no per-element Custom CSS). Author: Edelvault Version: 0.1.1 Template: hello-elementor Text Domain: edelvault */ :root { /* brand */ --ev-teal-dark: #001a5e; --ev-green-accent: #002da7; /* note: labelled "green" in source but is a royal blue */ --ev-section-gray: #f5f6fa; --ev-muted: #6b7294; --ev-border-light: #e0e3ed; --ev-white: #ffffff; /* typography */ --ev-font-heading: "DM Sans", system-ui, sans-serif; --ev-font-sans: "Inter", system-ui, sans-serif; --ev-tracking-tight: -0.025em; /* radii */ --ev-radius-lg: 0.5rem; --ev-radius-xl: 0.75rem; --ev-radius-2xl: 1rem; } body { font-family: var(--ev-font-sans); color: #111; /* Match /old: Tailwind's `antialiased` class on . Without this, macOS uses subpixel anti-aliasing (auto), which thickens strokes and made DM Sans and Inter look visibly heavier than the Next.js source even at identical weight. Grayscale anti-aliasing renders the same weight more delicately. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Replace Elementor's default kit typography (Roboto / Roboto Slab) with our site fonts. Every Elementor widget reads these vars (e.g. text-editor pulls `var(--e-global-typography-text-font-family)`), so without this override body text inside widgets stays Roboto even though `body { font-family: Inter }` is set. Targeting `[class*="elementor-kit-"]` instead of `.elementor-kit-4` so the rule survives a kit-post-id change between local and prod. */ [class*="elementor-kit-"] { --e-global-typography-primary-font-family: "DM Sans"; --e-global-typography-secondary-font-family: "DM Sans"; --e-global-typography-text-font-family: "Inter"; --e-global-typography-accent-font-family: "DM Sans"; } h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-widget-heading .elementor-heading-title, .font-heading { font-family: var(--ev-font-heading); letter-spacing: var(--ev-tracking-tight); color: var(--ev-teal-dark); } a { color: var(--ev-green-accent); } /* Section presets used by Elementor templates */ .ev-section-gray { background-color: var(--ev-section-gray); } .ev-section-white { background-color: var(--ev-white); } .ev-section-dark { background-color: var(--ev-teal-dark); color: var(--ev-white); } /* Card surfaces (port of /old's `.card` and `.card-solid`) */ .ev-card, .ev-card-solid { background: var(--ev-white); border: 1px solid var(--ev-border-light); border-radius: var(--ev-radius-2xl); box-shadow: 0 .5rem 1.5rem rgba(33, 38, 71, 0.06); overflow: hidden; } /* Card hover (port of /old's `.card:hover` and `.card-solid:hover`). `.ev-is-card` is added by the wp_footer JS in functions.php — Elementor 4 drops _css_classes on containers so we can't hook the static class. `!important` on box-shadow is needed to beat the inline per-element box-shadow CSS Elementor emits at specificity (0,3,0). */ @media (hover: hover) { .ev-is-card { transition: transform .2s ease, box-shadow .2s ease; } .ev-is-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 2rem rgba(33, 38, 71, 0.12) !important; } /* "Learn more →" grows when its parent card is hovered (port of /old's `group-hover:scale-105` Tailwind utility on the inline link). */ .ev-is-card .ev-btn-cardlink .elementor-button { display: inline-block; transition: transform .2s ease; transform-origin: left center; } .ev-is-card:hover .ev-btn-cardlink .elementor-button { transform: scale(1.06); } } /* Muted text utility */ .ev-text-muted { color: var(--ev-muted); } /* Fade-in entrance (port of Tailwind `animate-fadeIn`) */ @keyframes ev-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ev-animate-fadeIn { animation: ev-fadeIn .6s cubic-bezier(.2,.6,.2,1) both; } /* Eyebrows (small uppercase tracked label above section headings) */ .ev-eyebrow .elementor-heading-title, .ev-eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ev-green-accent); } .ev-eyebrow-light .elementor-heading-title, .ev-eyebrow-light { color: #ffffff; letter-spacing: 0.2em; text-shadow: 0 2px 12px rgba(0, 26, 94, 0.95), 0 4px 28px rgba(0, 26, 94, 0.7); } /* White-text override for sections sitting on dark/video backgrounds */ .ev-on-dark, .ev-on-dark .elementor-heading-title, .ev-on-dark .elementor-widget-text-editor, .ev-on-dark p { color: #ffffff !important; } .ev-on-dark .ev-text-muted, .ev-on-dark .ev-text-muted p { color: rgba(255, 255, 255, 0.8) !important; } /* Hero typography */ .ev-hero-h1 .elementor-heading-title { color: #ffffff !important; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.08; max-width: 56rem; margin-left: auto; margin-right: auto; text-shadow: 0 4px 20px rgba(0, 26, 94, 0.95), 0 8px 48px rgba(0, 26, 94, 0.75); } .ev-hero-subtitle .elementor-widget-container, .ev-hero-subtitle p { color: #ffffff !important; font-size: 1.125rem; font-weight: 500; line-height: 1.625; max-width: 42rem; margin-left: auto; margin-right: auto; text-shadow: 0 2px 12px rgba(0, 26, 94, 0.95), 0 4px 28px rgba(0, 26, 94, 0.7); } /* Section H2 (consistent across all gray/white sections) */ .ev-section-h2 .elementor-heading-title { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.1; } /* Stat card big number (royal-blue 2xl bold) */ .ev-stat-number .elementor-heading-title { font-size: 1.5rem; font-weight: 700; color: var(--ev-green-accent) !important; margin-bottom: 0.25rem; } .ev-stat-label .elementor-heading-title { font-size: 0.875rem; font-weight: 600; color: var(--ev-teal-dark); margin-bottom: 0.25rem; } .ev-stat-desc, .ev-stat-desc p { font-size: 0.75rem; color: var(--ev-muted); line-height: 1.4; } /* Button styles */ .ev-btn-primary .elementor-button { background-color: var(--ev-green-accent) !important; color: #ffffff !important; border-radius: var(--ev-radius-xl) !important; padding: 0.875rem 1.75rem !important; font-weight: 600 !important; transition: opacity .2s ease; } .ev-btn-primary .elementor-button:hover { opacity: 0.9; } .ev-btn-on-dark-primary .elementor-button { background-color: #ffffff !important; color: var(--ev-teal-dark) !important; border-radius: var(--ev-radius-xl) !important; padding: 1rem 2rem !important; font-weight: 600 !important; box-shadow: 0 6px 20px rgba(0, 26, 94, 0.35) !important; transition: opacity .2s ease, box-shadow .2s ease; } .ev-btn-on-dark-primary .elementor-button:hover { opacity: 0.9; } .ev-btn-on-dark-outline .elementor-button { background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: var(--ev-radius-xl) !important; padding: 1rem 2rem !important; font-weight: 600 !important; box-shadow: 0 6px 20px rgba(0, 26, 94, 0.35) !important; text-shadow: 0 2px 12px rgba(0, 26, 94, 0.95), 0 4px 28px rgba(0, 26, 94, 0.7); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } .ev-btn-on-dark-outline .elementor-button:hover { background-color: rgba(255, 255, 255, 0.1) !important; border-color: #ffffff !important; } .ev-btn-cardlink .elementor-button { background: transparent !important; color: var(--ev-green-accent) !important; font-size: 0.875rem !important; font-weight: 500 !important; padding: 0 !important; text-align: left; } .ev-btn-cardlink .elementor-button:hover { text-decoration: underline; } /* Cards (image-on-top product cards) — selectors apply directly to widget classes because Elementor 4 silently drops _css_classes set on containers (see [[feedback-elementor-container-classes-dropped]]), so the .ev-card ancestor never reaches the DOM. */ .ev-card-image { aspect-ratio: 5 / 4; overflow: hidden; display: block; } .ev-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; } .ev-card-image:hover img { transform: scale(1.05); } .ev-card-body { padding: 1.5rem; } /* Hero video overlay sits behind content */ .ev-hero-content { position: relative; z-index: 2; text-align: center; } /* Team member (About page) — circular avatar + name + role + bio */ /* Selector specificity (0,3,0) — must match Elementor 4's `.e-con .elementor-widget.elementor-widget { margin-block-end: 0 }` reset to keep the gap below the avatar. */ .e-con .elementor-widget.ev-team-avatar { width: 12rem; height: 12rem; border-radius: 9999px; overflow: hidden; margin: 0 auto 1.5rem; } .ev-team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ev-team-name .elementor-heading-title { font-size: 1.25rem; font-weight: 600; color: var(--ev-teal-dark); margin: 0 0 0.25rem; } .ev-team-role .elementor-heading-title { color: var(--ev-green-accent); font-weight: 500; font-size: 1rem; margin: 0 0 1rem; } .ev-team-bio, .ev-team-bio p { color: var(--ev-muted); font-size: 1rem; line-height: 1.625; } /* About page intro lead H2 (smaller than section H2, sits under the H1) */ .ev-about-lead .elementor-heading-title { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 600; line-height: 1.35; margin-bottom: 2rem; } .ev-about-paragraphs p { margin-bottom: 1.5rem; font-size: 1.125rem; line-height: 1.7; } .ev-about-paragraphs p:last-child { margin-bottom: 0; } /* Generic prose block (muted, lg font, paragraph spacing) — used on vision and future text-heavy pages */ .ev-prose, .ev-prose p { color: var(--ev-muted); font-size: 1.125rem; line-height: 1.7; } .ev-prose p { margin-bottom: 1.5rem; } .ev-prose p:last-child { margin-bottom: 0; } /* Vision hero — decorative concentric circles in the top-right (opacity 4%) */ .ev-vision-circles { position: absolute !important; top: 0; right: 0; width: 50% !important; max-width: 600px; height: 100% !important; opacity: 0.04; color: var(--ev-teal-dark); pointer-events: none; z-index: 0; } .ev-vision-circles .elementor-widget-container, .ev-vision-circles svg { width: 100%; height: 100%; display: block; } /* Vision hero — thin green accent line under the lede */ .ev-vision-line { width: 4rem !important; height: 4px !important; background: var(--ev-green-accent); border-radius: 9999px; margin-top: 0.5rem; overflow: hidden; } .ev-vision-line > * { display: none; } /* Vision inner-container widths — _element_custom_width and container _css_classes are both silently dropped on inner containers in Elementor 4 (see feedback-elementor-container-classes-dropped). Pin to the stable `.elementor-element-{id}` selector emitted from the JSON's "id" field. */ /* Hero inner: max-w-3xl (768px), left-aligned (parent flex-align-items: flex-start) */ .elementor-element-evvis003 { max-width: 768px; } /* Our conviction inner: max-w-[900px], centered (parent flex-align-items: center) */ .elementor-element-evvis011 { max-width: 900px; } /* Vision "Why now" — big numbered label on each card (01, 02, 03) */ .ev-card-number .elementor-heading-title { font-size: 2.25rem; font-weight: 700; color: var(--ev-green-accent); line-height: 1; margin: 0 0 1rem; } /* Vision "What we do" — outlined SVG icon at the top of each card */ .ev-vision-icon { color: var(--ev-green-accent); margin-bottom: 1.25rem; } .ev-vision-icon svg { width: 2.25rem; height: 2.25rem; display: block; } /* Vision "Three principles" — centered title above each principle paragraph */ .ev-principle-title .elementor-heading-title { font-size: 1.25rem; font-weight: 600; color: var(--ev-teal-dark); margin: 0 0 0.75rem; } /* Pull-quote tagline (used on vision "Tailored portfolios") */ .ev-pull-quote .elementor-heading-title { font-size: 1.125rem; font-weight: 500; color: var(--ev-teal-dark); margin: 0; } /* Light outline button (transparent bg, teal-dark text, light-gray border, hover → green-accent) */ .ev-btn-outline .elementor-button { background-color: transparent !important; color: var(--ev-teal-dark) !important; border: 1px solid var(--ev-border-light) !important; border-radius: var(--ev-radius-xl) !important; padding: 0.875rem 1.75rem !important; font-weight: 600 !important; transition: border-color .2s ease, color .2s ease; } .ev-btn-outline .elementor-button:hover { border-color: var(--ev-green-accent) !important; color: var(--ev-green-accent) !important; } /* Card-solid padded variant — same surface as ev-card-solid but with built-in p-8 padding */ .ev-card-solid-padded { background: var(--ev-section-gray); border-radius: var(--ev-radius-2xl); padding: 2rem; } /* Page hero on light background (Products & Services, etc.) — left-aligned, teal-dark */ .ev-page-hero-h1 .elementor-heading-title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.08; color: var(--ev-teal-dark); } .ev-page-hero-subtitle .elementor-widget-container, .ev-page-hero-subtitle p { color: var(--ev-muted); font-size: 1.125rem; line-height: 1.625; } /* Card image badge — pill overlay top-left of an ev-card image (e.g. "Custom" / "Advisory") */ .ev-card-image { position: relative; } .ev-card-badge { position: absolute; top: 1rem; left: 1rem; z-index: 10; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ev-teal-dark); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 9999px; } /* Hero image wrapper — fixed 4:3 aspect, rounded, full-cover image (Discretionary, Advisory, Fund heroes) */ .ev-hero-image-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--ev-radius-2xl); overflow: hidden; } .ev-hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Section lede — centered muted paragraph below a centered section H2 */ .ev-section-lede, .ev-section-lede p { font-size: 1.125rem; line-height: 1.625; text-align: center; } /* Building-block partner header — small round logo + uppercase partner name */ .ev-partner-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .ev-partner-row img { width: 40px; height: 40px; flex-shrink: 0; border-radius: 9999px; object-fit: contain; } .ev-partner-row span { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ev-green-accent); font-weight: 500; } /* Building-block card title (h3, slightly smaller than section h2) */ .ev-block-title .elementor-heading-title { font-size: 1.25rem; font-weight: 600; color: var(--ev-teal-dark); margin: 0 0 0.75rem; } /* Token pill — inline label tagged to a card (BTC orange, ETH purple) */ .ev-token-pill { display: inline-block; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 9999px; color: #ffffff; margin-bottom: 1rem; } .ev-token-pill.ev-token-btc { background-color: #F7931A; } .ev-token-pill.ev-token-eth { background-color: #627EEA; } /* Turnkey card — bigger h3 above description */ .ev-turnkey-title .elementor-heading-title { font-size: 1.5rem; font-weight: 600; color: var(--ev-teal-dark); margin: 0 0 0.5rem; } /* Token chips row — flex-wrap of tinted-bg pills with leading dot, used inside turnkey card */ .ev-token-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 1rem; } .ev-token-chip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; padding: 0.375rem 1rem; border-radius: 9999px; } .ev-token-chip-btc { background-color: rgba(247, 147, 26, 0.1); color: #F7931A; } .ev-token-chip-eth { background-color: rgba(98, 126, 234, 0.1); color: #627EEA; } .ev-token-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: currentColor; display: inline-block; } /* Raw-anchor button variants used inside HTML widgets (factsheet download / contact CTA) */ .ev-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } .ev-btn-html-primary, .ev-btn-html-outline-accent { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 2rem; border-radius: var(--ev-radius-xl); font-size: 1rem; font-weight: 500; text-decoration: none; transition: background-color .2s ease, color .2s ease, opacity .2s ease; } .ev-btn-html-primary { background-color: var(--ev-green-accent); color: #ffffff; } .ev-btn-html-primary:hover { opacity: 0.9; color: #ffffff; } .ev-btn-html-outline-accent { background-color: transparent; color: var(--ev-green-accent); border: 1px solid var(--ev-green-accent); } .ev-btn-html-outline-accent:hover { background-color: var(--ev-green-accent); color: #ffffff; } .ev-btn-html-primary svg, .ev-btn-html-outline-accent svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* Fund hero — small muted "Managed by X · Advised by Y" line under hero subtitle */ .ev-hero-attribution, .ev-hero-attribution p { font-size: 0.875rem; color: var(--ev-muted); margin-top: 0.25rem; margin-bottom: 0; } /* Fund details — key/value rows (left muted sm label, right teal-dark semibold value, divider below) */ .ev-detail-list { margin: 0; padding: 0; width: 100%; } .ev-detail-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--ev-border-light); margin: 0; } .ev-detail-row:last-child { border-bottom: none; } .ev-detail-key { color: var(--ev-muted); font-size: 0.875rem; font-weight: 500; margin: 0; } .ev-detail-value { color: var(--ev-teal-dark); font-weight: 600; font-size: 1rem; text-align: right; margin: 0; } @media (max-width: 639px) { .ev-detail-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .ev-detail-value { text-align: left; } } /* Band hero — thin dark navy banner used on listing pages (Insights, etc.) */ .ev-page-hero-band-h1 .elementor-heading-title { font-family: var(--ev-font-heading); font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: #ffffff; letter-spacing: var(--ev-tracking-tight); margin: 0 0 1rem; } @media (min-width: 768px) { .ev-page-hero-band-h1 .elementor-heading-title { font-size: 3rem; } } .ev-page-hero-band-subtitle .elementor-widget-container, .ev-page-hero-band-subtitle p { color: rgba(255, 255, 255, 0.7); font-size: 1.125rem; line-height: 1.5; max-width: 42rem; margin: 0 auto; } /* Insights article card — entire card is an , soft deep shadow, no border */ .ev-article-card { display: flex; flex-direction: column; height: 100%; background: var(--ev-white); border-radius: var(--ev-radius-lg); overflow: hidden; text-decoration: none; box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.05); transition: box-shadow .2s ease, transform .2s ease; padding: 1.5rem; } .ev-article-card:hover { box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .ev-article-card__title { font-family: var(--ev-font-heading); font-size: 1.25rem; font-weight: 600; color: var(--ev-teal-dark); letter-spacing: var(--ev-tracking-tight); line-height: 1.3; margin: 0 0 1rem; transition: color .2s ease; } .ev-article-card:hover .ev-article-card__title { color: var(--ev-green-accent); } .ev-article-card__excerpt { color: var(--ev-muted); font-size: 1rem; line-height: 1.625; flex: 1; margin: 0; } .ev-article-card__more { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ev-green-accent); font-weight: 500; font-size: 1rem; margin-top: 1.5rem; } .ev-article-card__more svg { width: 1rem; height: 1rem; transition: transform .2s ease; } .ev-article-card:hover .ev-article-card__more svg { transform: translateX(0.25rem); } /* The HTML widget hosting an article card stretches to fill its parent column, so each card's "Learn more" anchors to the bottom regardless of excerpt length. */ .ev-article-card-host { height: 100%; } /* Subtle "← Back to ..." link (sits above the footer on detail pages) */ .ev-back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ev-muted); text-decoration: none; transition: color .2s ease; } .ev-back-link:hover { color: var(--ev-teal-dark); } .ev-back-link svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* ─────────────────────────────────────────────────────────────────── Articles listing Page (template-articles.php) — dark band hero + 3-column grid of article cards. Mirrors what insights.json used to render in Elementor. ─────────────────────────────────────────────────────────────────── */ .ev-articles-hero { background: var(--ev-teal-dark); padding: 3rem 1.5rem; text-align: center; } @media (min-width: 768px) { .ev-articles-hero { padding: 4rem 1.5rem; min-height: 12rem; } } .ev-articles-hero__inner { max-width: 56rem; margin: 0 auto; } .ev-articles-hero__h1 { font-family: var(--ev-font-heading); font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: #ffffff; letter-spacing: var(--ev-tracking-tight); margin: 0 0 1rem; } @media (min-width: 768px) { .ev-articles-hero__h1 { font-size: 3rem; } } .ev-articles-hero__subtitle { color: rgba(255, 255, 255, 0.7); font-size: 1.125rem; line-height: 1.5; max-width: 42rem; margin: 0 auto; } .ev-articles-list { background: var(--ev-white); padding: 3rem 1.5rem 6rem; } .ev-articles-list__inner { max-width: 80rem; margin: 0 auto; } .ev-articles-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .ev-articles-grid { grid-template-columns: repeat(3, 1fr); } } .ev-articles-empty { color: var(--ev-muted); font-size: 1.125rem; text-align: center; padding: 3rem 0; } /* ─────────────────────────────────────────────────────────────────── Single article (single.php) — editorial layout, 720px column ─────────────────────────────────────────────────────────────────── */ .ev-article { max-width: 45rem; /* 720px */ margin: 0 auto; padding: 4rem 1.5rem 4rem; } @media (max-width: 639px) { .ev-article { padding: 3rem 1.25rem 3rem; } } .ev-article__head { margin-bottom: 2.5rem; } .ev-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .ev-article__meta-sep { color: var(--ev-border-light); font-size: 0.875rem; } .ev-article__date, .ev-article__readtime { color: var(--ev-muted); font-size: 0.875rem; } .ev-article__title { font-family: var(--ev-font-heading); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; color: var(--ev-teal-dark); letter-spacing: var(--ev-tracking-tight); margin: 0 0 1.5rem; } .ev-article__lead { font-size: 1.25rem; line-height: 1.6; color: var(--ev-teal-dark); margin: 0; } .ev-article__figure { margin: 3rem 0; border-radius: var(--ev-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--ev-section-gray); } .ev-article__figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .ev-article__body { margin-top: 2.5rem; } .ev-article__body h2 { font-family: var(--ev-font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--ev-teal-dark); letter-spacing: var(--ev-tracking-tight); margin: 2.5rem 0 1rem; } .ev-article__body h3 { font-family: var(--ev-font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--ev-teal-dark); letter-spacing: var(--ev-tracking-tight); margin: 2rem 0 0.75rem; } .ev-article__body a { color: var(--ev-teal-dark); text-decoration: underline; text-underline-offset: 0.2em; transition: color .2s ease; } .ev-article__body a:hover { color: var(--ev-green-accent); } .ev-article__body ul, .ev-article__body ol { padding-left: 1.5rem; margin: 0 0 1.5rem; color: var(--ev-muted); font-size: 1.125rem; line-height: 1.7; } .ev-article__body li { margin-bottom: 0.5rem; } .ev-article__body blockquote { border-left: 3px solid var(--ev-green-accent); padding: 0.25rem 0 0.25rem 1.5rem; margin: 2rem 0; font-style: italic; color: var(--ev-teal-dark); font-size: 1.25rem; line-height: 1.5; } .ev-article__body blockquote p { color: inherit; font-size: inherit; line-height: inherit; } .ev-article__body img { max-width: 100%; height: auto; border-radius: var(--ev-radius-lg); margin: 2rem 0; } .ev-article__foot { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--ev-border-light); } /* Related-articles section under single article */ .ev-related-section { padding: 4rem 1.5rem 5rem; } .ev-related-section__inner { max-width: 80rem; margin: 0 auto; } .ev-related-section__h2 { text-align: center; margin-bottom: 2.5rem; } .ev-related-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; max-width: 56rem; margin: 0 auto; } @media (min-width: 768px) { .ev-related-grid { grid-template-columns: repeat(2, 1fr); } } /* ─────────────────────────────────────────────────────────────────── Site header (header.php) — port of /old's sticky white header ─────────────────────────────────────────────────────────────────── */ .ev-skip-link { position: absolute; left: -9999px; top: 0; background: var(--ev-teal-dark); color: #fff; padding: 0.5rem 1rem; z-index: 100; } .ev-skip-link:focus { left: 1rem; top: 1rem; } .ev-site-header { position: sticky; top: 0; z-index: 50; background: var(--ev-white); border-bottom: 1px solid var(--ev-border-light); } .ev-site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 80rem; margin: 0 auto; height: 5rem; padding: 0 1.5rem; } .ev-site-header__logo { display: inline-flex; flex-shrink: 0; } .ev-site-header__logo img { display: block; height: 4rem; width: auto; } .ev-site-nav { display: flex; align-items: center; gap: 2rem; position: absolute; left: 50%; transform: translateX(-50%); } .ev-site-nav a { font-family: var(--ev-font-sans); color: var(--ev-teal-dark); font-size: 1rem; font-weight: 500; text-decoration: none; transition: color .2s ease; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } .ev-site-nav a:hover { color: var(--ev-green-accent); } .ev-chevron { display: inline-block; transition: transform .2s ease; } .ev-nav-item--has-submenu { position: relative; display: inline-flex; align-items: center; } .ev-nav-item--has-submenu:hover .ev-chevron, .ev-nav-item--has-submenu:focus-within .ev-chevron { transform: rotate(180deg); } .ev-submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(0.25rem); display: flex; flex-direction: column; min-width: 14rem; padding: 0.5rem; background: var(--ev-white); border: 1px solid var(--ev-border-light); border-radius: var(--ev-radius-lg); box-shadow: 0 12px 32px rgba(0, 26, 94, 0.10); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 50; } .ev-nav-item--has-submenu:hover .ev-submenu, .ev-nav-item--has-submenu:focus-within .ev-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .ev-submenu a { padding: 0.625rem 0.875rem; border-radius: 0.5rem; color: var(--ev-teal-dark); font-size: 0.9375rem; white-space: nowrap; } .ev-submenu a:hover, .ev-submenu a:focus-visible { background: var(--ev-section-gray); color: var(--ev-green-accent); } .ev-site-header__cta { background-color: var(--ev-green-accent); color: var(--ev-white); padding: 0.625rem 1.5rem; border-radius: var(--ev-radius-xl); font-family: var(--ev-font-sans); font-size: 1rem; font-weight: 500; text-decoration: none; flex-shrink: 0; transition: opacity .2s ease; } .ev-site-header__cta:hover { opacity: 0.9; } .ev-nav-toggle { display: none; } .ev-burger { display: none; align-items: center; justify-content: center; color: var(--ev-teal-dark); cursor: pointer; padding: 0.5rem; } .ev-burger__close { display: none; } .ev-nav-toggle:checked ~ .ev-burger .ev-burger__open { display: none; } .ev-nav-toggle:checked ~ .ev-burger .ev-burger__close { display: inline-block; } .ev-site-nav a.ev-site-nav__cta { display: none; } @media (max-width: 1023px) { .ev-site-nav { position: fixed; inset: 5rem 0 auto 0; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ev-white); transform: none; max-height: 0; overflow: hidden; transition: max-height .25s ease; } .ev-nav-toggle:checked ~ .ev-site-nav { max-height: calc(100vh - 5rem); border-top: 1px solid var(--ev-border-light); } .ev-site-nav > a:not(.ev-site-nav__cta), .ev-site-nav > .ev-nav-item--has-submenu > .ev-site-nav__chev { padding: 0.875rem 1.5rem; width: 100%; justify-content: flex-start; font-weight: 600; color: var(--ev-teal-dark); } .ev-nav-item--has-submenu { display: flex; flex-direction: column; align-items: stretch; width: 100%; } .ev-nav-item--has-submenu .ev-chevron { display: none; } .ev-submenu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; min-width: 0; } .ev-submenu a { padding: 0.625rem 1.5rem 0.625rem 2.5rem; border: none; border-radius: 0; font-size: 0.9375rem; font-weight: 500; color: var(--ev-muted); white-space: normal; } .ev-submenu a:hover, .ev-submenu a:focus-visible { background: transparent; } .ev-site-header__cta { display: none; } .ev-site-nav a.ev-site-nav__cta { display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0.75rem 1.5rem 1.25rem; padding: 0.875rem 1.5rem; background-color: var(--ev-green-accent); color: var(--ev-white); border-radius: var(--ev-radius-xl); font-size: 1rem; font-weight: 500; } .ev-site-nav a.ev-site-nav__cta:hover { color: var(--ev-white); opacity: 0.9; } .ev-nav-item--has-submenu:hover .ev-submenu, .ev-nav-item--has-submenu:focus-within .ev-submenu { transform: none; } .ev-nav-item--has-submenu:hover .ev-chevron, .ev-nav-item--has-submenu:focus-within .ev-chevron { transform: none; } .ev-burger { display: inline-flex; margin-left: auto; } } /* ─────────────────────────────────────────────────────────────────── Site footer (footer.php) ─────────────────────────────────────────────────────────────────── */ .ev-site-footer { background: var(--ev-teal-dark); color: var(--ev-white); padding: 4rem 1.5rem 1.75rem; } .ev-site-footer__top { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .ev-site-footer__brand { display: block; } .ev-site-footer__logo { display: block; height: 2.25rem; width: auto; margin-bottom: 1.25rem; } .ev-site-footer__copy { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); margin: 0; } .ev-site-footer__contact { display: flex; justify-content: flex-end; align-items: flex-start; } .ev-site-footer__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; background: var(--ev-white); color: var(--ev-teal-dark); border-radius: var(--ev-radius-xl); font-family: var(--ev-font-sans); font-size: 1rem; font-weight: 500; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .ev-site-footer__cta:hover { color: var(--ev-teal-dark); transform: translateY(-1px); box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18); } .ev-site-footer__bottom { max-width: 80rem; margin: 1.5rem auto 0; display: flex; justify-content: flex-end; gap: 2rem; font-size: 0.8125rem; } .ev-site-footer__bottom a { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color .2s ease; } .ev-site-footer__bottom a:hover { color: var(--ev-white); } @media (max-width: 767px) { .ev-site-footer { padding: 3rem 1.25rem 1.5rem; } .ev-site-footer__top { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 2rem; } .ev-site-footer__contact { justify-content: flex-start; } .ev-site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: 1.25rem; } } /* Front-page splash overlay — hides the page until the hero video starts. */ #ev-hero-splash { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background-color: var(--ev-teal-dark); opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s linear 0s; } #ev-hero-splash.is-hidden { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; pointer-events: none; } #ev-hero-splash img { width: 240px; max-width: 60vw; height: auto; } .ev-hero-splash__dots { display: flex; gap: 0.5rem; } .ev-hero-splash__dots span { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); animation: ev-splash-pulse 1.2s ease-in-out infinite both; } .ev-hero-splash__dots span:nth-child(2) { animation-delay: .15s; } .ev-hero-splash__dots span:nth-child(3) { animation-delay: .30s; } @keyframes ev-splash-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }