/* ========================================================================== DOT Made — theme.css Design tokens + native chrome (header, nav, drawer, bottom nav). Footer lives in footer.css; product cards / rails / shop in woocommerce.css. ========================================================================== */ :root { /* Motion (design review): strong custom curves, short UI durations. */ --dm-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* entering/exiting, press */ --dm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* moving on screen */ --dm-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* drawers and sheets opening */ --dm-green: #74be72; --dm-green-dark: #5fa85b; --dm-green-tint: #f1f8f0; --dm-orange: #e8552b; --dm-orange-tint: #fbece8; --dm-ink: #2e3338; --dm-body: #4a525b; --dm-muted: #8a9099; --dm-line: #eceef0; --dm-line-strong: #e2e5e9; --dm-bg: #f6f7f9; --dm-card: #ffffff; --dm-star: #f5a623; --dm-dark: #2e3338; --dm-radius: 11px; --dm-radius-lg: 14px; --dm-maxw: 1280px; --dm-gutter: 24px; /* 16px at ≤768px — see the mobile block */ --dm-gap: 14px; --dm-shadow: 0 8px 24px rgba(40, 50, 60, 0.10); --dm-shadow-hover: 0 12px 30px rgba(40, 50, 60, 0.16); --dm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --dm-display: "Poppins", var(--dm-font); } *, *::before, *::after { box-sizing: border-box; } /* Belt-and-suspenders: no single widget's internal scroll row should ever be able to widen the whole page. Anything that overflows horizontally (a flex/grid item that ignores its container, a fixed-width row, etc.) gets clipped here instead of dragging html/body into horizontal scroll. This does not affect any element's own intentional overflow-x:auto scrollers (e.g. Product Rail's horizontal-scroll mode, Departments Menu's pill row) — those still scroll internally as designed. `clip`, not `hidden`: with `hidden` on both html and body, body became its own scroll container and every `position: sticky` on the site silently stopped working (the archive sidebar, the mobile filter/sort bar). `clip` cuts off the overflow the same way without creating a scroll container. Browsers without `clip` (Safari < 16) keep the `hidden` line. */ html { overflow-x: hidden; overflow-x: clip; } body { margin: 0; overflow-x: hidden; overflow-x: clip; max-width: 100%; font-family: var(--dm-font); color: var(--dm-ink); background: var(--dm-bg); -webkit-font-smoothing: antialiased; line-height: 1.5; } /* Short pages (pay page, notices, empty states) still fill the window: body is a column at least the window's height, and whatever comes right before the footer grows, so the footer sits at the bottom instead of mid-screen. Page wrappers are centred with auto margins, which in a flex column would shrink them to their content, hence width: 100%. Browsers without :has() keep the old behaviour (footer right after the content). */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body > .dm-container { width: 100%; } body > :has(+ .dm-footer) { flex-grow: 1; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } .dm-container { max-width: var(--dm-maxw); margin: 0 auto; padding-inline: var(--dm-gutter); } /* Elementor pages (the homepage) line up with the theme's header/footer. Elementor's own default boxed width is 1140px with 10px side padding, so its content sat ~46px inside the header's edges on wide screens and was off by a few px at every other width. Same two tokens as .dm-container, so they can't drift apart: - every container's default max width = the .dm-container content width (one class + body, to beat the Elementor kit's single-class `.e-con { --container-max-width }` regardless of stylesheet order); - top-level boxed containers get the theme gutter as side padding. A container given its own width/padding in the Elementor editor still keeps it — those per-element rules are more specific than these defaults. */ body .e-con { --container-max-width: calc(var(--dm-maxw) - 2 * var(--dm-gutter)); } body :is(.elementor-section-wrap, [data-elementor-id]) > .e-con-boxed { --padding-left: var(--dm-gutter); --padding-right: var(--dm-gutter); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ---- Logo ---------------------------------------------------------------- */ .dm-logo { display: inline-flex; align-items: center; } /* Prefixed with .dm-logo (not just .dm-logo__img) so this out-specifies WooCommerce core's `.woocommerce img, .woocommerce-page img { height: auto }` reset, which otherwise wins on any page with the woocommerce/woocommerce-page body class (shop, product, cart, checkout) and resets the logo to its raw HTML width/height attributes. */ .dm-logo .dm-logo__img { display: block; height: 36px; width: auto; } /* ---- Utility bar --------------------------------------------------------- */ .dm-utilitybar { background: var(--dm-dark); color: #cfd3d8; font-size: 12.5px; } .dm-utilitybar__inner { display: flex; align-items: center; justify-content: space-between; height: 34px; } .dm-utilitybar__links { display: flex; gap: 18px; } .dm-utilitybar__links a:hover { color: #fff; } /* ---- Header -------------------------------------------------------------- */ /* Not sticky (it was declared sticky but never stuck; see the overflow note above). Pinning it would cost 159px of screen on desktop and cover the mobile filter/sort bar, which sticks to top: 0 on archives. */ .dm-header { background: #fff; border-bottom: 1px solid var(--dm-line); position: relative; z-index: 50; } .dm-header__bar { display: flex; align-items: center; gap: 26px; padding: 14px 24px; } .dm-header__brand { flex: 0 0 auto; } .dm-header__search { flex: 1 1 auto; min-width: 0; } .dm-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; flex-direction: column; gap: 4px; } .dm-burger span { width: 22px; height: 2px; background: var(--dm-ink); border-radius: 2px; } /* Search */ .dm-search { display: flex; height: 46px; border: 2px solid var(--dm-green); border-radius: 9px; overflow: hidden; background: #fff; } .dm-search__cat { border: 0; border-right: 1px solid var(--dm-line); background: #fff; padding: 0 14px; font: 500 14px var(--dm-font); color: var(--dm-body); max-width: 170px; cursor: pointer; } .dm-search__field { flex: 1; border: 0; padding: 0 16px; font: 400 14.5px var(--dm-font); color: var(--dm-ink); outline: none; } .dm-search__field::placeholder { color: #a7adb4; } .dm-search__submit { width: 58px; border: 0; background: var(--dm-green); color: #fff; cursor: pointer; display: grid; place-items: center; } .dm-search__submit:hover { background: var(--dm-green-dark); } /* Actions */ .dm-header__actions { display: flex; gap: 22px; flex: 0 0 auto; } .dm-action { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--dm-body); position: relative; } .dm-action:hover { color: var(--dm-green-dark); } .dm-action svg { color: var(--dm-body); } .dm-cart-count[data-count="0"] { display: none; } /* no "0" badge on an empty basket */ .dm-cart-count { position: absolute; top: -6px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--dm-orange); color: #fff; font: 700 11px var(--dm-font); display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; } /* ---- Department nav ------------------------------------------------------ */ .dm-nav { background: var(--dm-green); } .dm-nav__inner { display: flex; align-items: center; gap: 24px; } .dm-nav__dept { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.12); color: #fff; border: 0; cursor: pointer; font: 600 14px var(--dm-font); padding: 13px 18px; } .dm-nav__menu { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; } .dm-nav__menu a { color: #fff; font: 500 14px var(--dm-font); padding: 12px 0; display: inline-block; } .dm-nav__menu a:hover { opacity: 0.85; } .dm-nav__menu .current-menu-item > a { font-weight: 700; } .dm-nav__clearance { margin-left: auto; background: var(--dm-orange); color: #fff; font: 700 13px var(--dm-font); padding: 7px 14px; border-radius: 5px; align-self: center; } .dm-nav__clearance:hover { filter: brightness(0.95); } /* ---- Free-delivery bar --------------------------------------------------- */ .dm-delivery { background: var(--dm-green-tint); border-top: 1px solid #e2efe1; border-bottom: 1px solid #e2efe1; } .dm-delivery__inner { text-align: center; padding: 9px 24px; font-size: 13px; color: #4a6a48; } .dm-delivery__amt { color: var(--dm-orange); font-weight: 700; } /* Google rating (dotmade-google-reviews prints it on dotmade_delivery_bar_end). */ .dm-delivery__rating { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding-left: 12px; border-left: 1px solid #cfe3cd; vertical-align: -3px; color: #4a6a48; text-decoration: none; } .dm-delivery__rating strong { color: var(--dm-ink); font-weight: 700; } .dm-delivery__rating .dmgr-stars { position: relative; display: inline-block; width: 65px; height: 13px; line-height: 0; } .dm-delivery__rating .dmgr-stars svg { width: 65px; height: 13px; display: block; } .dm-delivery__rating .dmgr-stars__bg { fill: #d9dde2; } .dm-delivery__rating .dmgr-stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; } .dm-delivery__rating .dmgr-stars__fg { fill: var(--dm-star); } @media (hover: hover) and (pointer: fine) { a.dm-delivery__rating:hover span { text-decoration: underline; } } /* ---- Mobile drawer ------------------------------------------------------- */ /* theme.js shows it (.is-visible), then opens it on the next frame (.is-open) so the slide actually plays; closing slides out, then hides. Exit is faster. */ /* Above WooCommerce's store notice bar (z-index 99998), which otherwise covers the drawer's head and close button. */ .dm-drawer { position: fixed; inset: 0; z-index: 100001; display: none; } .dm-drawer.is-visible { display: block; } .dm-drawer__overlay { position: absolute; inset: 0; background: rgba(20, 24, 28, 0.5); border: 0; cursor: pointer; opacity: 0; transition: opacity 200ms var(--dm-ease-out); } .dm-drawer.is-open .dm-drawer__overlay { opacity: 1; transition-duration: 300ms; } .dm-drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(86vw, 340px); background: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 200ms var(--dm-ease-out); box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); padding-top: env(safe-area-inset-top); } .dm-drawer.is-open .dm-drawer__panel { transform: translateX(0); z-index: 1; transition: transform 300ms var(--dm-ease-drawer); } @media (prefers-reduced-motion: reduce) { .dm-drawer__panel, .dm-drawer.is-open .dm-drawer__panel { transform: none; opacity: 0; transition: opacity 150ms ease; } .dm-drawer.is-open .dm-drawer__panel { opacity: 1; } } .dm-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--dm-green); color: #fff; font: 600 15px var(--dm-display); } .dm-drawer__close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .dm-drawer__menu { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; } .dm-drawer__menu a { display: block; padding: 13px 18px; font-size: 14.5px; color: var(--dm-body); border-bottom: 1px solid var(--dm-line); } .dm-drawer__menu a:hover { background: var(--dm-bg); color: var(--dm-green-dark); } /* ---- Bottom nav (mobile) ------------------------------------------------- */ .dm-bottomnav { display: none; } /* ---- Generic page -------------------------------------------------------- */ .dm-page { padding: 32px 24px 0; } /* bottom space: .dm-footer margin (footer.css) */ .dm-entry__title { font-family: var(--dm-display); font-weight: 700; } .dm-empty { color: var(--dm-muted); } /* Blog/Page sidebar (blog posts, archives, search, static Pages — not the homepage or the shop, which has its own sidebar in woocommerce.css). */ .dm-page.dm-page--with-sidebar { display: grid; grid-template-columns: 1fr 280px; align-items: start; gap: 32px; } .dm-page.dm-page--with-sidebar .dm-page__main { min-width: 0; } /* Generic WP widget baseline — first time this theme actually renders core widgets (Categories, Recent Posts, Search, etc.) outside the shop/footer sidebars, which have their own dedicated classes. */ .widget { margin-bottom: 28px; } .widget-title { font: 700 15px var(--dm-display); margin: 0 0 12px; color: var(--dm-ink); } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { padding: 7px 0; border-bottom: 1px solid var(--dm-line); font-size: 13.5px; } .widget a { color: var(--dm-body); } .widget a:hover { color: var(--dm-green-dark); } .widget select, .widget input[type="search"], .widget input[type="text"] { width: 100%; padding: 9px 11px; border: 1px solid var(--dm-line-strong); border-radius: 7px; font: 400 13.5px var(--dm-font); } /* ---- Buttons ------------------------------------------------------------- */ .dm-btn { display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--dm-font); padding: 11px 18px; border-radius: 8px; cursor: pointer; border: 1.5px solid transparent; transition: background 0.15s, color 0.15s, box-shadow 0.15s, scale 160ms var(--dm-ease-out); } .dm-btn--primary { background: var(--dm-orange); color: #fff; } .dm-btn--primary:hover { filter: brightness(0.96); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .dm-header__bar { gap: 16px; } .dm-nav__menu { gap: 16px; } .dm-page.dm-page--with-sidebar { grid-template-columns: 1fr; } } @media (max-width: 768px) { .dm-utilitybar { display: none; } .dm-burger { display: flex; } .dm-header__bar { gap: 12px; flex-wrap: wrap; padding: 10px 16px; } .dm-header__brand { order: 1; } .dm-logo .dm-logo__img { height: 28px; } .dm-header__actions { order: 2; margin-left: auto; gap: 16px; } .dm-action span:not(.dm-cart-count) { display: none; } .dm-header__search { order: 3; flex-basis: 100%; } .dm-search { height: 42px; } .dm-search__cat { display: none; } .dm-nav, .dm-utilitybar__links { display: none; } .dm-delivery__inner { font-size: 11.5px; } .dm-delivery__rating { display: none; } :root { --dm-gutter: 16px; } /* Re-asserted here (not just via the variable) because .dm-page, .dm-delivery__inner etc. set their own 24px padding *after* .dm-container — this later rule is what brings them to 16px. */ .dm-container { padding-inline: var(--dm-gutter); } .dm-bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff; border-top: 1px solid var(--dm-line-strong); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } /* Five equal tap targets (min 44px). The Categories