/* ============================================================================ legallywearable.com — storefront theme styles Two palettes: • Americana (default, light mode) • Midnight (dark mode) Default follows prefers-color-scheme. data-theme="americana" or data-theme="midnight" on forces a palette and overrides the system. ============================================================================ */ /* -------------------- Palette: Americana (default) -------------------------- */ :root { --bg: #F2EAD3; --bg-deep: #E9DEC0; --paper: #FBF6E8; --ink: #0E1730; --ink-soft: #1A2547; --ink-mute: rgba(14, 23, 48, 0.62); --line: rgba(14, 23, 48, 0.12); --line-soft: rgba(14, 23, 48, 0.07); --accent: #B83C2A; --accent-deep:#8C2C1F; --gold: #C99B3C; --ok: #2E7D5B; --logo-cream-fixed: #FBF6E8; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px; --shadow-sm: 0 1px 0 rgba(14,23,48,.06), 0 6px 16px -10px rgba(14,23,48,.18); --shadow-md: 0 1px 0 rgba(14,23,48,.06), 0 20px 50px -28px rgba(14,23,48,.35); --shadow-lg: 0 24px 70px -30px rgba(14,23,48,.45); --display: 'Bebas Neue', 'Oswald', Impact, sans-serif; --body: 'Archivo', 'Inter', system-ui, sans-serif; --mono: 'IBM Plex Mono', 'JetBrains Mono', monospace; --gutter: clamp(16px, 3.5vw, 40px); --content: 1280px; color-scheme: light; } /* -------------------- Palette: Midnight (system dark) ----------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="americana"]) { --bg: #0B1226; --bg-deep: #060A1A; --paper: #131D3D; --ink: #F4ECD7; --ink-soft: #FFFFFF; --ink-mute: rgba(244, 236, 215, 0.7); --line: rgba(244, 236, 215, 0.14); --line-soft: rgba(244, 236, 215, 0.08); --accent: #E0623F; --accent-deep:#B83C2A; --gold: #E7C36E; color-scheme: dark; } } /* -------------------- Palette: Midnight (manual override) ------------------- */ :root[data-theme="midnight"] { --bg: #0B1226; --bg-deep: #060A1A; --paper: #131D3D; --ink: #F4ECD7; --ink-soft: #FFFFFF; --ink-mute: rgba(244, 236, 215, 0.7); --line: rgba(244, 236, 215, 0.14); --line-soft: rgba(244, 236, 215, 0.08); --accent: #E0623F; --accent-deep:#B83C2A; --gold: #E7C36E; color-scheme: dark; } /* Smooth palette transitions on toggle */ html.lw-theme-ready, html.lw-theme-ready body, html.lw-theme-ready .lw-header, html.lw-theme-ready .lw-card, html.lw-theme-ready .lw-feature-card, html.lw-theme-ready .lw-promo { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* -------------------- Base typography & body -------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: var(--body); color: var(--ink); background: radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 30%, color-mix(in oklab, var(--gold) 22%, transparent), transparent 60%), var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--ink); color: var(--bg); } .lw-homepage h1, .lw-homepage h2, .lw-homepage h3, .lw-homepage h4, .site-main h1.lw-h, .site-main h2.lw-h, .site-main h3.lw-h, .site-main h4.lw-h { font-family: var(--display); font-weight: 400; letter-spacing: 0.005em; line-height: 0.92; margin: 0; color: var(--ink); } .lw-homepage h1 { font-size: clamp(56px, 8vw, 128px); } .lw-homepage h2 { font-size: clamp(40px, 5.4vw, 80px); } .lw-homepage h3 { font-size: clamp(22px, 2vw, 32px); } .lw-homepage h4 { font-size: 17px; font-family: var(--body); font-weight: 700; line-height: 1.2; } .lw-homepage p { line-height: 1.55; } .lw-shell { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin: 0 auto; } .lw-kicker { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600; color: var(--ink-mute); display: inline-block; margin: 0 0 0.5rem; } /* -------------------- Buttons ---------------------------------------------- */ .lw-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; text-decoration: none; min-height: 48px; } .lw-button:hover { transform: translateY(-1px); } .lw-button:active { transform: translateY(0); } .lw-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .lw-button--primary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #payment #place_order, .single-product .summary .single_add_to_cart_button, .single-product .summary .lw-buy-now-button { background: var(--accent); color: var(--logo-cream-fixed); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px -14px color-mix(in oklab, var(--accent) 70%, transparent); border: 0; } .lw-button--primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #payment #place_order:hover, .single-product .summary .single_add_to_cart_button:hover, .single-product .summary .lw-buy-now-button:hover { background: var(--accent-deep); } .lw-button--ghost, .woocommerce a.button, .woocommerce button.button { background: transparent; color: var(--ink); border: 1px solid var(--line); } .lw-button--ghost:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); } .lw-button--ink { background: var(--ink); color: var(--bg); } /* -------------------- Promo / marquee --------------------------------------- */ .lw-promo { position: relative; background: var(--ink); color: var(--bg); border-bottom: 1px solid rgba(255,255,255,.06); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; } .lw-promo__inner { max-width: var(--content); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; text-align: center; } .lw-promo__star { color: var(--gold); font-size: 14px; } .lw-promo__text { font-weight: 600; } .lw-promo__cta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--logo-cream-fixed); text-decoration: none; font-weight: 700; letter-spacing: 0.1em; transition: background .2s ease, transform .15s ease; } .lw-promo__cta:hover { background: var(--accent-deep); transform: translateY(-1px); } /* -------------------- Stripes Logo ----------------------------------------- */ /* Renders as inline-flex; works as Kadence custom logo replacement and in hero / footer. Adapts to current palette via currentColor on the mark. */ .lw-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); --logo-h: 36px; text-decoration: none; line-height: 1; } .lw-logo--sm { --logo-h: 28px; gap: 8px; } .lw-logo--md { --logo-h: 36px; gap: 10px; } .lw-logo--lg { --logo-h: 56px; gap: 14px; } .lw-logo--xl { --logo-h: 88px; gap: 20px; } .lw-logo--cream { color: var(--bg); } .lw-logo__mark { display: inline-flex; flex-direction: column; gap: 2px; padding: calc(var(--logo-h) * 0.18) calc(var(--logo-h) * 0.20); border-radius: calc(var(--logo-h) * 0.16); background: currentColor; height: var(--logo-h); box-sizing: border-box; justify-content: center; } .lw-logo__stripe { width: calc(var(--logo-h) * 0.62); height: calc(var(--logo-h) * 0.08); border-radius: 1px; background: var(--bg); } .lw-logo--cream .lw-logo__stripe { background: var(--ink); } .lw-logo__stripe:nth-child(2) { background: var(--accent); } .lw-logo__stripe:nth-child(3) { background: var(--gold); } .lw-logo__type { display: inline-flex; flex-direction: column; line-height: 0.94; color: currentColor; } .lw-logo__type strong { font-family: var(--display); font-weight: 400; font-size: calc(var(--logo-h) * 0.52); letter-spacing: 0.02em; line-height: 1; } .lw-logo__type em { font-style: normal; font-family: var(--mono); font-size: calc(var(--logo-h) * 0.24); letter-spacing: 0.32em; margin-top: calc(var(--logo-h) * 0.06); opacity: 0.74; } /* Replace Kadence's site-branding logo wrapper styling */ .site-branding, .site-header-main-section-left .header-logo, .site-header .header-logo { display: inline-flex; align-items: center; } .site-branding .custom-logo-link, .site-branding a.custom-logo-link, .site-header-main-content-logo .custom-logo-link, .site-branding .site-title a, .site-header .header-logo a { display: inline-flex; align-items: center; color: var(--ink) !important; text-decoration: none; } .site-branding img.custom-logo, .site-header img.custom-logo { display: none; } .site-branding .custom-logo-link .lw-logo, .site-header .header-logo .lw-logo { color: var(--ink); } /* Hide default text branding (site title / tagline) until JS injects the stripes logo, then keep them hidden once the logo is in place. */ .site-branding .site-title, .site-branding .site-description, .site-header .site-title, .site-header .site-description { font-size: 0; line-height: 0; } .site-branding .site-title a, .site-header .site-title a { font-size: 0; } html.lw-logo-injected .site-branding .site-title, html.lw-logo-injected .site-branding .site-description { display: none; } /* -------------------- Theme Toggle (in header) ------------------------------ */ .lw-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 999px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease; position: relative; } .lw-theme-toggle:hover { background: var(--bg-deep); transform: translateY(-1px); } .lw-theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .lw-theme-toggle svg { width: 20px; height: 20px; display: block; } .lw-theme-toggle .lw-theme-toggle__icon { display: none; } .lw-theme-toggle[data-mode="auto"] .lw-theme-toggle__icon--auto { display: block; } .lw-theme-toggle[data-mode="americana"] .lw-theme-toggle__icon--americana { display: block; } .lw-theme-toggle[data-mode="midnight"] .lw-theme-toggle__icon--midnight { display: block; } .lw-theme-toggle[data-mode="midnight"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .lw-theme-toggle[data-mode="americana"] { background: var(--accent); color: var(--logo-cream-fixed); border-color: var(--accent); } /* Inline-in-Kadence-menu placement */ .menu-item.lw-theme-toggle-item { display: inline-flex; align-items: center; margin-inline-start: 8px; } .menu-item.lw-theme-toggle-item > a, .menu-item.lw-theme-toggle-item > a:hover { padding: 0; background: transparent; border: 0; } /* Fallback floating toggle when not injected into menu */ .lw-theme-toggle--floating { position: fixed; top: 14px; right: 14px; z-index: 70; box-shadow: var(--shadow-sm); } /* -------------------- Header (custom slim line) ----------------------------- */ /* Soften Kadence default header to match palette */ .site-header, .site-header-wrap, .site-header-row-container-inner { background: color-mix(in oklab, var(--bg) 82%, transparent) !important; color: var(--ink) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line-soft); } .site-header *, .site-header .header-navigation a, .site-header .site-branding .site-title a { color: var(--ink); } .site-header .header-navigation a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; } .site-header .header-navigation .menu > .menu-item > a::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .site-header .header-navigation .menu > .menu-item > a { position: relative; } .site-header .header-navigation .menu > .menu-item > a:hover::after { transform: scaleX(1); } .site-header .header-cart-wrap .header-cart-total, .site-header .header-cart-wrap .header-cart-button { background: var(--ink); color: var(--bg); border-radius: 999px; } /* -------------------- Hero -------------------------------------------------- */ .lw-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(48px, 6vw, 80px); } .lw-hero__bg { position: absolute; inset: 0; pointer-events: none; opacity: .55; } .lw-hero__stripe { position: absolute; height: 120%; } .lw-hero__stripe--1 { left: -8%; top: -10%; width: 24%; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 22%, transparent), transparent); transform: rotate(-8deg); } .lw-hero__stripe--2 { left: 22%; top: -10%; width: 24%; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--gold) 28%, transparent), transparent); transform: rotate(-8deg); } .lw-hero__stripe--3 { left: 52%; top: -10%; width: 24%; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--ink) 14%, transparent), transparent); transform: rotate(-8deg); } .lw-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.65fr); gap: clamp(24px, 4vw, 56px); align-items: end; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; } .lw-hero__content { background: transparent; border: 0; box-shadow: none; padding: 0; } .lw-hero__content h1 { display: grid; font-family: var(--display); font-weight: 400; font-size: clamp(64px, 11vw, 168px); line-height: 0.92; letter-spacing: -0.005em; margin: 14px 0 0; color: var(--ink); text-wrap: balance; } .lw-hero__content h1 .lw-accent { color: var(--accent); font-style: italic; font-family: var(--display); } .lw-hero__content .lw-lead { max-width: 52ch; margin: 24px 0 28px; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-soft); } .lw-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .lw-hero__pills { list-style: none; padding: 0; margin: 0; display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .lw-hero__pills li { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; border: 0; } .lw-hero__pills li::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); } .lw-hero__feature-card { align-self: end; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); overflow: hidden; color: var(--ink); padding: 0; } .lw-hero__feature-card .lw-feature-card__media { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(180deg, var(--bg-deep), var(--paper)); display: grid; place-items: center; padding: 24px; } .lw-hero__feature-card .lw-feature-card__tag { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--bg); } .lw-hero__feature-card .lw-feature-card__art { width: 80%; aspect-ratio: 5 / 6; display: grid; place-items: center; color: var(--ink); font-family: var(--display); text-align: center; gap: 0; } .lw-hero__feature-card .lw-feature-card__art-line { font-size: clamp(40px, 6vw, 64px); line-height: 0.86; } .lw-hero__feature-card .lw-feature-card__art-line--accent { color: var(--accent); } .lw-hero__feature-card .lw-feature-card__meta { padding: 16px 20px 18px; display: flex; justify-content: space-between; align-items: end; gap: 16px; border-top: 1px solid var(--line-soft); } .lw-hero__feature-card .lw-feature-card__price { font-family: var(--display); font-size: 36px; color: var(--accent); } /* -------------------- Trust strip ------------------------------------------ */ /* Intentionally always dark — hardcoded so it doesn't invert in Midnight mode */ .lw-trust-strip { background: #0E1730; color: #F2EAD3; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); } .lw-trust-strip__items { max-width: var(--content); margin: 0 auto; padding: 28px var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; background: transparent; } .lw-trust-item { display: flex; align-items: center !important; gap: 16px; } .lw-trust-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 999px; background: rgba(255,255,255,.08); color: #F2EAD3; flex-shrink: 0; align-self: center; line-height: 0; font-size: 0; } .lw-trust-icon svg { display: block; } .lw-trust-item div { display: flex; flex-direction: column; gap: 3px; } .lw-trust-item strong { font-family: var(--body); font-weight: 700; font-size: 14px; color: #F2EAD3; display: block; } .lw-trust-item div span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,.6); text-transform: uppercase; display: block; } /* -------------------- Home collections / tabs / scroller -------------------- */ .lw-home-collections { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); } .lw-section-heading { max-width: var(--content); margin: 0 auto 24px; padding: 0 var(--gutter); display: grid; gap: 6px; } .lw-section-heading h2 { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: clamp(40px, 5.4vw, 80px); line-height: 0.92; max-width: 18ch; } .lw-section-heading p { color: var(--ink-soft); font-size: 15px; max-width: 60ch; margin: 0; } .lw-tablist { max-width: var(--content); margin: 0 auto 22px; padding: 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); width: fit-content; box-shadow: var(--shadow-sm); display: flex; flex-wrap: wrap; gap: 8px; } .lw-tab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: transparent; color: var(--ink); border: 0; cursor: pointer; font-weight: 700; font-size: 14px; font-family: var(--body); transition: background .18s ease, color .18s ease; } .lw-tab:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); } .lw-tab.is-active { background: var(--ink); color: var(--bg); } .lw-panels { position: relative; } .lw-panel { max-width: var(--content); margin: 0 auto; padding: 0; display: none; background: transparent; border: 0; box-shadow: none; } .lw-panel .lw-product-scroller { padding-left: var(--gutter); padding-right: var(--gutter); } .lw-panel.is-active { display: block; } .lw-panel__header { display: flex; justify-content: space-between; gap: 24px; align-items: end; } .lw-panel__header h3 { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: clamp(26px, 3vw, 40px); line-height: 0.95; margin: 6px 0 4px; } .lw-panel__header p:last-child { margin: 0; color: var(--ink-soft); max-width: 60ch; font-size: 15px; } .lw-scroller-shell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; } .lw-scroller-control { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease; box-shadow: none; } .lw-scroller-control:hover { background: var(--bg-deep); transform: translateY(-1px); } .lw-product-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 26vw, 320px); gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--ink-mute) transparent; padding: 8px 4px 24px; } .lw-product-scroller::-webkit-scrollbar { height: 6px; } .lw-product-scroller::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 999px; } /* -------------------- Product cards ----------------------------------------- */ .lw-product-card { scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .lw-product-card:hover, .lw-product-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--ink) 22%, transparent); } .lw-product-card__media { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(180deg, var(--bg-deep), var(--paper)); display: grid; place-items: center; overflow: hidden; } .lw-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .lw-product-card:hover .lw-product-card__media img { transform: scale(1.04); } .lw-product-card__body { padding: 14px 16px 16px; display: grid; gap: 12px; } .lw-product-card__badge { display: inline-flex; width: fit-content; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--logo-cream-fixed); text-transform: uppercase; } .lw-product-card__title { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 0.95; margin: 0; max-width: 18ch; color: var(--ink); } .lw-product-card__title a { color: inherit; } .lw-product-card__price { font-family: var(--display); font-size: 22px; color: var(--accent); white-space: nowrap; margin: 0; } .lw-product-card__price del { color: var(--ink-mute); margin-right: 6px; font-size: 16px; } .lw-product-card__meta { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); line-height: 1.5; } .lw-product-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lw-product-card__actions .lw-button { padding: 10px 14px; min-height: 42px; font-size: 13px; } .lw-empty-state { padding: 32px 28px; border-radius: var(--r-lg); border: 1px dashed var(--line); color: var(--ink-mute); background: transparent; text-align: center; max-width: 720px; margin: 0 auto; } .lw-empty-state h4 { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: 28px; margin: 0 0 8px; } .lw-empty-state p { margin: 0; color: var(--ink-soft); line-height: 1.55; } /* -------------------- Flow band / drops ------------------------------------- */ .lw-flow-band { background: var(--ink); color: var(--bg); border-top: 1px solid var(--line-soft); } .lw-flow-band__grid { max-width: var(--content); margin: 0 auto; padding: clamp(64px, 7vw, 112px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--bg); } .lw-flow-band__grid .lw-kicker { color: rgba(255,255,255,.7); } .lw-flow-band__grid h2 { color: var(--bg); font-family: var(--display); font-weight: 400; font-size: clamp(40px, 5.4vw, 72px); max-width: 16ch; line-height: 0.94; margin: 0; } .lw-flow-band__grid h2 strong { color: var(--gold); font-weight: 400; } .lw-flow-band__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 56ch; } .lw-flow-band__steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--r-md); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--bg); font-family: var(--body); font-weight: 500; font-size: 15px; line-height: 1.45; } .lw-flow-band__steps li::before { counter-increment: lw-step; content: counter(lw-step, decimal-leading-zero); font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--gold); min-width: 32px; } .lw-flow-band__steps { counter-reset: lw-step; } /* -------------------- Marquee ribbon ---------------------------------------- */ .lw-marquee { background: var(--ink); color: var(--bg); overflow: hidden; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); } .lw-marquee__track { display: flex; gap: 28px; white-space: nowrap; padding: 9px 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; animation: lw-marquee 42s linear infinite; width: max-content; } .lw-marquee__track > span { display: inline-flex; align-items: center; gap: 28px; } .lw-marquee__dot { color: var(--gold); } @keyframes lw-marquee { to { transform: translateX(-33.3333%); } } /* -------------------- WooCommerce single/cart polish ------------------------ */ .single-product .product .summary, .woocommerce-checkout #customer_details, .woocommerce-checkout .woocommerce-checkout-review-order, .woocommerce-cart .cart-collaterals .cart_totals { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); background: var(--paper); color: var(--ink); } .single-product .product .summary .price, .woocommerce-Price-amount { font-family: var(--display); font-weight: 400; color: var(--accent); } .woocommerce .quantity .qty, .woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border-radius: 12px; border: 1px solid var(--line); min-height: 48px; padding: 0.75rem 0.9rem; background: var(--bg); color: var(--ink); } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); padding: 1rem 1.25rem 1rem 3.25rem; } /* ---- WooCommerce dark-mode readability ------------------------------------ */ /* Kadence wraps single-product and archive content in .content-bg / .entry- */ /* content-wrap with a hardcoded white background. Force it transparent so our */ /* body palette shows through. */ body.single-product, body.archive.woocommerce, body.woocommerce-page, body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account, body.woocommerce-shop { background: radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 30%, color-mix(in oklab, var(--gold) 22%, transparent), transparent 60%), var(--bg) !important; color: var(--ink) !important; } .single-product .content-bg, .single-product .entry-content-wrap, .single-product .site-content, .single-product .content-area, .single-product .site, .single-product main#primary, .single-product .wp-site-blocks, .archive.woocommerce .content-bg, .archive.woocommerce .entry-content-wrap, .archive.woocommerce .site-content, .archive.woocommerce .content-area, .woocommerce-page .content-bg, .woocommerce-page .entry-content-wrap, .woocommerce-page .site-content, .woocommerce-page .content-area, .woocommerce-page .site, .woocommerce-cart .content-bg, .woocommerce-cart .site-content, .woocommerce-cart .content-area, .woocommerce-checkout .content-bg, .woocommerce-checkout .site-content, .woocommerce-checkout .content-area { background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: var(--ink); } /* Kadence page hero / title banner on WC pages — kill the white bg and */ /* recolor the title to ink so "Cart" / "Checkout" / "My Account" read. */ .woocommerce-page .entry-hero, .woocommerce-page .entry-hero-container-inner, .woocommerce-page .kadence-hero-section, .woocommerce-page .page-hero-section, .woocommerce-cart .entry-hero, .woocommerce-cart .entry-hero-container-inner, .woocommerce-checkout .entry-hero, .woocommerce-checkout .entry-hero-container-inner, .woocommerce-account .entry-hero, .woocommerce-account .entry-hero-container-inner, .single-product .entry-hero, .single-product .entry-hero-container-inner { background: transparent !important; background-color: transparent !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); } .woocommerce-page .entry-hero .entry-header h1, .woocommerce-page .entry-hero .entry-title, .woocommerce-page .entry-hero h1, .woocommerce-cart .entry-hero h1, .woocommerce-checkout .entry-hero h1, .woocommerce-account .entry-hero h1, .single-product .entry-hero h1 { color: var(--ink) !important; } /* Product description body copy + WC tabs panel */ .woocommerce-tabs .panel, .woocommerce-Tabs-panel, .woocommerce div.product .woocommerce-tabs .panel { background: transparent; color: var(--ink); } .woocommerce-tabs .panel p, .woocommerce-tabs .panel li, .woocommerce-tabs .panel ul, .woocommerce-tabs .panel ol, .woocommerce-tabs .panel h1, .woocommerce-tabs .panel h2, .woocommerce-tabs .panel h3, .woocommerce-tabs .panel h4, .woocommerce-Tabs-panel p, .woocommerce-Tabs-panel li, .woocommerce-Tabs-panel ul, .woocommerce-Tabs-panel ol, .woocommerce-Tabs-panel h1, .woocommerce-Tabs-panel h2, .woocommerce-Tabs-panel h3, .woocommerce-Tabs-panel h4, .woocommerce-Tabs-panel table, .woocommerce-Tabs-panel th, .woocommerce-Tabs-panel td { color: var(--ink); } .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom-color: var(--line); } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--paper); border-color: var(--line) !important; color: var(--ink); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--bg); border-bottom-color: var(--bg) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--ink); } /* Related products heading + card text */ .woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product a, .woocommerce-page ul.products li.product a, .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { color: var(--ink); } .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { color: var(--accent); } /* Kadence and WooCommerce set hardcoded text colors on product titles, form */ /* labels, breadcrumbs, etc. Force them to inherit our palette ink so dark mode */ /* stays readable on product, cart, and checkout pages. */ .woocommerce .product_title, .woocommerce-page .product_title, .single-product .product_title, .woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3, .woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a, .woocommerce-page .woocommerce-breadcrumb a, .woocommerce label, .woocommerce-page label, .woocommerce form .form-row label, .woocommerce .product_meta, .woocommerce .product_meta a, .woocommerce .product_meta span, .woocommerce-checkout h3, .woocommerce-checkout-review-order th, .woocommerce-checkout-review-order td, .woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td, .woocommerce-cart table.shop_table a, .woocommerce-page .cart_totals h2, .woocommerce-page .cart_totals th, .woocommerce-page .cart_totals td, .woocommerce .variations th, .woocommerce .variations td, .woocommerce .variations label { color: var(--ink); } /* Variation