/* ========================================================================== Live Alpha Labs — main stylesheet (mobile-first: 360 → 768 → 1024 → 1440) Forked from the Stuffed Peppers theme; dark palette from Live Alpha Labs' brand. ========================================================================== */ /* Metric-matched fallbacks: the system font shown before Inter/Sora load takes the same space, so nothing shifts when they arrive. One face per common system font (Windows/macOS/iOS: Arial or Helvetica; Android: Roboto; Linux: Liberation or DejaVu). Values computed from the font files (fontTools, English letter frequencies). */ @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("LiberationSans"); font-weight: 100 500; size-adjust: 107.29%; ascent-override: 90.29%; descent-override: 22.48%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 600 900; size-adjust: 107.29%; ascent-override: 90.29%; descent-override: 22.48%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 500; size-adjust: 107.01%; ascent-override: 90.53%; descent-override: 22.54%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 900; size-adjust: 107.01%; ascent-override: 90.53%; descent-override: 22.54%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback D"; src: local("DejaVu Sans"), local("DejaVuSans"); font-weight: 100 500; size-adjust: 93.44%; ascent-override: 103.67%; descent-override: 25.81%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback D"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 600 900; size-adjust: 93.44%; ascent-override: 103.67%; descent-override: 25.81%; line-gap-override: 0%; } @font-face { font-family: "Sora Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 100 900; size-adjust: 106.78%; ascent-override: 90.84%; descent-override: 27.16%; line-gap-override: 0%; } @font-face { font-family: "Sora Fallback R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 100 900; size-adjust: 113.61%; ascent-override: 85.38%; descent-override: 25.53%; line-gap-override: 0%; } @font-face { font-family: "Sora Fallback D"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 100 900; size-adjust: 89.03%; ascent-override: 108.96%; descent-override: 32.57%; line-gap-override: 0%; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; /* always shows the brand font; the metric-matched fallbacks above keep the swap from moving text */ src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2"); } :root { color-scheme: dark; /* Live Alpha Labs palette (contrast table: docs/design-system.md, tools/contrast.py) */ --bg: #0B0F14; /* page background */ --surface-1: #011221; /* header band, footer, deep navy sections */ --surface-2: #10293C; /* cards, inputs, nav pill */ --surface-3: #0A284B; /* raised / featured panels */ --accent: #60B9ED; /* links, hovers, focus rings, highlights */ --accent-soft: #8FD0F5; /* icons and hover text on dark bands */ --primary: #1F7CEC; /* brand blue: UI accents, never behind small white text */ --primary-btn: #1A6ADB; /* button fill (5.1:1 with white) */ --primary-hover: #1559BE; /* button hover (6.6:1 with white) */ --primary-deep: #081068; /* gradient end */ --text: #F5F7FA; --text-2: #D5DFEA; --text-muted: #9FB3C8; --border: rgba(96, 185, 237, .18); --border-strong: rgba(96, 185, 237, .32); --danger: #FF7A7A; --success: #5BD38A; --cta-gradient: linear-gradient(120deg, var(--primary-btn) 0%, #1245B0 55%, var(--primary-deep) 100%); /* WooCommerce's own form variables (its .form-row .input-text rule defaults to #fff) */ --wc-form-color-background: var(--surface-2); --wc-form-color-text: var(--text); --wc-form-border-color: var(--border-strong); --wc-form-border-radius: 12px; --wc-form-border-width: 1.5px; /* Aliases so the forked Stuffed Peppers rules resolve to the dark palette */ --teal-950: var(--surface-1); --teal-900: #06203A; --teal-800: var(--surface-3); --teal-700: var(--primary-btn); --teal-600: var(--accent); --teal-500: var(--accent); --teal-300: var(--accent-soft); --teal-100: var(--border); --teal-50: rgba(96, 185, 237, .10); --orange-700: var(--accent); --orange-600: var(--accent); --orange-500: var(--primary); --orange-300: var(--accent-soft); --orange-100: rgba(96, 185, 237, .08); --red-600: var(--danger); --red-100: rgba(255, 122, 122, .10); --green-700: var(--success); --green-100: rgba(91, 211, 138, .10); /* Neutrals */ --ink: var(--text); --ink-2: var(--text-2); --muted: var(--text-muted); --line: var(--border); --line-strong: var(--border-strong); --paper: var(--bg); --surface: var(--surface-2); --night: var(--surface-1); /* Type */ --font-display: "Sora", "Sora Fallback", "Sora Fallback R", "Sora Fallback D", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", "Inter Fallback", "Inter Fallback R", "Inter Fallback D", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fs-xs: .78rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); --fs-xl: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem); --fs-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); --fs-hero: clamp(2.35rem, 1.6rem + 3.6vw, 4.4rem); /* Space & shape */ --gutter: 16px; --section: clamp(56px, 8vw, 112px); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2); --shadow: 0 14px 34px -14px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.3); --shadow-lg: 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(96,185,237,.22); --ease: cubic-bezier(.2, .7, .2, 1); --header-h: 68px; } @media (min-width: 768px) { :root { --gutter: 28px; --header-h: 76px; } } @media (min-width: 1440px) { :root { --gutter: 40px; } } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; /* clip, not hidden: hidden would make a scroll container and break the sticky header */ } img, svg, video { max-width: 100%; height: auto; } img { display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; letter-spacing: -.02em; font-weight: 650; margin: 0 0 .5em; text-wrap: balance; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s var(--ease); } a:hover { color: var(--accent-soft); } :focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--teal-700); color: #fff; } .lal-container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); } .lal-visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lal-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--primary-btn); color: #fff; padding: 10px 16px; border-radius: 8px; } .lal-skip:focus { top: 12px; color: #fff; } .lal-icon { flex: none; } .lal-ruo__icon, .lal-footer__ruo-icon, .lal-compliance__icon, .lal-badge__icon, .lal-why__icon, .lal-step__n { flex: none; } /* ---------- Buttons ---------- */ .lal-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { --btn-bg: var(--teal-700); --btn-fg: #fff; --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75em 1.4em; font-family: var(--font-display); font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd); border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); -webkit-tap-highlight-color: transparent; } .lal-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { color: var(--btn-fg); background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(26, 106, 219, .55); } .lal-btn:active { transform: translateY(0); } .lal-btn .lal-icon { transition: transform .25s var(--ease); } .lal-btn:hover .lal-icon { transform: translateX(3px); } .lal-btn--accent, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order, .woocommerce .single_add_to_cart_button, .woocommerce a.checkout-button { --btn-bg: var(--primary-btn); background: var(--cta-gradient); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -10px rgba(31, 124, 236, .7); } .lal-btn--accent:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #place_order:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce a.checkout-button:hover { background: linear-gradient(120deg, var(--primary-hover) 0%, #0F3A99 55%, var(--primary-deep) 100%); color: #fff; box-shadow: 0 14px 28px -12px rgba(31, 124, 236, .8); } .lal-btn--primary { --btn-bg: var(--teal-700); } .lal-btn--outline { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); } .lal-btn--outline:hover { background: var(--surface-3); border-color: var(--accent); color: var(--text); } .lal-btn--ghost { --btn-bg: transparent; --btn-fg: var(--muted); --btn-bd: var(--line); } .lal-btn--ghost:hover { background: var(--surface-2); color: var(--ink); box-shadow: none; } .lal-btn--glass { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.22); backdrop-filter: blur(6px); } .lal-btn--glass:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); box-shadow: none; } .lal-btn--sm { min-height: 40px; padding: .5em 1em; font-size: .85rem; } .lal-btn--lg { min-height: 54px; padding: .85em 1.7em; font-size: 1rem; } .lal-btn--block { width: 100%; } .woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce .single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .lal-link-arrow { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--accent); text-decoration: none; } .lal-link-arrow .lal-icon { transition: transform .25s var(--ease); } .lal-link-arrow:hover .lal-icon { transform: translateX(4px); } .lal-iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; color: var(--ink); background: transparent; cursor: pointer; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); } .lal-iconbtn:hover { background: var(--teal-50); color: var(--accent); } /* ---------- Eyebrows & headings ---------- */ .lal-eyebrow { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 .9rem; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600); } .lal-eyebrow--light { color: var(--orange-300); } .lal-eyebrow--center { justify-content: center; width: 100%; } .lal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 4px rgba(31,124,236,.2); animation: lal-pulse 2.4s var(--ease) infinite; } @keyframes lal-pulse { 50% { box-shadow: 0 0 0 8px rgba(31,124,236,0); } } .lal-heading { max-width: 640px; } .lal-heading--center { margin-inline: auto; text-align: center; max-width: 820px; } .lal-heading__title { font-size: var(--fs-2xl); margin-bottom: .35em; } .lal-heading__lede { color: var(--muted); font-size: var(--fs-md); margin: 0; } .lal-section { padding-block: var(--section); } .lal-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); } /* ---------- Top bar & header ---------- */ .lal-topbar { background: var(--night); color: rgba(255,255,255,.78); font-size: var(--fs-xs); letter-spacing: .02em; } .lal-topbar__inner { display: flex; justify-content: center; gap: 24px; padding-block: 8px; } .lal-topbar__msg { display: flex; align-items: center; gap: 8px; margin: 0; } .lal-topbar__msg .lal-icon { color: var(--teal-300); } .lal-topbar__msg--accent { display: none; } .lal-topbar__msg--accent .lal-icon { color: var(--orange-300); } @media (min-width: 768px) { .lal-topbar__inner { justify-content: space-between; } .lal-topbar__msg--accent { display: flex; } } .lal-header { position: sticky; top: 0; z-index: 100; background: rgba(1, 18, 33, .84); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); } .lal-header.is-scrolled { border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); background: rgba(1, 18, 33, .94); } .admin-bar .lal-header { top: 46px; } @media (min-width: 783px) { .admin-bar .lal-header { top: 32px; } } .lal-header__inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); } .lal-header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; } .lal-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .lal-brand__mark { width: auto; height: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); transition: transform .4s var(--ease); } .lal-brand:hover .lal-brand__mark { transform: rotate(-4deg) scale(1.04); } .lal-brand__word { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: .02em; } .lal-brand__top { color: var(--teal-700); font-size: 1.02rem; } .lal-brand__bottom { color: var(--orange-500); font-size: 1.02rem; } .lal-brand--light .lal-brand__top { color: var(--teal-300); } .lal-brand--light .lal-brand__bottom { color: var(--orange-300); } @media (min-width: 768px) { .lal-brand__mark { height: 52px; } .lal-brand__top, .lal-brand__bottom { font-size: 1.15rem; } } .lal-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: var(--orange-500); border-radius: 999px; border: 2px solid var(--paper); transition: transform .3s var(--ease); } .lal-cart-count.is-empty { transform: scale(0); } /* Nav: off-canvas on mobile, inline on desktop */ .lal-nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--paper); border-top: 1px solid var(--line); padding: 16px var(--gutter) 40px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s; overflow-y: auto; } .lal-nav-open .lal-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } html.lal-nav-open { overflow: hidden; } /* lock the viewport, not : body overflow would make it a scroll container and jump the page */ .lal-nav__list, .lal-nav ul { list-style: none; margin: 0; padding: 0; } .lal-nav li { border-bottom: 1px solid var(--line); } .lal-nav a { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); text-decoration: none; } .lal-nav .current-menu-item > a, .lal-nav a:hover { color: var(--accent); } .lal-burger__close { display: none; } .lal-nav-open .lal-burger__open { display: none; } .lal-nav-open .lal-burger__close { display: inline; } @media (min-width: 1024px) { .lal-burger { display: none; } .lal-nav { position: static; height: auto; padding: 0; background: none; border: 0; opacity: 1; visibility: visible; transform: none; overflow: visible; margin-left: 28px; } .lal-nav__list, .lal-nav ul { display: flex; gap: 4px; } .lal-nav li { border: 0; } .lal-nav a { position: relative; padding: 10px 14px; font-size: .95rem; font-weight: 550; letter-spacing: -.005em; color: var(--ink-2); } .lal-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--orange-500); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .lal-nav a:hover::after, .lal-nav .current-menu-item > a::after { transform: scaleX(1); } } /* ---------- Hero ---------- */ .lal-hero { position: relative; isolation: isolate; overflow: hidden; color: rgba(255,255,255,.8); background: radial-gradient(1200px 600px at 85% 20%, rgba(96,185,237,.22), transparent 60%), radial-gradient(700px 500px at 70% 90%, rgba(31,124,236,.16), transparent 60%), linear-gradient(180deg, var(--teal-950) 0%, var(--night) 100%); } .lal-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); } .lal-hero__inner { display: grid; gap: 40px; align-items: center; padding-block: clamp(48px, 7vw, 104px) clamp(56px, 7vw, 112px); } .lal-hero__title { color: #fff; font-size: var(--fs-hero); font-weight: 650; letter-spacing: -.035em; line-height: 1.04; margin-bottom: .45em; } .lal-hero__title em { font-style: normal; background: linear-gradient(92deg, var(--teal-300) 0%, #fff 45%, var(--orange-300) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lal-hero__lede { font-size: var(--fs-md); max-width: 540px; color: rgba(255,255,255,.72); margin-bottom: 28px; } .lal-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .lal-hero__cta .lal-btn { flex: 1 1 100%; } @media (min-width: 480px) { .lal-hero__cta .lal-btn { flex: 0 0 auto; } } .lal-hero__points { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--fs-sm); color: rgba(255,255,255,.75); } .lal-hero__points li { display: flex; align-items: center; gap: 8px; } .lal-hero__points .lal-icon { color: var(--teal-300); } .lal-hero__visual { position: relative; height: 340px; max-width: 520px; width: 100%; margin-inline: auto; } .lal-hero__ring { position: absolute; left: 50%; top: 52%; width: 84%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(96,185,237,.35) 0%, rgba(96,185,237,.08) 45%, transparent 70%); border: 1px solid rgba(143,208,245,.18); box-shadow: 0 0 0 28px rgba(143,208,245,.04), 0 0 0 64px rgba(143,208,245,.025); } .lal-hero__vial { position: absolute; bottom: 0; width: auto; filter: drop-shadow(0 30px 30px rgba(0,0,0,.55)); } .lal-hero__vial--center { left: 50%; height: 96%; transform: translateX(-50%); z-index: 2; animation: lal-float 7s ease-in-out infinite; } .lal-hero__vial--left { left: 4%; height: 74%; z-index: 1; transform: rotate(-8deg); opacity: .92; animation: lal-float 8s ease-in-out -2s infinite; } .lal-hero__vial--right { right: 4%; height: 74%; z-index: 1; transform: rotate(8deg); opacity: .92; animation: lal-float 9s ease-in-out -4s infinite; } @keyframes lal-float { 50% { translate: 0 -10px; } } .lal-hero__chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-xs); color: #fff; background: rgba(1, 18, 33, .55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); } .lal-hero__chip strong { font-family: var(--font-display); } .lal-hero__chip .lal-icon { color: var(--orange-300); } .lal-hero__chip--a { top: 8%; left: 0; } .lal-hero__chip--b { bottom: 12%; right: 0; } @media (min-width: 768px) { .lal-hero__visual { height: 440px; } } @media (min-width: 1024px) { .lal-hero__inner { grid-template-columns: 1.08fr .92fr; gap: 56px; } .lal-hero__visual { height: 540px; max-width: none; } } /* ---------- Trust badges ---------- */ .lal-trust { position: relative; z-index: 2; margin-top: -34px; } .lal-badges { list-style: none; margin: 0; padding: 0; } .lal-badges--strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .lal-badges--strip .lal-badge { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); } .lal-badge__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--accent); background: var(--teal-50); border: 1px solid var(--teal-100); transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease); } .lal-badge:hover .lal-badge__icon { transform: translateY(-2px) rotate(-4deg); background: var(--teal-700); color: #fff; } .lal-badge__body { display: flex; flex-direction: column; min-width: 0; } .lal-badge__title { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); line-height: 1.3; } .lal-badge__text { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; } /* Phones: 2-up tiles with icon above title; the last badge spans both columns */ .lal-badges--strip .lal-badge { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .lal-badges--strip .lal-badge:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; } .lal-badges--strip .lal-badge__text { display: none; } .lal-badges--strip .lal-badge__icon { width: 38px; height: 38px; border-radius: 10px; } @media (min-width: 560px) { .lal-badges--strip .lal-badge { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; } .lal-badges--strip .lal-badge__text { display: block; } .lal-badges--strip .lal-badge__icon { width: 44px; height: 44px; border-radius: 12px; } } @media (min-width: 1024px) { .lal-badges--strip { grid-template-columns: repeat(5, 1fr); } .lal-badges--strip .lal-badge, .lal-badges--strip .lal-badge:last-child { grid-column: auto; flex-direction: column; align-items: flex-start; padding: 22px 20px; } } @media (min-width: 1280px) { .lal-badges--strip .lal-badge, .lal-badges--strip .lal-badge:last-child { flex-direction: row; align-items: center; } } .lal-badges--compact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .lal-badges--compact .lal-badge { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); } .lal-badges--compact .lal-badge__icon { width: 34px; height: 34px; border-radius: 9px; } .lal-badges--compact .lal-badge__icon .lal-icon { width: 18px; height: 18px; } .lal-badges--compact .lal-badge__title { font-size: .8rem; } .lal-badges--compact .lal-badge__text { display: none; } .lal-badges--compact .lal-badge:last-child { grid-column: 1 / -1; } .lal-badges--footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; } .lal-badges--footer .lal-badge { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); } .lal-badges--footer .lal-badge__icon { width: 34px; height: 34px; border-radius: 50%; color: var(--teal-300); background: rgba(143,208,245,.08); border-color: rgba(143,208,245,.15); } .lal-badges--footer .lal-badge__title { color: #fff; font-size: .82rem; font-weight: 550; } /* ---------- Product grid & cards ---------- */ .woocommerce ul.products, ul.products.lal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; } @media (min-width: 768px) { .woocommerce ul.products, ul.products.lal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 1100px) { .woocommerce ul.products, ul.products.lal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } .woocommerce ul.products li.product.lal-pcard, .lal-pcard { position: relative; display: flex; flex-direction: column; width: auto; margin: 0; padding: 0; float: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .lal-pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .lal-pcard__media { position: relative; display: block; aspect-ratio: 5 / 6; overflow: hidden; background: radial-gradient(70% 55% at 50% 58%, rgba(96,185,237,.16) 0%, transparent 70%), linear-gradient(180deg, #0E2233 0%, #09192A 100%); } .lal-pcard__media::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 8%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); transition: transform .5s var(--ease), opacity .5s var(--ease); } .woocommerce ul.products li.product .lal-pcard__img, .lal-pcard__img { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0 !important; object-fit: contain; object-position: center bottom; padding: 10% 14% 8%; transition: transform .6s var(--ease); } .lal-pcard:hover .lal-pcard__img { transform: translateY(-6px) scale(1.035); } .lal-pcard:hover .lal-pcard__media::after { transform: scaleX(.85); opacity: .7; } .lal-pcard__tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; border-radius: 6px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text); background: rgba(1, 18, 33, .82); border: 1px solid var(--teal-100); } .lal-pcard__body { display: flex; flex-direction: column; flex: 1; padding: 12px 12px 14px; } .lal-pcard__cat { margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-600); } .woocommerce ul.products li.product .lal-pcard__title, .lal-pcard__title { margin: 0 0 8px; padding: 0; font-size: .98rem; font-weight: 620; line-height: 1.25; letter-spacing: -.01em; } .lal-pcard__title a { color: var(--ink); text-decoration: none; } .lal-pcard__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; } .lal-pcard__title a:hover { color: var(--accent); } .lal-pcard__sub { margin: -4px 0 8px; font-size: .84rem; color: var(--muted); line-height: 1.3; } .lal-pcard__chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .lal-pcard__chips li { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--accent-soft); background: var(--teal-50); border: 1px solid var(--teal-100); } .lal-pcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; } .lal-pcard__price, .woocommerce ul.products li.product .price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; color: var(--ink); margin: 0; } .lal-pcard__price .amount { color: var(--ink); } .lal-from { font-family: var(--font-body); font-size: .75rem; font-weight: 600; color: var(--muted); } .lal-pcard__foot .lal-btn { position: relative; z-index: 2; width: 100%; } .lal-pcard__foot .added_to_cart { position: relative; z-index: 2; font-size: var(--fs-xs); font-weight: 600; width: 100%; text-align: center; } .lal-pcard .add_to_cart_button.loading { opacity: .7; } .lal-pcard .add_to_cart_button.added .lal-icon { display: none; } @media (min-width: 768px) { .lal-pcard__body { padding: 16px 18px 18px; } .lal-pcard__title, .woocommerce ul.products li.product .lal-pcard__title { font-size: 1.08rem; } .lal-pcard__foot .lal-btn { width: auto; } } /* ---------- Why us ---------- */ .lal-why { background: var(--surface-1); border-block: 1px solid var(--line); } .lal-why .lal-heading { margin-bottom: clamp(32px, 5vw, 56px); } .lal-why__grid { display: grid; gap: 14px; } @media (min-width: 900px) { .lal-why__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (min-width: 1200px) { .lal-why__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .lal-card { position: relative; padding: 26px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease); } .lal-card:hover { transform: translateY(-3px); background: var(--surface-2); border-color: var(--border-strong); box-shadow: var(--shadow); } .lal-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .lal-why__item { display: flex; flex-direction: column; align-items: center; text-align: center; } .lal-why__icon { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px; color: #60B9ED; background: linear-gradient(150deg, rgba(96, 185, 237, .10), rgba(57, 147, 255, .02) 70%); /* transparent tint */ } .lal-why__icon::before { /* gradient outline only; the inside stays see-through */ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(150deg, rgba(184, 232, 255, .85), rgba(57, 147, 255, .1) 50%, rgba(96, 185, 237, .6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .lal-why__icon .lal-icon { width: 42px; height: 42px; stroke: url(#lal-why-grad); stroke-width: 1.6; filter: drop-shadow(0 0 10px rgba(96, 185, 237, .35)); } .lal-why__item:hover .lal-why__icon { box-shadow: 0 0 28px -6px rgba(96, 185, 237, .55); } .lal-why__item h3 { font-size: 1.12rem; margin-bottom: .45em; } .lal-why__item p { max-width: 40ch; margin: 0 auto; color: var(--muted); font-size: .95rem; } @media (min-width: 1200px) { .lal-why__item p { max-width: 34ch; } } /* ---------- About / stats / steps (dark band) ---------- */ .lal-about { position: relative; overflow: hidden; isolation: isolate; color: rgba(255,255,255,.75); background: linear-gradient(160deg, var(--teal-900) 0%, var(--night) 70%); } .lal-about__glow { position: absolute; z-index: -1; width: 700px; height: 700px; right: -200px; top: -250px; background: radial-gradient(circle, rgba(31,124,236,.18), transparent 65%); } .lal-about__grid { display: grid; gap: 40px; align-items: center; } .lal-about__title { color: #fff; font-size: var(--fs-2xl); } .lal-about__copy p { font-size: var(--fs-md); max-width: 560px; margin-bottom: 28px; } .lal-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; } .lal-stat { padding: 22px 20px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column-reverse; gap: 6px; } .lal-stat dt { font-size: var(--fs-sm); color: rgba(255,255,255,.6); } .lal-stat dd { margin: 0; font-family: var(--font-display); font-weight: 650; letter-spacing: -.04em; line-height: 1; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); background: linear-gradient(180deg, #fff 30%, var(--teal-300)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lal-stat:nth-child(2) dd, .lal-stat:nth-child(4) dd { background-image: linear-gradient(180deg, #fff 30%, var(--orange-300)); } @media (min-width: 1024px) { .lal-about__grid { grid-template-columns: 1fr 1fr; gap: 72px; } .lal-stats { gap: 16px; } .lal-stat { padding: 30px 26px; } } .lal-steps { list-style: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: clamp(32px, 5vw, 56px) 0 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 28px; counter-reset: step; } .lal-step { position: relative; } .lal-step__n { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; font-family: var(--font-display); font-weight: 650; font-size: .85rem; color: var(--orange-300); border: 1px solid rgba(143,208,245,.35); background: rgba(31,124,236,.08); } .lal-step h3 { color: #fff; font-size: 1.05rem; margin-bottom: .35em; } .lal-step p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.62); } @media (min-width: 640px) { .lal-steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .lal-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } .lal-step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 60px; right: -16px; height: 1px; background: linear-gradient(90deg, rgba(143,208,245,.4), transparent); } } /* ---------- Compliance ---------- */ .lal-compliance__card { display: grid; gap: 20px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--teal-500), var(--orange-500)) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow); } .lal-compliance__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; color: var(--accent); background: var(--teal-50); } .lal-compliance__body h2 { font-size: var(--fs-xl); } .lal-compliance__body p:last-child { margin: 0; color: var(--muted); font-size: .95rem; } @media (min-width: 1024px) { .lal-compliance__card { grid-template-columns: auto 1fr auto; gap: 36px; } } /* ---------- RUO notice (product pages etc.) ---------- */ .lal-ruo { display: flex; gap: 12px; margin: 22px 0 0; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--orange-100); border: 1px solid rgba(96, 185, 237, .22); border-left: 4px solid var(--orange-500); } .lal-ruo__icon { color: var(--orange-700); padding-top: 2px; } .lal-ruo__title { display: block; font-family: var(--font-display); font-size: .9rem; color: var(--ink); margin-bottom: 4px; } .lal-ruo p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--ink-2); } .lal-ruo a { color: var(--orange-700); font-weight: 600; } /* ---------- Page heads & content ---------- */ .lal-pagehead { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(44px, 7vw, 92px) clamp(40px, 6vw, 80px); color: rgba(255,255,255,.74); background: radial-gradient(800px 400px at 90% 0%, rgba(96,185,237,.25), transparent 60%), radial-gradient(600px 300px at 10% 120%, rgba(31,124,236,.14), transparent 60%), linear-gradient(180deg, var(--teal-950), var(--night)); } .lal-pagehead::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); } .lal-pagehead__title { color: #fff; font-size: var(--fs-2xl); margin: 0; max-width: 820px; } .lal-pagehead__lede { margin: 14px 0 0; max-width: 640px; font-size: var(--fs-md); } .lal-pagehead--content .lal-pagehead__inner { max-width: 780px; margin-inline: auto; } .lal-pagehead--compact { padding-block: clamp(32px, 5vw, 56px); } .lal-pagehead--compact .lal-pagehead__title { font-size: var(--fs-xl); } .lal-pagehead--404 { padding-block: clamp(80px, 14vw, 180px); } .lal-pagehead--404 .lal-hero__cta { margin-top: 28px; } .lal-page { padding-block: clamp(40px, 6vw, 80px); } .lal-prose { max-width: 780px; } .lal-page--content .lal-prose { margin-inline: auto; } .lal-prose h2 { font-size: var(--fs-xl); margin-top: 1.8em; } .lal-prose h3 { font-size: var(--fs-lg); margin-top: 1.6em; } .lal-prose > :first-child { margin-top: 0; } .lal-prose ul, .lal-prose ol { padding-left: 1.2em; } .lal-prose li { margin-bottom: .4em; } .lal-prose li::marker { color: var(--teal-600); } .lal-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; } .lal-prose .lal-lead { font-size: var(--fs-md); color: var(--ink); } .lal-prose .lal-callout { padding: 20px 22px; border-radius: var(--radius); background: var(--teal-50); border: 1px solid var(--teal-100); margin: 1.6em 0; } .lal-prose .lal-callout--warn { background: var(--orange-100); border-color: rgba(96,185,237,.22); } .lal-prose .lal-callout > :last-child { margin-bottom: 0; } .lal-prose .lal-updated { font-size: var(--fs-sm); color: var(--muted); } .lal-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1.4em 0; } .lal-prose th, .lal-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); } .lal-prose th { font-family: var(--font-display); font-weight: 600; color: var(--ink); background: var(--teal-50); } .lal-feature-grid { display: grid; gap: 14px; margin: 1.6em 0; } @media (min-width: 640px) { .lal-feature-grid { grid-template-columns: repeat(2, 1fr); } } .lal-feature-grid .lal-card h3 { margin-top: 0; font-size: 1.05rem; } .lal-feature-grid .lal-card p { margin: 0; color: var(--muted); font-size: .95rem; } /* FAQ accordion (native details/summary) */ .lal-faq { margin: 1.2em 0 2em; border-top: 1px solid var(--line); } .lal-faq details { border-bottom: 1px solid var(--line); } .lal-faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; color: var(--ink); transition: color .2s var(--ease); } .lal-faq summary::-webkit-details-marker { display: none; } .lal-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--teal-50) no-repeat center / 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%2360B9ED' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform .3s var(--ease), background-color .3s var(--ease); } .lal-faq summary:hover { color: var(--accent); } .lal-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--orange-100); } .lal-faq details > div { padding: 0 0 20px; color: var(--muted); } .lal-faq details > div > :last-child { margin-bottom: 0; } /* ---------- Forms & alerts ---------- */ .lal-form { display: grid; gap: 16px; padding: clamp(20px, 4vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .lal-form__row { display: grid; gap: 16px; } @media (min-width: 640px) { .lal-form__row { grid-template-columns: 1fr 1fr; } } .lal-form__hp { position: absolute; left: -9999px; } .lal-field label, .woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); } .lal-field__hint { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); } .lal-form .lal-btn { justify-self: start; } .lal-field input, .lal-field select, .lal-field textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .quantity .qty, .woocommerce #coupon_code, .select2-container--default .select2-selection--single { width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); appearance: none; } .lal-field select, .woocommerce form .form-row select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%239FB3C8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; } .lal-field textarea, .woocommerce form .form-row textarea { min-height: 140px; resize: vertical; } .lal-field input:focus, .lal-field select:focus, .lal-field textarea:focus, .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .woocommerce .quantity .qty:focus, .woocommerce #coupon_code:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 4px rgba(96,185,237,.15); } .select2-container--default .select2-selection--single { display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--ink); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; } .select2-dropdown { border-color: var(--line-strong); border-radius: 12px; overflow: hidden; } .lal-alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: 12px; font-size: .95rem; } .lal-alert--success { background: var(--green-100); color: var(--green-700); } .lal-alert--error { background: var(--red-100); color: var(--red-600); } /* Woo notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { margin: 0 0 24px !important; padding: 14px 18px 14px 50px !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--teal-600) !important; border-radius: 12px; background: var(--surface) !important; color: var(--ink-2) !important; font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .woocommerce-message::before, .woocommerce-info::before { color: var(--teal-600) !important; top: 50% !important; transform: translateY(-50%); left: 18px !important; } .woocommerce-error { border-left-color: var(--red-600) !important; flex-direction: column; align-items: flex-start; } .woocommerce-error::before { color: var(--red-600) !important; top: 16px !important; left: 18px !important; } .woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after { display: none; } .woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; min-height: 38px !important; padding: .45em 1em !important; font-size: .82rem !important; } /* ---------- Shop layout ---------- */ .lal-shop__body { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 8vw, 96px); } .lal-shop__crumbs { padding-top: 20px; } .woocommerce-breadcrumb { margin: 0 !important; font-size: var(--fs-sm) !important; color: var(--muted) !important; } .woocommerce-breadcrumb a { color: var(--muted) !important; text-decoration: none; } .woocommerce-breadcrumb a:hover { color: var(--accent) !important; } .lal-crumb-sep { margin: 0 8px; opacity: .5; } .lal-pills { display: flex; gap: 8px; margin-top: 26px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .lal-pills::-webkit-scrollbar { display: none; } .lal-pill { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .lal-pill span { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.12); } .lal-pill:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); } .lal-pill.is-active { color: var(--surface-1); background: var(--accent); border-color: var(--accent); } .lal-pill.is-active span { background: rgba(1, 18, 33, .18); color: var(--surface-1); } .woocommerce-result-count { margin: 0 0 20px !important; float: none !important; font-size: var(--fs-sm); color: var(--muted); } .woocommerce-ordering { margin: 0 0 20px !important; float: none !important; } .lal-shop__body > .woocommerce-notices-wrapper + .woocommerce-result-count, .lal-shop__body .woocommerce-result-count { display: inline-block; } .woocommerce-ordering select { min-height: 42px; padding: 8px 38px 8px 14px; border: 1.5px solid var(--line-strong); border-radius: 999px; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%239FB3C8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 11px; appearance: none; } @media (min-width: 768px) { .lal-shop__body { display: block; } .woocommerce-ordering { float: right !important; } .woocommerce-result-count { float: left !important; line-height: 42px; } .woocommerce ul.products { clear: both; } } .woocommerce nav.woocommerce-pagination ul { border: 0 !important; display: flex; justify-content: center; gap: 6px; margin-top: 40px !important; } .woocommerce nav.woocommerce-pagination ul li { border: 0 !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 42px; height: 42px; display: grid !important; place-items: center; border-radius: 12px; border: 1px solid var(--line) !important; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--teal-700) !important; color: #fff !important; } /* ---------- Single product ---------- */ .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 20px clamp(48px, 7vw, 88px); } .woocommerce div.product > * { min-width: 0; max-width: 100%; } .woocommerce div.product .woocommerce-product-gallery, .woocommerce div.product .summary { width: auto !important; float: none !important; margin: 0 !important; } .woocommerce div.product .woocommerce-product-gallery { position: relative; } @media (min-width: 900px) { .woocommerce div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px 64px; align-items: start; } .woocommerce div.product .woocommerce-product-gallery { position: sticky; top: calc(var(--header-h) + 24px); } .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; } } .woocommerce div.product .woocommerce-product-gallery { overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(60% 50% at 50% 55%, rgba(96,185,237,.18) 0%, transparent 70%), radial-gradient(40% 30% at 70% 20%, rgba(31,124,236,.1) 0%, transparent 70%), linear-gradient(180deg, #0E2233 0%, #09192A 100%); border: 1px solid var(--line); } .woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 6% 12%; } .woocommerce div.product .woocommerce-product-gallery__trigger { position: absolute; top: 14px; right: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(1, 18, 33, .8); color: var(--text); display: grid; place-items: center; font-size: 0; } .woocommerce div.product .flex-control-thumbs { display: flex; gap: 8px; padding: 0 14px 14px !important; margin: 0 !important; } .woocommerce div.product .flex-control-thumbs li { width: 64px !important; float: none !important; } .woocommerce div.product .flex-control-thumbs img { border-radius: 10px; background: var(--surface-2); opacity: .6; transition: opacity .2s; } .woocommerce div.product .flex-control-thumbs img.flex-active, .woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; } .woocommerce div.product .summary .product_title { font-size: var(--fs-2xl); margin-bottom: .25em; } .woocommerce div.product .summary .lal-product-sub { margin: -.1em 0 .9em; font-size: var(--fs-md); color: var(--muted); } .lal-summary-cat { margin: 0 0 10px; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); font-weight: 650; color: var(--ink) !important; letter-spacing: -.02em; margin: 0 0 18px; } .woocommerce div.product p.price .lal-from { font-size: .9rem; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); font-size: 1rem; margin-bottom: 22px; } .woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 24px !important; } .woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { display: none; } .woocommerce div.product form.cart .quantity { margin: 0 !important; float: none !important; } .woocommerce .quantity .qty { width: 84px; text-align: center; min-height: 54px; } .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-height: 54px; float: none !important; font-size: 1rem; } .woocommerce div.product form.variations_form { display: block; } .woocommerce div.product form.cart .variations { width: 100%; margin: 0 0 16px; border: 0; } .woocommerce div.product form.cart .variations tr { display: block; } .woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: left; border: 0; } .woocommerce div.product form.cart .variations label { font-family: var(--font-display); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: block; } .woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); } .woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; gap: 10px; } .woocommerce div.product .single_variation_wrap .woocommerce-variation-price { margin-bottom: 12px; } .woocommerce div.product .single_variation .price { font-size: 1.4rem !important; } .lal-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .lal-swatch { min-width: 76px; min-height: 46px; padding: 8px 16px; font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .lal-swatch:hover { border-color: var(--teal-600); transform: translateY(-1px); } .lal-swatch.is-active { color: #fff; background: var(--teal-700); border-color: var(--teal-700); box-shadow: 0 8px 18px -10px rgba(26,106,219,.8); } .lal-swatch:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; transform: none; } .woocommerce div.product .product_meta { margin-top: 20px; font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 20px; } .woocommerce div.product .product_meta > span { display: block; } .woocommerce div.product .product_meta a { color: var(--accent); } .woocommerce div.product .stock { font-weight: 600; font-size: var(--fs-sm); } .woocommerce div.product .stock.in-stock { color: var(--green-700); } .lal-summary-trust { margin-bottom: 4px; } /* Tabs */ .woocommerce div.product .woocommerce-tabs { padding-top: 12px; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 4px; margin: 0 0 24px !important; padding: 4px !important; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; width: max-content; max-width: 100%; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li { flex: none; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 10px !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 10px 16px !important; font-family: var(--font-display); font-size: .9rem; font-weight: 600 !important; color: var(--muted) !important; white-space: nowrap; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--teal-700) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; } .woocommerce div.product .woocommerce-tabs .panel { margin: 0 !important; padding: clamp(20px, 4vw, 36px); max-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { font-size: var(--fs-lg); } .woocommerce table.shop_attributes { border: 0 !important; margin: 0; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: none !important; font-style: normal !important; } .woocommerce table.shop_attributes th { width: 180px; font-family: var(--font-display); font-weight: 600; color: var(--ink); } .woocommerce table.shop_attributes td p { margin: 0; padding: 0 !important; } .woocommerce div.product .related > h2, .woocommerce div.product .upsells > h2 { font-size: var(--fs-xl); margin: 24px 0 24px; } /* ---------- Cart / checkout / account ---------- */ .lal-store { padding-bottom: 24px; } .woocommerce table.shop_table { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; border-collapse: separate !important; background: var(--surface); overflow: hidden; margin-bottom: 24px !important; } .woocommerce table.shop_table th { font-family: var(--font-display); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 16px !important; background: var(--paper); } .woocommerce table.shop_table td { padding: 16px !important; border-top: 1px solid var(--line) !important; } .woocommerce table.cart img { width: 72px !important; border-radius: 12px; background: var(--teal-50); padding: 4px; } .woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; flex-wrap: wrap; } .woocommerce table.cart td.actions .coupon #coupon_code { width: 200px; min-height: 48px; } .woocommerce a.remove { color: var(--red-600) !important; border-radius: 50%; width: 28px; height: 28px; line-height: 26px; font-size: 1.3em; } .woocommerce a.remove:hover { background: var(--red-600) !important; color: #fff !important; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cart_totals { float: none !important; width: 100% !important; max-width: 480px; margin-left: auto; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); } .woocommerce .cart_totals h2 { font-size: var(--fs-lg); } .woocommerce .cart_totals table.shop_table { border: 0 !important; } .woocommerce .cart_totals table.shop_table th { background: none; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); } .woocommerce ul#shipping_method li { margin-bottom: 6px; } .woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 56px !important; font-size: 1.05rem !important; } .lal-cart-trust { max-width: 480px; margin: 16px 0 0 auto; } .woocommerce-checkout .woocommerce { display: block; } @media (min-width: 1024px) { .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 0 48px; align-items: start; } .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; } .woocommerce-checkout #order_review { position: sticky; top: calc(var(--header-h) + 24px); } } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; } .woocommerce-checkout h3, #order_review_heading { font-size: var(--fs-lg); margin: 8px 0 18px; } .woocommerce form .form-row { padding: 0 !important; margin: 0 0 16px !important; } @media (min-width: 640px) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 8px) !important; } } .woocommerce form .form-row .required { color: var(--orange-600); text-decoration: none; } .woocommerce-checkout #order_review { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .woocommerce-checkout #order_review table.shop_table { border: 0 !important; } .woocommerce-checkout #payment { background: var(--paper) !important; border-radius: var(--radius) !important; } .woocommerce-checkout #payment ul.payment_methods { padding: 16px !important; border-bottom: 1px solid var(--line) !important; } .woocommerce-checkout #payment ul.payment_methods li { padding: 10px 0; } .woocommerce-checkout #payment ul.payment_methods li label { font-family: var(--font-display); font-weight: 600; color: var(--ink); } .woocommerce-checkout #payment div.payment_box { background: var(--surface) !important; border-radius: 12px !important; font-size: .9rem; color: var(--ink-2) !important; } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--surface) !important; } .woocommerce-checkout #payment div.form-row { padding: 16px !important; } .woocommerce-checkout #place_order { width: 100%; min-height: 56px !important; font-size: 1.05rem !important; float: none !important; } .woocommerce-terms-and-conditions-wrapper { font-size: .85rem; } .lal-ack { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--orange-100); border: 1px solid rgba(96,185,237,.22); } .lal-ack .form-row { margin: 0 !important; } .lal-ack label.checkbox { display: flex !important; gap: 10px; align-items: flex-start; font-size: .85rem !important; font-weight: 500 !important; line-height: 1.5; margin: 0 !important; } .lal-ack input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--teal-700); } .lal-ack .optional, .lal-ack abbr.required { display: none; } #ship-to-different-address { font-size: 1rem; margin: 8px 0 16px; } #ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .woocommerce form .form-row input[type="checkbox"] { accent-color: var(--teal-700); width: 18px; height: 18px; } .lal-checkout-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: var(--fs-xs); color: var(--muted); } .woocommerce-account .woocommerce { display: grid; gap: 28px; } @media (min-width: 900px) { .woocommerce-account .woocommerce { grid-template-columns: 240px 1fr; gap: 48px; } } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: auto !important; float: none !important; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 14px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; } .woocommerce-MyAccount-navigation li a:hover { background: var(--teal-50); color: var(--accent); } .woocommerce-MyAccount-navigation li.is-active a { background: var(--teal-700); color: #fff; } .woocommerce-account .u-columns.col2-set { display: grid; gap: 24px; } @media (min-width: 900px) { .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr 1fr; grid-column: 1 / -1; } } .woocommerce-account .u-columns .u-column1, .woocommerce-account .u-columns .u-column2 { width: auto !important; float: none !important; } .woocommerce form.login, .woocommerce form.register { margin: 0 !important; padding: clamp(20px, 4vw, 32px) !important; background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; } .woocommerce-order-received .woocommerce-order { max-width: 860px; } .woocommerce ul.order_details { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0 0 28px !important; } .woocommerce ul.order_details::before, .woocommerce ul.order_details::after { display: none; } .woocommerce ul.order_details li { margin: 0 !important; padding: 14px 18px !important; border: 1px solid var(--line) !important; border-radius: 12px; background: var(--surface); float: none !important; } /* ---------- Footer ---------- */ .lal-footer { color: #A9B6C4; background: radial-gradient(800px 300px at 50% 0%, rgba(96,185,237,.14), transparent 70%), var(--night); padding-block: clamp(40px, 6vw, 72px) 28px; font-size: .94rem; } .lal-footer__badges { padding-bottom: clamp(32px, 5vw, 48px); margin-bottom: clamp(32px, 5vw, 48px); border-bottom: 1px solid rgba(255,255,255,.08); } .lal-footer__grid { display: grid; gap: 32px; } @media (min-width: 640px) { .lal-footer__grid { grid-template-columns: repeat(2, 1fr); } .lal-footer__about { grid-column: 1 / -1; } } @media (min-width: 1024px) { .lal-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 48px; } .lal-footer__about { grid-column: auto; } } .lal-footer__about p { margin: 18px 0; max-width: 380px; } .lal-footer__email { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; } .lal-footer__email:hover { color: var(--orange-300); } .lal-footer__title { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 6px 0 16px; } .lal-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .lal-footer__list a { color: #A9B6C4; text-decoration: none; transition: color .2s var(--ease); } .lal-footer__list a:hover { color: var(--orange-300); } .lal-footer__ruo { display: flex; gap: 12px; margin-top: clamp(32px, 5vw, 48px); padding: 18px 20px; border-radius: var(--radius); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); } .lal-footer__ruo-icon { color: var(--orange-300); padding-top: 2px; } .lal-footer__ruo p { margin: 0; font-size: .82rem; line-height: 1.6; } .lal-footer__ruo strong { color: #fff; } .lal-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: .8rem; } .lal-footer__bottom p { margin: 0; } /* ---------- Age gate ---------- */ .lal-age { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 16px; background: rgba(1, 8, 16, .72); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); animation: lal-fade .35s var(--ease); } .lal-age[hidden] { display: none; } html.lal-age-pending, html.lal-age-pending body { overflow: hidden; } .lal-age__panel { width: 100%; max-width: 460px; text-align: center; padding: clamp(28px, 6vw, 44px) clamp(22px, 5vw, 40px); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid var(--border-strong); box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); animation: lal-rise .5s var(--ease); } .lal-age__mark { display: block; width: 150px; height: auto; margin: 0 auto 20px; color: var(--primary); } .lal-age__title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem); } .lal-age__desc { color: var(--muted); font-size: .95rem; } .lal-age__actions { display: grid; gap: 10px; margin: 24px 0 18px; } .lal-age__actions .lal-btn { white-space: normal; min-height: 52px; } .lal-age__fine { margin: 0; font-size: var(--fs-xs); color: var(--muted); } @keyframes lal-fade { from { opacity: 0; } } @keyframes lal-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } } /* ---------- Reveal motion ---------- */ .lal-reveal-ready [data-reveal], .lal-reveal-ready .lal-pcard, .lal-reveal-ready .lal-step, .lal-reveal-ready .lal-stat { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); } .lal-reveal-ready .is-visible { opacity: 1; transform: none; } .lal-reveal-ready .lal-pcard.is-visible:hover { transform: translateY(-4px); transition-delay: 0s; } .lal-reveal-ready .lal-card.is-visible:hover { transform: translateY(-3px); transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .lal-reveal-ready [data-reveal], .lal-reveal-ready .lal-pcard, .lal-reveal-ready .lal-step, .lal-reveal-ready .lal-stat { opacity: 1; transform: none; } } /* ========================================================================== Live Alpha Labs components (new in the fork) ========================================================================== */ /* Logo: inline SVG wordmark, colour from currentColor */ .lal-brand { color: var(--primary); } .lal-brand:hover { color: var(--accent); } .lal-brand__logo { display: block; width: auto; height: 42px; } @media (min-width: 768px) { .lal-brand__logo { height: 50px; } } .lal-brand--footer .lal-brand__logo { height: 72px; } /* Header extras */ .lal-header__cta { display: none; margin-right: 8px; } @media (min-width: 640px) { .lal-header__cta { display: inline-flex; } } .lal-nav__search { margin-top: 24px; } @media (min-width: 1024px) { .lal-nav__search { display: none; } } .lal-cart-link .lal-cart-count { border-color: var(--surface-1); } .lal-topbar__msg .amount { color: #fff; font-weight: 600; } /* Search bar (shop, categories, header drawer, homepage, 404, search results) */ .lal-search { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; max-width: 560px; padding: 5px 5px 5px 44px; background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: 999px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .lal-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(96,185,237,.2); } .lal-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .lal-search .lal-search__input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 4px; color: var(--text); background: transparent; border: 0; border-radius: 0; box-shadow: none; } .lal-search .lal-search__input:focus-visible { box-shadow: none; } .lal-search .lal-search__input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); } .lal-search__submit { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: #fff; background: var(--primary-btn); transition: background-color .2s var(--ease); } .lal-search__submit:hover { background: var(--primary-hover); } .lal-shop__search { margin-top: 22px; } .lal-pagehead--shop .lal-pills { margin-top: 18px; } .lal-featured__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .lal-featured__tools .lal-search { width: min(100%, 360px); } /* Search results / archive rows */ .lal-results { display: grid; gap: 12px; } @media (min-width: 900px) { .lal-results { grid-template-columns: 1fr 1fr; gap: 16px; } } .lal-result { display: flex; gap: 16px; align-items: center; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .2s var(--ease), transform .2s var(--ease); } .lal-result:hover { border-color: var(--border-strong); transform: translateY(-2px); } .lal-result__media { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 12px; color: var(--accent); background: var(--surface-1); overflow: hidden; } .lal-result__img { width: 100%; height: 100%; object-fit: contain; } .lal-result__type { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .lal-result__title { margin: 0 0 4px; font-size: 1.05rem; } .lal-result__title a { color: var(--text); text-decoration: none; } .lal-result__title a:hover { color: var(--accent); } .lal-result__price { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--text); } .lal-result__excerpt { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .lal-empty { max-width: 520px; padding: 32px; text-align: center; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); } .lal-pagination .nav-links { display: flex; justify-content: center; gap: 6px; margin-top: 32px; } .lal-pagination .page-numbers { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); text-decoration: none; } .lal-pagination .page-numbers.current { color: #fff; background: var(--primary-btn); border-color: var(--primary-btn); } /* Page head, pages and store pages */ .lal-pagehead__lede p { margin: 0 0 .6em; } .lal-pagehead__lede p:last-child { margin: 0; } .lal-pagehead .lal-eyebrow { margin-bottom: .6rem; } .lal-page--store .lal-store { max-width: none; } .lal-product-page { padding-bottom: 8px; } /* Homepage bits */ .lal-hero__vial { height: auto !important; width: 70%; max-width: 420px; } .lal-hero__vial--center { width: 78%; } .lal-hero__vial--left, .lal-hero__vial--right { width: 50%; } .lal-compliance__actions { display: flex; flex-wrap: wrap; gap: 10px; } .lal-featured .woocommerce { margin: 0; } /* Footer extras */ .lal-footer__social { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; } .lal-footer__social:hover { color: var(--accent-soft); } .lal-footer__ruo p + p { margin-top: .6em; } /* Age gate: hidden unless the head script found no lal_age_ok cookie */ .lal-age { display: none; z-index: 1000001; } html.lal-age-pending .lal-age { display: grid; } html.lal-age-pending #lal-discount-overlay { display: none !important; } .lal-age__title { color: var(--text); } .lal-age__denied { margin: 0 0 12px; color: var(--danger); font-weight: 600; } .lal-age__actions .lal-btn[hidden] { display: none; } /* Block content inside pages (FAQ, legal, contact were built in the block editor) */ .lal-prose .wp-block-separator, .lal-prose hr { border: 0; border-top: 1px solid var(--border); opacity: 1; } .lal-prose .wp-block-quote, .lal-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--text-2); } .lal-prose .wp-block-button__link { color: #fff; background: var(--primary-btn); border-radius: 999px; padding: .75em 1.4em; text-decoration: none; } .lal-prose .wp-block-button__link:hover { background: var(--primary-hover); } .lal-prose .has-text-color { color: inherit !important; } .lal-prose .has-background:not(.wp-block-button__link) { background-color: var(--surface-2) !important; border-radius: var(--radius); } .lal-prose strong { color: var(--text); } /* Spectra (UAG) contact form on /contact/ */ .uagb-forms-main-form .uagb-forms-input, .uagb-forms-main-form input, .uagb-forms-main-form select, .uagb-forms-main-form textarea { color: var(--text) !important; background-color: var(--surface-2) !important; border: 1.5px solid var(--border-strong) !important; border-radius: 12px !important; } .uagb-forms-main-form .uagb-forms-input-label, .uagb-forms-main-form label { color: var(--text) !important; } .uagb-forms-main-form .uagb-forms-main-submit-button { color: #fff !important; background: var(--primary-btn) !important; border: 0 !important; border-radius: 999px !important; font-family: var(--font-display); font-weight: 600; min-height: 48px; padding: .75em 1.6em !important; } .uagb-forms-main-form .uagb-forms-main-submit-button:hover { background: var(--primary-hover) !important; } .uagb-forms-success-message, .uagb-forms-failed-message { color: var(--text) !important; } /* ========================================================================== Dark surfaces for form controls and plugin UI Plugin stylesheets assume a light theme. On this site that has caused black-on-navy variation selects, an unreadable checkout payment box and white-on-white Select2 lists, so every control is styled explicitly. ========================================================================== */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], textarea, select, .woocommerce select, select[name^="attribute_"], .woocommerce .quantity input.qty, .woocommerce-cart table.cart td.actions .coupon .input-text { color: var(--text); background-color: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: 12px; font: inherit; font-size: 16px; /* no iOS zoom on focus */ accent-color: var(--accent); } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), textarea, select { min-height: 44px; padding: 10px 14px; } input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(96,185,237,.2); } select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%239FB3C8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; } select option, select optgroup { color: var(--text); background-color: var(--surface-1); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset; caret-color: var(--text); } input[type="checkbox"], input[type="radio"] { accent-color: var(--primary-btn); } fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } legend { color: var(--text); font-weight: 600; padding: 0 6px; } label { color: var(--text-2); } /* Select2 / SelectWoo (checkout country/state, SliceWP) */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: 12px; min-height: 48px; } .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--text); } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--text-muted); } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--text-muted); } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent); } .select2-dropdown { color: var(--text); background: var(--surface-1); border: 1.5px solid var(--border-strong); } .select2-container--default .select2-search--dropdown .select2-search__field { color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px; } .select2-results__option { color: var(--text); background: transparent; } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { color: var(--text); background: var(--surface-3); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { color: #fff; background: var(--primary-btn); } .select2-container--default .select2-results__option--disabled { color: var(--text-muted); } /* WooCommerce bits the forked rules didn't cover */ .woocommerce .quantity .qty { color: var(--text); background: var(--surface-2); } .woocommerce table.shop_table, .woocommerce table.shop_table td, .woocommerce table.shop_table th { color: var(--text-2); } .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table .order-total { color: var(--text); } .woocommerce table.shop_table td.product-name a { color: var(--text); text-decoration: none; } .woocommerce table.shop_table td.product-name a:hover { color: var(--accent); } .woocommerce .cart-collaterals .shipping-calculator-button { color: var(--accent); } .woocommerce-shipping-destination, .woocommerce-shipping-contents { color: var(--text-muted); font-size: var(--fs-sm); } .woocommerce-checkout #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li label, .woocommerce-checkout #payment div.payment_box, .woocommerce-checkout #payment div.payment_box p, .woocommerce-checkout #payment .wc_payment_method, .woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text p, .woocommerce-terms-and-conditions-wrapper, .woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { color: var(--text-2) !important; } .woocommerce-checkout #payment div.payment_box { border: 1px solid var(--border); } .woocommerce-checkout #payment div.payment_box a, .woocommerce-privacy-policy-text a { color: var(--accent); } .woocommerce form.checkout_coupon, .woocommerce form.woocommerce-form-login { color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 20px !important; } .woocommerce-info a, .woocommerce-message a:not(.button), .woocommerce-error a { color: var(--accent); } .woocommerce-error li { color: var(--text-2); } .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--danger); } .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--border-strong); } .woocommerce .woocommerce-form-login .show-password-input, .woocommerce-page .woocommerce-form-login .show-password-input { color: var(--text-muted); } .woocommerce ul.order_details li, .woocommerce ul.order_details li strong { color: var(--text); } .woocommerce .woocommerce-customer-details address, .woocommerce-account address { color: var(--text-2); border-color: var(--border) !important; border-radius: var(--radius); padding: 16px; background: var(--surface-2); } .woocommerce-MyAccount-content { color: var(--text-2); } .woocommerce-MyAccount-content mark, .woocommerce mark { color: var(--text); background: rgba(96,185,237,.16); padding: 0 4px; border-radius: 4px; } .woocommerce .star-rating, .woocommerce p.stars a { color: var(--accent); } .woocommerce div.product div.images .flex-control-thumbs li img { background: var(--surface-2); } .woocommerce .blockUI.blockOverlay { background: rgba(1, 18, 33, .6) !important; } .woocommerce-variation-availability p, .woocommerce-variation-description { color: var(--text-2); } .woocommerce .woocommerce-ordering select, .woocommerce-ordering select option { color: var(--text); } .wc-block-components-notice-banner { color: var(--text-2); background: var(--surface-2); border-color: var(--border-strong); } /* SliceWP affiliate portal (login, registration, dashboard) */ .slicewp-form, .slicewp-affiliate-account, .slicewp-card { color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 32px); } .slicewp-affiliate-account .slicewp-card { background: var(--surface-1); padding: 20px; } .slicewp-field-wrapper { margin-bottom: 16px; } .slicewp-field-label-wrapper label, .slicewp-field-label-wrapper { color: var(--text); font-weight: 600; font-size: var(--fs-sm); } .slicewp-field-required-marker { color: var(--accent); } .slicewp-field-description, .slicewp-lost-password a { color: var(--text-muted); font-size: var(--fs-sm); } .slicewp-form input, .slicewp-form select, .slicewp-form textarea, .slicewp-affiliate-account input, .slicewp-affiliate-account select, .slicewp-affiliate-account textarea { width: 100%; } .slicewp-show-hide-password { color: var(--text-muted); background: none; border: 0; } .slicewp-button-primary, .slicewp-affiliate-account .slicewp-button-primary, input.slicewp-button-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75em 1.6em; font-family: var(--font-display); font-weight: 600; color: #fff !important; background: var(--primary-btn) !important; border: 0 !important; border-radius: 999px !important; cursor: pointer; } .slicewp-button-primary:hover { background: var(--primary-hover) !important; } .slicewp-button-secondary { color: var(--text) !important; background: transparent !important; border: 1.5px solid var(--border-strong) !important; border-radius: 999px !important; } .slicewp-nav-tabs, .slicewp-affiliate-account-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 20px; list-style: none; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .slicewp-nav-tab a, .slicewp-nav-tabs a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: .92rem; } .slicewp-nav-tab.slicewp-active a, .slicewp-nav-tab a:hover, .slicewp-nav-tabs .slicewp-active a { color: #fff; background: var(--primary-btn); } .slicewp-list-table, .slicewp-affiliate-account table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--text-2); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .slicewp-list-table th, .slicewp-affiliate-account table th { color: var(--text-muted); background: var(--surface-3); font-family: var(--font-display); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 12px 14px; } .slicewp-list-table td, .slicewp-affiliate-account table td { padding: 12px 14px; border-top: 1px solid var(--border); } .slicewp-affiliate-account code, .slicewp-affiliate-account .slicewp-affiliate-link, .slicewp-input-copy { color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 8px; padding: 2px 8px; } .slicewp-notice, .slicewp-notice-success, .slicewp-notice-error { color: var(--text-2) !important; background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-left: 4px solid var(--accent) !important; border-radius: 12px; padding: 12px 16px; } .slicewp-notice-error { border-left-color: var(--danger) !important; } .slicewp-notice-success { border-left-color: var(--success) !important; } /* Hard overrides for the recurring dark-on-dark / light-on-light cases found by the computed-style audit */ .select2-container .select2-dropdown, .select2-container--default .select2-dropdown { color: var(--text) !important; background: var(--surface-1) !important; border-color: var(--border-strong) !important; } .select2-container--default .select2-results__option { color: var(--text) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { color: #fff !important; background: var(--primary-btn) !important; } /* WooCommerce block notices (the classic cart's "Your cart is currently empty." uses this banner) */ .wc-block-components-notice-banner { color: var(--text-2) !important; background: var(--surface-2) !important; border: 1px solid var(--border-strong) !important; border-left: 4px solid var(--accent) !important; border-radius: 12px !important; } .wc-block-components-notice-banner.is-error { border-left-color: var(--danger) !important; } .wc-block-components-notice-banner.is-success { border-left-color: var(--success) !important; } .wc-block-components-notice-banner > svg { fill: var(--surface-1) !important; background: var(--accent) !important; } .wc-block-components-notice-banner a { color: var(--accent) !important; } /* WooCommerce block components, should any render (mini-cart drawer, block buttons, totals) */ .wc-block-components-drawer, .wc-block-components-drawer__content, .wc-block-mini-cart__drawer, .wc-block-mini-cart__drawer .components-modal__content, .wp-block-woocommerce-mini-cart-contents, .wc-block-mini-cart__template-part, .wc-block-mini-cart__footer { color: var(--text-2) !important; background: var(--surface-1) !important; } .wc-block-mini-cart__title, .wp-block-woocommerce-mini-cart-title-block span { color: var(--text) !important; } .wc-block-mini-cart__title, .wc-block-components-totals-item, .wc-block-components-totals-item__label, .wc-block-components-formatted-money-amount, .wc-block-components-totals-item__description { color: var(--text-2) !important; } .wc-block-components-button:not(.is-link):not(.outlined) { color: #fff !important; background: var(--primary-btn) !important; border-color: var(--primary-btn) !important; } .wc-block-components-button.outlined { color: var(--text) !important; background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--border-strong) !important; } .wc-block-components-button.is-link, .wc-block-components-drawer__close { color: var(--text) !important; } /* Page content built in the block editor carries the old theme's colours inline (e.g.

). Neutralise them so nothing goes dark-on-dark. */ .lal-page .has-text-color, .lal-page [class*="-color"].has-text-color, .lal-page .has-link-color a { color: inherit !important; } .lal-page .has-link-color a { color: var(--accent) !important; } .lal-page .has-background:not(.wp-block-button__link):not(.wp-element-button) { color: var(--text-2) !important; background-color: var(--surface-2) !important; } /* Age Gate plugin (while it is still active): its gate renders on white under this theme */ .age-gate__wrapper .age-gate__background-color { background: rgba(1, 8, 16, .88) !important; } .age-gate__wrapper .age-gate__background { background: none !important; } .age-gate__wrapper .age-gate { color: #D5DFEA !important; background: linear-gradient(180deg, #0A284B 0%, #011221 100%) !important; border: 1px solid rgba(96, 185, 237, .32) !important; border-radius: 24px !important; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8) !important; } .age-gate__wrapper .age-gate__heading, .age-gate__wrapper .age-gate__heading-title, .age-gate__wrapper .age-gate__headline, .age-gate__wrapper .age-gate__subheadline, .age-gate__wrapper .age-gate__challenge { color: #F5F7FA !important; } .age-gate__wrapper .age-gate__heading-title--logo { background: transparent !important; } .age-gate__wrapper .age-gate__heading img { background: transparent !important; border-radius: 12px; } .age-gate__wrapper .age-gate__remember-wrapper, .age-gate__wrapper .age-gate__remember-text, .age-gate__wrapper .age-gate__additional-information, .age-gate__wrapper .age-gate__additional-information p, .age-gate__wrapper label { color: #D5DFEA !important; } .age-gate__wrapper .age-gate__submit { min-width: 110px; min-height: 48px; padding: .7em 1.6em !important; border: 0 !important; border-radius: 999px !important; font-weight: 600 !important; color: #fff !important; background: #1A6ADB !important; cursor: pointer; } .age-gate__wrapper .age-gate__submit--no { background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(96, 185, 237, .32) !important; } .age-gate__wrapper .age-gate__submit:hover { background: #1559BE !important; } .age-gate__wrapper .age-gate__submit--no:hover { background: #0A284B !important; } .age-gate__wrapper .age-gate__error, .age-gate__wrapper .age-gate__errors { color: #FF7A7A !important; } .age-gate__wrapper input[type="checkbox"] { accent-color: #1A6ADB; } /* The floating cart button duplicates the page on cart and checkout (was snippet #21) */ .woocommerce-cart .moderncart-floating-cart-button, .woocommerce-checkout .moderncart-floating-cart-button, .woocommerce-cart [class*="floating-cart"], .woocommerce-checkout [class*="floating-cart"] { display: none !important; } /* Modern Cart slide-out and floating button */ .moderncart-slide-out-cart, .moderncart-slide-out-cart-inner, .moderncart-slide-out-header, .moderncart-slide-out-footer, .moderncart-panel { color: var(--text-2) !important; background: var(--surface-1) !important; border-color: var(--border) !important; } .moderncart-slide-out-header-heading, .moderncart-cart-line-items__total-label, .moderncart-cart-line-items__total-value { color: var(--text) !important; } .moderncart-slide-out-header-close, .moderncart-slide-out-header-close svg { color: var(--text) !important; fill: currentColor; } .moderncart-floating-cart-button { background: var(--primary-btn) !important; color: #fff !important; } .moderncart-floating-cart-count { background: var(--accent) !important; color: var(--surface-1) !important; } /* "Get 10% Off" email popup (custom snippet): restyle only; behaviour unchanged */ body #lal-discount-overlay { background: rgba(1, 8, 16, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body #lal-discount-popup { color: var(--text-2); background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 40px 100px -30px rgba(0,0,0,.85); } body #lal-discount-popup h2 { color: var(--text); font-family: var(--font-display); letter-spacing: -.02em; } body #lal-discount-popup p { color: var(--text-2); } body #lal-discount-close { color: var(--text-muted); } body #lal-discount-close:hover { color: var(--text); } body #lal-discount-email { color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border-strong); border-radius: 12px; min-height: 48px; } body #lal-discount-submit { color: #fff; background: var(--cta-gradient); border-radius: 999px; min-height: 50px; font-family: var(--font-display); } body #lal-discount-no-thanks { color: var(--text-muted); } body #lal-discount-no-thanks:hover { color: var(--text); } body #lal-discount-message { color: var(--text) !important; } /* ---------- Misc ---------- */ .woocommerce .blockUI.blockOverlay { border-radius: inherit; } .woocommerce span.onsale { background: var(--primary-btn); color: #fff; border-radius: 999px; min-height: auto; min-width: auto; padding: 4px 10px; line-height: 1.4; font-size: .75rem; } /* ========================================================================== 1.1 redesign layer (owner feedback, 2026-09-24) ========================================================================== */ :root { --cta-bg: #F5F7FA; /* primary buttons: white on navy (17.6:1 with the label) */ --cta-fg: #011221; --cta-hover: #FFFFFF; /* hover: pure white + stronger glow (no light-blue fill) */ --header-h: 72px; --glass: rgba(1, 18, 33, .78); } /* ---------- Page background: soft glows + a faint molecular pattern ---------- */ body { background: radial-gradient(1100px 620px at 12% -8%, rgba(26, 106, 219, .20), transparent 62%), radial-gradient(900px 600px at 100% 18%, rgba(96, 185, 237, .10), transparent 60%), var(--bg); background-repeat: no-repeat; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%2360B9ED' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M30 1 60 18v35L30 70 0 53V18z'/%3E%3Cpath d='M90 35l30 17v35l-30 17-30-17V52z'/%3E%3C/g%3E%3Cg fill='%2360B9ED' fill-opacity='.18'%3E%3Ccircle cx='30' cy='1' r='1.6'/%3E%3Ccircle cx='60' cy='53' r='1.6'/%3E%3Ccircle cx='90' cy='35' r='1.6'/%3E%3Ccircle cx='0' cy='53' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 104px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%); } .lal-main { position: relative; } /* ---------- Buttons: white primary, outline secondary ---------- */ .lal-btn--primary, .lal-btn--accent, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order, .woocommerce .single_add_to_cart_button, .woocommerce a.checkout-button, .woocommerce ul.products li.product .button { --btn-bg: var(--cta-bg); --btn-fg: var(--cta-fg); --btn-bd: transparent; color: var(--cta-fg) !important; background: var(--cta-bg) !important; border: 0 !important; box-shadow: 0 10px 28px -14px rgba(96, 185, 237, .65), inset 0 -1px 0 rgba(1, 18, 33, .08); font-weight: 650; } @media (hover: hover) { .lal-btn--primary:hover, .lal-btn--accent:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #place_order:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce ul.products li.product .button:hover { color: var(--cta-fg) !important; background: var(--cta-hover) !important; box-shadow: 0 14px 30px -12px rgba(96, 185, 237, .8); transform: translateY(-1px); } } .lal-btn--primary:active, .woocommerce .single_add_to_cart_button:active, .woocommerce #place_order:active { transform: translateY(0) scale(.99); } .lal-btn--primary:focus-visible, .woocommerce .single_add_to_cart_button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .woocommerce .button.loading, .lal-btn.loading { opacity: .7; pointer-events: none; } .woocommerce a.added_to_cart { display: none !important; } /* the toast offers "View cart" */ .lal-btn--glass, .lal-btn--outline { color: var(--text); } /* ---------- Announcement bar: centred, brand gradient ---------- */ .lal-topbar { color: #fff; background: linear-gradient(90deg, #081068 0%, #1245B0 30%, #1A6ADB 50%, #1245B0 70%, #081068 100%); border-bottom: 1px solid rgba(143, 208, 245, .25); font-size: 12.5px; letter-spacing: .02em; } .lal-topbar__inner { justify-content: center !important; padding-block: 8px; } .lal-topbar__msg { justify-content: center; text-align: center; gap: 8px; flex-wrap: wrap; color: #fff; font-weight: 500; } .lal-topbar__msg .lal-icon { color: #fff; opacity: .9; } .lal-topbar__sep { opacity: .55; } .lal-topbar__msg .amount { color: #fff; font-weight: 700; } /* ---------- Header ---------- */ .lal-header { background: var(--glass) !important; backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--border); } .lal-header.is-scrolled { background: rgba(1, 18, 33, .95) !important; } .lal-header__inner { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; height: var(--header-h); } .lal-brand { justify-self: center; } .lal-brand__logo { height: 44px; } .lal-header__actions { margin-left: 0; gap: 2px; justify-self: end; } .lal-account-link { display: none; } .lal-iconbtn { color: var(--text); border-radius: 12px; } .lal-iconbtn:hover { color: var(--accent); background: rgba(96, 185, 237, .10); } .lal-cart-count { background: var(--accent); color: var(--surface-1); border-color: var(--surface-1); top: 3px; right: 1px; font-size: 10px; } .lal-cart-count.is-bump { animation: lal-bump .5s var(--ease); } @keyframes lal-bump { 40% { transform: scale(1.35); } } @media (min-width: 1024px) { .lal-header__inner { grid-template-columns: auto 1fr auto; gap: 24px; height: 80px; } .lal-brand { justify-self: start; } .lal-brand__logo { height: 50px; } .lal-account-link { display: inline-grid; } .lal-nav { margin: 0; justify-self: center; } .lal-nav__list { gap: 2px !important; padding: 5px; background: rgba(16, 41, 60, .55); border: 1px solid var(--border); border-radius: 999px; } .lal-nav .lal-nav__link { padding: 9px 18px !important; border-radius: 999px; font-family: var(--font-display); font-size: .92rem !important; font-weight: 600 !important; color: var(--text-2) !important; } .lal-nav .lal-nav__link::after { display: none; } .lal-nav .lal-nav__link:hover, .lal-nav__item:focus-within > .lal-nav__link { color: var(--text) !important; background: rgba(96, 185, 237, .12); } .lal-nav__search, .lal-nav__footer { display: none !important; } .lal-nav__item--has-sub { position: relative; display: flex; align-items: center; } .lal-nav__toggle { display: none; } .lal-nav__sub { position: absolute !important; top: calc(100% + 14px); left: 50%; min-width: 300px; display: grid !important; gap: 2px; padding: 8px !important; background: rgba(1, 18, 33, .97); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; } .lal-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .lal-nav__item--has-sub:hover .lal-nav__sub, .lal-nav__item--has-sub:focus-within .lal-nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } .lal-nav__sub li { border: 0 !important; } .lal-nav__sub a { display: flex !important; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 14px !important; border-radius: 12px; font-size: .92rem !important; color: var(--text) !important; } .lal-nav__sub a small { color: var(--text-muted); font-size: .75rem; font-family: var(--font-body); font-weight: 500; } .lal-nav__sub a:hover { background: rgba(96, 185, 237, .10); color: var(--accent) !important; } .lal-nav__sub a::after { display: none !important; } } /* Mobile drawer */ @media (max-width: 1023.98px) { .lal-nav { position: absolute; top: 100%; left: 0; right: 0; height: var(--lal-drawer-h, calc(100dvh - var(--header-h))) !important; background: #010c18 !important; border-top: 1px solid var(--border); z-index: 5; display: flex; flex-direction: column; gap: 16px; padding: 18px var(--gutter) 28px; } .lal-nav__list { display: block; } .lal-nav li { border-bottom: 1px solid var(--border); } .lal-nav .lal-nav__link { padding: 16px 4px; font-size: 1.2rem; } .lal-nav__item--has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; } .lal-nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: transparent; cursor: pointer; } .lal-nav__toggle .lal-icon { transition: transform .25s var(--ease); } .lal-nav__item.is-open .lal-nav__toggle .lal-icon { transform: rotate(180deg); } .lal-nav__sub { grid-column: 1 / -1; display: none; padding: 0 0 12px !important; } .lal-nav__item.is-open .lal-nav__sub { display: grid; gap: 2px; } .lal-nav__sub li { border: 0 !important; } .lal-nav__sub a { display: flex !important; justify-content: space-between; padding: 12px 14px !important; font-size: 1rem !important; border-radius: 12px; background: rgba(16, 41, 60, .5); margin-bottom: 4px; } .lal-nav__sub a small { color: var(--text-muted); font-family: var(--font-body); font-size: .78rem; font-weight: 500; } .lal-nav__footer { display: grid; gap: 14px; margin-top: auto; text-align: center; } .lal-nav__account { display: inline-flex; justify-content: center; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; font-weight: 600; } .lal-search-toggle { display: none; } .lal-nav__search { margin: 0; } } /* Search panel */ .lal-searchbar { border-top: 1px solid var(--border); background: rgba(1, 18, 33, .96); padding-block: 14px; } .lal-searchbar .lal-search { margin-inline: auto; max-width: 680px; } /* ---------- Page-title band: blends into the page (no hard split) ---------- */ .lal-pagehead { background: radial-gradient(800px 380px at 85% -10%, rgba(96, 185, 237, .16), transparent 60%), radial-gradient(700px 360px at 10% 0%, rgba(26, 106, 219, .18), transparent 60%), linear-gradient(180deg, rgba(1, 18, 33, .85) 0%, rgba(1, 18, 33, 0) 100%) !important; padding-block: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 44px); } .lal-pagehead::before { mask-image: linear-gradient(180deg, #000 30%, transparent 100%), linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); } .lal-pagehead--center .lal-pagehead__inner { text-align: center; display: flex; flex-direction: column; align-items: center; } .lal-pagehead--center .lal-pagehead__lede { margin-inline: auto; } .lal-pagehead__title { letter-spacing: -.03em; } .lal-pagehead--shop .lal-pagehead__inner { text-align: center; display: flex; flex-direction: column; align-items: center; } .lal-pagehead--shop .lal-shop__search { width: 100%; max-width: 620px; } .lal-pagehead--shop .lal-pills { justify-content: center; flex-wrap: wrap; overflow: visible; } .lal-shop__crumbs { display: none; } .lal-shop__body { padding-top: 8px; } /* ---------- Hero ---------- */ .lal-hero { background: radial-gradient(1000px 540px at 80% 30%, rgba(96, 185, 237, .16), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(26, 106, 219, .22), transparent 60%), linear-gradient(180deg, rgba(1, 18, 33, .9), rgba(1, 18, 33, .2)) !important; } .lal-hero__inner { grid-template-columns: 1fr; gap: 20px; text-align: center; padding-block: clamp(32px, 6vw, 96px) clamp(48px, 7vw, 104px); } .lal-hero__head { display: flex; flex-direction: column; align-items: center; } .lal-hero__lede { margin-inline: auto; margin-bottom: 0; } .lal-hero__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; } .lal-hero__buy { width: 100%; max-width: 360px; } .lal-hero__points { margin: 0; flex-wrap: nowrap; justify-content: center; gap: 6px 14px; font-size: clamp(10.5px, 3vw, 14px); white-space: nowrap; } .lal-hero__points li { gap: 5px; } .lal-hero__visual { height: 300px; margin: 4px auto 0; } .lal-hero__chip { font-size: 11px; padding: 6px 11px; } @media (min-width: 768px) { .lal-hero__visual { height: 400px; } } @media (min-width: 1024px) { .lal-hero__inner { grid-template-columns: 1.05fr .95fr; grid-template-areas: "head visual" "actions visual"; align-items: center; text-align: left; column-gap: 56px; row-gap: 28px; } .lal-hero__head { grid-area: head; align-items: flex-start; align-self: end; } .lal-hero__lede { margin-inline: 0; } .lal-hero__actions { grid-area: actions; align-items: flex-start; align-self: start; } .lal-hero__buy { width: auto; } .lal-hero__visual { grid-area: visual; height: 520px; margin: 0; } .lal-hero__points { justify-content: flex-start; } } /* ---------- Trust badges (3 or 4, no Zelle/support cards) ---------- */ .lal-trust { margin-top: -24px; } .lal-badges--strip { grid-template-columns: 1fr !important; background: transparent; border: 0; box-shadow: none; gap: 10px; overflow: visible; } .lal-badges--strip .lal-badge { flex-direction: row !important; align-items: center !important; justify-content: flex-start; gap: 12px !important; padding: 14px 16px !important; background: rgba(16, 41, 60, .72); border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(10px); } .lal-badges--strip .lal-badge:last-child { grid-column: auto; } .lal-badges--strip .lal-badge__body { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .lal-badges--strip .lal-badge__title { white-space: nowrap; } .lal-badges--strip .lal-badge__text { display: block !important; white-space: nowrap; font-size: .78rem; } @media (max-width: 559.98px) { .lal-badges--strip .lal-badge__text { display: none !important; } .lal-badges--strip .lal-badge { justify-content: center; padding: 12px 14px !important; } } @media (min-width: 900px) { .lal-badges--strip.lal-badges--n3 { grid-template-columns: repeat(3, 1fr) !important; } .lal-badges--strip.lal-badges--n4 { grid-template-columns: repeat(4, 1fr) !important; } .lal-badges--strip .lal-badge__body { flex-direction: column; align-items: flex-start; } .lal-badges--strip .lal-badge__text { white-space: normal; } } .lal-badges--compact { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; } .lal-badges--compact .lal-badge { flex-direction: column; text-align: center; justify-content: center; gap: 6px; padding: 12px 8px; background: rgba(16, 41, 60, .6); } .lal-badges--compact .lal-badge:last-child { grid-column: auto !important; } .lal-badges--compact .lal-badge__title { font-size: .74rem; line-height: 1.25; } /* ---------- Sections with depth ---------- */ .lal-bg-pattern, .lal-why, .lal-about { position: relative; isolation: isolate; } .lal-featured { background: radial-gradient(900px 480px at 50% 0%, rgba(26, 106, 219, .14), transparent 65%); } .lal-why { background: linear-gradient(180deg, rgba(1, 18, 33, .75), rgba(1, 18, 33, .35)) !important; } .lal-section__head { align-items: center; } @media (max-width: 767.98px) { .lal-section__head { flex-direction: column; text-align: center; justify-content: center; } .lal-heading { text-align: center; margin-inline: auto; } .lal-eyebrow { justify-content: center; } .lal-featured__tools { justify-content: center; width: 100%; } .lal-featured__tools .lal-search { width: 100%; } .lal-why__item { text-align: center; } .lal-about__copy { text-align: center; } .lal-about__copy p { margin-inline: auto; } .lal-step { text-align: center; } .lal-compliance__card { text-align: center; justify-items: center; } .lal-compliance__actions { justify-content: center; } } /* ---------- Product cards ---------- */ .woocommerce ul.products li.product.lal-pcard, .lal-pcard { background: linear-gradient(180deg, rgba(16, 41, 60, .78), rgba(1, 18, 33, .88)); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; } .lal-pcard:hover { border-color: var(--border-strong); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(96, 185, 237, .25); } .lal-pcard__media { background: radial-gradient(70% 60% at 50% 60%, rgba(96, 185, 237, .18), transparent 70%), linear-gradient(180deg, #0E2233, #0A1B2B) !important; } .woocommerce ul.products li.product .lal-pcard__tag, .woocommerce ul.products li.product .lal-pcard__tag.onsale, .lal-pcard__tag { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; line-height: 1 !important; padding: 6px 10px !important; border-radius: 999px !important; font-size: 10.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cta-fg) !important; background: var(--accent) !important; border: 0 !important; z-index: 3; } .lal-pcard__body { gap: 2px; } .lal-pcard__title a { color: var(--text); } .lal-pcard__foot { flex-direction: column; align-items: stretch; gap: 10px; } .lal-pcard__price, .woocommerce ul.products li.product .price { font-size: 1.02rem; color: var(--text); } .lal-pcard__price del { color: var(--text-muted); opacity: 1; font-weight: 500; font-size: .85em; margin-right: 4px; } .lal-pcard__price ins { text-decoration: none; } .lal-pcard__foot .lal-btn, .woocommerce ul.products li.product .button { width: 100% !important; min-height: 42px !important; font-size: .86rem !important; } @media (max-width: 767.98px) { .lal-pcard__body { text-align: center; align-items: center; padding: 12px 10px 14px; } .lal-pcard__foot { width: 100%; } .lal-pcard__title { font-size: .92rem !important; } } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 18px !important; } @media (max-width: 767.98px) { .woocommerce-result-count { display: none !important; } .woocommerce-ordering { float: none !important; text-align: center; } } /* ---------- Single product ---------- */ .lal-product-page { padding-top: 28px; } .woocommerce div.product { gap: 28px; padding-top: 8px; } .woocommerce div.product .woocommerce-product-gallery { position: relative !important; top: auto !important; width: 100% !important; max-width: 460px; margin: 0 auto !important; border-radius: 24px; border: 1px solid var(--border); } .woocommerce div.product .woocommerce-product-gallery__image img { padding: 8% 10%; max-height: 460px; object-fit: contain; } .woocommerce div.product .summary { text-align: center; } .woocommerce div.product .summary .product_title { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); } .lal-summary-cat { justify-content: center; } .lal-summary-format { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 18px; padding: 7px 12px; border-radius: 999px; font-size: .84rem; color: var(--text-2); background: rgba(96, 185, 237, .08); border: 1px solid var(--border); } .lal-summary-format .lal-icon { color: var(--accent); flex: none; } .lal-swatches { justify-content: center; } .lal-swatch { background: rgba(16, 41, 60, .8); } .lal-swatch.is-active { color: var(--cta-fg) !important; background: var(--cta-bg) !important; border-color: var(--cta-bg) !important; } .woocommerce div.product form.cart { justify-content: center; } .woocommerce div.product form.cart .variations label { text-align: center; } .woocommerce div.product .woocommerce-variation-add-to-cart { justify-content: center; } .woocommerce div.product form.cart .reset_variations { display: block; text-align: center; } .woocommerce .quantity .qty { border-radius: 999px; } .lal-summary-trust { margin: 18px 0 0; } .woocommerce div.product .lal-ruo { text-align: left; } @media (min-width: 900px) { .woocommerce div.product { grid-template-columns: minmax(0, 440px) minmax(0, 1fr) !important; gap: 40px 64px !important; align-items: start; } .woocommerce div.product .woocommerce-product-gallery { margin: 0 !important; } .woocommerce div.product .summary { text-align: left; padding-top: 8px; } .lal-summary-cat, .lal-swatches, .woocommerce div.product form.cart, .woocommerce div.product .woocommerce-variation-add-to-cart { justify-content: flex-start; } .woocommerce div.product form.cart .variations label, .woocommerce div.product form.cart .reset_variations { text-align: left; } .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .upsells { grid-column: 1 / -1; } } .woocommerce div.product .woocommerce-tabs { position: relative; z-index: 1; margin-top: 12px; clear: both; } .woocommerce div.product .woocommerce-tabs ul.tabs { margin-inline: auto !important; background: rgba(1, 18, 33, .8); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--cta-bg) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cta-fg) !important; } .woocommerce div.product .woocommerce-tabs .panel { background: linear-gradient(180deg, rgba(16, 41, 60, .75), rgba(1, 18, 33, .7)); } .lal-tab__title { font-size: var(--fs-lg); margin-bottom: .6em; } .lal-tab__subtitle { font-size: 1.05rem; margin: 1.6em 0 .5em; color: var(--text); } .lal-tab ul { padding-left: 1.2em; } .lal-tab li { margin-bottom: .45em; } .lal-tab li::marker { color: var(--accent); } .lal-tab--warnings ul { list-style: none; padding: 0; display: grid; gap: 10px; } .lal-tab--warnings li { position: relative; padding: 12px 14px 12px 44px; border-radius: 12px; background: rgba(255, 122, 122, .06); border: 1px solid rgba(255, 122, 122, .22); margin: 0; } .lal-tab--warnings li::before { content: "!"; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--surface-1); background: var(--danger); } .lal-tab--disclaimers p { color: var(--text-2); line-height: 1.75; } .lal-specs { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .lal-specs th, .lal-specs td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .lal-specs tr:last-child th, .lal-specs tr:last-child td { border-bottom: 0; } .lal-specs th { width: 34%; font-family: var(--font-display); font-weight: 600; color: var(--text); background: rgba(10, 40, 75, .55); } .lal-specs td { color: var(--text-2); } @media (max-width: 640px) { .woocommerce div.product .woocommerce-tabs ul.tabs { width: 100%; justify-content: flex-start; scroll-snap-type: x mandatory; } .woocommerce div.product .woocommerce-tabs ul.tabs li { scroll-snap-align: start; } .lal-specs th, .lal-specs td { display: block; width: auto; } .lal-specs th { border-bottom: 0; padding-bottom: 4px; } } .woocommerce div.product .related > h2 { text-align: center; } /* ---------- Cart ---------- */ .woocommerce-cart .lal-store > .woocommerce { display: grid; gap: 24px; align-items: start; } @media (min-width: 1024px) { .woocommerce-cart .lal-store > .woocommerce { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } .woocommerce-cart .lal-store > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart .cart-collaterals { position: sticky; top: calc(var(--header-h) + 24px); } } .woocommerce-cart table.shop_table.cart { display: block; border: 0 !important; background: transparent !important; margin: 0 !important; } .woocommerce-cart table.shop_table.cart thead { display: none; } .woocommerce-cart table.shop_table.cart tbody { display: grid; gap: 12px; } .woocommerce-cart table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "thumb name remove" "thumb price qty" "thumb sub sub"; align-items: center; gap: 6px 14px; padding: 14px; background: linear-gradient(180deg, rgba(16, 41, 60, .8), rgba(1, 18, 33, .85)); border: 1px solid var(--border); border-radius: 18px; } .woocommerce-cart table.shop_table.cart td { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; } .woocommerce-cart table.shop_table.cart td::before { display: none !important; } .woocommerce-cart td.product-thumbnail { grid-area: thumb; } .woocommerce-cart td.product-thumbnail img { width: 84px !important; height: 84px; object-fit: contain; border-radius: 14px; background: #0E2233 !important; padding: 6px; } .woocommerce-cart td.product-name { grid-area: name; font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .woocommerce-cart td.product-name a { color: var(--text); text-decoration: none; } .woocommerce-cart td.product-name .variation { margin: 4px 0 0; font-family: var(--font-body); font-size: .8rem; color: var(--text-muted); } .woocommerce-cart td.product-name .variation dt, .woocommerce-cart td.product-name .variation dd { display: inline; margin: 0; } .woocommerce-cart td.product-name .variation dd p { display: inline; margin: 0; } .woocommerce-cart td.product-price { grid-area: price; color: var(--text-muted); font-size: .88rem; } .woocommerce-cart td.product-quantity { grid-area: qty; justify-self: end; } .woocommerce-cart td.product-quantity .qty { width: 72px !important; min-height: 40px !important; } .woocommerce-cart td.product-subtotal { grid-area: sub; justify-self: end; font-family: var(--font-display); font-weight: 700; color: var(--text); } .woocommerce-cart td.product-remove { grid-area: remove; justify-self: end; } .woocommerce-cart td.product-remove a.remove { display: grid !important; place-items: center; width: 32px !important; height: 32px !important; border-radius: 10px !important; border: 1px solid var(--border); color: var(--text-muted) !important; font-size: 1.2rem; } .woocommerce-cart td.product-remove a.remove:hover { color: #fff !important; background: var(--danger) !important; border-color: var(--danger); } .woocommerce-cart table.shop_table.cart tr:not(.cart_item) { display: block; } .woocommerce-cart table.shop_table.cart td.actions { display: flex !important; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 14px !important; margin-top: 4px; background: rgba(1, 18, 33, .6) !important; border: 1px dashed var(--border-strong) !important; border-radius: 16px; } .woocommerce-cart td.actions .coupon { display: flex; flex: 1 1 280px; gap: 8px; } .woocommerce-cart td.actions .coupon #coupon_code { flex: 1; width: auto !important; min-height: 44px; border-radius: 999px; } .woocommerce-cart td.actions > .button[name="update_cart"] { background: transparent !important; color: var(--text) !important; box-shadow: inset 0 0 0 1.5px var(--border-strong) !important; } .woocommerce-cart td.actions > .button[name="update_cart"]:disabled { opacity: .4; } .woocommerce-cart .cart-collaterals .cart_totals { max-width: none !important; margin: 0 !important; padding: 22px !important; background: linear-gradient(180deg, rgba(16, 41, 60, .9), rgba(1, 18, 33, .9)) !important; border: 1px solid var(--border-strong) !important; border-radius: 22px !important; } .woocommerce-cart .cart_totals h2 { font-size: 1.2rem; margin-bottom: 12px; } .woocommerce-cart .cart_totals table.shop_table { display: table; width: 100%; border: 0 !important; background: transparent !important; margin-bottom: 8px !important; } .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { padding: 10px 0 !important; background: none !important; border-top: 1px solid var(--border) !important; font-size: .92rem; } .woocommerce-cart .cart_totals table.shop_table td { text-align: right !important; } .woocommerce-cart .cart_totals table.shop_table td::before { display: none !important; } .woocommerce-cart .cart_totals tr.tax-rate { display: none !important; } /* was snippet #27 */ .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { font-size: 1.1rem !important; color: var(--text); } .woocommerce-cart .cart_totals #shipping_method { margin: 0; padding: 0; list-style: none; } .woocommerce-cart .cart_totals #shipping_method li { display: flex; justify-content: flex-end; gap: 8px; align-items: center; } .woocommerce-cart .cart_totals .woocommerce-shipping-destination, .woocommerce-cart .shipping-calculator-button { font-size: .8rem; } .woocommerce-cart .wc-proceed-to-checkout { padding: 8px 0 0 !important; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button { margin: 0 !important; } .lal-cart-email { margin: 6px 0 14px; padding: 14px; border-radius: 14px; background: rgba(96, 185, 237, .06); border: 1px solid var(--border); } .lal-cart-email label { display: block; margin-bottom: 8px; font-size: .88rem; font-weight: 600; color: var(--text); } .lal-cart-email input { width: 100%; } .lal-cart-email__hint { margin: 8px 0 0; font-size: .76rem; color: var(--text-muted); } .lal-cart-trust { max-width: none; margin: 14px 0 0; } .woocommerce-cart .cart-empty, .wc-empty-cart-message { text-align: center; } .woocommerce-cart .return-to-shop { text-align: center; } /* ---------- Checkout ---------- */ .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-shipping-fields { background: linear-gradient(180deg, rgba(16, 41, 60, .78), rgba(1, 18, 33, .82)); border: 1px solid var(--border); border-radius: 22px; padding: clamp(18px, 3vw, 26px); } .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-shipping-fields { margin-top: 18px; } .woocommerce-checkout #order_review { min-height: 420px; } .woocommerce-checkout .select2-container .select2-selection--single, .woocommerce form .form-row select, .woocommerce form .form-row input.input-text { min-height: 48px; } .lal-po-note { margin: 6px 0 0; font-size: .82rem; color: var(--danger); font-weight: 600; } .woocommerce-checkout #payment div.payment_box { background: rgba(96, 185, 237, .07) !important; } /* ---------- Content pages ---------- */ .lal-page { padding-block: 12px clamp(56px, 8vw, 96px); } .lal-card-surface { padding: clamp(22px, 4vw, 44px); background: linear-gradient(180deg, rgba(16, 41, 60, .6), rgba(1, 18, 33, .5)); border: 1px solid var(--border); border-radius: 24px; } .lal-prose h2 { color: var(--text); } /* FAQs */ .lal-faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; } .lal-faq-card { border-radius: 18px; background: linear-gradient(180deg, rgba(16, 41, 60, .78), rgba(1, 18, 33, .82)); border: 1px solid var(--border); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .lal-faq-card[open] { border-color: var(--border-strong); box-shadow: 0 24px 48px -30px rgba(96, 185, 237, .45); } .lal-faq-card summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; } .lal-faq-card summary::-webkit-details-marker { display: none; } .lal-faq-card__n { font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: var(--accent); letter-spacing: .08em; } .lal-faq-card__q { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--text); } .lal-faq-card__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text); background: rgba(96, 185, 237, .10); transition: transform .3s var(--ease), background-color .3s var(--ease); } .lal-faq-card[open] .lal-faq-card__icon { transform: rotate(45deg); background: var(--cta-bg); color: var(--cta-fg); } .lal-faq-card__a { padding: 0 20px 20px 58px; color: var(--text-2); max-width: none; } .lal-faq-card__a > :last-child { margin-bottom: 0; } @media (max-width: 600px) { .lal-faq-card__a { padding-left: 20px; } .lal-faq-card summary { padding: 16px; } } .lal-faq-help { max-width: 880px; margin: 28px auto 0; display: grid; gap: 16px; align-items: center; padding: 22px; border-radius: 20px; text-align: center; justify-items: center; background: linear-gradient(120deg, rgba(26, 106, 219, .22), rgba(8, 16, 104, .35)); border: 1px solid var(--border-strong); } .lal-faq-help h2 { font-size: 1.2rem; margin: 0 0 4px; } .lal-faq-help p { margin: 0; color: var(--text-2); } .lal-faq-help__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--accent); background: rgba(96, 185, 237, .12); } @media (min-width: 768px) { .lal-faq-help { grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; } } /* Contact */ .lal-contact { display: grid; gap: 24px; max-width: 1080px; } @media (min-width: 900px) { .lal-contact { grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: start; } } .lal-contact__info, .lal-contact__form { padding: clamp(20px, 4vw, 32px); border-radius: 24px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(16, 41, 60, .8), rgba(1, 18, 33, .85)); } .lal-contact__points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 16px; } .lal-contact__points li { display: flex; gap: 14px; align-items: flex-start; } .lal-contact__points strong { display: block; color: var(--text); font-family: var(--font-display); } .lal-contact__points p { margin: 2px 0 0; font-size: .9rem; color: var(--text-muted); } .lal-contact__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--accent); background: rgba(96, 185, 237, .10); border: 1px solid var(--border); } .lal-contact__faq { margin: 0 0 8px; font-weight: 600; } .lal-contact__note { margin: 0; font-size: .82rem; color: var(--text-muted); } .lal-contact__form { display: grid; gap: 16px; } .lal-contact__form .lal-field label small { color: var(--text-muted); font-weight: 500; } .lal-contact__form .lal-field label span { color: var(--accent); } .lal-contact__form input, .lal-contact__form select, .lal-contact__form textarea { width: 100%; } .lal-contact__form .lal-btn { justify-self: start; } @media (max-width: 640px) { .lal-contact__form .lal-btn { justify-self: stretch; } } .lal-form__status { margin: 0; font-weight: 600; min-height: 1.4em; } .lal-form__status.is-ok { color: var(--success); } .lal-form__status.is-error { color: var(--danger); } .lal-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } /* Affiliate pages */ .lal-become-affiliate { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--accent); } .lal-page--store .slicewp-form, .lal-page--store .slicewp-affiliate-account { max-width: 720px; margin-inline: auto; } /* ---------- Footer ---------- */ .lal-footer { position: relative; background: linear-gradient(180deg, rgba(1, 18, 33, .4) 0%, #010c18 22%) !important; border-top: 1px solid var(--border); padding-top: clamp(36px, 6vw, 64px); } .lal-footer__badges { display: none; } .lal-footer__cta { display: grid; gap: 18px; align-items: center; margin-bottom: clamp(36px, 5vw, 56px); padding: clamp(22px, 4vw, 34px); border-radius: 24px; text-align: center; justify-items: center; background: radial-gradient(600px 240px at 90% 0%, rgba(96, 185, 237, .22), transparent 60%), linear-gradient(120deg, #0A284B, #081068); border: 1px solid var(--border-strong); } .lal-footer__cta-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); color: #fff; margin: 0 0 6px; } .lal-footer__cta p { margin: 0; color: var(--text-2); } .lal-footer__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } @media (min-width: 900px) { .lal-footer__cta { grid-template-columns: 1fr auto; text-align: left; justify-items: start; } } .lal-footer__grid { gap: 28px; } .lal-footer__title { color: var(--text); font-family: var(--font-display); letter-spacing: .12em; font-size: .74rem; } .lal-footer__list a { color: #A9B6C4; } .lal-footer__list a:hover { color: var(--accent); } .lal-footer__about p { color: #A9B6C4; } .lal-footer__social { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); } /* Below desktop: logo, blurb and Instagram link on top, then Shop / Help / Legal side by side in one row, left-aligned. */ @media (max-width: 1023.98px) { .lal-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px 14px !important; } .lal-footer__col { grid-column: auto !important; min-width: 0; text-align: left; } .lal-footer__about { grid-column: 1 / -1 !important; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 26px; border-bottom: 1px solid var(--border); } .lal-footer__about p { margin: 16px auto; } } @media (max-width: 767.98px) { .lal-footer__title { font-size: .7rem; letter-spacing: .1em; } .lal-footer__list { gap: 10px !important; } .lal-footer__list li { margin: 0 !important; } .lal-footer__list a { font-size: .8rem; line-height: 1.35; display: inline-block; overflow-wrap: anywhere; hyphens: auto; } .lal-footer__ruo { flex-direction: column; align-items: center; text-align: center; } .lal-footer__bottom { flex-direction: column; align-items: center; text-align: center; } } /* ---------- Toast, popup ---------- */ .lal-toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 1200; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; max-width: calc(100% - 32px); color: var(--text); background: rgba(1, 18, 33, .96); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9); transform: translate(-50%, 24px); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); } .lal-toast.is-visible { transform: translate(-50%, 0); opacity: 1; } .lal-toast[hidden] { display: none; } .lal-toast__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--surface-1); background: var(--success); } .lal-toast__text { font-weight: 600; white-space: nowrap; } .lal-toast__link { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .86rem; color: var(--cta-fg); background: var(--cta-bg); text-decoration: none; white-space: nowrap; } .lal-toast__link:hover { color: var(--cta-fg); background: var(--cta-hover); } .lal-popup { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; padding: 16px; background: rgba(1, 8, 16, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s var(--ease); } .lal-popup[hidden] { display: none; } .lal-popup.is-open { opacity: 1; } html.lal-age-pending .lal-popup { display: none !important; } html.lal-modal-open, html.lal-modal-open body { overflow: hidden; } .lal-popup__panel { position: relative; width: 100%; max-width: 440px; padding: 34px 26px 22px; text-align: center; border-radius: 24px; background: radial-gradient(420px 200px at 50% 0%, rgba(96, 185, 237, .22), transparent 70%), linear-gradient(180deg, #0A284B, #011221); border: 1px solid var(--border-strong); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); transform: translateY(10px); transition: transform .3s var(--ease); } .lal-popup.is-open .lal-popup__panel { transform: none; } .lal-popup__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--text-muted); background: rgba(255, 255, 255, .06); cursor: pointer; } .lal-popup__close:hover { color: var(--text); } .lal-popup__title { font-size: 2rem; margin: 0 0 6px; } .lal-popup__text { color: var(--text-2); margin: 0 0 18px; } .lal-popup__form { display: grid; gap: 10px; } .lal-popup__msg { margin: 12px 0 0; font-weight: 600; min-height: 1.2em; } .lal-popup__msg.is-ok { color: var(--success); } .lal-popup__msg.is-error { color: var(--danger); } .lal-popup__skip { margin-top: 8px; border: 0; background: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; } /* ---------- Mobile polish ---------- */ @media (max-width: 767.98px) { .lal-pagehead__title { font-size: clamp(1.7rem, 7vw, 2.2rem); } .lal-pagehead__inner { text-align: center; } .lal-pagehead__lede { margin-inline: auto; } .lal-hero__title { font-size: clamp(2.2rem, 10vw, 3rem); } .lal-card-surface { border-radius: 18px; } .woocommerce ul.products, ul.products.lal-grid { gap: 10px !important; } .lal-stats { text-align: center; } .lal-stat { align-items: center; } } /* ---------- Fixes from preview QA ---------- */ .woocommerce div.product form.cart .variations td { position: relative; } .lal-visually-hidden { left: 0; top: 0; } html { overflow-x: clip; } /* with body also clip, the viewport stays the only scroller */ /* Side cart and floating cart widget are retired; the header cart + toast replace them. */ .moderncart-floating-cart-button, .moderncart-plugin, .moderncart-slide-out-cart, #moderncart-slide-out { display: none !important; } /* Power Coupons' drawer only belongs on cart and checkout. */ body:not(.woocommerce-cart):not(.woocommerce-checkout) [class*="power-coupons-drawer"] { display: none !important; } @media (max-width: 640px) { .woocommerce div.product .woocommerce-tabs ul.tabs { display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; overflow: visible; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { text-align: center; white-space: normal !important; padding: 10px 8px !important; font-size: .82rem; } } /* Shipping options as selectable rows (cart totals and checkout review). */ .woocommerce ul#shipping_method { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .woocommerce ul#shipping_method li, .woocommerce-cart .cart_totals #shipping_method li { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; margin: 0; padding: 9px 12px; text-align: left; line-height: 1.35; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px; background: rgba(255,255,255,.02); cursor: pointer; } .woocommerce ul#shipping_method li:has(input:checked) { border-color: rgba(96,185,237,.55); background: rgba(96,185,237,.08); } .woocommerce ul#shipping_method li input { flex: none; margin: 3px 0 0 !important; accent-color: #60B9ED; width: 16px; height: 16px; } .woocommerce ul#shipping_method li label { flex: 1; margin: 0; color: #F5F7FA; font-weight: 500; cursor: pointer; } .woocommerce ul#shipping_method li label .amount { font-weight: 700; white-space: nowrap; } .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td { text-align: left; } .woocommerce-cart .cart_totals .woocommerce-shipping-destination, .woocommerce-cart .cart_totals .woocommerce-shipping-calculator { text-align: left; margin-top: 8px; } /* Checkout review table: one surface, no darker label column. */ .woocommerce-checkout-review-order-table thead th, .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td { background: transparent !important; } .woocommerce-checkout-review-order-table thead th { color: var(--muted, #9DB0C4); font-size: .75rem; letter-spacing: .08em; } .woocommerce-checkout-review-order-table tr.order-total th, .woocommerce-checkout-review-order-table tr.order-total td { background: rgba(96,185,237,.08) !important; font-size: 1.05rem; } .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { padding-top: 10px; padding-bottom: 10px; } /* Power Coupons drawer: the store has no public coupons, so the plugin's drawer only ever shows "Failed to load coupons". Typed coupon codes still work. Remove these two rules if public coupons are added later. */ .power-coupons-drawer-trigger-wrapper, [class*="power-coupons-drawer"] { display: none !important; } /* Mobile hero + trust strip polish. */ @media (max-width: 1023px) { .lal-hero__points { gap: 6px 10px; font-size: clamp(10px, 2.75vw, 14px); } .lal-hero__points .lal-icon { width: 12px; height: 12px; } .lal-hero__chip--a { left: 3%; } .lal-hero__chip--b { right: 3%; } } @media (max-width: 640px) { .lal-badges--strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; } .lal-badges--strip.lal-badges--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .lal-badges--strip .lal-badge { flex-direction: column !important; justify-content: flex-start; gap: 8px !important; padding: 12px 8px !important; text-align: center; } .lal-badges--strip .lal-badge__title { font-size: .78rem; line-height: 1.25; } .lal-badges--strip .lal-badge__text { display: none; } } @media (max-width: 359px) { .lal-hero__points .lal-icon { display: none; } .lal-hero__points { gap: 6px 12px; } } /* Every page title band centred (matches Shop, FAQs, Contact). */ .lal-pagehead__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .lal-pagehead__lede { margin-inline: auto; } /* SliceWP buttons use the same white CTA as the rest of the site. */ .slicewp-button-primary, .slicewp-affiliate-account .slicewp-button-primary, input.slicewp-button-primary, .slicewp-form button[type="submit"] { color: var(--cta-fg) !important; background: var(--cta-bg) !important; border: 0 !important; border-radius: 999px !important; min-height: 46px; padding: 12px 28px !important; font-weight: 650 !important; box-shadow: 0 10px 28px -14px rgba(96, 185, 237, .65); } @media (hover: hover) { .slicewp-button-primary:hover, .slicewp-form button[type="submit"]:hover { background: var(--cta-hover) !important; box-shadow: 0 14px 30px -12px rgba(96, 185, 237, .8); } } .slicewp-lost-password { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 18px; } .lal-become-affiliate { font-weight: 600; color: var(--accent, #60B9ED); } .slicewp-lost-password a { margin: 0 !important; line-height: 1.4; } /* FAQs: the intro under the title is a quiet note, not a lede. */ .lal-pagehead--faq .lal-pagehead__lede { font-size: .95rem; line-height: 1.6; max-width: 600px; color: var(--text-muted, #9DB0C4); } @media (max-width: 640px) { .lal-pagehead--faq .lal-pagehead__lede { font-size: .9rem; } } /* SliceWP user notices (e.g. "You are already registered!" on Affiliate Registration when signed in). The plugin paints pastel boxes that assume dark text. */ .slicewp-user-notice, .slicewp-user-notice.slicewp-updated, .slicewp-user-notice.slicewp-info, .slicewp-user-notice.slicewp-warning, .slicewp-user-notice.slicewp-error { max-width: 720px; margin: 0 auto 1.25em !important; padding: 18px 22px !important; color: var(--text-2, #D5DFEA) !important; background: var(--surface-2, #10293C) !important; border: 1px solid var(--border) !important; border-left: 4px solid var(--accent) !important; border-radius: 16px !important; font-size: 1rem; line-height: 1.6; } .slicewp-user-notice.slicewp-updated { border-left-color: var(--success, #3FB68B) !important; } .slicewp-user-notice.slicewp-warning { border-left-color: #F5B544 !important; } .slicewp-user-notice.slicewp-error { border-left-color: var(--danger, #F0616D) !important; } .slicewp-user-notice p { margin: 0 0 .4em; color: inherit !important; } .slicewp-user-notice p:last-child { margin-bottom: 0; } .slicewp-user-notice strong { color: var(--text, #F5F7FA); } .slicewp-user-notice a { color: var(--accent, #60B9ED) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Phones: the admin toolbar scrolls away below 600px, so the sticky header sits at the top. */ @media (max-width: 600px) { .admin-bar .lal-header { top: 0; } } /* Mobile menu footer: a single account button, centred at the bottom of the drawer. */ @media (max-width: 1023px) { .lal-nav__footer { display: flex !important; justify-content: center; padding-top: 18px; border-top: 1px solid var(--border); } .lal-nav__footer .lal-nav__account { width: 52px; height: 52px; border-radius: 50%; color: var(--text); background: rgba(96, 185, 237, .1); border: 1px solid rgba(96, 185, 237, .35); } .lal-nav__footer .lal-nav__account:hover, .lal-nav__footer .lal-nav__account:focus-visible { background: rgba(96, 185, 237, .2); color: #fff; } } /* ---------- Hero motion (1.1.4): bigger float, orbit, pulse, drifting particles ---------- */ .lal-hero__ring { animation: lal-pulse-ring 6s ease-in-out infinite; } @keyframes lal-pulse-ring { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.07; } } .lal-hero__orbit { position: absolute; left: 50%; top: 52%; width: 96%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; border: 1px dashed rgba(143, 208, 245, .22); animation: lal-spin 26s linear infinite; } .lal-hero__orbit span { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #B8E8FF; box-shadow: 0 0 12px 4px rgba(96, 185, 237, .8), 0 0 30px 10px rgba(57, 147, 255, .35); } .lal-hero__orbit::after { /* second, dimmer satellite on the opposite side */ content: ""; position: absolute; bottom: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #60B9ED; box-shadow: 0 0 10px 3px rgba(96, 185, 237, .6); } @keyframes lal-spin { to { rotate: 360deg; } } .lal-hero__particles { position: absolute; inset: -6% -4%; pointer-events: none; z-index: 1; } .lal-hero__particles span { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #B8E8FF; box-shadow: 0 0 8px 2px rgba(96, 185, 237, .7); opacity: 0; animation: lal-drift var(--t) ease-in-out var(--d) infinite; } @keyframes lal-drift { 0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.6); } 20% { opacity: .9; } 70% { opacity: .55; } 100% { opacity: 0; transform: translate3d(var(--dx), -110px, 0) scale(1.1); } } .lal-hero__floor { /* shadow that shrinks as the vial rises */ position: absolute; left: 50%; bottom: -2%; width: 46%; height: 26px; translate: -50% 0; z-index: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); animation: lal-floor 7s ease-in-out infinite; } @keyframes lal-floor { 50% { scale: .78; opacity: .6; } } .lal-hero__vial--center { animation: lal-float-lg 7s ease-in-out infinite; } .lal-hero__vial--left { animation: lal-sway-l 8s ease-in-out -2s infinite; } .lal-hero__vial--right { animation: lal-sway-r 9s ease-in-out -4s infinite; } @keyframes lal-float-lg { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -22px; rotate: 1.2deg; } } @keyframes lal-sway-l { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -6px -16px; rotate: -3deg; } } @keyframes lal-sway-r { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 6px -16px; rotate: 3deg; } } @media (max-width: 640px) { .lal-hero__particles span:nth-child(n+13) { display: none; } /* fewer particles on phones */ } @media (prefers-reduced-motion: reduce) { .lal-hero__ring, .lal-hero__orbit, .lal-hero__particles span, .lal-hero__floor, .lal-hero__vial--center, .lal-hero__vial--left, .lal-hero__vial--right { animation: none !important; } .lal-hero__particles span { opacity: .5; } } /* ---------- 1.1.6 ---------- */ /* Mobile-only "Log In" menu item; desktop has the account icon in the header. */ @media (min-width: 1024px) { .lal-nav__item--mobile { display: none !important; } } /* Hero: the Buy button and points sit above the animated layer, so orbit dots and particles pass behind them. */ .lal-hero__actions { position: relative; z-index: 5; } .lal-hero__head { position: relative; z-index: 5; } /* Hero motion reads bigger on desktop, where the visual is large. */ @media (min-width: 1024px) { .lal-hero__vial--center { animation-name: lal-float-xl; } .lal-hero__vial--left { animation-name: lal-sway-l-xl; } .lal-hero__vial--right { animation-name: lal-sway-r-xl; } .lal-hero__particles span { width: calc(var(--s) * 1.5); height: calc(var(--s) * 1.5); animation-name: lal-drift-xl; } .lal-hero__orbit span { width: 14px; height: 14px; margin-left: -7px; top: -7px; } .lal-hero__orbit::after { width: 9px; height: 9px; margin-left: -4.5px; bottom: -4.5px; } .lal-hero__orbit { animation-duration: 20s; } } @keyframes lal-float-xl { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -36px; rotate: 1.8deg; } } @keyframes lal-sway-l-xl { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -10px -26px; rotate: -4deg; } } @keyframes lal-sway-r-xl { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 10px -26px; rotate: 4deg; } } @keyframes lal-drift-xl { 0% { opacity: 0; transform: translate3d(0, 30px, 0) scale(.6); } 20% { opacity: 1; } 70% { opacity: .6; } 100% { opacity: 0; transform: translate3d(calc(var(--dx) * 1.6), -190px, 0) scale(1.15); } } /* Mobile type scale: section titles clearly larger than the text under them. */ @media (max-width: 640px) { .lal-heading__title, .lal-about__title { font-size: clamp(2.2rem, 9.4vw, 2.6rem) !important; line-height: 1.08 !important; letter-spacing: -.03em; } .lal-heading__lede, .lal-about__copy p:not(.lal-eyebrow) { font-size: 1rem !important; line-height: 1.6 !important; } .lal-about__copy .lal-eyebrow, .lal-heading .lal-eyebrow { font-size: .78rem !important; line-height: 1.4 !important; letter-spacing: .14em; } .lal-compliance h2, .lal-compliance__title { font-size: 1.9rem !important; line-height: 1.1 !important; } } /* Footer links: full label on desktop, short label (where one is given) on phones. */ .lal-footer__short { display: none; } /* Mobile footer: Shop / Help / Legal as three content-width columns, centred as a group, every link on one line. Text (11–13px) and gaps scale with the screen; measured to fit 320–767px without clipping. */ @media (max-width: 767.98px) { .lal-footer__short { display: inline; } .lal-footer__long { display: none; } .lal-footer__grid { grid-template-columns: repeat(3, max-content) !important; justify-content: space-evenly; column-gap: clamp(8px, 2.8vw, 24px) !important; } .lal-footer__about { grid-column: 1 / -1 !important; contain: inline-size; } /* its text must not widen the link columns */ .lal-footer__list a { font-size: clamp(11px, 3.1vw, 13px); white-space: nowrap; overflow-wrap: normal; hyphens: none; } .lal-footer__col, .lal-footer__col .lal-footer__title, .lal-footer__col .lal-footer__list { text-align: center !important; } /* titles and links centred in each column */ .lal-footer__col .lal-footer__list { justify-items: center; } } /* Hero orbit sized by the visual's height (not width), so on wide phones it can't rise into the text above; text and buttons also stack above the whole animation layer. */ .lal-hero__orbit { width: auto; height: 90%; top: 50%; } .lal-hero__visual { z-index: 1; } .lal-hero__head, .lal-hero__actions { position: relative; z-index: 5; } /* Cart: coupon form lives in the totals (after shipping, before the total). */ .woocommerce-cart-form .coupon { display: none !important; } .woocommerce-cart-form td.actions { text-align: right; } .woocommerce-cart .cart_totals tr.lal-cart-coupon td { padding: 14px 0 !important; border-top: 1px solid var(--border); background: transparent !important; text-align: left !important; } .woocommerce-cart .cart_totals tr.lal-cart-coupon td::before { display: none !important; } /* no responsive-table label */ .lal-coupon__label { display: block; margin: 0 0 8px; font-family: var(--font-display); font-size: .85rem; font-weight: 600; color: var(--text); } .lal-coupon__row { display: flex; gap: 8px; } .lal-coupon__input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px !important; border-radius: 999px !important; font-size: .95rem !important; } .woocommerce .lal-coupon__btn { flex: none; min-height: 44px; padding: 10px 20px !important; border-radius: 999px !important; font-size: .9rem !important; } .woocommerce-cart table.shop_table.cart td.actions { justify-content: flex-end !important; padding: 4px 0 0 !important; background: transparent !important; border: 0 !important; } /* Cart totals on phones: show the row labels (WooCommerce's small-screen CSS hides them), one row per line: label left, value right; shipping stacks its options full width. */ @media (max-width: 768px) { .woocommerce-cart .cart_totals table.shop_table_responsive, .woocommerce-cart .cart_totals table.shop_table_responsive tbody { display: block !important; width: 100%; } .woocommerce-cart .cart_totals table.shop_table_responsive tr { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--border); } .woocommerce-cart .cart_totals table.shop_table_responsive tr th, .woocommerce-cart .cart_totals table.shop_table_responsive tr td { display: block !important; border-top: 0 !important; padding: 10px 0 !important; } .woocommerce-cart .cart_totals table.shop_table_responsive tr th { flex: none; white-space: nowrap; text-align: left; font-family: var(--font-display); font-weight: 600; color: var(--text-2); } .woocommerce-cart .cart_totals table.shop_table_responsive tr td { flex: 1; min-width: 0; text-align: right !important; } .woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 0; } .woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals th { padding-bottom: 8px !important; } .woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td { padding-top: 0 !important; text-align: left !important; } .woocommerce-cart .cart_totals table.shop_table_responsive tr.lal-cart-coupon td { flex: 1 1 100%; text-align: left !important; } .woocommerce-cart .cart_totals .order-total th { color: var(--text); } } /* Checkout: order-confirmation email card above "Billing details". */ .woocommerce-checkout .lal-checkout-email { margin: 0 0 18px; padding: clamp(18px, 3vw, 26px); background: linear-gradient(180deg, rgba(16, 41, 60, .78), rgba(1, 18, 33, .82)); border: 1px solid var(--border); border-radius: 22px; } .lal-checkout-email__title { margin: 0 0 12px; font-size: 1.15rem; color: var(--text); } .lal-checkout-email .form-row { margin: 0 !important; padding: 0 !important; } .lal-checkout-email__hint { margin: 10px 0 0; font-size: .82rem; color: var(--text-muted); }