/* ============================================================================ HIGHLAND VAULT — BASE ELEMENTS All values reference tokens.css. No hard-coded sizes/colours here. ========================================================================== */ /* Box model + smoother rendering */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Full-bleed sections (draw slider / draw tabs) size to 100vw, which INCLUDES the scrollbar width and so overflowed the page horizontally. `clip` trims that overhang. It is used instead of `hidden` deliberately: `hidden` would turn the root into a scroll container and break the sticky header, whereas `clip` paired with a visible y-axis does not. */ overflow-x: clip; } body { margin: 0; font-family: var(--hv-font); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-regular); line-height: var(--hv-lh-normal); color: var(--hv-body); background: var(--hv-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================================================ FONT COMPULSION Force the theme font (Stölzl) over any global font injected by Elementor's typography kit / page builders. Scoped to body.hv-theme and targeting only structural text elements + our own .hv-* components. Bare // are intentionally NOT targeted, so icon fonts (dashicons, Font Awesome, WooCommerce star ratings, .lty-* glyphs) keep their own font-family and don't break. ========================================================================== */ body.hv-theme, body.hv-theme h1, body.hv-theme h2, body.hv-theme h3, body.hv-theme h4, body.hv-theme h5, body.hv-theme h6, body.hv-theme p, body.hv-theme a, body.hv-theme li, body.hv-theme dt, body.hv-theme dd, body.hv-theme td, body.hv-theme th, body.hv-theme label, body.hv-theme legend, body.hv-theme blockquote, body.hv-theme figcaption, body.hv-theme small, body.hv-theme strong, body.hv-theme button, body.hv-theme input, body.hv-theme select, body.hv-theme textarea, body.hv-theme [class^="hv-"], body.hv-theme [class*=" hv-"] { font-family: var(--hv-font) !important; } /* HEADINGS use the heading font role (--hv-font-heading). This rule follows the body compulsion above, so at equal specificity it wins for heading elements — every heading renders in the elegant heading font, everything else in the body font. Add new heading-only classes here if you introduce any. */ body.hv-theme h1, body.hv-theme h2, body.hv-theme h3, body.hv-theme h4, body.hv-theme h5, body.hv-theme h6, body.hv-theme .hv-h1, body.hv-theme .hv-h2, body.hv-theme .hv-h3, body.hv-theme .hv-h4, body.hv-theme .hv-hero-title { font-family: var(--hv-font-heading) !important; } /* Elementor kit neutraliser: the active kit (.elementor-kit-N on ) ships Elementor's factory Design System — #6EC1E4/#61CE70 colours, Roboto/Jost fonts — as --e-global-* variables plus a body font-family. Re-declaring the variables here (attribute selector = higher specificity than .elementor-kit-N, independent of kit ID) makes every widget that references an Elementor "Global" resolve to the Highland Vault palette instead. */ body[class*="elementor-kit-"] { font-family: var(--hv-font) !important; --e-global-color-primary: var(--hv-primary); --e-global-color-secondary: var(--hv-ink); --e-global-color-text: var(--hv-body); --e-global-color-accent: var(--hv-orange-500); --e-global-typography-primary-font-family: var(--hv-font-heading); --e-global-typography-primary-font-weight: var(--hv-fw-bold); --e-global-typography-secondary-font-family: var(--hv-font); --e-global-typography-secondary-font-weight: var(--hv-fw-regular); --e-global-typography-text-font-family: var(--hv-font); --e-global-typography-text-font-weight: var(--hv-fw-regular); --e-global-typography-accent-font-family: var(--hv-font); --e-global-typography-accent-font-weight: var(--hv-fw-medium); } /* Headings — sizes come only from the fluid scale */ h1, h2, h3, h4, h5, h6, .hv-h1, .hv-h2, .hv-h3, .hv-h4 { margin: 0 0 var(--hv-space-4); font-family: var(--hv-font-heading); color: var(--hv-ink); font-weight: var(--hv-fw-bold); line-height: var(--hv-lh-tight); text-wrap: balance; } h1, .hv-h1 { font-size: var(--hv-fs-h1); } h2, .hv-h2 { font-size: var(--hv-fs-h2); } h3, .hv-h3 { font-size: var(--hv-fs-h3); } h4, .hv-h4 { font-size: var(--hv-fs-h4); } h5 { font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); } h6 { font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); } .hv-hero-title { font-size: var(--hv-fs-hero); font-weight: var(--hv-fw-black); line-height: var(--hv-lh-tight); } .hv-lead { font-size: var(--hv-fs-lead); color: var(--hv-muted); } p { margin: 0 0 var(--hv-space-4); max-width: var(--hv-measure); } a { color: var(--hv-primary); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--hv-primary-strong); } small, .hv-small { font-size: var(--hv-fs-sm); } .hv-xs { font-size: var(--hv-fs-xs); } .hv-muted { color: var(--hv-muted); } .hv-eyebrow { font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); text-transform: uppercase; letter-spacing: var(--hv-ls-wider); color: var(--hv-muted); } img, svg, video { max-width: 100%; height: auto; display: block; } hr { border: 0; border-top: 1px solid var(--hv-line); margin: var(--hv-space-5) 0; } /* Accessible focus ring for keyboard users */ :focus-visible { outline: none; box-shadow: var(--hv-ring); border-radius: var(--hv-radius-sm); } /* Selection */ ::selection { background: var(--hv-primary); color: #fff; } /* Layout helpers */ .hv-container { width: 100%; max-width: var(--hv-container); margin-inline: auto; padding-inline: var(--hv-space-5); } .hv-section { padding-block: clamp(2rem, 1.2rem + 3.5vw, 4rem); } .hv-stack > * + * { margin-top: var(--hv-stack-gap, var(--hv-space-4)); } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============================================================================ DARK-SURFACE TOKEN SCOPE (white-canvas hybrid) The page ground is pure white, so :root carries the ON-GROUND text tokens (dark ink, grey hairlines — see tokens.css). Every dark surface listed here re-declares the ON-DARK set locally; components keep referencing the same var() names and resolve per context, so text inside dark cards/panels stays light while text on the white ground reads dark. Compiled from an exhaustive sweep of every dark-background rule in the theme. When adding a NEW dark-surface component, add its selector here. ========================================================================== */ .hv-announce, .hv-wallet-pill, .hv-lang__btn, .hv-lang__list, .hv-hero, .hv-flash-bar, .hv-stats, .hv-newsletter, .hv-footer, .hv-bottom-bar, .hv-badge--soft, .hv-badge--success, .hv-chip, .hv-card, .hv-draw-card, .hv-countdown__unit, .hv-countdown--bar, .hv-showcase, .hv-entry-toggle__btn, .hv-note, .hv-answers__opt, .hv-qty button, .hv-qty-btn, .hv-tabs__tab, .hv-prize-row, .hv-summary__points, .hv-bonus-nudge, .hv-pay-option, .hv-theme .lty-lottery-countdown-timer > .lty-lottery-timer, .hv-theme p.wps_wpr_purchase_pro_point, .hv-theme .lty-lottery-range-slider-btn, .hv-theme ul.lty-lottery-answers li, body.hv-theme .woocommerce-message, body.hv-theme .woocommerce-info, body.hv-theme .woocommerce-error, body.hv-theme .wc-block-components-notice-banner, .hv-theme div.product .woocommerce-tabs ul.tabs li, .hv-empty-cart__icon, .woocommerce-cart .site-main .page-header .entry-title, .woocommerce-cart h1.entry-title, .woocommerce-checkout .site-main .page-header .entry-title, .woocommerce-checkout h1.entry-title { --hv-ink: var(--hv-ink-on-dark); --hv-body: var(--hv-body-on-dark); --hv-muted: var(--hv-muted-on-dark); --hv-line: var(--hv-line-on-dark); }