/* ========================================================= WordPress integration layer for the static design. Everything here is additive — the original design CSS is untouched. ========================================================= */ /* --- Accessibility helpers --- */ .screen-reader-text, .dav-sr-input { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed !important; top: 1rem; left: 1rem; z-index: 10000; width: auto; height: auto; clip: auto; margin: 0; padding: .8rem 1.2rem; border-radius: 6px; background: var(--accent); color: var(--ink); font-weight: 600; } main:focus { outline: none; } /* --- Admin bar offset for the fixed header --- */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* --- Header --- */ .header-static .site-header { position: absolute; } .nav a.is-highlight { color: var(--accent); font-weight: 700; } #header .brand img { width: 170px; height: auto; } /* The logo scales down with the header but is never squeezed below a legible size by the menu; on medium screens the menu tightens its spacing instead. */ #header .brand { min-width: 140px; } @media (max-width: 1400px) and (min-width: 861px) { .site-header { gap: clamp(1rem, 1.8vw, 2rem); } .nav ul { gap: clamp(1.1rem, 2.2vw, 1.9rem); } } @media (max-width: 1024px) and (min-width: 961px) { .nav ul { gap: 1rem; } } /* Just above the burger breakpoint the row is at its tightest. */ @media (max-width: 960px) and (min-width: 861px) { .site-header { gap: .75rem; } .nav ul { gap: .8rem; } } @media (max-width: 920px) and (min-width: 861px) { #header .brand { min-width: 120px; } .nav a { letter-spacing: .01em; } } /* --- Active menu item: the current page (aria-current="page"), or the section in view (aria-current="location", set by main.js) --- */ .nav a[aria-current] { color: var(--fg); } .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; } .mobile-menu a[aria-current], .site-footer nav a[aria-current] { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: max(1px, .04em); text-underline-offset: .35em; } /* --- Footer --- */ .site-footer__heading { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 1.1rem; font-weight: 400; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; } .site-footer__legal a { color: var(--fg-faint); } .site-footer__legal a:hover { color: var(--fg); } /* --- Section modifiers (Design tab) --- */ .dav-space-compact { padding-top: clamp(2rem, 4vw, 3.5rem) !important; padding-bottom: clamp(2rem, 4vw, 3.5rem) !important; } .dav-space-none { padding-top: 0 !important; padding-bottom: 0 !important; } .dav-bg-soft { background: rgba(var(--accent-rgb), .03); border-block: 1px solid var(--line-soft); } .dav-bg-surface { background: var(--bg-soft); border-block: 1px solid var(--line-soft); } .section-head__cta { margin-top: 1.5rem; } .about--image-right .about__media { order: 2; } .marquee__logo { height: 1.6em; width: auto; display: inline-block; opacity: .85; } .faq__answer p + p { margin-top: .8em; } .quote__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .contact__lead--alt p { margin: 0; } /* --- Generic pages, text blocks, CTA, 404 --- */ .dav-page, .dav-text, .dav-cta, .dav-404 { position: relative; z-index: 2; padding: clamp(7rem, 14vh, 9rem) var(--pad) clamp(3rem, 6vw, 5rem); max-width: var(--maxw); margin: 0 auto; } .dav-text + .dav-text, .dav-section + .dav-text, .dav-section + .dav-cta { padding-top: clamp(2rem, 5vw, 4rem); } .dav-text--narrow .dav-text__body, .dav-page__body { max-width: 72ch; } .dav-text--narrow .dav-text__body { margin: 0 auto; } .dav-page__head { margin-bottom: 2rem; } .dav-page__image { margin: 0 0 2rem; } .dav-cta { text-align: center; } .dav-cta .reel__cta { justify-content: center; } .dav-404 { text-align: center; min-height: 70vh; display: grid; align-content: center; gap: 1.25rem; } .dav-empty-hint { color: var(--fg-faint); font-style: italic; } .dav-post-list { display: grid; gap: 2rem; } .dav-post-list h2 { font-size: 1.5rem; } .dav-muted { color: var(--fg-faint); font-size: .85rem; } .entry-content { color: var(--fg-dim); line-height: 1.75; } .entry-content > * + * { margin-top: 1.1em; } .entry-content h2, .entry-content h3, .entry-content h4 { color: var(--fg); margin-top: 1.8em; line-height: 1.2; } .entry-content h2 { font-size: 1.8rem; } .entry-content h3 { font-size: 1.35rem; } .entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .entry-content ul { list-style: disc; padding-left: 1.4em; } .entry-content ol { list-style: decimal; padding-left: 1.4em; } .entry-content li + li { margin-top: .4em; } .entry-content blockquote { border-left: 2px solid var(--accent-2); padding-left: 1.2rem; color: var(--fg); } .entry-content img { border-radius: 8px; } /* --- Configurator: native radios styled as the design's buttons --- */ .dav-configurator fieldset.config-block { border: 0; padding: 0; margin: 0; min-width: 0; } .dav-configurator fieldset.config-block > legend { padding: 0; float: left; width: 100%; } .dav-configurator fieldset.config-block > legend + * { clear: both; } .seg-control label.seg-btn { display: inline-flex; align-items: center; justify-content: center; } .seg-control label.seg-btn:has(input:focus-visible), .toggle-item .toggle-text:has(input:focus-visible), .res-card:has(input:focus-visible) .res-card__box { outline: 2px solid var(--accent); outline-offset: 3px; } .dav-currency .toggle-text { cursor: pointer; } .dav-currency .toggle-switch-track { cursor: pointer; } .summary-price-main { margin: 0; } .purchase-breakdown { margin: 0; } .purchase-breakdown dt, .purchase-breakdown dd { margin: 0; } .summary-badge[hidden] { display: none; } .dav-configurator .config-grid[hidden] { display: none; } .dav-notice { max-width: 900px; margin: 0 auto 2rem; padding: 1rem 1.25rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--accent-rgb), .06); color: var(--fg-dim); font-size: .92rem; } .dav-notice p + p { margin-top: .5em; } .dav-notice strong { color: var(--fg); } /* Checkout pop-up: the form inherits the design's field styles but drops the panel chrome. */ .purchase-modal .eform { max-width: none; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .purchase-modal .eform::before { display: none; } .purchase-modal .eform__foot { margin-top: 1.25rem; } .purchase-modal .eform__foot .btn { width: 100%; justify-content: center; } /* Without JavaScript the pop-up is shown inline under the configurator. */ html.js .purchase-modal.dav-modal--static { display: none; } html.no-js .purchase-modal.dav-modal--static { position: relative; inset: auto; z-index: 2; display: block; padding: clamp(2rem, 5vw, 4rem) 0 0; } html.no-js .purchase-modal.dav-modal--static .vmodal__backdrop, html.no-js .purchase-modal.dav-modal--static .vmodal__close { display: none; } html.no-js .purchase-modal.dav-modal--static .vmodal__panel { margin: 0 auto; max-height: none; overflow: visible; } /* --- Intake card (Thank You page) --- */ .dav-form-section--card { padding-top: clamp(2rem, 5vw, 3rem); min-height: 0; } .quest-card .eform { max-width: none; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .quest-card .eform::before { display: none; } .dav-confirmation { min-height: 0; padding-bottom: 0; } .dav-confirmation .success-message p + p { margin-top: .75em; } .dav-confirmation--pending .success-icon-wrap svg circle { fill: none; stroke: currentColor; stroke-width: 2; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Explainer from YouTube: the cover until play is pressed, then the privacy-enhanced player at 16:9 (the details strip would cover its controls). */ .reel__frame--youtube .reel__cover { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); } .reel__frame--youtube a.reel__play { text-decoration: none; color: inherit; } .reel__frame.is-youtube-playing { aspect-ratio: 16 / 9; } .reel__frame.is-youtube-playing .reel__meta { display: none; } .reel__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Video styles pop-up playing a YouTube video: the player replaces the