/* ============================================================================ LAVZEN · UI / Page Layer (lavzen-ui.css) ---------------------------------------------------------------------------- Built ON TOP of lavzen-glass.css. Consumes --lav-* tokens ONLY — defines no raw colours or font sizes. This is the single component layer every page in the theme composes from (homepage sections, nav, footer, cards, bento, steps, FAQ, forms, badges …). Load order: lavzen-glass.css → lavzen-ui.css. Naming: BEM-ish, all prefixed .lav-. 2-space indent. ============================================================================ */ /* ========================================================================== 1 · LAYOUT PRIMITIVES ========================================================================== */ .lav-wrap { width: 100%; max-width: var(--lav-container, 1200px); margin-inline: auto; padding-inline: var(--lav-space-6); } .lav-wrap--narrow { max-width: 820px; } .lav-sec { padding-block: clamp(var(--lav-space-12), 7vw, var(--lav-space-24)); position: relative; } .lav-sec--tight { padding-block: clamp(var(--lav-space-8), 5vw, var(--lav-space-16)); } /* section heading block (eyebrow → title → intro) */ .lav-head { max-width: 760px; margin: 0 0 var(--lav-space-10); } .lav-head--center { margin-inline: auto; text-align: center; } .lav-head__eyebrow { display: inline-flex; align-items: center; gap: var(--lav-space-2); margin-bottom: var(--lav-space-4); } .lav-head__title { font-size: var(--lav-text-2xl); font-weight: var(--lav-w-bold); line-height: var(--lav-leading-tight); letter-spacing: var(--lav-track-tight); margin: 0; } .lav-head__intro { margin: var(--lav-space-4) 0 0; font-size: var(--lav-text-md); line-height: var(--lav-leading-relaxed); color: var(--lav-text-2); } .lav-head--center .lav-head__intro { margin-inline: auto; max-width: 60ch; } /* one gold/accent word inside a heading (sparingly) */ .lav-mark { color: var(--lav-cta); } .lav-mark--accent { color: var(--lav-accent); } /* status dot used on eyebrows */ .lav-dot { width: 8px; height: 8px; border-radius: var(--lav-r-pill); background: var(--lav-cta); box-shadow: 0 0 10px var(--lav-cta); flex: 0 0 auto; } @media (prefers-reduced-motion: no-preference) { .lav-dot { animation: lav-blink 2.4s var(--lav-ease) infinite; } } @keyframes lav-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* icon medallion — holds a 24px currentColor SVG, tinted per accent */ .lav-ico { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--lav-r-md); background: color-mix(in srgb, var(--lav-accent) 14%, transparent); color: var(--lav-accent); border: 1px solid color-mix(in srgb, var(--lav-accent) 34%, transparent); } .lav-ico svg { width: 22px; height: 22px; } .lav-ico--gold { background: color-mix(in srgb, var(--lav-cta) 16%, transparent); color: var(--lav-cta); border-color: color-mix(in srgb, var(--lav-cta) 40%, transparent); } .lav-ico--teal { background: color-mix(in srgb, var(--lav-teal) 16%, transparent); color: var(--lav-teal); border-color: color-mix(in srgb, var(--lav-teal) 40%, transparent); } .lav-ico--lg { width: 56px; height: 56px; border-radius: var(--lav-r-lg); } .lav-ico--lg svg { width: 26px; height: 26px; } /* ========================================================================== 2 · NAVBAR (floating capsule, tier-4) ========================================================================== */ .lav-navbar { position: sticky; top: var(--lav-space-3); z-index: var(--lav-z-nav); padding-inline: var(--lav-space-4); } .lav-navbar__inner { display: flex; align-items: center; gap: var(--lav-space-4); max-width: var(--lav-container, 1200px); margin-inline: auto; min-height: 60px; padding: var(--lav-space-2) var(--lav-space-2) var(--lav-space-2) var(--lav-space-5); border-radius: var(--lav-r-pill); } .lav-brand { display: inline-flex; align-items: center; gap: var(--lav-space-2); font-weight: var(--lav-w-black); font-size: var(--lav-text-lg); letter-spacing: var(--lav-track-tight); color: var(--lav-text); text-decoration: none; } .lav-brand__dot { width: 10px; height: 10px; border-radius: var(--lav-r-pill); background: var(--lav-cta); box-shadow: 0 0 12px var(--lav-cta); } .lav-nav__links { display: flex; align-items: center; gap: var(--lav-space-1); margin: 0 auto 0 var(--lav-space-6); padding: 0; list-style: none; } .lav-nav__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--lav-space-4); border-radius: var(--lav-r-pill); color: var(--lav-text-2); text-decoration: none; font-weight: var(--lav-w-medium); font-size: var(--lav-text-sm); transition: color var(--lav-dur-fast) var(--lav-ease), background-color var(--lav-dur-fast) var(--lav-ease); } .lav-nav__link:hover { color: var(--lav-text); background-color: var(--lav-glass-tint); } .lav-nav__link[aria-current="page"] { color: var(--lav-text); background-color: var(--lav-glass-tint); } .lav-nav__actions { display: flex; align-items: center; gap: var(--lav-space-2); margin-left: auto; } /* icon-only round control (theme toggle / menu) — 44px tap target */ .lav-iconbtn { display: grid; place-items: center; width: var(--lav-tap); height: var(--lav-tap); border: 0; border-radius: var(--lav-r-pill); background: transparent; color: var(--lav-text-2); cursor: pointer; transition: color var(--lav-dur-fast) var(--lav-ease), background-color var(--lav-dur-fast) var(--lav-ease); } .lav-iconbtn:hover { color: var(--lav-text); background-color: var(--lav-glass-tint); } .lav-iconbtn svg { width: 20px; height: 20px; } .lav-iconbtn__sun { display: none; } [data-theme="light"] .lav-iconbtn__sun { display: block; } [data-theme="light"] .lav-iconbtn__moon { display: none; } .lav-nav__toggle { display: none; } /* mobile hamburger — shown via media query */ /* mobile drawer */ .lav-nav__drawer { display: none; } @media (max-width: 860px) { .lav-nav__links { display: none; } .lav-nav__cta-text { display: none; } .lav-nav__toggle { display: grid; } .lav-nav__drawer { display: block; position: fixed; inset: calc(60px + var(--lav-space-5)) var(--lav-space-4) auto; z-index: var(--lav-z-nav); padding: var(--lav-space-3); border-radius: var(--lav-r-xl); transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--lav-dur-base) var(--lav-ease), transform var(--lav-dur-base) var(--lav-ease), visibility var(--lav-dur-base); } .lav-nav__drawer.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; } .lav-nav__drawer a { display: flex; align-items: center; min-height: var(--lav-tap); padding: 0 var(--lav-space-4); border-radius: var(--lav-r-md); color: var(--lav-text); text-decoration: none; font-weight: var(--lav-w-medium); } .lav-nav__drawer a:hover { background-color: var(--lav-glass-tint); } } /* ========================================================================== 3 · HERO ========================================================================== */ .lav-hero { padding-block: clamp(var(--lav-space-16), 12vw, var(--lav-space-32)); text-align: center; position: relative; } .lav-hero__inner { max-width: 880px; margin-inline: auto; } .lav-hero__title { font-size: var(--lav-text-display); font-weight: var(--lav-w-black); line-height: var(--lav-leading-tight); letter-spacing: var(--lav-track-tight); margin: var(--lav-space-5) 0 0; text-wrap: balance; } .lav-hero__sub { margin: var(--lav-space-6) auto 0; max-width: 60ch; font-size: var(--lav-text-md); line-height: var(--lav-leading-relaxed); color: var(--lav-text-2); } .lav-hero__cta { margin-top: var(--lav-space-8); display: flex; flex-wrap: wrap; gap: var(--lav-space-3); justify-content: center; } .lav-hero__reassure { margin: var(--lav-space-6) 0 0; display: inline-flex; align-items: center; gap: var(--lav-space-2); font-size: var(--lav-text-sm); color: var(--lav-text-2); } .lav-hero__reassure svg { width: 16px; height: 16px; color: var(--lav-success); flex: 0 0 auto; } /* eyebrow as a glass pill */ .lav-pillbrow { display: inline-flex; align-items: center; gap: var(--lav-space-2); padding: var(--lav-space-2) var(--lav-space-4); border-radius: var(--lav-r-pill); font-size: var(--lav-text-xs); font-weight: var(--lav-w-medium); letter-spacing: var(--lav-track-wide); text-transform: uppercase; color: var(--lav-text); } /* arrow that nudges on hover of its button */ .lav-btn__arrow { width: 18px; height: 18px; transition: transform var(--lav-dur-fast) var(--lav-ease); } .lav-btn:hover .lav-btn__arrow { transform: translateX(3px); } /* ========================================================================== 4 · "RIGHT FOR YOU" STRIP ========================================================================== */ .lav-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lav-space-3); } .lav-strip__label { font-size: var(--lav-text-sm); color: var(--lav-text-2); font-weight: var(--lav-w-medium); } .lav-pill { display: inline-flex; align-items: center; gap: var(--lav-space-2); min-height: 40px; padding: 0 var(--lav-space-4); border-radius: var(--lav-r-pill); font-size: var(--lav-text-sm); font-weight: var(--lav-w-medium); color: var(--lav-text); } .lav-pill svg { width: 16px; height: 16px; color: var(--lav-accent); } .lav-strip__note { margin: var(--lav-space-5) auto 0; max-width: 70ch; text-align: center; } /* ========================================================================== 5 · TRUST BAR ========================================================================== */ .lav-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lav-space-2); padding: var(--lav-space-6); } .lav-trust__item { display: flex; align-items: center; gap: var(--lav-space-3); padding: var(--lav-space-3) var(--lav-space-4); } .lav-trust__item + .lav-trust__item { border-left: 1px solid var(--lav-line); } .lav-trust__txt { min-width: 0; } .lav-trust__title { font-size: var(--lav-text-sm); font-weight: var(--lav-w-bold); color: var(--lav-text); line-height: var(--lav-leading-snug); } .lav-trust__sub { font-size: var(--lav-text-xs); color: var(--lav-text-2); } @media (max-width: 860px) { .lav-trust { grid-template-columns: repeat(2, 1fr); } .lav-trust__item:nth-child(odd) { border-left: 0; } .lav-trust__item:nth-child(n+3) { border-top: 1px solid var(--lav-line); } } @media (max-width: 480px) { .lav-trust { grid-template-columns: 1fr; } .lav-trust__item { border-left: 0 !important; } .lav-trust__item + .lav-trust__item { border-top: 1px solid var(--lav-line); } } /* ========================================================================== 6 · CARD (Problem cards, generic content cards) ========================================================================== */ .lav-grid { display: grid; gap: var(--lav-space-5); } .lav-grid--2 { grid-template-columns: repeat(2, 1fr); } .lav-grid--3 { grid-template-columns: repeat(3, 1fr); } .lav-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .lav-grid--3, .lav-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .lav-grid--2, .lav-grid--3, .lav-grid--4 { grid-template-columns: 1fr; } } .lav-card { padding: var(--lav-space-6); display: flex; flex-direction: column; gap: var(--lav-space-3); transition: transform var(--lav-dur-base) var(--lav-ease); } .lav-card__title { font-size: var(--lav-text-lg); font-weight: var(--lav-w-bold); line-height: var(--lav-leading-snug); margin: 0; color: var(--lav-text); } .lav-card__body { font-size: var(--lav-text-base); line-height: var(--lav-leading-normal); color: var(--lav-text-2); margin: 0; } @media (prefers-reduced-motion: no-preference) { .lav-card:hover { transform: translateY(-3px); } } /* ========================================================================== 7 · SOLUTION BENTO (1 large + 4 small) ========================================================================== */ .lav-bento { display: grid; gap: var(--lav-space-5); grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } .lav-bento__tile { padding: var(--lav-space-6); display: flex; flex-direction: column; gap: var(--lav-space-3); } .lav-bento__tile--feature { grid-column: span 2; grid-row: span 2; justify-content: flex-end; padding: var(--lav-space-8); } .lav-bento__tile--small { grid-column: span 2; } .lav-bento__title { font-weight: var(--lav-w-bold); line-height: var(--lav-leading-snug); margin: 0; color: var(--lav-text); } .lav-bento__tile--feature .lav-bento__title { font-size: var(--lav-text-xl); } .lav-bento__tile--small .lav-bento__title { font-size: var(--lav-text-md); } .lav-bento__body { font-size: var(--lav-text-base); line-height: var(--lav-leading-normal); color: var(--lav-text-2); margin: 0; } @media (max-width: 860px) { .lav-bento { grid-template-columns: repeat(2, 1fr); } .lav-bento__tile--feature { grid-column: span 2; grid-row: auto; } .lav-bento__tile--small { grid-column: span 1; } } @media (max-width: 560px) { .lav-bento { grid-template-columns: 1fr; } .lav-bento__tile--feature, .lav-bento__tile--small { grid-column: span 1; } } /* ========================================================================== 8 · HOW IT WORKS — STEPS ========================================================================== */ .lav-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lav-space-5); counter-reset: lav-step; } .lav-step { position: relative; padding: var(--lav-space-6); display: flex; flex-direction: column; gap: var(--lav-space-3); } .lav-step__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--lav-r-pill); font-family: var(--lav-font-mono); font-weight: var(--lav-w-bold); font-size: var(--lav-text-base); color: var(--lav-cta-ink); background: var(--lav-cta); flex: 0 0 auto; } .lav-step__title { font-size: var(--lav-text-md); font-weight: var(--lav-w-bold); margin: 0; color: var(--lav-text); } .lav-step__body { font-size: var(--lav-text-sm); line-height: var(--lav-leading-normal); color: var(--lav-text-2); margin: 0; } @media (max-width: 860px) { .lav-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .lav-steps { grid-template-columns: 1fr; } } /* ========================================================================== 9 · MANAGERS (criteria list + reassurance box + honest note) ========================================================================== */ .lav-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--lav-space-8); align-items: start; } @media (max-width: 860px) { .lav-split { grid-template-columns: 1fr; gap: var(--lav-space-6); } } .lav-criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lav-space-4); } .lav-criteria li { display: flex; align-items: flex-start; gap: var(--lav-space-3); font-size: var(--lav-text-base); color: var(--lav-text); } .lav-criteria svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--lav-teal); margin-top: 1px; } .lav-reassure { padding: var(--lav-space-6); display: flex; flex-direction: column; gap: var(--lav-space-4); } .lav-reassure__row { display: flex; align-items: flex-start; gap: var(--lav-space-3); } .lav-reassure__row svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--lav-cta); } .lav-reassure p { margin: 0; font-size: var(--lav-text-base); line-height: var(--lav-leading-normal); color: var(--lav-text); } .lav-note { margin-top: var(--lav-space-6); font-size: var(--lav-text-sm); color: var(--lav-text-3); font-style: italic; } /* ========================================================================== 10 · FAQ (native
accordion, JS-enhanced) ========================================================================== */ .lav-faq { display: flex; flex-direction: column; gap: var(--lav-space-3); max-width: 860px; margin-inline: auto; } .lav-faq__item { overflow: clip; } .lav-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--lav-space-4); padding: var(--lav-space-5) var(--lav-space-6); font-size: var(--lav-text-md); font-weight: var(--lav-w-medium); color: var(--lav-text); } .lav-faq__q::-webkit-details-marker { display: none; } .lav-faq__chevron { width: 20px; height: 20px; flex: 0 0 auto; color: var(--lav-text-2); transition: transform var(--lav-dur-base) var(--lav-ease); } .lav-faq__item[open] .lav-faq__chevron { transform: rotate(180deg); } .lav-faq__a { padding: 0 var(--lav-space-6) var(--lav-space-5); margin: 0; font-size: var(--lav-text-base); line-height: var(--lav-leading-relaxed); color: var(--lav-text-2); } /* ========================================================================== 11 · FINAL CTA BAND ========================================================================== */ .lav-ctaband { padding: clamp(var(--lav-space-10), 7vw, var(--lav-space-16)); text-align: center; position: relative; overflow: clip; } .lav-ctaband__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; } .lav-ctaband__title { font-size: var(--lav-text-2xl); font-weight: var(--lav-w-black); line-height: var(--lav-leading-tight); letter-spacing: var(--lav-track-tight); margin: 0; } .lav-ctaband__sub { margin: var(--lav-space-4) auto var(--lav-space-8); max-width: 52ch; font-size: var(--lav-text-md); color: var(--lav-text-2); line-height: var(--lav-leading-relaxed); } /* a single warm gold bloom behind the final CTA (the brand "light") */ .lav-ctaband__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--lav-cta) 20%, transparent), transparent 70%); } /* ========================================================================== 12 · BADGE / CHIP ========================================================================== */ .lav-badge { display: inline-flex; align-items: center; gap: var(--lav-space-2); padding: var(--lav-space-1) var(--lav-space-3); border-radius: var(--lav-r-pill); font-size: var(--lav-text-xs); font-weight: var(--lav-w-medium); letter-spacing: var(--lav-track-wide); text-transform: uppercase; } .lav-badge--secure { color: var(--lav-teal); background: color-mix(in srgb, var(--lav-teal) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lav-teal) 40%, transparent); } .lav-badge--gold { color: var(--lav-cta); background: color-mix(in srgb, var(--lav-cta) 16%, transparent); border: 1px solid color-mix(in srgb, var(--lav-cta) 40%, transparent); } .lav-badge svg { width: 13px; height: 13px; } /* ========================================================================== 13 · FORMS (Contact page, EDD checkout reuse these) ========================================================================== */ .lav-field { display: flex; flex-direction: column; gap: var(--lav-space-2); } .lav-label { font-size: var(--lav-text-sm); font-weight: var(--lav-w-medium); color: var(--lav-text); } .lav-label__req { color: var(--lav-cta); margin-left: 2px; } .lav-textarea { min-height: 140px; padding: var(--lav-space-3) var(--lav-space-4); resize: vertical; width: 100%; font: inherit; color: var(--lav-text); background-color: var(--lav-glass-tint); -webkit-backdrop-filter: blur(calc(var(--lav-blur-control) * var(--lav-glass-intensity))); backdrop-filter: blur(calc(var(--lav-blur-control) * var(--lav-glass-intensity))); border: 1px solid var(--lav-glass-edge); border-radius: var(--lav-r-md); } .lav-textarea::placeholder { color: var(--lav-text-3); } .lav-textarea:focus { outline: none; border-color: var(--lav-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lav-accent) 30%, transparent); } .lav-help { font-size: var(--lav-text-xs); color: var(--lav-text-3); } .lav-err { font-size: var(--lav-text-xs); color: var(--lav-error); } /* contact form layout */ .lav-form { padding: clamp(var(--lav-space-5), 4vw, var(--lav-space-8)); display: flex; flex-direction: column; gap: var(--lav-space-5); } .lav-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lav-space-4); } @media (max-width: 560px) { .lav-form__row { grid-template-columns: 1fr; } } .lav-form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lav-space-3); margin-top: var(--lav-space-2); } /*