/* * Weed Delivery Langley – main stylesheet * Design goals: large readable type (18px base), big tap targets (52px+), * generous contrast, calm cream + forest-green palette, works 320px → 4K. * ------------------------------------------------------------------------ */ /* 1. Tokens ------------------------------------------------------------- */ :root { --wdl-primary: #3B4FE0; --wdl-primary-600: #2F3FC4; --wdl-primary-700: #2632A3; --wdl-dark: #0E1A2F; --wdl-accent: #FF6B4A; --wdl-accent-700: #D94F31; --wdl-bg: #F4F5F9; --wdl-white: #FFFFFF; --wdl-green-100: #E7EBF7; --wdl-green-200: #C9D2EE; --wdl-cream-200: #ECEEF5; --wdl-ink: #14161D; --wdl-muted: #5A5F6E; --wdl-line: #DDE0EA; --wdl-danger: #B3261E; --wdl-danger-bg: #FBEAE8; --wdl-success-bg: #E7EBF7; --wdl-warn-bg: #FFF1EC; --wdl-indica: #6B4FBB; --wdl-sativa: #D97A2B; --wdl-hybrid: #2C8C6D; --wdl-radius: 14px; --wdl-radius-sm: 8px; --wdl-shadow: 0 10px 30px rgba(14, 26, 47, 0.10); --wdl-shadow-sm: 0 3px 12px rgba(14, 26, 47, 0.08); --wdl-base: 18px; --wdl-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wdl-font-head: "Space Grotesk", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wdl-container: 1240px; --wdl-narrow: 820px; --wdl-tap: 52px; --wdl-header-h: 72px; } html.wdl-text-lg { --wdl-base: 21px; } html.wdl-text-xl { --wdl-base: 24px; } /* 2. Reset & base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--wdl-font-body); font-size: var(--wdl-base); line-height: 1.6; color: var(--wdl-ink); background: var(--wdl-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.wdl-nav-open { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; } img { border-radius: 0; } a { color: var(--wdl-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--wdl-primary-700); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--wdl-accent); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4, h5, h6 { font-family: var(--wdl-font-head); color: var(--wdl-dark); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.5em; font-weight: 700; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); } h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); } h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); } h4 { font-size: 1.1rem; } p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1em; } ul, ol { padding-left: 1.3em; } li { margin-bottom: 0.35em; } strong { font-weight: 700; } small { font-size: 0.85em; } hr { border: 0; border-top: 1px solid var(--wdl-line); margin: 2rem 0; } blockquote { border-left: 4px solid var(--wdl-accent); padding: 0.5rem 1.2rem; background: var(--wdl-white); border-radius: 0 var(--wdl-radius-sm) var(--wdl-radius-sm) 0; color: var(--wdl-muted); } code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--wdl-cream-200); padding: 0.1em 0.4em; border-radius: 6px; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--wdl-line); vertical-align: top; } th { font-family: var(--wdl-font-head); font-weight: 600; color: var(--wdl-dark); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { background: var(--wdl-accent); color: var(--wdl-ink); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 10000; width: auto; height: auto; padding: 0.8rem 1.2rem; clip: auto; clip-path: none; background: var(--wdl-dark); color: #fff; border-radius: var(--wdl-radius-sm); font-weight: 600; } /* 3. Layout utilities ---------------------------------------------------- */ .wdl-container { width: 100%; max-width: var(--wdl-container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } .wdl-container--narrow { max-width: var(--wdl-narrow); } .wdl-container--product { max-width: 1120px; } .wdl-main { min-height: 50vh; padding-block: 2rem 4rem; } .wdl-main--full { padding-top: 0; } .wdl-section { padding-block: clamp(2.5rem, 6vw, 5rem); } .wdl-section--alt { background: var(--wdl-green-100); } .wdl-section--dark, .wdl-dark { background: var(--wdl-dark); color: #EDF0F7; } .wdl-section--dark h2, .wdl-section--dark h3, .wdl-dark h2, .wdl-dark h3 { color: #fff; } .wdl-page--full > .wdl-section + .wdl-section:not(.wdl-section--alt) { padding-top: 0; } .wdl-section__head { max-width: 760px; margin: 0 auto 2.2rem; } .wdl-section__head--center { text-align: center; } .wdl-section__head--left { margin-left: 0; } .wdl-section__head h2 { margin-bottom: 0.4em; } .wdl-section__intro { font-size: 1.05em; color: var(--wdl-muted); margin: 0; } .wdl-eyebrow { display: inline-flex; align-items: center; gap: 0.4em; margin: 0 0 0.6rem; font-family: var(--wdl-font-head); font-weight: 600; font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wdl-primary); } .wdl-eyebrow--light { color: var(--wdl-accent); } .wdl-lead { font-size: 1.15em; color: var(--wdl-muted); line-height: 1.55; } .wdl-center { text-align: center; } .wdl-grid-2, .wdl-grid-3 { display: grid; gap: clamp(1rem, 2.5vw, 2rem); } @media (min-width: 720px) { .wdl-grid-2 { grid-template-columns: repeat(2, 1fr); } .wdl-grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 720px) and (max-width: 979px) { .wdl-grid-3 { grid-template-columns: repeat(2, 1fr); } } .wdl-card { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--wdl-shadow-sm); } .wdl-card h2 { font-size: 1.45rem; } .wdl-card > :last-child { margin-bottom: 0; } .wdl-card__icon, .wdl-contact-card__icon, .wdl-usp__icon, .wdl-promise__icon, .wdl-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--wdl-green-100); color: var(--wdl-primary); margin-bottom: 0.9rem; } .wdl-icon { flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .wdl-note { background: var(--wdl-warn-bg); border-left: 4px solid var(--wdl-accent); padding: 0.75rem 1rem; border-radius: 0 var(--wdl-radius-sm) var(--wdl-radius-sm) 0; font-size: 0.95em; } .wdl-link { font-weight: 600; } .wdl-page-header { margin-bottom: 1.75rem; } .wdl-page-header h1 { margin-bottom: 0.3em; } .wdl-page-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 3vw, 2rem); } .wdl-page-hero .wdl-lead, .wdl-area-hero .wdl-lead { max-width: 760px; } .wdl-full-width { width: 100vw; margin-left: calc(50% - 50vw); } /* Lists */ .wdl-list-check, .wdl-list-num, .wdl-tags, .wdl-link-grid, .wdl-chips, .wdl-facts, .wdl-usps__grid, .wdl-cats__grid, .wdl-steps__list, .wdl-areas__grid, .wdl-promise__grid, .wdl-grades, .wdl-deal-grid, .wdl-footer__menu, .wdl-footer__facts, .wdl-footer__social, .wdl-footer__legal-menu, .wdl-nav__list, .wdl-mobile-nav__list, .wdl-announce__list, .wdl-breadcrumbs ol, .wdl-pills ul, .wdl-trust-box ul, .wdl-post-grid { list-style: none; margin: 0; padding: 0; } .wdl-list-check li { position: relative; padding-left: 0; display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.6rem; } .wdl-list-check .wdl-icon { color: var(--wdl-primary); margin-top: 0.3em; } .wdl-list-num { counter-reset: wds; } .wdl-list-num li { counter-increment: wds; position: relative; padding-left: 2.6rem; min-height: 2rem; margin-bottom: 0.8rem; } .wdl-list-num li::before { content: counter(wds); position: absolute; left: 0; top: 0.05em; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--wdl-primary); color: #fff; font-family: var(--wdl-font-head); font-weight: 700; font-size: 0.9em; display: grid; place-items: center; } .wdl-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .wdl-tags li { margin: 0; background: var(--wdl-green-100); color: var(--wdl-dark); padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.9em; font-weight: 500; } .wdl-tags-inline { color: var(--wdl-muted); font-size: 0.95em; } .wdl-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.25rem 1rem; } .wdl-link-grid li { margin: 0; } .wdl-link-grid a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0; text-decoration: none; font-weight: 500; min-height: 44px; } .wdl-link-grid a:hover { text-decoration: underline; } .wdl-table { background: var(--wdl-white); border-radius: var(--wdl-radius); overflow: hidden; box-shadow: var(--wdl-shadow-sm); border: 1px solid var(--wdl-line); } .wdl-table th { background: var(--wdl-green-100); } .wdl-table tr:last-child td { border-bottom: 0; } .wdl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 4. Buttons, pills, badges --------------------------------------------- */ .wdl-btn, .button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-widget-layered-nav-dropdown__submit, .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--wdl-tap); padding: 0.75rem 1.5rem; border-radius: 999px; font-family: var(--wdl-font-head); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; border: 2px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent; } .wdl-btn--primary, .button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { background: var(--wdl-primary); color: #fff; box-shadow: 0 6px 16px rgba(47, 63, 196, 0.28); } .wdl-btn--primary:hover, .button:hover, .wp-block-button__link:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover { background: var(--wdl-primary-700); color: #fff; transform: translateY(-1px); } .wdl-btn--outline { background: transparent; color: var(--wdl-dark); border-color: var(--wdl-dark); } .wdl-btn--outline:hover { background: var(--wdl-dark); color: #fff; } .wdl-btn--ghost { background: transparent; color: var(--wdl-dark); text-decoration: underline; text-underline-offset: 4px; } .wdl-btn--ghost:hover { color: var(--wdl-primary); } .wdl-btn--light { background: #fff; color: var(--wdl-dark); } .wdl-btn--light:hover { background: var(--wdl-accent); color: var(--wdl-ink); } .wdl-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); } .wdl-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .wdl-btn--accent { background: var(--wdl-accent); color: var(--wdl-ink); } .wdl-btn--accent:hover { background: var(--wdl-accent-700); color: #fff; } .wdl-btn--lg { min-height: 60px; padding: 0.9rem 2rem; font-size: 1.1rem; } .wdl-btn--sm { min-height: 42px; padding: 0.4rem 1rem; font-size: 0.92rem; } .wdl-btn--block { width: 100%; } .wdl-btn[disabled], .button[disabled], .button.disabled, .woocommerce a.button.disabled, .woocommerce button.button.disabled, .woocommerce button.button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .woocommerce a.button.wc-forward.checkout-button, .woocommerce #payment #place_order, .woocommerce-page #payment #place_order, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; min-height: 62px; font-size: 1.15rem; background: var(--wdl-primary); } .woocommerce #payment #place_order:hover { background: var(--wdl-primary-700); } .wdl-pill, .wdl-pill-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1rem; min-height: 44px; border-radius: 999px; background: var(--wdl-white); border: 1.5px solid var(--wdl-line); color: var(--wdl-dark); font-weight: 600; font-size: 0.95em; text-decoration: none; white-space: nowrap; } .wdl-pill { background: var(--wdl-accent); border-color: var(--wdl-accent); color: var(--wdl-ink); min-height: 32px; padding: 0.2rem 0.7rem; font-size: 0.8em; } .wdl-pill-link:hover { border-color: var(--wdl-primary); color: var(--wdl-primary); } .wdl-pill-link.is-active { background: var(--wdl-dark); border-color: var(--wdl-dark); color: #fff; } .wdl-pill-link--back { background: transparent; border-style: dashed; } .wdl-pill-link__count { font-weight: 500; color: var(--wdl-muted); font-size: 0.85em; } .wdl-pill-link.is-active .wdl-pill-link__count { color: rgba(255, 255, 255, 0.75); } .wdl-pills { margin: 0 0 1.5rem; } .wdl-pills ul { display: flex; gap: 0.5rem; flex-wrap: wrap; } .wdl-pills li { margin: 0; } @media (max-width: 719px) { .wdl-pills { margin-inline: calc(-1 * clamp(16px, 4vw, 32px)); padding-inline: clamp(16px, 4vw, 32px); overflow-x: auto; scrollbar-width: none; } .wdl-pills::-webkit-scrollbar { display: none; } .wdl-pills ul { flex-wrap: nowrap; padding-bottom: 0.25rem; } } .wdl-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; } .wdl-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; background: var(--wdl-cream-200); color: var(--wdl-dark); line-height: 1.5; } .wdl-badge--sale { background: var(--wdl-danger); color: #fff; } .wdl-badge--indica { background: var(--wdl-indica); color: #fff; } .wdl-badge--sativa { background: var(--wdl-sativa); color: #fff; } .wdl-badge--hybrid { background: var(--wdl-hybrid); color: #fff; } .wdl-badge--indica-dominant { background: #8E77CF; color: #fff; } .wdl-badge--sativa-dominant { background: #E8975A; color: #fff; } .wdl-badge--cbd { background: #3E7CB1; color: #fff; } .wdl-badge--grade { background: var(--wdl-dark); color: #fff; } .wdl-badge--hot { background: var(--wdl-accent); color: var(--wdl-ink); } .wdl-badges--single { margin-bottom: 0.75rem; } .wdl-from { font-size: 0.8em; color: var(--wdl-muted); font-weight: 500; } /* 5. Forms --------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container--default .select2-selection--single { width: 100%; min-height: var(--wdl-tap); padding: 0.7rem 1rem; border: 2px solid var(--wdl-line); border-radius: var(--wdl-radius-sm); background: var(--wdl-white); color: var(--wdl-ink); font-size: 1rem; line-height: 1.4; transition: border-color 0.15s ease; } input:focus, select:focus, textarea:focus, .woocommerce form .form-row input.input-text:focus { border-color: var(--wdl-primary); outline: none; box-shadow: 0 0 0 4px rgba(47, 63, 196, 0.15); } textarea { min-height: 150px; resize: vertical; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231C1C1A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.6rem; } label { font-weight: 600; display: inline-block; margin-bottom: 0.35rem; } input[type="checkbox"], input[type="radio"] { width: 1.4em; height: 1.4em; accent-color: var(--wdl-primary); margin-right: 0.5em; vertical-align: -0.2em; } .select2-container--default .select2-selection--single { display: flex; align-items: center; height: auto; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding-left: 0; color: var(--wdl-ink); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 10px; } .select2-dropdown { border: 2px solid var(--wdl-primary); border-radius: var(--wdl-radius-sm); font-size: 1rem; } .wdl-form { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--wdl-shadow-sm); } .wdl-form__row { display: grid; gap: 1rem; } @media (min-width: 640px) { .wdl-form__row { grid-template-columns: 1fr 1fr; } } .wdl-field { margin-bottom: 1.1rem; } .wdl-field label { display: block; } .wdl-field small, .wdl-field .description { display: block; color: var(--wdl-muted); font-size: 0.88em; margin-top: 0.3rem; } .wdl-field--check label { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 500; cursor: pointer; } .wdl-field--check input { margin-top: 0.25em; } .wdl-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; } .wdl-alert { padding: 1rem 1.25rem; border-radius: var(--wdl-radius-sm); margin-bottom: 1.5rem; border: 1px solid transparent; font-weight: 500; } .wdl-alert--success { background: var(--wdl-success-bg); border-color: var(--wdl-green-200); color: var(--wdl-dark); } .wdl-alert--error { background: var(--wdl-danger-bg); border-color: #F1B8B3; color: var(--wdl-danger); } .wdl-alert--info { background: var(--wdl-warn-bg); border-color: #F5D9A8; } .wdl-required { color: var(--wdl-danger); } /* 6. Announcement bar + header ------------------------------------------ */ .wdl-announce { background: var(--wdl-dark); color: #EDF0F7; font-size: 0.92rem; text-align: center; } .wdl-announce__list { position: relative; min-height: 40px; display: grid; align-items: center; } .wdl-announce__list li { margin: 0; padding: 0.55rem 0; grid-area: 1 / 1; transition: opacity 0.4s ease; } .wdl-announce__list li a { color: #fff; } .wdl-announce__list li strong { color: var(--wdl-accent); } .wdl-announce__item--extra { opacity: 0; pointer-events: none; } .wdl-announce__list li.is-visible { opacity: 1; pointer-events: auto; } .wdl-announce__list li.is-hidden { opacity: 0; pointer-events: none; } .wdl-header { position: sticky; top: 0; z-index: 900; background: rgba(244, 245, 249, 0.94); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--wdl-line); } .wdl-header.is-stuck { box-shadow: 0 6px 24px rgba(14, 26, 47, 0.08); } .wdl-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem 1.25rem; min-height: var(--wdl-header-h); } .wdl-brand { display: inline-flex; align-items: center; text-decoration: none; } .wdl-brand .wdl-logo-svg { height: 44px; width: auto; max-width: 100%; } .wdl-header__brand { min-width: 0; } @media (max-width: 639px) { .wdl-header__tools .wdl-tool:not(.wdl-text-size) { display: none; } /* Help & Account live in the bottom bar and menu on phones */ .wdl-brand .wdl-logo-svg { height: 38px; } .wdl-header__inner { gap: 0.5rem; } .wdl-tool, .wdl-cart-link, .wdl-menu-toggle { padding-inline: 0.45rem; } } .wdl-logo-img { max-height: 52px; width: auto; } .wdl-header__search { display: none; } .wdl-header__tools { display: flex; align-items: center; gap: 0.25rem; justify-self: end; } .wdl-tool, .wdl-cart-link, .wdl-menu-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-width: var(--wdl-tap); min-height: var(--wdl-tap); padding: 0.35rem 0.6rem; border: 0; background: transparent; color: var(--wdl-dark); border-radius: 12px; text-decoration: none; font-size: 0.72rem; font-weight: 600; line-height: 1; position: relative; } .wdl-tool:hover, .wdl-cart-link:hover, .wdl-menu-toggle:hover { background: var(--wdl-green-100); color: var(--wdl-primary); } .wdl-cart-link { background: var(--wdl-primary); color: #fff; padding-inline: 0.9rem; margin-left: 0.25rem; } .wdl-cart-link:hover { background: var(--wdl-primary-700); color: #fff; } .wdl-cart-count { position: absolute; top: 2px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--wdl-accent); color: var(--wdl-ink); font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--wdl-bg); } .wdl-menu-toggle { order: -1; } .wdl-nav { display: none; } .wdl-search { display: flex; align-items: stretch; width: 100%; background: var(--wdl-white); border: 2px solid var(--wdl-line); border-radius: 999px; overflow: hidden; transition: border-color 0.15s ease; } .wdl-search:focus-within { border-color: var(--wdl-primary); box-shadow: 0 0 0 4px rgba(47, 63, 196, 0.12); } .wdl-search input[type="search"] { border: 0; border-radius: 0; min-height: 48px; padding-left: 1.2rem; box-shadow: none !important; background: transparent; } .wdl-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .wdl-search button { border: 0; background: var(--wdl-primary); color: #fff; width: 56px; flex: none; display: grid; place-items: center; } .wdl-search button:hover { background: var(--wdl-primary-700); } @media (min-width: 900px) { .wdl-menu-toggle { display: none; } .wdl-header__inner { grid-template-columns: auto minmax(220px, 1fr) auto; gap: 2rem; } .wdl-header__search { display: block; max-width: 560px; justify-self: center; width: 100%; } .wdl-tool { flex-direction: row; gap: 0.45rem; font-size: 0.92rem; padding-inline: 0.8rem; } .wdl-cart-link { flex-direction: row; gap: 0.5rem; font-size: 0.95rem; padding-inline: 1.1rem; } .wdl-cart-count { position: static; border: 0; background: rgba(255, 255, 255, 0.22); color: #fff; order: 3; } .wdl-nav { display: block; border-top: 1px solid var(--wdl-line); } .wdl-nav > .wdl-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wdl-nav__list { display: flex; flex-wrap: wrap; gap: 0.1rem; } .wdl-nav__list li { margin: 0; position: relative; } .wdl-nav__list > li > a { display: inline-flex; align-items: center; min-height: 50px; padding: 0.4rem 0.9rem; color: var(--wdl-dark); font-weight: 600; text-decoration: none; border-radius: 10px; font-size: 0.98rem; } .wdl-nav__list > li > a:hover, .wdl-nav__list > li.current-menu-item > a, .wdl-nav__list > li.current-menu-ancestor > a, .wdl-nav__list > li.current_page_parent > a { background: var(--wdl-green-100); color: var(--wdl-primary); } .wdl-nav__list > li.wdl-nav__cta > a { background: var(--wdl-accent); color: var(--wdl-ink); } .wdl-nav__list .sub-menu { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius-sm); box-shadow: var(--wdl-shadow); padding: 0.5rem; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.15s ease; z-index: 50; } .wdl-nav__list li:hover > .sub-menu, .wdl-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .wdl-nav__list .sub-menu a { display: block; padding: 0.7rem 0.9rem; border-radius: 8px; color: var(--wdl-dark); text-decoration: none; font-weight: 500; } .wdl-nav__list .sub-menu a:hover { background: var(--wdl-green-100); color: var(--wdl-primary); } .wdl-nav__status { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; white-space: nowrap; color: var(--wdl-dark); } .wdl-nav__status small { color: var(--wdl-muted); font-weight: 500; } .wdl-nav__status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2FB36A; box-shadow: 0 0 0 4px rgba(47, 179, 106, 0.2); } .wdl-nav__status.is-closed::before { background: #C0392B; box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.15); } } @media (max-width: 899px) { .wdl-nav__status { display: none; } } /* Mobile drawer */ .wdl-overlay { position: fixed; inset: 0; background: rgba(14, 26, 47, 0.55); z-index: 990; backdrop-filter: blur(2px); } .wdl-overlay[hidden] { display: none; } .wdl-mobile-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 400px); background: var(--wdl-bg); z-index: 1000; overflow-y: auto; padding: 1rem 1.25rem 2rem; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); transform: translateX(-100%); transition: transform 0.25s ease; } .wdl-mobile-nav[hidden] { display: none; } .wdl-mobile-nav.is-open { transform: none; } .wdl-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .wdl-mobile-nav__head .wdl-logo-svg { height: 40px; width: auto; } .wdl-mobile-nav__close { border: 0; background: var(--wdl-white); border-radius: 12px; width: var(--wdl-tap); height: var(--wdl-tap); display: grid; place-items: center; color: var(--wdl-dark); } .wdl-mobile-nav__search { margin-bottom: 1rem; } .wdl-mobile-nav__list li { margin: 0; } .wdl-mobile-nav__list > li { border-bottom: 1px solid var(--wdl-line); } .wdl-mobile-nav__list a { display: block; padding: 0.9rem 0.25rem; color: var(--wdl-dark); font-weight: 600; font-size: 1.1rem; text-decoration: none; min-height: var(--wdl-tap); } .wdl-mobile-nav__list > li.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; } .wdl-mobile-nav__list > li.menu-item-has-children > a { flex: 1 1 auto; } .wdl-submenu-toggle { flex: 0 0 auto; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; min-width: 44px; min-height: 44px; color: var(--wdl-primary); cursor: pointer; border-radius: 10px; } .wdl-submenu-toggle:hover, .wdl-submenu-toggle:focus-visible { background: var(--wdl-green-100); } .wdl-mobile-nav__list > li.menu-item-has-children > .sub-menu { flex-basis: 100%; } .wdl-mobile-nav__list .sub-menu { list-style: none; margin: 0 0 0.5rem; padding: 0 0 0 1rem; } .wdl-mobile-nav__list .sub-menu a { font-weight: 500; font-size: 1rem; padding: 0.6rem 0.25rem; min-height: 44px; } .wdl-mobile-nav__foot { margin-top: 1.5rem; color: var(--wdl-muted); font-size: 0.95rem; } .wdl-mobile-nav__foot p { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; } .wdl-mobile-nav__foot a { display: inline-flex; align-items: center; gap: 0.4rem; } /* 7. Breadcrumbs ---------------------------------------------------------- */ .wdl-breadcrumbs { font-size: 0.9rem; padding: 0.8rem 0 0; color: var(--wdl-muted); } .wdl-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; } .wdl-breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; } .wdl-breadcrumbs li + li::before { content: "›"; color: var(--wdl-line); font-size: 1.2em; } .wdl-breadcrumbs a { color: var(--wdl-muted); text-decoration: none; padding: 0.25rem 0; display: inline-block; } .wdl-breadcrumbs a:hover { color: var(--wdl-primary); text-decoration: underline; } .wdl-breadcrumbs [aria-current] { color: var(--wdl-dark); font-weight: 600; } /* 8. Home sections -------------------------------------------------------- */ .wdl-hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 5vw, 4rem); background: radial-gradient(120% 80% at 100% 0%, var(--wdl-green-100) 0%, transparent 55%), var(--wdl-bg); } .wdl-hero__grid { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 900px) { .wdl-hero__grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; } } .wdl-hero h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem); font-weight: 800; margin-bottom: 0.5em; } .wdl-hero h1 em { font-style: normal; color: var(--wdl-primary); position: relative; } .wdl-hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.05em; height: 0.28em; background: rgba(255, 107, 74, 0.45); z-index: -1; border-radius: 4px; } .wdl-hero__sub { font-size: 1.2rem; color: var(--wdl-muted); max-width: 560px; margin-bottom: 1.6rem; } .wdl-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.6rem; } .wdl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin-bottom: 1.2rem; } .wdl-chips li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.92rem; font-weight: 600; color: var(--wdl-dark); } .wdl-chips .wdl-icon { color: var(--wdl-primary); } .wdl-hero__promo { position: relative; display: block; max-width: 560px; background: var(--wdl-warn-bg); border: 1px dashed var(--wdl-accent-700); padding: 0.7rem 1rem 0.7rem 2.7rem; border-radius: var(--wdl-radius-sm); font-size: 0.98rem; margin: 0; } .wdl-hero__promo .wdl-icon { position: absolute; left: 0.95rem; top: 0.95rem; color: var(--wdl-accent-700); } .wdl-hero__media { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto; width: 100%; } .wdl-hero__card { border-radius: 22px; overflow: hidden; box-shadow: var(--wdl-shadow); background: var(--wdl-white); border: 4px solid #fff; } .wdl-hero__card img { width: 100%; height: 100%; object-fit: cover; display: block; } .wdl-hero__card--main { grid-area: 1 / 1 / 6 / 6; } .wdl-hero__card--a { grid-area: 4 / 4 / 7 / 7; border-radius: 18px; } .wdl-hero__card--b { grid-area: 1 / 5 / 3 / 7; border-radius: 18px; } .wdl-hero__badge { position: absolute; left: -6px; bottom: 12%; display: inline-flex; align-items: center; gap: 0.6rem; background: var(--wdl-dark); color: #fff; padding: 0.7rem 1rem 0.7rem 0.8rem; border-radius: 14px; box-shadow: var(--wdl-shadow); font-size: 0.8rem; line-height: 1.2; } .wdl-hero__badge .wdl-icon { color: var(--wdl-accent); } .wdl-hero__badge span { display: flex; flex-direction: column; } .wdl-hero__badge strong { font-family: var(--wdl-font-head); font-size: 1.05rem; } .wdl-usps { padding-block: 0 clamp(2rem, 5vw, 3.5rem); } .wdl-usps__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 900px) { .wdl-usps__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } } .wdl-usp { margin: 0; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1.25rem; } .wdl-usp h3 { font-size: 1.05rem; margin-bottom: 0.3em; } .wdl-usp p { margin: 0; font-size: 0.92rem; color: var(--wdl-muted); } .wdl-usp__icon { width: 50px; height: 50px; margin-bottom: 0.7rem; } .wdl-cats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 720px) { .wdl-cats__grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } @media (min-width: 1100px) { .wdl-cats__grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } } .wdl-cat-tile { margin: 0; } .wdl-cat-tile a { display: flex; flex-direction: column; height: 100%; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); overflow: hidden; text-decoration: none; color: var(--wdl-dark); transition: transform 0.15s ease, box-shadow 0.15s ease; } .wdl-cat-tile a:hover { transform: translateY(-3px); box-shadow: var(--wdl-shadow); } .wdl-cat-tile__img { display: block; aspect-ratio: 1 / 1; background: var(--wdl-cream-200); overflow: hidden; } .wdl-cat-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .wdl-cat-tile a:hover img { transform: scale(1.04); } .wdl-cat-tile__body { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem 1rem; } .wdl-cat-tile__name { font-family: var(--wdl-font-head); font-weight: 700; font-size: 1.1rem; } .wdl-cat-tile__count { font-size: 0.85rem; color: var(--wdl-muted); } .wdl-cat-tile__cta { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--wdl-primary); font-weight: 600; font-size: 0.95rem; } .wdl-steps__list { display: grid; gap: 1rem; counter-reset: none; } @media (min-width: 720px) { .wdl-steps__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .wdl-steps__list { grid-template-columns: repeat(4, 1fr); } } .wdl-step { position: relative; margin: 0; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1.5rem 1.25rem 1.25rem; } .wdl-step__num { position: absolute; top: -14px; left: 1.1rem; width: 34px; height: 34px; border-radius: 50%; background: var(--wdl-accent); color: var(--wdl-ink); font-family: var(--wdl-font-head); font-weight: 800; display: grid; place-items: center; font-size: 1rem; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); } .wdl-step h3 { font-size: 1.15rem; } .wdl-step p { margin: 0; color: var(--wdl-muted); font-size: 0.98rem; } .wdl-steps__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .wdl-steps--compact .wdl-section__head { margin-bottom: 1.5rem; } .wdl-areas__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); } .wdl-area-card { margin: 0; } .wdl-area-card a { display: flex; flex-direction: column; height: 100%; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1.25rem; text-decoration: none; color: var(--wdl-ink); transition: transform 0.15s ease, box-shadow 0.15s ease; } .wdl-area-card a:hover { transform: translateY(-3px); box-shadow: var(--wdl-shadow); } .wdl-area-card--home a { border: 2px solid var(--wdl-primary); background: linear-gradient(180deg, #fff, var(--wdl-green-100)); } .wdl-area-card__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; } .wdl-area-card__head .wdl-icon { color: var(--wdl-primary); } .wdl-area-card__name { font-family: var(--wdl-font-head); font-weight: 700; font-size: 1.25rem; color: var(--wdl-dark); } .wdl-area-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 0 0 1rem; } .wdl-area-card__facts div { margin: 0; } .wdl-area-card__facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wdl-muted); font-weight: 600; white-space: nowrap; } .wdl-area-card__facts dd { margin: 0; font-weight: 700; color: var(--wdl-dark); font-size: 1.02rem; } .wdl-area-card__cta { margin-top: auto; color: var(--wdl-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; } .wdl-area-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); background: radial-gradient(90% 70% at 100% 0%, var(--wdl-green-100) 0%, transparent 60%); } .wdl-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 1.5rem 0; max-width: 900px; } @media (min-width: 720px) { .wdl-facts { grid-template-columns: repeat(4, 1fr); } } .wdl-facts li { margin: 0; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius-sm); padding: 1rem; display: flex; flex-direction: column; gap: 0.15rem; } .wdl-facts .wdl-icon { color: var(--wdl-primary); margin-bottom: 0.3rem; } .wdl-facts strong { font-family: var(--wdl-font-head); font-size: 1.25rem; color: var(--wdl-dark); } .wdl-facts span { font-size: 0.85rem; color: var(--wdl-muted); } .wdl-area-info .wdl-card h3 { margin-top: 1.25rem; font-size: 1.1rem; } .wdl-faq__list { display: grid; gap: 0.75rem; } .wdl-faq__item { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius-sm); overflow: hidden; } .wdl-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; font-family: var(--wdl-font-head); font-weight: 600; font-size: 1.05rem; color: var(--wdl-dark); min-height: var(--wdl-tap); } .wdl-faq__item summary::-webkit-details-marker { display: none; } .wdl-faq__item summary .wdl-icon { color: var(--wdl-primary); transition: transform 0.2s ease; } .wdl-faq__item[open] summary { background: var(--wdl-green-100); } .wdl-faq__item[open] summary .wdl-icon { transform: rotate(45deg); } .wdl-faq__answer { padding: 0.9rem 1.25rem 1.25rem; color: var(--wdl-ink); } .wdl-faq__answer p:last-child { margin-bottom: 0; } .wdl-promo { background: var(--wdl-dark); color: #EDF0F7; } .wdl-promo--light { background: var(--wdl-green-100); color: var(--wdl-ink); } .wdl-promo__inner { display: grid; gap: 2rem; align-items: center; } @media (min-width: 900px) { .wdl-promo__inner { grid-template-columns: 1.4fr 1fr; } } .wdl-promo h2 { color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); } .wdl-promo--light h2 { color: var(--wdl-dark); } .wdl-promo__copy p:last-child { margin: 0; opacity: 0.9; } .wdl-promo__code { background: rgba(255, 255, 255, 0.08); border: 1px dashed rgba(255, 255, 255, 0.4); border-radius: var(--wdl-radius); padding: 1.5rem; text-align: center; } .wdl-promo--light .wdl-promo__code { background: #fff; border-color: var(--wdl-primary); } .wdl-promo__label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.8; margin-bottom: 0.5rem; } .wdl-copy { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--wdl-accent); color: var(--wdl-ink); border: 0; border-radius: 14px; padding: 0.8rem 1.4rem; font-family: var(--wdl-font-head); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem); letter-spacing: 0.08em; min-height: 60px; } .wdl-copy:hover { background: #F2B65B; } .wdl-copy.is-copied { background: #2FB36A; color: #fff; } .wdl-copy__hint { display: block; margin-top: 0.6rem; font-size: 0.9rem; opacity: 0.85; } .wdl-cta { padding-block: 0 clamp(2.5rem, 6vw, 5rem); } .wdl-cta__inner { background: var(--wdl-primary); color: #fff; border-radius: 24px; padding: clamp(1.75rem, 4vw, 3rem); display: grid; gap: 1.5rem; align-items: center; max-width: calc(var(--wdl-container) - 2 * clamp(16px, 4vw, 32px)); } @media (min-width: 900px) { .wdl-cta__inner { grid-template-columns: 1.5fr auto; } } .wdl-cta h2 { color: #fff; margin-bottom: 0.3em; } .wdl-cta p { margin: 0; opacity: 0.92; font-size: 1.05rem; } .wdl-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .wdl-cta .wdl-btn--primary { background: var(--wdl-accent); color: var(--wdl-ink); box-shadow: none; } .wdl-cta .wdl-btn--primary:hover { background: #fff; } .wdl-cta .wdl-btn--outline { border-color: rgba(255, 255, 255, 0.7); color: #fff; } .wdl-cta .wdl-btn--outline:hover { background: #fff; color: var(--wdl-dark); } .wdl-promise__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .wdl-promise__item { margin: 0; padding: 0 0 0 0; } .wdl-promise__item h3 { font-size: 1.15rem; margin-bottom: 0.3em; } .wdl-promise__item p { margin: 0; color: var(--wdl-muted); } .wdl-pricing .wdl-table td:last-child, .wdl-pricing .wdl-table th:last-child { text-align: right; white-space: nowrap; } .wdl-seo-copy h2 { font-size: 1.7rem; } .wdl-seo-copy h3 { font-size: 1.25rem; margin-top: 1.5rem; } .wdl-deal-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .wdl-deal-grid li { margin: 0; } .wdl-deal-grid h3 { font-size: 1.2rem; color: var(--wdl-primary); } .wdl-contact-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .wdl-contact-card h3 { font-size: 1.15rem; } .wdl-contact-card p { margin-bottom: 0.5rem; } .wdl-contact-card a { word-break: break-word; font-weight: 600; } .wdl-grades { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 1.5rem 0; } .wdl-grade { margin: 0; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1.25rem; display: flex; flex-direction: column; } .wdl-grade__badge { align-self: flex-start; background: var(--wdl-dark); color: #fff; font-family: var(--wdl-font-head); font-weight: 800; padding: 0.25rem 0.8rem; border-radius: 999px; margin-bottom: 0.75rem; } .wdl-grade h3 { font-size: 1.15rem; margin-bottom: 0.3em; } .wdl-grade p { color: var(--wdl-muted); font-size: 0.95rem; flex: 1; } .wdl-grade__price { font-weight: 700; color: var(--wdl-primary); } .wdl-payment-guide h3 { font-size: 1.2rem; } .wdl-sitemap h2 { font-size: 1.3rem; } .wdl-sitemap ul { list-style: none; padding: 0; } .wdl-sitemap li { margin-bottom: 0.3rem; } .wdl-sitemap .children { padding-left: 1rem; margin-top: 0.3rem; } /* 9. Blog / pages ---------------------------------------------------------- */ .wdl-entry-content > * { max-width: var(--wdl-narrow); } .wdl-entry-content > .alignwide, .wdl-entry-content > .alignfull, .wdl-entry-content > .wdl-section, .wdl-entry-content > .wp-block-columns, .wdl-entry-content > .woocommerce, .wdl-entry-content > .wdl-grid-2, .wdl-entry-content > .wdl-grid-3, .wdl-entry-content > .wdl-contact-cards, .wdl-entry-content > .wdl-grades { max-width: none; } .wdl-entry-content h2 { margin-top: 2rem; } .wdl-entry-content h3 { margin-top: 1.5rem; } .wdl-entry-content img { border-radius: var(--wdl-radius); } .wdl-entry-content .wp-block-table table { background: #fff; } .wdl-entry-content ul li::marker { color: var(--wdl-primary); } .wdl-blog-layout { display: grid; gap: 2.5rem; } @media (min-width: 1000px) { .wdl-blog-layout { grid-template-columns: minmax(0, 1fr) 300px; } } .wdl-post-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .wdl-post-card { margin: 0; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); overflow: hidden; display: flex; flex-direction: column; } .wdl-post-card__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wdl-cream-200); } .wdl-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .wdl-post-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; } .wdl-post-card h2 { font-size: 1.25rem; margin: 0; } .wdl-post-card h2 a { text-decoration: none; color: var(--wdl-dark); } .wdl-post-card h2 a:hover { color: var(--wdl-primary); } .wdl-post-card p { color: var(--wdl-muted); font-size: 0.97rem; margin: 0.3rem 0 0.8rem; flex: 1; } .wdl-post__thumb { margin: 0 0 2rem; border-radius: var(--wdl-radius); overflow: hidden; } .wdl-post__thumb img { width: 100%; display: block; } .wdl-post__footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--wdl-line); } .wdl-post-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .wdl-post-nav a { font-weight: 600; text-decoration: none; padding: 0.5rem 0; display: inline-block; } .wdl-post-nav a:hover { text-decoration: underline; } .pagination, .woocommerce-pagination, .navigation.pagination { margin: 2.5rem 0 0; } .pagination .nav-links, .woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; border: 0; margin: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; float: none; } .page-numbers, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 0.9rem; border-radius: 12px; background: var(--wdl-white); border: 1px solid var(--wdl-line); color: var(--wdl-dark); text-decoration: none; font-weight: 600; float: none; line-height: 1; } .page-numbers.current, .woocommerce nav.woocommerce-pagination ul li span.current, .page-numbers:hover, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--wdl-dark); border-color: var(--wdl-dark); color: #fff; } .pagination .nav-links > .page-numbers.dots { border: 0; background: transparent; } .wdl-404 { text-align: center; padding: 2rem 0; } .wdl-404 .wdl-search { max-width: 520px; margin: 0 auto 1.5rem; } .wdl-404__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .wdl-none { padding: 1rem 0 2rem; } .wdl-none .wdl-search { max-width: 520px; margin-bottom: 1.5rem; } .wdl-comments { margin-top: 3rem; } .comment-list { list-style: none; padding: 0; } .comment-body { background: #fff; border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius-sm); padding: 1rem 1.25rem; margin-bottom: 1rem; } .wp-block-button__link { border-radius: 999px; } .wp-block-image img { border-radius: var(--wdl-radius); } .widget { margin-bottom: 2rem; } .widget ul { list-style: none; padding: 0; } .widget li { padding: 0.4rem 0; border-bottom: 1px solid var(--wdl-line); } .widget ul.children { padding-left: 0.9rem; margin-top: 0.3rem; border-left: 2px solid var(--wdl-green-100); } .widget ul.children li { border-bottom: 0; padding: 0.25rem 0; font-size: 0.95rem; } .widget li.cat-parent > a, .widget li.current-cat > a { font-weight: 700; } .widget-title, .widget h2, .widget h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.8rem; } /* 10. Footer -------------------------------------------------------------- */ .wdl-footer { background: var(--wdl-dark); color: #DCE7DF; margin-top: 2rem; padding-bottom: 4.5rem; } .wdl-footer a { color: #fff; } .wdl-footer a:hover { color: var(--wdl-accent); } .wdl-footer__help { background: var(--wdl-primary); color: #fff; } .wdl-footer__help-inner { display: grid; gap: 1.25rem; align-items: center; padding-block: clamp(1.75rem, 4vw, 2.75rem); } @media (min-width: 900px) { .wdl-footer__help-inner { grid-template-columns: 1fr auto; } } .wdl-footer__help h2 { color: #fff; margin-bottom: 0.2em; font-size: 1.6rem; } .wdl-footer__help p { margin: 0; opacity: 0.92; } .wdl-footer__help-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .wdl-footer__help-actions .wdl-btn { max-width: 100%; word-break: break-all; } .wdl-footer .wdl-btn--light { color: var(--wdl-dark); } .wdl-footer .wdl-btn--light:hover { color: var(--wdl-ink); } .wdl-footer__grid { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; } @media (min-width: 720px) { .wdl-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .wdl-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; } } .wdl-footer__col h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } .wdl-footer__about .wdl-logo-svg text { fill: #fff; } .wdl-footer__about .wdl-logo-svg text:last-of-type { fill: var(--wdl-accent); } .wdl-footer__about p { margin: 1rem 0; font-size: 0.97rem; } .wdl-footer__facts li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; margin-bottom: 0.4rem; } .wdl-footer__facts .wdl-icon { color: var(--wdl-accent); } .wdl-footer__social { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; } .wdl-footer__social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.3rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; text-decoration: none; font-size: 0.92rem; } .wdl-footer__menu li { margin: 0; } .wdl-footer__menu a { display: block; padding: 0.45rem 0; text-decoration: none; font-size: 0.98rem; min-height: 40px; } .wdl-footer__menu a:hover { text-decoration: underline; } .wdl-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: 1.5rem; font-size: 0.88rem; } .wdl-footer__warning { display: flex; gap: 0.5rem; align-items: flex-start; color: #C9D6CD; margin-bottom: 1rem; } .wdl-footer__warning .wdl-icon { color: var(--wdl-accent); flex: none; margin-top: 0.2em; } .wdl-footer__legal-menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-bottom: 0.75rem; } .wdl-footer__legal-menu li { margin: 0; } .wdl-footer__legal-menu a { text-decoration: none; display: inline-block; padding: 0.4rem 0; } .wdl-footer__copy { margin: 0; color: #9FB3A6; } .wdl-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--wdl-white); border-top: 1px solid var(--wdl-line); box-shadow: 0 -6px 20px rgba(14, 26, 47, 0.08); padding-bottom: env(safe-area-inset-bottom); } .wdl-bottom-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 60px; min-width: 0; padding: 0 2px; text-decoration: none; color: var(--wdl-muted); font-size: 0.72rem; font-weight: 600; } .wdl-bottom-bar a[aria-current], .wdl-bottom-bar a:hover { color: var(--wdl-primary); } .wdl-bottom-bar__cart { color: var(--wdl-primary) !important; } .wdl-bottom-bar__cart .wdl-icon { background: var(--wdl-green-100); border-radius: 10px; padding: 3px; width: 30px; height: 30px; } @media (min-width: 900px) { .wdl-bottom-bar { display: none; } .wdl-footer { padding-bottom: 0; } } .wdl-totop { position: fixed; right: 16px; bottom: 80px; z-index: 790; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--wdl-dark); color: #fff; box-shadow: var(--wdl-shadow); display: grid; place-items: center; } .wdl-totop[hidden] { display: none; } @media (min-width: 900px) { .wdl-totop { bottom: 24px; right: 24px; } } /* 11. Age gate ------------------------------------------------------------ */ .wdl-age-gate { position: fixed; inset: 0; z-index: 20000; background: rgba(14, 26, 47, 0.92); backdrop-filter: blur(14px); display: grid; place-items: center; padding: 1rem; overflow-y: auto; } .wdl-age-gate[hidden] { display: none; } .wdl-age-gate__dialog { background: var(--wdl-bg); border-radius: 24px; padding: clamp(1.5rem, 4vw, 2.75rem); max-width: 560px; width: 100%; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); } .wdl-age-gate__logo { margin-bottom: 1rem; } .wdl-age-gate h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); } .wdl-age-gate p { color: var(--wdl-muted); } .wdl-age-gate__actions { display: grid; gap: 0.75rem; margin: 1.5rem 0 1rem; } .wdl-age-gate__fine { font-size: 0.82rem; margin: 0; } body.wdl-age-locked { overflow: hidden; } /* 12. WooCommerce ---------------------------------------------------------- */ .woocommerce .wdl-container, .woocommerce-page .wdl-container { } .wdl-shop-layout { display: grid; gap: 2.5rem; } .wdl-shop-layout > * { min-width: 0; } .wdl-pills { max-width: 100%; } @media (min-width: 1000px) { .wdl-shop-layout { grid-template-columns: 260px minmax(0, 1fr); } .wdl-shop-layout__side { order: -1; } } .wdl-shop-header { margin: 0.5rem 0 1.25rem; } .wdl-shop-header__title { margin-bottom: 0.3em; } .wdl-shop-header__intro { color: var(--wdl-muted); font-size: 1.05rem; max-width: 760px; margin: 0 0 1rem; } .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { margin: 0; color: var(--wdl-muted); font-size: 0.95rem; float: none; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { margin: 0; float: none; } .woocommerce .woocommerce-ordering select { min-width: 220px; min-height: 48px; padding-block: 0.5rem; } .wdl-shop-toolbar, .woocommerce-notices-wrapper + .woocommerce-result-count { display: flex; } .woocommerce .woocommerce-result-count + .woocommerce-ordering { margin-top: -2.5rem; } @media (max-width: 719px) { .woocommerce .woocommerce-result-count + .woocommerce-ordering { margin-top: 0.5rem; } .woocommerce .woocommerce-ordering select { width: 100%; } } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products, .woocommerce-page ul.products, .wc-block-grid__products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } @media (min-width: 720px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } } @media (min-width: 1100px) { .woocommerce ul.products.columns-4, .woocommerce-page ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .wdl-shop-no-sidebar .woocommerce ul.products.columns-3, .woocommerce ul.products.columns-3.wdl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; clear: none !important; position: relative; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--wdl-shadow); } .woocommerce ul.products li.product .onsale, .woocommerce span.onsale { display: none; } .wdl-product-card__media { position: relative; background: var(--wdl-cream-200); aspect-ratio: 1 / 1; overflow: hidden; } .wdl-product-card__media a { display: block; height: 100%; } .wdl-product-card__media img, .woocommerce ul.products li.product a img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; display: block; transition: transform 0.3s ease; } .woocommerce ul.products li.product:hover .wdl-product-card__media img { transform: scale(1.04); } .wdl-product-card__media .wdl-badges { position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem; z-index: 2; } .wdl-product-card__body { padding: 0.9rem 0.9rem 1rem; display: flex; flex-direction: column; flex: 1; gap: 0.3rem; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product h2 { font-family: var(--wdl-font-head); font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--wdl-dark); padding: 0; margin: 0; } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { text-decoration: none; } .woocommerce ul.products li.product .woocommerce-loop-product__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--wdl-dark); font-family: var(--wdl-font-head); font-weight: 700; font-size: 1.05rem; margin: 0.15rem 0 0.4rem; display: block; } .woocommerce ul.products li.product .price del, .woocommerce div.product p.price del { color: var(--wdl-muted); font-weight: 500; opacity: 0.8; font-size: 0.9em; margin-right: 0.3rem; } .woocommerce ul.products li.product .price ins, .woocommerce div.product p.price ins { text-decoration: none; color: var(--wdl-danger); } .woocommerce ul.products li.product .star-rating { margin: 0 0 0.25rem; font-size: 0.8em; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin-top: auto; position: relative; z-index: 2; width: 100%; min-height: 48px; font-size: 0.95rem; padding: 0.5rem 1rem; box-shadow: none; } .woocommerce ul.products li.product .button.loading { opacity: 0.6; } .woocommerce ul.products li.product .button.added { display: none; } .woocommerce ul.products li.product .added_to_cart { background: var(--wdl-dark); color: #fff; margin-top: 0.4rem; } .woocommerce ul.products li.product .added_to_cart::after { content: " →"; } .woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--wdl-accent); } .woocommerce .products .star-rating { display: inline-block; } .woocommerce ul.products li.product-category .wdl-product-card__body, .woocommerce ul.products li.product-category h2 { text-align: center; } .woocommerce ul.products li.product-category mark { background: transparent; color: var(--wdl-muted); font-weight: 500; } /* Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { border-top: 0 !important; border-radius: var(--wdl-radius-sm); padding: 1rem 1.25rem 1rem 3.4rem !important; margin: 0 0 1.5rem !important; background: var(--wdl-success-bg) !important; color: var(--wdl-dark) !important; font-weight: 500; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; box-shadow: var(--wdl-shadow-sm); list-style: none; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 50% !important; transform: translateY(-50%); left: 1.1rem !important; font-size: 1.3rem; } .woocommerce-message::before { color: var(--wdl-primary) !important; } .woocommerce-info { background: var(--wdl-warn-bg) !important; } .woocommerce-info::before { color: var(--wdl-accent-700) !important; } .woocommerce-error { background: var(--wdl-danger-bg) !important; color: var(--wdl-danger) !important; } .woocommerce-error::before { color: var(--wdl-danger) !important; } .woocommerce-error li { margin: 0; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { order: 2; margin-left: auto; float: none !important; min-height: 44px; font-size: 0.92rem; box-shadow: none; } .woocommerce-NoticeGroup .woocommerce-error { display: block; } .woocommerce-store-notice, p.demo_store { background: var(--wdl-accent); color: var(--wdl-ink); font-weight: 600; } /* Single product */ .woocommerce div.product { position: relative; } .woocommerce div.product .product_title { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); margin-bottom: 0.4rem; } .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page div.product div.images { margin-bottom: 2rem; } .woocommerce div.product div.images img { border-radius: var(--wdl-radius); } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { border-radius: var(--wdl-radius); overflow: hidden; background: var(--wdl-cream-200); } .woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; } .woocommerce div.product div.images .flex-control-thumbs li { width: 72px; float: none; margin: 0; } .woocommerce div.product div.images .flex-control-thumbs img { border-radius: 10px; opacity: 0.6; border: 2px solid transparent; } .woocommerce div.product div.images .flex-control-thumbs img.flex-active, .woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; border-color: var(--wdl-primary); } .woocommerce div.product div.images .woocommerce-product-gallery__trigger { top: 0.75rem; right: 0.75rem; border-radius: 50%; } @media (min-width: 900px) { .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page div.product div.images { width: 46%; } .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page div.product div.summary { width: 50%; } } .woocommerce div.product div.summary { margin-bottom: 2.5rem; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.6rem; margin-bottom: 1rem; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--wdl-muted); font-size: 1.02rem; margin-bottom: 1.25rem; } .woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 1.2rem; } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1rem; } .woocommerce div.product form.cart.variations_form { display: block; } .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .woocommerce div.product form.cart div.quantity { float: none; margin: 0; } .woocommerce div.product form.cart .button { flex: 1 1 200px; min-width: 0; min-height: 58px; font-size: 1.1rem; margin: 0; float: none; } .woocommerce div.product form.cart .variations { margin-bottom: 1rem; border: 0; } .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { display: block; padding: 0; border: 0; text-align: left; line-height: 1.4; } .woocommerce div.product form.cart .variations th.label { padding-bottom: 0.35rem; } .woocommerce div.product form.cart .variations th.label label { font-size: 1rem; } .woocommerce div.product form.cart .variations td.value { margin-bottom: 0.9rem; } .woocommerce div.product form.cart .variations select { max-width: 100%; min-width: 0; margin: 0; } .woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: 0.4rem; font-size: 0.9rem; } .woocommerce div.product form.cart .woocommerce-variation-price { margin-bottom: 0.75rem; } .woocommerce div.product form.cart .woocommerce-variation-price .price { font-size: 1.5rem; } .woocommerce div.product form.cart .woocommerce-variation-description p { color: var(--wdl-muted); font-size: 0.95rem; } .woocommerce div.product .product_meta { font-size: 0.92rem; color: var(--wdl-muted); border-top: 1px solid var(--wdl-line); padding-top: 1rem; margin-top: 1.25rem; } .woocommerce div.product .product_meta > span { display: block; margin-bottom: 0.3rem; } .woocommerce div.product .stock.in-stock { color: var(--wdl-primary); font-weight: 600; } .woocommerce div.product .stock.out-of-stock { color: var(--wdl-danger); font-weight: 600; } .wdl-trust-box { background: var(--wdl-green-100); border-radius: var(--wdl-radius); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; } .wdl-trust-box ul { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; } .wdl-trust-box li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; font-size: 0.97rem; } .wdl-trust-box .wdl-icon { color: var(--wdl-primary); margin-top: 0.15em; } .wdl-trust-box p { margin: 0; font-size: 0.95rem; } .wdl-trust-box p a { font-weight: 600; } /* Quantity */ .woocommerce .quantity, .woocommerce-cart table.cart td.product-quantity .quantity { display: inline-flex; align-items: center; border: 2px solid var(--wdl-line); border-radius: 999px; background: var(--wdl-white); overflow: hidden; } .woocommerce .quantity .qty { width: 64px; min-height: 52px; border: 0; border-radius: 0; text-align: center; font-weight: 700; font-size: 1.1rem; padding: 0 0.25rem; -moz-appearance: textfield; box-shadow: none !important; } .woocommerce .quantity .qty::-webkit-outer-spin-button, .woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wdl-qty-btn { width: 50px; min-height: 52px; border: 0; background: transparent; color: var(--wdl-dark); font-size: 1.5rem; font-weight: 600; line-height: 1; display: grid; place-items: center; } .wdl-qty-btn:hover { background: var(--wdl-green-100); color: var(--wdl-primary); } .woocommerce .quantity.hidden { display: none; } /* Tabs */ .woocommerce div.product .woocommerce-tabs { clear: both; margin-bottom: 2.5rem; } .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--wdl-line); overflow: visible; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; float: none; box-shadow: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: 52px; padding: 0.5rem 1.1rem; color: var(--wdl-muted); font-weight: 600; font-family: var(--wdl-font-head); border-bottom: 3px solid transparent; margin-bottom: -1px; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wdl-dark); border-bottom-color: var(--wdl-primary); } .woocommerce div.product .woocommerce-tabs .panel { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: clamp(1.25rem, 3vw, 2rem); } .woocommerce div.product .woocommerce-tabs .panel h2:first-child { font-size: 1.4rem; } .woocommerce table.shop_attributes { border: 0; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border: 0; border-bottom: 1px solid var(--wdl-line); padding: 0.7rem 0.5rem; font-style: normal; background: transparent; } .woocommerce table.shop_attributes td p { padding: 0; margin: 0; } .woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 { font-size: 1.6rem; margin-bottom: 0.5rem; } .woocommerce #reviews #comments ol.commentlist li img.avatar { border-radius: 50%; } .woocommerce #reviews #comments ol.commentlist li .comment-text { border-radius: var(--wdl-radius-sm); border-color: var(--wdl-line); } .woocommerce #review_form #respond p.comment-form-rating .stars a { color: var(--wdl-accent); } /* Cart */ .woocommerce-cart .wdl-main .wdl-container, .woocommerce-checkout .wdl-main .wdl-container { max-width: 1120px; } .woocommerce-cart .wdl-page-header h1, .woocommerce-checkout .wdl-page-header h1 { text-align: left; } .woocommerce table.shop_table { border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); border-collapse: separate; border-spacing: 0; background: var(--wdl-white); overflow: hidden; margin-bottom: 1.5rem; } .woocommerce table.shop_table th { background: var(--wdl-green-100); border: 0; border-bottom: 1px solid var(--wdl-line); padding: 0.9rem 1rem; } .woocommerce table.shop_table td { border: 0; border-bottom: 1px solid var(--wdl-line); padding: 1rem; } .woocommerce table.shop_table tr:last-child td { border-bottom: 0; } .woocommerce table.shop_table td.product-name a { text-decoration: none; font-weight: 600; color: var(--wdl-dark); } .woocommerce table.shop_table td.product-name .variation { margin-top: 0.3rem; font-size: 0.9rem; color: var(--wdl-muted); display: grid; grid-template-columns: auto 1fr; gap: 0 0.4rem; } .woocommerce table.shop_table td.product-name .variation dt, .woocommerce table.shop_table td.product-name .variation dd { margin: 0; float: none; padding: 0; } .woocommerce table.shop_table td.product-name .variation dd p { margin: 0; } .woocommerce-cart table.cart img { width: 84px; border-radius: 12px; } .woocommerce a.remove { width: 44px; height: 44px; line-height: 44px; border-radius: 50%; color: var(--wdl-danger) !important; font-size: 1.6rem; background: var(--wdl-danger-bg); } .woocommerce a.remove:hover { background: var(--wdl-danger) !important; color: #fff !important; } .woocommerce-cart table.cart td.actions { padding: 1rem; background: var(--wdl-bg); } .woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; float: none; margin-bottom: 0.75rem; } .woocommerce-cart table.cart td.actions .coupon label { position: static !important; clip: auto; clip-path: none; height: auto; white-space: normal; display: block; width: 100%; margin: 0; font-size: 0.95rem; font-weight: 600; text-align: left; } .woocommerce-cart table.cart td.actions .coupon .input-text { width: min(100%, 240px) !important; min-height: 52px; padding: 0.6rem 1rem !important; border: 2px solid var(--wdl-line) !important; border-radius: 999px !important; float: none; margin: 0; } .woocommerce-cart table.cart td.actions .coupon .button { min-height: 52px; float: none; background: var(--wdl-dark); box-shadow: none; } .woocommerce-cart table.cart td.actions > .button { float: none; margin-left: auto; display: inline-flex; background: var(--wdl-white); color: var(--wdl-dark); border-color: var(--wdl-line); box-shadow: none; } .woocommerce-cart table.cart td.actions > .button:disabled { opacity: 0.5; } /* Small screens: WooCommerce's layout.css floats are reset here (its smallscreen sheet is not loaded). */ @media (max-width: 899px) { .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page div.product div.summary { float: none; width: 100%; } .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-1, .woocommerce-page .col2-set .col-2 { float: none; width: 100%; } .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { float: none; width: 100%; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1.5rem; } .woocommerce .woocommerce-shipping-calculator, .woocommerce-page .woocommerce-shipping-calculator { width: 100%; } .woocommerce table.shop_table_responsive thead, .woocommerce-page table.shop_table_responsive thead { display: none; } .woocommerce table.shop_table_responsive tbody th, .woocommerce-page table.shop_table_responsive tbody th { display: none; } .woocommerce .related ul.products li.product, .woocommerce .upsells ul.products li.product { float: none; width: auto; } .woocommerce #reviews #comments ol.commentlist li .comment-text { margin-left: 0; } .woocommerce #reviews #comments ol.commentlist li img.avatar { position: static; float: left; margin-right: 0.75rem; } } @media (max-width: 767px) { .woocommerce table.shop_table_responsive tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--wdl-line); } .woocommerce table.shop_table_responsive tr td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0; padding: 0.5rem 1rem; text-align: right; } .woocommerce table.shop_table_responsive tr td::before { content: attr(data-title); font-weight: 600; float: none; color: var(--wdl-muted); font-size: 0.9rem; } .woocommerce table.shop_table_responsive tr td.product-remove, .woocommerce table.shop_table_responsive tr td.product-thumbnail { justify-content: flex-start; } .woocommerce table.shop_table_responsive tr td.product-remove::before, .woocommerce table.shop_table_responsive tr td.product-thumbnail::before { display: none; } .woocommerce table.shop_table_responsive tr td.product-name { justify-content: flex-start; text-align: left; font-size: 1.05rem; } .woocommerce table.shop_table_responsive tr td.product-name::before { display: none; } .woocommerce-cart table.cart td.actions { display: block; text-align: left; } .woocommerce-cart table.cart td.actions::before { display: none; } .woocommerce-cart table.cart td.actions > .button { width: 100%; margin-top: 0.5rem; } .woocommerce table.shop_table_responsive tr td.product-quantity .quantity { margin-left: auto; } } .woocommerce .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .woocommerce .cart-collaterals::before, .woocommerce .cart-collaterals::after { display: none; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; width: 100%; max-width: min(520px, 100%); min-width: 0; margin-left: auto; background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1.5rem; } .woocommerce .cart-collaterals .cart_totals h2 { font-size: 1.4rem; } .woocommerce .cart-collaterals .cart_totals table { border: 0; margin-bottom: 1rem; background: transparent; table-layout: fixed; width: 100%; } .woocommerce .cart-collaterals .cart_totals table td, .woocommerce .cart-collaterals .cart_totals table th { overflow-wrap: anywhere; } .woocommerce .cart-collaterals .cart_totals table th { background: transparent; width: 40%; padding-left: 0; } .woocommerce .cart-collaterals .cart_totals table td { padding-right: 0; } .woocommerce .cart-collaterals .cart_totals table tr.order-total th, .woocommerce .cart-collaterals .cart_totals table tr.order-total td { font-size: 1.25rem; border-bottom: 0; } .woocommerce .cart-collaterals .cross-sells { float: none; width: 100%; } .woocommerce .cart-collaterals .cross-sells h2 { font-size: 1.35rem; } .woocommerce ul#shipping_method li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0; margin: 0; text-indent: 0; } .woocommerce ul#shipping_method li label { margin: 0; font-weight: 500; } .woocommerce ul#shipping_method li input { margin-top: 0.4em; } .woocommerce-shipping-destination { font-size: 0.9rem; color: var(--wdl-muted); } .woocommerce-shipping-calculator .button { min-height: 48px; width: 100%; } .wdl-progress { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; } .wdl-progress p { margin: 0 0 0.6rem; font-size: 1rem; } .wdl-progress p strong { color: var(--wdl-primary); } .wdl-progress__bar { height: 12px; border-radius: 999px; background: var(--wdl-cream-200); overflow: hidden; } .wdl-progress__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--wdl-primary), #2FB36A); border-radius: 999px; transition: width 0.4s ease; } .wdl-empty-cart { text-align: center; padding: 2rem 1rem 3rem; } .wdl-empty-cart .cart-empty { justify-content: center; } .wdl-empty-cart .wdl-btn { margin-top: 0.5rem; } .wdl-no-shipping { margin: 0; font-size: 0.95rem; color: var(--wdl-danger); } .woocommerce-cart .wc-proceed-to-checkout { padding: 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { margin-bottom: 0; } /* Checkout */ .wdl-checkout-help { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .wdl-checkout-help__steps { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.6rem; } .wdl-checkout-help__steps span { font-family: var(--wdl-font-head); font-weight: 700; color: var(--wdl-dark); font-size: 0.95rem; } .wdl-checkout-help__steps span:first-child { color: var(--wdl-primary); } .wdl-checkout-help p { margin: 0; display: flex; gap: 0.5rem; align-items: flex-start; color: var(--wdl-muted); font-size: 0.97rem; } .wdl-checkout-help .wdl-icon { color: var(--wdl-primary); margin-top: 0.15em; } .woocommerce form.checkout .col2-set { display: grid; gap: 1.5rem; width: 100%; } .woocommerce form.checkout .col2-set .col-1, .woocommerce form.checkout .col2-set .col-2 { float: none; width: 100%; } .woocommerce .col2-set::before, .woocommerce .col2-set::after { display: none; } .woocommerce-checkout #customer_details, .woocommerce-checkout .woocommerce-checkout-review-order { margin-bottom: 1.5rem; } @media (min-width: 1000px) { .woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr); gap: 2.5rem; align-items: start; } .woocommerce form.checkout > .woocommerce-NoticeGroup, .woocommerce form.checkout > .blockUI { grid-column: 1 / -1; } .woocommerce form.checkout #order_review_heading, .woocommerce form.checkout #order_review { grid-column: 2; } .woocommerce form.checkout #order_review { position: sticky; top: 90px; } .woocommerce form.checkout #customer_details { grid-column: 1; grid-row: span 3; } } .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3, #order_review_heading { font-size: 1.3rem; margin: 0 0 1rem; } .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: clamp(1.1rem, 3vw, 1.75rem); margin-bottom: 1.25rem; } .woocommerce form .form-row { padding: 0; margin: 0 0 1rem; } .woocommerce form .form-row label { display: block; margin-bottom: 0.35rem; line-height: 1.4; } .woocommerce form .form-row label.checkbox { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; } .woocommerce form .form-row .required { color: var(--wdl-danger); text-decoration: none; } .woocommerce form .form-row .optional { color: var(--wdl-muted); font-weight: 400; font-size: 0.85em; } .woocommerce form .form-row.woocommerce-invalid .select2-container, .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--wdl-danger); } .woocommerce form .form-row.woocommerce-validated .select2-container, .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select { border-color: var(--wdl-primary); } .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { width: 100%; float: none; } @media (min-width: 640px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .woocommerce form .form-row-wide, .woocommerce form .form-row.notes, .woocommerce-EditAccountForm fieldset, .woocommerce-EditAccountForm > p:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; } .woocommerce-EditAccountForm fieldset legend { font-weight: 700; margin-bottom: 0.5rem; } } .woocommerce form .form-row textarea { min-height: 110px; } #ship-to-different-address { font-size: 1.05rem; } #ship-to-different-address label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .wdl-age-confirm { background: var(--wdl-warn-bg); border: 1px solid #F5D9A8; border-radius: var(--wdl-radius-sm); padding: 0.9rem 1rem !important; } .wdl-age-confirm label { font-weight: 600 !important; font-size: 1rem; } .woocommerce-checkout #payment { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); } .woocommerce-checkout #payment ul.payment_methods { padding: 1.25rem; border-bottom: 1px solid var(--wdl-line); } .woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 0.75rem; border: 2px solid var(--wdl-line); border-radius: var(--wdl-radius-sm); padding: 0; overflow: hidden; } .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--wdl-primary); background: var(--wdl-green-100); } .woocommerce-checkout #payment ul.payment_methods li > label { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; margin: 0; cursor: pointer; font-weight: 700; font-size: 1.05rem; min-height: 56px; width: 100%; } .woocommerce-checkout #payment ul.payment_methods li > input { position: absolute; opacity: 0; pointer-events: none; } .woocommerce-checkout #payment ul.payment_methods li > label::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--wdl-muted); flex: none; } .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) > label::before { border-color: var(--wdl-primary); background: radial-gradient(var(--wdl-primary) 45%, transparent 50%); } .woocommerce-checkout #payment div.payment_box { background: transparent; margin: 0; padding: 0 1rem 1rem 3rem; font-size: 0.97rem; color: var(--wdl-ink); } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce-checkout #payment div.payment_box p:last-child { margin: 0; } .woocommerce-checkout #payment div.form-row.place-order { padding: 1.25rem; margin: 0; } .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; font-size: 0.95rem; } .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p { color: var(--wdl-muted); font-size: 0.9rem; } .woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th { padding: 0.75rem 1rem; } .woocommerce-checkout-review-order-table .product-name { font-weight: 500; } .woocommerce-checkout-review-order-table tfoot th { background: transparent; } .woocommerce-checkout-review-order-table tfoot .order-total th, .woocommerce-checkout-review-order-table tfoot .order-total td { font-size: 1.2rem; border-top: 2px solid var(--wdl-line); } .woocommerce-checkout .woocommerce-checkout-review-order-table { margin-bottom: 1rem; } .woocommerce-form-coupon-toggle .woocommerce-info { cursor: default; } .woocommerce form.checkout_coupon { border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1.25rem; background: var(--wdl-white); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; } .woocommerce form.checkout_coupon p { margin: 0; width: 100%; } .woocommerce form.checkout_coupon .form-row-first, .woocommerce form.checkout_coupon .form-row-last { width: auto; flex: 1; min-width: 200px; } .woocommerce form.login, .woocommerce form.register { border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1.5rem; background: var(--wdl-white); } /* Thank you */ .woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--wdl-font-head); font-size: 1.5rem; font-weight: 700; color: var(--wdl-primary); background: var(--wdl-green-100); padding: 1.25rem 1.5rem; border-radius: var(--wdl-radius); } .woocommerce ul.order_details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; padding: 0; margin: 1.5rem 0; } .woocommerce ul.order_details::before, .woocommerce ul.order_details::after { display: none; } .woocommerce ul.order_details li { float: none; margin: 0; padding: 1rem; border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius-sm); background: var(--wdl-white); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wdl-muted); } .woocommerce ul.order_details li strong { display: block; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--wdl-dark); margin-top: 0.25rem; } .woocommerce-order .woocommerce-bacs-bank-details, .woocommerce-order .wc-bacs-bank-details-heading { background: var(--wdl-warn-bg); padding: 1rem 1.25rem; border-radius: var(--wdl-radius-sm); } .wdl-thankyou { background: var(--wdl-white); border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius); padding: 1.5rem; margin: 1.5rem 0; } .wdl-thankyou h2 { font-size: 1.4rem; } .woocommerce-customer-details, .woocommerce-order-details { margin-top: 2rem; } .woocommerce .woocommerce-customer-details address { border: 1px solid var(--wdl-line); border-radius: var(--wdl-radius-sm); padding: 1rem 1.25rem; background: var(--wdl-white); } /* My account */ .woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; margin-bottom: 1.5rem; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-height: 46px; padding: 0.4rem 1rem; border-radius: 999px; background: var(--wdl-white); border: 1.5px solid var(--wdl-line); text-decoration: none; font-weight: 600; color: var(--wdl-dark); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--wdl-dark); border-color: var(--wdl-dark); color: #fff; } .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } @media (min-width: 900px) { .woocommerce-account .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; align-items: start; } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; } .woocommerce-account .woocommerce-MyAccount-navigation a { width: 100%; border-radius: 12px; } } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button { min-height: 42px; font-size: 0.9rem; padding-inline: 1rem; } .u-columns.col2-set { display: grid; gap: 1.5rem; } @media (min-width: 900px) { .u-columns.col2-set { grid-template-columns: 1fr 1fr; } } .u-columns.col2-set .col-1, .u-columns.col2-set .col-2 { float: none; width: 100%; max-width: none; } .woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 0.5rem; } .woocommerce-form-login .woocommerce-form-login__submit { width: 100%; } .woocommerce-privacy-policy-text { font-size: 0.9rem; color: var(--wdl-muted); } .woocommerce-info + .woocommerce-form-login, .woocommerce-info + .checkout_coupon { margin-bottom: 1.5rem; } /* Blocks-based cart/checkout compatibility (light touch) */ .wc-block-components-button { background: var(--wdl-primary) !important; border-radius: 999px !important; } .wc-block-components-checkout-step__title, .wc-block-components-title { font-family: var(--wdl-font-head); } /* 13. Text-size + accessibility helpers ----------------------------------- */ .wdl-text-size span::after { content: "A"; font-weight: 800; margin-left: 2px; font-size: 1.1em; } @media (max-width: 899px) { .wdl-text-size span { font-size: 0; } .wdl-text-size span::after { content: "Size A"; font-size: 0.72rem; margin: 0; font-weight: 600; } } html.wdl-text-lg .wdl-text-size, html.wdl-text-xl .wdl-text-size { background: var(--wdl-green-100); color: var(--wdl-primary); } @media (prefers-contrast: more) { :root { --wdl-muted: #3f423f; --wdl-line: #b9b3a5; } } /* 14. Print --------------------------------------------------------------- */ @media print { .wdl-announce, .wdl-header, .wdl-bottom-bar, .wdl-totop, .wdl-footer__help, .wdl-age-gate, .wdl-mobile-nav, .wdl-overlay { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } a { color: #000; text-decoration: underline; } } /* ========================================================================= v1.1 – Section rhythm (alternating backgrounds) & spacing refinements ========================================================================= */ .wdl-section { padding-block: clamp(2.5rem, 5.5vw, 4.5rem); } .wdl-section--white { background: var(--wdl-white); } .wdl-section--cream { background: var(--wdl-bg); } .wdl-section--mint { background: var(--wdl-green-100); } /* Every section owns its top padding again … */ .wdl-page--full > .wdl-section + .wdl-section:not(.wdl-section--alt) { padding-top: clamp(2.5rem, 5.5vw, 4.5rem); } /* … except when two neighbours share the same background: then they share one gap. */ .wdl-page--full > .wdl-section:not([class*="wdl-section--"]):not(.wdl-promo):not(.wdl-cta) + .wdl-section:not([class*="wdl-section--"]):not(.wdl-promo), .wdl-page--full > .wdl-section--white + .wdl-section--white, .wdl-page--full > .wdl-section--cream + .wdl-section--cream { padding-top: 0; } .wdl-page--full > .wdl-hero + .wdl-usps { padding-top: 0; } .wdl-main--full { padding-bottom: 0; } .wdl-promo, .wdl-section--dark { padding-block: clamp(2.75rem, 6vw, 4.75rem); } .wdl-cta { padding-block: clamp(2.5rem, 5.5vw, 4.5rem); } /* On white sections, cards keep a soft cream outline so they still read as cards */ .wdl-section--white .wdl-cat-tile a, .wdl-section--white .wdl-area-card a, .wdl-section--white .wdl-step, .wdl-section--white .wdl-faq__item, .wdl-section--white .wdl-table { border-color: #E4DED0; } .wdl-section--white .wdl-card, .wdl-section--white .wdl-step { box-shadow: 0 1px 0 rgba(14, 26, 47, 0.04); } /* Buttons under grids/tables get room to breathe */ .wdl-products .wdl-center, .wdl-pricing .wdl-center, .wdl-steps .wdl-center, .wdl-areas .wdl-center, .wdl-faq .wdl-center, .wdl-cats .wdl-center { margin-top: 2.25rem; margin-bottom: 0; } .wdl-center .wdl-btn + .wdl-btn, .wdl-center .wdl-btn + .wdl-link, .wdl-center .wdl-link + .wdl-btn { margin-left: 1rem; } .wdl-hero__actions, .wdl-cta__actions, .wdl-footer__help-actions, .wdl-promo__actions, .wdl-area-hero__actions, .wdl-page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1rem; } .wdl-btn { margin: 0; } /* Category tiles: "Shop now" always sits on the same baseline across a row */ .wdl-cat-tile__body { flex: 1; padding: 0.95rem 1rem 1.1rem; } .wdl-cat-tile__cta { margin-top: auto; padding-top: 0.6rem; } /* Call-to-action card: link is legible on green and vertically centred with the button */ .wdl-cta .wdl-btn--ghost-light { border-color: rgba(255, 255, 255, 0.55); } .wdl-cta .wdl-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.14); } /* "Need a hand" band: light mint so it no longer merges with the green CTA card and dark footer */ .wdl-footer__help { background: var(--wdl-green-100); color: var(--wdl-ink); border-top: 1px solid rgba(14, 26, 47, 0.08); } .wdl-footer__help h2 { color: var(--wdl-dark); } .wdl-footer__help p { opacity: 1; color: var(--wdl-muted); } .wdl-footer__help-inner { padding-block: clamp(2rem, 4vw, 3rem); gap: 1.5rem; } /* Product cards: a little more air between price and button */ .woocommerce ul.products li.product .price { margin: 0.2rem 0 0.75rem; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin-top: auto; } .wdl-product-card__body { gap: 0.35rem; } /* Delivery-area cards: two per row on phones so the list is half as long */ @media (max-width: 599px) { .wdl-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .wdl-area-card a { padding: 1rem 0.9rem; } .wdl-area-card__head { margin-bottom: 0.6rem; } .wdl-area-card__name { font-size: 1.05rem; } .wdl-area-card__facts { gap: 0.5rem 0.6rem; margin-bottom: 0.75rem; } .wdl-area-card__facts dt { font-size: 0.6rem; letter-spacing: 0.03em; } .wdl-area-card__facts dd { font-size: 0.9rem; } .wdl-area-card__cta { font-size: 0.9rem; } } /* Narrow pages: stack the call-to-action so the text is never squeezed. */ .wdl-page--narrow .wdl-cta__inner, .wdl-container--narrow .wdl-cta__inner { grid-template-columns: 1fr; } .wdl-page--narrow .wdl-cta, .wdl-container--narrow .wdl-cta { padding-inline: 0; } .wdl-page--narrow .wdl-cta .wdl-cta__inner { padding: clamp(1.5rem, 3vw, 2.25rem); } .wdl-page--narrow .wdl-cta p { margin-bottom: 0.25rem; } /* Footer help band buttons (band is light, so buttons need dark outlines). */ .wdl-footer__help .wdl-btn--outline { color: var(--wdl-dark); border-color: var(--wdl-dark); background: transparent; } .wdl-footer__help .wdl-btn--outline:hover { color: #fff; background: var(--wdl-dark); border-color: var(--wdl-dark); } .wdl-footer__help .wdl-btn--primary { color: #fff; } .wdl-footer__help .wdl-btn--primary:hover { color: #fff; } /* 30. Midnight Dispatch identity ------------------------------------------ * Langley-specific character on top of the shared component system: * editorial display type, coral eyebrows, hard offset shadows, dot-grid hero, * navy promo/CTA bands. Surrey stays cream/forest-green; this is what makes * the Langley store read as a completely different brand at a glance. * ------------------------------------------------------------------------ */ /* Eyebrow: coral with a short leading rule */ .wdl-eyebrow { position: relative; color: var(--wdl-accent-700); font-weight: 700; letter-spacing: 0.12em; } .wdl-eyebrow::before { content: ""; display: inline-block; width: 26px; height: 3px; background: var(--wdl-accent); border-radius: 2px; margin-right: 0.55rem; vertical-align: middle; } /* Primary button: 2px navy border + hard offset shadow, lift on hover */ .wdl-btn--primary { border: 2px solid var(--wdl-dark); box-shadow: 0 3px 0 var(--wdl-dark); } .wdl-btn--primary:hover { background: var(--wdl-primary-700); border-color: var(--wdl-dark); box-shadow: 0 5px 0 var(--wdl-dark); transform: translateY(-2px); } .wdl-btn--primary:active { transform: translateY(0); box-shadow: 0 2px 0 var(--wdl-dark); } .wdl-btn--accent { border: 2px solid var(--wdl-dark); box-shadow: 0 3px 0 var(--wdl-dark); } .wdl-btn--accent:hover { box-shadow: 0 5px 0 var(--wdl-dark); transform: translateY(-2px); } /* Hero: dot-grid backdrop, framed media cards */ .wdl-hero { background-image: radial-gradient(var(--wdl-line) 1.1px, transparent 1.1px); background-size: 26px 26px; } .wdl-hero__card { border: 2px solid var(--wdl-dark); box-shadow: 10px 10px 0 rgba(59, 79, 224, 0.18); border-radius: 18px; } .wdl-hero__card--sm { border: 2px solid var(--wdl-dark); box-shadow: 7px 7px 0 rgba(59, 79, 224, 0.18); } /* Promo band: navy with coral copy-code button */ .wdl-promo { background: var(--wdl-dark); } .wdl-promo .wdl-copy-code { background: var(--wdl-accent); border-color: var(--wdl-accent); color: #fff; font-weight: 800; } .wdl-promo .wdl-copy-code:hover { background: var(--wdl-accent-700); border-color: var(--wdl-accent-700); } /* Final CTA: indigo card with coral action */ .wdl-cta { background: linear-gradient(135deg, var(--wdl-primary) 0%, var(--wdl-primary-700) 100%); border-radius: 18px; box-shadow: 0 3px 0 var(--wdl-dark), var(--wdl-shadow); } .wdl-cta .wdl-btn--primary { background: var(--wdl-accent); border-color: var(--wdl-dark); box-shadow: 0 3px 0 var(--wdl-dark); } .wdl-cta .wdl-btn--primary:hover { background: var(--wdl-accent-700); box-shadow: 0 5px 0 var(--wdl-dark); } /* Footer help band in soft indigo */ .wdl-footer__help { background: var(--wdl-green-100); border-top: 1px solid var(--wdl-line); } /* Announce bar: navy with coral emphasis */ .wdl-announce strong { color: var(--wdl-accent); } /* Age gate: white card, 2px navy frame over a navy blur */ .wdl-age-gate { background: rgba(14, 26, 47, 0.92); } .wdl-age-gate__card { background: #fff; border: 2px solid var(--wdl-dark); box-shadow: 10px 10px 0 rgba(59, 79, 224, 0.25); border-radius: 18px; } /* Nav cart pill: coral */ .wdl-cart-link { background: var(--wdl-accent); border-radius: 999px; } .wdl-cart-link:hover { background: var(--wdl-accent-700); } /* Section heads: Space Grotesk display weight */ .wdl-section-head h2, .wdl-page-hero h1, .wdl-area-hero h1, h1, h2, h3 { font-family: var(--wdl-font-head); letter-spacing: -0.01em; } /* Product cards: crisper frame on hover */ .wdl-product-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .wdl-product-card:hover { border-color: var(--wdl-primary); box-shadow: 0 3px 0 var(--wdl-primary), var(--wdl-shadow); transform: translateY(-2px); } /* 31. Layout identity v2 – make Langley read as a different SITE, not a * recoloured copy of Surrey: dark editorial hero + ticker, sharp corners, * index-list categories, timeline steps, departure-board area rows, * numbered promises, outlined giant footer wordmark. * ------------------------------------------------------------------------ */ :root { --wdl-radius: 4px; --wdl-radius-sm: 2px; } /* Section heads: left-aligned, editorial */ .wdl-section__head, .wdl-section__head--center { max-width: 680px; margin-left: 0; text-align: left; } .wdl-section__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -0.02em; line-height: 1.08; } /* -- HERO: dark editorial band ------------------------------------------ */ .wdl-hero { background-color: var(--wdl-dark); color: #EDF0F7; background-image: radial-gradient(900px 480px at 85% -10%, rgba(59, 79, 224, 0.42), transparent 60%), radial-gradient(rgba(237, 240, 247, 0.07) 1.1px, transparent 1.1px); background-size: auto, 26px 26px; border-bottom: 3px solid var(--wdl-accent); } .wdl-hero h1 { color: #fff; font-size: clamp(2.7rem, 5.4vw, 4.3rem); line-height: 1.0; letter-spacing: -0.03em; } .wdl-hero h1 em { color: var(--wdl-accent); } .wdl-hero h1 em::after { display: none; } .wdl-hero__sub { color: #AAB6D8; font-size: 1.08rem; max-width: 34rem; } .wdl-chips li { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: #EDF0F7; border-radius: 2px; } .wdl-chips .wdl-icon { color: var(--wdl-accent); } .wdl-hero__promo { background: rgba(255, 107, 74, 0.10); border: 1px solid rgba(255, 107, 74, 0.45); border-left: 4px solid var(--wdl-accent); color: #E9C9BF; border-radius: 4px; } .wdl-hero__promo strong { color: var(--wdl-accent); } .wdl-hero .wdl-btn--primary, .wdl-page-hero .wdl-btn--primary, .wdl-area-hero .wdl-btn--primary { background: #fff; color: var(--wdl-dark); border-color: #fff; box-shadow: 0 3px 0 var(--wdl-accent); } .wdl-hero .wdl-btn--primary:hover, .wdl-page-hero .wdl-btn--primary:hover, .wdl-area-hero .wdl-btn--primary:hover { background: var(--wdl-green-100); box-shadow: 0 5px 0 var(--wdl-accent); } .wdl-hero .wdl-btn--outline, .wdl-page-hero .wdl-btn--outline, .wdl-area-hero .wdl-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); } .wdl-hero .wdl-btn--outline:hover, .wdl-page-hero .wdl-btn--outline:hover, .wdl-area-hero .wdl-btn--outline:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .wdl-hero__card, .wdl-hero__card--sm { border-color: #fff; border-radius: 8px; box-shadow: 12px 12px 0 rgba(59, 79, 224, 0.55); } .wdl-hero__card--sm { box-shadow: 8px 8px 0 rgba(59, 79, 224, 0.55); } .wdl-hero__badge { background: var(--wdl-accent); color: #fff; border-radius: 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); } .wdl-hero__badge .wdl-icon { color: #fff; } /* -- Ticker strip under the hero ---------------------------------------- */ .wdl-ticker { background: var(--wdl-accent); color: #fff; overflow: hidden; } .wdl-ticker__track { display: flex; width: max-content; padding: 0.6rem 0; animation: wdl-ticker-scroll 30s linear infinite; font-family: var(--wdl-font-head); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; } .wdl-ticker__track span { white-space: nowrap; } @keyframes wdl-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .wdl-ticker__track { animation: none; } } /* -- Page / area heroes: navy bands on every inner page ------------------ */ .wdl-page-hero, .wdl-area-hero { background-color: var(--wdl-dark); color: #EDF0F7; background-image: radial-gradient(800px 300px at 90% -20%, rgba(59, 79, 224, 0.42), transparent 60%); border-bottom: 3px solid var(--wdl-accent); } .wdl-page-hero h1, .wdl-area-hero h1 { color: #fff; } .wdl-page-hero .wdl-eyebrow, .wdl-area-hero .wdl-eyebrow { color: var(--wdl-accent); } .wdl-page-hero .wdl-lead, .wdl-area-hero .wdl-lead { color: #AAB6D8; } .wdl-facts li { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); } .wdl-facts .wdl-icon { color: var(--wdl-accent); } .wdl-facts strong { color: #fff; } .wdl-facts span { color: #9AA5C6; } /* -- Categories: numbered index rows (Surrey uses photo tiles) ----------- */ .wdl-cats__grid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 860px; counter-reset: wdlcat; } @media (min-width: 900px) { .wdl-cats__grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; } } .wdl-cats__grid li { counter-increment: wdlcat; } .wdl-cat-tile a { flex-direction: row; align-items: center; gap: 1rem; border: 0; border-bottom: 1px solid var(--wdl-line); border-radius: 0; padding: 0.85rem 0.25rem; background: transparent; } .wdl-cat-tile a:hover { background: var(--wdl-green-100); box-shadow: none; transform: none; } .wdl-cat-tile__img { width: 70px; height: 70px; aspect-ratio: 1 / 1; flex: none; border-radius: 4px; } .wdl-cat-tile__body { display: flex; flex-direction: row; align-items: baseline; gap: 0.55rem; flex: 1; min-width: 0; } .wdl-cat-tile__body::before { content: counter(wdlcat, decimal-leading-zero); font-family: var(--wdl-font-head); font-weight: 800; font-size: 0.95rem; color: var(--wdl-primary); flex: none; } .wdl-cat-tile__name { font-size: 1.22rem; } .wdl-cat-tile__count { font-size: 0.85rem; } .wdl-cat-tile__cta { margin: 0 0 0 auto; flex: none; } /* -- Steps: vertical timeline (Surrey uses 4 side-by-side cards) --------- */ .wdl-steps__list { display: grid !important; grid-template-columns: 1fr !important; max-width: 760px; gap: 0; } .wdl-step { display: grid; grid-template-columns: 64px 1fr; gap: 1.25rem; border: 0; border-bottom: 1px solid var(--wdl-line); border-radius: 0; background: transparent; padding: 1.4rem 0.25rem; } .wdl-step:last-child { border-bottom: 0; } .wdl-step__icon { display: none; } .wdl-step__num { position: static; width: 52px; height: 52px; border-radius: 0; background: transparent; color: transparent; -webkit-text-stroke: 2px var(--wdl-primary); font-size: 2.1rem; font-weight: 800; box-shadow: none; display: grid; place-items: center; } .wdl-step h3 { font-size: 1.25rem; grid-column: 2; grid-row: 1; } .wdl-step p { grid-column: 2; grid-row: 2; } .wdl-steps__cta { justify-content: flex-start; } /* -- Delivery areas: departure-board rows (Surrey uses a card grid) ------ */ .wdl-areas__grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: 980px; } .wdl-area-card a { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 4px; } .wdl-area-card a:hover { transform: none; box-shadow: 4px 4px 0 var(--wdl-green-200); border-color: var(--wdl-primary); } .wdl-area-card__head { margin: 0; flex: 1; min-width: 180px; } .wdl-area-card__name { font-family: var(--wdl-font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; } .wdl-area-card__facts { display: flex; gap: 1.9rem; margin: 0; flex-wrap: wrap; } .wdl-area-card__facts div { display: flex; flex-direction: column; } .wdl-area-card__facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--wdl-muted); } .wdl-area-card__facts dd { margin: 0; font-family: var(--wdl-font-head); font-weight: 700; } .wdl-area-card__facts div:first-child dd { color: var(--wdl-primary); font-size: 1.2rem; } .wdl-area-card__cta { margin: 0 0 0 auto; flex: none; font-weight: 700; } .wdl-area-card--home a { background: var(--wdl-dark); border-color: var(--wdl-dark); border-left: 5px solid var(--wdl-accent); color: #EDF0F7; } .wdl-area-card--home .wdl-area-card__facts dd { color: #fff; } .wdl-area-card--home .wdl-area-card__facts div:first-child dd { color: var(--wdl-accent); } .wdl-area-card--home .wdl-area-card__facts dt { color: #9AA5C6; } .wdl-area-card--home .wdl-area-card__cta { color: var(--wdl-accent); } .wdl-area-card--home .wdl-pill { background: var(--wdl-accent); color: #fff; border-color: var(--wdl-accent); } @media (max-width: 640px) { .wdl-area-card a { flex-direction: column; align-items: flex-start; gap: 0.6rem; } .wdl-area-card__cta { margin-left: 0; } } /* -- Promise: ghost numbers instead of icons (Surrey shows icons) -------- */ .wdl-promise__icon { display: none; } .wdl-promise__grid { counter-reset: wdlpromise; } .wdl-promise__item { counter-increment: wdlpromise; border-top: 3px solid var(--wdl-line); padding-top: 1rem; } .wdl-promise__item::before { content: counter(wdlpromise, decimal-leading-zero); display: block; font-family: var(--wdl-font-head); font-weight: 800; font-size: 2.3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--wdl-primary); margin-bottom: 0.6rem; } /* -- USPs: squared icon frames ------------------------------------------- */ .wdl-usp__icon { border-radius: 4px; border: 2px solid var(--wdl-dark); } /* -- Pricing table: navy header, zebra rows -------------------------------- */ .wdl-table th { background: var(--wdl-dark); color: #fff; } .wdl-table tbody tr:nth-child(odd) { background: var(--wdl-green-100); } /* -- Product cards: sharper, heavier hover --------------------------------- */ .wdl-product-card:hover { box-shadow: 4px 4px 0 var(--wdl-primary); } /* -- Footer: giant outlined wordmark --------------------------------------- */ .wdl-footer__wordmark { font-family: var(--wdl-font-head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.9rem, 6vw, 5.4rem); line-height: 0.95; color: transparent; -webkit-text-stroke: 1.5px rgba(237, 240, 247, 0.35); padding: 2.2rem 0 1.2rem; white-space: nowrap; overflow: hidden; user-select: none; }